// Copyright (C) 2005 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.

// Datenstruktur, in der die einzelnen Bilddaten gespeichert werden,
// in Form eines assoziativen Arrays anlegen


var Photos = new Array();
			
// Photo zur Galerie hinzufuegen
// array - Entsprechender Array
// 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
function addPhoto (array, thumbnail, bild, alt, beschreibung)
{
	array[array.length] = new Object();
	// URL des Thumbnail
	array[array.length - 1]["datei"] = thumbnail;
	// URL des Bildes
	array[array.length - 1]["datei_gross"] = bild;
	// Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
	array[array.length - 1]["alt"] = alt;
	// Kurze Bildbeschreibung zum jeweiligen Bild
	array[array.length - 1]["beschreibung"] = beschreibung;
}

// Thumbnails für gallery_name automatisch erzeugen, um Fehler zu vermeiden
function erzeuge_thumbnails (gallery_name)
{
	// 'anzahl_thumbnails' Thumbnails erzeugen
	for (i = 0; i < anzahl_thumbnails; i++)
	{
		// Ein Thumbnail besteht aus einem LI-Tag, ...
		var eintrag = document.createElement ("li");
		// einem Link ...
		var link = document.createElement ("a");
		// , der per JavaScript das entsprechende Bild austauscht
		link.href = "javascript:grosses_bild_anzeigen ('" + gallery_name + "', " + (i + 1) + ")";
		// und einem IMG-Tag fuer den eigentlichen Thumbnail
		var bild = document.createElement ("img");
		bild.id = "thumbnail_" + gallery_name + (i + 1);

		// erzeugtes hierarchisch zusammenfuegen
		link.appendChild (bild);
		eintrag.appendChild (link);
		// und unter Tag mit der ID 'thumb' ins Dokument einhaengen
		document.getElementById ('thumbs_' + gallery_name).appendChild (eintrag);
	}
	thumbnails_auffrischen(gallery_name);
}

// Thumbnails gemaess aktuellem index_erstes_bild anzeigen
function thumbnails_auffrischen (gallery_name)
{
	// Bei allen Thumbnails Daten des jeweiligen IMG-Tags (b1..b3) auffrischen
	for (i = 0; i < anzahl_thumbnails; i++)
	{
		var image = document.getElementById ('thumbnail_' + gallery_name + (i + 1));
        // Bild austauschen
		image.src = Photos[index_erstes_bild + i]["datei"];	
		// Alt-Text austauschen
		image.alt = Photos[index_erstes_bild + i]["alt"];
		// Title-Text austauschen
		image.title = Photos[index_erstes_bild + i]["alt"];
        if (image.width < image.height)
		{
            image.style.marginTop = 0+"px";
			image.style.marginRight = 15+"px";
			image.style.marginBottom = 5+"px";
			image.style.marginLeft = 15+"px";       
		}else
		{
            image.style.marginTop = 10+"px";
			image.style.marginRight = 5+"px";
			image.style.marginBottom = 15+"px";
			image.style.marginLeft = 5+"px";
		}
	}

	// Navigationslinks fuer Thumbnails anzeigen
	if (index_erstes_bild > 0)
	{
        document.getElementById ('zurueck_' + gallery_name).src = "images/arrow1_left.gif";
		//document.getElementById ('pgup').src = pfad_zu_navbildern + "/pgup.gif";
	}else
	{
        document.getElementById ('zurueck_' + gallery_name).src = "images/arrow1_left.gif";
		//document.getElementById ('pgup').src = pfad_zu_navbildern + "/pgup_first.gif";
	}

    if (index_erstes_bild + anzahl_thumbnails < anzahl_bilder)
	{
        document.getElementById ('weiter_' + gallery_name).src = "images/arrow1_right.gif";
		//document.getElementById ('pgdown').src = pfad_zu_navbildern + "/pgdown.gif";
	}else
	{
		document.getElementById ('weiter_' + gallery_name).src = "images/arrow1_right.gif";
		//document.getElementById ('pgdown').src = pfad_zu_navbildern + "/pgdown_last.gif";
	}

	// 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_' + gallery_name).firstChild)
		document.getElementById ('thumb_beschriftung_' + gallery_name).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_' + gallery_name).firstChild.data = tnstr;
}

