// JavaScript Document
/*
*	Using AJAX to to make a tree menu.
*	Author: Xiaojie
*	Version: 1.0.3
*	Compatible with IE, Mozilla Firefox, Opera
*	Update Note: 1) Add support for multiple level sub menu
*				 2) Control the position of sub menu
*	Description: Store all menu info in a XML file and process with AJAX, 
*				 easy to control, just modify the XML file, add or remove items,
*				 Dynamic drop down and transparent background.
*/
var xmlHttpReq;					//XML Process Variable
var currNode;							//current Node
var i, j, k;							//iteration variable
var subMenu_index;      				//subMenu Index
var loops = 1;							//control loops
var loops_cnt;						//loops time
var subMenu;							//the object hold the submenu
var output_str = "";					//string hold to display
var ie_transparent = 50;     			//final transparent value for ie;
var moz_transparent = 0.5;    			//mozilla transparent value
var prefix = "floatM";					// the prefix for float menu
var xml_file = "dataV5.xml";
var subdivlist = new Array();
var blank_img = new Image();
var click_disable = false;	//disable click other button
blank_img.src = "/images/blank.gif";

/* Browser check start*/
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_ie  = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

var is_ie3    = (is_ie && (is_major < 4));
var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);

var is_ie5_5below = (is_ie && (is_ie3 || is_ie4 || is_ie5));

var is_opera = (agt.indexOf("opera") != -1);
var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
/* Browser check end*/

/*Menu Config*/
var menu_width = 138;
var menu_height = 34;

/*Menu_Image*/
var menuImage_hold = new Array();
var menuImage_len;

var menuheightHold = new Array();		//array held for sub menu height
var slide_speed = 20;					//slide speed
var show_init_height = 10;     			//initial height when show menu

var show2Menu = true;   				//if show the next level sub Menu;

function loadLeftMenu(id, xmlfile, flag)
{
	var xmlHttpReq = makeReq();
	if(xmlHttpReq)
	{
		xmlHttpReq.open("GET", xmlfile, true);
	
		xmlHttpReq.onreadystatechange = function(){
			if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
			{
				if(flag == 1)
				{
					document.getElementById(id).innerHTML = makeTreeMenu(xmlHttpReq.responseXML);
				}
				else
				{
					document.getElementById(id).innerHTML = makeRoughMenu(xmlHttpReq.responseXML);
				}
			}
			else
			{
				document.getElementById(id).innerHTML = "<center><br><br><img src='/images/progress_loading.gif' align='center'>&nbsp;<font face='Arial' size=2 color='#FFFFFF'><b>Loading Menu..<b></font></center>";
			}
		};
		xmlHttpReq.send(null);
	}
}
//load the submenu
//obj: catch the obj where mouseover
//xmlfile: the file keep menu content
//tag: to get where submenu should get from
//index: the hierarchy of menu, start from 2, which's the first float.
function loadSubMenu(obj, xmlfile, tag, index)
{
	var divid = prefix + "_" + index;
	if(!document.getElementById(divid))
	{
		createFloatDiv(divid);
	}
	
	var xmlHttpReq = makeReq();
	var retval = "";
	if(xmlHttpReq)
	{
		xmlHttpReq.open("GET", xmlfile, true);
	
		xmlHttpReq.onreadystatechange = function(){
			if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
			{
				retval = makeSubMenu(xmlHttpReq.responseXML, tag, index);
				showFloatMenu(obj, divid, retval);
			}
		};
		xmlHttpReq.send(null);
	}
}

