// global menu state
var menuReady = false;
var menuNews = 999;				// menu item needing wide stuff
var inMenuNews = false;	// controls whether news menu appears

/*	NOTE that we need to put in a flag to show when menu is expanded.
		If it is not, respond to a button click by expanding the menu, and then contracting after fulfilling the request.
		Will work OK in IE without this for now.
*/

// pre-cache menubar image pairs
if (document.images) {
    var imagesNormal = new Array();
    imagesNormal["home"] = new Image(20, 80);
    imagesNormal["home"].src = "images/btn_home_off.gif";
    imagesNormal["music"] = new Image(20, 80);
    imagesNormal["music"].src = "images/btn_music_off.gif";
    imagesNormal["professional"] = new Image(20, 80);
    imagesNormal["professional"].src = "images/btn_professional_off.gif";
    imagesNormal["personal"] = new Image(20, 80);
    imagesNormal["personal"].src = "images/btn_personal_off.gif";
    imagesNormal["linkman"] = new Image(20, 80);
    imagesNormal["linkman"].src = "images/btn_linkman_off.gif";
    imagesNormal["email"] = new Image(20, 80);
    imagesNormal["email"].src = "images/btn_email_off.gif";
    imagesNormal["login"] = new Image(20, 80);
    imagesNormal["login"].src = "images/btn_login_off.gif";
    imagesNormal["logout"] = new Image(20, 80);
    imagesNormal["logout"].src = "images/btn_logout_off.gif";
    imagesNormal["register"] = new Image(20, 80);
    imagesNormal["register"].src = "images/btn_register_off.gif";
    imagesNormal["whatsnew"] = new Image(20, 80);
    imagesNormal["whatsnew"].src = "images/btn_whatsnew_off.gif";
    /*
		imagesNormal["news"] = new Image(20, 80);
    imagesNormal["news"].src  = "images/news_off.gif";
    imagesNormal["endorsements"] = new Image(20, 80);
    imagesNormal["endorsements"].src  = "images/endorsements_off.gif";
    imagesNormal["links"] = new Image(20, 80);
    imagesNormal["links"].src  = "images/links_off.gif";
    imagesNormal["support"] = new Image(20, 80);
    imagesNormal["support"].src  = "images/support_off.gif";
		*/
    var imagesHilite = new Array();
    imagesHilite["home"] = new Image(20, 80);
    imagesHilite["home"].src = "images/btn_home_on.gif";
    imagesHilite["music"] = new Image(20, 80);
    imagesHilite["music"].src = "images/btn_music_on.gif";
    imagesHilite["professional"] = new Image(20, 80);
    imagesHilite["professional"].src = "images/btn_professional_on.gif";
    imagesHilite["personal"] = new Image(20, 80);
    imagesHilite["personal"].src = "images/btn_personal_on.gif";
    imagesHilite["linkman"] = new Image(20, 80);
    imagesHilite["linkman"].src = "images/btn_linkman_on.gif";
    imagesHilite["email"] = new Image(20, 80);
    imagesHilite["email"].src = "images/btn_email_on.gif";
    imagesHilite["login"] = new Image(20, 80);
    imagesHilite["login"].src = "images/btn_login_on.gif";
    imagesHilite["logout"] = new Image(20, 80);
    imagesHilite["logout"].src = "images/btn_logout_on.gif";
    imagesHilite["register"] = new Image(20, 80);
    imagesHilite["register"].src = "images/btn_register_on.gif";
    imagesHilite["whatsnew"] = new Image(20, 80);
    imagesHilite["whatsnew"].src = "images/btn_whatsnew_on.gif";
    /*
		imagesHilite["news"] = new Image(20, 80);
    imagesHilite["news"].src  = "images/news_on.gif";
    imagesHilite["endorsements"] = new Image(20, 80);
    imagesHilite["endorsements"].src  = "images/endorsements_on.gif";
    imagesHilite["links"] = new Image(20, 80);
    imagesHilite["links"].src  = "images/links_on.gif";
    imagesHilite["support"] = new Image(20, 80);
    imagesHilite["support"].src  = "images/support_on.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:"22px",
                     menuItemLineHeight:"1.4em",
                     menuWrapperBorderWidth:"2px",
                     menuWrapperPadding:"3px",
                     defaultBodyFontSize:"14px"
                    };

// specifications for menu contents and menubar image associations
var menus = new Array();
menus[0] = {mBarImgId:"menuImg_1",								// home
            mBarImgNormal:imagesNormal["home"],
            mBarImgHilite:imagesHilite["home"],
            menuItems:[/* {text:"X", href:"notyet.htm"} */],
            elemId:""
           };
menus[1] = {mBarImgId:"menuImg_2",								// music
            mBarImgNormal:imagesNormal["music"],
            mBarImgHilite:imagesHilite["music"],
            menuItems:[ {text:"Chamber music in Tuscany", href:"valdot.htm"},
                        {text:"Other musical activities (not yet)", href:"notyet.htm"}
                      ],
            elemId:""
           };
