/*********************************************************************
* Bei klick auf Link mit dem Attribut "rel=lightbox[]" wird ein großes
* Bild geladen
* 
* Michael Schneider, 09.12.2009 23:53
*********************************************************************/


// Config Vars
var HintergrundID       = "scrollbar_content";      // ID des Contentfeldes in dem
                                                    // das große Bild angezeigt wird

var HintergrundFarbe    = "#3D3D3D";                 // Neue Hintergrundfarbe für den Content
                                                    // für keine Änderung auf false setzen













// Globale Variablen
var htmlEingefuegt = false;             // Gibt an ob die Layer für die Anzeige der 
                                        // Bilder bereits eingefügt wurden
                                        // (Werden beim ersten Aufruf eingefügt)

var zielID                              // zielID ist die ID des Layers in den der
                                        // Code eingefügt werden soll

var titel = new Array();
var bilder = new Array();
var posAktuell = false;                 // Position des akutellen Bildes im Array

imgLoader = new Image();





/*********************************************************************
* Grossbild
*
* Starten der Grossbild-Funktionen
*********************************************************************/
function grossbild( ziel ) {
    zielID = ziel;
    
    grossbildInit();
    
}













/**
* init
* 
* Initialisiere Grossbild indem nach relevanten Links gesucht wird
**/
function grossbildInit() {
    if (!document.getElementsByTagName){ return; }
	var anchors = document.getElementsByTagName('a');
	
	var anchor, relAttribute;
    
    // Durchlaufe alle Link-Tags
    for (var i=0; i<anchors.length; i++){
		anchor = anchors[i];
		relAttribute = String(anchor.getAttribute('rel'));

		// use the string.match() method to catch 'lightbox' references in the rel attribute
		if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
		      titel.push( String(anchor.getAttribute('title')) );
		      bilder.push( String(anchor.getAttribute('href')) );
		  
		      anchor.onclick = function () {grossbildUpdate(this); return false;}
		}
	}
}














/**
* update
* 
* Aktualisiert das Angezeigte Bild
* 
* @param:   bild =  Dateiname mit Pfad des Bildes das angezeigt werden soll
*                   oder "vor" für nächstes Bild
*                   oder "zurueck" für vorheriges Bild 
*                   oder Nummerischer Wert für Position im Array (Für ansteuerung über Hash-Wert)
* */
function grossbildUpdate(bild) {

    // Prüfe ob HTML-Layer bereits eingefügt wurden, falls nicht füge ein
    if ( htmlEingefuegt == false ) {
        var htmlCode = '<div id="grossbildWrapper">'+
            '<img src="templates/onepix.gif" id="grossbildIMG" style="height: 300px;" />'+
            '<p id="grossbildBeschreibung"></p>'+
            '</div>'+
            '<div id="grossbildLadeanz"><img src="templates/ladeanz.gif" /></div>'+
            '<a href="javascript:grossbildUpdate(\'zurueck\')" onclick="this.blur()" id="grossbildPfeilL" class="grossbildPfeile"><</a>'+
            '<a href="javascript:grossbildUpdate(\'vor\')" onclick="this.blur()" id="grossbildPfeilR" class="grossbildPfeile">></a>';
        
        // Einfügen
        document.getElementById(zielID).innerHTML = htmlCode;
        htmlEingefuegt = true;
        
        // Hintergrundfarbe ändern
        if ( HintergrundFarbe )
            document.getElementById(HintergrundID).style.backgroundColor = HintergrundFarbe;
    }
    
    
    
    // ---------- Bild ermitteln und anzeigen ----
    if ( !isNaN(bild) ) {
        posAktuell = bild;
    } else if ( bild == "vor" ) {
        // Zeiger für Array ändern wenn ein Bild weiter geklickt wird
        posAktuell++;
    
    } else if ( bild == "zurueck" ) {
        // Zeiger für Array ändern wenn ein Bild zurück geklickt wird
        posAktuell--;

    } else {
        // Ermittle Position im Array
        posAktuell = getArrayPos( bilder, bild );    
    }
    
    
    document.getElementById('grossbildLadeanz').style.display = "block";
    document.getElementById('grossbildBeschreibung').innerHTML = titel[posAktuell];
    imgLoader.src = String(bilder[posAktuell]);
    
    
    
    
    // URL-hash für Bookmark erweitern
    location.hash = "Bild_"+ posAktuell;
    
    
    
    
    // Prüfen ob Pfeil Rechts gezeigt werden sollen
    if (posAktuell < (bilder.length-1) ) {
        document.getElementById('grossbildPfeilR').style.display = "block";
    } else {
        document.getElementById('grossbildPfeilR').style.display = "none";
    }
    
    // Prüfen ob Pfeil Links gezeigt werden sollen
    if (posAktuell > 0 ) {
        document.getElementById('grossbildPfeilL').style.display = "block";
    } else {
        document.getElementById('grossbildPfeilL').style.display = "none";
    }
}















/**
* Aktualisiert das Bild auf der Seite sobald dieses geladen wurde und
* blendet die Ladeanzeige wieder aus.
**/
imgLoader.onload=function() {
    // Ladeanzeige ausblenden
    document.getElementById('grossbildLadeanz').style.display = "none";
    
    // Bild aktualisieren
    document.getElementById('grossbildIMG').src = imgLoader.src;
}



























/**
* arrayBereinigen
* 
* Löscht leere Einträge im Array und gibt bereinigtes Array zurück
**/
function arrayBereinigen( gegArray ) {
    var bereinigtesArray = new Array();

    // Array durchlaufen
    for ( var i = 0; i < gegArray.length; i++ ) {
        // Elemente mit Inhalt in Ausgabearray kopieren.
        if ( gegArray[i] != "null" ) {
            bereinigtesArray.push(gegArray[i]);
        }
    }
return bereinigtesArray;
}















/**
* getArrayPos
* 
* Ermittelt die Position des übergebenen Strings im Array
**/
function getArrayPos( gegArray, suchstring ) {
    var ausgabe = false;

    // Array durchlaufen
    for ( var i=0; i<gegArray.length; i++ ) {
        if( String(suchstring).search(gegArray[i]) != -1 )
            return i;
    }
    return ausgabe;
}