// global menu state
var menuReady = false;

// pre-cache menubar image pairs
if (document.images) {
    var imagesNormal = new Array();
    imagesNormal["company"] = new Image(28, 69);
    imagesNormal["company"].src = "/images/nav_company.gif";
    imagesNormal["services"] = new Image(28, 69);
    imagesNormal["services"].src  = "/images/nav_services.gif";
    imagesNormal["portfolio"] = new Image(28, 69);
    imagesNormal["portfolio"].src  = "/images/nav_portfolio.gif";
	imagesNormal["clients"] = new Image(28, 69);
    imagesNormal["clients"].src = "/images/nav_clients.gif";
	imagesNormal["press"] = new Image(28, 69);
    imagesNormal["press"].src = "/images/nav_press.gif";
    imagesNormal["events"] = new Image(28, 69);
    imagesNormal["events"].src  = "/images/nav_events.gif";
    imagesNormal["contact"] = new Image(28, 69);
    imagesNormal["contact"].src  = "/images/nav_contact.gif";

    var imagesHilite = new Array();
	imagesHilite["company"] = new Image(28, 69);
    imagesHilite["company"].src = "/images/nav_ro_company.gif";
    imagesHilite["services"] = new Image(28, 69);
    imagesHilite["services"].src  = "/images/nav_ro_services.gif";
    imagesHilite["portfolio"] = new Image(28, 69);
    imagesHilite["portfolio"].src  = "/images/nav_ro_portfolio.gif";
	imagesHilite["clients"] = new Image(28, 69);
    imagesHilite["clients"].src = "/images/nav_ro_clients.gif";
   	imagesHilite["press"] = new Image(28, 69);
    imagesHilite["press"].src = "/images/nav_ro_press.gif";
    imagesHilite["events"] = new Image(28, 69);
    imagesHilite["events"].src  = "/images/nav_ro_events.gif";
    imagesHilite["contact"] = new Image(28, 69);
    imagesHilite["contact"].src  = "/images/nav_ro_contact.gif";

    var imagesActive = new Array();
	imagesActive["company"] = new Image(28, 69);
    imagesActive["company"].src = "/images/nav_act_company.gif";
    imagesActive["services"] = new Image(28, 69);
    imagesActive["services"].src  = "/images/nav_act_services.gif";
    imagesActive["portfolio"] = new Image(28, 69);
    imagesActive["portfolio"].src  = "/images/nav_act_portfolio.gif";
	imagesActive["clients"] = new Image(28, 69);
    imagesActive["clients"].src = "/images/nav_act_clients.gif";
   	imagesActive["press"] = new Image(28, 69);
    imagesActive["press"].src = "/images/nav_act_press.gif";
    imagesActive["events"] = new Image(28, 69);
    imagesActive["events"].src  = "/images/nav_act_events.gif";
    imagesActive["contact"] = new Image(28, 69);
    imagesActive["contact"].src  = "/images/nav_act_contact.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
// from menus.css manually because rules are not accessible 
// via script due to security precautions (argh!)
var CSSRuleValues = {menuItemHeight:"22px",
                     menuWrapperBorderWidth:"1px",
                     menuWrapperPadding:"5px"
                    };

// specifications for menu contents and menubar image associations
var menus = new Array();
menus[0] = {mBarImgId:"menuImg_1",
            mBarImgNormal:imagesNormal["company"],
            mBarImgHilite:imagesHilite["company"],
            mBarImgActive:imagesActive["company"],
            menuItems:[ {text:"company overview", href:"/company/"},
						{text:"careers @ ep", href:"/company/jobs.asp"}
						],
            elemId:""
           };
menus[1] = {mBarImgId:"menuImg_2",
            mBarImgNormal:imagesNormal["services"],
            mBarImgHilite:imagesHilite["services"],
            mBarImgActive:imagesActive["services"],
            menuItems:[ {text:"getting started", href:"/services/procedures.asp"},
						{text:"- design", href:"/services/design.asp"},
						{text:"- video", href:"/services/video.asp"},
						{text:"- digital trial", href:"/services/digital.asp"},
						{text:"- powerpoint", href:"/services/powerpoint.asp"},
						{text:"- photography", href:"/services/photography.asp"},
						{text:"- animation", href:"/services/animation.asp"},
						{text:"- equipment rental", href:"/services/rental.asp"},
						{text:"terms & conditions", href:"/services/terms.asp"}	
						],
            elemId:""
           };
menus[2] = {mBarImgId:"menuImg_3", 
            mBarImgNormal:imagesNormal["portfolio"],
            mBarImgHilite:imagesHilite["portfolio"],
            mBarImgActive:imagesActive["portfolio"],
            menuItems:[ {text:"design", href:"/portfolio/"},
						{text:"- timelines", href:"/portfolio/default.asp?subcat=110"},
						{text:"- charts", href:"/portfolio/default.asp?subcat=120"},
						{text:"- maps", href:"/portfolio/default.asp?subcat=130"},
						{text:"- excerpts & blow-ups", href:"/portfolio/default.asp?subcat=140"},
						{text:"- medical exhibits", href:"/portfolio/default.asp?subcat=180"},
						{text:"- damages/summary", href:"/portfolio/default.asp?subcat=190"},
						{text:"- diagrams", href:"/portfolio/default.asp?subcat=150"},
						{text:"- interactive", href:"/portfolio/default.asp?subcat=170"},
						{text:"video", href:"/portfolio/default.asp?subcat=200"},
						{text:"animation", href:"/portfolio/default.asp?subcat=600"},
						{text:"powerpoint", href:"/portfolio/default.asp?subcat=400"},
                        {text:"photography", href:"/portfolio/default.asp?subcat=500"}
                        ],
            elemId:""
           };
menus[3] = {mBarImgId:"menuImg_4", 
            mBarImgNormal:imagesNormal["clients"],
            mBarImgHilite:imagesHilite["clients"],
            mBarImgActive:imagesActive["clients"],
            menuItems:[ {text:"our clients", href:"/clients/"},
						{text:"associations", href:"/clients/associations.asp"},
						{text:"experts", href:"/clients/experts.asp"},
						{text:"client testimonials", href:"/press/testimonials.asp"}
						],
            elemId:""
           };
menus[4] = {mBarImgId:"menuImg_5", 
            mBarImgNormal:imagesNormal["press"],
            mBarImgHilite:imagesHilite["press"],
            mBarImgActive:imagesActive["press"],
            menuItems:[ //{text:"ep newsletter", href:"/press/newsletter.asp"},
                        {text:"daily journal ads", href:"/press/"},
                        {text:"client testimonials", href:"/press/testimonials.asp"},
                        {text:"articles", href:"/press/articles/default.asp"}
                       
                       ],
            elemId:""
           };
menus[5] = {mBarImgId:"menuImg_6", 
            mBarImgNormal:imagesNormal["events"],
            mBarImgHilite:imagesHilite["events"],
            mBarImgActive:imagesActive["events"],
            menuItems:[{text:"recent events", href:"/events/"}
            ],
            elemId:""
           };
menus[6] = {mBarImgId:"menuImg_7", 
            mBarImgNormal:imagesNormal["contact"],
            mBarImgHilite:imagesHilite["contact"],
            mBarImgActive:imagesActive["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 = parseInt(CSSRuleValues.menuItemHeight);
    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;
}

// 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);
}

// 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++) {
		if (document.getElementById(menus[i].mBarImgId).className == "menuImgA") { document.getElementById(menus[i].mBarImgId).src = menus[i].mBarImgActive.src; 
		} else {
        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";
	var menuItemH = parseInt(CSSRuleValues.menuItemHeight);
	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;
    }
	
	var menuNewHeight = (menuItemH * menus[menuId].menuItems.length) + heightAdjust
    menuDiv.style.top = offsetTop + mBarImg.height - 8 + "px";
}

// display a particular menu div
function showMenu(menuId) {
    if (menuReady) {
        keepMenu();
        hideMenus();
        positionMenu(menuId);
        var menu = document.getElementById(menuId);
        menu.style.visibility = "visible";
    }
}

// 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;
        }
    }
}

// menu bar image swapping, invoked from mouse events in menu bar
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" || elem.className == "menuImgA") {
                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;
            }
        }
    }
}

function cancelAll() {
    keepMenu();
    menuReady = false;
}

// create menus only if key items are supported
function init() {
    if (document.getElementById && document.styleSheets) {
        setTimeout("makeMenus()", 5);
        window.onunload=cancelAll;
    }
}