// JAVASCRIPT 3-TIER NAVIGATIONSMENÜ
//Arrays erzeugen
menu_main = new Array(); //alle Ebene1-Menüpunkte = main
menu_sub = new Array(); //alle Ebene2-Menüpunkte = sub
menu_sub_2 = new Array(); //alle Ebene3-Menüpunkte = sub_2

//allgemeine Variablen definieren
//Tabellen-Parameter
var table_cellspacing = 2;
var td_cellspacing = 0;
var table_border = 0;
var table_cellpadding = 0;
var table_width = 110;
var td_height = 22;

//Tabellen-Farben
var main_bgcolor = "#1E73D2";
var sub_bgcolor = "#1E73D2";
var sub_2_bgcolor = "#1E73D2";
var main_bgcolor_sel = "#94D9FC";
var sub_bgcolor_sel = "#94D9FC";
var sub_2_bgcolor_sel = "#94D9FC";
var dummy_bgcolor = "#94D9FC";

//Weiterleitungspfeile
var td_arrow_width = 10;
var arr_w = "<img src='arrow_white.gif'>";
var edge = "eck.jpg";

//Abstände der Menü-Ebenen
var y_distance = 2;
var x_distance = 0;

//Timer zum automatischen Schließen der sub-menus
var timer;

//Menüpunkte in Arrays eintragen
//	addMain(title, url, down);
//		addSub(title, url, down);
//			addSub_2(title, url, down);
// title = der angezeigte Text des Punktes im Menü
// url = der Hyperlink zur Seite (0 steht für keinen Link)
// down = zeigt ob ein weiteres Untermenü folgt (0 = weiteres Untermenü / 1 = letzte Menüebene)

addMain("Home", "index.html", 0);
addMain("News", "news.html", 0);
addMain("Polynesien", 0, 1);
	addSub("Geschichte", "geschichte.html", 0);
	addSub("Geographie", "geographie.html", 0);
addMain("Unterricht", 0, 1);
	addSub("Tänze", "taenze.html", 0);
	addSub("Tanzkurse", "kurse.html", 0);
	addSub("Workshops", "workshops.html", 0);
	addSub("Einzelunterricht", "einzeln.html", 0);
	addSub("Preise", "preise.pdf", 0);
	addSub("Anmeldlung", "anmeld.html", 0);
addMain("Engagieren", "engagieren.html", 0);
addMain("Reisedienst", "reise.html", 0);
addMain("Fotogalerie", "galerie.html", 0);
addMain("Shop", "shop.html", 0);
addMain("über mich", "ich.html", 0);
addMain("AGB", "AGB.html", 0);
addMain("Impressum", "impress.html", 0);

//Funktionen zum Eintragen der Menüpunkte in die Arrays:
//Array(title, url, down);
function addMain(title, url, down){
	i = menu_main.length;
	menu_main[i] = new Array(title, url, down); // erzeugt ein neues Array für das Main-menü und füllt es
	menu_sub[i] = new Array(); // erzeugt ein neues Array für die Sub-menüs
	menu_sub_2[i] = new Array(); // erzeugt ein neues Array für die Sub-2-menüs
}

function addSub(title, url, down){
	j = menu_sub[i].length;
  	menu_sub[i][j] = new Array(title, url, down); // erzeugt ein neues Array für das Sub-menü und füllt es
  	menu_sub_2[i][j] = new Array(); // erzeugt ein neues Array für die Sub-2-menüs
}

function addSub_2(title, url, down){
	k = menu_sub_2[i][j].length;
  	menu_sub_2[i][j][k] = new Array(title, url); // erzeugt ein neues Array für das Sub-2-menü und füllt es
}

function clearTimer(){ // löscht den timer
	if(timer){clearTimeout(timer)}
}

function timerHide(time){ // iniziiert den timer mit einer Laufzeit von (time*1000) bis die Funktion hideAll() aufgerufen wird
	//time = Faktor für die Zeitdauer (1-100)
	timer = setTimeout("hideAll()",(time*100))
}

