//* MENUBAR -- a javascript object for creating a particular style of pulldown menu.
//*   David Brewer, 3/20/00

function MenuBar(pdArray, backing) {
	// constructor
	this.pulldowns = pdArray; // array of all menus in the pulldown
	this.openMenu = null; // the current open menu
	this.menuBack = backing; // the div to be used for mouse event detection
	this.menuBack.parent = this;
	this.menuBack.hide();
			
	// mouse handling... triggered onMouseOut of the body of the pulldown or the tab.
	this.menuBack.elm.onmouseover = backOver;
}

function backOver(e) {
	// mouse handler for backing item -- closes menus if it is tripped
	eval(this.id.substring(0, this.id.length - 3)).parent.closeItem();
}

function MenuBarAlign(locationName) {
	// align the menubar with the image named locationName and put the backing in place.
	var img = getImage(locationName), 
	x = getImagePageLeft(img),
	y = getImagePageTop(img);

	this.menuBack.moveTo(x - 50, y - 50);
	for (var i = 0; i < this.pulldowns.length; i++) {
		// initialize each pulldown
		this.pulldowns[i].tab.moveTo(x, y);
		this.pulldowns[i].tab.show();
		this.pulldowns[i].alignToTab();
		x += this.pulldowns[i].tab.clipValues('r');
	}	
}

function MenuBarCloseItem() {
	// close the currently open item
	if (this.openMenu) {
		this.openMenu.popClosed();
		this.menuBack.hide();
		this.openMenu = null;
	}
}

function MenuBarOpenItem(i) {
	// open the item designated by i.
	if ((this.openMenu) && (this.openMenu != this.pulldowns[i])) {
		this.closeItem();
		this.openMenu = this.pulldowns[i];
		this.pulldowns[i].popOpen();
	}
	else {
		this.openMenu = this.pulldowns[i];
		this.pulldowns[i].popOpen();
	}
	this.menuBack.show();
}

MenuBar.prototype.openItem = MenuBarOpenItem;
MenuBar.prototype.closeItem = MenuBarCloseItem;
MenuBar.prototype.align = MenuBarAlign;

function Pulldown(itemArray, imageOnPath, imageOffPath, xOffset, yOffset, xOffsetR) {
	// constructor
	this.hasPD = (!itemArray[1]) ? false : true; // check to see if there are items in the menu
	this.name = itemArray[0]; // array containing all menu item layers
	this.tab = addID(this.name, "Tab"); // tab layer
	this.tab.clipTo(0, this.tab.w, this.tab.h, 0);
	this.id = this.name+"PD";	// name of this pulldown

	// preload images for the tab
	preload( this.name + '_on', imageOnPath);
	preload( this.name + '_off', imageOffPath);
	
	if (this.hasPD) { // the rest of the init should only be performed if there are items in the menu
	
		this.items = new Array();
		for (var i = 1; i < itemArray.length; i++) {
			this.items[i-1] = addID(this.name, i);
		}
		// array containing all layers that make up framework of pulldown
		this.framework = new Array(eval(this.name), addID(this.name, "Center"), addID(this.name, "L"), addID(this.name, "R"), addID(this.name, "TLT"), addID(this.name, "TLB"), addID(this.name, "TR"), addID(this.name, "BL"), addID(this.name, "BRT"), addID(this.name, "BRB"));
		this.xOffset = xOffset;		// series of offsets for aligning pulldown to tab
		this.yOffset = yOffset;
		this.xOffsetR = xOffsetR;
		
	
		// perform clipping initialization function on all layers of the menu.
		arrayMiscInit(this.items, this.id);
		arrayMiscInit(this.framework, this.id);
		
		// now set up the location and clipping settings of all the pieces of the menu.
		
		// you can tweak these values to add white space to the sides or top and bottom
		this.itemHeight = findMaxHeight(this.items);
		this.itemWidth = findMaxWidth(this.items) + 25;
		this.menuHeight = (this.itemHeight * this.items.length) + 10;
	
		// for each piece of the framework, compute its size relative to size of the whole menu	
		this.framework[0].clipTo(0, this.itemWidth, this.menuHeight, 0); // main menu container
		this.framework[1].clipTo(0, this.itemWidth-3, this.menuHeight-4, 0); // center box
		this.framework[1].moveTo(1, 2); 
		this.framework[2].clipTo(0, 1, this.menuHeight-3, 0); // left 
		this.framework[2].moveTo(0, 0); 
		this.framework[3].clipTo(0, 1, this.menuHeight-2, 0); // right 
		this.framework[3].moveTo(this.itemWidth-2, 2); 
		this.framework[4].clipTo(0, this.itemWidth-3, 1, 0); // top left top
		this.framework[4].moveTo(1, 0); 
		this.framework[5].clipTo(0, this.itemWidth-3, 1, 0); // top left bottom
		this.framework[5].moveTo(1, 1); 
		this.framework[6].clipTo(0, 2, 2, 0); // top right
		this.framework[6].moveTo(this.itemWidth-3, 0); 
		this.framework[7].clipTo(0, 2, 3, 0); // bottom left
		this.framework[7].moveTo(0, this.menuHeight-3); 
		this.framework[8].clipTo(0, this.itemWidth-3, 0, 0); // bottom right top
		this.framework[8].moveTo(2, this.menuHeight-3); 
		this.framework[9].clipTo(0, this.itemWidth-3, 2, 0); // bottom right bottom
		this.framework[9].moveTo(2, this.menuHeight-2); 
		
		// set the size of each item on the menu
		for (var i = 0; i < this.items.length; i++) {
			this.items[i].clipTo(0, this.itemWidth, this.itemHeight, 0);
			this.items[i].w = this.itemWidth;
			this.items[i].moveTo(0, this.itemHeight * i);
		}
			
		// now that we've intialized the pieces inside the container, hide the container.
		this.framework[0].hide();
		
		// move the pulldown container to line up with the tab.
		this.alignToTab();
	}
}

