//THIS FILE IS STRICTLY FOR THE HOME PAGE (ciee.org/index.aspx) ONLY.
$(document).ready(function()
{
   swapTimer = ""; //timer variable for mouseover/mouseout functions
   justSelected = "";  //also used in the mouseOvers and mouseOuts
         
   //load mainBarker - check hash tag
   var hash = window.location.hash.substring(1);   //trim off the #
   
   if (hash == "" || !document.getElementById("1" + hash))  //no hash or bogus hash
      justSelected = "#1home";
   else
      justSelected = "#1" + hash;        
               
   //show the content and apply the orange tab
   $(justSelected + "Content").css("display", "block");
   $(justSelected).parent().addClass("selected");
            
   setInterval(pollHash, 300);
   
   //this function checks the hash on the interval set above - this enables the 'forward' and 'back' button
   //to work when the user is perusing the tabs
   function pollHash()
   {
      var h = window.location.hash.substring(1);
      
      if(justSelected == "#1" + h || h == "" || !document.getElementById("1" + h))
         return;  //no change
      else
      {
         justSelected = "#1" + window.location.hash.substring(1);
         var currentlySelected = "#" + $("#navBarUL li.selected a").attr("id");
         swapContent(currentlySelected);            
      }
   }
   
   
   function swapContent(currentlySelected)
   {
         //remove the orange tab and give it to the newly selected item
         $(currentlySelected).parent().removeClass("selected");
         $(justSelected).parent().addClass("selected");
         
         //hide the current content and show the selected. Note: the divs that contain the
         //content are id'd w/the anchor ids + "Content"
         $(currentlySelected + "Content").hide();
         $(justSelected + "Content").show();
   }
   
   
   
  
   
   
   //attach mouseovers to mainBarkerContent threeUp and fourUp li's
   //NOTE: if the page becomes to heavy, to load all at once, we can keep the contents
   //of each section in separate files and load them via ajax. Most likely, we will not
   //need the '<section>Content' divs, as we can just replace the 'mainContent' contents.
   $("ul.threeUp li, ul.fourUp li").mouseover(function()
   {
      var x = $(this).attr("id");
      swapTimer = setTimeout(function()
      {
         threeOrFourUpSwap(x)
      }, 200);
   });

   
   $("ul.threeUp li, ul.fourUp li").mouseout(function()
   {
      clearTimeout(swapTimer);
   });

   
   function threeOrFourUpSwap(t)
   {
      //who is currently showing and who was just 'moused'over
      //note that we're adding the '#' (id designation) here so we don't have to later
      //justSelected ensures that we don't get id's from other sections
      var currentlyShowing = "#" + $(justSelected + "Content li.showing").attr("id");
      var justMoused = "#" + t;
      
      //window.alert(justMoused);
      
      if (currentlyShowing != justMoused)  //if I'm not already showing
      {
         //remove the showing class and give it to the newly moused item
         $(currentlyShowing).removeClass("showing");
         $(justMoused).addClass("showing");
         
         //hide the current content and show the selected. Note: the divs that contain the
         //content are id'd w/the anchor ids + "Content"
         $(currentlyShowing + "Content").hide();
         $(justMoused + "Content").show();
      }
      else
      { 
         ;//do nothing - we're already selected
      }
   }
});