function makeSubMenu(xmlDoc, tag, index)
{
	var output_str = "<table style=\"position:abosolute;\">\n";
	var	root = xmlDoc.documentElement.getElementsByTagName(tag);
	
	var counter = 0;
	
	for(i = 0; i < root[0].childNodes.length; i++)
	{
		currNode =  root[0].childNodes[i];
		if(currNode.nodeType != 3)   //3 indicate text node
		{
			counter++;
			output_str += "<tr height=20 valign=\"middle\">";
			if(show2Menu && ((currNode.hasChildNodes() && is_ie) || (currNode.childNodes.length > 1 && !is_ie)))         //has subMenu
			{
				output_str += "<td onMouseOver=\"loadSubMenu(this, '"+xml_file+"', '"+currNode.nodeName+"', "+(index+1)+")\"><a class=\"navtree\" href=\""+currNode.attributes[1].value+"\" target = \""+currNode.attributes[2].value+"\">"+currNode.attributes[0].value+"&nbsp;&nbsp; &nbsp;&nbsp;</a></td><td width=20 align=\"right\"><img src=\"/images/arrow-right.gif\" border=0></td>";
			}
			else
			{
				output_str += "<td><a class=\"navtree\" href=\""+currNode.attributes[1].value+"\" target = \""+currNode.attributes[2].value+"\">"+currNode.attributes[0].value+"</a></td><td width=20>&nbsp;</td>";
			}
			output_str += "</tr>\n";
		}
	}
	
	output_str += "</table>\n";
	return {html:output_str, counter:counter};
}

function makeRoughMenu(xmlDoc)
{
	var output_str = "<ul>\n";
	var	root = xmlDoc.documentElement;
	
	for(i = 1; i < root.childNodes.length; i++)
	{
		currNode = root.childNodes[i];
	
		if(currNode.nodeType != 3)  //3 indicates text node
		{	
			if((currNode.hasChildNodes() && is_ie) || (currNode.childNodes.length > 1 && !is_ie))         //has subMenu
			{
				output_str += "<li class=\"Parent_Font\">"+currNode.attributes[0].value.replace(/ /g, "&nbsp;")+"\n";
				output_str += "<ul>";
				
				for(j = 0; j < currNode.childNodes.length; j++)
				{
					if(currNode.childNodes[j].nodeType != 3)   //3 indicate text node
					{
						if(((currNode.childNodes[j].hasChildNodes() && is_ie) || (currNode.childNodes[j].childNodes.length > 1 && !is_ie)))         //has subMenu
						{
							output_str += "<li><a class=\"roughtree\" href=\""+currNode.childNodes[j].attributes[1].value+"\" target = \""+currNode.childNodes[j].attributes[2].value+"\">"+currNode.childNodes[j].attributes[0].value.replace(/ /g, "&nbsp;")+"</a>\n";
							
							output_str += "<ul>";
							
							for(k = 0; k < currNode.childNodes[j].childNodes.length; k++)
							{
								if(currNode.childNodes[j].childNodes[k].nodeType != 3)   //3 indicate text node
								{
									output_str += "<li><a class=\"roughtree\" href=\""+currNode.childNodes[j].childNodes[k].attributes[1].value+"\" target=\""+currNode.childNodes[j].childNodes[k].attributes[2].value+"\">"+currNode.childNodes[j].childNodes[k].attributes[0].value.replace(/ /g, "&nbsp;")+"</a></li>\n";
								}
							}
						
							output_str += "</ul></li>\n";
						}
						else
						{
							output_str += "<li><a class=\"roughtree\" href=\""+currNode.childNodes[j].attributes[1].value+"\" target = \""+currNode.childNodes[j].attributes[2].value+"\">"+currNode.childNodes[j].attributes[0].value.replace(/ /g, "&nbsp;")+"</a></li>\n";
						}
					}
				}
		
				output_str += "</ul></li>\n";
			}
			else
			{
				output_str += "<li><a class=\"roughtree\" href=\""+currNode.attributes[1].value+"\" target=\""+currNode.attributes[4].value+"\">"+currNode.attributes[0].value.replace(/ /g, "&nbsp;")+"</a></li>\n";
			}
		}
	}
	output_str += "</ul>\n";
	return output_str;
}

