// global menu state
var menuReady = false;

// pre-cache menubar image pairs
if (document.images) {
    var imagesNormal = new Array();
    imagesNormal["category0"] = new Image(13, 89);
    imagesNormal["category0"].src = "./images/link_branding1.gif";
    imagesNormal["category1"] = new Image(13, 55);
    imagesNormal["category1"].src  = "./images/link_logos1.gif";
    imagesNormal["category2"] = new Image(13, 51);
    imagesNormal["category2"].src  = "./images/link_print1.gif";
    imagesNormal["category3"] = new Image(13, 37);
    imagesNormal["category3"].src  = "./images/link_web1.gif";
    imagesNormal["category4"] = new Image(13, 93);
    imagesNormal["category4"].src  = "./images/link_packaging1.gif";
    imagesNormal["category5"] = new Image(13, 55);
    imagesNormal["category5"].src  = "./images/link_about1.gif";

    var imagesHilite = new Array();
    imagesHilite["category0"] = new Image(13, 89);
    imagesHilite["category0"].src = "./images/link_branding2.gif";
    imagesHilite["category1"] = new Image(13, 55);
    imagesHilite["category1"].src  = "./images/link_logos2.gif";
    imagesHilite["category2"] = new Image(13, 51);
    imagesHilite["category2"].src  = "./images/link_print2.gif";
    imagesHilite["category3"] = new Image(13, 37);
    imagesHilite["category3"].src  = "./images/link_web2.gif";
    imagesHilite["category4"] = new Image(13, 93);
    imagesHilite["category4"].src  = "./images/link_packaging2.gif";
    imagesHilite["category5"] = new Image(13, 55);
    imagesHilite["category5"].src  = "./images/link_about2.gif";
}

function getElementStyle(elem, CSSStyleProp) {
    var styleValue, camel;
    if (elem) {
        if (document.defaultView && document.defaultView.getComputedStyle) {
            // W3C DOM version
            var compStyle = document.defaultView.getComputedStyle(elem, "");
            styleValue = compStyle.getPropertyValue(CSSStyleProp);
        } else if (elem.currentStyle) {
            // make IE style property camelCase name from CSS version
            var IEStyleProp = CSSStyleProp;
            var re = /-\D/;
            while (re.test(IEStyleProp)) {
                camel = IEStyleProp.match(re)[0].charAt(1).toUpperCase();
                IEStyleProp = IEStyleProp.replace(re, camel);
            }
            styleValue = elem.currentStyle[IEStyleProp];
        }
    }
    return (styleValue) ? styleValue : null;
}

// carry over some critical menu style sheet attribute values
/*
var CSSRuleValues = {menuItemHeight:"18px",
                     menuWrapperBorderWidth:"2px",
                     menuWrapperPadding:"3px",
                     defaultBodyFontSize:"12px"
                    };
*/
var CSSRuleValues = {menuItemHeight:"18px",
                     menuWrapperBorderWidth:"2px",
                     menuWrapperPadding:"3px",
                     defaultBodyFontSize:"12px"
                    };

// specifications for menu contents and menubar image associations
var menus = new Array();
menus[0] = {mBarImgId:"category0",
            menuWidth:155,
            pageFile:"branding.php",
            mBarImgNormal:imagesNormal["category0"],
            mBarImgHilite:imagesHilite["category0"],
            menuItems:[ {text:"AMERICAN COLORS CLOTHING", href:"", isproject:"1"},
          					    {text:"UNION MARKET", href:"", isproject:"1"},
                        {text:"DAVID SCOTT INTERIORS", href:"", isproject:"1"},
                        {text:"MONSTER SUSHI", href:"", isproject:"1"},
                        {text:"CHRISTOPHER COLEMAN", href:"", isproject:"1"},
                        {text:"Nunu Chocolates", href:"", isproject:"1"},
                        {text:"A.I. CREDIT", href:"", isproject:"1"},
                        {text:"ROADS TO SUCCESS", href:"", isproject:"1"}
                      ],
            elemId:"category0"
           };

