// JavaScript-Functies voor het fotoalbum

// array waarin de foto's worden opgeslagen
var Photos = new Array();

// foto aan galerie toevoegen
// thumbnail - URL naar thumbnail
// foto - URL naar foto
// alt - tekst in alt-tag
// bijschrift - bijschrift des Bildes, welches als Beschriftung unter dem Detailbild angezeigt werden soll
function addPhoto (thumbnail, foto, alt, bijschrift)
{
	Photos[Photos.length] = new Object();
	// URL des Thumbnail
	Photos[Photos.length - 1]["foto1"] = thumbnail;
	// URL des Bildes
	Photos[Photos.length - 1]["foto2"] = foto;
	// 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]["bijschrift"] = bijschrift;
}

// 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;
}

// Thumbnails automatisch erzeugen, um Fehler zu vermeiden
function plaats_thumbnails ()
{
	// 'aantal_thumbnails' Thumbnails erzeugen
	for (i = 0; i < aantal_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 = "javascript:toon_foto (" + (i + 1) + ")";
		// und einem IMG-Tag fuer den eigentlichen Thumbnail
		foto = document.createElement ("img");
		foto.border = "0";
		foto.id = "thumbnail" + (i + 1);

		// erzeugtes hierarchisch zusammenfuegen
		link.appendChild (foto);
		eintrag.appendChild (link);

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


// Thumbnails gemaess aktuellem index_eerste_thumbnail anzeigen
function thumbnails_verversen ()
{
	// Bei allen Thumbnails Daten des jeweiligen IMG-Tags (b1..b3) auffrischen
	for (i = 0; i < aantal_thumbnails; i++)
	{
		// Bild austauschen
		document.getElementById ('thumbnail' + (i + 1)).src = Photos[index_eerste_thumbnail + i]["foto1"];
		// Alt-Text austauschen
		document.getElementById ('thumbnail' + (i + 1)).alt = Photos[index_eerste_thumbnail + i]["alt"];
		// Title-Text austauschen
		document.getElementById ('thumbnail' + (i + 1)).title = Photos[index_eerste_thumbnail + i]["alt"];
	}

	// Navigationslinks fuer Thumbnails anzeigen
	//if (index_eerste_thumbnail > 0)
	//{
	//	document.getElementById ('zurueck').src = pad_naar_navbuttons + "/back.gif";
	//	document.getElementById ('pgup').src = pad_naar_navbuttons + "/pgup.gif";
	//}
	//else
	//{
	//	document.getElementById ('zurueck').src = pad_naar_navbuttons + "/first.gif";
	//	document.getElementById ('pgup').src = pad_naar_navbuttons + "/pgup_first.gif";
	//}
	//if (index_eerste_thumbnail + aantal_thumbnails < aantal_fotos)
	//{
	//	document.getElementById ('weiter').src = pad_naar_navbuttons + "/forward.gif";
	//	document.getElementById ('pgdown').src = pad_naar_navbuttons + "/pgdown.gif";
	//}
	//else
	//{
	//	document.getElementById ('weiter').src = pad_naar_navbuttons + "/last.gif";
	//	document.getElementById ('pgdown').src = pad_naar_navbuttons + "/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').firstChild)
	//	document.getElementById ('thumb_beschriftung').appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen
	//tnstr = thumbnail_string.replace (/%index_erster%/i, (index_eerste_thumbnail + 1));
	//tnstr = tnstr.replace (/%index_letzter%/i, (index_eerste_thumbnail + aantal_thumbnails));
	//tnstr = tnstr.replace (/%totaal_fotos%/i, aantal_fotos);
	// 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_eerste_thumbnail > 0)
	{
		// Index des ersten anzuzeigenden Thumbnails runterzaehlen
		// damit die Bilder beim Auffrischen um eine Stelle nach links verschoben werden
		index_eerste_thumbnail--;
		// Anzeige der Thumbnails aktualisieren
		thumbnails_verversen ();
	}
}

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

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

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

// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function toon_foto (i)
{
	// neuer Index des grossen Bildes
	index_foto = index_eerste_thumbnail + i - 1;
	// Anzeige des grossen Bildes auffrischen
	grosses_bild_auffrischen ();
}

// grosses Bild und zugehoerige Beschriftung im IMG mit der ID 'gross' anzeigen (nach index_foto)
function grosses_bild_auffrischen ()
{
	// URL des Bildes setzen
	document.getElementById ('gross').src = Photos[index_foto]["foto2"];
	// Alt-Text des Bildes setzen
	document.getElementById ('gross').alt = Photos[index_foto]["alt"];
	// Title-Text des Bildes setzen
	document.getElementById ('gross').title = Photos[index_foto]["alt"];

	// 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').firstChild)
		document.getElementById ('beschriftung').appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen
	tstr = foto_beschrijving.replace (/%index_groot%/i, (index_foto + 1));
	tstr = tstr.replace (/%totaal_fotos%/i, aantal_fotos);
	tstr = tstr.replace (/%bijschrift%/i, Photos[index_foto]["bijschrift"]);
	// Beschriftung des Bildes im zugehoerigen P-Tag setzen
	document.getElementById ('beschriftung').firstChild.data = tstr;

	if (!document.getElementById ('tekst').firstChild)
	document.getElementById ('tekst').appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen
	tsstr = tekst.replace (/%bijschrift%/i, Photos[index_foto]["bijschrift"]);
	// Beschriftung des Bildes im zugehoerigen P-Tag setzen
	document.getElementById ('tekst').firstChild.data = tsstr;


	// Navigationslinks fuer grosse Bilder anzeigen
	if (index_foto > 0)
		document.getElementById ('terug').src = pad_naar_navbuttons + "/back.gif";
	else
		document.getElementById ('terug').src = pad_naar_navbuttons + "/first.gif";

	if (aantal_fotos > index_foto + 1)
		document.getElementById ('verder').src = pad_naar_navbuttons + "/forward.gif";
	else
		document.getElementById ('verder').src = pad_naar_navbuttons + "/last.gif";
}

// vorheriges Bild (gross) aus Bilderliste anzeigen
function terug ()
{
	// nur noetig, wenn nicht schon das erste Bild angezeigt wird
	if (index_foto > 0)
	{
		// zum vorherigen Bild
		index_foto--;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen ();
	}
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function verder ()
{
	// nur wenn nicht schon beim letzten Bild angekommen
	if (index_foto + 1 < aantal_fotos)
	{
		// zum naechsten Bild
		index_foto++;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen ();
	}
}