// Globals
var imagePath = "Images/Menu/";
var imageExt = ".jpg";
var topicTabSpacing = 8;
var topicTabWidth = 120;
var currentStyle = "Sun";
var pageCheck = true;
var lastMenu = "";

// Style Arrays - Items must be in the same order as the rules in the stylesheet
//
var SunArray = new Array("BlueSky","DarkWood", "DarkWood", "DarkWood", "DarkWood", "DarkWood", "TreeTops4", "Brick", "GoldWood2", "DarkWood", "DarkWood");
var SunScrollArray = new Array("#7E5855","#B0A07E", "#BAB095");
var MoonArray = new Array("Starfield","DriftWoodStrip03", "SunBackground_Moon", "MoonBackground_Moon", "Driftwood_Background", "DriftWoodStrip03", "NightTreeTops4", "MoonSurfaceStrip03", "MoonSurfaceStrip06", "MoonSurfaceStrip01", "MoonSurfaceStrip01"); 
var MoonScrollArray = new Array("#575757","#B6B6B6", "#FFFFFF");
var TreeArray = new Array("BlueSkySquare","BarkStrip02", "BarkStrip02", "BarkStrip02", "BarkStrip", "BarkStrip02", "TreeBand03", "Sunset01Strip", "TreeRings01Strip","Rainforest01Strip","Rainforest01Strip"); 
var TreeScrollArray = new Array("#81808E","#A5A3B1", "#E9EFEF");

// Current Style and Scroll Arrays
var styleArray = SunArray;
var scrollArray = SunScrollArray;


// Opens the default menu and topic, and performs any other initializations when the main page loads.
//
function LoadSite()
{
    var oStyleSheet=document.styleSheets[0];

    // Make the default menu and topic tabs visible and selected.
    changeMenu("Home", "Home", "Home/Home_Welcome.html");

    // Change the width of the topic tab bar for the Mozilla and Opera browsers.
    // These two browsers use the "cssRules" object.
    if(oStyleSheet.cssRules)
    {
       var rulesColl = oStyleSheet.cssRules;

       // topicTabBar is rule #10
       rulesColl[9].style.width = "930px";
    }

    // Center the content in the site to adjust for different screen resolutions    
    centerContent();
}


// Center the site according to the Body.scrollWidth property to handle 
// different screen resolutions.
function centerContent()
{
    var bodyScrollWidth = document.getElementById("DBody").scrollWidth;
    var mainWidth = parseInt(document.getElementById("Main").style.width);

    // Only center if the scrollWidth is large enough for it to make sense.
    //
    if(bodyScrollWidth > (mainWidth + 2))
    {
         // Determine the new left position for all of the elements.
         var newLeftNum = (bodyScrollWidth - mainWidth) / 2;
         var newLeft = newLeftNum + "px"; 

         // Move all of the main elements in the page.
         document.getElementById("Banner").style.left = newLeft;
         document.getElementById("Menu").style.left = newLeft;
         document.getElementById("Main").style.left = newLeft;
         document.getElementById("conFrame").style.left = (newLeftNum + 12) + "px";
    }
}


// Makes the new menu visible, shows the menu tab as being selected, selects the default topicTab,
// and loads the page.
//
function changeMenu(menuName, topic, newSrc)
{
    // Make the menu visible in the Main Div.
    showMenu(menuName);

    // Show the menu tab as being selected
    selectMenuTab(menuName);

    // Show a topic tab as selected and load the page
    selectAndActivateTab(menuName, topic, newSrc);
}


// Makes the Tab Bar for the selected Menu visible in the Main Div.
//
function showMenu(menuName)
{
    var selectedDiv = (menuName + "Div");  
    var selectedTabBar = (menuName + "TabBar");   
    var otabBarColl = document.getElementById("Main").childNodes;
    var oStyle;

    for(y = 0; y < otabBarColl.length; y++) 
    { 
        if( otabBarColl[y].id == selectedDiv )
        {
            var oStyle = otabBarColl[y].style;
            oStyle.visibility = "visible";

            // Set the spacing of the topic tabs for this menu
            var oTabColl = document.getElementById(selectedTabBar).childNodes;
            setTabSpacing(oTabColl);
        }
        else
        {
            if(otabBarColl[y].tagName == "DIV")
            {
                 oStyle = otabBarColl[y].style;
                 oStyle.visibility = "hidden";
            }
        }
    }
}