function makeTreeMenu(xmlDoc)
{
	var output_str = "";
	var	root = xmlDoc.documentElement;
	
	for(i = 0; i < root.childNodes.length; i++)
	{
		currNode = root.childNodes[i];
		output_str += "<table width = \""+menu_width+"\" cellpadding = 0 cellspacing = 0><tr><td>\n";
		
		if(currNode.nodeType != 3)  //3 indicates text node
		{
			menuheightHold[i] = 0;
			//write the parent
			output_str += "<div class=\"Menu_Parent\">\n";
			output_str += "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">\n";
		
			if((currNode.hasChildNodes() && is_ie) || (currNode.childNodes.length > 1 && !is_ie))         //has subMenu
			{
				output_str += "<tr onMouseOver=\"hideFloatMenu();\" onClick=\"toggleMenu(this);\"><td width=\"100%\" style=\"cursor:pointer;\"><img src=\""+currNode.attributes[2].value+"\" border=0 onMouseOver=\"swapImage(this, '"+currNode.attributes[3].value+"');\" onMouseOut=\"swapImage(this, '"+currNode.attributes[2].value+"');\"></td></tr>\n";
			
				menuImage_len = menuImage_hold.length;
			
				menuImage_hold[menuImage_len] = new Image();
				menuImage_hold[menuImage_len].src = currNode.attributes[2].value;
				
				
				output_str += "</table></div>\n";
				
				//alert(currNode.attributes[2].value);
				
				//write the sub menu
				if(is_ie)
				{
					output_str += "<div id=\"subMenu_"+i+"\" class=\"Menu_Items\" style=\"width: 138px; filter:alpha(opacity = 0);\" state = \"0\">\n";
				}
				else
				{
					output_str += "<div id=\"subMenu_"+i+"\" class=\"Menu_Items\" style=\"width: 128px; opacity:0;\" state = \"0\">\n";
				}
		
				output_str += "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">\n";
		
				for(j = 0; j < currNode.childNodes.length; j++)
				{
					if(currNode.childNodes[j].nodeType != 3)   //3 indicate text node
					{
						if(show2Menu && ((currNode.childNodes[j].hasChildNodes() && is_ie) || (currNode.childNodes[j].childNodes.length > 1 && !is_ie)))         //has subMenu
						{
							output_str += "<tr height=20><td width="+menu_width+" class=\"Float_Parent\" onMouseOver=\"loadSubMenu(this, '"+xml_file+"', '"+currNode.childNodes[j].nodeName+"', 2)\"><a class=\"navtree\" href=\""+currNode.childNodes[j].attributes[1].value+"\" target = \""+currNode.childNodes[j].attributes[2].value+"\">"+currNode.childNodes[j].attributes[0].value+"</a></td></tr>\n";
						}
						else
						{
							output_str += "<tr onMouseOver=\"hideFloatMenu();\" height=20><td width="+menu_width+"><a class=\"navtree\" href=\""+currNode.childNodes[j].attributes[1].value+"\" target = \""+currNode.childNodes[j].attributes[2].value+"\">"+currNode.childNodes[j].attributes[0].value+"</a></td></tr>\n";
						}
					
						menuheightHold[i] += slide_speed;
					}
				}
		
				output_str += "</table></div>\n";
			}
			else
			{
				output_str += "<tr onMouseOver=\"hideFloatMenu();\"><td width=\"100%\"><a href=\""+currNode.attributes[1].value+"\" target=\""+currNode.attributes[4].value+"\"><img src=\""+currNode.attributes[2].value+"\" border=0 onMouseOver=\"swapImage(this, '"+currNode.attributes[3].value+"');\" onMouseOut=\"swapImage(this, '"+currNode.attributes[2].value+"');\"></a></td></tr>\n";
				
				menuImage_len = menuImage_hold.length;
			
				menuImage_hold[menuImage_len] = new Image();
				menuImage_hold[menuImage_len].src = currNode.attributes[2].value;
			
				output_str += "</table></div>\n";
			}
		}
	
		output_str += "</td></tr></table>\n";
	}
	return output_str;
}

function toggleMenu(obj)
{
	if(!click_disable)
	{
		click_disable = true;
		if(is_ie)
		{
			subMenu = obj.parentNode.parentNode.parentNode.parentNode.childNodes[1];
			subMenu_index = parseInt(obj.parentNode.parentNode.parentNode.parentNode.childNodes[1].id.substr(8));
		}
		else
		{
			subMenu = obj.parentNode.parentNode.parentNode.parentNode.childNodes[3];
			subMenu_index = parseInt(obj.parentNode.parentNode.parentNode.parentNode.childNodes[3].id.substr(8));
		}
		
		loops_cnt = Math.round(menuheightHold[subMenu_index]/slide_speed) + 3;
	
		if(subMenu.getAttribute("state") == 1)  //currently showing menu, to hide
		{
			hideSubMenu();
		}
		else //currently hiding menu, to show
		{
			subMenu.style.height = show_init_height;
			showSubMenu();
		}
	}
}

