//specifications for menu contents and menubar image associations
var menus = new Array();
menus[0] = {mBarImgId: "menuImg_1",
	    menuItems: [],
	    elemId: ""
};

menus[1] = {mBarImgId: "menuImg_2",
	    menuItems: [],
	    elemId: ""
};

menus[2] = {mBarImgId: "menuImg_3",
	    menuItems: [ {text: "Amusements", href: "/amusements/"},
	                 {text: "Brain Workout", href: "/brain/"},
                         {text: "Classics", href: "/classics/"},
                         {text: "Crosswords", href: "/crossword/"},
                         {text: "Fourwords", href: "/fourwords/"},
                         {text: "Number Puzzles", href: "/number/"},
                         {text: "Sudoku", href: "/sudoku/"},
                         {text: "Word Puzzles", href: "/word/"}
            ],
	    elemId: ""
};

menus[3] = {mBarImgId: "menuImg_4",
	    menuItems: [],
	    elemId: ""
};

menus[4] = {mBarImgId: "menuImg_5",
	    menuItems: [],
	    elemId: ""
};

// global menu state
var menuReady = false;

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: "20px",
		     menuItemLineHeight: "1.4em",
                     menuWrapperBorderWidth: "1px",
		     menuWrapperPadding: "3px",
		     defaultBodyFontSize: "12px"
};

//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 initMenu(), 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 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);
    // Some old compat stuff omitted here.

    // 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.getElementById("menubar").appendChild(menuDiv);
	//	document.body.appendChild(menuDiv);
    }

    makeHashes();
    assignLabelEvents();
    // pre-position menu
    for (i = 0; i < menus.length; i++) {
	positionMenu(menus[i].elemId);
    }
    menuReady = true;
}

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

    // Some compat stuff missing here for now.

    var menuDiv = document.getElementById(menuId);
    menuDiv.style.left = offsetLeft + "px";
    menuDiv.style.top = offsetTop + parseInt(getElementStyle(mBarImg, "height", "height")) + "px";
}

//display a particular menu div
function showMenu(menuId) {
    if (menuReady) {
	keepMenu();
	hideMenus();
	positionMenu(menuId);
	document.getElementById(menuId).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" || elem.className == "menulink") {
		if (evt.type == "mouseover") {
		    showMenu(menus[elem.id].elemId);
		}
		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;
    }
}