//call intialize at the end of your html code, so all the html elements are initialized
function initNavtab() {

	setDimensions();
	
	setPosition();
	userEventsInit(); //set up all user events
	window.onresize = setPosition;
}

// main menu name, we assume submenus are named "main menu name"+"SUB"
//menus = new Array("IMMO","JOBS","AUTOS","MARKT")
//menus = new Array("EBALANCE","FINFOX","IMMO","AUTOS", "SINGLES", "VERLAG")
menus = new Array("HOME","UEBER","PROJEKTE","TERMINE","NACHLESE", "ARCHIV", "LINKS", "KONTAKT", "VEREIN", "HILFE", "NEWSLETTER", "SHOP", "BRIEFING" , "AKTUPROJEKT", "ABGESCHLOSSPROJEKT", "TERMINEDAJ", "EXTVERANSTALT", "DEMOS", "ARABIC")
// holds the active menu object
var activeMainMenu = null;
// holds the active submenu object
var activeSubMenu = null; //defines which menu is currently open

// colors for mouseover
var activeColor = "#FF9933"; // aktive Farbe obere Menüführung
var inactiveColor = "#FFCC66"; //inaktive Farbe obere Menüführung
//var activeColor = "#CCEEEE";
//var inactiveColor = "#CCCCCC";

// holds the navtab left position
var leftPos;
// the margin of the main menu. it's the left position of the main menu relatively to the page left border.
var leftMargin = 31;
// page width, wich is used to center the menu
//var pageWidth = 913;
// page width, without middle column
var pageRawWidth = 28;
// spacer minimal width
var spacerMin = 0;
// maximal tab width
var singleTabMaxWidth = 150;
// mozilla scroll bar correction value (for determing windowSize)
var mozillaScrollBarCorr = 15;
// set out id
// uncomment for rollOut-functionality:
var timeoutId;


// set positions
function setPosition() {
	obj = document.getElementById("TABNAV");
	if(obj) {
		if(window.innerWidth) {
			windowSize = window.innerWidth - mozillaScrollBarCorr;
		}	else {
			windowSize = window.document.body.clientWidth
		}
		//old : leftPos = windowSize/2 - pageWidth/2 + leftMargin;
		leftPos = windowSize/2 - (pageRawWidth + tabWidth)/2 + leftMargin;
		if(leftPos < leftMargin+11) leftPos = leftMargin+11;//minimal left position
		//reposition active SubMenu on resize
		if(activeSubMenu) {
			obj = document.getElementById(activeSubMenu);
			if (obj && activeMainMenu) {
				obj.style.left = leftPos + activeMainMenu.menuIndex * activeMainMenu.offsetWidth;
			}
		}
	}
}

// event handler of the submenu
function menuOver() {
	document.onclick = null;
	if (document.all) event.cancelBubble=true;
	// uncomment for rollOut-functionality: 
	if(timeoutId) {
		clearTimeout(timeoutId);
		timeoutId = null;
	}
	/*
	*/
}
      
// event handler of the submenu
function menuOut() {
	document.onclick = eventHideMenu;
	if (document.all) event.cancelBubble=true;
	// uncomment for rollOut-functionality: 
	timeoutId = setTimeout(eventHideMenu, 100);
}

// event handler for the main menu
function eventShowMenu(e) {
	//turns on the display for nav menus

	// uncomment for rollOut-functionality: 
	if(timeoutId) {
		clearTimeout(timeoutId);
		timeoutId = null;
	}
	/*
	*/

	eventHideMenu();	
	activeMainMenu = this;
//	alert("offsetTop = " + activeMainMenu.offsetTop);
//	alert("offsetHeight = " + activeMainMenu.offsetHeight);
	this.style.backgroundColor = activeColor;
	activeSubMenu = this.id+"SUB"
	obj = document.getElementById(activeSubMenu);
	if (obj) {
		obj.style.left = leftPos + this.menuIndex * this.offsetWidth;
		//obj.style.left = leftPos + this.menuIndex * singleTabWidth;
		obj.style.visibility = "visible";
	} else {
		activeSubMenu = null;
	}
	document.onclick = eventHideMenu;
	event.cancelBubble=true;
}

// uncomment for rollOut-functionality: 
function tryEventHideMenu() {
	timeoutId = setTimeout(eventHideMenu, 100);
}
/*
*/

// event handler for the main menu
function eventHideMenu() {
	//hides nav menus and pop ups
	document.onclick = null;
	if (activeSubMenu != null)	{
		obj = document.getElementById(activeSubMenu);
		obj.style.visibility = "hidden";
	}
	if (activeMainMenu != null) {
		activeMainMenu.style.backgroundColor = inactiveColor;
	}
}

function eventGoToHref(e) {
	var targ;
	
	if (e.target) {
		targ = e.target;
	} else {
		if (e.srcElement) {
			targ = e.srcElement;
		}
	}
	if (targ.nodeType == 3) { // defeat Safari bug
	   targ = targ.parentNode;
	}
	var tname;
	tname=targ.tagName;
//	alert("You clicked on a " + tname + " element.");
	if (tname == "TD") {
//		alert("do only td");
		obj = targ.firstChild;
		while(obj != null) {
//			alert("got element " + obj.nodeName);
			if (obj.nodeName == "A") {
//				alert("href = " + obj.href);
				if (obj.target.length > 0) {
//					alert("target = " + obj.target);
					window.open(obj.href, "_blank");
				} else {
					window.location.href = obj.href;
				}				
			}
			obj = obj.nextSibling;
		}
	}
}


// inits the event handler, call this function just once
function userEventsInit() {
  for (i=0; i < menus.length; i++) {
    obj = document.getElementById(menus[i]);
//alert('found menu ' + obj);
		//	obj.onclick = eventShowMenu;
		obj.onmouseover = eventShowMenu;
		// uncomment for rollOut-functionality: 
		obj.onmouseout = tryEventHideMenu;
		obj.onclick = eventGoToHref;
    	obj.menuIndex = i;

    	obj = document.getElementById(menus[i]+"SUB");
   		if(obj) {
  	 		obj.onmouseover = menuOver;
	    	obj.onmouseout = menuOut;
			obj.onclick = eventGoToHref;
    	}
  	}
}

// ____________________________________________________________________________

function setDimensions() {
	
	//tabWidth = document.getElementById('TABWIDTH').width;
	tabWidth = document.getElementById('navTabTableId').offsetWidth;
	/*
alert('start');
	for(i=0; i < menus.length; i++) {
		menuWidth = document.getElementById(menus[i]).offsetWidth;
		alert('menu [' + menus[i] + '] offsetWidth = ' + menuWidth);
	}
alert('end');
    */
/*
	document.getElementById('navTabTableId').width = tabWidth;
	
	//get Tab width...
	if((tabWidth - (menus.length * singleTabMaxWidth)) > spacerMin) {
		singleTabWidth = singleTabMaxWidth;
		spacerMin = tabWidth - (menus.length * singleTabWidth);
	}
	else {
		singleTabWidth = Math.floor((tabWidth - spacerMin) / menus.length);
		spacerMin = tabWidth - (menus.length * singleTabWidth);
	}
	//set widths
	for (i=0; i < menus.length; i++) {
		//document.getElementById(menus[i]).style.width = singleTabWidth;
//		document.getElementById(menus[i]).width = singleTabWidth;
	}
	//document.getElementById('SPACERTAB').style.width = spacerMin;
*/

}