// JavaScript-Funktionen fuer die Bilder-Galerie
// Copyright (C) 2005-2008 Alexander Mueller
// Autor: Alexander Mueller
// Web:   http://www.EvoComp.de/
// Datei: galerie.js
// The copyright notice must stay intact for use!
// You can obtain this and other scripts at http://www.EvoComp.de/scripts/skripte.html
//
// This program is distributed in the hope that it will be useful,
// but without any warranty, expressed or implied.

// intern genutzte Variablen (keine Anpassung noetig)
// Datenstruktur, in der die einzelnen Bilddaten gespeichert werden,
// in Form eines assoziativen Arrays anlegen
var Photos = new Array();

// Maximale Anzahl der Beschreibungsfelder eines Bildes
// Wird automatisch anhand der angegebenen Bildbeschreibungen ermittelt
var anzahl_beschreibungsfelder = 1;

// erstes Bild in der Liste (zur Initialisierung)
var index_erstes_bild = 0;
 // Bildindex fuer anzuzeigendes grosses Bild
var index_grosses_bild = 0;
// Anzahl der Bilder insgesamt
var anzahl_bilder = 0;
// Intervall-Variable zur zyklischen Aktualisierung
var galerie_interval = -1;

// Photo zur Galerie hinzufuegen
// thumbnail - URL zum Thumbnail
// bild - URL zum Detailbild
// alt - Beschreibung die angezeigt werden soll, wenn man mit der Maus ueber das Bild faehrt
// beschreibung - Beschreibung des Bildes, welches als Beschriftung unter dem Detailbild angezeigt werden soll
// ... - Sowie weitere Beschreibungstexte in optional darauf folgenden Parametern.
//       Diese werden unter den Indexnamen "beschreibungX" abgelegt, wobei X von 2 an hochgezhlt wird.
function addPhoto (thumbnail, bild, alt, beschreibung) {
	Photos[Photos.length] = new Object();
	// URL des Thumbnail
	Photos[Photos.length - 1]['datei'] = thumbnail;
	// URL des Bildes
	Photos[Photos.length - 1]['datei_gross'] = bild;
	// Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
	Photos[Photos.length - 1]['alt'] = alt;
	// Kurze Bildbeschreibung zum jeweiligen Bild
	Photos[Photos.length - 1]['beschreibung'] = beschreibung;
	// Evtl. Inhalt weiterer Beschreibungsfelder speichern
	if (addPhoto.arguments.length > 4) {
		// Maximale Anzahl der Beschreibungsfelder anpassen, damit ausreichend
		// Spans fuer die Beschreibung der Detailbilder erzeugt werden
		if (anzahl_beschreibungsfelder < addPhoto.arguments.length - 3)
			anzahl_beschreibungsfelder = addPhoto.arguments.length - 3;
		for (i = 4; i < addPhoto.arguments.length + 1; i++)
			Photos[Photos.length - 1]['beschreibung' + (i - 2)] = addPhoto.arguments[i];
	}
}

