/******************************************************

* HS_Menu

* DHTML Drop Down Menu

* Author: Jiwon Han

* Email: iamjiwon@hotmail.com

* virsion : v0.94

* Copyright (C) 2004-2005 Jiwon Han

*******************************************************/



/*****************************************************

on v0.91 (1/21/2005)

-added show arrow Icon when menu has child menu 



on v0.92 (1/24/2005)

-added change font color when mouse over menu



on v0.93 (11/3/2005)

- added all menu is allowed to click even menu has sub menu



on v0.94 (11/8/2005)

- added sub menu popup level control

******************************************************/



//Global Variables

var userAgents = navigator.userAgent.toLowerCase();

var browser = new Object();



//detect OS

if (checkIt("mac"))

	browser.os="mac";

else if (checkIt("windows"))

	browser.os="windows";

else if (checkIt("linux"))

	browser.os="linux";

else

	browser.os="unknown";



//detect browser

if(checkIt("konqueror"))

	browser.name="Konqueror";

else if(checkIt("safari"))

	browser.name="safari";

else if(checkIt("opera"))

	browser.name="opera";

else if(checkIt("msie"))

	browser.name="IE";

else if(checkIt("firefox"))

	browser.name="firefox";

else if(checkIt("netscape")){

	browser.name="netscape";

	browser.version=userAgents.charAt(8);

}

else

	browser.name="unknown";



function checkIt(str)

{

	return userAgents.indexOf(str)+1;

}





//Set up show hide string. it will different defend by browser

if (browser.name == "netscape" && browser.virsion == "4"){

	STR_SHOW = "show";

	STR_HIDE = "hide";

}

else{

	STR_SHOW = "visible";

	STR_HIDE = "hidden";

}





//==============================

//Debug Object

//==============================

function Debug(active)

{

	this.active = (active) ? active : false;

	if (this.active)

		this.activate();

}



Debug.prototype.activate = function()

{

	if (document.getElementById('debug')){

		this.msgBox.style.visibility = STR_SHOW;

		this.msgBox.style.position = "relative";

	}

	else{

		document.write ("<div id=debug style=visibility:"+STR_SHOW+";position:relative;width:500px;height:50px;background-color:eeeeee;>DEBUG MODE ON</div><br>");

		this.msgBox = document.getElementById('debug');

	}

	this.active = true;

}

Debug.prototype.deactivate = function()

{

	if (this.active){

		this.msgBox.style.visibility = STR_HIDE;

		this.msgBox.style.position = "absolute";

		this.active = false;

	}

	

}

Debug.prototype.write = function(str,opt)

{

	if (this.active){

		if (opt) 

			this.msgBox.innerHTML += str;

		else

			this.msgBox.innerHTML = str;

	}

}



//create debug and activate it

var myDebug = new Debug();

//myDebug.activate();

//===========================



function HS_Menu()

{

	//Set container menu properties(main menu)

	this.direction = "horizontal" ;

	this.enableParentClick = false;

	this.maxPopupLevel = 100;

	this.width = "" ;

	this.height = "" 

	this.align = "center" ;

	this.cellpadding = 2 ;

	this.cellspacing = 0 ;

	this.borderSize = 1;

	this.borderColor = "000000" ;

	this.mouseOutColor = "eeeeee" ;

	this.mouseOverColor = "cccccc" ;

	this.backgroundImage = "";

	this.styleName = "";

	this.hideDelay = 1;

	this.fontFamily = "arial";

	this.fontColor = "000000";

	this.fontSize = "12";

	this.fontWeight = "normal";

	this.changeBackgroundColor = true;

	this.maxMenu = 0;

	this.showArrowIcon = false;

	this.h_arrowIcon = "";

	this.v_arrowIcon = "v_arrowIcon.gif";

	this.fontColorOver = "";

	this.leftIcon = "";

	this.borderStyle = "";



	//Set sub menu properties

	this.child_width = "160";

	this.child_height = "";

	this.child_align = "left";

	this.child_cellpadding = 2;

	this.child_cellspacing = 0;

	this.child_borderSize = 1;

	this.child_borderColor = "000000";

	this.child_mouseOutColor = "eeeeee";

	this.child_mouseOverColor = "cccccc";

	this.child_styleName = "";

	this.child_backgroundImage = "";

	this.child_fontFamily = "arial";

	this.child_fontColor = "000000";

	this.child_fontSize = "12";

	this.child_fontWeight = "normal";

	this.child_borderStyle = "";

	this.child_fontColorOver = "";

	

	//Crray of store main menu objects

	this.arr_menu = new Array();

	//This array will store sub menu popup level value of individually by main menu item number

	this.countPopupLevel = new Array();



	//constants

	STR_IMAGENAME = "btn_img_";



	//Set Global Variables

	arr_menuNames = new Array();

	arr_menuTimers = new Array();

	topPosCorrection = 0;

	leftPosCorrection = 0;

	arr_containerMenu = new Array();

	arr_childMenu = new Array();

}



