// global menu state

var menuReady = false;



// pre-cache menubar image pairs

if(document.images){

	var imagesNormal = new Array();

	imagesNormal["home"] = new Image(40, 85);

	imagesNormal["home"].src = "../graphics/header-home.gif";

	imagesNormal["prodInfo"]= new Image(40, 85);

	imagesNormal["prodInfo"].src ="../graphics/header-prod-info.gif";

	imagesNormal["skincare"] = new Image(40, 85);

	imagesNormal["skincare"].src = "../graphics/header-skincare.gif";

	imagesNormal["serves"] = new Image(40, 85);

	imagesNormal["serves"].src = "../graphics/header-serves.gif";

	imagesNormal["reviews"] = new Image(40, 85);

	imagesNormal["reviews"].src = "../graphics/header-reviews.gif";

	imagesNormal["shop"] = new Image(40, 85);

	imagesNormal["shop"].src = "../graphics/header-shop.gif";

	imagesNormal["faqs"] = new Image(40, 85);

	imagesNormal["faqs"].src = "../graphics/header-faqs.gif";

	imagesNormal["contact"] = new Image(40, 85);

	imagesNormal["contact"].src = "../graphics/header-contact.gif";



	var imagesHilite = new Array();

	imagesHilite["home"] = new Image(40, 85);

	imagesHilite["home"].src = "../graphics/header-home-over.gif";

	imagesHilite["prodInfo"]= new Image(40, 85);

	imagesHilite["prodInfo"].src ="../graphics/header-prod-info-over.gif";

	imagesHilite["skincare"] = new Image(40, 85);

	imagesHilite["skincare"].src = "../graphics/header-skincare-over.gif";

	imagesHilite["serves"] = new Image(40, 85);

	imagesHilite["serves"].src = "../graphics/header-serves-over.gif";

	imagesHilite["reviews"] = new Image(40, 85);

	imagesHilite["reviews"].src = "../graphics/header-reviews-over.gif";

	imagesHilite["shop"] = new Image(40, 85);

	imagesHilite["shop"].src = "../graphics/header-shop-over.gif";

	imagesHilite["faqs"] = new Image(40, 85);

	imagesHilite["faqs"].src = "../graphics/header-faqs-over.gif";

	imagesHilite["contact"] = new Image(40, 85);

	imagesHilite["contact"].src = "../graphics/header-contact-over.gif";

}



function getElementStyle(elem, IEStyleProp, CSSStyleProp) {

    if (elem.currentStyle) {

        return elem.currentStyle[IEStyleProp];

    } else if (window.getComputedStyle) {

        var compStyle = window.getComputedStyle(elem, "");

        return compStyle.getPropertyValue(CSSStyleProp);

    }

    return "";

}



// carry over some critical menu style sheet attribute values

var CSSRuleValues = {menuItemHeight:"18px",

                     menuItemLineHeight:"1.4em",

                     menuWrapperBorderWidth:"2px",

                     menuWrapperPadding:"3px",

                     defaultBodyFontSize:"12px"

                    };



// specifications for menu contents and menubar image associations

var menus = new Array();

menus[0] = {mBarImgId:"menuImg_1",

		mBarImgNormal:imagesNormal["home"],

		mBarImgHilite:imagesHilite["home"],

		menuItems:[],

		elemID:""

	     };

menus[1] = {mBarImgId:"menuImg_2",

		mBarImgNormal:imagesNormal["prodInfo"],

		mBarImgHilite:imagesHilite["prodInfo"],

		menuItems:[

				{text:"MDs: Request Brochures", href:"../product_info/index.php#brochure"},

				{text:"SunStuff: In a Nutshell", href:"../product_info/index.php#nut"}, 

				{text:"Sun Hats: Ours vs. Theirs", href:"../product_info/index.php#hats"},

				{text:"Is Sunscreen Enough?", href:"../product_info/index.php#sunscreen"},

				{text:"Fabric: Ours vs. Theirs", href:"../product_info/index.php#fabric"},

				{text:"SunStuff Press Releases", href:"../product_info/index.php#press"}

			    ],

		elemId:""

	     };

menus[2] = {mBarImgId:"menuImg_3",

		mBarImgNormal:imagesNormal["skincare"],

		mBarImgHilite:imagesHilite["skincare"],

		menuItems:[ {text:"Highlights", href:"index.php#highlights"},

					{text:"Preserves Skin", href:"index.php#damage"},

					{text:"Protects vs. Cancer", href:"index.php#cancer"},

					{text:"It's Never Too Late!", href:"index.php#late"}

				  ],

		elemID:""

           };

