////configuration
var nav2ScrollInterval = 50;	//the smaller the smoother

function startMenu(){
	//menu setting starts
	makeNav('m0');
	setCurrentMenu(makeS1Id(s1), s2, s3);	// fix current section menu.  no drop down on top.
	makeMenu('menu');
	//menu setting ends
}

/////
function makeNav(id){
	var m = document.getElementById(id);
	if(!m) return;

	lis = m.getElementsByTagName('li');
	for(i=0; i<lis.length; i++){
		ul = getMenuOf(lis[i]);
		if(!ul || ul.id==makeS1Id(s1)) continue;	// don't make current menu

		ul.style.top = findPosY(lis[i]) + lis[i].offsetHeight - ul.offsetHeight + 'px';
		var x = findPosX(lis[i]) + (bw.ie && bw.mac ? 107: 0);
		var w = parseInt(getStyle(ul, 'width'));
		// left-align or right-align nav2
		if(x+w < 760)	{ul.style.left =  x + 'px';}
		else ul.style.left = x - w + lis[i].offsetWidth + 'px';

		lis[i].onmouseover = function(){OverNav(this);}
		lis[i].onmouseout = function(){OutNav(this);}
	}

	function OverNav(ele){
		switch_over();
		resetMenus();

		ul = getMenuOf(ele);
		if(!ul || ul.id==makeS1Id(s1)) return;	// don't make current menu

		var img = ele.getElementsByTagName('img')[0];
		overImg(img);
		shownM0=img;
		shownItem=ele;
		shownLayer=ul;
		addClass(shownItem, 'on');	// highlight menu item
		addClass(shownLayer, 'on');	// make layer visible
		if(switch_timeout[ul.id]) clearTimeout(switch_timeout[ul.id]);
		scrollMenu(ul.id, 'out', 4);	// scroll out the layer
	}
	
	function OutNav(ele){
		switch_out();
		clearTimeout(switchTimeoutIdLayer);		
		//removeClass(ele, 'on');
	}
}

////// assign mouse events to images under an element.  Useful for navigation.
////// doesn't work on NS4
function makeMenu(id){
	var nav = document.getElementById(id);
	if(!nav) return;

	//events
	var uls = nav.getElementsByTagName('ul');
	for(i=0; i<uls.length; i++){
		uls[i].onmouseover = function(){overMenu(this);}
		uls[i].onmouseout = function(){outMenu(this);}
		
		var as=uls[i].getElementsByTagName('a');
		if(as && as.length>1) as[as.length-1].style.backgroundImage='none';
	}

	
	function overMenu(ele){
		switch_over();
		//removeClass(ele, 'off');
		//addClass(ele, 'on');
		//positNav3(ele);
	}
	
	function outMenu(ele){
		switch_out();
		//removeClass(ele, 'on');
		//addClass(ele, 'off');
	}
}