HS_Menu.prototype.addMenu = function(objMenu)

{

	this.menuSize = this.arr_menu.length;

	this.arr_menu[this.menuSize] = objMenu;

}



HS_Menu.prototype.build = function()

{

	str = "<table";

	str += " cellpadding="+this.cellpadding;

	str += " cellspacing="+this.cellspacing;

	if (this.width) str += " width="+this.width;

	if (this.height) str += " height="+this.height;



	//Make Thin Border Line

	str += " style='border:"+this.borderSize+"px solid #"+this.borderColor+";'";

	if (this.backgroundImage) str += " background='"+this.backgroundImage+"'";

	str += ">";

	str += "<tr>";

	imgSrcIndex = 0;

	this.menuCount = this.arr_menu.length-1;

	for (i=0; i<=this.menuCount; i++){

		var menuItem = this.arr_menu[i].arr_menu;

		str += "<td";

		//Make Thin Border Line

		if (i<this.menuCount && this.borderStyle == ""){

			if (this.direction == "horizontal")

				str += " style='border-right:"+this.borderSize+"px solid #"+this.borderColor+";'";

			else

				str += " style='border-bottom:"+this.borderSize+"px solid #"+this.borderColor+";'";

		}

		str += " style='cursor:pointer;'";

		currMenu = this.arr_menu[i];

		if (currMenu.arr_menu.length > 0){

			str_nameTag = "menuItem_"+i;

			str += " onMouseOver=";

			if (this.changeBackgroundColor)

				str += "changeBG(this,'"+this.mouseOverColor+"');";

			str += "showMenu('"+str_nameTag+"',this);setStatus('"+escape(currMenu.title)+"');";

			if (currMenu.imageOn != "")

				str += "changeImgOver("+imgSrcIndex+");";

			if (this.fontColorOver != "")

				str += "changeFontStyle('containerMenu"+i+"','"+this.fontColorOver+"');";

			str += " onMouseOut=";

			if (this.changeBackgroundColor)

				str += "changeBG(this,'"+this.mouseOutColor+"');";

			str += "hideMenu('"+str_nameTag+"');setStatus();";

			if (currMenu.imageOn != "")

				str += "changeImgOut("+imgSrcIndex+");";

			if (this.fontColorOver != "")

				str += "changeFontStyle('containerMenu"+i+"','"+this.fontColor+"');";

			if (this.enableParentClick)

				str += " onClick=doLink('"+currMenu.url+"',"+currMenu.popup+");";				

		}

		else{

			str += " onMouseOver=";

			if (this.changeBackgroundColor)

				str += "changeBG(this,'"+this.mouseOverColor+"');";

			str += "hideMenuAll();setStatus('"+escape(currMenu.title)+"');";

			if (currMenu.imageOn != "")

				str += "changeImgOver("+imgSrcIndex+");";

			if (this.fontColorOver != "")

				str += "changeFontStyle('containerMenu"+i+"','"+this.fontColorOver+"');";

			str += " onMouseOut=";

			if (this.changeBackgroundColor)

				str += "changeBG(this,'"+this.mouseOutColor+"');";

			str += "setStatus();";

			if (currMenu.imageOn != "")

				str += "changeImgOut("+imgSrcIndex+");";

			if (this.fontColorOver != "")

				str += "changeFontStyle('containerMenu"+i+"','"+this.fontColor+"');";

			//str += " onClick=doLink('"+encodeURI(currMenu.url)+"',"+currMenu.popup+");";

			str += " onClick=doLink('"+currMenu.url+"',"+currMenu.popup+");";

		}		

		str += " bgColor='"+this.mouseOutColor+"'";

		str += ">";

		arr_containerMenu[arr_containerMenu.length] = "containerMenu"+i;

		str += "<table cellpadding=0 cellspacing=0 width=100%><tr>";

		if (this.leftIcon) 

			str += "<td><img src=" + this.leftIcon + "></td>";

		str += "<td";

		str += " align='"+this.align+"'";

		if (this.styleName) str += " class='"+this.styleName+"'";

		str += " id=containerMenu"+i;

		str += ">";

		if (currMenu.type == "text"){

			str += currMenu.title;

		}

		else{

			str += "<img src='"+currMenu.image+"' border=0";

			if (currMenu.imageOn != "")

				str +=" name='"+STR_IMAGENAME+imgSrcIndex+"'";

			str += ">";

		}

		str += "</td>"

		if (currMenu.arr_menu.length > 0 && this.showArrowIcon && this.h_arrowIcon != ""){

				str += "<td width=10 align=center><img src="

				if (this.direction == "horizontal")

					str += this.h_arrowIcon;

				else

					str += this.v_arrowIcon;

				str += "></td>";

		}

		else if(this.showArrowIcon && this.direction == "vertical")

			str += "<td width=10></td>";

		str += "</tr></table>";

		str += "</td>";

		if (this.direction == "horizontal"){

			if (this.maxMenu && ((i+1)%this.maxMenu) == 0 && i != (this.arr_menu.length-1))

				str += "</tr><tr>";

		}

		else{

			if (this.maxMenu){

				if ((i+1)%this.maxMenu == 0 && i != (this.arr_menu.length-1))

					str += "</tr><tr>";

			}

			else

				if (i != (this.arr_menu.length-1))

					str += "</tr><tr>";

		}

		if (currMenu.imageOn != "")

				imgSrcIndex++;

	}

	str += "</tr>";

	str += "</table>";

	

	//Draw main menu

	document.write (str);



	//call create child menus

	x = 0;

	for (i=0; i<=this.menuCount; i++){

		if (this.arr_menu[i].arr_menu.length > 0){

			this.countPopupLevel[i] = 1;

			this.createChildMenu(this.arr_menu[i],"menuItem_"+i);

		}

	}



	//Call init

	this.init();	



}



