// global menu state
var menuReady = false;

// precache menubar image pairs
if (document.images) {
	var imagesNormal = new Array( );
	imagesNormal["home"] = new Image(20, 80);
	imagesNormal["home"].src = "home_off.jpg";
	imagesNormal["catalog"] = new Image(20, 80);
	imagesNormal["catalog"].src = "catalog_off.jpg";
	imagesNormal["about"] = new Image(20, 80);
	imagesNormal["about"].src = "about_off.jpg";

	var imagesHilite = new Array( );
	imagesHilite["home"] = new Image(20, 80);
	imagesHilite["home"].src = "home_on.jpg";
	imagesHilite["catalog"] = new Image(20, 80);
	imagesHilite["catalog"].src = "catalog_on.jpg";
	imagesHilite["about"] = new Image(20, 80);
	imagesHilite["about"].src = "about_on.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);
	}
	return "";
}

// carry over some critical menu style sheet attribute values
var CSSRuleValues = {
	menuItemHeight:"11px",
	menuItemLineHeight:"1.0em",
	//menuItemLineHeight:"11px",
	menuWrapperBorderWidth:"0px",
	menuWrapperPadding:"0px",
	defaultBodyFontSize:"11px"
};

// specifications for menu contents and menubar image associations
var menus = new Array( );

menus[0] = {
	mBarImgId:"menuImg_1",
	ptBarElemId:"about_popup",
	mBarImgNormal:imagesNormal["home"],
	mBarImgHilite:imagesHilite["home"],
	menuItems:[ 
		{text:"Governance", href:"index.php?page_id=3"},
		{text:"Council", href:"index.php?page_id=6"},
		{text:"Council Committees", href:"index.php?page_id=8"},
		{text:"Bye-Laws", href:"index.php?page_id=10"},
		{text:"Staff", href:"index.php?page_id=13"},
		{text:"FPSB International", href:"index.php?page_id=16"},
		{text:"Contact Us", href:"index.php?page_id=21"},
	],
	elemId:""
};

menus[1] = {
	mBarImgId:"menuImg_2",
	ptBarElemId:"marks_popup",
	mBarImgNormal:imagesNormal["catalog"],
	mBarImgHilite:imagesHilite["catalog"],
	menuItems:[
		{text:"Competency Standards", href:"index.php?page_id=34"},
		{text:"Education", href:"index.php?page_id=36"},
		{text:"Education Providers", href:"index.php?page_id=40"},
		{text:"Ethics", href:"index.php?page_id=47"},
		{text:"Examination", href:"index.php?page_id=42"},
		{text:"Experience", href:"index.php?page_id=45"}
		{text:"Professional Practice Standards", href:"index.php?page_id=49"},
		{text:"Initial Certification", href:"index.php?page_id=27"},
		{text:"Certification Renewal", href:"index.php?page_id=30"}
		{text:"Competency Profile", href:"index.php?page_id=32"}
	],
	elemId:""
};

menus[2] = {
	mBarImgId:"menuImg_3",
	ptBarElemId:"news_popup",
	mBarImgNormal:imagesNormal["news"],
	mBarImgHilite:imagesHilite["news"],
	menuItems:[ 
		{text:"Archive", href:"index.php?page_id=3"},
		{text:"Press Releases", href:"index.php?page_id=3"},
		{text:"Global Update", href:"index.php?page_id=3"},
		{text:"Media Kit", href:"index.php?page_id=3"},
		{text:"Gallery", href:"index.php?page_id=3"},
		{text:"Events", href:"index.php?page_id=3"}
	],
	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 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 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 (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);
	if (navigator.appName == "Microsoft Internet Explorer" &&
		navigator.userAgent.indexOf("Win") != -1 &&
		(typeof document.compatMode == "undefined" ||
		document.compatMode == "BackCompat")) {
		//heightAdjust = -heightAdjust;
	}
	*/
	// Hack to get this working the same in firefox and ie
	heightAdjust=0;
	menuItemH=16;
	// 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";
			//window.alert(menuDiv.style.height);
		} 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;
		// Create the line on the left side of the menu
		menuLineDiv = document.createElement("div");
		menuLineDiv.className = "menuLine";
		menuLineDiv.style.height = (menuItemH * menus[i].menuItems.length) - heightAdjust + 11 + "px";
		menuLineDiv.style.width = "1px";
		menuLineDiv.style.zIndex = 1010;
		menuDiv.appendChild(menuLineDiv);
		// 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;
}

// 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++) {
		//document.getElementById(menus[i].mBarImgId).src = menus[i].mBarImgNormal.src;
		var menu = document.getElementById(menus[i].elemId)
		menu.style.visibility = "hidden";
		//change the color of the link back to grey
		var linkref = document.getElementById(menus[i].ptBarElemId);
		linkref.style.color = "#666";
	}
}

// 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 linkref = document.getElementById(menus[menuId].ptBarElemId);
	var offsetTrail = linkref;
	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.top = offsetTop + mBarImg.height + "px";
	menuDiv.style.left = offsetLeft - 7 + "px";
	menuDiv.style.top = offsetTop + 15 + "px";
	//menuDiv.style.top = "0px";
	//menuDiv.style.left = "50px";
}

// display a particular menu div
function showMenu(menuId) {
	if (menuReady) {
		keepMenu( );
		hideMenus( );
		positionMenu(menuId);
		var menu = document.getElementById(menuId);
		menu.style.visibility = "visible";
		// Set menu link to black
		var linkref = document.getElementById(menus[menuId].ptBarElemId);
		linkref.style.color = "black";
	}
}

// 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( ) {
/*
	// Init the search widget.
	var linkref = document.getElementById("topImage");
	var offsetTrail = linkref;
	var offsetLeft = 0;
	var offsetTop = 0;
	while (offsetTrail) {
		offsetLeft += offsetTrail.offsetLeft;
		offsetTop += offsetTrail.offsetTop;
		offsetTrail = offsetTrail.offsetParent;
	}
	var searchWidget = document.getElementById("searchWidget");
	searchWidget.style.top=offsetTop - 30+"px";
	searchWidget.style.left=offsetLeft + 575 +"px";
	searchWidget.style.visibility="visible";
*/

	if (document.getElementById && document.styleSheets) {
		setTimeout("makeMenus( )", 5);
		window.onunload=cancelAll;
	}
}