/**
 *  廣域變數宣告 - 使用者自訂部份
 *  
 *  menuWidth -		第一張頁面的寬度
 *  submenuWidth -	第二張頁面的寬度
 *  menubgcolor -	第一張頁面的背景顏色
 *  submenubgcolor - 第二張頁面的背景顏色
 *  menutop -		頁面的Y軸高度
 *  menuleft -		頁面的X軸寬度
 **/

var menuWidth, submenuWidth;
var menubgcolor, submenubgcolor;
var menutop, menuleft;

menuWidth = 120;
submenuWidth = 310;
menubgcolor = "";
submenubgcolor = "#FFFF00";
menutop = 150;
menuleft = 0;


/**
 *  廣域變數宣告 - 程式自動判斷部份
 *  
 *  ie -		瀏覽器是不是IE
 *  ns4 -		瀏覽器是不是NS4
 *  ns6 -		瀏覽器是不是NS6
 *  lastMenu -	最後選擇的第二層頁面
 *  HTMLstr -	儲存要寫入頁面的內容
 **/

var ie = 0, ns4 = 0, ns6 = 0;
if(document.all)	ie = 1;
else if(document.getElementById)	ns6 = 1;
else if(document.layers)	ns4 = 1;

var lastMenu, HTMLstr, menuComplete;
menuComplete = 0;

/**
 *  Menu() 是類別建構子
 **/

function Menu() {
	this.addItem = addItem;
	this.addSubItem = addSubItem;
	this.showMenu = showMenu;

	lastMenu = null;


	HTMLstr = "";
	HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n\r";
	HTMLstr += "\n\r";

	if(ie||ns6) HTMLstr += "<DIV ID='TOPMENU' STYLE='position:absolute; top: " + menutop +"; left: " + menuleft + "; z-index: 20;'>\n\r";
	else if(ns4)  HTMLstr += "<LAYER NAME='TOPMENU' TOP=" + menutop + " LEFT=" + menuleft + " ZINDEX=20>\n\r";


	HTMLstr += "<TABLE WIDTH='"+menuWidth+"' BORDER='0' BGCOLOR='' CELLSPACING='0' CELLPADDING='0'>\n\r";
	HTMLstr += "<TR>\n\r";
	HTMLstr += "\t<TD>\n\r";

	HTMLstr += "\t\t<TABLE WIDTH='100%' BORDER='0' CELLSPACING='1' CELLPADDING='3'>\n\r";


	HTMLstr += "<!-- MAIN MENU STARTS -->\n\r";
	HTMLstr += "<!-- MAIN_MENU -->\n\r";
	HTMLstr += "<!-- MAIN MENU ENDS -->\n\r";

	
	HTMLstr += "\t\t</TABLE>\n\r";

	HTMLstr += "\t</TD>\n\r";
	HTMLstr += "</TR>\n\r";
	HTMLstr += "</TABLE>\n\r";

	if(ie||ns6) HTMLstr+= "</DIV>\n\r";
	else if (ns4)  HTMLstr+= "</LAYER>\n\r";

	HTMLstr += "\n\r";
	HTMLstr += "<!-- SUB MENU STARTS -->\n\r";
	HTMLstr += "<!-- SUB_MENU -->\n\r";
	HTMLstr += "<!-- SUB MENU ENDS -->\n\r";
	HTMLstr += "\n\r";

	HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n\r";
}


/**
 * addItem(idItem, text, link, hint, linktarget);
 * 
 * 這個函數會把選項加入到第一層的頁面，
 * 但若是有代號相同的選項則會出現錯誤。
 * 
 * idItem -		選項的代號（必須唯一）
 * text -		選項的文字敘述
 * link -		選項的連結
 * hint -		選項的說明（目前無作用，保留給下一個版本）
 * linktarget -	開啟連結的窗頁名稱
 **/

