//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] = "3orientation";
    tagCloudItems[1] = "1photos";
    tagCloudItems[2] = "5alumni";
    tagCloudItems[3] = "2housing";
    tagCloudItems[4] = "5evaluations";
    tagCloudItems[5] = "1stories";
    tagCloudItems[6] = "4blog";
    tagCloudItems[7] = "3updates";
    tagCloudItems[8] = "1stExp";    //DEFAULT
    tagCloudItems[9] = "2internet";


    //preload default index - see array comments above
    var itemIndex = 8;
    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
    var blogDirect = "false"; //we're using this as a flag. In IE, if someone visits a blog, via direct url, the iFrameResize scroller fires quicker than the page load, causing an error. This flag, if true, will cause a timeout to occur prior to the blog loading.

    //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];

        //are you the blog? If so, we're coming from a direct url rather than a tagcloud click
        if (hash == "4blog")
            blogDirect = "true";
    }
    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");

        //reset the blog flag - no sense in having a delay if the user is now clicking through the tag cloud
        blogDirect = "false";
    });


    //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);

        //THIS CALL RESIZES THE IFRAME THAT CONTAINS THE BLOG - IT'S IMPERATIVE THAT THE BLOG REGION MATCH THE STRING BELOW
        if (my == "region04Div01")
            if (blogDirect == "true")   //we came here via direct url
            {
                //show loader gif
                $("#blogLoaderGif").show(); //show the loading gif
                window.setTimeout("resizeCaller()", 4000);
                window.setTimeout("$('#blogLoaderGif').hide()", 3900);  //hide the loading gif
            }
            else    //no timeout needed
                resizeCaller();

        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: 2    //student experience
        });

        jQuery('#lavaLampHorizontal').lavaLamp({
            fx: 'easeOutExpo',
            speed: 800,
            setOnClick: true,
            startItem: a    //passed in
        });
    }


    //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 odd numbered file names - remember portraits are 10 and higher
    {

        topImage_region01 = '';
        bottomImage_region01 = '';

        topImage_region02 = '';
        bottomImage_region02 = '';

        topImage_region03 = '<div id="bottomImage_region03" class="imgDropShadow-portrait" style="float: right;"><div class="imgFakeShadow"><img alt="Study Abroad with CIEE in ' + cityName + '" src="images/programs/' + strProgID + '/15.jpg" /></div></div>';
        bottomImage_region03 = '';

        topImage_region04 = '';
        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