function hideAll(level){
	//Schließt alle Sub-menüs und Sub-2-menüs oder nur die Sub-2-menüs und färbt die Main-menüs auf die Originalfarbe
	// level:
	//bei "level_main" werden alle Sub-menüs und Sub-2-menüs geschlossen und die Main-menüs gefärbt
	//bei "level_sub" werden alle Sub-2-menüs geschlossen und nichts gefärbt
	//bei "level_sub_2" wird nichts geschlossen und nichts gefärbt
	for(i=0;i<menu_main.length;i++){
		if(level != "level_sub" && level != "level_sub_2"){
			document.getElementById("Main-"+i).style.backgroundColor = main_bgcolor;
		}
		for(j=0;j<menu_sub[i].length;j++){
			if(menu_sub_2[i][j].length>0){
				if(level != "level_sub_2"){
					document.getElementById("SubSub-"+i+'-'+j).style.visibility = "hidden";
				}
				for(k=0;k<menu_sub_2[i][j].length;k++){
					document.getElementById("SubSub-"+i+'-'+j+'-'+k).style.backgroundColor = sub_2_bgcolor;
				}
			}
			if(level != "level_sub_2"){
				document.getElementById("Sub-"+i+'-'+j).style.backgroundColor = sub_bgcolor;
			}
		}				
		if(level != "level_sub" && level != "level_sub_2"){        		
			document.getElementById("Sub-"+i).style.visibility = "hidden";
		}
	}
}

function getLink(element){ // Auch beim Drücken der Tabelle, wo der Link eigentlich nicht mehr steht wird der Link angesprochen
	// element = MainLink-0, SubLink-1-5, SubSubLink-2-4-5
  	if(document.getElementById){
  		document.getElementById(element).click();
	}
}

function getOffset(obj, dim) { // Berechnen der Koordinaten, Abstände und Größen für die aufscheinenden Sub-Menüs und Sub-2-Menüs
	// obj = Main-0, Sub-1-5, SubSub-2-4-5
	if(dim=="left"){ // linker Abstand zum Browser-Rand
		oLeft = obj.offsetLeft;  
		while(obj.offsetParent!=null){ 
			oParent = obj.offsetParent;    
			oLeft += oParent.offsetLeft;
			obj = oParent;	
		}
  	return oLeft;
	}
	else if(dim=="top"){ // top-Abstand zum Browser-Rand
		oTop = obj.offsetTop;
		while(obj.offsetParent!=null){ 
			oParent = obj.offsetParent;
			oTop += oParent.offsetTop;
			obj = oParent;	
		}
		return oTop;
	}
	else if(dim=="width"){ // Länge des anzuzeigenden Sub-menüs
		oWidth = obj.offsetWidth;
		return oWidth;
	}  
	else if(dim=="height"){ // Höhe des anzuzeigenden Sub-menüs
		oHeight = obj.offsetHeight;
		return oHeight;
	}
}

function showSub(obj,id){ // Färbt das selectierte Main-menü und öffnet das zugehörige Sub-menü
	// obj = Main
	// Main-0
	// Sub-0
	// alert(obj+'-'+id);
	document.getElementById(obj+'-'+id).style.backgroundColor = main_bgcolor_sel; // Färben des selectierte Main-menüs
	// Koordinaten und Abmaße für die Positionierung holen:
	getOffset(eval('document.getElementById("'+obj+'-'+id+'")'),"left");
	getOffset(eval('document.getElementById("'+obj+'-'+id+'")'),"top");
	getOffset(eval('document.getElementById("'+obj+'-'+id+'")'),"height");
	getOffset(eval('document.getElementById("'+obj+'-'+id+'")'),"width");
	// Sub-menü positionieren und anzeigen:
	document.getElementById("Sub-"+id).style.left = oLeft+oWidth-table_cellspacing+y_distance+"px";
	document.getElementById("Sub-"+id).style.top = oTop-table_cellspacing+x_distance+"px";
	document.getElementById("Sub-"+id).style.visibility="visible";
}