// Galerie initialisieren und erforderlichen Elemente erzeugen
function initialisiereGalerie () {
	// Galerie darf nur einmal initialisiert werden!
	if (galerie_interval != -1)
		return;
	// Initialisierung erst moeglich, nachdem die Bilder
	// hinzugefuegt wurden! Bei leerer Bilderliste passiert nichts!
	if (Photos.length > 0) {
		// Anzahl der Bilder ermitteln
		anzahl_bilder = Photos.length;
		// Bildindex des nach dem Laden angezeigten Detailbildes
		// kann maximal der des letzten Bildes sein!
		if (bildindex_beim_laden > anzahl_bilder)
			bildindex_beim_laden = anzahl_bilder;
		// Anzahl der Thumbnails darf hoechstens so gross sein, wie die Gesamtzahl der Bilder...
		if (anzahl_thumbnails > anzahl_bilder)
			anzahl_thumbnails = anzahl_bilder;
		// und es muss mindestens ein Thumbnail existieren.
		if (anzahl_thumbnails < 1)
			anzahl_thumbnails = 1;

		// Existiert das Listenelement, in dem die Thumbnails eingefuegt werden?
		if (!document.getElementById ('thumbs') || document.getElementById ('thumbs').nodeName != 'UL') {
			alert ('Fehler: Listenelement f\u00fcr die Thumbnails (UL-Element mit der ID "thumbs") nicht gefunden!\n' +
			       'Dieses Element wird ben\u00f6tigt, da das Script in diesem Element die Thumbnail-Bilder erzeugt.');
			return;
		}

		// Thumbnails erzeugen
		erzeuge_thumbnails ();
		// Gibt es ein Absatzelement, in dem die Detailbeschreibungen der Bilder landen
		if (document.getElementById ('beschriftung') && document.getElementById ('beschriftung').nodeName == 'P')
			// Falls noetig Beschreibungsfelder fuer die Detailbildbeschreibung erzeugen
			erzeuge_beschreibungsfelder ();
		// den ersten Satz Thumbnails nach der Initialisierung anzeigen
		thumbnails_auffrischen ();
		// Thumbnails zyklisch ausrichten
		//galerie_interval = window.setInterval ("ausrichten ()", 10);
	}
	else {
		alert ('Fehler: Sie haben noch keine Fotos eingef\u00fcgt!\n' +
		       'Nutzen Sie vor der Initialisierung der Galerie die Funktion addPhoto um Bilder einzuf\u00fcgen!');
	}
}


// Slide-Show aus Galerie machen
var aniint = -1;
function stopint () { if (aniint != -1) window.stopInterval (aniint); aniint = -1 }
function startint () { if (aniint = -1) aniint = window.setInterval ("animation()", 3000) }
startint ();

function animation () {
    if (!(index_erstes_bild + anzahl_thumbnails > anzahl_bilder - 1))
            weiter ();
    else {
       index_erstes_bild = 0;
       thumbnails_auffrischen ();
    }
}


// Zaehlt Bilder mit IDs, die mit 'thumbnail' beginnen und einer ganzen Zahl
// enden und liefert die Anzahl als Rueckgabewert.
// Diese ID muessen die Image-Tags haben, die als Thumbnails verwendet werden.
function zaehle_thumbnails () {
	var tn = 0;

	for (i = 0; i < document.images.length; i++)
		if ((document.images[i].id).match (/^thumbnail[0-9]+$/))
			tn++;
	return tn;
}

// Beschreibungsfelder automatisch erzeugen
// Deren Anzahl haengt von der maximalen Anzahl der Beschreibungen ab,
// die in der Bilderliste fuer die entsprechenden Bilder angegeben sind.
function erzeuge_beschreibungsfelder () {
	// 'anzahl_beschreibungsfelder' Spans nur dann im Beschreibungsabsatz
	// erzeugen, falls es mehrere Beschreibungsfelder gibt
	if (anzahl_beschreibungsfelder > 1)
		for (i = 0; i < anzahl_beschreibungsfelder; i++) {
			// Span-Tag erzeugen, ...
			feld = document.createElement ('span');
			// Beschriftungs-ID setzen (damit die Beschreibungsdaten
			// des Detailbildes in die entsprechenden Felder eingefuegt
			// werden koennen. Auch die Formatierung per Stylesheet ist
			// ueber die Element-ID moeglich), ...
			feld.id = 'beschriftung' + (i + 1);
			// Textknoten einfuegen, damit Inhalte gespeichert werden
			// koennen ...
			feld.appendChild (document.createTextNode (''));
			// und zum Schluss in den Beschriftungsabsatz einhaengen.
			document.getElementById ('beschriftung').appendChild (feld);
		}
}