function setCurrentMenu(sec1, sec2, sec3){
	if(!sec1) return ;
	
	var nav = getRefById(sec1 + '-' + sec2 + '-' + sec3);
	if(nav && nav.getElementsByTagName('a')[0]) addClass(nav.getElementsByTagName('a')[0], 'current');
	
	nav = getRefById(sec1 + '-' + sec2);
	if(nav && nav.getElementsByTagName('a')[0]) addClass(nav.getElementsByTagName('a')[0], 'current');
	
	nav = getRefById(sec1);
	if(!nav) return;
	addClass(nav, 'menuStatic');
	//alert('needed to alert, otherwise cannot show left menu');
	
	var m0On = getNav1Of(nav);
	//var m0On = getRefById('m0_'+sec1.match(/\d+/));
	if(m0On){
		addClass(m0On, 'current');
		var img=m0On.getElementsByTagName('img')[0];
		if(img){
			img.src=img.src.replace('/off/', '/on/');	// turn on img
			img.onmouseover=function(){};	// clear mouse events
			img.onmouseout=function(){};
		}
	}

	// put current nav2 to menuPlacer
	var mp = getRefById('menuPlacer');
	if(mp) {
		nav.parentNode.removeChild(nav);
		mp.appendChild(nav);
		addClass(mp, 'module');
	}

	/*// add a plus (+) or minus (-) sign before menu items
	ele = nav.getElementsByTagName('a');
	for(i=0; i<ele.length; i++){
		var tab = document.createElement('span');
		addClass(tab, 'tab');
		var t = document.createTextNode('+');
		tab.appendChild(t);
		ele[i].insertBefore(tab, ele[i].firstChild);
	}*/

	// add mouse events to menuStatic
	var lis = nav.getElementsByTagName('li');
	for(i=0; i<lis.length; i++){
		id = lis[i].id;
		var hasSubMenu;
		if(getSubMenuById(id)) hasSubMenu=true;
		else hasSubMenu=false;

		lis[i].onmouseover = function(){OverNavStatic(this);}
		lis[i].onmouseout = function(){OutNavStatic(this);}
		
		/*// add tabs of '+' '-' or '*'
		as = lis[i].getElementsByTagName('a');
		for(j=0; j<as.length; j++){
			var tab = document.createElement('span');
			tab.className='tab';
			if(hasSubMenu && !hasClassName(as[j], 'current')) {	//current tab is expanded so needs not '+' but '-'
				t = document.createTextNode('+');
				addClass(as[j], 'hasSubMenu');
			}
			else t = document.createTextNode('-');
			tab.appendChild(t);
			as[j].replaceChild(tab, as[j].firstChild);
		}*/
		
		// add right arrow for menus having submenu
		as = lis[i].getElementsByTagName('a');
		for(j=0; j<as.length; j++){
			if(hasSubMenu && !hasClassName(as[j], 'current')) {	//current tab is expanded so needs not '+' but '-'
				addClass(as[j], 'hasSubMenu');
			}
			else addClass(as[j], 'noSubMenu');
		}

	}
		
	///////nav3
	li2=getRefById(sec1+'-'+sec2);
	//nav = getRefById(sec1+'-'+sec2+'-'+sec3);	//li
	nav = getRefById(sec1+'-'+sec2+'-m');	//ul
	if(!nav) return;
	//nav=nav.parentNode;
	nav.id='nav3Static';
	nav.parentNode.removeChild(nav);
	//li2.appendChild(nav);
	li2.parentNode.insertBefore(nav, li2.nextSibling);	//insert nav3 after its parent menu item, ie: before its parent menu item's next sibling

	nav.onmouseover = function(){resetMenus();clearTimeout(switchtimeoutID);}	// special treatment when mouseovering static nav3
	nav.style.visibility='visible';	//shows menuStatic only after finishing setting it up, as its the content-dependent length affects browser's rendering.
	
	/*// '-' tab before menuStatic nav3 items
	as = nav.getElementsByTagName('a');
	for(j=0; j<as.length; j++){
		var tab = document.createElement('span');
		tab.className='tab';
		t = document.createTextNode('-');
		tab.appendChild(t);
		as[j].insertBefore(tab, as[j].firstChild);
	}*/

	function OverNavStatic(ele){
		resetMenus();
		switch_over();
		
		var ul=getSubMenuById(ele.id);
		if(!ul) return;
		positNav3(ele);	//align nav3 with its parent menu item
		care_overlap(ul);
		shownItem=ele;
		shownLayer=ul;
		addClass(shownItem, 'on');	//highlight menu item
		addClass(shownLayer, 'on');	//make layer visible
	}
	
	function OutNavStatic(ele){
		switch_out();
		clearTimeout(switchTimeoutIdLayer);
		//var ul=document.getElementById(ele.id+'-m');
		//if(!ul) return;
		//removeClass(ul, 'on');
		//addClass(ul, 'off');
	}
}

function makeS1Id(str){	//private method to return nav2 ul element id
	if(str && str != '') return 'm'+ str;
	else return '';
}

function getNav1Of(ele){	//private method to get Nav1 from a Nav2 ul element.
	//id = 'm0_' + ele.id.match(/\d+/)
	if(ele && ele.id.length>0) {
		id = 'm0_' + ele.id.substring(1);	//substring(1): to escape the leading 'm'
		return document.getElementById(id);
	} else return null;
}

function getMenuOf(ele){	//private method to get a submenu from a topper menu item.
	//var n = ele.id.match(/_\d+/);
	//id = 'm' + n.toString().match(/\d+/);
	var n = ele.id.match(/_.*/);
	id = makeS1Id(n.toString().substring(1));	//substring(1): to escape the leading '_'
	return document.getElementById(id);
}

function getSubMenuById(id){	//private method: submenu's id = its parent menu item's id + '-m'
	return document.getElementById(id+'-m');
}

function positNav3(ele){
	var m=getSubMenuById(ele.id);
	if(m){
		m.style.left=findPosX(ele) + ele.offsetWidth - 1 + 'px';	//-1: to avoid juxtaposition of two borders
		m.style.top=findPosY(ele) + 'px';
	}
}

function overImg(img){
	if(img)
	img.src = img.src.replace('/off/', '/on/');
}

function outImg(img){
	if(img)
	img.src = img.src.replace('/on/', '/off/');
}

