/*******************************************************************************
 * Blindbox Version 1.3 (10.9.2008)                                            *
 *                                                                             *
 * 1.1: Fehlerkorrektur: Programm prueft zuvor, ob und wieviele Themenbilder   *
 *      vorhanden sind; prueft, ob menue_container auf der Seite vorhanden     *
 *      ist; Skript ausfuehrlich kommentiert.                                  *
 * 1.2: Kompatiblitaet: Programm funktioniert unabhaengig von der Anzahl der   *
 *      Klassenbezeichner.                                                     *
 * 1.3: Korrektur: Standardansicht bleibt im Fehlerfall erhalten               *
 *                                                                             *
 * Created by Gruenfisch Webdesign GbR, Daniel Zenner und Oliver Richter       *
 * Using standard DOM only!                                                    *
 ******************************************************************************/ 



// Erreigniswaechter einstellen: Nach dem Laden der Seite die Funktion setzeFussleiste() aufrufen
if (typeof window.addEventListener != 'undefined') window.addEventListener('load', initBlindbox, false);  
else if (typeof document.addEventListener != 'undefined') document.addEventListener('load', initBlindbox, false);
else if (typeof window.attachEvent != 'undefined') window.attachEvent('onload', initBlindbox);





// Festlegen von global gueltigen Variablen
var menue_container = "blindbox_menue"; // Bezeichner fuer den Container fuer das zu erstellende Menue

var obj_daten = new Array();

obj_daten[0] = new Array("div", "blindbox_inhalt", "");      // Inhaltscontainer
obj_daten[1] = new Array("h3", "blindbox_ueberschrift", ""); // Ueberschriften
obj_daten[2] = new Array("img", "blindbox_themenbild", "");  // Themenbilder
  
obj_daten[0][2] = new Array();
obj_daten[1][2] = new Array();
obj_daten[2][2] = new Array();

    
    
    
function initBlindbox() // Initialfunktion (nach dem ersten Laden der Seite)
 {
  if (document.getElementById) // ... wenn DOM verfuegbar
   {
    if (document.getElementById(menue_container)) // ... wenn Menue-Container vorhanden ist
     {
      var i, e, a, c; 
   
      /*************************************************************************
       Schritt 1: Anzahl der Elemente zaehlen, speichern, Elemente ausblenden
      *************************************************************************/ 
      for (i = 0; i < 3; i++) 
       {
        a = 0; 
      
        for (e = 0; e < document.getElementsByTagName(obj_daten[i][0]).length; e++) 
         {
          
          if (document.getElementsByTagName( obj_daten[i][0] )[e].className) // ... wenn ein Klassenattribut vorhanden ist
           {
            
            // Aufspliten aller Klassenbezeichner aus dem Gesamtattribut class des jeweiligen Elements
            var class_array = document.getElementsByTagName( obj_daten[i][0] )[e].className.split(" ");
            
            for (c = 0; c < class_array.length; c++) 
             { 
              if (class_array[c] == obj_daten[i][1]) 
	           {
                obj_daten[i][2][a] = document.getElementsByTagName( obj_daten[i][0] )[e]; // Element speichern
                // obj_daten[i][2][a].style.display = "none"; // Element ausblenden
                a++; 
	           }	       
             }  
           }
         }  
       }
     
      // Fehlerkontrolle: sind mehr Ueberschriften als Inhaltscontainer vorhanden? 
      if (obj_daten[0][2].length != obj_daten[1][2].length)
       {
        // alert("Anzeigeproblem!\n\nUngleiche Anzahl von Ueberschriften und Inhaltselementen festgestellt, bitte um Korrektur!\n\nProgramm wurde abgebrochen, Standardansicht wird nicht veraendert."); 
        return false;   
       }       
       
     
     
      /*************************************************************************
       Schritt 2: Erstellen der Menueliste
      *************************************************************************/  
      erstelleElemente(menue_container, "ul",  false, "id=blindbox_menue_liste");  
    
      // Der Liste einen Klassennamen hinzufuegen
      document.getElementById("blindbox_menue_liste").className = "blindbox_menueleiste";
    
      // Erstellen der einzelnen Listen-Elemente
      for (i = 0; i < obj_daten[0][2].length; i++)
       {
        // Erstellen der <li>s + ID
        erstelleElemente("blindbox_menue_liste", "li", false, "id=listenpunkt"+i);   
      
        // Erstellen der Links + ID
        erstelleElemente("listenpunkt"+i, "a", obj_daten[1][2][i].firstChild.nodeValue , "id=listenpunkt_link"+i); 
      
        // Erstellen der href-Anweisung fuer die Links
        document.getElementById("listenpunkt_link"+i).href = "javascript: aktiviereBlindbox("+i+");";
       }

     
      /*************************************************************************
       Schritt 3: Einblenden des Inhaltsbereiches der Nummer x
      *************************************************************************/      
      aktiviereBlindbox(0);
     }
   } 
 }
 
 
 
 
 
 
 
 