// Thumbnails automatisch erzeugen, um Fehler zu vermeiden und Benutzung zu
// vereinfachen.
function erzeuge_thumbnails () {
	// 'anzahl_thumbnails' Thumbnails erzeugen
	for (i = 0; i < anzahl_thumbnails; i++) {
		// Ein Thumbnail besteht aus einem LI-Tag, ...
		eintrag = document.createElement ("li");
		// einem Link ...
		link = document.createElement ("a");
		// , der per JavaScript das entsprechende Bild austauscht
		link.href = "";
		// und einem IMG-Tag fuer den eigentlichen Thumbnail
		bild = document.createElement ("img");
		// Rahmen des IMG-Tags ausschalten ...
		bild.border = "0";
		bild.width = thumb_groesse;
		bild.height = 0.75 * thumb_groesse;
		// und eindeutige ID vergeben, damit spaeter der Zugriff auf die
		// einzelnen Thumbnails per getElementById erfolgen kann.
		bild.id = "thumbnail" + (i + 1);
		// Stylesheet fuer Thumbnails zuweisen
		bild.className = "thumbnail";
		// Elemente zur Beschriftung der einzelnen Thumbnails erzeugen,
		// wenn ein Beschriftungsstring angegeben wurde
		if (typeof thumbnail_beschriftung == 'string' && thumbnail_beschriftung.length > 0) {
			var beschriftung = document.createElement ('span');
			beschriftung.id = "thumbnail_beschriftung" + (i + 1);
			beschriftung.className = "thumbnail_beschriftung";
			beschriftung.appendChild (document.createTextNode (''));
			var tmp = document.createElement ('p');
			tmp.appendChild (beschriftung);
			beschriftung = tmp;
		}
		// Events Mouseover und Mouseout ueber dem jeweiligen Thumbnail
		// abfangen, damit das Layout des Thumbnails je nach Mausposition
		// durch den entsprechenden Style angepasst wird.
		// Leider noetig, da der IE sich weigert, die Pseudoklasse :hover
		// auch fuer IMG-Tags anzunehmen.
		bild.onmouseover = sethover;
		bild.onmouseout = unsethover;

		ort = document.createElement ("p");
		sort = document.createElement ("span");
		sort.id = "thumbnail_beschriftung_oben" + (i + 1);
		sort.className = "thumbnail_beschriftung_oben";
		ort.appendChild (sort);

		// erzeugtes hierarchisch zusammenfuegen
		link.appendChild (bild);
		eintrag.appendChild (ort);
		eintrag.appendChild (link);
		if (beschriftung)
			eintrag.appendChild (beschriftung);

		// und unter Tag mit der ID 'thumb' ins Dokument einhaengen
		document.getElementById ("thumbs").appendChild (eintrag);
	}
}

// Thumbnail-Index aus der uebergebenen ID extrahieren
function getIndexOfSelectedThumbnail (id) {
	// ID des Thumbnails ermitteln
	if (/thumbnail([0-9]+)/.exec (id))
		return parseInt (RegExp.$1);
	return 0;
}

// Style des Thumbnails wird beim Ueberfahren der Thumbnails mit der Maus angepasst
function sethover (event) {
	this.className = "thumbnail_hover";
}

// Style wieder zuruecksetzen, wenn Maus das Thumbnail-Element verlaesst
function unsethover (event) {
	// Handelt es sich um den Thumbnail des derzeit ausgewaehlten
	// Detailbildes?
	if (index_erstes_bild + getIndexOfSelectedThumbnail (this.id) - 1 == index_grosses_bild)
		// Wenn ja, dann wird der Style fuer das derzeit Ausgewaehlte
		// Detailbild gesetzt.
		this.className = "thumbnail_selected";
	else
		// Ansonsten wird der Thumbnail wieder mit dem definierten
		// Normal-Style dargestellt.
		this.className = "thumbnail";
}

