/**************************************************
 * CNavigation, version 0.12
 * Copyright 2007 Ivengi BV. Benelux
 **************************************************/
/*
CONSTRUCTOR
new CNavigation(DivContainer, menuDelay, position);
DivContainer 			-> ID of the DIV contains all menu items
menuDelay					-> Delay after mouse has left the div before the hide occurs (default: 200)
position					-> position of the menu ('bottom','top','left' or 'right')

FUNCTIONS
hideDiv(divID)			-> Start attempt to close the submenu
showDiv(divID,this)	-> Open the submenu with the divID


###########
# EXAMPLE #
###########

<link rel="stylesheet" href="nav.css" type="text/css" />
<script type="text/javascript" src="CNavigation.js"></script>
<script type="text/javascript">
	var Navigation = new CNavigation('site',200,'bottom');
</script>

<div id="site">		
	<div id="topnavigation" class="navigationtab">
	<ul>
	<li><a href="/kandidaat.php" 	onMouseOut="Navigation.hideDiv('sub_kandidaten');" onMouseOver="Navigation.showDiv('sub_kandidaten',this);" class="sub">Kandidaten</a></li>
	<li><a href="/werkgevers.php" onMouseOut="Navigation.hideDiv('sub_werkgevers');" onMouseOver="Navigation.showDiv('sub_werkgevers',this);" class="sub">Werkgevers</a></li>
	<li><a href="/extra.php" 			onMouseOut="Navigation.hideDiv('sub_extra');" 		 onMouseOver="Navigation.showDiv('sub_extra',this);" 			class="sub">Extra</a></li>
	</ul>
	</div>
			<!-- Kandidaten submenu -->
	<div id="sub_kandidaten" class="submenu">
	<ul>
	<li><a href="k_doel1.php">k_doel1.php</a></li>
	<li><a href="k_doel2.php">k_doel2.php</a></li>
	</ul>		
	</div>
			<!-- Werkgevers submenu -->
	<div id="sub_werkgevers" class="submenu">
	<ul>
	<li><a href="w_doel1.php">w_doel1.php</a></li>
	<li><a href="w_doel2.php">w_doel2.php</a></li>
	</ul>		
	</div>
			<!-- Extra submenu -->
	<div id="sub_extra" class="submenu">
	<ul>
	<li><a href="e_doel1.php">e_doel1.php</a></li>
	<li><a href="e_doel2.php">e_doel2.php</a></li>
	</ul>		
	</div>	
</div>

%%%%%%%%%%%%%%%%%%% nav.css %%%%%%%%%%%%%%%%%%%%
ul {
 list-style-type: none;
}

li {
	float:left;
	display: inline;
}

.sub {
	border: 2px solid #111111;
	margin: 3px;
	display: inline;
	float: left;
}

.submenu {
	position: absolute;
	background-color: #ffffff;
	display: none;
	border: 1px dashed #111111;
	width: 200px;
}

.submenu ul{
	padding: 0px 0px 0px 0px;
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

function CNavigation(DivContainer, menuDelay, position)
{
  this.timer = null;
  this.aMouseOverMenu = new Array();
  this.aMouseOverSubMenu = new Array();
  this.position = position;
  
  this.DivContainer = DivContainer;
  this.menuDelay		= menuDelay;
 
	var _this = this;
	this.addLoadHandler(function(){ _this.NavigationStart(); }); 
}

CNavigation.prototype.showDiv = function(divID,callobject) {
	for (dividarray in this.aMouseOverMenu)
	{
		this.hideSubmenuDiv(dividarray,false);
	}
	this.aMouseOverMenu[divID] = true;
	this.aMouseOverSubMenu[divID] = false;
	var _this = this;
	
	var mainSiteLeftOffset = this.getposOffset(document.getElementById(this.DivContainer),'left');
	var mainSiteTopOffset = this.getposOffset(document.getElementById(this.DivContainer),'top');
	
	var submenudiv = document.getElementById(divID);
	submenudiv.style.display = 'block';
	submenudiv.onmouseover = function(){_this.showDivSubmenu(divID)};
	submenudiv.onmouseout = function(){_this.hideDivSubmenu(divID)};
	
	var framediv = document.getElementById("hidingframe");
	framediv.style.position = 'absolute';
	framediv.style.zIndex = "90";
	framediv.style.display = "block";
	framediv.style.height = submenudiv.clientHeight; 
	framediv.style.width = submenudiv.clientWidth;
	
	
	switch(this.position) {
		case 'right':
			submenudiv.style.left = this.getposOffset(callobject,'left') +  callobject.offsetWidth + callobject.clientWidth + "px";
			submenudiv.style.top = this.getposOffset(callobject,'top') + "px" ;
			framediv.style.left = this.getposOffset(callobject,'left')  +  callobject.offsetWidth + callobject.clientWidth + "px";
			framediv.style.top = this.getposOffset(callobject,'top') + "px" ;
		break;
 		case 'left':
 			submenudiv.style.left = this.getposOffset(callobject,'left') - submenudiv.clientWidth + "px";
			submenudiv.style.top = this.getposOffset(callobject,'top') + "px" ;
			framediv.style.left = this.getposOffset(callobject,'left') - submenudiv.clientWidth + "px";
			framediv.style.top = this.getposOffset(callobject,'top') + "px" ;
		break;
		case 'top':
		 	submenudiv.style.left = this.getposOffset(callobject,'left') + "px";
			submenudiv.style.top = this.getposOffset(callobject,'top')  - submenudiv.clientHeight + "px" ;
			framediv.style.left = this.getposOffset(callobject,'left') + "px";
			framediv.style.top = this.getposOffset(callobject,'top')  - submenudiv.clientHeight + "px" ;
		break;
		default :
   // alert(this.getposOffset(callobject,'top') + "+" + callobject.offsetHeight + "+" + callobject.clientHeight);
			submenudiv.style.left = this.getposOffset(callobject,'left') + "px";
			submenudiv.style.top = this.getposOffset(callobject,'top') + callobject.offsetHeight + "px" ;
			framediv.style.left = this.getposOffset(callobject,'left') + "px";
			framediv.style.top = this.getposOffset(callobject,'top') + callobject.offsetHeight + "px" ;
		break;
	}

	submenudiv.style.zIndex = "91";
	framediv.onmouseout = function(){_this.hideFrameDiv(framediv,divID)};
}

CNavigation.prototype.hideDiv = function(divID) {
	this.aMouseOverMenu[divID] = false;
	var _this = this;
	this.timer = setTimeout(function(){_this.hideSubmenuDiv(divID,true)},this.menuDelay);
}

CNavigation.prototype.showDivSubmenu = function(divID) {
	this.aMouseOverSubMenu[divID] = true;
	clearInterval(this.timer);
}

CNavigation.prototype.hideDivSubmenu = function(divID) {
	this.aMouseOverSubMenu[divID] = false;
	var _this = this;
	this.timer = setTimeout(function(){_this.hideSubmenuDiv(divID,true)},this.menuDelay);
}

CNavigation.prototype.hideFrameDiv = function(framediv,divID) {
	var goHide = true;
	for (var i in this.aMouseOverSubMenu) 
	{
		if (this.aMouseOverSubMenu[i]) {
			goHide = false;
		}
	}
	for (var j in this.aMouseOverMenu) 
	{
		if (this.aMouseOverMenu[j]) {
			goHide = false;
		}
	}
	if (goHide) {
		if(document.getElementById(divID).style.display == "none") {
			document.getElementById("hidingframe").style.display = 'none';
		}
	}
}

CNavigation.prototype.style2num = function(value) {
	if(value)
		return (+value.substring(0,value.search(/\D/)));
	else
		return 0;
}

CNavigation.prototype.hideSubmenuDiv = function(divID,bIFrame) {
	if((!this.aMouseOverSubMenu[divID]) && (!this.aMouseOverMenu[divID])) {
		document.getElementById(divID).style.display = 'none';
		this.hideFrameDiv(document.getElementById("hidingframe"),divID);
	}
}

CNavigation.prototype.getposOffset = function(what, offsettype){
	var site = document.getElementById(this.DivContainer);	
	var totaloffset=(offsettype=="left")? what.offsetLeft - site.offsetLeft : what.offsetTop;
	var parentEl=what.offsetParent;
	while (parentEl!=null){
		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
		parentEl=parentEl.offsetParent;
	}
		
	return totaloffset;
}

CNavigation.prototype.NavigationStart = function()
{
	 var aElements = document.getElementById(this.DivContainer);
	 
	 // Cnavigation hidingframe staat in footer template
}


CNavigation.prototype.addLoadHandler = function(handler)
{
	if(window.addEventListener)
	{
		window.addEventListener("load",handler,false);
	}
	else if(window.attachEvent)
	{
		window.attachEvent("onload",handler);
	}
	else if(window.onload)
	{
		var oldHandler = window.onload;
		window.onload = function piggyback()
		{
			oldHandler();
			handler();
		};
	}
	else
	{
		window.onload = handler;
	}
}