menus[2] = {mBarImgId:"menuImg_3", 								// professional
            mBarImgNormal:imagesNormal["professional"],
            mBarImgHilite:imagesHilite["professional"],
            menuItems:[ {text:"Projects site", href:"http://www.hamm.co.uk", target:"_blank"},
											  {text:"Skill set", href:"SkillSet.htm"},
												{text:"Web development", href:"WebDev.htm"},
												// {text:"Consultancy (not yet)", href:"notyet.htm"},
												{text:"Utilities download", href:"UtsTab.htm"},
												{text:"Academic", href:"Academic.htm"},
												{text:"Curriculum vitae (pdf)", href:"CV_IT-10.pdf"}],
            elemId:""
           };
menus[3] = {mBarImgId:"menuImg_4", 								// personal
            mBarImgNormal:imagesNormal["personal"],
            mBarImgHilite:imagesHilite["personal"],
            menuItems:[ ],
            elemId:""
           };
menus[4] = {mBarImgId:"menuImg_5", 								// linkman
            mBarImgNormal:imagesNormal["linkman"],
            mBarImgHilite:imagesHilite["linkman"],
            menuItems:[
                      ],
            elemId:""
           };
menus[5] = {mBarImgId:"menuImg_6",								// email
            mBarImgNormal:imagesNormal["email"],
            mBarImgHilite:imagesHilite["email"],
            menuItems:[],
            elemId:""
           };
menus[6] = {mBarImgId:"menuImg_7",								// login
            mBarImgNormal:imagesNormal["login"],
            mBarImgHilite:imagesHilite["login"],
            menuItems:[],
            elemId:""
           };
menus[7] = {mBarImgId:"menuImg_8",								// logout
            mBarImgNormal:imagesNormal["logout"],
            mBarImgHilite:imagesHilite["logout"],
            menuItems:[],
            elemId:""
           };
menus[8] = {mBarImgId:"menuImg_9",								// register
            mBarImgNormal:imagesNormal["register"],
            mBarImgHilite:imagesHilite["register"],
            menuItems:[],
            elemId:""
           };
menus[9] = {mBarImgId:"menuImg_10",								// whatsnew
            mBarImgNormal:imagesNormal["whatsnew"],
            mBarImgHilite:imagesHilite["whatsnew"],
            menuItems:[],
            elemId:""
           };
/*
*/					 
// menus[1].menuItems[menus[1].menuItems.length] = { text:"Why not take it from here", href: "on your nelly" };

// 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 = menuSwap;
        elem.onmouseout = menuSwap;
    }
}

// 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 (true || bodyFontSize == parseInt(CSSRuleValues.defaultBodyFontSize)) { // force regardless
        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;
				if (menuNews==i)
        	menuDiv.className = "menuWrapperWide";
				else
        	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;
						if (menuNews==i)
    	        menuItem.className = "menuItemWide";
						else
    	        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].target)
	            itemLink.target = menus[i].menuItems[j].target;				
						itemLink.id = "itemLink_" + i + "_" + j;
						if (menuNews==i)
              itemLink.className = "menuItemWide";
						else
              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 menuTimer;

// invoked from mouseovers inside menus to cancel hide
// request from mouseout of menu bar image et al.
function keepMenu() {
    clearTimeout(menuTimer);
}

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

// invoked from mouseouts to request hiding all menus
// in 1/4 second, unless cancelled
function requestHide() {
    menuTimer = 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 + mBarImg.width + "px";
    menuDiv.style.top = offsetTop + /* mBarImg.height + */ "px";
}

// display a particular menu div
function showMenu(menuId) {
    if (menuReady) {
        keepMenu();
        hideMenus();
				if (("popupmenu1" != menuId) || !inMenuNews) {	// only show news menu if not in news
				  // addDiag("diagBox", "inMenuNuews " + inMenuNews);
	        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) {
	  function itemId (id) {
			// get item id, so we know if wide or normal
			var p = id.indexOf('_');
			return id.charAt(p+1)
		}
    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") {
								// addDiag("diagBox", "Toggling on " + itemId(elem.id));
                keepMenu();
								if (menuNews==itemId(elem.id))
	                elem.className ="menuItemOnWide";
								else
	                elem.className ="menuItemOn";
            } else {
								// addDiag("diagBox", "Toggling off " + itemId(elem.id));
								if (menuNews==itemId(elem.id))
	                elem.className ="menuItemWide";
								else
	                elem.className ="menuItem";
                requestHide();
            }
            evt.cancelBubble = true;
        }
    }
}

function menuSwap(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 expandSubMenus () {
	// expand submenus on mouse click if not already done.  Required for Opera
} // expandSubMenus