<!--
// -------------------------------------------------------------------------------------------------
// filename:	menu.js
// written:		Utada, SIU Pui - wing
// date:		2004-03-11
// description:	This function will generate a menu which the menu items is predefined by user
//				already.
// -------------------------------------------------------------------------------------------------

var FONT_CLASS			= "menu";								//@ style sheet applied to menu text
var MENU_BGCOLOR		= "#bcbcbc";							//@ background color of menu table
var MENU_BORDER_COLOR	= "#bcbcbc";							//@ border color of menu table
var MENU_WIDTH			= 690;									//@ parent menu table width 
var MOUSE_OVER_COLOR	= "green";								//@ background color of the selected item when mouse over it
var CHILD_MENU_WIDTH	= 175;									//@ width of sub menu table
var CHILD_MENU_BORDER	= 1;									//@ border of sub menu table

var isIE			= (document.all ? true : false);			// @ is Internet Explorer
var isNS			= (document.layers ? true : false);			// @ is Netscape Navigator 4
var isDOM			= (document.getElementById ? true : false); // @ is Netscape Navigator 6+ or other
var menu			= new Array();								// @ menu array to store the menu information
var ref				= new Object();								// @ menu layer reference object
var timer			= 0;										// @ used to store the timeout id, which generated by using the setTimeout function

//-- top level menu items. for example:
menu[0] =	new menuObject(-1,	"Home",			"index.asp",		"_self", "",	null,	1,		0,	0);
menu[1] =	new menuObject(-1,	"Profile",		"profile.html",		"_self", "",	null,	2,		0,	0);
menu[2] =	new menuObject(-1,	"Product Menu",	"product.asp",		"_self", "",	null,	3,		0,	0);
menu[3] =	new menuObject(-1,	"What's New",	"#",		"_self", "",	 5, 9,		0,	0);
menu[9] =	new menuObject(3,	"Recipe",				"re.html",	"_self", "",	12, 4,		0,	0);
menu[4] =	new menuObject(-1,	"Contact",	"cu.asp",		"_self", "",	null,	null,		0,	0);

menu[5] =	new menuObject(3,	"Price Adjustment",		"pa.html",	"_self", "",	null,	11,		140,	280);
menu[11] =	new menuObject(3,	"Special Price",	"sp.html",	"_self", "",	null, 6,		0,	0);
menu[6] =	new menuObject(3,	"New Arrival",			"na.html",	"_self", "",	null, 7,		0,	0);
menu[7] =	new menuObject(3,	"Market News",			"mn.html",	"_self", "",	null, 8,		0,	0);
menu[8] =	new menuObject(3,	"Health Product News",	"hpn.html",	"_self", "",	null, null,		0,	0);

menu[12] =	new menuObject(9,	"Riscossa's Recipe","riscossa_re.html",	"_self", "",	null, 13,	140,	430);
menu[13] =	new menuObject(9,	"Mida's Recipe","mida_re.html",	"_self", "",	null, 14,	0,	0);
menu[14] =	new menuObject(9,	"Gold Reef's Recipe","goldreef_re.html",	"_self", "",	null, 15,	0,	0);
menu[15] =	new menuObject(9,	"Darbo's Recipe","darbo_re.html",	"_self", "",	null, 16,	0,	0);
menu[16] =	new menuObject(9,	"Oregon's recipes","dessert.htm",	"_self", "",	null, 17,	0,	0);
menu[17] =	new menuObject(9,	"Others","other_re.html",	"_self", "",	null, null,	0,	0);


//** create menu object 
function menuObject(parent_id, menu_name, menu_link, target_page, alt_text, sub_item_id, next_item_id, top_position, left_position){
	this.pid		= parent_id;					//@ fill -1 to indicate it is parent menu item
	this.name		= menu_name;
	this.link		= menu_link;
	this.target		= target_page;					//@ [_blank | _self | _new]
	this.alt		= alt_text;
	this.subItem	= sub_item_id;					//@ fill null to indicate the menu item havent sub menu
	this.nextItem	= next_item_id;					//@ fill null to indicate it is the end of menu item either in parent menu or sub menu
	this.top		= top_position;
	this.left		= left_position;

	return (this);
}


