/**
	#################################################################################################################################
	Javascript Cascading Menu

	Author : Hakan Albag (hakan@albag.net)	
	
	24.July.2005 		ver 1.0		initial version

	25.July.2005		ver 1.1 	multiple menus made available, vertical menu support added (Warning: menuItemSpecification changed!)
									Parameters for InitMenu changed!
									
	31.July.2005 		ver 1.2		boolean field (hasSub) removed from menuStructure (Warning: menuItemSpecification changed!)
									vertical & horizontal menu have their own css classes
									
	14.Aug. 2006		ver 1.3		fading effect
									
	
	ToDo in later revisions	
	!! remove dis-highlight color codes from code, refer to CSS someway			
	#################################################################################################################################
	Usage
	------------------------------
	1.	Link to [menu.css] in your .htm file	
	2.	Define menuItems arrays for every menu in your .htm file 
		A Menuitemis an array with 4 elements
			0 => parentId 		(for topLevel menus, it must be -1. For submenus ,array index of parent)
			1 => title
			2 => url 			(may be empty "")
			3 => hasSubMenu 	(true|false)
			
			Example:
			<script language="JavaScript"><!--//
			var menuItems1 = new Array()
			//menuItem = parent, title,url,hasChildren
			menuItems1[0]=new Array(-1,"Menu1","index.htm");
			menuItems1[1]=new Array(-1,"Menu2","");
			menuItems1[2]=new Array(-1,"Google","http://www.google.com");
			menuItems1[3]=new Array(0,"Menu1_1","");
			menuItems1[4]=new Array(0,"Albag.net","http://www.albag.net");
			menuItems1[5]=new Array(0,"Menu1_3","");
			menuItems1[6]=new Array(5,"Menu1_3_1","");
			menuItems1[7]=new Array(5,"Menu1_3_2","");
			menuItems1[8]=new Array(7,"Menu1_3_2_1","");
			menuItems1[9]=new Array(1,"Menu2_1","");
			menuItems1[10]=new Array(1,"Menu2_2","");
			menuItems1[11]=new Array(10,"Menu2_2_1","");
			//-->
			</script>
	3. add onClick="hideMenuAll()" into your BODY tag
	4. call InitMenu(menuItemArr,direction,fade) where you want to place menu  
			param1 menuItemArr  	: array of menuItems for this menu (for above example InitMenu(menuItems1,0) or (menuItems1,1)
			param2 direction0 		: horizontal , 1: vertical menu
			param3 fade				: use fading effect (true|false)
	
**/
var itemArrays   = new Array(); //2 dimensional array containint various itemArrays (vertical,horizontal,etc.)
var verDirection = new Array(); // vertical directions of the menus true: vertical , false: horizontal
var fade 		= false;	// use fading effect when opeinig sub menus
function highlightStyle(style) {
//	style.border = "1px solid #FFFFFF";
style.color = "#FF6600"
}

function unHighlightStyle(style) {
//	style.border = "0px";//1px solid #FFFFFF";
style.color = "#999999"
}

/**
	Menu constructor
	menuItems		array of menuItems of this menu
	direction 		0: horizontal, 1:vertical
		
**/
function InitMenu(menuItems,direction,_fade){
	if(typeof(_fade)!="undefined")
		fade = _fade;
	
	index = itemArrays.length;
	itemArrays[index]   = menuItems;
	verDirection[index] = (direction==1);
	for(var i=0;i<menuItems.length;i++){
		switch(menuItems[i][0]){
			case -1 :	//for top Menu items
					if(!verDirection[index]) //if horizontal Menu
						document.write("<DIV id=\"menu"+index+"_"+i+"\" class=\""+menuItems[i][3]+"\" onMouseOver=\"showSubMenu("+index+","+i+")\" onClick=\"menuGoTo('"+menuItems[i][2]+"')\">"+menuItems[i][1]+"</DIV>\n");
					else{
						if(hasSubMenu(index,i)) { //hasSubmenu show an arrow //if(menuItems[i][3]) //hasSubmenu show an arrow						
							document.write("<DIV id=\"menu"+index+"_"+i+"\" class=\"topMenuVertical\" onMouseOver=\"highlight("+index+","+i+",true); showSubMenu("+index+","+i+")\" onMouseOut=\"highlight("+index+","+i+",false)\" onClick=\"menuGoTo('"+menuItems[i][2]+"')\">"+menuItems[i][1]+" »</DIV>\n");						
						}
						else {
							document.write("<DIV id=\"menu"+index+"_"+i+"\" class=\"topMenuVertical\" onMouseOver=\"highlight("+index+","+i+",true); showSubMenu("+index+","+i+")\" onMouseOut=\"highlight("+index+","+i+",false)\" onClick=\"menuGoTo('"+menuItems[i][2]+"')\">"+menuItems[i][1]+"</DIV>\n");
						}
					}
					break;
			default: // for submenu 
					var className = (verDirection[index])?"subMenu subMenuVertical":"subMenu";
					if(hasSubMenu(index,i)){ //hasSubmenu show an arrow //if(menuItems[i][3]) //hasSubmenu show an arrow
						document.write("<DIV id=\"menu"+index+"_"+i+"\" class=\""+className+"\" onMouseOver=\"highlight("+index+","+i+",true); showSubMenu("+index+","+i+")\" onMouseOut=\"highlight("+index+","+i+",false)\" onClick=\"menuGoTo('"+menuItems[i][2]+"')\">"+menuItems[i][1]+" »</DIV>\n");
					}
					else{
					 	document.write("<DIV id=\"menu"+index+"_"+i+"\" class=\""+className+"\" onMouseOver=\"highlight("+index+","+i+",true); showSubMenu("+index+","+i+")\" onMouseOut=\"highlight("+index+","+i+",false)\" onClick=\"menuGoTo('"+menuItems[i][2]+"')\">"+menuItems[i][1]+"</DIV>\n");				
					}
		}	
	}
}