// Set the spacing between the topicTabs based on the global variables
// topicTabSpacing and topicTabWidth.
//
function setTabSpacing(oTabColl)
{
    var oStyle;
    var oTab;
    var numItems = oTabColl.length;
    var pos = topicTabSpacing;

    for(t = 0; t < numItems; t++) 
    {
         if(oTabColl[t].style)
         {
             oTab = oTabColl[t];
             oTab.style.left = pos;

             pos = pos + (topicTabWidth + topicTabSpacing);
         }      
    }
}


// Changes the image src of the Menu Tab so that it
// shows as selected.
//
function selectMenuTab(menuName)
{ 
    var menuTabColl = document.getElementById("Menu").childNodes;
    var selectedSrc = (imagePath + currentStyle + "_" + menuName + "_Red" + imageExt); 
    var unselectedSrc;

    for(i = 0; i < menuTabColl.length; i++)
    {
        oMenuTab = menuTabColl[i];

        // Select the new Menu Tab and deselect the others
        if(oMenuTab.id)
        {
             if(oMenuTab.id == menuName)
             {
                oMenuTab.className = "menuTabSelected"; 
                oMenuTab.src = selectedSrc; 
             }
             else
             {
                unselectedSrc = (imagePath + currentStyle + "_" + oMenuTab.id + "_White" + imageExt);

                oMenuTab.className = "menuTab"; 
                oMenuTab.src = unselectedSrc;
             }
        }
    }   
}


// Show a tab as selected and activate it (load it's page) ONLY if it has not already
// been selected.
// Bug Fix 9.25.09: If the menu name is different from the active menu, then select and activate the new tab.
//
function selectAndActivateNewTab(menuName, topic, newSrc)
{
    var activeTopic = getActiveTopicText(menuName);

    if( (activeTopic != topic) || (lastMenu != menuName) )
    {
        selectAndActivateTab(menuName, topic, newSrc);
    }
}


// Show a tab as selected and activate it (load it's page). 
//
function selectAndActivateTab(menuName, topic, newSrc)
{
    // Show the tab as selected and deselect the others
    selectTab(menuName, topic);  

    // Load the new page
    changeSrc(newSrc);
}


// A JanusTitle contains more than one title with the same topic but different menu names.
// This function extracts the regular title from the JanusTitle based on the menu name.
//
function getTitleFromJanusTitle(menu, janusTitle)
{
    var m1;
    var m2;
    var sep;
    var delim = "|";  

    m1 = janusTitle.indexOf(menu);
    sep = janusTitle.indexOf(delim);

    if(m1 > sep)
    {
         var nextSep = janusTitle.indexOf(delim, m1);

         if(nextSep == -1)
         {
             m2 = janusTitle.length;
         }
         else
         {
             m2 = (nextSep - 1);
         }
    }
    else
    {
         m2 = sep;
    }

    return( janusTitle.substring(m1, m2) );
}


// Return the topic text from the active topicTab in a particular Menu.
//
function getActiveTopicText(menuName)
{
   var tabBarName = menuName + "TabBar";

   var oTabColl = document.getElementById(tabBarName).childNodes;
   var activeTopicText = "";

   for(i = 0; i < oTabColl.length; i++) 
   {
      if(oTabColl[i].tagName == "SPAN" && oTabColl[i].className == "topicTabSelected")
      {
          var oTab = oTabColl[i];
          activeTopicText = getObjectText(oTab);

          return(activeTopicText);
      }
   }

   return(activeTopicText);
}


// Returns the text name of the Active Menu
//
function getActiveMenuText()
{
    var omenuColl = document.getElementById("Menu").childNodes;

    for(i = 0; i < omenuColl.length; i++) 
    {
        if( omenuColl[i].className == "menuTabSelected" )
        {
            return(omenuColl[i].id);
        }
    } 
}