function showSub_2(obj, id, subid){ // Färbt das selectierte Sub-menü und öffnet das zugehörige Sub-2-menü
	// obj = Sub
	// Sub-0-0
	// SubSub-0-0
	// alert(obj+'-'+id+'-'+subid);
	document.getElementById(obj+'-'+id+'-'+subid).style.backgroundColor = sub_bgcolor_sel; // Färben des selectierte Sub-menüs
	// Koordinaten und Abmaße für die Positionierung holen:
	getOffset(eval('document.getElementById("'+obj+'-'+id+'-'+subid+'")'),"left");
	getOffset(eval('document.getElementById("'+obj+'-'+id+'-'+subid+'")'),"top");
	getOffset(eval('document.getElementById("'+obj+'-'+id+'-'+subid+'")'),"height");
	getOffset(eval('document.getElementById("'+obj+'-'+id+'-'+subid+'")'),"width");
	// Sub-2-menü positionieren und anzeigen:
	document.getElementById("SubSub-"+id+'-'+subid).style.left = oLeft+oWidth-table_cellspacing+y_distance+"px";
	document.getElementById("SubSub-"+id+'-'+subid).style.top = oTop-table_cellspacing+x_distance+"px";
	document.getElementById("SubSub-"+id+'-'+subid).style.visibility="visible";
}

function selectSub_2(id, subid, subsubid){ // Hervorheben des Sub-2-menüs bei MouseOver (Farbe ändern)
	// SubSub-0-0-0
	document.getElementById("SubSub-"+id+'-'+subid+'-'+subsubid).style.backgroundColor = sub_2_bgcolor_sel;
}

function showMenu(){ // Hauptfunktion: Aufrufen der Funktionen zum Erstellen aller Main-, Sub- und Sub-2-menüs
	buildMain();
	buildSub();
	buildSub_2();
}

function buildDummy(){ // Erstellen des Dummys über dem eigentlichen Menü
  build_main += '<tr><td bgcolor="'+dummy_bgcolor+'" height="'+td_height+'" width="'+table_width+'">';
	build_main += '</td></tr>';
}

function buildEndDummy(){ // Erstellen des Dummys über dem eigentlichen Menü
 	build_main += '<tr><td width="100%">';
	build_main += '<table width="100%" height="'+td_height+'" border="'+table_border+'" cellspacing="'+td_cellspacing+'" cellpadding="'+table_cellpadding+'">';
	build_main += '<tr><td bgcolor="'+dummy_bgcolor+'" width="100%"></td><td align="right" width="'+td_height+'"><img src="'+edge+'" width="'+td_height+'" height="'+td_height+'"></td></tr></table>';
	build_main += '</td></tr>';
}