function alignToTab() {
	// move the pulldown container to line up with the tab (right aligned if would go off screen)
	if (!this.hasPD) return;
	var width;
	if (is.ns) {
		width  = window.innerWidth;
	}
	if (is.ie) {
		width = document.body.clientWidth;
	}
	if( (this.tab.x + this.framework[0].clipValues('r')) >= width)
		this.rightAlignToTab();
	else this.leftAlignToTab();
}

function rightAlignToTab() {
	// right-align pulldown
	var myX = this.tab.x + this.tab.clipValues('r') - this.framework[0].clipValues('r');
	this.framework[0].moveTo(myX + this.xOffsetR, this.tab.y + this.tab.h + this.yOffset);	
}

function leftAlignToTab() {
	// left-align pulldown
	this.framework[0].moveTo(this.tab.x + this.xOffset, this.tab.y + this.tab.h + this.yOffset);	
}

function highlight_on(itemNum) {
	// turns on the highlight of item itemNum
	if (is.p == "Win32")
		this.items[itemNum-1].setbg('#FFFF99');
	else
		this.items[itemNum-1].setbg('#FFFF66');
}

function highlight_off(itemNum) {
	// turns off the highlight of item itemNum
	this.items[itemNum-1].setbg('#FFFFFF');
}

function popOpen() {
	// opens the pulldown.
	if (this.hasPD) this.framework[0].show();
	changeImage(this.tab.id,this.name+'Img',this.name+'_on')
}

function popClosed() {
	// closes the pulldown.
	if (this.hasPD) this.framework[0].hide();
	changeImage(this.tab.id,this.name+'Img',this.name+'_off')
}

Pulldown.prototype.highlight_on = highlight_on;
Pulldown.prototype.highlight_off = highlight_off;
Pulldown.prototype.popOpen = popOpen;
Pulldown.prototype.popClosed = popClosed;
Pulldown.prototype.alignToTab = alignToTab;
Pulldown.prototype.rightAlignToTab = rightAlignToTab;
Pulldown.prototype.leftAlignToTab = leftAlignToTab;

function addID (myLayerName, myString) {
	// utility function.  Given a dynlayer name and a string, add them together and return the dynlayer that the combination names.
	return eval(myLayerName + myString);
}

function arrayMiscInit (itemArray, parentName) {
	// utility function.  Given an array of dynlayers, perform clipping.
	for (var i = 0; i < itemArray.length; i++) {
		itemArray[i].clipInit();
	}
}

function findMaxHeight(itemArray) {
	// utility function.  Given an array of dynlayers, find the greatest height.
	var maxHeight = 0;
	for (var i = 0; i < itemArray.length; i++) {
		if (maxHeight < itemArray[i].h) maxHeight = itemArray[i].h;
	}
	return maxHeight;
}

function findMaxWidth(itemArray) {
	// utility function.  Given an array of dynlayers, find the greatest width.
	var maxWidth = 0;
	for (var i = 0; i < itemArray.length; i++) {
		if (maxWidth < itemArray[i].w) maxWidth = itemArray[i].w;
	}
	return maxWidth;
}