// Thumbnail-Liste ein Bild zurueck scrollen
function zurueck (gallery_name)
{
    actualizeGalleryParameters(gallery_name);
    // 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 (gallery_name);
		// Daten speichern
		setGalleryParameters(gallery_name);
	}
}

// Thumbnail-Liste ein Bild vorwaerts scrollen
function weiter (gallery_name)
{
	actualizeGalleryParameters(gallery_name);
    // 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 (gallery_name);
		// Daten speichern
		setGalleryParameters(gallery_name);
	}
}

// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function grosses_bild_anzeigen (gallery_name, i)
{
	actualizeGalleryParameters(gallery_name);
    document.getElementById ('grosscontainer_' + gallery_name).style.display = "block";
	// neuer Index des grossen Bildes
	index_grosses_bild = index_erstes_bild + i - 1;
	// Anzeige des grossen Bildes auffrischen
	grosses_bild_auffrischen (gallery_name);
	// Daten speichern
    setGalleryParameters(gallery_name);
}

// grosses Bild und zugehoerige Beschriftung im IMG mit der ID 'gross' anzeigen (nach index_grosses_bild)
function grosses_bild_auffrischen (gallery_name)
{
	grosses_bild = document.getElementById ('gross_' + gallery_name);
	// URL des Bildes setzen
	grosses_bild.src = Photos[index_grosses_bild]["datei_gross"];
	// Alt-Text des Bildes setzen
	grosses_bild.alt = Photos[index_grosses_bild]["alt"];
	// Title-Text des Bildes setzen
	grosses_bild.title = Photos[index_grosses_bild]["alt"];
	// Breite setzen, falls Originalbild in anderer Groesse
	grosses_bild.width = 440;
	// Hoehe auslesen
	grosses_bild.onload = function()
	{
    	var actual_height = grosses_bild.height;
    	document.getElementById ('grossleft_' + gallery_name).height = actual_height + 40;
    	document.getElementById ('grossright_' + gallery_name).height = actual_height + 40;
    	document.getElementById ('weiter_gross_' + gallery_name).style.marginTop = actual_height / 2 - 15 +"px";
    	document.getElementById ('zurueck_gross_' + gallery_name).style.marginTop = actual_height / 2 - 15 +"px";
	}
	// Falls das P-Tag mit der ID 'beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
	// damit die Beschriftungsdaten darin gespeichert werden koennen
	if (!document.getElementById ('beschriftung_' + gallery_name).firstChild)
		document.getElementById ('beschriftung_' + gallery_name).appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen
	tstr = bild_beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
	tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
	tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]["beschreibung"]);
	// Beschriftung des Bildes im zugehoerigen P-Tag setzen
	document.getElementById ('beschriftung_' + gallery_name).firstChild.data = tstr;

	// Navigationslinks fuer grosse Bilder anzeigen
	if (index_grosses_bild > 0)
		document.getElementById ('zurueck_gross_' + gallery_name).src = pfad_zu_navbildern + "/arrow1_left.gif";
	else
		document.getElementById ('zurueck_gross_' + gallery_name).src = pfad_zu_navbildern + "/arrow1_left.gif";

	if (anzahl_bilder > index_grosses_bild + 1)
		document.getElementById ('weiter_gross_' + gallery_name).src = pfad_zu_navbildern + "/arrow1_right.gif";
	else
		document.getElementById ('weiter_gross_' + gallery_name).src = pfad_zu_navbildern + "/arrow1_right.gif";
}

// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross (gallery_name)
{
	actualizeGalleryParameters(gallery_name);
    // nur noetig, wenn nicht schon das erste Bild angezeigt wird
	if (index_grosses_bild > 0)
	{
		// zum vorherigen Bild
		index_grosses_bild--;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen (gallery_name);
		// Daten speichern
		setGalleryParameters(gallery_name);
	}
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross (gallery_name)
{
	actualizeGalleryParameters(gallery_name);
    // nur wenn nicht schon beim letzten Bild angekommen
	if (index_grosses_bild + 1 < anzahl_bilder)
	{
		// zum naechsten Bild
		index_grosses_bild++;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen (gallery_name);
		// Daten speichern
		setGalleryParameters(gallery_name);
	}
}