//** @ it is used to generate a text mode menu bar
function generate_text_menu(){
	var menuCode =	"";

	if (menu.length > 0){
		menuCode +=	"<table cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"" + MENU_BGCOLOR + "\" width=\"" + MENU_WIDTH + "\">";
		menuCode += "<tr height=\"25\" valign=\"middle\">";
		menuCode +=	"<td background=\"img\\menu_bg.gif\" align=\"left\">&nbsp;";
		menuCode += get_menu_item_by_text(0);
		menuCode +=	"</td>";
		menuCode += "</tr>";
		menuCode += "</table>";

		document.write (menuCode);
	}
}


//** this function will create a dynamice layer of sub menu in text mode
function generate_sub_text_menu(requested_layer){
	var subMenuCode = "";

	if (requested_layer != -1 && requested_layer != null){
		clearTimeout(timer);
		subMenuCode +=	"<table cellpadding=\"1\" cellspacing=\"0\" border=\"" + CHILD_MENU_BORDER + "\" width=\"" + CHILD_MENU_WIDTH + "\" bordercolor=\"" + MENU_BORDER_COLOR + "\" bgcolor=\"#3BA526\" bordercolordark=\"#f0f0e0\">";
		subMenuCode +=	"<tr><td>";
		subMenuCode +=	"<table cellpadding=\"1\" cellspacing=\"0\" width=\"100%\">";
		subMenuCode +=	get_sub_menu_item_by_text(requested_layer);
		subMenuCode +=	"</table>";
		subMenuCode +=	"</td></tr>";
		subMenuCode +=	"</table>";

		//-- create a layer dynamically
		if (isIE && (document.all["menu" + requested_layer] == null)){
			//-- ie compatible layer
			document.body.insertAdjacentHTML("BeforeEnd", "<div name=\"menu" + requested_layer + "\" id=\"menu" + requested_layer + "\" style=\"position:absolute; z-index:5; top:0; left:0; visibility:inherit; filter: alpha(opacity=85)\">" + subMenuCode + "</div>");

		} else if (isNS && (document.layers["menu" + requested_layer] == null)){
			//-- netscape 4 compatible layer
			var lyrRef = new Layer(0);
			lyrRef.name = "menu" + requested_layer;
			lyrRef.document.write (subMenuCode);
			lyrRef.document.close();

		} else if (isDOM && (document.getElementById("menu" + requested_layer) == null)){
			//-- netscape 6+ or other compatible layer
			var domLayer = document.createElement("div");
			domLayer.setAttribute ("id", "menu" + requested_layer);
			domLayer.setAttribute ("style", "position:absolute; top: 0; left: 0; visibility: hidden; filter: alpha(opacity=85)");
			document.getElementsByTagName("body").item(0).appendChild(domLayer);
			domLayer.innerHTML = subMenuCode;
		}

		if (isIE){
			ref = document.all["menu" + requested_layer].style;
		} else if (isNS){
			ref = document.layers["menu" + requested_layer];
		} else if (isDOM){
			ref = document.getElementById("menu" + requested_layer).style;
		}

		set_layer_position(ref, requested_layer);
		show_layer(ref);
		layer = requested_layer
	}
}


//** this function will get all menu item in text mode of the top level menu
function get_menu_item_by_text(requested_layer){
	var htmlCode = "";							// @ used to store the return html
	var next_item_name = "";					// @ the name of next item 

	if (requested_layer != -1 && requested_layer != null){
		//-- insert menu item into the html code [Horizontal]
		htmlCode +=	"<a href=\"javascript:redirect('" + menu[requested_layer].link + "');\" target=\"" + menu[requested_layer].target + "\" onMouseOver=\"hide_all_layer(); generate_sub_text_menu(" + menu[requested_layer].subItem + ");\"><font class=\"" + FONT_CLASS + "\">" + menu[requested_layer].name + "</font></a>";

		//-- recurise function call
		next_item_name = get_menu_item_by_text(menu[requested_layer].nextItem);

		if (next_item_name != -1)
				htmlCode += "<img src=\"..\\images\\spacer.gif\" width=\"9\" height=\"15\" align=\"middle\"/> <font size=\"1\"><b>|</b></font> <img src=\"img\\space.gif\" width=\"9\" height=\"15\" align=\"middle\"/>";
		else
				htmlCode += "&nbsp;";
	
		//-- determine have next menu item or not
		(next_item_name != -1) ? htmlCode += next_item_name : false;

		return (htmlCode);
	} else{
		return (-1);
	}
}


