addEvent( window, 'load', load );
var popupDelayID;
var timerID;

function load() {	
	inMenu = false;
	body = document.getElementsByTagName( "body" )[0];
	lastMenuItem = null;
	
	//just a quick test to see if the menu IDs are set or not.. testing only using one of them.
	//intermediate jump pages in the product will return as menus are not present ;)
	if( getNode( "home" ) == null ) return;

	var xhome     = new MenuItemsParent( getNode( "home" ) , getNode( "mainDiv" ));
	var news = new MenuItemsParent( getNode( "news" ) , getNode( "mainDiv" ));
	var product    = new MenuItemsParent( getNode( "product" ) , getNode( "mainDiv" ));
	var customer  = new MenuItemsParent( getNode( "customer" ) , getNode( "mainDiv" ));
	//var job      = new MenuItemsParent( getNode( "job" ) , getNode( "mainDiv" ));
	//var contact   = new MenuItemsParent( getNode( "contact" ) , getNode( "mainDiv" ));
	//var dev       = new MenuItemsParent( getNode( "dev" ));
	//var comics    = new MenuItemsParent( getNode( "comics" ));
	//var portal    = new MenuItemsParent( getNode( "portal" ));
	
	xhome.addMenuItem( new MenuItem( "company profile", "/en/about.htm" ) );
	xhome.addMenuItem( new MenuItem( "networks", "/en/about_wl.htm" ) );
	xhome.addMenuItem( new MenuItem( "group scene", "/en/groupscene.htm" ) );
	xhome.addMenuItem( new MenuItem( "quality accredited", "/en/about_rz.htm" ) );	
	xhome.createMenu();

	news.addMenuItem( new MenuItem( "News", "/en/index.asp?classid=1&companyname=lkm" ) );
	news.addMenuItem( new MenuItem( "Exhibition", "/en/index.asp?classid=2&companyname=lkm" ) );
	news.addMenuItem( new MenuItem( "Visitation", "/en/index.asp?classid=3&companyname=lkm" ) );	
	news.addMenuItem( new MenuItem( "Seminar", "/en/index.asp?classid=4&companyname=lkm" ) );
	news.createMenu();
	
	
	product.addMenuItem( new MenuItem( "what's news", "/en/cp.htm" ) );
	product.addMenuItem( new MenuItem( "available materials", "/en/cp_2.htm" ) );
	product.addMenuItem( new MenuItem( "standard mould bases", "/en/cp_3.htm" ) );
	product.addMenuItem( new MenuItem( "custom made mould bases", "/en/cp_4.htm" ) );
	product.addMenuItem( new MenuItem( "mould inserts", "/en/cp_5.htm" ) );
	product.addMenuItem( new MenuItem( "mould accessories", "/en/cp_6.htm" ) );
	//product.addMenuItem( new MenuItem( "hot runner system", "/en/cp_7.htm" ) );
	product.addMenuItem( new MenuItem( "heat-treatment", "/en/cp_8.htm" ) );
	product.addMenuItem( new MenuItem( "welding service", "/en/cp_9.htm" ) );
	product.addMenuItem( new MenuItem( "quality accredited", "/en/cp_10.htm" ) );
	product.createMenu();

	customer.addMenuItem( new MenuItem( "aims", "/en/kf.asp" ) );
	customer.addMenuItem( new MenuItem( "preferential price", "/en/custyou.asp" ) );	
	customer.addMenuItem( new MenuItem( "comments drop-in box", "/en/kf_fk.asp" ) );	
	customer.createMenu( );
}