menus[1] = {mBarImgId:"category1",
            menuWidth:155,
            pageFile:"logos.php",
            mBarImgNormal:imagesNormal["category1"],
            mBarImgHilite:imagesHilite["category1"],
            menuItems:[ {text:"AMERICAN COLORS CLOTHING", href:"", isproject:"1"},
					              {text:"DAVID SCOTT INTERIORS", href:"", isproject:"1"},
                        {text:"Monster Sushi", href:"", isproject:"1"},
                        {text:"Union Market", href:"", isproject:"1"},
                        {text:"Nunu Chocolates", href:"", isproject:"1"},
                        {text:"The Woods", href:"", isproject:"1"},
						            {text:"Yasire Photography", href:"", isproject:"1"},
						            {text:"LAHF", href:"", isproject:"1"},
                        {text:"Star Walkers Club", href:"", isproject:"1"},
                        {text:"Patiolife", href:"", isproject:"1"},
                        {text:"Chimichurri Grill", href:"", isproject:"1"}
                      ],
            elemId:"category1"
           };

menus[2] = {mBarImgId:"category2",
            menuWidth:175,
            pageFile:"print.php",
            mBarImgNormal:imagesNormal["category2"],
            mBarImgHilite:imagesHilite["category2"],
            menuItems:[ {text:"GLWD Brochure", href:"", isproject:"1"},
					              {text:"La Perla Invite", href:"", isproject:"1"},
						            {text:"A.I. Credit Brochures", href:"", isproject:"1"},
                        {text:"LAHF Invite", href:"", isproject:"1"},
                        {text:"David Scott Stationery", href:"", isproject:"1"},
                        {text:"Siegelson Catalog", href:"", isproject:"1"},
                        {text:"GLWD Invite", href:"", isproject:"1"},
                        {text:"Succession Capital", href:"", isproject:"1"},
                        {text:"Wedding Invites", href:"", isproject:"1"},
                        {text:"Christian Cota Look Book", href:"", isproject:"1"},
                        {text:"LAHF Stationery", href:"", isproject:"1"}
                      ],
            elemId:"category2"
           };

menus[3] = {mBarImgId:"category3",
            menuWidth:145,
            pageFile:"web.php",
            mBarImgNormal:imagesNormal["category3"],
            mBarImgHilite:imagesHilite["category3"],
            menuItems:[ {text:"American Colors Clothing", href:"", isproject:"1"},
					    {text:"Nicholas Varney", href:"", isproject:"1"},
						{text:"Eastridge Design", href:"", isproject:"1"},
						{text:"Kora", href:"", isproject:"1"},
						{text:"Union Market", href:"", isproject:"1"},
                        {text:"David Scott Interiors", href:"", isproject:"1"},
						{text:"Macondo", href:"", isproject:"1"},
                        {text:"5 Spoke Creamery", href:"", isproject:"1"},
                        {text:"Nunu Chocolates", href:"", isproject:"1"},
						{text:"Angel Sanchez", href:"", isproject:"1"},
                        {text:"Christopher Coleman", href:"", isproject:"1"},
						{text:"Sammy Figueroa", href:"", isproject:"1"},
                        {text:"Tribeca Wine", href:"", isproject:"1"},
                        {text:"Rayuela", href:"", isproject:"1"},
						{text:"PMA Architect", href:"", isproject:"1"},
						{text:"Exxova", href:"", isproject:"1"}
                      ],
            elemId:"category3"
           };

menus[4] = {mBarImgId:"category4",
            //menuWidth:183,
            menuWidth:150,
            pageFile:"packaging.php",
            mBarImgNormal:imagesNormal["category4"],
            mBarImgHilite:imagesHilite["category4"],
            menuItems:[ {text:"Tribeca Oven", href:"", isproject:"1"},
					              {text:"Nunu Chocolates", href:"", isproject:"1"},
                        {text:"Union Market", href:"", isproject:"1"},
						            {text:"Aunty E", href:"", isproject:"1"},
                        {text:"CHEESY MOVIE POPCORN", href:"", isproject:"1"},
                        {text:"Chocolate Dreamer", href:"", isproject:"1"}
                      ],
            elemId:"category4"
           };