function aktiviereBlindbox(objNummer) // Funktion zum Aktivieren der ausgewaehlten Inhaltsbox
 {
  // Alle Inhaltsboxen ausblenden / Link-Klassenbezeichner entfernen: 
  for (i = 0; i < obj_daten[0][2].length; i++)
   {
    obj_daten[0][2][i].style.display = "none";
    obj_daten[1][2][i].style.display = "none";
    document.getElementById("listenpunkt_link"+i).className = "";
   }
   
  // Alle Themenbilder ausblenden (falls vorhanden): 
  for (i = 0; i < obj_daten[2][2].length; i++) { obj_daten[2][2][i].style.display = "none"; }   

  // ausgewaehlten Inhaltsblock einblenden:  
  obj_daten[0][2][objNummer].style.display = "block";

  // zugehoeriges Themenbild einblenden (falls vorhanden):
  if (obj_daten[2][2][objNummer]) obj_daten[2][2][objNummer].style.display = "inline";  
  
  // Aktiven Link kennzeichnen mit einem Klassennamen:  
  document.getElementById("listenpunkt_link"+objNummer).className = "selected";
 }

 
 
 
 
 
 
 
 
function erstelleElemente(container, xhtmlElement, xhtmlElementInhalt, xhtmlElementAttr)
 {
  if (document.getElementById) // ... wenn DOM verfuegbar
   {
    // Wertekontrolle
	// alert( "Container-ID: >" + container + "<\n\nElement: >" + xhtmlElement + "<\n\nInhalt: >" + unescape(xhtmlElementInhalt) + "<\n\nAttribut: >" + xhtmlElementAttr + "<" );
 
    // Das Containerelement fuer die zu erstellenden Elemente wird definiert
    var containerObj = document.getElementById(container);
     
    /***************************************************************************
     Schritt 1: Elemente erstellen
    ***************************************************************************/

    // neues Element erstellen
    var neuesElement = document.createElement(xhtmlElement);      
    
    // ... wenn Inhalte mit uebergeben wurden (Beschriftungen, Beschreibungen, usw.)
    if (xhtmlElementInhalt) 
     {

     // ... wenn ein Select-Feld erstellt werden soll
      if (xhtmlElement == "select")
       {
        for (var i = 0; i < xhtmlElementInhalt.length; i++)
         { 
          var neueOption = document.createElement("option");
          var neuerText = document.createTextNode( unescape(xhtmlElementInhalt[i][0]) );
          neueOption.appendChild(neuerText);
          neuesElement.appendChild(neueOption); 
         }
       }
       
      // ... sonst gilt fuer die Erstellung mit einfachen Inhalten immer:       
      else
       { 
        var neuerText = document.createTextNode( unescape(xhtmlElementInhalt) );
        neuesElement.appendChild(neuerText); 
       }
     }
      
    // das neu erstellte Element an den Container anfuegen      
    containerObj.appendChild(neuesElement);   
    

    
    /***************************************************************************
     Schritt 2: Attribute fuer die Elemente erstellen
    ***************************************************************************/     
          
    // ... wenn Attribute uebergeben wurden, werden sie im folgenden gesetzt
    if (xhtmlElementAttr)
     {
 
      // Attributtyp und Attributwert extrahieren
      i = xhtmlElementAttr.indexOf("="); 
      var attrName = xhtmlElementAttr.substring(0,i);
      var attrText = xhtmlElementAttr.substring(i+1,xhtmlElementAttr.length);
 
      // Attribute setzen
      if (attrName == "class") neuesElement.className = attrText;
      else  neuesElement.setAttribute(attrName, attrText);
     }     
   }
 }