function MenuItemsParent ( node , mainDiv) {
	this.node = node;
	this.mainDiv = mainDiv;
	this.menuItems = new Array();
	
	MenuItemsParent.prototype.addMenuItem = function( menuItem ) {
		this.menuItems[ this.menuItems.length ] = menuItem;	
	}
	
	MenuItemsParent.prototype.createMenu = function( ) {
		var divNode = document.createElement( "div" );
		
		divNode.className = "jsMenu";

		var str = "_" + this.node.id;
		divNode.setAttribute( "id", str );
		//must initialize values once so they don't display extra whitespace at the bottom of screen.
		var w = this.node.offsetWidth;		
		var mainw = this.mainDiv.offsetLeft;
		//alert(mainw);
			
		divNode.style.width = w > 160 ? w+"px" : "160px";
		divNode.style.top = ( this.node.offsetTop + this.node.offsetHeight ) + "px";
		divNode.style.left = (this.node.offsetLeft + mainw) + "px";
		//alert(divNode.style.left);

		addEvent( this.node, "mouseover", function() { showMenuInTime(str, 250, mainw) } );
		addEvent( this.node, "mouseout", function() { setInMenu(false) } );

		divNode.setAttribute( "parentItemID", this.node.id );
		addEvent( divNode, "mouseover", function() { setInMenu(true) } );
		addEvent( divNode, "mouseout", function() { setInMenu(false) } );

		var html = "<ul>";
		for( var i=0; i<this.menuItems.length; i++ ) {
			html += this.menuItems[i].getLinkHTML();
		}
		divNode.innerHTML = html + "</ul>";
		
		body.appendChild( divNode );

				
		//need to place arrow due to popular demand ;)
		//var imgNode = document.createElement( "img" );
		//imgNode.setAttribute( "alt", "" );
		//imgNode.className = "arrow";

		//add img to this.node, NOT to its hyperlink (firstChild) as other browsers have problems with that. :(
		//this.node.appendChild( imgNode );
		
		/*the above would've been really easy like this.. but current html markup prevents that :(
		this.node.className = "arrow";
		*/

	}

}
function MatchUrl(str){
   var r, re;         // 声明变量。   
   re = /^(http:\/\/)?([^\/]+)/i;      // 创建正则表达式模式。
   r = str.match(re);   // 尝试去匹配搜索字符串。
   return(r[0]);         // 返回的数组包含了所有 "ain" 
                      // 出现的四个匹配。
}
function MenuItem( value, href ) {
	this.value = ( value == null ) ? "" : value;
	this.href = ( href == null ) ? "" : href;

	if( this.href!="" && this.href.indexOf( "http://" ) < 0 ) {		
		this.href=MatchUrl(window.location.href) + this.href;		
	}

	MenuItem.prototype.getLinkHTML = function () {

		//if its a complete URL
		if( this.value != "" && this.href != "" ) {
			return "<li><a onclick=\"setInMenu(false); hideMenu(); return true;\" href=\"" + this.href + "\">" + this.value + "</a></li>";
		}
		
		//if its a sub header, no link
		else if( this.value != "" && this.href == "" ) {
			return "<li class='heading'>" + this.value + "</li>";
		}
		
		//if its a separator, no value, no href
		else {
			return "<li class='separator'>&nbsp;</li>";
		}
		
	}
}

function showMenuInTime( node, time, mainw ) {
	popupDelayID = setTimeout( "showMenu('" + node + "'," + mainw +")", time );
}

function showMenu( node, mainw ) {
	clearTimeout( popupDelayID );
	if( typeof node == "string" )
		node = getNode( node );

	if( lastMenuItem != null && lastMenuItem != node ) {
		hideMenu( lastMenuItem );
	} else if( lastMenuItem == node ) {
		setInMenu( true );
		return;
	}

	node.style.display = "block";
	
	//Need to set this values dynamically when the menu is displayed!!
	var parentItem = getNode( node.getAttribute( "parentItemID" ) );
	
	var w = parentItem.offsetWidth;
	node.style.width = w > 160 ? w+"px" : "160px";
	node.style.top = ( parentItem.offsetTop + parentItem.offsetHeight ) + "px";
	node.style.left = (parentItem.offsetLeft + mainw ) + "px";	
	
	setClassName( parentItem.firstChild, "jsHover" );
	
	setInMenu( true );
	lastMenuItem = node;
	timerID = setTimeout( "hideMenu( lastMenuItem )", 500 );
}

function hideMenu( node ) {
	//node is null when called by menu item hyperlink onclick event
	if( node == null ) {
		setInMenu( false );
		hideMenu( lastMenuItem );
		return;
	}
	
	if( typeof node == "string" )
		node = getNode( node );

	if( !inMenu ) {
		node.style.display = "none";
		var parentItem = getNode( node.getAttribute( "parentItemID" ) );
		removeClassName( parentItem.firstChild, "jsHover" );
		lastMenuItem = null;
		clearTimeout( timerID );
	} else {
		timerID = setTimeout( "hideMenu( lastMenuItem )", 500 );	
	}
}

function setInMenu( value ) {
	inMenu = value;	
	if( !value ) clearTimeout( popupDelayID );
}


function addEvent( node, evtType, func ) {
	if( node.addEventListener ) {
		node.addEventListener( evtType, func, false );
		return true;
	} else if( node.attachEvent ) {
		return node.attachEvent( "on" + evtType, func );
	} else {
		return false;
	}
}


function getNode( nodeId ) {
	if( document.getElementById ) {
		return document.getElementById( nodeId );
	}
	else if( document.all && document.all( nodeId ) ) {
		return document.all( nodeId );
	}
	else if( document.layers && document.layers[ nodeId ] ) {
		return document.layers[ nodeId ];
	}
	else {
		return false;
	}
}


function setClassName( node, value ) {
	if( node == null ) return;
	if( " " + node.className + " " . indexOf( value ) >= 0 ) return;
	
	node.className += ( node.className.length==0 ? "" : " " ) + value;
}

function removeClassName( node, value ) {
	if( node == null ) return;
	//RegExp doesn't work well in IE :(
	//node.className =  node.className.replace( new RegExp( /^\s?jsHover\s?$/ ), "" );
	node.className =  node.className.replace( value, "" );
}