/* author fde/emakina */

/* 	ids & classes used programmatically */
var cssjs = {
	SITENAV: 'sitenav',				// #id of level 0 nav.
	NAVCONTAINER: '', 		// #id of container if there is 'position:relative' containing element
	SUBMENUITEM: 'submenu',			// CSS class for menu item with child menus
	SUBMENUITEM_ON: 'submenufocus'	// CSS class for menu item with child menus, active
}

var uiNav = {

	containerpos: null,
	delayhide: null,
	menulayer: [null,null,null,null,null],
	menufocus: [null,null,null,null,null],
	MAXLEVEL:5,

	initialize: function(sNavId) {
		// get offsets from relative positioned container, if any
		if (cssjs.NAVCONTAINER) {
			this.containerpos = this.findPosition($(cssjs.NAVCONTAINER));
		} else {
			this.containerpos = [0,0];
		}

		var oNav = $(sNavId);
		this.attach(oNav);
		
		// GSK menu specific > attach events to the level2 background space around the links
		var oParentL2 = $('sitenav-l2');
		var aDropdowns = dom.getElementsByClassName(oParentL2,'div','dropmenudiv');
		var i;
		for (i=0;i<aDropdowns.length;i++) {
			aDropdowns[i].onmouseover = uiNav.dropdowndiv_mouseover;
			aDropdowns[i].onmouseout = uiNav.mouseout;
		}
	},

	// attach navigation events
	attach: function(oParent) {		
		var oas = oParent.getElementsByTagName('a');
		var i;
		for (i=0;i<oas.length;i++) {
			var oA = oas[i];
			oA.onmouseover = uiNav.mouseover;
			oA.onmouseout = uiNav.mouseout;
			// add the arrow icon to menu items with children
			if (this.getsubmenu(oA)) {
				oA.className = cssjs.SUBMENUITEM;
			}
		}
	},
	
	// get the navigation level, 0 = root menu bar
	getlevel: function(oA) {
		var parentDiv = dom.getParent(oA,'div');		
		if ( /level1/.test(parentDiv.className) )
			return 1;
		else if ( /level2/.test(parentDiv.className) )
			return 2;
		else if ( /level3/.test(parentDiv.className) )
			return 3;
		return 0;
	},

	getsubmenu: function(oA) {
		var sLayerId = oA.getAttribute("rel");
		if (sLayerId) {
			return $(sLayerId);
		}
		return null;
	},

	mouseover:function() { uiNav.mouseover_f(this);	},
	mouseover_f:function(oA) {
		
		var iLevel = this.getlevel(oA);
		var oSubLayer = this.getsubmenu(oA);

		// cancel menu out
		if (this.delayhide) {
			clearTimeout(this.delayhide);
			this.delayhide = null;
		}
		
		// drop submenus that lost focus,
		//  if there is a submenu and the submenu didn't change (another dropdown), then maintain it
		var hidefrom = iLevel+1;
		if (oSubLayer && oSubLayer==this.menulayer[hidefrom])
			hidefrom++; // maintain the submenu if any
		this.hide(hidefrom);

		// clear previous submenu focus if any
		if (this.menufocus[iLevel] && this.menufocus[iLevel]!=oA) {
			this.menufocus[iLevel].className = cssjs.SUBMENUITEM;
		}

		// open a sub menu ?
		if (oSubLayer) {
			
			// set submenu focus
			oA.className = cssjs.SUBMENUITEM_ON;
			this.menufocus[iLevel] = oA;
			
			// clear submenu's last submenu focus if any
			if (this.menufocus[iLevel+1]) {
				this.menufocus[iLevel+1].className = cssjs.SUBMENUITEM;
				this.menufocus[iLevel+1] = null;
			}
			
			// position submenu down if root level, or to the side
			/* fde: level2 appears within #sitenav-l2, no more dropdown
			if (iLevel<1) {
				var oLI = dom.getParent(oA,'li');
				var pos = this.findPosition(oLI);
				var oUL = dom.getParent(oA,'ul');
				var posUL = this.findPosition(oUL);
				pos[0] = pos[0]-this.containerpos[0];
				pos[1] = posUL[1]-this.containerpos[1]+oUL.offsetHeight+1;
			} else {
				var oTD = dom.getParent(oA,'table');
				var pos = this.findPosition(oA);
				pos[0] = pos[0]-this.containerpos[0]+oTD.offsetWidth+1;
			}
			*/
			var pos = [0,0];
			
			uiNav.attach(oSubLayer);
			uiNav.displayLayer(oSubLayer, pos, iLevel+1);
		}

	},

	// prevent the dropdown to disappear when pointing at the empty space surrounding the links
	dropdowndiv_mouseover:function() {
		// just cancel the hide event like above
		if (uiNav.delayhide) {
			clearTimeout(uiNav.delayhide);
			uiNav.delayhide = null;
		}
	},
	
	mouseout:function() { uiNav.mouseout_f(this); },
	mouseout_f:function(oA) {
		var iLevel = this.getlevel(oA);
		if (!uiNav.delayhide) {
			this.delayhide = setTimeout("uiNav.delayedhide()", 500);//msec
		} else {
			// it gets here with a mouseout event also on the parent div
		}
	},
	

	// pos = [x, y]
	displayLayer: function(oLayer, pos, iLevel) {
		oLayer.style.left = pos[0]+'px';
		oLayer.style.top = pos[1]+'px';
		oLayer.style.position = 'absolute';
		oLayer.style.display = 'block';
		oLayer.style.visibility = 'visible';
		this.menulayer[iLevel] = oLayer;
	},

	delayedhide:function() {
		this.hide(1);
		this.delayhide = null;
	},

	// hide menu and its children starting from given level
	hide: function(iLevel) {
		var i;
		for (i=iLevel;i<this.MAXLEVEL;i++)
		{
			var oLayer = this.menulayer[i];
			if (oLayer) {
				oLayer.style.display = 'none';
				this.menulayer[i] = null;
			}
		}
		// clear the focus on the menu head		
		if (iLevel<=1) {
			if (this.menufocus[0]) {
				this.menufocus[0].className = '';
			}
		}
	},

	findPosition: function(oLink) {
		if (oLink.offsetParent){
			for (var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent){
				posX += oLink.offsetLeft;
				posY += oLink.offsetTop;
			}
			return [posX, posY];
		}else{
			return [oLink.x, oLink.y];
		}
	}

}

dom.addEvent(window, 'load', function(){uiNav.initialize(cssjs.SITENAV)} );