function preload(imgObj,imgSrc) {
	// preload an image
	if (document.images) {
		eval(imgObj+' = new Image()')
		eval(imgObj+'.src = "'+imgSrc+'"')
	}
}
function changeImage(layer,imgName,imgObj) {
	// performs action of swapping image
	if (document.images) {
		if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src')
		else document.images[imgName].src = eval(imgObj+".src")
	}
}

function writeMenuCSS(menuItemArrays) {
	// function called to write the CSS for the pulldown menu bar.
	var cssBlock = css('START');
	var hide = (is.ie) ? 'hidden' : 'hide';

	// this code for success tab	
	cssBlock += css('successDiv',1,1,69,144,null,hide,300);
	cssBlock += css('successTabDiv',1,1,16,90,null,hide,300);
	
	cssBlock += '#mi {font-family:Arial, Helvetica, sans-serif; text-decoration:none; font-size:10pt; color:black;}\n';
	cssBlock += css('myBackDiv',1,1,400,400,null,hide,5);
	
	for (var i = 0; i < menuItemArrays.length; i++) {
		cssBlock += pulldownCSS(menuItemArrays[i]);
	}
	cssBlock += css('END');
	document.write(cssBlock);
}

function pulldownCSS(menuItems) {
	// function called to return the CSS for an individual pulldown item.
	var name = menuItems[0];
	var str = '';
	var hide = (is.ie) ? 'hidden' : 'hide';
	
	str += css(name+'TabDiv',1,1,null,null,null,hide,10);
	if (!menuItems[1]) return str;

	str += css(name+'Div',1,1,0,0,null,hide,15);
	str += css(name+'CenterDiv',1,2,398,396,'#FFFFFF',null,-1);
	str += css(name+'LDiv',0,0,1,397,'#000000',null,1);
	str += css(name+'RDiv',199,2,1,398,'#000000',null,1);
	str += css(name+'TLTDiv',1,0,397,1,'#000000',null,1);
	str += css(name+'TLBDiv',1,1,397,1,'#FFFFFF',null,1);
	str += css(name+'TRDiv',198,0,2,2,null,null,1);
	str += css(name+'BLDiv',0,197,2,3, null, null, 1);
	str += css(name+'BRTDiv',2,197,397,1,'#FFFFFF');
	str += css(name+'BRBDiv',2,198,397,2,'#000000');

	for (var i = 1; i < menuItems.length; i++) {
		str += css(name+i+'Div', 0, 0);
	}
	return str;
}

function writeMenuDivs(menuItemArrays, urlItemArrays) {
	// function called to write the divs for the pulldown menu bar
	var divBlock = '';
	divBlock += '<DIV ID="myBackDiv"></DIV>\n'

	for (var i = 0; i < this.menuItemArrays.length; i++) {
		divBlock += pulldownDivs(menuItemArrays[i], urlItemArrays[i]);
	}
	document.write(divBlock);
}

function pulldownDivs(menuItems, urlArray) {
	//function called to return the divs for an individual pulldown
	if (!menuItems[1]) return "";
	var name = menuItems[0];
	var myStr =	'<div id="' + name + 'Div">\n' +
				'<div id="' + name + 'LDiv"></div>\n' +
				'<div id="' + name + 'RDiv"></div>\n' +
				'<div id="' + name + 'TLTDiv"></div>\n' +
				'<div id="' + name + 'TLBDiv"></div>\n' +
				'<div id="' + name + 'TRDiv"><img src="/templates/images/top_right_corner.gif" width="2" height="2" alt="" border="0"></div>\n' +
				'<div id="' + name + 'BLDiv"><img src="/templates/images/bottom_left_corner.gif" width="2" height="3" alt="" border="0"></div>\n' +
				'<div id="' + name + 'BRTDiv"></div>\n' +
				'<div id="' + name + 'BRBDiv"></div>\n' +
				'<div id="' + name + 'CenterDiv">\n';		
	for (var i = 1; i < menuItems.length; i++) {
		myStr += '<div id="' + name + i + 'Div"><a href="' + urlArray[i-1] + '" ID=mi onMouseOver="' + name + 'PD.highlight_on(' + i + ')" onMouseOut="' + name + 'PD.highlight_off(' + i + ')"' +'>' + menuItems[i] + '</a></div>\n';
	}	
	myStr += '</div>\n</div>\n';
	return myStr;
}
