/************************************************************
 * navbar.js                                                *
 *                                                          *
 * Copyright 2003 by Yenting Kuo                            *
 * Last update: September 2003                             *
 *                                                          *
 * Provide functions to build drop-down menus. It supports  *
 * IE6.0+ and Netscape 7.1 as well.                         *
 *                                                          *
 * "dhtml.js" must be called before this code.              *
 ************************************************************/

<!--
var isIE4 = (document.all && !document.getElementById) ? true : false;
var isNS4 = (document.layers) ? true : false;
var isIE5 = (document.all && document.getElementById) ? true : false;
var isNS6 = (document.getElementById && !document.all) ? true : false;

var navBars = new Array();	// navigation bar array

/*
 *	NavBar construction
 */
function NavBar(width) {
	this.menus = new Array();	// menus
	this.width = width;			// navigation bar width
	this.corX = 0;
	this.corY = 0;
	this.colHeight = 25;		// menu column height
	
	// methods
	this.addMenu	= navBarAddMenu;
	this.create		= navBarCreate;
	this.moveTo		= navBarMoveTo;
	
	this.index = navBars.length;
	navBars[this.index] = this;
}

/*
 * Menu construction
 */
function Menu(width, dropDownMenuWidth) {
	this.width = width;			// menu width
	if(dropDownMenuWidth < width) {
		this.dropDownMenuWidth = this.width;
	} else {
		this.dropDownMenuWidth = dropDownMenuWidth;
	}
	this.items = new Array();	// menu items array	
	
	// methods
	this.setHeader = navBarMenuSetHeader;
	this.addMenuItem = navBarAddMenuItem;	
}

/*
 * MenuItem construction
 */
function MenuItem(text, link) {
	this.text = text;	// menu item text
	this.link = link;	// menu item link
}

/* setup menu header */
function navBarMenuSetHeader(text, link) {
	this.text = text;			// menu header text
	this.link = link;			// menu header link
}

/* add menu into navigation bar */
function navBarAddMenu(menu) {
	this.menus[this.menus.length] = menu;
}

/* add menu item into menu */
function navBarAddMenuItem(menuItem) {
	this.items[this.items.length] = menuItem;
}

/* move navigation bar */
function navBarMoveTo(x, y) {
	navBars[this.index].corX = x;
	navBars[this.index].corY = y;
	moveObject('navbar' + this.index, x, y);
}

