var tabDropDownContent;
var tabMenu;
var tabDropDown;
var tabBackgroundBlock;
var selectedTabGraphic;
var overMenuTab;
var tabContentData = new Array();
if (document.getElementById('tab_content_home') != null) {
   tabContentData['home']     = document.getElementById('tab_content_home').innerHTML;
   tabContentData['kids']     = document.getElementById('tab_content_kids').innerHTML;
   tabContentData['family']   = document.getElementById('tab_content_family').innerHTML;
   tabContentData['strategy'] = document.getElementById('tab_content_strategy').innerHTML;
   tabContentData['party']    = document.getElementById('tab_content_party').innerHTML;
   tabContentData['2player']  = document.getElementById('tab_content_2player').innerHTML;
   tabContentData['card']     = document.getElementById('tab_content_card').innerHTML;
   tabContentData['word']     = document.getElementById('tab_content_word').innerHTML;
   tabContentData['war']      = document.getElementById('tab_content_war').innerHTML;
   tabContentData['puzzles']  = document.getElementById('tab_content_puzzles').innerHTML;
}

//=============================================================================
//=============================================================================
function TabMenuInit() {
   if (tabDropDownContent == null) {
      tabDropDownContent = document.getElementById('headertabdropdowncontent');
   }
   if (tabMenu == null) {
      tabMenu = document.getElementById('headertabmenu');
   }
   if (tabDropDown == null) {
	   tabDropDown = document.getElementById('headertabdropdown');
   }
   if (tabBackgroundBlock == null) {
	   tabBackgroundBlock = document.getElementById('headertabbackgroundblock');
   }
}

//=============================================================================
//=============================================================================
function TabMenuOver(tabItem, isOver, dropDownType) {
   overMenuTab = isOver;
   TabMenuInit();

   if (tabItem != null) {
      // clear the old tab graphic
      if (selectedTabGraphic != null) {
         var oldTabName = selectedTabGraphic.id.split('_');
         selectedTabGraphic.src = '/images/main/tab-off-' + oldTabName[1] + '.png';
         selectedTabGraphic = null;
      }

      var tabName = tabItem.id.split('_');

      // set the new tab graphic
      tabItem.src = '/images/main/tab-on-' + tabName[1] + '.png';
      selectedTabGraphic = tabItem;

      // set the new tab content item
      tabDropDownContent.style.backgroundImage = 'url(/images/main/tab-cnt-bkg-' + tabName[1] + '.png)';
      tabDropDownContent.innerHTML = '<div id="headertabcontent">' + tabContentData[tabName[1]] + '</div>';
      if (dropDownType == 'dropdown') {
          tabDropDown.style.display = '';
          if (tabBackgroundBlock != null) {
             tabBackgroundBlock.style.display = '';
          }
      }
   }
}

//=============================================================================
//=============================================================================
function TabMenuOutDelay(event, dropDownType) {
   overMenuTab = 0;
   setTimeout('TabMenuOut(' + event.clientX + ', ' + event.clientY + ', "' + dropDownType + '")', 500);
}

//=============================================================================
//=============================================================================
function TabMenuOut(mouseX, mouseY, dropDownType) {
   TabMenuInit();

   // only reset the tab strip if the mouse is currently outside the entire thing
   if (overMenuTab == 0  &&
	   ((mouseX <= tabMenu.offsetLeft  ||  mouseX >= (tabMenu.offsetLeft + tabMenu.offsetWidth))  ||
	    (mouseY <= tabMenu.offsetTop  ||  mouseY >= (tabMenu.offsetTop + tabMenu.offsetHeight)))) {
      // clear the old tab graphic
      if (selectedTabGraphic != null) {
         var oldTabName = selectedTabGraphic.id.split('_');
         selectedTabGraphic.src = '/images/main/tab-off-' + oldTabName[1] + '.png';
         selectedTabGraphic = null;
      }

      if (dropDownType == 'dropdown') {
         tabDropDownContent.style.backgroundImage = '';
         tabDropDownContent.innerHTML = null;
         selectedTabGraphic = null;
         tabDropDown.style.display = 'none';
         if (tabBackgroundBlock != null) {
             tabBackgroundBlock.style.display = 'none';
         }
      } else if (dropDownType == 'fixed') {
         var tabHome = document.getElementById('tab_home');
         tabHome.src = '/images/main/tab-on-home.png';
         tabDropDownContent.style.backgroundImage = 'url(/images/main/tab-cnt-bkg-home.png)';
         tabDropDownContent.innerHTML = '<div id="headertabcontent">' + tabContentData['home'] + '</div>';
         selectedTabGraphic = tabHome;
      }

      overMenuTab = 0;
   }
}
