// Drop-Down-Menue mit grafischen Oberpunkten und einer Unterebene (Textlinks)
// von Marc Wittenbrink
//
// Fr die Navigationsgrafiken aller Oberpunkte, die Unterpunkte besitzen,
// werden drei verschiedene Bilder bentigt:
// 1)   beispiel.gif        Normales Bild
// 2)   beispiel_f2.gif     Bild fr Hover/Active
// 3)   beispiel_f3.gif     Bild, das angezeigt wird, wenn das Untermen
//                          aufgeklappt ist (wird bentigt, damit sauberer
//                          ?ergang vom Bild zum Untermen mglich ist - 
//                          z.B. wenn die '_f2'-Bilder einen Schatten oder
//                          einen unteren Rahmen haben; Oberpunkte ohne
//                          Untermen bentigen kein '_f3'-Bild)
//
// Der Aufbau in der Navigation ist wie folgt:
//      <div id="navigation">                                                                       gesucht werden alle Listenpunkte im DIV mit der ID "navigation"
//          <ul>
//              <li class="aufklapp"><a href="seite1.html"><img src="bild1.gif id="punkt1" /></a>   Oberpunkte mit Unterpunkten haben die Klasse "aufklapp"
//                  <ul id="sub_punkt1">                                                            Die Unterliste hat die Klasse "sub_" + ID des Oberpunkt-Bilds
//                      <li><a id="unterpunkt1" href="seite1_1.html">Unterpunkt 1</a></li>          Unterpunkte haben beliebige IDs
//                      [...]                                                                       weitere Unterpunkte...
//                  </ul>
//              </li>
//              <li><a href="seite2.html"><img src="bild2.gif id="punkt1" /></a></li>               Dies ist ein normaler Oberpunkt ohne Unterpunkte
//              [...]                                                                               weitere Oberpunkte...
//          </ul>
//      </div>
//
//  Hier der Funktionsaufruf fr das obere Beispiel 
//  (Aktiv sind die ersten Ober- und Unterpunkte)
//      initDropdown( 'punkt1' , 'unterpunkt1' );
//
//  CSS:
//  gestyled werden mssen folgende Elemente (plus wichtige Deklarationen fr 
//  horizontale Navi mit nach unten ausgeklappten Untermens):
//  #navigation ul                                                  
//  #navigation ul li                                               // list-style:none; position:relative; float:left; display:inline;
//  #navigation ul li a img                                         // vertical-align:bottom; border:none;
//  #navigation ul ul                                               // display:none; position:relative; left:0; top:(idR. Hhe des Bilds des Oberpunktes);
//  #navigation ul ul li                                            
//  #navigation ul ul li a
//  #navigation ul ul li a:hover, #navigation ul ul li a.active
//

function initDropdown( firstActive , secondActive , secondActiveAlt ) {
    var navigation = document.getElementById( 'navigation' );
    var lists = navigation.getElementsByTagName ( 'LI' );
    var aktiv = Array();
    var navBild = Array();
    //Hauptmenpunkt auf 'active' setzen
    if ( img = document.getElementById( firstActive ) ) {
        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;
		}
    }
    //Untermenpunkte auf 'active' setzen
    if ( theId = document.getElementById( secondActive ) ) {
        document.getElementById( secondActive ).className = 'active';    
    }
    //Untermenpunkte auf 'active' setzen
    if ( theId = document.getElementById( secondActiveAlt ) ) {
        document.getElementById( secondActiveAlt ).className = 'active';    
    }
    //Alle Listen im Navigations-DIV durchlaufen
    for ( var i = 0 ; i < lists.length ; i++ ) {
        if ( lists[ i ].className == 'aufklapp' ) {
            var navBild = lists[ i ].getElementsByTagName( 'img' );
            navBild[ 0 ].onmouseover = function() {
                window.clearTimeout( aktiv[ this.id ] );
                document.getElementById( 'sub_' + this.id ).style.display = 'block';
                
                // Cover Select Boxes in IE
               // coverSelectBoxes(document.getElementById( 'sub_' + this.id ),1);
                
                var src = this.getAttribute('src');
        		var foo = src.substring(src.lastIndexOf('_'), src.length - 4);
				if (foo == '_f2') {
				    var ftype = src.substring(src.lastIndexOf('.'), src.length);
				    var original = src.substring(0,src.lastIndexOf('_'));
				    this.src = original + '_f3' + ftype;
		        } else if (foo != '_f2' && foo != '_f3' ) {
					var ftype = src.substring(src.lastIndexOf('.'), src.length);
					var hsrc = src.replace(ftype, '_f3'+ftype);
					this.src = hsrc;
				}      
            }
            navBild[ 0 ].onmouseout = function() {
                aktiv[ this.id ] = window.setTimeout( 'ausblenden("' + this.id + '","' + firstActive + '")' , '400' );
            }
            var navListe = lists[ i ].getElementsByTagName( 'UL' );
            
            navListe[ 0 ].onmouseover = function() {
                var parentId = this.id.substr( 4 , this.id.length - 4 );
                window.clearTimeout( aktiv[ parentId ] );   
            }
            navListe[ 0 ].onmouseout = function() {
                var parentId = this.id.substr( 4 , this.id.length - 4 );
                aktiv[ parentId ] = window.setTimeout( 'ausblenden("' + parentId + '","' + firstActive + '")' , '400' );                 
            }
        } else if ( lists[ i ].parentNode.id.match( 'sub_' ) ) {
        } else {
            var navBild = lists[ i ].getElementsByTagName( 'img' );
            navBild[ 0 ].onmouseover = function() {
                var src = this.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);
					this.src = hsrc;
				}                                
            }
            navBild[ 0 ].onmouseout = function() {
                if ( this.id != firstActive ) {
                  	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;
                }                    
            }
        }
    }
}

function ausblenden( el , firstActive ) {
    if (subDiv = document.getElementById('sub_' + el )) {
		subDiv.style.display = 'none';
	}
	if ( el != firstActive ) {
        var img = document.getElementById( el );
    	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' && foo != '_f3' ) {
    		var original = src.substring(0,src.lastIndexOf('.'));
    	} else { 	
    		var original = src.substring(0,src.lastIndexOf('_'));
    	}
    	img.src = original + ftype;
    } else {
        var img = document.getElementById( el );
    	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' && foo != '_f3' ) {
    		var original = src.substring(0,src.lastIndexOf('.'));
    	} else { 	
    		var original = src.substring(0,src.lastIndexOf('_'));
    	}
    	img.src = original + '_f2' + ftype;        
    }
}

function coverSelectBoxes(el, state)
  {
  
//    var DivRef = document.getElementById('PopupDiv');
   var IfrRef = document.getElementById('DivShim');
   if(state)
   {
    el.style.display = "block";
// alert(el.parentNode.style.top);
// alert(el.style.offsetHeight);

    IfrRef.style.width = el.offsetWidth;
    IfrRef.style.height = el.offsetHeight;
    IfrRef.style.top = el.style.top;
    IfrRef.style.left = el.style.left;
    IfrRef.style.zIndex = el.style.zIndex - 1;
    IfrRef.style.display = "block";
   }
   else
   {
//     DivRef.style.display = "none";
    IfrRef.style.display = "none";
   }
}