// Thumbnails auf Groesse 'thumb_groesse' ausrichten
function ausrichten () {
	// Wird vspace vom genutzten Browser unterstuetzt?
	if (document.getElementById ('thumbnail1').vspace) {
		for (i = 0; i < anzahl_thumbnails; i++) {
			// Thumbnails vertikal ausrichten
			//document.getElementById ('thumbnail' + (i + 1)).vspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).height) / 2;
			// Thumbnails horizontal ausrichten
			document.getElementById ('thumbnail' + (i + 1)).hspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).width) / 2;
		}
		// Thumbnail-Navigation ausrichten
		// Bei jedem Navigationselement wird zuvor auf dessen Existenz geprueft. Dies ist für den Fall, dass
		// einzelne Navigationselemente im HTML-Code geloescht wurden, noetig, da sonst Script-Fehler auftreten.
		/*if (document.getElementById ('zurueck'))
			document.getElementById ('zurueck').vspace = (thumb_groesse - document.getElementById ('zurueck').height) / 2;
		if (document.getElementById ('pgup'))
			document.getElementById ('pgup').vspace = (thumb_groesse - document.getElementById ('pgup').height) / 2;
		if (document.getElementById ('weiter'))
			document.getElementById ('weiter').vspace = (thumb_groesse - document.getElementById ('weiter').height) / 2;
		if (document.getElementById ('pgdown'))
			document.getElementById ('pgdown').vspace = (thumb_groesse - document.getElementById ('pgdown').height) / 2;*/
	}
}

// Thumbnails gemaess aktuellem index_erstes_bild anzeigen
function thumbnails_auffrischen () {
	// Bei allen Thumbnails Daten des jeweiligen IMG-Tags (b1..bn) auffrischen
	for (i = 0; i < anzahl_thumbnails; i++) {
		// Bild austauschen
		document.getElementById ('thumbnail' + (i + 1)).src = Photos[index_erstes_bild + i]["datei"];
		document.getElementById ('thumbnail' + (i + 1)).parentNode.href = Photos[index_erstes_bild + i]["datei_gross"];
		// Alt-Text austauschen
		document.getElementById ('thumbnail' + (i + 1)).alt = Photos[index_erstes_bild + i]["alt"];
		// Title-Text austauschen
		document.getElementById ('thumbnail' + (i + 1)).title = Photos[index_erstes_bild + i]["alt"];
		// Thumbnail des ausgewaehlten Bildes entsprechend dem dafuer definierten Style darstellen
		// und die anderen auf die normale Darstellung zuruecksetzen
		if (index_grosses_bild == index_erstes_bild + i)
		    document.getElementById ('thumbnail' + (i + 1)).className = "thumbnail_selected";
		else
		    document.getElementById ('thumbnail' + (i + 1)).className = "thumbnail";
		// Sollen Thumbnails beschriftet werden?
		if (document.getElementById ('thumbnail_beschriftung' + (i + 1))) {
			var beschriftung = thumbnail_beschriftung;
			beschriftung = beschriftung.replace (/%index_thumbnail%/i, (index_erstes_bild + i + 1));
			beschriftung = beschriftung.replace (/%kurzbeschreibung%/i, Photos[index_erstes_bild + i]["alt"]);
			beschriftung = beschriftung.replace (/%beschreibung%/i, Photos[index_erstes_bild + i]["beschreibung"]);
			document.getElementById ('thumbnail_beschriftung' + (i + 1)).innerHTML = beschriftung;
		}
		if (document.getElementById ('thumbnail_beschriftung_oben' + (i + 1)))
			document.getElementById ('thumbnail_beschriftung_oben' + (i + 1)).innerHTML = Photos[index_erstes_bild + i]["beschreibung"];
	}

	// Navigationslinks fuer Thumbnails anzeigen
	// Auch hier muss erst geprueft werden, ob die Navigationselemente noch im HTML-Code enthalten sind.
	if (index_erstes_bild > 0) {
		if (document.getElementById ('zurueck'))
			document.getElementById ('zurueck').src = pfad_zu_navbildern + "/back.gif";
		if (document.getElementById ('pgup'))
			document.getElementById ('pgup').src = pfad_zu_navbildern + "/pgup.gif";
	}
	else {
		if (document.getElementById ('zurueck'))
			document.getElementById ('zurueck').src = pfad_zu_navbildern + "/first.gif";
		if (document.getElementById ('pgup'))
			document.getElementById ('pgup').src = pfad_zu_navbildern + "/pgup_first.gif";
	}
	if (index_erstes_bild + anzahl_thumbnails < anzahl_bilder) {
		if (document.getElementById ('weiter'))
			document.getElementById ('weiter').src = pfad_zu_navbildern + "/forward.gif";
		if (document.getElementById ('pgdown'))
			document.getElementById ('pgdown').src = pfad_zu_navbildern + "/pgdown.gif";
	}
	else {
		if (document.getElementById ('weiter'))
			document.getElementById ('weiter').src = pfad_zu_navbildern + "/last.gif";
		if (document.getElementById ('pgdown'))
			document.getElementById ('pgdown').src = pfad_zu_navbildern + "/pgdown_last.gif";
	}

	// Existiert das Element zur Beschriftung der Thumbnails?
	if (document.getElementById ('thumb_beschriftung')) {
		// Falls das P-Tag mit der ID 'thumb_beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
		// damit die Beschriftungsdaten darin gespeichert werden koennen
		if (!document.getElementById ('thumb_beschriftung').firstChild)
			document.getElementById ('thumb_beschriftung').appendChild (document.createTextNode (""));
		// Variablen in Beschriftungsstring ersetzen
		tnstr = thumbnail_string.replace (/%index_erster%/i, (index_erstes_bild + 1));
		tnstr = tnstr.replace (/%index_letzter%/i, (index_erstes_bild + anzahl_thumbnails));
		tnstr = tnstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
		// Beschriftung der Thumbnails im zugehoerigen P-Tag setzen
		document.getElementById ('thumb_beschriftung').firstChild.data = tnstr;
	}
}