menus[3] = {mBarImgId:"menuImg_4",

		mBarImgNormal:imagesNormal["serves"],

		mBarImgHilite:imagesHilite["serves"],

		menuItems:[ {text:"Age Defiers", href:"../especially/index.php#retin_a"},

					{text:"Seniors", href:"../especially/index.php#seniors"},

					{text:"Individuals on Medication", href:"../especially/index.php#medication"},

					{text:"Infants", href:"../especially/index.php#infants"},

					{text:"Expectant Mothers", href:"../especially/index.php#pill"},

					{text:"Suits all Skin Tones", href:"../especially/index.php#descent"}

				  ],

		elemID:""

	     };

menus[4] = {mBarImgId:"menuImg_5",

		mBarImgNormal:imagesNormal["reviews"],

		mBarImgHilite:imagesHilite["reviews"],

		menuItems:[ 

				{text:"MDs: UPF vs. Others", href:"../reviews/index.php#upf"},
				
				{text:"SunStuff in the News", href:"../reviews/index.php#news"},
				
				{text:"MDs on SunStuff", href:"../reviews/index.php#MD"},
				
				{text:"SunStuff Fans", href:"../reviews/index.php#fans"},
				
				{text:"Latest UPF Research", href:"../reviews/index.php#research"},

				{text:"Other Resources", href:"../reviews/index.php#other"}

			    ],

		elemId:""

	     };

menus[5] = {mBarImgId:"menuImg_6",

		mBarImgNormal:imagesNormal["shop"],

		mBarImgHilite:imagesHilite["shop"],

		menuItems:[ {text:"Shop Women", href:"../shop/women.php"},

				{text:"Shop Children", href:"../shop/children.php"},

				{text:"Shop Men", href:"../shop/men.php"},

				{text:"Shop Wholesale", href:"../shop/wholesale.php"}

			    ],

		elemId:""

	     };

menus[6] = {mBarImgId:"menuImg_7",

		mBarImgNormal:imagesNormal["faqs"],

		mBarImgHilite:imagesHilite["faqs"],

		menuItems:[],

		elemID:""

	     };

menus[7] = {mBarImgId:"menuImg_8",

		mBarImgNormal:imagesNormal["contact"],

		mBarImgHilite:imagesHilite["contact"],

		menuItems:[],

		elemID:""

	     };



// create hash table-like lookup for menu objects with id string indexes

function makeHashes() {

    for (var i = 0; i < menus.length; i++) {

        menus[menus[i].elemId] = menus[i];

        menus[menus[i].mBarImgId] = menus[i];

    }

}



// assign menu label image event handlers

function assignLabelEvents() {

    var elem;

    for (var i = 0; i < menus.length; i++) {

        elem = document.getElementById(menus[i].mBarImgId);

        elem.onmouseover = swap;

        elem.onmouseout = swap;

    }

}



// invoked from init(), generates the menu div elements and their contents.

// all this action is invisible to user during construction

function makeMenus() {

    var menuDiv, menuItem, itemLink, mbarImg, textNode, offsetLeft, offsetTop;

    

    // determine key adjustment factors for the total height of menu divs

    

    var menuItemH = 0;

    var bodyFontSize = parseInt(getElementStyle(document.body, "fontSize", "font-size"));

    // test to see if browser's font size has been adjusted by the user

    // and that the new size registers as an applied style property

    if (bodyFontSize == parseInt(CSSRuleValues.defaultBodyFontSize)) {

        menuItemH = (parseFloat(CSSRuleValues.menuItemHeight));

    } else {

        // works nicely in Netscape 7

        menuItemH = parseInt(parseFloat(CSSRuleValues.menuItemLineHeight) * bodyFontSize);

    }

    var heightAdjust = parseInt(CSSRuleValues.menuWrapperPadding) + 

        parseInt(CSSRuleValues.menuWrapperBorderWidth);

    if (navigator.appName == "Microsoft Internet Explorer" && 

        navigator.userAgent.indexOf("Win") != -1 && 

        (typeof document.compatMode == "undefined" || 

        document.compatMode == "BackCompat")) {

        heightAdjust = -heightAdjust;

    }

    

    // use menus array to drive div creation loop

    for (var i = 0; i < menus.length; i++) {

        menuDiv = document.createElement("div");

        menuDiv.id = "popupmenu" + i;

        // preserve menu's ID as property of the menus array item

        menus[i].elemId = "popupmenu" + i;

        menuDiv.className = "menuWrapper";

        if (menus[i].menuItems.length > 0) {

            menuDiv.style.height = (menuItemH * menus[i].menuItems.length) - 

            heightAdjust + "px";

        } else {

            // don't display any menu div lacking menu items

            menuDiv.style.display = "none";

        }

        // define event handlers

        menuDiv.onmouseover = keepMenu;

        menuDiv.onmouseout = requestHide;



        // set stacking order in case other layers are around the page

        menuDiv.style.zIndex = 1000;

        

        // assemble menu item elements for inside menu div

        for (var j = 0; j < menus[i].menuItems.length; j++) {



            menuItem = document.createElement("div");

            menuItem.id = "popupmenuItem_" + i + "_" + j;

            menuItem.className = "menuItem";

            menuItem.onmouseover = toggleHighlight;

            menuItem.onmouseout = toggleHighlight;

            menuItem.onclick = hideMenus;

            menuItem.style.top = menuItemH * j + "px";

            itemLink = document.createElement("a");

            itemLink.href = menus[i].menuItems[j].href;

            itemLink.className = "menuItem";

            itemLink.onmouseover = toggleHighlight;

            itemLink.onmouseout = toggleHighlight;

            textNode = document.createTextNode(menus[i].menuItems[j].text);

            itemLink.appendChild(textNode);

            menuItem.appendChild(itemLink);

            menuDiv.appendChild(menuItem);

        }

        // append each menu div to the body

        document.body.appendChild(menuDiv);

    }

    makeHashes();

    assignLabelEvents();

    // pre-position menu

    for (i = 0; i < menus.length; i++) {

        positionMenu(menus[i].elemId);

    }

    menuReady = true;

}