function addItem(idItem, text, link, hint, linktarget) {
	var Lookup = "<!-- ITEM "+idItem+" -->";
	if (HTMLstr.indexOf(Lookup) != -1) {
		alert(idItem + " already exist");
		return;
	}

	var MENUitem = "";

	MENUitem += "\n\r<!-- ITEM "+idItem+" -->\n\r";
	if (ns4) {
		MENUitem += "\t\t<TR>\n\r";
		MENUitem += "\t\t\t<TD BGCOLOR='";
		MENUitem += menubgcolor;
		MENUitem += "'>\n\r";

		MENUitem += "\t\t\t<TABLE>\n\r";
		MENUitem += "\t\t\t<TR>\n\r";
		MENUitem += "\t\t\t\t<TD WIDTH=0>";

		MENUitem += "<ILAYER name="+idItem+">";

		if(link!=null) {
			MENUitem += "<A HREF='";
			MENUitem += link;
			MENUitem += "'";
			
			if(linktarget!=null) {
				MENUitem += " TARGET='";
				MENUitem += linktarget;
				MENUitem += "'";
			}

			MENUitem += " onMouseOver='hideAll();";

		}
		else {
			MENUitem += "<A HREF='javascript://' onMouseOver='showSubMenu(\"";
			MENUitem += idItem;
			MENUitem += "\")";
		}

		MENUitem += "' CLASS='clsMenuItemNS'>";

		MENUitem += text;

		MENUitem += "</A>";
		MENUitem += "</ILAYER>";

		MENUitem += "\t\t</TD>";
		MENUitem += "\t\t\t</TR>";
		MENUitem += "\t\t\t</TABLE>";


		MENUitem += "\t\t\t</TD>\n\r";
		MENUitem += "\t\t</TR>\n\r";

	}
	else if(ie||ns6) {
		MENUitem += "\t\t<TR>\n\r";
		MENUitem += "\t\t\t<TD BGCOLOR='";
		MENUitem += menubgcolor;
		MENUitem += "'>\n\r";

		MENUitem += "\t\t\t<TABLE>\n\r";
		MENUitem += "\t\t\t<TR>\n\r";
		MENUitem += "\t\t\t\t<TD WIDTH=0><DIV ID='";
		MENUitem += idItem;
		MENUitem += "' STYLE = 'position: relative; visibility: hidden; width: 0; height: 0;'></DIV></TD>";
		MENUitem += "\t\t\t\t<TD><P>";

		if(link!=null) {
			MENUitem += "<A HREF='";
			MENUitem += link;
			MENUitem += "'";
			MENUitem += "onMouseOver='hideAll();'";

			if(linktarget!=null) {
				MENUitem += " TARGET='";
				MENUitem += linktarget;
				MENUitem += "'";
			}
		}
		else {
			MENUitem += "<A HREF='javascript://' ";
			MENUitem += "onMouseOver='showSubMenu(\"";
			MENUitem += idItem;
			MENUitem += "\");'";
		}


		MENUitem += "alt='";

		MENUitem += hint;

		MENUitem += "' CLASS='clsMenuItemIE'>";




		MENUitem += text;


		MENUitem += "</A></P>\n\r";
		MENUitem += "\t\t</TD>";
		MENUitem += "\t\t\t</TR>";
		MENUitem += "\t\t\t</TABLE>";


		MENUitem += "\t\t\t</TD>\n\r";
		MENUitem += "\t\t</TR>\n\r";
	}
	MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\r\n\r";
	MENUitem += "<!-- MAIN_MENU -->\n\r";

	HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n\r", MENUitem);
}

/**
 * addSubItem(idItem, text, link, hint, linktarget);
 * 
 * 這個函數會把選項加入到指定的第二層頁面。
 * 
 * idItem -		選項的代號（必須唯一）
 * text -		選項的文字敘述
 * link -		選項的連結
 * hint -		選項的說明（目前無作用，保留給下一個版本）
 * linktarget -	開啟連結的窗頁名稱
 **/


