/////////////////////////////////////////////////////////////////////
//
//    FILE: iMenuMaster.js
//  AUTHOR: Scott Lininger, slininger@ai-group.com
// PURPOSE: Javascript library for generating Wintel style
//          menus in a framed, web based application.
//          
//          This file should be a client side javascript
//          include in the top frameset of the application.
//
/////////////////////////////////////////////////////////////////////

// initialize variables to help account for differences
// in the various browser object models 
var isNS, isNS6, isMacIE, layerRef, styleRef, isDynamic, popDirection, windowWidth, windowHeight, menuFontSize
var menuHeadHTML, MenuFootHTML

// initialize a variable to store our currently active menu 
// number, or false if no menu is active
var activeMenuID = false;

// initialize arbitrary "maximums" for # of menus and options
var maxMenus = 12;
var maxOptions = 30;

// create an array of menu objects to store everything and
// run the preparation function to get it ready to receive data
var menu = new Array();
PrepareMenuArray();



// Determine what kind of browser the user has, and react accordingly
if (navigator.appName == "Netscape") {
 	isNS = true;
	if (navigator.appVersion.charAt(0) >= "5") {
		isNS6 = true;
	}
}

isMacIE = ( (navigator.userAgent.indexOf("IE 4")  > -1) && (navigator.userAgent.indexOf("Mac")  > -1) );

if (isNS) {
	if (isNS6) {
		layerRef="document.getElementById(";
		styleRef=").style";
		menuFontSize="11px";
	} else {
		layerRef="document[";
		styleRef="]";
		menuFontSize="13px";
	}
	
} else {
	layerRef = "document.all[";
	styleRef = "].style";
	menuFontSize="12px";

}

isDynamic = ( (document.layers || document.all || isNS6) && !isMacIE );

function PrepareMenuArray () {

	// create our arbitrary number of menus
	// to be sure we have more than will be needed
	for (var i=1; i<=maxMenus; i++) {
		menu[i] = new menuObject;
	}
}


function showMenu(menuID) {

	if (activeMenuID != menuID) {
		hideActiveMenu();
		
		// if the imagebutton exists in the document, turn it on
		if (document['menuButton' + menuID]){
			changeImage('menuButton' + menuID,'on');
		}
		
		activeMenuID = menuID;
		if (isDynamic) {
			
			// the next few lines account for any scrolling on various browsers
			var tempY, tempX;
			
			if (isNS) {
				tempY = pageYOffset;
			} else {
				tempY = document.body.scrollTop;
			}
			
			if (isNS) {
				windowWidth = window.innerWidth;
				windowHeight = window.innerHeight;
			} else {
				windowWidth = document.body.clientWidth;
				windowHeight = document.body.clientHeight;
			}

			if (popDirection == "up") {
				activeMenuHeight = (menu[activeMenuID].totalOptions * menu[activeMenuID].optionHeight) + 16;
				displayY = windowHeight - activeMenuHeight - 35;
				
				menuButtonsWidth = 510;
				displayX = (windowWidth - menuButtonsWidth) / 2 + menu[activeMenuID].left;
			} else {
				displayY = 150;
				displayX = 40 + menu[activeMenuID].left
			}

			eval(layerRef + '"menuBackground' + menuID + '"' + styleRef + '.top = displayY');
			eval(layerRef + '"menuTitle' + menuID + '"' + styleRef + '.top = displayY');
			
			eval(layerRef + '"menuBackground' + menuID + '"' + styleRef + '.left = displayX');
			eval(layerRef + '"menuTitle' + menuID + '"' + styleRef + '.left = displayX');
			
			// make the appropriate menu appear
			eval(layerRef + '"menuBackground' + menuID + '"' + styleRef + '.visibility = "visible"');
			eval(layerRef + '"menuTitle' + menuID + '"' + styleRef + '.visibility = "visible"');
			
		}
	}
}

function hideActiveMenu() {
	if (activeMenuID) {
		
		// if the imagebutton exists in the document, turn it off
		if (document['menuButton' + activeMenuID]){
			changeImage('menuButton' + activeMenuID,'off');
		}

		if (isDynamic) {
			eval(layerRef + '"menuTitle' + activeMenuID + '"' + styleRef + '.visibility = "hidden"');	
			eval(layerRef + '"menuBackground' + activeMenuID + '"' + styleRef + '.visibility = "hidden"');	
			
			// show pulldown menus
			//eval(layerRef + '"pulldowns"' + styleRef + '.visibility = "hidden"');
		}
		activeMenuID = false;
	}  
}

