//change MenuControl.cs to change the width of the box around a menu
//the css controls the top of the main menu bar

//these control the width of the color on the submenus
var WIDTHWHATSNEW = "125px";
var WIDTHMAKEUP = "500px";
var WIDTHSKINCARE = "225px";
var WIDTHSUNBODY = "230px";
var WIDTHFRAGRANCE = "100px";
var WIDTHSERVICES = "125px";
var WIDTHBEAUTY = "170px";
var WIDTHPRESS = "125px";
var WIDTHFRANCHISE = "300px";
var SUBMENUTOP = 163;
var MENUBARBACKCOLOR = "#645e54";
var MENUBARHIGHLIGHT = "Gray";
var BACKCOLOR = "#FFFFFF";
var MENUTIMEOUT = 250;

var inmenu = false;
var lastmenu = 0;
var menuHoldHighlight = "";

setTimeout('setMenuTops()', 30);

function HoldHighlight(menuItem)
   {
      window.name = menuItem;
      menuHoldHighlight = menuItem;
      if (menuItem.length > 0) {
         m = document.getElementById("menu-" + menuItem);
         m.style.backgroundColor = MENUBARHIGHLIGHT;
      }
   }

function setMenuTops() 
   {
   setTimeout('setMenuTops()', 30);
   var yPos = document.documentElement.scrollTop;
   if (yPos == null)
      yPos = 0;
   box = document.getElementById('whatsnew');
   if (box == null)
      return;
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('makeup');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('skincare');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('sunbody');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('fragrance');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('services');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('beauty');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('press');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
   box = document.getElementById('franchise');
   box.style.position = "absolute";
   box.style.top = SUBMENUTOP + yPos + "px";
}

function Menu(current) 
   {
   if (!document.getElementById)
      return;
   inmenu = true;
   oldmenu = lastmenu;
   lastmenu = current;
   if (oldmenu)
      Erase(oldmenu);
   m = document.getElementById("menu-" + current);
   frmWidth = document.body.clientWidth;
   frmWidth = frmWidth / 2;
   strBrowser = navigator.appName;

   box = document.getElementById(current);
   box.style.position = "absolute"; // menu horiz positiion is correct, but menus scroll up with page.
   //box.style.position = "fixed"; //stops menu's from scrolling up, but horiz. position is wrong
   //box.style.top = SUBMENUTOP + m.offsetHeight + "px" ;

   var yPos = document.documentElement.scrollTop;
   if (yPos == null)
      yPos = 0;
   box.style.top = SUBMENUTOP + yPos +  "px";
   switch (current) {
      case 'whatsnew':
         box.style.left = "5px";
         box.style.width = WIDTHWHATSNEW;
         break;
      case 'makeup':
         box.style.left = "105px";
         box.style.width = WIDTHMAKEUP;
         break;
      case 'skincare':
         box.style.left = "210px";
         box.style.width = WIDTHSKINCARE;
         break;
      case 'sunbody':
         box.style.left = "310px";
         box.style.width = WIDTHSUNBODY;
         break;
      case 'fragrance':
         box.style.left = "420px";
         box.style.width = WIDTHFRAGRANCE;
         break;
      case 'services':
         box.style.left = "520px";
         box.style.width = WIDTHSERVICES;
         break;
      case 'beauty':
         box.style.left = "640px";
         box.style.width = WIDTHBEAUTY;
         break;
      case 'press':
         box.style.left = "760px";
         box.style.width = WIDTHPRESS;
         break;
      case 'franchise':
         box.style.left = "675px";
         box.style.width = WIDTHFRANCHISE;
         break;
      default:
         box.style.left = m.offsetLeft - 30 + "px";
         break;
   }
   box.style.visibility = "visible";
   m.style.backgroundColor = MENUBARHIGHLIGHT;
   box.style.backgroundColor = BACKCOLOR;
}

function Erase(current) 
   {
   if (!document.getElementById) 
      {
      return;
      }
   if (inmenu && lastmenu == current) 
      {
      return;
      }
   m = document.getElementById("menu-" + current);
   box = document.getElementById(current);
   box.style.visibility = "hidden";
   if (current == menuHoldHighlight)
      return;
   m.style.backgroundColor = MENUBARBACKCOLOR;
   }

function Timeout(current) 
   {
   m = document.getElementById("menu-" + current);
   inmenu = false;
   window.setTimeout("Erase('" + current + "');", MENUTIMEOUT);
   }

function Highlight(menu, item) 
   {
   if (!document.getElementById)
      return;
   inmenu = true;
   lastmenu = menu;
   obj = document.getElementById(item);
   obj.style.fontWeight = "bolder";
   }

function UnHighlight(menu, item) 
   {

   if (!document.getElementById)
      return;
   Timeout(menu);
   obj=document.getElementById(item);
   if (!checkExclusions(menu, item))
      obj.style.fontWeight = "normal";
   }

function checkExclusions(menu, item) 
   {
   //these are the drop down menu column titles - don't highlight them on mouseover
   switch (menu) 
      {
      case 'makeup':
         switch(item)
         {
         case 'face': 
            return true;
         case 'eyes':
            return true;
         case 'lips':
            return true;
         case 'accessories':
            return true;
         }
      case 'skincare':
         {
         switch (item) 
            {
            case 'category':
               return true;
            case 'concern':
               return true;
            }
         }
      case 'sunbody':
         {
         switch (item) 
            {
            case 'suncare':
               return true;
            case 'selftan':
               return true;
            case 'bodycare':
               return true;
            }
         }
      case 'fragrance':
         {
         switch (item) 
            {
            case 'womens':
               return true;
            }
         }   
      }
      return false;
   }