// Thumbnail-Liste ein Bild zurueck scrollen
function zurueck () {
	// Aenderung nur noetig, wenn der erste Thumbnail noch nicht vorne ist
	if (index_erstes_bild > 0) {
		// Index des ersten anzuzeigenden Thumbnails runterzaehlen
		// damit die Bilder beim Auffrischen um eine Stelle nach links verschoben werden
		index_erstes_bild--;
		// Anzeige der Thumbnails aktualisieren
		thumbnails_auffrischen ();
	}
}

// Thumbnail-Liste ein Bild vorwaerts scrollen
function weiter () {
	// nur wenn der letzte Thumbnail noch nicht erreicht ist
	if (!(index_erstes_bild + anzahl_thumbnails > anzahl_bilder - 1)) {
		// Index des ersten anzuzeigenden Thumbnails hochzaehlen
		// damit die Bilder beim Auffrischen um eine Stelle nach rechts verschoben werden
		index_erstes_bild++;
		// Anzeige der Thumbnails aktualisieren
		thumbnails_auffrischen ();
	}
}

// Thumbnails um 'anzahl_thumbnails' zurueckblaettern
function pgup () {
	// nur um 'anzahl_thumbnails' Thumbnails zurueck, wenn noch genuegend vor aktuellem Index
	if (index_erstes_bild - anzahl_thumbnails > 0)
		index_erstes_bild = index_erstes_bild - anzahl_thumbnails;
	// ansonsten Thumbnails ab dem ersten Bild anzeigen
	else
		index_erstes_bild = 0;
	// Anzeige der Thumbnails aktualisieren
	thumbnails_auffrischen ();
}

// folgende 'anzahl_thumbnails' Thumbnails anzeigen
function pgdown () {
	// um 'anzahl_thumbnails' weiter, wenn noch genuegend Thumbnails in der Liste
	if (index_erstes_bild + 2 * anzahl_thumbnails < anzahl_bilder)
		index_erstes_bild = index_erstes_bild + anzahl_thumbnails;
	// oder eben die letzten 'anzahl_thumbnails' anzeigen
	else
		index_erstes_bild = anzahl_bilder - anzahl_thumbnails;
	// Anzeige der Thumbnails aktualisieren
	thumbnails_auffrischen ();
}

// Variablen im Beschriftungsstring durch die entsprechenden Werte ersetzen
function beschriftungsstring_ersetzen (beschriftung) {
	// Variablen in Beschriftungsstring ersetzen
	tstr = beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
	tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
	// Beschreibungstext wird nur ersetzt, wenn es nur ein einziges gibt
	// und sich das Format nach 'bild_beschriftung' richtet
	if (anzahl_beschreibungsfelder == 1)
		tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]["beschreibung"]);
	return tstr;
}