// Select a Topic for a menu by it's text and deselect the others.
//
function selectTab(menuName, topic)
{
   var tabBarName = menuName + "TabBar";
   var oTabColl = document.getElementById(tabBarName).childNodes;
   var oTab;
   var topicText;

   for(i = 0; i < oTabColl.length; i++) 
   {
      if(oTabColl[i].tagName == "SPAN" && oTabColl[i].className != "dividerTab")
      {
          oTab = oTabColl[i];
          topicText = getObjectText(oTab);

          if(topicText == topic)
          {
             oTab.className = "topicTabSelected"; 
          }
          else
          {
             oTab.className = "topicTab"; 
          }
      }
   }
}


// Load a page into the frame
function changeSrc(newSrc)
{
    var oFrame = document.getElementById("conFrame");
    oFrame.src = newSrc;
}


// Highlight Topic Tab when the Mouse enters over it.
//
function showHover(oObj)
{
    if(oObj.className != "topicTabSelected")
    {
        oObj.className = "topicTabHover";
    } 
}


// Remove Highlight of a Topic Tab when the Mouse leaves it.
//
function removeHover(oObj)
{
    if(oObj.className != "topicTabSelected")
    {
        oObj.className = "topicTab";
    } 
}


// Change the background image of the Menu Tab so that it changes color.
//
function changeMenuTabColor(oMenuTab, color)
{
    if(oMenuTab.className != "menuTabSelected")
    {
       oMenuTab.src = (imagePath + currentStyle + "_" + oMenuTab.id + "_" + color + imageExt);
    }
}


// Returns the innerText or textContent of an object. This much be branched because some
// browsers support the textContent property instead of the innerText property.
//
function getObjectText(obj)
{
    if(obj.innerText)
    {
         return(obj.innerText);
    }
    else
    {
         return(obj.textContent);
    }
}



// OnPageLoad - Resets the height of the Frame and the Main DIV and resets Menus in the
//              case of BACK or FORWARD
//
function onPageLoad()
{
   // Override this function for external website pages.
   // 
   if(pageCheck == false)
   {
        pageCheck = true;
        return;
   }

   // Get the frame element and the Main element
   var oFrame = document.getElementById("conFrame"); 
   var oMain = document.getElementById("Main");

   // Get the Body element of the page that has been loaded in the Frame and it's Title
   var framesColl = window.frames;
   var oBody = framesColl[0].document.body;
   var TitleText = framesColl[0].document.title; 

   // Determine the offset for Height between the Main Div and the Frame
   var iOffSetHeight = parseInt(oFrame.style.top) - parseInt(oMain.style.top) + 12;


   // RESIZE FRAME and MAIN DIV HEIGHT
   //
   // Resize the Frame Height to fit the content
   oFrame.style.height = oBody.style.height;

   // Calculate the new height for the Main Div and convert it to a string
   var iNewHeight = parseInt(oFrame.style.height) + iOffSetHeight;
   var pxNewHeight = (iNewHeight + "px");

   // Resize the Main container to be a certain offset larger than the Frame
   oMain.style.height = pxNewHeight;


   // RESET MENUS FOR BACK OR FORWARD
   //
   // When a page is loaded in the frame, ensure that the right tab is activated. This is for the case
   // When someone hits Back or Forward.
   //

   // Get the Active Menu and Topic Tab text
   var activeMenuText = getActiveMenuText();

   // If the page has not loaded and this is undefined, then return.
   if(activeMenuText)
   {
        var activeTopicTabText = getActiveTopicText(activeMenuText);
   }
   else
   {
        return;
   }


   // HANDLE JANUS TITLES 
   //
   // Extract the correct title from the Janus Title based on the menu name and replace TitleText.
   // A Janus title has a | in it.
   // 
   var seperator = TitleText.indexOf("|");

   if(seperator != -1)
   {
        if (activeMenuText != lastMenu)
        {
             TitleText = (lastMenu + ":" + activeTopicTabText);
        }
        else
        {
             TitleText = getTitleFromJanusTitle(activeMenuText, TitleText);
        }     
   }


   // Get the Page Menu and Page Title from the TitleText
   //
   var delim = TitleText.indexOf(":");
   var pageMenuText = TitleText.substring(0, delim);
   var pageTopicText = TitleText.substring((delim + 1), TitleText.length);


   // ADJUST THE MENUS TO MATCH THE PAGE TITLE
   //
   // If they are not the same, set the activeMenu to be the same as the page. 
   // If the menus are the same but the Topic Tabs are not, then set the activeTopicTab
   // to be the same as the page.
   //
   if( activeMenuText != pageMenuText )
   {
        // Make the menu visible in the Main Div.
        showMenu(pageMenuText);

        // Show the menu tab as being selected
        selectMenuTab(pageMenuText);
   }
   else if( activeTopicTabText != pageTopicText )
        {
            // Show the topic tab as being selected
            selectTab(pageMenuText, pageTopicText)
        }


   // Store the last menu selected
   lastMenu = pageMenuText;

   // Scroll the Window to the top
   window.scrollTo(0, 0);    
}