HS_Menu.prototype.createChildMenu = function(objMenu,str_nameTag)

{	

	style = "style=visibility:"+STR_HIDE+";position:absolute;z-index:101;";

	str = "<div id='"+str_nameTag+"' "+style+">";

	str += "<table";

	str += " style='border:"+this.child_borderSize+"px solid #"+this.child_borderColor+";'";

	str += " cellpadding="+this.child_cellpadding;

	str += " cellspacing="+this.child_cellspacing;

	if (this.child_width) str += " width="+this.child_width;

	if (this.child_height) str += " height="+this.child_height;

	if (this.backgroundImage) str += " background='"+this.child_backgroundImage+"'";

	str += ">";

	objMenu.menuCount = objMenu.arr_menu.length-1;		

	for (objMenu.x=0; objMenu.x<=objMenu.menuCount; objMenu.x++){

		str += "<tr>";

		str += "<td";

		//Make Thin Border line

		if (objMenu.x<objMenu.menuCount && this.child_borderStyle == "")

			str += " style='border-bottom:"+this.child_borderSize+"px solid #"+this.child_borderColor+"'";

		str += " style='cursor:pointer;'";

		currMenu = objMenu.arr_menu[objMenu.x];

		if ((this.maxPopupLevel > this.countPopupLevel[i]) && (currMenu.arr_menu.length > 0)){

			str += " onMouseOver=changeBG(this,'"+this.child_mouseOverColor+"');showMenu('"+str_nameTag+"_"+objMenu.x+"',this);setStatus('"+escape(currMenu.title)+"');";

			if (this.child_fontColorOver != "")

				str += "changeFontStyle('childMenu"+x+"','"+this.child_fontColorOver+"');";

			str += " onMouseOut=changeBG(this,'"+this.child_mouseOutColor+"');hideMenu('"+str_nameTag+"_"+objMenu.x+"');setStatus();";

			if (this.child_fontColorOver != "")

				str += "changeFontStyle('childMenu"+x+"','"+this.child_fontColor+"');";	

			if (this.enableParentClick)

				str += " onClick=doLink('"+currMenu.url+"',"+currMenu.popup+");";

		}

		else{

			str += "onMouseOver=changeBG(this,'"+this.child_mouseOverColor+"');hideChildMenu('"+str_nameTag+"');setStatus('"+escape(currMenu.title)+"');";

			if (this.child_fontColorOver != "")

				str += "changeFontStyle('childMenu"+x+"','"+this.child_fontColorOver+"');";



			str += " onMouseOut=changeBG(this,'"+this.child_mouseOutColor+"');hideMenu('"+str_nameTag+"');setStatus();";

			if (this.child_fontColorOver != "")

				str += "changeFontStyle('childMenu"+x+"','"+this.child_fontColor+"');";	

			str += " onClick=doLink('"+currMenu.url+"',"+currMenu.popup+");";	

		}

		str += " bgColor='"+this.child_mouseOutColor+"'";

		str += ">";

		str += "<table cellpadding=0 cellspacing=0 width=100%><tr><td";

		str += " align='"+this.child_align+"'";

		if (this.child_styleName) str += " class='"+this.child_styleName+"'";

		str += " id=childMenu"+x;

		str += ">";

		str += currMenu.title;

		if (currMenu.arr_menu.length > 0 && this.showArrowIcon)

			str += "<td width=10 align=center><img src=" + this.v_arrowIcon + "></td>";

		str += "</td></tr></table>";

		str += "</td>";

		str += "</tr>";

		arr_childMenu[arr_childMenu.length] = "childMenu"+x;

		x++;

	}

	str += "</table>";

	str += "</div>";



	//draw sub menu

	document.write (str);



	//store nameTags to array

	arr_menuNames[arr_menuNames.length] = str_nameTag;



	//Call recursive function until last child menu

	if (this.maxPopupLevel > this.countPopupLevel[i]){

		for (objMenu.x=0; objMenu.x<=objMenu.menuCount; objMenu.x++){	

			if (objMenu.arr_menu[objMenu.x].arr_menu.length > 0)

				this.createChildMenu(objMenu.arr_menu[objMenu.x],str_nameTag+"_"+objMenu.x);

		}

		//count current popup menu level position

		if (findMenuLevel(str_nameTag) > this.countPopupLevel[i])

			 this.countPopupLevel[i]++;

	}

}



