/*---- navigation functions ----*/
/*****
version 0.1
*****/


// background positions for the matrix
	var bgHoverPos = new Array();	        
        bgHoverPos['nav-maintab1'] = "0 0px";
		bgHoverPos['nav-maintab2'] = "0 -71px";
		bgHoverPos['nav-maintab3'] = "0 -142px";
		bgHoverPos['nav-maintab4'] = "0 -213px";
        //home = "0 -284px"; // LEAVE COMMENTED, the numbers are just for reference.
		
	var newBgPos, oldBgPos;
	
	
	
// Set default navigationBackground. Get the active-name from the body-class.	
function getElClass(){
	var activeNavName = document.getElementsByTagName('body')[0];
	var elClass = activeNavName.getAttribute("class"); 
	elClass = elClass? elClass : activeNavName.getAttribute("classname");
	return elClass;
}


	function setNavigation(){

		var elClass = getElClass();
		
		if(elClass == '' || elClass == 'maintabhome'){
			// default state.
			newBgPos = '0 -284px';
			oldBgPos = newBgPos;
			return false;
		}
		/*else if(elClass.indexOf('home') > -1){
			// on the homepage; expand product-tab.
			hoverObj = 'nav-onzeproducten';
			newBgPos = bgHoverPos[hoverObj];
			navObj = document.getElementById(hoverObj).parentNode;
			oldBgPos = newBgPos; // set a new default value, this will be used to reset the navigationBackground on mouseout.	

			// move the background-matrix to the new value
			moveBg(navObj, newBgPos);
			navHover('onzeproducten', 'true');
		}*/
		else{		
			hoverObj = 'nav-' + elClass;
			newBgPos = bgHoverPos[hoverObj];
			navObj = document.getElementById(hoverObj).parentNode;
			oldBgPos = newBgPos; // set a new default value, this will be used to reset the navigationBackground on mouseout.	

			// move the background-matrix to the new value
			moveBg(navObj, newBgPos);
		}
		
	}	
	
	
	// function to swap the hoverstates from the matrix and add mouseover functionality to the DD's to keep them open while hovered.
	function navHover(navObj, flag){
		var dlObj = document.getElementById('mainNavTop').getElementsByTagName('dl')[0];// definition list (DL)
		//var navObjId = navObj.parentNode.id;											// parent-id of hovered link (DT)
		//var navObjDefData = document.getElementById("sub" + navObjId);				// subnav-id (DD to show)
		
		var navObjId = "nav-" +navObj;													// parent-id of hovered link (DT)
		var navObjDefData = document.getElementById("sub" + navObjId);					// subnav-id (DD to show)
		var elClass = getElClass();
        
       
		if(flag == 'false'){
			/*if( (elClass.indexOf('home') > -1) && (navObj == 'onzeproducten') ){
				return false;
			} else {*/
				//---- mouseout behavior ----//
				// reset bgpos of the DL to 0,0;	
				// contract DL to base-height
				// hide the DD
				// remove mouseover- and mouseout behavior from the DD
					newBgPos = oldBgPos;
					dlObj.style.height = '71px';
					navObjDefData.style.display = 'none';
					navObjDefData.removeAttribute('onmouseover');
					navObjDefData.removeAttribute('onmouseout');
			//}
		}else{
		//---- mouseover behavior ----//
		// set bgpos of the DL to a corresponding value from the bgHoverPos-array;
		// expand DL to max navigation height
		// show the DD
		// add mouseover- and mouseout behavior to the DD to hold it
			newBgPos = bgHoverPos[navObjId];
			dlObj.style.height = '283px';
			
			navObjDefData.style.display = 'block';
			navObjDefData.onmouseover = function() {
				navHover(navObj, 'true');
			}
			navObjDefData.onmouseout = function() {
				navHover(navObj, 'false');
			}
		}
        
		// move the background-matrix to the new value
		moveBg(dlObj, newBgPos);
	}
	
// function to move the background-matrix to the new value
function moveBg(obj, pos){
	obj.style.backgroundPosition = pos;
}
	
	
addLoadEvent(function() {
  setNavigation();
});