function addSubItem(idParent, text, link, hint, linktarget) {
	var MENUitem = "";
	Lookup = "<!-- ITEM "+idParent+" -->";

	if (HTMLstr.indexOf(Lookup) == -1) {
		alert(idParent + " not found");
		return;
	}

	Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
	if (HTMLstr.indexOf(Lookup) == -1) {
		if (ns4) {
			MENUitem += "\n\r";
			MENUitem += "<LAYER NAME='"+idParent+"submenu' visibility='visibile' ZINDEX='40' TOP='-400'>\n\r";
			MENUitem += "<TABLE BORDER='0' BGCOLOR='#000000' WIDTH='";
			MENUitem += submenuWidth;
			MENUitem += "' CELLSPACING='0' CELLPADDING='0'>\n\r";
			MENUitem += "<TR>\n\r";
			MENUitem += "\t<TD>\n\r";

			MENUitem += "<TABLE BORDER='0' WIDTH='100%' CELLSPACING='1' CELLPADDING='3'>\n\r";

			MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n\r";

			MENUitem += "</TABLE>\n\r";


			MENUitem += "\t</TD>\n\r";
			MENUitem += "</TR>\n\r";

			MENUitem += "</TABLE>\n\r";

			MENUitem += "</LAYER>\n\r";
			MENUitem += "\n\r";
		}
		else if (ie||ns6) {
			MENUitem += "\n\r";

			MENUitem += "<DIV ID='";
			MENUitem += idParent;
			MENUitem += "submenu' STYLE='position: absolute; top: -400; left: 0; z-index: 40;'>";

			MENUitem += "<TABLE WIDTH='";
			MENUitem += submenuWidth;
			MENUitem += "' BGCOLOR='#000000' CELLSPACING='1' CELLPADDING='3'>\n\r";

			MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n\r";

			MENUitem += "</TABLE>\n\r";

			MENUitem += "</DIV>";
			MENUitem += "\n\r"
		}
		MENUitem += "<!-- SUB_MENU -->\n\r";
		HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n\r", MENUitem);
	}

	Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n\r";
	if (ns4) {
		MENUitem = "<TR BGCOLOR='";
		MENUitem += submenubgcolor;
		MENUitem += "'>";
		MENUitem += "\n\r<TD>";

		if(link != null) {
			MENUitem += "<A HREF='";
			MENUitem += link;

			if(linktarget!=null) {
				MENUitem += "' TARGET='";
				MENUitem += linktarget;
			}
			MENUitem += "' CLASS='clsMenuItemNS'> ";

			MENUitem += text;
			MENUitem += "</A>"
		}
		else {
			MENUitem += "<SPAN CLASS='clsMenuItemNS'>";
			MENUitem += text;
			MENUitem += "</SPAN>";
		}


		MENUitem += "\n\r</TD>";
		MENUitem += "</TR>";
	}
	else if (ie||ns6) {
		MENUitem = "<TR>";
		MENUitem += "\n\r<TD BGCOLOR='";
		MENUitem += submenubgcolor;
		MENUitem += "'> ";

		if(link!=null) {

			MENUitem += "<A HREF='";
			MENUitem += link;

			if(linktarget!=null) {
				MENUitem += "' TARGET='";
				MENUitem += linktarget;
			}

			MENUitem += "' CLASS='clsMenuItemIE'>";
			MENUitem += text;
			MENUitem += "</A>";
		}
		else {
			MENUitem += "<P CLASS='clsMenuItemIE'>";
			MENUitem += text;
			MENUitem += "</P>";
		}

		MENUitem += "\n\r</TD>";
		MENUitem += "</TR>";
	}

	MENUitem += Lookup;
	HTMLstr = HTMLstr.replace(Lookup, MENUitem);
}

/**
 * ashowMenu();
 * 
 * 這個函數會把HTMLstr的內容寫到網頁。
 **/

function showMenu() {
	document.writeln(HTMLstr);
	menuComplete = 1;
}


/**
 * showSubMenu(menuname);
 *
 * 這個函數會把顯示指定的第二層頁面，並且移動到適當的位置。
 * 
 * menuname -	圖層名稱
 **/