HS_Menu.prototype.init = function()

{

	hideDelay = this.hideDelay * 1000;

	this.setCorrection();

	this.setFontStyle();

	this.createImageVariables();

	menuDirection = this.direction;

}



HS_Menu.prototype.setCorrection = function()

{

	//subtract border size for child menu popup position

	leftPosCorrection += this.borderSize;

	topPosCorrection += this.borderSize;

}



HS_Menu.prototype.setFontStyle = function()

{

	//Set container menu style

	if (this.styleName == ""){

		for(i=0; i < arr_containerMenu.length; i++){

			currMenu = document.getElementById(arr_containerMenu[i]);

			currMenu.style.fontFamily = this.fontFamily;

			currMenu.style.fontSize = this.fontSize;

			currMenu.style.color = this.fontColor;

			currMenu.style.fontWeight = this.fontWeight;

		}

	}



	//Set child menu style

	if (this.child_styleName == ""){

		for(i=0; i < arr_childMenu.length; i++){

			currMenu = document.getElementById(arr_childMenu[i]);

			currMenu.style.fontFamily = this.child_fontFamily;

			currMenu.style.fontSize = this.child_fontSize;

			currMenu.style.color = this.child_fontColor;

			currMenu.style.fontWeight = this.child_fontWeight;

		}

	}

}



HS_Menu.prototype.createImageVariables = function()

{

	arr_imgSrcOut = new Array();

	arr_imgSrcOver = new Array();



	var x = 0;

	for (i=0; i<this.arr_menu.length; i++){

		currMenu = this.arr_menu[i];

		if (currMenu.imageOn != ""){

			arr_imgSrcOut[x] = currMenu.image;

			arr_imgSrcOver[x] = currMenu.imageOn;

			x++;

		}	

	}

}



function Menu(title,url,type,popup,image,imageOn)

{

	this.title = title ? title : "Menu Item" ;

	this.url = url ? url : "#" ;

	this.type = type ? type : "text" ;

	this.popup = popup ? popup : false;

	this.image = image ? image : "";

	this.imageOn = imageOn ? imageOn : "";

	this.arr_menu = new Array();

}



Menu.prototype.addMenu = function(objMenu)

{

	this.menuSize = this.arr_menu.length;

	this.arr_menu[this.menuSize] = objMenu;

}



function doLink(url,popup)

{

	if (!popup)

		location.href = url;

	else

		window.open(url,'newWin','toolbar=yes,location=yes,directiries=yes,location=yes,menubar=yes,scrollbars=yes,resizable=yes,status=yes');

}



function setStatus(str)

{

	if (str)

		status = unescape(str);

	else

		status = "";

}



function changeImgOver(x){

	document[STR_IMAGENAME+x].src = arr_imgSrcOver[x];

}



function changeImgOut(x){

	document[STR_IMAGENAME+x].src = arr_imgSrcOut[x];

}



function changeBG(obj,color)

{

	if (browser.name == "IE")

		obj.style.backgroundColor = color;

	else

		obj.bgColor = color;

}





