/** 
*
* Dropdownmenue für Grafiken
* mit Rollovereffekt für alle Ober- und Unternavigationspunkte
* mit möglichem aktiven Ober- und Unternavigationspunkt
*
* von Marc Wittenbrink
*
*
* Aufbau im HTML:
* ---------------
* Jede Menügruppe (Obernavigationpunkt + Unterpunkte) liegt in einem DIV der
* Klasse "nav". Dieser DIV hat die ID "nav" + Seitenname (z.B. "navhome").
* In dem DIV liegt die Grafik für den Hauptnavigationspunkt, sowie ein weiterer
* DIV mit den Unterpunkten. Die Grafik für den Hauptnavigationspunkt hat die
* ID des DIVs der Menügruppe, gefolgt vom Postfix "_img" (z.B. "navhome_img").
* Der Dateiname kann beliebig ausgewählt werden, es sollte allerdings eine
* Rollovergrafik mit dem Dateinamenpostfix "_f2" vorhanden sein (wie beim
* bekannten Rolloverskript).
* Der DIV mit den Unterpunkten hat die ID der Menügruppe, gefolgt vom Postfix
* "_sub" (z.B. "navhome_sub"). Der Klassenname ist egal und kann zum stylen
* benutzt werden. In diesem DIV liegen dann letztendlich die Grafiken für
* die Unterpunkte. Von diesen sollten ebenfalls die entsprechenden Rollovergrafiken
* vorhanden sein. Ebenfalls sollten sie eine eindeutige ID besitzen, die mit "nav"
* beginnt, um einen Unterpunkt auf Aktiv zu setzen.
*
* Funktionsweise:
* ---------------
* Das Skript wird am Ende jeder Unterseite (vor dem </body>-Tag) 
* mit "initDropdown('aktiver Oberpunkt', 'aktiver Unterpunkt');" 
* (z.B. initDropdown('aktuelles','presse');) aufgerufen. 
* Die beiden Parameter können auch weggelassen werden, falls keine 
* aktivierten Ober- und Unterpunkte benötigt werden.
*
* Hinweis:
* --------
* Die DIVs für die Unterpunkte müssen nicht unbedingt per Stylesheet auf "display: none;"
* gesetzt werden, da das Skript diese bei Aufruf versteckt. So kann auch bei abgeschaltetem 
* Javascript jeder Navigationspunkt angeklickt werden.
* 
*/

function initDropdown(activeID, subactiveID) {
	var timeout = '10';
	var aDivs = document.getElementsByTagName('div');
	var aktiv = Array();
	if (activeImage = document.getElementById('nav' + activeID + '_img')) {
		var src = activeImage.getAttribute('src');
		var ftype = src.substring(src.lastIndexOf('.'), src.length);
		var hsrc = src.replace(ftype, '_f2'+ftype);
		activeImage.src = hsrc;
		activeImage.id = 'theDropdownActiveImage';					
	}
	for (var j = 0; j < aDivs.length; j++) {
		if (aDivs[j].className == 'nav') {
			if (subDiv = document.getElementById(aDivs[j].id + '_sub')) {
				subDiv.style.display = 'none';	
				subDiv.onmouseover = function() {
					navDivId = this.id.substring(0,this.id.length - 4)
					window.clearTimeout(aktiv[navDivId]);
				}
				if (aImages = subDiv.getElementsByTagName('img')) {
					for (var k = 0; k < aImages.length; k++) {
						if (aImages[k].id == 'sub' + subactiveID) {
							var src = aImages[k].getAttribute('src');
							var ftype = src.substring(src.lastIndexOf('.'), src.length);
							var hsrc = src.replace(ftype, '_f2'+ftype);
							aImages[k].src = hsrc;							
						} else {
							aImages[k].onmouseover = function() {
								navDivId = 'nav' + this.id.substring(0,this.id.lastIndexOf('_'));
								window.clearTimeout(aktiv[navDivId]);
								var src = this.getAttribute('src');
								var foo = src.substring(src.lastIndexOf('.'), src.length);
								if (foo != '_f2') {
									var ftype = src.substring(src.lastIndexOf('.'), src.length);
									var hsrc = src.replace(ftype, '_f2'+ftype);
									this.src = hsrc;
								}
							}
							aImages[k].onmouseout = function() {
								var src = this.getAttribute('src');
								var ftype = src.substring(src.lastIndexOf('.'), src.length);
								var foo = src.substring(src.lastIndexOf('_'), src.length - 4);
								if (foo != '_f2') {
									var original = src.substring(0,src.lastIndexOf('.'));
								} else { 	
									var original = src.substring(0,src.lastIndexOf('_'));
								}
								this.src = original + ftype;								
							}
						}	
					}
				}
			} 
			aDivs[j].onmouseover = function() {
				window.clearTimeout(aktiv[this.id]);
				if (el = document.getElementById(this.id + '_sub')) {
					el.style.display = 'block';
				}
				if (img = document.getElementById(this.id + '_img')) {
					var src = img.getAttribute('src');
					var foo = src.substring(src.lastIndexOf('_'), src.length - 4);	
					if (foo != '_f2') {
						var ftype = src.substring(src.lastIndexOf('.'), src.length);
						var hsrc = src.replace(ftype, '_f2'+ftype);
						img.src = hsrc;
					}
				}
			}
			aDivs[j].onmouseout = function() {
				el = this.id;
				aktiv[el] = window.setTimeout('verstecken("' + el + '")',timeout);
				this.className = 'nav';
			}
		}
	}
}
function verstecken(el) {
	if (subDiv = document.getElementById(el + '_sub')) {
		subDiv.style.display = 'none';
	}
	if (img = document.getElementById(el + '_img')) {
		var src = img.getAttribute('src');
		var ftype = src.substring(src.lastIndexOf('.'), src.length);
		var foo = src.substring(src.lastIndexOf('_'), src.length - 4);
		if (foo != '_f2') {
			var original = src.substring(0,src.lastIndexOf('.'));
		} else { 	
			var original = src.substring(0,src.lastIndexOf('_'));
		}
		img.src = original + ftype;
	}
}