function BuildMenus() {

	// first set how many menus there will be
	//var totalMenus = 5;

	// now loop through the menus and options to build the dynamic layers
	for (var i=1; menu[i].option[1].title != ""; i++) {
		document.write('<STYLE ');
		if (!isNS || isNS6) {
			document.write('MEDIA="screen,print"');
		}
		document.write(' TYPE="text/css"><!--\n');
		document.write('#menuTitle' + i + ' { position: absolute; z-index: ' + (2 + i) + '; top: ' + menu[i].top + 'px; left: ' + menu[i].left + 'px; width: ' + menu[i].optionWidth + 'px; height: ' + menu[i].optionHeight * menu[i].totalOptions + 'px; visibility: hidden }\n');
		document.write('#menuBackground' + i + ' { position: absolute; z-index: ' + (1 + i) + '; top: ' + menu[i].top + 'px; left: ' + menu[i].left + 'px; width: ' + menu[i].optionWidth + 'px; height: ' + menu[i].optionHeight * menu[i].totalOptions + 'px; visibility: hidden }\n');
		document.write('-->\n</STYLE>');

		// you may specify a standard block of code that appears before and 
		// after your menu blocks, typically to make the menu look embossed
		menuHeadHTML = '<img src="/media/menuimages/menucap_top.gif" alt="" title="" width="' + menu[i].optionWidth +  '" height="8"><br>';
		menuFootHTML = '<img src="/media/menuimages/menucap_bottom.gif" alt="" title="" width="' + menu[i].optionWidth +  '" height="8">';

		document.write('<DIV ID="menuTitle' + i +'">' + menuHeadHTML + '<table border=0 cellpadding=0 cellspacing=0 width=400>');
		
		totalOptions = 0;
		for (var j=1; menu[i].option[j].title != ""; j++) {
			
				document.write('<tr><td height="' + menu[i].optionHeight + '" >');
				document.write('<a href="' + menu[i].option[j].url + '" ');
				if (menu[i].option[j].target != "") {
					document.write('target="' + menu[i].option[j].target + '" ');
				} else if (popDirection == "up") {
					document.write('target="_top" ');
				}
				document.write('style="text-decoration: none; font-family: arial,optima,helvetica; font-size: ' + menuFontSize + '; color: #000000" onclick="hideActiveMenu()" onmouseover="isOverMenu++;changeImage(\'option' + i + '-' + j + '\',\'on\')" onmouseout="isOverMenu--;changeImage(\'option' + i + '-' + j + '\',\'off\')">');
				document.write('<img width="11" height="8" alt="" border="0" src="/media/images/clear.gif">');
				document.write( menu[i].option[j].title + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" );
				document.write('</a></div></td></tr>');
				
				// iterate our option count and store it for later use
				totalOptions++;
				menu[i].totalOptions = totalOptions;
		}
		
		document.write('</table>' + menuFootHTML + '</DIV>');
		
		document.write('<DIV ID="menuBackground' + i +'">' + menuHeadHTML);
		for (var j=1; menu[i].option[j].title != ""; j++) {
			if (menu[i].option[j].title == "-----") {
				document.write('<IMG SRC="' + menu[i].bgImgSrc + '" WIDTH="' + menu[i].optionWidth + '" HEIGHT="' + menu[i].optionHeight / 2 + '" BORDER="0" NAME="option' + i + '-' + j + '"><BR>');
			} else {
				document.write('<IMG SRC="' + menu[i].bgImgSrc + '" WIDTH="' + menu[i].optionWidth + '" HEIGHT="' + menu[i].optionHeight + '" BORDER="0" NAME="option' + i + '-' + j + '"><BR>');
			}
		}
		document.write( menuFootHTML );
		if (popDirection == "up") {
			document.write('<br><img src="/media/menuimages/menuarrow.gif" width="14" height="12" alt="" hspace=20>');
		}
		document.write('</DIV>');
	}

}


// A custom object to hold popup menu information
function menuObject () {
	this.name = "";
	this.totalOptions = 0;
	this.top = 0;
	this.left = 0;
	this.optionWidth = 167;
	this.optionHeight = 15;
	this.bgImgSrc = "/media/menuimages/menubg_off.gif";
	this.windowStatus = "";
	this.option = new Array();
	for (var i=1; i<=maxOptions; i++) {
		this.option[i] = new optionObject;
	}

}

// A custom object to hold popup menu option information
function optionObject () {
	this.title = "";
	this.url = "#";
	this.target = "";
}