var fading_elements  = new Array();
var fading_opacity;

function showSubMenu(n,parentMenuID){
	var menuItems = itemArrays[n];
	var currentLevel = findLevel(n,parentMenuID)+1;
	var parentEl	 = document.getElementById("menu"+n+"_"+parentMenuID);
	if(fade){
		fading_elements.length = 0;
		fading_opacity = 1;
	}
	hideAllSubMenu(n,currentLevel);	
	if(hasSubMenu(n,parentMenuID)){ //if(menuItems[parentMenuID][3]){ //hasSubMenu
			var parentCoords = getCoords(parentEl);			
			var childNumber = 0;		
			var topOffset = 0;
			for(i=0;i<menuItems.length;i++){
				if(menuItems[i][0]==parentMenuID){
					var el = document.getElementById("menu"+n+"_"+i);
					if(currentLevel==1){//1st Level Menu
						if(!verDirection[n]){
							// top
							el.style.top  = parentCoords.y + parentCoords.height + topOffset;
							el.style.left = parentCoords.x;
						}else{
							// left
							el.style.top  = parentCoords.y + topOffset;
							el.style.left = parentCoords.x + parentCoords.width;						
						}
					}else{
						el.style.top  = parentCoords.y + topOffset;
						el.style.left = parentCoords.x + parentCoords.width;					
					}
					el.style.visibility = "visible";
					if(fade)
						fading_elements.push(el);
					unHighlightStyle(el.style);
					childNumber ++;
					topOffset += getCoords(el).height;					
				}
				
			}
			
		if(fade){
			fading_opacity=0;
			fadeIn();
		}


	}

}


function fadeIn(){
	if(fading_opacity >=1)
		return;
	for(var i=0;i<fading_elements.length;i++){
		fading_elements[i].style.opacity=fading_opacity;
		fading_elements[i].style.filter="alpha(opacity="+fading_opacity*100+")"; 
	}
	fading_opacity += 0.1;
	setTimeout("fadeIn()",50);	
}

function highlight(n,menuId,status){	
	var obj = document.getElementById("menu"+n+"_"+menuId);
	var menuItems = itemArrays[n];
	if(status){ 
		var level = findLevel(n,menuId);
		highlightStyle(obj.style);
		for(i=0;i<menuItems.length;i++){ // there should be only 1 highlighted in a level
			if(findLevel(n,i)==level && i!=menuId){
				obj = document.getElementById("menu"+n+"_"+i);
				unHighlightStyle(obj.style);
			}
		}
				
	}else{
		if(hasSubMenu(n,menuId)){ 	//if(menuItems[menuId][3]){	//if has subMenu and subMenu is visible
			for(i=0;i<menuItems.length;i++){
				if(menuItems[i][0]==menuId){	// find any child of menuId
					if(document.getElementById("menu"+n+"_"+i).style.visibility.indexOf("visible")>=0)
						return;
					else
						break;
				}
			}
		}
		unHighlightStyle(obj.style);
	}
}

function hideAllSubMenu(n,level){
	var menuItems = itemArrays[n];
	if(level==0)
		return;
	var el;
	for(i=0;i<menuItems.length;i++){
		if(findLevel(n,i) >= level){						
			el = document.getElementById("menu"+n+"_"+i);
			el.style.visibility = "hidden";
		}	
	}
				

}

function hideMenuAll(){
	var m=0;	
	while(m<itemArrays.length){	
		hideAllSubMenu(m,1);
		if(verDirection[m]){ //if vertical menu dis-highlight top level menus manually
			for(n=0;n<itemArrays[m].length;n++){
				if(itemArrays[m][n][0]==-1)
					unHighlightStyle(document.getElementById("menu"+m+"_"+n).style);
			}
		}
		m++;
	}
}

/**	
	returns Level of the specified Menu
	Level 0 is base menu
**/
function findLevel(n,menuId){
	var menuItems = itemArrays[n];
	var level = 0;
	while(menuItems[menuId][0]!=-1){
		level++;
		menuId = menuItems[menuId][0];
	}
	return level;
}

/* this is a very very special case for teknotel web site */
function menuGoTo(url){
	if(url.length>0){
		//if(url=="index.html")
			window.location.href=url;
		//else
		//	window.frames["content"].location.href=url; 
	}
}

/* original function was this one
function menuGoTo(url){
	if(url.length>0){
		window.frames["content"].location.href=url; // this is a very very special case for teknotel web site
//		window.location.href=url;
	}
}
*/

function getCoords (element) {
		var coords = { x: 0, y: 0, width: element.offsetWidth, height: element.offsetHeight };
		while (element) {
		coords.x += element.offsetLeft;
		coords.y += element.offsetTop;
		element = element.offsetParent;
		}
		return coords;
}

function hasSubMenu(n,menuId){
	var menuItems = itemArrays[n];
	for(var m=0;m<menuItems.length;m++){
		if(menuItems[m][0]==menuId)		//if any menuItem has parent with Id menuId
			return true;
	}
	return false;
	
}