//jQuery.noConflict();
        
$(document).ready(function()    //don't do anything until the page is ready
{
    //Thes array values are determined by the anchor tags in the li in the ul titled 'lavaLampHorizontal' - they consist of the
    //region number & the id of the anchor. If we ever have more than 10 regions, this will have to be changed to check for that
    var tagCloudItems = new Array();
    tagCloudItems[0] = "1academicCulture";
    tagCloudItems[1] = "4immersion";
    tagCloudItems[2] = "1program";   //DEFAULT
    tagCloudItems[3] = "1learn";
    tagCloudItems[4] = "3requirements";
    tagCloudItems[5] = "2langCom";
    tagCloudItems[6] = "3creditDescription";
    tagCloudItems[7] = "3courses";
    tagCloudItems[8] = "4cultural";
    tagCloudItems[9] = "2internship";
    tagCloudItems[10] = "2grading";
    tagCloudItems[11] = "2natureOfClasses";
    tagCloudItems[12] = "4faculty";

    //preload default index - see array comments above
    var itemIndex = 2;
    var regionNumber = tagCloudItems[itemIndex].substring(0, 1); //note: if we have more than 10 regions, this will have to be addressed
    var item = tagCloudItems[itemIndex].substring(1);   //trim off region number

    //get the hash
    var hash = window.location.hash.substring(1);   //trim off the prepending # - leaving us with region number and item itself

    //if we have a hash
    if (hash != "")
    {
        var validHash = "false";
        for (i = 0; i < tagCloudItems.length; i++)
        {
            if (tagCloudItems[i] == hash)  //consists of region number and item itself
            {
                itemIndex = i;
                regionNumber = tagCloudItems[i].substring(0, 1);
                item = tagCloudItems[i].substring(1);
                validHash = "true";
            }
        }

        //if we have an invalid hash, let's fix it up
        if (validHash == "false")
            window.location.hash = tagCloudItems[itemIndex];
    }
    else  //add the hash in if we don't have one
        window.location.hash = tagCloudItems[itemIndex];

    buildImageVariables();
    insertBodyImages();
    loadLamps(itemIndex);
    hidePreLoadedDivs(item, regionNumber);
    
    
    //when a tag_cloud item is clicked
    $("div #tag_cloud_middle a").click(function()
    {
        //who is visible now & who was just clicked?
        var imVisible = $("#rightColumn_content > div:visible").attr("id");
        var imClicked = $(this).attr("class");
        
        if (imVisible != imClicked) //am I visible allready?
        {
            //hide the visible one
            $("#" + imVisible).hide();
            
            //show the one that was clicked - note the lis in the tagcloud have class names
            //that correspond w/the ids of the divs that are put in the rightColumn_content div                
            $("#" + imClicked).show();                    
        }

        moveMeToTheTop($(this));

        //update the hash w/the region number (if we have more than 10 regions, this will have to be addressed)
        //and the item itself
        window.location.hash = $(this).attr("class").substring(7, 8) + $(this).attr("id");
    });


    //Each section of the region is comprised of an outer div (ids of region1Div1, region1Div2, ...) and an inner
    //div (class specific to it's contents - snapshot, subjects, etc...). The anchors in the tag cloud
    //have been given a class, which is the region they belong in, and an id which matches the inner divs
    //class name - eg <a class='region01' id='snapShot'> - the inner div is <div class='snapshot'>. This 
    //set up allows use the function below to bring the clicked contents to the top of the region.
    //NOTE: EACH REGION MUST HAVE AT LEAST 2 SECTIONS!!

    function moveMeToTheTop(t)
    {        
        //I was clicked, what is my parents id (region01Div01, region01Div02, region01Div03, etc...)
        //and am I at the top?
        var my = $("." + t.attr("id")).parent().attr("id")
        //window.alert(my);
        
        var myRegion = my.substring(0, 8);  //what region (region01, region02, etc...)
        //window.alert(myRegion);
        
        var myDiv = my.substring(8);  //what div (Div01, Div02, etc...)
        //window.alert(myDiv);                                
        
        var div01 = ("#" + myRegion + "Div01");
        
        //removeTheImages(myRegion);  //remove the images in what is currently div01
        //insertTheImages('.' + t.attr('id'), myRegion);//insert the images into what will be div01
        //insertTheImages( '.' + t.attr('id'), '.' + $('#' + myRegion + ' span:last').attr("class"), myRegion );
                        
        if ("Div01" != myDiv)   //If I'm not already at the top
        {
            removeTheImages(myRegion);
        
            //take what's in div1, take me
            var a = $(div01).html();
            var b = $("#" + my).html();
            
            //and swap us
            $(div01).html(b);
            $("#" + my).html(a);
            
            //window.alert(t.attr('id') + " " + $('#' + myRegion + ' span:last').attr("class") );
            insertTheImages( '.' + t.attr('id'), '.' + $('#' + myRegion + ' div:last').attr("class"), myRegion );
        }       
    }


    //remove the images from the region passed in
    //Note: we remove the top and bottom - all regions have variables for top or bottom regardless of wether or not they actually
    //have images. Simply a convenience issue to avoid a bunch of testing, and going forward, adding/removing images won't be a
    //headache
    function removeTheImages(r)
    {
        $("#topImage_" + r).remove();
        $("#bottomImage_" + r).remove();
    }


    //insert the images for the region and section (this) passed in
    //Note: we insert the top and bottom - all regions have variables for top or bottom regardless of wether or not they actually
    //have images. Simply a convenience issue to avoid a bunch of testing, and going forward, adding/removing images won't be a
    //headache
    function insertTheImages(topDiv, bottomDiv, r)
    {
         $(topDiv).prepend(eval("topImage_" + r));
         $(bottomDiv).prepend(eval("bottomImage_" + r));
         //window.alert("hello");
    }
        
        
        
    //This function builds the left (vertical) and tagcloud (horizontal) effects
    function loadLamps(a)
    {
        jQuery('#lavaLampVertical').lavaLamp({
		    fx: 'easeOutExpo',
		    speed: 500,		
		    //setOnClick: true,
		    //startItem: 1    //Academics
		    homeTop: -1
	    });	
    	
	    jQuery('#lavaLampHorizontal').lavaLamp({
		    fx: 'easeOutExpo',
		    speed: 800,		
		    setOnClick: true,
		    startItem: a    //passed in
	    });	
	    
	    $("#aLI").addClass("selected");			
    }
    
    
    //build all the image vars for each section - the strProgID, cityName are loaded in the head of the actual page when it's built.
    //see ProgramHeadTagControl.ascx.cs
    //we need to have a top and bottom variable for each region regardless of wether or not they have images
    //NOTE: var means local, no var means global.
    function buildImageVariables()  //use even numbered file names - remember portraits are 10 and higher
    {
        //images in use (2, 4, 6, 8, 10, 12, 14)
        topImage_region01 = '<div id="topImage_region01" class="imgDropShadow-landscape"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/02.jpg" /></div></div>';
        bottomImage_region01 = '<div id="bottomImage_region01" class="imgDropShadow-portrait" style="float: left;"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/10.jpg" /></div></div>';
    
        topImage_region02 = '<div id="topImage_region02" class="imgDropShadow-portrait"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/12.jpg" /></div></div>';
        bottomImage_region02 = '<div id="bottomImage_region02" style="float: left;" class="imgDropShadow-landscape"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/04.jpg" /></div></div>';
    
        topImage_region03 = '<div id="topImage_region03" class="imgDropShadow-landscape"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/06.jpg" /></div></div>';
        bottomImage_region03 = '<div id="bottomImage_region03" class="imgDropShadow-portrait" style="float: left;"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/14.jpg" /></div></div>';
    
        topImage_region04 = '<div id="topImage_region04" class="imgDropShadow-landscape"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/08.jpg" /></div></div>';
        bottomImage_region04 = '';
    
        topImage_region05 = '';
        bottomImage_region05 = '';
    
        topImage_region06 = '';
        bottomImage_region06 = '';
    }
    
    
    //Basically, because all the sections in this tagcloud are loaded when the page is built, we need to hide them all
    //until the user requests them.
    function hidePreLoadedDivs(itemToShow, regionNum)
    {
        //hide them all, then reveal the region passed in and move the item passed in to the top.
        $('#rightColumn_content > div').hide();
        $('#region0' + regionNum).show();
        moveMeToTheTop($('#' + itemToShow));

        //hide costs paragraphs on load
        $('.costDiv').hide();
    }
    
    
     
    
    //This function adds the images to the body of the page - This has to be done independently of the content, as when the 
    //content switches, we want the images to stay in place - otherwise we get a really jumpy looking page that looks unprofessional.
    function insertBodyImages()
    {
        //always the first and last content divs to load  
        insertTheImages( ("." + $('#region01Div01').children('div').attr('class') ), '.' + $('#region01 div:last').attr("class"),  "region01");
        insertTheImages( ("." + $('#region02Div01').children('div').attr('class') ), '.' + $('#region02 div:last').attr("class"),  "region02");
        insertTheImages( ("." + $('#region03Div01').children('div').attr('class') ), '.' + $('#region03 div:last').attr("class"),  "region03");
    }
            
}); //end of $(document).ready