var switch_timeout = {};
function scrollMenu(id, dir, speed){
	ele=document.getElementById(id);
	delta = speed * speed;
	speed+=2;

	if(!switch_timeout[id]) switch_timeout[id]=100;

	var limit;
	var direction;
	if(hasClassName(ele, 'nav2')){
		parentMenuItem=getNav1Of(ele);

		if(dir=='out'){
			limit = findPosY(parentMenuItem) + parentMenuItem.offsetHeight;
			direction = 1;
			ele.style.zIndex=50;
			//if(!hasClassName(ele, 'fade')) addClass(ele, 'fade')
		} else if (dir=='in'){
			limit = findPosY(parentMenuItem) + parentMenuItem.offsetHeight - ele.offsetHeight;
			direction = -1;
			ele.style.zIndex=45;	// to avoid overlapping downgoing nav2
			//if(hasClassName(ele, 'fade')) removeClass(ele, 'fade')
		}

		if(
			direction *(parseInt(ele.style.top) + delta)
			< direction * limit
			) {
			if(!hasClassName(ele, 'opac50')) addClass(ele, 'opac50');	//add opacity=50%
			ele.style.top = parseInt(ele.style.top) + direction * delta + 'px';
			switch_timeout[id] = setTimeout('scrollMenu("'+ id + '", "' + dir + '", ' + speed + ')', nav2ScrollInterval);
		} else {	// last step
			ele.style.top = limit + 'px';	// do the reminding displacement
			if(hasClassName(ele, 'opac50')) removeClass(ele, 'opac50');	//remove opacity=50% ==> opacity=100%
			// check overlap.  Do it when the layer is fully displayed, otherwise cannot determine overlapping.
			if(dir=='out')care_overlap(shownLayer);
			clearTimeout(switch_timeout[id]);
			//else unhide_overlapped();	// needn't do unhidding here.  the function resetMenus() does it.
		}
	}
	/*else if(hasClassName(ele, 'nav3')){
		parentMenuItem=document.getElementById(ele.id.replace('-m', ''));

		if(dir=='out'){
			limit = findPosX(parentMenuItem) + parentMenuItem.offsetWidth - 1; //-1: to avoid juxtaposition of two borders
			direction = 1;
			ele.style.zIndex=20;
			//if(!hasClassName(ele, 'fade')) addClass(ele, 'fade')
		} else if (dir=='in'){
			limit = findPosX(parentMenuItem) + parentMenuItem.offsetWidth - ele.offsetWidth;
			direction = -1;
			ele.style.zIndex=10;	// to avoid overlapping downgoing nav2
			//if(hasClassName(ele, 'fade')) removeClass(ele, 'fade')
		}

		if(
			direction *(parseInt(ele.style.left) + delta)
			< direction * limit
			) {
			if(!hasClassName(ele, 'opac50')) addClass(ele, 'opac50');
			ele.style.left = parseInt(ele.style.left) + direction * delta + 'px';
			switch_timeout[id] = setTimeout('scrollMenu("'+ id + '", "' + dir + '", ' + speed + ')', 100);
		} else {
			ele.style.left = limit + 'px';	// do the reminding displacement
			if(hasClassName(ele, 'opac50')) removeClass(ele, 'opac50');
		}
	}*/
}

var switchtimeoutID = 1;
var switchTimeoutIdLayer = 1;
function switch_over() {
	clearTimeout(switchtimeoutID);
}

function switch_out() {
	switchtimeoutID = setTimeout('resetMenus();',500);
}

function resetMenus(){
	outImg(shownM0);
	shownM0=null;
	
	removeClass(shownItem, 'on');
	shownItem='';
	
	if(shownLayer && hasClassName(shownLayer, 'nav3'))
		removeClass(shownLayer, 'on');
		
	if(shownLayer){
		if(switch_timeout[shownLayer.id]) clearTimeout(switch_timeout[shownLayer.id]);
		scrollMenu(shownLayer.id, 'in', 4);
	}
	shownLayer=null;
	
	// un-hide hid elements for everlapping's sake
	unhide_overlapped();
}

function care_overlap(ele){	//if shown layer overlaps certain elements, hide those elements
	if(bw && !bw.ie) return;	//only IE needs care for select boxes
	var selects = document.getElementsByTagName('SELECT');
	for(var i=0; i<selects.length; i++){
		var c = selects[i];
		if(c && ifOverlap(c, ele))	{
			c.style.visibility='hidden';
			c.setAttribute('hiddenFromCover', 'true');
		}
	}
}

function unhide_overlapped(){	//unhide elements previously hid because of overlapping with a layers
	if(bw && !bw.ie) return;	//only IE needs care for select boxes
	var selects = document.getElementsByTagName('SELECT');
	for(var i=0; i<selects.length; i++){
		var c = selects[i];
		if(c && c.getAttribute('hiddenFromCover')=='true' && c.style.visibility=='hidden') {
			c.style.visibility='visible';
			c.removeAttribute('hiddenFromCover');
		}
	}
	//overlap_cares = new Array();
}
/*// implement innerText method
if(!bw.ie && !bw.opera && typeof HTMLElement!="undefined"){
	HTMLElement.prototype.innerText getter = function(){
		return this.innerHTML.replace(/<[^>]+>/g,"");
	}

	HTMLElement.prototype.innerText setter = function(txtStr){
		var parsedText = document.createTextNode(txtStr);
		this.innerHTML = "";
		this.appendChild( parsedText );
	}
}*/


/*
example menu
<ul id="m2" class="nav2 corporate">
	<li id="m2-1"><img class="shadow" src="/images/com/menu/m1_shadow.jpg" /><a href=".jsp">m1 1</a></li>
	<li id="m2-2"><a href=".jsp">m1 1</a></li>
</ul>

<ul id="m2-1-m" class="nav3">
	<li id="m2-1-1"><a href=".jsp">m2-3 1 1</a></li>
	<li id="m2-1-2"><a href=".jsp">m2-3 1 1</a></li>
</ul>

*/

//global variables to record which layer and which menu item is being shown
var shownLayer=null;
var shownItem='';
var shownM0=null;