// Changes the image src of the Menu Tab when the style changes.
//
function setMenuSrc(newStyle)
{ 
    var menuTabColl = document.getElementById("Menu").childNodes;

    for(i = 0; i < menuTabColl.length; i++)
    {       
        if(menuTabColl[i].className == "menuTabSelected")
        {
           menuTabColl[i].src = (imagePath + newStyle + "_" + menuTabColl[i].id + "_Red" + imageExt);
        }
        else if(menuTabColl[i].className == "menuTab")
             {
                 menuTabColl[i].src = (imagePath + newStyle + "_" + menuTabColl[i].id + "_White" + imageExt);
             }
    }
}


// Change the background image of the Menu Tab so that it changes color.
//
function changeMenuTabColor(oMenuTab, color)
{
    if(oMenuTab.className != "menuTabSelected")
    {
       oMenuTab.src = (imagePath + currentStyle + "_" + oMenuTab.id + "_" + color + imageExt);
    }
}



// Set the current Style, Style Array and Scroll Array 
function setCurrentStyle(newStyle)
{
    // Select the Style and Scroll arrays
    switch (newStyle) 
    {
        case "Sun":
              styleArray = SunArray; 
              scrollArray = SunScrollArray;
              break;

        case "Moon":
              styleArray = MoonArray;
              scrollArray = MoonScrollArray;  
              break;

        case "Tree":
              styleArray = TreeArray;
              scrollArray = TreeScrollArray; 
              break;

        default:
              styleArray = SunArray; 
              scrollArray = SunScrollArray;
              break;
    } 

    // Store the new current style
    currentStyle = newStyle;
}



// Apply a style sheet to the main page.
//
function applyStyles(newStyle)
{
    var rulesColl;    
    var curPath;
    var beginPath;
    var delim;
    var delim2;
    var endPath;
    var oStyleSheet=document.styleSheets[0];
    var ruleNum = 0;
    var oldStyle = currentStyle + "Style";


    // Set the new Style, Style Array and Scroll Array
    setCurrentStyle(newStyle);

    // There are different rules object types in IE (rules) and Mozilla/Opera (cssRules)
    //
    if(oStyleSheet.rules)
    {
       rulesColl = oStyleSheet.rules;
    }
    else
    {
       rulesColl = oStyleSheet.cssRules;
    }

    // Change all background images to the selected style by parsing the current path and inserting
    // the new file name.
    //
    for(i = 0; i < rulesColl.length; i++) 
    {     
        if(rulesColl[i].style.backgroundImage)
        { 
           curPath = rulesColl[i].style.backgroundImage;
           delim = curPath.indexOf(oldStyle);
           beginPath = curPath.substring(0, delim);
           delim2 = curPath.indexOf(imageExt);
           endPath = curPath.substring(delim2, curPath.length);

           rulesColl[i].style.backgroundImage = (beginPath + newStyle + "Style/" + styleArray[ruleNum] + endPath);

           ruleNum++;
        } 

        if(rulesColl[i].style.scrollbarBaseColor)
        {
            rulesColl[i].style.scrollbarBaseColor = scrollArray[0];
            rulesColl[i].style.scrollbarTrackColor = scrollArray[1];
            rulesColl[i].style.scrollbarArrowColor = scrollArray[2];
        }
    } 


   // Set the src of the menu images to match the new style
   setMenuSrc(newStyle);
}