// menu.js

// Global Menu State
var menuReady = false;

// Precache menubar image pairs
if (document.images)
{
  var imagesNormal = new Array();
  imagesNormal["testimonials"] = new Image();  
  imagesNormal["testimonials"].src = "images/menu-testimonials-normal.jpg";  
  imagesNormal["pricing"] = new Image();  
  imagesNormal["pricing"].src = "images/menu-pricing-normal.jpg";
  imagesNormal["booking"] = new Image();  
  imagesNormal["booking"].src = "images/menu-booking-normal.jpg";
  imagesNormal["calendar"] = new Image();  
  imagesNormal["calendar"].src = "images/menu-calendar-normal.jpg";
  imagesNormal["photos"] = new Image();  
  imagesNormal["photos"].src = "images/menu-photos-normal.jpg";
  imagesNormal["mygallery"] = new Image();  
  imagesNormal["mygallery"].src = "images/menu-mygallery-normal.jpg";
  imagesNormal["vendors"] = new Image();  
  imagesNormal["vendors"].src = "images/menu-vendors-normal.jpg";
  imagesNormal["contact"] = new Image();  
  imagesNormal["contact"].src = "images/menu-contact-normal.jpg";

  var imagesSelected = new Array();
  imagesSelected["testimonials"] = new Image();  
  imagesSelected["testimonials"].src = "images/menu-testimonials-selected.jpg";  
  imagesSelected["pricing"] = new Image();  
  imagesSelected["pricing"].src = "images/menu-pricing-selected.jpg";
  imagesSelected["booking"] = new Image();  
  imagesSelected["booking"].src = "images/menu-booking-selected.jpg";
  imagesSelected["calendar"] = new Image();  
  imagesSelected["calendar"].src = "images/menu-calendar-selected.jpg";
  imagesSelected["photos"] = new Image();  
  imagesSelected["photos"].src = "images/menu-photos-selected.jpg";
  imagesSelected["mygallery"] = new Image();  
  imagesSelected["mygallery"].src = "images/menu-mygallery-selected.jpg";
  imagesSelected["vendors"] = new Image();  
  imagesSelected["vendors"].src = "images/menu-vendors-selected.jpg";
  imagesSelected["contact"] = new Image();  
  imagesSelected["contact"].src = "images/menu-contact-selected.jpg";
}
  
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);
  }
}

// Carry over some critical menu style sheet attribute values
var CSSRuleValues = {menuItemHeight:"24px",
                     menuItemLineHeight:"1.4em",
                     menuWrapperBorderWidth:"2px",
                     menuWrapperPadding:"3px",
                     defaultBodyFontSize:"12px"};
                     
// Specifications for menu contents and menubar image associations
var menus = new Array();

// Home
menus[0] = {mBarImgId:"menuimgtestimonial",
            mBarImgNormal:imagesNormal["testimonials"],
            mBarImgHilite:imagesSelected["testimonials"],
            menuItems:[ {text:"Testimonials", href:"http://danabrainerdphotography.com/testimonials.php"}],
            elemId:""
            };
            
// Pricing
menus[1] = {mBarImgId:"menuimgpricing",
            mBarImgNormal:imagesNormal["pricing"],
            mBarImgHilite:imagesSelected["pricing"],
            menuItems:[ {text:"View Packages", href:"http://danabrainerdphotography.com/pricing.php"}],
            elemId:""
            };

// Booking
menus[2] = {mBarImgId:"menuimgbooking",
            mBarImgNormal:imagesNormal["booking"],
            mBarImgHilite:imagesSelected["booking"],
            menuItems:[ {text:"Online Booking", href:"http://danabrainerdphotography.com/booking.php"}],
            elemId:""
            };
            
// Calendar
menus[3] = {mBarImgId:"menuimgcalendar",
            mBarImgNormal:imagesNormal["calendar"],
            mBarImgHilite:imagesSelected["calendar"],
            menuItems:[ {text:"View Calendar", href:"http://danabrainerdphotography.com/calendar.php"}],
            elemId:""
            };
            
// Photos
menus[4] = {mBarImgId:"menuimgphotos",
            mBarImgNormal:imagesNormal["photos"],
            mBarImgHilite:imagesSelected["photos"],
            menuItems:[{text:"Weddings", href:"http://danabrainerdphotography.com/gallery.php?gallery=0"},
                       {text:"Portraits", href:"http://danabrainerdphotography.com/gallery.php?gallery=1"},
                       {text:"Fine Art", href:"http://danabrainerdphotography.com/gallery.php?gallery=2"},
                       {text:"Commercial", href:"http://danabrainerdphotography.com/gallery.php?gallery=3"},
                       {text:"Shopping Cart", href:"http://danabrainerdphotography.com/shoppingcart.php"}],
            elemId:""
            };
            
// My Gallery
menus[5] = {mBarImgId:"menuimgmygallery",
            mBarImgNormal:imagesNormal["mygallery"],
            mBarImgHilite:imagesSelected["mygallery"],
            menuItems:[{text:"View Galleries", href:"http://danabrainerdphotography.com/mygallery.php"},
                       {text:"Shopping Cart", href:"http://danabrainerdphotography.com/shoppingcart.php"}],
            elemId:""
            };
            
// Vendors
menus[6] = {mBarImgId:"menuimgvendors",
            mBarImgNormal:imagesNormal["vendors"],
            mBarImgHilite:imagesSelected["vendors"],
            menuItems:[ {text:"View Vendors", href:"http://danabrainerdphotography.com/vendors.php"}],
            elemId:""
            };

// Contact
menus[7] = {mBarImgId:"menuimgcontact",
            mBarImgNormal:imagesNormal["contact"],
            mBarImgHilite:imagesSelected["contact"],
            menuItems:[{text:"More Info", href:"http://danabrainerdphotography.com/moreinfo.php"},
                       {text:"Contact Dana", href:"http://danabrainerdphotography.com/contact.php"}],
            elemId:""
            };
            
// Create hash table like lookup for menu objects with id string indexes
function MakeHashes()
{
    var elem;
    for (var i=0; i<menus.length; i++)
    {
        menus[menus[i].elemId] = menus[i];
        menus[menus[i].mBarImgId] = menus[i];

    }
}
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 InitMenu(), generates the menu div elements and their contents
// All this action is invisible to the 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 the 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
    {
        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 menu arrays 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
        {
            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
        var nLength = menus[i].menuItems.length;
        for (var j=0; j<nLength; 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 250ms 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;
    }
}