function buildMain(){ // Erstellen der Main-menüs und vergeben der zugehörigen ids
 	build_main = '<table width="'+table_width+'" border="'+table_border+'" cellpadding="'+table_cellpadding+'" cellspacing="'+table_cellspacing+'">';
	buildDummy();
 	for (x=0;x<menu_main.length; x++){
		build_main += '<tr><td bgcolor="'+main_bgcolor+'" ';
		if(menu_main[x][1] != 0 && menu_main[x][2] != "_blank"){ // Überprüft ob der Menüpunkt einen Hyperlink hat oder nicht, wenn ja wird die Funktion getLink(\'MainLink-'+x+'\') eingefügt
			build_main += 'onclick="getLink(\'MainLink-'+x+'\')"';
		}		
		build_main += ' style="cursor:hand;">';
		build_main += '<div id="Main-'+x+'" onMouseOver="clearTimer(); hideAll(\'level_main\'); showSub(\'Main\','+x+');" onMouseOut="timerHide(10); ">';
		build_main += '<table width="100%" height="'+td_height+'" border="'+table_border+'" cellspacing="'+td_cellspacing+'" cellpadding="'+table_cellpadding+'">';
		build_main += '<tr><td nowrap>';
		if(menu_main[x][1] != 0){ // Wenn der Menüpunkt einen Hyperlink hat wird hier der Link eingefügt
			build_main += '<a id="MainLink-'+x+'" href="'+menu_main[x][1]+'" target="';
			if(menu_main[x][2] == "_blank"){ //Abfrage ob es ein _self- oder ein _blank-Link ist
				build_main += '_blank';
			}else{
				build_main += '_self';
			}	
			build_main += '" style="text-decoration:none">';
			build_main += '<font id="m_font"><strong>&nbsp;&nbsp;'+menu_main[x][0]+'&nbsp;&nbsp;</strong></font></a></td>';
		}else{
			build_main += '<font id="m_font"><strong>&nbsp;&nbsp;'+menu_main[x][0]+'&nbsp;&nbsp;</strong></font></td>';
		}
		if(menu_main[x][2] == 1){ // Abfrage ob ein Sub-menü zu diesem Main-menüpunkt gehört und ob der Pfeil dargestellt wird
			build_main += '<td width="'+td_arrow_width+'" nowrap>'+arr_w+'</td>';
		}		
		build_main += '</tr></table></div></td></tr>';
  	}
	buildEndDummy();
	build_main += '</table>';
  	document.writeln(build_main); // Ausgabe der Tabelle
}

function buildSub(){ // Erstellen der Sub-menüs und vergeben der zugehörigen ids
	for(x=0; x<menu_main.length; x++){
		build_sub = '<div id="Sub-'+x+'" style="position:absolute; left:0; top:0; visibility:hidden">';
		if(menu_sub[x].length>0){ // Abfrage ob für das anvisierte Main-menü ein zugehöriges Sub-menü existiert
			build_sub += '<table width="'+table_width+'" border="'+table_border+'" cellpadding="'+table_cellpadding+'" cellspacing="'+table_cellspacing+'" style="cursor:hand;">';
			for(y=0; y<menu_sub[x].length; y++){
				build_sub += '<tr><td bgcolor="'+sub_bgcolor+'"';
				if(menu_sub[x][y][1] != 0 && menu_sub[x][y][2] != "_blank"){ // Überprüft ob der Menüpunkt einen Hyperlink hat oder nicht, wenn ja wird die Funktion getLink(\'SubLink-'+x+'-'+y+'\') eingefügt
					build_sub += 'onclick="getLink(\'SubLink-'+x+'-'+y+'\')"';
				}		
				build_sub += '>';
				build_sub += '<div id="Sub-'+x+'-'+y+'" onMouseOver="clearTimer(); hideAll(\'level_sub\'); showSub_2(\'Sub\', '+x+', '+y+');" onMouseOut="timerHide(10);">';
				build_sub += '<table width="100%" height="'+td_height+'" border="'+table_border+'" cellspacing="'+td_cellspacing+'" cellpadding="'+table_cellpadding+'">';
				build_sub += '<tr><td nowrap>';
				if(menu_sub[x][y][1] != 0){ // Wenn der Menüpunkt einen Hyperlink hat wird hier der Link eingefügt
					build_sub += '<a id="SubLink-'+x+'-'+y+'" href="'+menu_sub[x][y][1]+'" target="';
					if(menu_sub[x][y][2] == "_blank"){ //Abfrage ob es ein _self- oder ein _blank-Link ist
						build_sub += '_blank';
					}else{
						build_sub += '_self';
					}	
					build_sub += '" style="text-decoration:none">';
					build_sub += '<font id="m_font"><strong>&nbsp;&nbsp;'+menu_sub[x][y][0]+'&nbsp;&nbsp;</strong></font></a></td>';
				}else{
					build_sub += '<font id="m_font"><strong>&nbsp;&nbsp;'+menu_sub[x][y][0]+'&nbsp;&nbsp;</strong></font></td>';
				}
				if(menu_sub[x][y][2] == 1){ // Abfrage ob ein Sub_2-menü zu diesem Sub-menüpunkt gehört und ob der Pfeil dargestellt wird
					build_sub += '<td width="'+td_arrow_width+'" nowrap>'+arr_w+'</td>';
				}
				build_sub += '</tr></table></div></td></tr>';
			}
			build_sub += '</table>';
		}
		build_sub += '</div>';
		document.writeln(build_sub); // Ausgabe der Tabelle
	}
}

