// Mini-Gallery-Script based upon Lightbox 2.04 by FLOschn

// UNBEDINGT NOCH IM IE testen!!!
// Beim ersten Laufen des Skripts ist die ausgelesene Bildgröße "0", somit funktioniert die Margin-Berehcnung auch nicht! Fehlerbehebung?

// CONFIG DATA for thumbs
var thumbWidth = 175;
var thumbHeight = 100;
var borderWidth = 1;
var borderStyle = "solid";
var borderColor = "#FFF";
var separator = "::";
var columns = 3; // Spalten der Tabelle	


// Funktion, die die Übersicht in einer tabellarischen Form macht
function createGallery(id, centerHorizontally){
	
	//preloadImages(id);
	
	var ul = document.getElementById(id);
	ul.style.display = "none"; // die Liste namens "id" wird unsichtbar gemacht
	//var numberOfChildren = ul.childNodes.length;
	//alert("Childnodes von " + id + ": " + numberOfChildren);
	
	var node = ul.firstChild;
	var i = 1;
	var splitter;
	var path;
	var title;
	//node = node.nextSibling;
	var mainDir = "";
	var doContinue;
	size = new Array();
	
	// Ausgabe
	document.write("<table cellpadding='10' cellspacing='0' border='0'>"); // Tabellenanfang
	document.write("<tr>");
	while(node != null){
		
		//if(node.hasChildNodes() && node.firstChild.nodeType == 3){ // Nur wenn es sich um einen Textknoten handelt (FF und Co. nehmen auch Leerzeichen, Tabs, Kommentare, etc. als Kindknoten in die Liste)
		if(node.hasChildNodes() && node.nodeName == "LI"){ // Nur wenn es sich um einen <li>Knoten handelt
						
			if(mainDir.length == 0){ // MainDir setzen, wenn noch nicht gesetzt (liegt im ersten <li> Knoten)
				mainDir = node.firstChild.nodeValue;
				//document.write("mainDir is now set to: " + mainDir);
			}		
			
			// continue funktioniert nicht, deshalb unten eine weitere Abfrage: mainDir != node.firstChild.nodeValue		
			if(mainDir != node.firstChild.nodeValue){ // Abfrage, ob es sich NICHT um den MainDir-Knoten handelt
				document.write("<td valign='top' align='left'><div style='background-color: #000; overflow: hidden; width: " + thumbWidth + "px; height: " + thumbHeight + "px; border-width: " + borderWidth + "px; border-style: " + borderStyle + "; border-color: " + borderColor + ";' id='thumbDiv" + i + "'>");
				if(node.firstChild.nodeValue.indexOf(separator) > 0){ // Wenn ein durch "::" getrennter Titel zum Bild Vorhanden ist, dann auch ausgeben
					splitter = node.firstChild.nodeValue.split(separator);
					path = splitter[0];
					title = splitter[1];
					
					path = mainDir + path;
					path = path.replace("%20", "");
					path = path.replace(" ", "");
					
					// Bild laden
					var newImg = new Image();
					newImg.src = mainDir + path;
					
					//document.write("Pfad zum Bild: " + mainDir + path + "<br />");
					if(centerHorizontally == true){
						document.write("<a href='" + path + "' rel='lightbox[" + id + "]' title='" + title + "' style='display: block; width: " + thumbWidth + "px; height: " + thumbHeight + "px;'><img src='" + path + "' width='" + thumbWidth + "' alt='Bild' border='0' id='thumb" + i + "' onLoad='javascript: setMargins(this.width, this.height, \"thumb" + i + "\");' /></a>");				
					}else{
						document.write("<a href='" + path + "' rel='lightbox[" + id + "]' title='" + title + "' style='display: block; width: " + thumbWidth + "px; height: " + thumbHeight + "px;'><img src='" + path + "' width='" + thumbWidth + "' alt='Bild' border='0' id='thumb" + i + "' /></a>");				
					}


					// Wenn das Bild fertig geladen ist, dann wird die Breite/Höhe ausgerechnet und der Margin gesetzt
					document.write("</div>");
					document.write("<p align='center'>" + title + "</p>");
					
				}else{ // ansonsten nur Bild ausgeben
					
					// Bild laden
					var newImg = new Image();
					newImg.src = mainDir + node.firstChild.nodeValue;
					path = mainDir + node.firstChild.nodeValue;
					path = path.replace("%20", "");
					path = path.replace(" ", "");
					//alert("Pfad zum Bild: " + path);

					//document.write("Pfad zum Bild: " + mainDir + node.firstChild.nodeValue + "<br />");					
					if(centerHorizontally == true){
						document.write("<a href='" + path + "' rel='lightbox[" + id + "]' title='Bild vergr&ouml;&szlig;ern' style='display: block; width: " + thumbWidth + "px; height: " + thumbHeight + "px;'><img src='" + path + "' width='" + thumbWidth + "' alt='Bild' border='0' id='thumb" + i + "' onLoad='javascript: setMargins(this.width, this.height, \"thumb" + i + "\");' /></a>");
					}else{
						document.write("<a href='" + path + "' rel='lightbox[" + id + "]' title='Bild vergr&ouml;&szlig;ern' style='display: block; width: " + thumbWidth + "px; height: " + thumbHeight + "px;'><img src='" + path + "' width='" + thumbWidth + "' alt='Bild' border='0' id='thumb" + i + "' /></a>");
					}
					// Wenn das Bild fertig geladen ist, dann wird die Breite/Höhe ausgerechnet und der Margin gesetzt
					document.write("</div>");
				}
				document.write("</td>");
				
				// Nach (standardmäßig) 3 Bildern pro Zeile eine Umschaltung in die nächste Zeile machen
				if(i%columns == 0){
					document.write("</tr><tr>");	
				}
				i++;
			}
			
			
			
		}
		node = node.nextSibling; // node wird der nächste Kindknoten zugewiesen
		
	}
	i--;
	if(i%columns != 0){
		while(i%columns != 0){
			document.write("<td><p>&nbsp;</p></td>");	
			i++;
		}
	}
	
	document.write("<tr>");
	document.write("</table>");
	
}

function setMargins(width, height, id){
	var marginLeft = -((width - thumbWidth) / 2);
	var marginTop = -((height - thumbHeight) / 2);
	//alert("Width: " + width + " | Height: " + height);
	//alert("ID: " + id);
	//alert("Margin-Top: " + marginTop);
	document.getElementById(id).style.marginLeft = marginLeft + "px";
	document.getElementById(id).style.marginTop = marginTop + "px";
	
}

String.prototype.trim = function () {
    return this.replace(/^s+/g, '').replace(/s+$/g, '');
}