/* build drop-down menu bar */
function navBarCreate() {
	// create style sheet
	importCSS("dhtml/standard.css");
	
	var objID;
	var div, table, tr, td, headerDiv, menuDiv, aHref, txt;
	
	str = '';
	
	/* create headers */
	// drop-down menu header <DIV>
	if(isIE5) {
		str += '<div id="navbar' + this.index + '" style="height: 26px; left: ' + navBars[this.index].corX + 'px; top: ' + navBars[this.index].corY + 'px; position:absolute; z-index:10; visibility:visible;">'
			+ '<table cellpadding="0" cellspacing="0" border="1" bordercolor="#FFFFFF" bgcolor="#000000" width="100%" height="100%">'
			+ '<tr width="100%" rowspan=2>';
	} else {
		div = document.createElement("div");
		div.setAttribute('id', 'navbar' + this.index);
		div.setAttribute('style', 'left: ' + navBars[this.index].corX + 'px; top: ' + navBars[this.index].corY + 'px; position:absolute; z-index:10; visibility:visible;');
		
		table = document.createElement("table");
		table.setAttribute('cellpadding', '0');
		table.setAttribute('cellspacing', '0');
		table.setAttribute('border', '0');
		table.setAttribute('bordercolor', '#FFFFFF');
		table.setAttribute('bgcolor', '#FFFFFF');
		table.setAttribute('width', '100%');
		
		tr = document.createElement("tr");
		tr.setAttribute('width', '100%');
	}
	
	// build drop-down menu headers
	for(i=0 ; i<navBars[this.index].menus.length ; ++i) {
		objID = 'header' + i;
		if(isIE5) {
			str += '<a href="' + navBars[this.index].menus[i].link + '" class="MenuHeader">'
				+ '<td align="left" valign="middle" '
				+ 'width="' + navBars[this.index].menus[i].width + '" '
				+ 'onMouseOver="showMenu(\'menu' + i + '\', event, \'header' + i + '\'); status=\'\'; this.style.color=\'#CC9933\'; return true;" '
				+ 'onMouseOut="this.style.color=\'#FFFFFF\';"'
				+ 'nowrap=1 class="MenuHeader">'
				+ '<div id="' + objID + '" align="center">'
				+ navBars[this.index].menus[i].text
				+ '</div></td></a>';
		} else {
			td = document.createElement("td");
			td.setAttribute('align', 'left');
			td.setAttribute('valign', 'middle');
			td.setAttribute('width', navBars[this.index].menus[i].width-2);
			td.setAttribute('onMouseOver', 'showMenu(\'menu' + i + '\', event, \'header' + i + '\'); this.style.cursor=\'pointer\'; status=\'\'; return true;');
			td.setAttribute('onClick', 'location.href=\'' + navBars[this.index].menus[i].link + '\';');
			td.setAttribute('class', 'HeaderBox');
			
			headerDiv = document.createElement("div");
			headerDiv.setAttribute('id', objID);
			headerDiv.setAttribute('align', 'center');
			
			aHref = document.createElement("a");
			aHref.setAttribute('href', navBars[this.index].menus[i].link);
			aHref.setAttribute('class', 'MenuHeader');
			
			txt = document.createTextNode(navBars[this.index].menus[i].text);
			aHref.appendChild(txt);
			headerDiv.appendChild(aHref);
			td.appendChild(headerDiv);
			tr.appendChild(td);			
		}
	} // end of drop-down menu headers
	
	// drop-down menu header append to <BODY>
	if(isIE5) {
		str += '<td>&nbsp;</td></tr></table></div>';
		document.body.insertAdjacentHTML("beforeEnd", str);
	} else {
		td = document.createElement("td");
		td.setAttribute('class', 'HeaderBox');
		td.setAttribute('onMouseOver', 'this.style.cursor=\'default\'');
		txt = document.createTextNode("&nbsp;");
		td.appendChild(txt);
		tr.appendChild(td);
		table.appendChild(tr);
		div.appendChild(table);
		document.getElementsByTagName("body")[0].appendChild(div);
	}
	
	/* create drop down menus */
	// build all drop-down menus
	var currWidth = navBars[this.index].corX;	// drop-down menu position
	if(!isIE5) --currWidth;
	for(i=0 ; i<navBars[this.index].menus.length ; ++i) {
		if(navBars[this.index].menus[i].items.length <= 0) {
			if(isIE5) {
				currWidth += 2 + navBars[this.index].menus[i].width;
			} else {
				currWidth += 2 + navBars[this.index].menus[i].width;
			}
			continue;
		}
		
		// build each drop-down menu <DIV> tag
		objID = 'menu' + i;
		height = navBars[this.index].menus[i].items.length * 30;
		var top;
		if(isIE5)
			top = navBars[this.index].corY + document.getElementById("navbar" + this.index).offsetHeight - 2;
		else
			top = navBars[this.index].corY + document.getElementById("navbar" + this.index).offsetHeight + 1;
		if(isIE5) {
			str = '<div id="' + objID + '" '
					+ 'style="width: ' + navBars[this.index].menus[i].dropDownMenuWidth + 'px; '
					+ 'height: ' + height + 'px; '
					+ 'left: ' + currWidth + 'px; '
					+ 'top: ' + top + 'px; '
					+ 'position:absolute; z-index:10; visibility:hidden;" '
					+ 'onMouseOver="event.cancelBubble = true; " '
					+ 'class="Menu">'
				+ '<table cellspacing="0" cellpadding="0" border="0" bordercolor="#FFFFFF" width="100%">'
				+ '<tr width="100%">'
				+ '<td width="100%">'
				+ '<table cellpadding="2" cellspacing="0" bgcolor="#000000" border="0" bordercolor="#FFFFFF" width="100%" height="100%" class="MenuTable">';
		} else {
			menuDiv = document.createElement("div");
			menuDiv.setAttribute('id', objID);
			attrValue =   'width: '		+ (navBars[this.index].menus[i].dropDownMenuWidth+2) + 'px; '
						+ 'left: '		+ currWidth + 'px; '
						+ 'top: '		+ top + 'px; '
						+ 'position:absolute; z-index:10; visibility:hidden;"';
			menuDiv.setAttribute('style', attrValue);
			menuDiv.setAttribute('onMouseOver', 'event.cancelBubble=true;');
			menuDiv.setAttribute('class', 'Menu');
			
			outTable = document.createElement("table");
			outTable.setAttribute('cellpadding', '0');
			outTable.setAttribute('cellspacing', '0');
			outTable.setAttribute('border', '0');
			outTable.setAttribute('bordercolor', '#FFFFFF');
			outTable.setAttribute('width', '100%');
			outTr = document.createElement("tr");
			outTr.setAttribute('width', '100%');
			outTd = document.createElement("td");
			outTd.setAttribute('width', '100%');
			
			table = document.createElement("table");
			table.setAttribute('cellpadding', '2');
			table.setAttribute('cellspacing', '0');
			table.setAttribute('bgcolor', '#000000');
			table.setAttribute('border', '0');
			table.setAttribute('bordercolor', '#FFFFFF');
			table.setAttribute('width', '100%');
			table.setAttribute('class', 'MenuTable');
		}
		
		// each drop-down menu's items
		for(j=0 ; j<navBars[this.index].menus[i].items.length ; ++j) {
			if(isIE5) {
				str += '<tr width="100%">'
					+ '<a href="' + navBars[this.index].menus[i].items[j].link + '" onMouseOver="status=\'\';return true;" class="MenuItem">'
					+ '<td onMouseOver="this.style.backgroundColor = \'#993300\'; status=\'\'; return true;" '
						+ 'onMouseOut = "this.style.backgroundColor = \'#000000\';" '
						+ 'width="100%" class="MenuBox">'
						+ navBars[this.index].menus[i].items[j].text
					+ '</td></a></tr>';
			} else {
				tr = document.createElement("tr");
				tr.setAttribute('width', '100%');
				
				td = document.createElement("td");
				td.setAttribute('onMouseOver', 'this.style.backgroundColor = \'#993300\'; status=\'\'; return true;');
				td.setAttribute('onMouseOut', 'this.style.backgroundColor = \'#000000\';');
				td.setAttribute('onClick', 'location.href=\'' + navBars[this.index].menus[i].items[j].link + '\'');
				td.setAttribute('width', '100%');
				td.setAttribute('valign', 'middle');
				td.setAttribute('class', 'MenuBox');
				
				aHref = document.createElement("a");
				aHref.setAttribute('href', navBars[this.index].menus[i].items[j].link);
				aHref.setAttribute('class', 'MenuItem');
				txt = document.createTextNode(navBars[this.index].menus[i].items[j].text);
				aHref.appendChild(txt);
				
				td.appendChild(aHref);
				tr.appendChild(td);	
				table.appendChild(tr);
			}
		} // end of drop-down menu's items
		
		// drop-down menu append to <BODY>
		if(isIE5) {
			str += '</table></td></tr></table></div>';
			document.body.insertAdjacentHTML("beforeEnd", str);
		} else {
			menuDiv.appendChild(outTable);
			outTable.appendChild(outTr);
			outTr.appendChild(outTd);
			outTd.appendChild(table);
			document.getElementsByTagName("body")[0].appendChild(menuDiv);
		}
		
		if(isIE5) {
			currWidth += 2 + navBars[this.index].menus[i].width;
		} else {
			currWidth += 2 + navBars[this.index].menus[i].width;
		}
	} // end of drop down menus
	
}

/* link specified stylesheet */
function importCSS(path) {
	if(isIE5) {
		document.createStyleSheet(path);
	} else {
		var doc = document.getElementsByTagName("HEAD")[0];
		ele = document.createElement("link");
		ele.setAttribute("href", path);
		ele.setAttribute("rel", "stylesheet");
		ele.setAttribute("type", "text/css");
		doc.appendChild(ele);
	}
}
//-->