function buildSub_2(){ // Erstellen der Sub-2-menüs und vergeben der zugehörigen ids
	teil_init = false;
	werk_count = 0;
  	for(x=0; x<menu_main.length; x++){
		for(y=0; y<menu_sub[x].length; y++){
			build_sub_2 = '<div id="SubSub-'+x+'-'+y+'" style="position:absolute; left:0; top:0; visibility:hidden">';
			if(menu_sub_2[x][y].length>0){ // Abfrage ob für das anvisierte Sub-menü ein zugehöriges Sub-2-menü existiert
				build_sub_2 += '<table border="'+table_border+'" cellpadding="'+table_cellpadding+'" cellspacing="'+table_cellspacing+'" style="cursor:hand;">';
				if(menu_sub[x][y][1] == 2){ //Abfrage ob das folgende Sub_2-Menü geteilt werden soll
					teil_init = true;
				}else{
					teil_init = false;
				}
				for(z=0; z<menu_sub_2[x][y].length; z++){
					build_sub_2 += '<td bgcolor="'+sub_2_bgcolor+'" ';
					if(menu_sub_2[x][y][z][1] != 0 && menu_sub_2[x][y][z][2] != "_blank"){ // Überprüft ob der Menüpunkt einen Hyperlink hat oder nicht, wenn ja wird die Funktion getLink(\'SubSubLink-'+x+'-'+y+'-'+z+'\') eingefügt
						build_sub_2 += 'onclick="getLink(\'SubSubLink-'+x+'-'+y+'-'+z+'\')"';
					}
					build_sub_2 += '>';
					build_sub_2 += '<div id="SubSub-'+x+'-'+y+'-'+z+'" onMouseOver="clearTimer(); hideAll(\'level_sub_2\'); selectSub_2('+x+','+y+','+z+');" onMouseOut="timerHide(10);">';
					build_sub_2 += '<table width="100%" height="'+td_height+'" border="'+table_border+'" cellspacing="'+td_cellspacing+'" cellpadding="'+table_cellpadding+'">';
					build_sub_2 += '<tr><td nowrap>';
					build_sub_2 += '<a id="SubSubLink-'+x+'-'+y+'-'+z+'" href="'+menu_sub_2[x][y][z][1]+'" target="';
					if(menu_sub_2[x][y][z][2] == "_blank"){ //Abfrage ob es ein _self- oder ein _blank-Link ist
						build_sub_2 += '_blank';
					}else{
						build_sub_2 += '_self';
					}	
					build_sub_2 += '" style="text-decoration:none">';
					build_sub_2 += '<font id="m_font"><strong>&nbsp;&nbsp;'+menu_sub_2[x][y][z][0]+'&nbsp;&nbsp;</strong></font>';
					build_sub_2 += '</a></td></tr></table></div></td>';
					if(teil_init == true && werk_count >= 1){ // Unterteilung einbauen, wenn sub_2-menü geteilt werden soll und2 zellen nebeneinander sind
						build_sub_2 += '</tr><tr>';
						werk_count = 0;
					}else if(teil_init == true){
						werk_count++;
					}else{
						build_sub_2 += '</tr><tr>';
					}
				}
				build_sub_2 += '</tr></table>';
			}
			build_sub_2 += '</div>';
			document.writeln(build_sub_2); // Ausgabe der Tabelle
		}
	}
}