//** this function will get all sub menu item of the menu in text mode
function get_sub_menu_item_by_text(requested_layer){
	var htmlCode = "";
	var next_item_name = "";

	if (requested_layer != -1 && requested_layer != null){
		//-- insert menu item into the html code [Vertical]
		htmlCode +=	"<tr height=\"20\" onMouseOver=\"change_BgColor('enter', this);\" onMouseOut=\"change_BgColor('leave', this);\">";
		htmlCode += "<td onMouseOut=\"auto_hide_layer();\" onMouseOver=\"clearTimeout(timer); hide_sub_layer(" + menu[requested_layer].pid + "); generate_sub_text_menu(" + menu[requested_layer].subItem + ");\">";
		htmlCode += "<a href=\"" + menu[requested_layer].link + "\" target=\"" + menu[requested_layer].target + "\"><font class=\"" + FONT_CLASS + "\"><font color=\"white\">" + menu[requested_layer].name + "</font></font></a>";
		htmlCode +=	"</td>";
		htmlCode += "<td width=\"10\"><font class=\"menu\">&nbsp;</font></td>";
		htmlCode +=	"</tr>";

		//-- recurise function call
		next_item_name = get_sub_menu_item_by_text(menu[requested_layer].nextItem);

		//-- determine have next menu item or not
		(next_item_name != -1) ? htmlCode += next_item_name : false;

		return (htmlCode);
	} else{
		return (-1);
	}
}


//** this function will set the position of the sub menu item layer
function set_layer_position(obj, first_sub_item){
	obj.top			= menu[first_sub_item].top;
	obj.left		= menu[first_sub_item].left;
}


//** this function will show the sub menu
function show_layer(obj){
	obj.visibility = "visible";
}


//** this function will hide the sub menu
function hide_layer(obj){
	obj.visibility = "hidden";
}


//** this function will hide the sub menu in every 0.5 second if user's mouse outside the menu
function auto_hide_layer(){
	timer = setTimeout("hide_all_layer()", 500);		
}


//** this will hide all sub layer, specific by the parent id
function hide_sub_layer(parent_id){
	var layer = new Array();

	for (var i = 0; i < menu.length; i++){
		if (typeof menu[i] == "object"){
			if (menu[i].pid == parent_id){
				hide_sub_layer (menu[i].subItem);
				layer[layer.length] = i;
			}
		} else{
			return;
		}
	}

	if (layer.length == 0){
		return;
	} else{
		for (var i =0; i < layer.length; i++){
			if (isIE){
				if (document.all["menu" + menu[layer[i]].subItem]){
					ref = document.all["menu" + menu[layer[i]].subItem].style;
					hide_layer (ref);
				}
			} else if (isNS){
				if (document.layers["menu" + menu[layer[i]].subItem]){
					ref = document.layers["menu" + menu[layer[i]].subItem];
					hide_layer (ref);
				}
			} else if (isDOM){
				if (document.getElementById("menu" + menu[layer[i]].subItem)){
					ref = document.getElementById("menu" + menu[layer[i]].subItem).style;
					hide_layer (ref);
				}
			}
		}
	}
}


//** this function will hide all sub menu layer
function hide_all_layer(){
	if (isIE){
		for (var i = 0; i < menu.length; i++){
			if (document.all["menu" + i] != null){
				ref = document.all["menu" + i].style;
				hide_layer(ref);
			}
		}
	} else if (isNS){
		for (var i = 0; i < menu.length; i++){
			if (document.layers["menu" + i]){
				ref = document.layers["menu" + i];
				hide_layer(ref);
			}
		}
	} else if (isDOM){
		for (var i = 0; i < menu.length; i++){
			if (document.getElementById("menu" + i)){
				ref = document.getElementById("menu" + i).style;
				hide_layer(ref);
			}
		}
	}
}


//** a function uses to redirect current page to specified url
function redirect(url){
	if (url == "#"){
		return;
	} else{
		window.location = url;
	}
}


//** a function uses to change the sub menu items' background color
function change_BgColor(mode, obj){
	var oRef = (isIE ? obj.style : obj);

	//-- "enter" indicate mouse over
	if (mode == "enter"){
		oRef.backgroundColor = MOUSE_OVER_COLOR;
	} else{
		oRef.backgroundColor = "#3BA526";
	}
}

generate_text_menu();
//-->