function changeFontStyle(objMenu,color)

{

	currMenu = document.getElementById(objMenu);

	currMenu.style.color = color;

}



function calcPosX(str_nameTag,objMenu)

{

	currPosX = 0;

	menuLeft = objMenu.offsetWidth;



	while (objMenu.offsetParent){

		currPosX += objMenu.offsetLeft;

		objMenu=objMenu.offsetParent;

	}



	menuLevel = findMenuLevel(str_nameTag);

	if (menuLevel == 1){

		if (menuDirection == "horizontal")

			currPosX -= leftPosCorrection;

		else

			currPosX += menuLeft-10;			

	}

	else if (menuLevel > 1)

		currPosX += menuLeft-10;



	if (browser.os == "mac" && browser.name != "safari")

		browserWidth = document.body.offsetWidth;



	return currPosX;

}



function calcPosY(str_nameTag,objMenu)

{

	currPosY = 0;

	menuTop = objMenu.offsetHeight;



	if(objMenu.offsetParent){

		while (objMenu.offsetParent){

			currPosY += objMenu.offsetTop;

			objMenu = objMenu.offsetParent;

		}

	}



	menuLevel = findMenuLevel(str_nameTag);

	if (menuLevel == 1){

		if  (menuDirection == "horizontal"){

			currPosY += menuTop;

			currPosY -= topPosCorrection;

		}

		else

			currPosY += 8;

	}

	else if (menuLevel > 1)

		currPosY += 8;



	return currPosY;

}



function findMenuLevel(str_nameTag)

{

	count = 0;

	pos = 0;

	while (pos >= 0){

		pos = str_nameTag.lastIndexOf("_");

		if (pos >= 0){

			str_nameTag = str_nameTag.substring(0,pos);

			count++;

		}

	}

	return count;

}



function setPosition(menuItem,x,y)

{

	menuItem.style.left = x;

	menuItem.style.top = y;

}



function showMenu(str_nameTag,objMenu)

{

	hideChildMenu(str_nameTag);

	posLeft = calcPosX(str_nameTag,objMenu);

	posTop = calcPosY(str_nameTag,objMenu);

	menuItem = document.getElementById(str_nameTag);

	setPosition(menuItem,posLeft,posTop);

	menuItem.style.visibility = STR_SHOW;

}



function hideChildMenu(str_nameTag)

{

	clearTimer(str_nameTag);

	

	//find all parents menu and self menu name

	var arr_appearMenus = new Array();

	pos = 0;

	while (pos >= 0){

		pos = str_nameTag.lastIndexOf("_");

		if (pos >= 0){

			arr_appearMenus[arr_appearMenus.length] = str_nameTag;

			str_nameTag = str_nameTag.substring(0,pos);

		}

	}



	//hide all menus except menu in arr_appearMenus

	for (i=0; i<=arr_menuNames.length-1; i++){

		this.keepIt = false;

		for (j=0; j<=arr_appearMenus.length-1; j++){

			if (arr_menuNames[i] == arr_appearMenus[j])

				this.keepIt = true;

		}

		if (!this.keepIt)

			hideMenuNow(arr_menuNames[i]);

	}

}



function clearTimer(str_nameTag)

{

	pos = 0;

	while (pos >= 0){

		pos = str_nameTag.lastIndexOf("_");

		if (pos >= 0){

			timerIndex = findMenuIndex(str_nameTag);

			timer = arr_menuTimers[timerIndex];



			if (timer)

				window.clearTimeout(timer);



			str_nameTag = str_nameTag.substring(0,pos);

		}

	}

}



function findMenuIndex(str_nameTag)

{

	for (i=0; i<=arr_menuNames.length; i++){

		if (arr_menuNames[i] == str_nameTag)

			return i;

	}

}



function hideMenu(str_nameTag)

{	

	pos = 0;

	while (pos >= 0){

		pos = str_nameTag.lastIndexOf("_");

		if (pos >= 0){

			timerIndex = findMenuIndex(str_nameTag);

			arr_menuTimers[timerIndex] = setTimeout("hideMenuNow('"+str_nameTag+"')",hideDelay);

			str_nameTag = str_nameTag.substring(0,pos);

		}

	}

}



function hideMenuNow(str_nameTag)

{

	menuItem = document.getElementById(str_nameTag);

	menuItem.style.visibility = STR_HIDE;

}



function hideMenuAll()

{

	for (i=0; i<=arr_menuNames.length-1; i++){

		var menuItem = document.getElementById(arr_menuNames[i]);

		menuItem.style.visibility = STR_HIDE;

	}

}


