// JavaScript Document

var menuReady=false;

//pre-cache menu images
if (document.images) {
	var imagesNormal = new Array();
	imagesNormal["winds"]= new Image(125,83);
	imagesNormal["winds"].src="images/winds_off.jpg";
	imagesNormal["brass"]= new Image(125,83);
	imagesNormal["brass"].src="images/brass_off.jpg";
	imagesNormal["misc"]= new Image(125,83);
	imagesNormal["misc"].src="images/misc_off.jpg";
	imagesNormal["strings"]= new Image(125,83);
	imagesNormal["strings"].src="images/strings_off.jpg";
	
	var imagesHilite = new Array();
	imagesHilite["winds"]= new Image(125,83);
	imagesHilite["winds"].src="images/winds_on.jpg";
	imagesHilite["brass"]= new Image(125,83);
	imagesHilite["brass"].src="images/brass_on.jpg";
	imagesHilite["misc"]= new Image(125,83);
	imagesHilite["misc"].src="images/misc_on.jpg";
	imagesHilite["strings"]= new Image(125,83);
	imagesHilite["strings"].src="images/strings_on.jpg";
}

//function to keep font sizes in sync with user selected sizes in browser
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 "";
}

var CSSRuleValues= {menuItemHeight: "24px",
					menuItemLineHeight:"1.4em",
					menuWrapperBorderWidth:"2px",
					menuWrapperPadding:"3px",
					defaultBodyFontSize:"12px"
					};

//specs for menu contents and menubar images
var menus= new Array();
menus[0]={mBarImgId:"menuImg_1",
		mBarImgNormal:imagesNormal["winds"],
		mBarImgHilite:imagesHilite["winds"],
		menuItems: [{text:"Flute", href:"products_listing.php?list_type=instrument&id=1"},
				    {text:"Oboe", href:"products_listing.php?list_type=instrument&id=2"},
					{text:"Clarinet", href:"products_listing.php?list_type=instrument&id=3"},
					{text:"Bassoon", href:"products_listing.php?list_type=instrument&id=4"}
					],
		elemId:""
		};
menus[1]={mBarImgId:"menuImg_2",
		mBarImgNormal: imagesNormal["brass"],
		mBarImgHilite: imagesHilite["brass"],
		menuItems: [{text:"Horn", href:"products_listing.php?list_type=instrument&id=5"},
				    {text: "Trumpet", href: "products_listing.php?list_type=instrument&id=6"},
					{text:"Low Brass", href:"products_listing.php?list_type=instrument&id=7"}
					],
		elemId:""
		};
menus[2]={mBarImgId:"menuImg_3",
		mBarImgNormal: imagesNormal["misc"],
		mBarImgHilite: imagesHilite["misc"],
		menuItems: [{text:"Timpani/Percussion", href:"products_listing.php?list_type=instrument&id=8"},
				    {text: "Harp, Keyboard, etc.", href: "products_listing.php?list_type=instrument&id=9"}
					],
		elemId:""
		};
menus[3]={mBarImgId:"menuImg_4",
		mBarImgNormal: imagesNormal["strings"],
		mBarImgHilite: imagesHilite["strings"],
		menuItems: [{text:"Violin", href:"products_listing.php?list_type=instrument&id=10"},
				    {text: "Viola", href: "products_listing.php?list_type=instrument&id=11"},
					{text:"Cello", href:"products_listing.php?list_type=instrument&id=12"},
					{text: "Bass", href:"products_listing.php?list_type=instrument&id=13"}
					],
		elemId:""
		};

function makeHashes() {
	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 (i=0; i< menus.length; i++) {
		elem = document.getElementById(menus[i].mBarImgId);
		elem.onmouseover = swap;
		elem.onmouseout = swap;
	}
}
//generates menu div elements and contents
function makeMenus() {
	var menuDiv, menuItem, itemLink, mbarImg, textNode, offsetLeft, offsetTop;
	var menuItemH=0;
	//make some adjustments for positioning
	var bodyFontSize = parseInt(getElementStyle(document.body, "fontSize", "font-size"));
	
	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 menus array to create divs
	for (var i=0; i< menus.length; i++) {
		menuDiv=document.createElement("div");
		menuDiv.id="popupmenu" + i;
		menus[i].elemId= "popupmenu" + i;
		menuDiv.className="menuWrapper";
		
		//set the height of the menu based on number of menu items
		if (menus[i].menuItems.length > 0) {
			menuDiv.style.height = (menuItemH * menus[i].menuItems.length - heightAdjust + "px");
			} else {
				//don't display menu div if no menu items
				menuDiv.style.display="none";
			}
		menuDiv.onmouseover=keepMenu;
		menuDiv.onmouseout=requestHide;
		
		menuDiv.style.zIndex=1000;
		
		//assemble menu items - goes inside the menu div
		for (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);
		}//end of menuItem FOR loop
		document.body.appendChild(menuDiv);
	}//end of Menus FOR loop
	
	makeHashes();
	assignLabelEvents();
	//position menu
	for (i=0; i<menus.length; i++) {
		positionMenu(menus[i].elemId);
	}
	menuReady= true;
}//end of makeMenus function

var timer;

function keepMenu(){
	clearTimeout(timer);
}

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

//invoked by mouseouts - hides all menus in .25 seconds unless cancelled
function requestHide() {
	timer=setTimeout("hideMenus()",250);
}

//hide all menus and restire menubar images
function hideMenus(){
	for (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";
	}
}

function positionMenu(menuId){
	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";
}

//this function displays the menu for a particular menu div
function showMenu(menuId) {
	if (menuReady) {
		keepMenu();
		hideMenus();
		positionMenu(menuId);
		var menu = document.getElementById(menuId);
		menu.style.visibility="visible";
	}
}

function toggleHighlight(evt) {
	evt=(evt) ? evt : ((event) ? event : null); //alternate form of conditional statement
	if (typeof menuReady != "undefined") {  //make sure menus are loaded
		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;
			}
		}
	}
}

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