// Folgendes Javascript ist zuständig für den Wechsel des Quadrates beim
// Mouseover und Mouseout in der Navigationsleiste; notwendig, da der
// Internet Explorer nicht auf li:hover reagiert.
// Das JavaScript sollte in eine externe Datei untergebracht werden um
// dort die Bilder ändern zu können, sofern notwendig
// TODO: mal checken, ob man die Funktion direkt mit den CSS verknüpfen
// kann. 

// Variable, die den Pfad zu den Bildern festlegt.
// Bilder, die vom gesamten Unternehmen genutzt werden koennen, z.B. das
// Fraunhofer Logo, das (at)-Zeichen, die Pfeilgrafiken der Links, werden 
// von mir standardmaessig im Ordern "images" abgelegt. Andere Grafiken
// der einzelnen Abteilungen sollten in eigenen Ordnern abgelegt werden.
// "http://www.igd.fraunhofer.de/igd-a8/zms_igd_a8/images"
var img_folder = "http://www.igd.fraunhofer.de/igd-a8/images";

// Funktionen zur Aenderung der Grafiken der Hauptnavigation; muss extra 
// erfasst werden, da dort Listen verwendet werden und immer das Listensymbol
// durch ein anderes beim Over-Effekt ersetzt wird.
function li_over(li_id, bild_neu) {
	document.getElementById(li_id).style.listStyleImage = 'url('+img_folder+'/'+bild_neu+')';
	//alert(document.getElementById(li_id).attributes[2].nodeValue);
	//alert("Bildpfad: "+document.getElementById(li_id).style.listStyleImage);
	//alert("Style? "+document.getElementById(li_id).getAttribute('style'));
	}
function li_out (li_id, bild_alt) {
	if(document.getElementById(li_id).getAttribute('class')=="selected") {
		document.getElementById(li_id).style.listStyleImage = 'url('+img_folder+'/quad_red.gif)';
	} else {
		document.getElementById(li_id).style.listStyleImage = 'url('+img_folder+'/'+bild_alt+')';	//
		//alert("Bildpfad: "+document.getElementById(li_id).style.listStyleImage);
		}
	}

// Funktionen zum Mouseover bei den Seitenlinks oder anderen Grafiken.
// Uebergeben werden immer der Name des Bildes das geaendert werden soll. Der 
// Name des Bildes ist dem IMG-Tag (Attribut: name="") zu entnehmen. 
// bild_neu bzw. bild_alt ist jeweils der Name der Grafik, die neu gesetzt bzw. 
// wieder gesetzt werden soll.
function img_over (img_name, bild_neu) {
	document.getElementById(img_name).src = ""+img_folder+"/"+bild_neu;	
	// ACHTUNG: Die Version document.images ist veraltet, da XHTML 1.0 strict
	// das name Attribut nicht mehr unterstützt.
	// document.images[img_name].src = "IMAGES/"+bild_neu;	
	}

function img_out (img_name, bild_alt) {
	document.getElementById(img_name).src = ""+img_folder+"/"+bild_alt;	
	}
// Funktion zum Preloading der Listengrafiken, damit beim Erstaufruf nicht 
// schwarze Listenpunkte, sondern die entsprechenden Grafiken geladwen
// werden:
function preload_img(){
	// Die (roten und gelben) Dreiecke: ../images/quad_blind.gif
	img_tri_01= new Image(7,7);
	img_tri_01.src = img_folder+"/tri_out.gif";
	img_tri_02= new Image(7,7);
	img_tri_02.src = img_folder+"/tri_over.gif";
	// Die (roten und gelben) Quadrate:
	img_quad_01 = new Image(9,9);
	img_quad_01.src = img_folder+"/quad_blind.gif";	
	img_quad_02 = new Image(9,9);
	img_quad_02.src = img_folder+"/quad_orange.gif";	
	img_quad_03 = new Image(9,9);
	img_quad_03.src = img_folder+"/quad_out.gif";	
	img_quad_04 = new Image(9,9);
	img_quad_04.src = img_folder+"/quad_over.gif";
	img_quad_05 = new Image(9,9);
	img_quad_05.src = img_folder+"/quad_red.gif";
	//alert("Bildpfad Preload: "+img_tri_02.src)
	return;
	}

// Funktion setzt ein rotes Quadrat vor den ausgewaehlten Menuepunkt. Muss
// in jeder Seite individuell festgelegt werden, da damit der Hauptlink
// markiert wird; z.B. wenn man unter Projekte surft, soll immer ein rotes
// Quadrat vor Projekte stehen.
function set_selected(li_id) {
	preload_img();
	document.getElementById(li_id).setAttribute("class", "selected");
	li_out(li_id,'quad_red.gif');
	//document.getElementById(li_id).setAttribute("style", "list-style-image: url("+img_folder+"/quad_red.gif)");
	//alert(document.getElementById(li_id).style.getAttribute("listStyleImage"));	
	/*
	alert(document.getElementById(li_id).attributes.length);
	for(i=0; i<document.getElementById(li_id).attributes.length;i++) {
		alert(document.getElementById(li_id).attributes[i].nodeName+" = "+document.getElementById(li_id).attributes[i].nodeValue); //
		}
	*/
	return;
	}