menus[5] = {mBarImgId:"category5",
            menuWidth:80,
            pageFile:"about.php",
            mBarImgNormal:imagesNormal["category5"],
            mBarImgHilite:imagesHilite["category5"],
            menuItems:[ {text:"TEAM", href:"about_studio.php", isproject:"0"},
          					    {text:"SERVICES", href:"about_services.php", isproject:"0"},
                        {text:"CLIENTS", href:"about_clients.php", isproject:"0"},
                        {text:"CONTACT", href:"about_contact.php", isproject:"0"},
                        {text:"BLOG", href:"about_blog.php", isproject:"0"}
                      ],
            elemId:"category5"
           };


// 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, "font-size"));
    //alert("bodyFontSize: " + bodyFontSize);
    // 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
    //alert("CSSRuleValues.defaultBodyFontSize: " + CSSRuleValues.defaultBodyFontSize);
    if (bodyFontSize == parseInt(CSSRuleValues.defaultBodyFontSize)) {
        menuItemH = (parseFloat(CSSRuleValues.menuItemHeight));
    } else {
        // works nicely in Mozilla
        //alert("CSSRuleValues.menuItemLineHeight: " + CSSRuleValues.menuItemLineHeight);
        menuItemH = parseInt(parseFloat(CSSRuleValues.menuItemLineHeight) * bodyFontSize);
    }
    //alert("menuItemH: " + menuItemH);
    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
    var projCt = 0;
    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_" + i;
        if (menus[i].menuItems.length > 0) {
            menuDiv.style.height = (menuItemH * menus[i].menuItems.length) - 
            heightAdjust + "px";
            //alert("menuDiv.style.height: " + menuDiv.style.height);
            menuDiv.style.width = menus[i].menuWidth + "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;
            if (menus[i].menuItems[j].isproject == "0") {
              itemLink.href = menus[i].menuItems[j].href;
            }
            else if(menus[i].menuItems[j].href != "") {
              itemLink.href = menus[i].menuItems[j].href;
            }
            else {
              //itemLink.href = "javascript: showItem(" + menus[i].menuItems[j].isproject +");";
              //itemLink.href = "javascript: showItem(" + i + ", " + j +");";
              //itemLink.href = menus[i].pageFile + "?c=" + i + "&p=" + j;
              itemLink.href = menus[i].pageFile + "?p=" + j;
              projCt++;
            }
            if ((i == curCategoryId) && (j == curProjectId)) {
              itemLink.className = "menuItemOn";
            }
            else {
              itemLink.className = "menuItem";
              itemLink.onmouseover = toggleHighlight;
              itemLink.onmouseout = toggleHighlight;
            }
            itemLink.id = "lnk" + menuItem.id;
            textNode = document.createTextNode(menus[i].menuItems[j].text.toUpperCase());
            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++) {
       if (i != curCategoryId) {
         document.getElementById(menus[i].mBarImgId).src = menus[i].mBarImgNormal.src;
       }
       var menu = document.getElementById(menus[i].elemId)
       menu.style.visibility = "hidden";
    }
    //showItem(currCatId, currProjId);
}

// 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 = 5;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft - 2;
        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);
        if (curCategoryId >= 0) {
          setMenuItem(curCategoryId, curProjectId);
        }
        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 {
                var curSelElem = "lnkpopupmenuItem_" + curCategoryId + "_" + curProjectId;
                if (curSelElem == elem.id) {
                  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;
    }
}

// -----------------------------------------------------------------------------
function resetMenuItems() {
  for (var i = 0; i < categories.length; i++) {
    for (var j = 0; j < categories[i].projects.length; j++) {
      var menuItemId = 'lnkpopupmenuItem_' + i + '_' + j;
      document.getElementById(menuItemId).className = 'menuItem';
    }
  }
}

function setMenuItem(catId, projId) {
  resetMenuItems();
  var menuItemId = 'lnkpopupmenuItem_' + catId + '_' + projId;
  document.getElementById(menuItemId).className = 'menuItemOn';
}
// -----------------------------------------------------------------------------

addOnLoadEvent(initMenus);