function showSubMenu(menuname) {
	var submenuname = menuname + "submenu";

	if(lastMenu!=null && lastMenu!=submenuname) {
		hideLayer(lastMenu);
		moveSubMenu(menuname);
		showLayer(submenuname);
	}
	else if(lastMenu == menuname) {
		moveSubMenu(menuname);
	}
	else {
		moveSubMenu(menuname);
		showLayer(submenuname);
	}
	
	lastMenu = submenuname;
}

/**
 * moveSubMenu(menuname);
 *
 * 這個函數會移動第二層頁面到適當的位置。
 * 
 * menuname -	圖層名稱
 **/

function moveSubMenu(menuname) {
	var submenuname = menuname + "submenu";
	var baseTop = 0, posTop = 0;
	var posLeft = 0;

	if(document.all) {

		baseTop = parseInt(document.all["TOPMENU"].style.top);
		posTop = parseInt(document.all[menuname].offsetTop);

		document.all[submenuname].style.top = baseTop + posTop;

		posLeft = parseInt(document.all["TOPMENU"].style.left);
		posLeft = posLeft + 0.8 * menuWidth;

		document.all[submenuname].style.left = posLeft;
	}
	else if(document.getElementById) {
		document.getElementById(submenuname).style.top = parseInt(document.getElementById("TOPMENU").style.top) + parseInt(document.getElementById(menuname).offsetTop);

		document.getElementById(submenuname).style.left = parseInt(document.getElementById("TOPMENU").style.left) + 0.8 * menuWidth;
	}
	else if(document.layers) {
		document.layers[submenuname].top = document.layers["TOPMENU"].document.layers[menuname].pageY;
		document.layers[submenuname].left = document.layers["TOPMENU"].left + 0.8 * menuWidth;
	}
}


/**
 * hideLayer(layername);
 *
 * 這個函數會讓圖層可見度為看不到。
 * 
 * layername -	圖層名稱
 **/

function hideLayer(layername) {
	if(ie)			document.all[layername].style.visibility = "hidden";
	else if(ns4)	document.layers[layername].visibility = "hidden";
	else if(ns6)	document.getElementById(layername).style.visibility = "hidden";
}


/**
 * showLayer(layername);
 *
 * 這個函數會讓圖層可見度為可看到。
 * 
 * layername -	圖層名稱
 **/

function showLayer(layername) {
	if(ie)			document.all[layername].style.visibility = "visible";
	else if(ns4)	document.layers[layername].visibility = "visible";
	else if(ns6)	document.getElementById(layername).style.visibility = "visible";
}


/**
 * hideAll();
 *
 * 這個函數會把最後一張的圖層隱藏起來。
 **/

function hideAll() {
	if(lastMenu != null)	hideLayer(lastMenu);
	lastMenu = null;
}


/**
 * rightBound();
 *
 * 這個函數會判斷滑鼠的位置是不是離導覽列太遠，若是太遠，則隱藏第二層頁面。
 **/

function rightBound(e) {
	var leftbase = 0;
	var offset = -50;

	if(!menuComplete)	return;

	if(ie) {
		leftbase = parseInt(document.all["TOPMENU"].style.left);
	}
	else if(ns4) {
		leftbase = document.layers["TOPMENU"].left;
	}
	else if(ns6) {
		leftbase = parseInt(document.getElementById("TOPMENU").style.left);
	}
	
	leftbase = leftbase + menuWidth + submenuWidth + offset;


	if(ie) {
		if(event.clientX > leftbase)	hideAll();
	}
	else if(ns4) {
		if(e.pageX > leftbase)	hideAll();
	}
	else if(ns6) {
		if(e.pageX > leftbase)	hideAll();
	}
}

if(ie) {
	document.body.onclick=hideAll;
	document.body.onscroll=hideAll;
	document.body.onmousemove=rightBound;
}
else if(ns6) {
	window.onclick=hideAll;
	window.onscroll=hideAll;
	document.onmousemove=rightBound;
}
else if(ns4) {
	window.captureEvents(Event.MOUSEMOVE);
	window.captureEvents(Event.CLICK);
	window.onclick=hideAll;
	window.onmousemove=rightBound;
}