// initialize global that helps manage menu hiding

var timer;



// invoked from mouseovers inside menus to cancel hide

// request from mouseout of menu bar image et al.

function keepMenu() {

    clearTimeout(timer);

}



function cancelAll() {

    keepMenu();

    menuReady = false;

}



// invoked from mouseouts to request hiding all menus

// in 1/4 second, unless cancelled

function requestHide() {

    timer = setTimeout("hideMenus()", 250);

}



// "brute force" hiding of all menus and restoration

// of normal menu bar images

function hideMenus() {

    for (var i = 0; i < menus.length; i++) {

       document.getElementById(menus[i].mBarImgId).src = menus[i].mBarImgNormal.src;

       var menu = document.getElementById(menus[i].elemId)

       menu.style.visibility = "hidden";

    }

}



// set menu position just before displaying it

function positionMenu(menuId){

    // use the menu bar image for position reference of related div

    var mBarImg = document.getElementById(menus[menuId].mBarImgId);

    var offsetTrail = mBarImg;

    var offsetLeft = 0;

    var offsetTop = 0;

    while (offsetTrail) {

        offsetLeft += offsetTrail.offsetLeft;

        offsetTop += offsetTrail.offsetTop;

        offsetTrail = offsetTrail.offsetParent;

    }

    if (navigator.userAgent.indexOf("Mac") != -1 && 

        typeof document.body.leftMargin != "undefined") {

        offsetLeft += document.body.leftMargin;

        offsetTop += document.body.topMargin;

    }

    var menuDiv = document.getElementById(menuId);

    menuDiv.style.left = offsetLeft + "px";

    menuDiv.style.top = offsetTop + mBarImg.height + "px";

}



// display a particular menu div

function showMenu(menuId) {

    if (menuReady) {

        keepMenu();

        hideMenus();

        positionMenu(menuId);

        var menu = document.getElementById(menuId);

        menu.style.visibility = "visible";

    }

}



// menu bar image swapping, invoked from mouse events in menu bar

// swap style sheets for menu items during rollovers

function toggleHighlight(evt) {

    evt = (evt) ? evt : ((event) ? event : null);

    if (typeof menuReady != "undefined") {

        if (menuReady && evt) {

            var elem = (evt.target) ? evt.target : evt.srcElement;

            if (elem.nodeType == 3) {

                elem = elem.parentNode;

            }

            if (evt.type == "mouseover") {

                keepMenu();

                elem.className ="menuItemOn";

            } else {

                elem.className ="menuItem";

                requestHide();

            }

            evt.cancelBubble = true;

        }

    }

}



function swap(evt) {

    evt = (evt) ? evt : ((event) ? event : null);

    if (typeof menuReady != "undefined") {

        if (evt && (document.getElementById && document.styleSheets) && menuReady) {

            var elem = (evt.target) ? evt.target : evt.srcElement;

            if (elem.className == "menuImg") {

                if (evt.type == "mouseover") {

                    showMenu(menus[elem.id].elemId);

                    elem.src = menus[elem.id].mBarImgHilite.src;

                } else if (evt.type == "mouseout") {

                    requestHide();

                }

                evt.cancelBubble = true;

            }

        }

    }

}



// create menus only if key items are supported

function initMenus() {

    if (document.getElementById && document.styleSheets) {

        setTimeout("makeMenus()", 5);

        window.onunload=cancelAll;

    }

}