function showSubMenu()
{
	if(loops < loops_cnt)
	{
		subMenu.style.display = "block";
		
		if(is_ie)
		{
			subMenu.childNodes[0].style.display = "none";
			subMenu.filters["alpha"].opacity += ie_transparent/loops_cnt;
		}
		else
		{
			subMenu.childNodes[1].style.display = "none";
			subMenu.style.opacity = Math.round((parseFloat(subMenu.style.opacity) + parseFloat(moz_transparent/loops_cnt)) * 100) / 100;
			
		}
		
		subMenu.style.height = parseInt(subMenu.style.height) + Math.round(menuheightHold[subMenu_index]/loops_cnt);
		
		loops++;
		setTimeout("showSubMenu()",30);
	}
	else
	{
		subMenu.setAttribute("state", 1);
		subMenu.style.display = "block";
		
		if(is_ie)
		{
			subMenu.filters["alpha"].opacity = ie_transparent;
			subMenu.childNodes[0].style.display = "block";
		}
		else
		{
			subMenu.style.opacity = moz_transparent;
			subMenu.childNodes[1].style.display = "block";
		}

		loops = 1;
		click_disable = false;
	}
}

function hideSubMenu()
{
	if(loops < loops_cnt)
	{
		subMenu.style.height = parseInt(subMenu.style.height) - Math.round(menuheightHold[subMenu_index]/loops_cnt);
		
		if(is_ie)
		{
			subMenu.childNodes[0].style.display = "none";
			subMenu.filters["alpha"].opacity = subMenu.filters["alpha"].opacity - ie_transparent/loops_cnt;
		}
		else
		{
			subMenu.childNodes[1].style.display = "none";
			subMenu.style.opacity = Math.round((parseFloat(subMenu.style.opacity) - parseFloat(moz_transparent/loops_cnt)) * 100) / 100;
		}
		
		loops++;
		setTimeout("hideSubMenu()",30);
	}
	else
	{
		subMenu.setAttribute("state", 0);
		subMenu.style.display = "none";
		loops = 1;
		click_disable = false;
	}
}

function showFloatMenu(obj, id, retval)
{
	document.getElementById(id).innerHTML = retval.html;
	document.getElementById(id).style.display = "block";
	document.getElementById(id).style.visibility = "hidden";
	document.getElementById(id).style.left = (getXcor(obj) + obj.parentNode.offsetWidth - 5).toString() + "px";
	
	var ycor = getYcor(obj) + obj.clientHeight/2;		//default drop down the sub menu from center of parent menu.
	
	if(ycor + document.getElementById(id).clientHeight  - document.body.scrollTop > document.body.clientHeight)	//if the sub menu exceeds lower bound.
	{
		ycor = getYcor(obj) + obj.clientHeight/2 - document.getElementById(id).clientHeight;
	}
	
	if(ycor - document.body.scrollTop  < 2)	//if the sub menu out of the upper bound.
	{
		ycor = getYcor(obj) + obj.clientHeight/2  - (document.getElementById(id).clientHeight)/2 ;
	}
	
	document.getElementById(id).style.top = ycor.toString() + "px";
	
	document.getElementById(id).style.visibility = "visible";
}

function hideFloatMenu()
{
	for(var i = 0; i < subdivlist.length; i++)
	{
		subdivlist[i].innerHTML = "";
		subdivlist[i].style.display = "none";
	}
}

function getXcor(obj)
{
	var rval = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			rval += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		rval += obj.x;
	return rval;
}

function getYcor(obj)
{
	var rval = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			rval += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		rval += obj.y;
	return rval;
}
//create div to hold the float menu
function createFloatDiv(id)
{
	var newdiv = document.createElement('div');
	newdiv.setAttribute("id", id);
	newdiv.style.position = "absolute";
	
	if(is_ie)
	{
		newdiv.setAttribute("className", "Menu_Float");
		newdiv.style.filter = "alpha(opacity = "+(40+ie_transparent)+")";
	}
	else
	{
		newdiv.setAttribute("class", "Menu_Float");
		newdiv.style.opacity = 0.4+moz_transparent;
	}
	
	document.body.appendChild(newdiv);
	subdivlist[subdivlist.length] = newdiv;
}