/**
***********************************
* Eine Art Popup für Bildanzeigen 
***********************************
*
* Version 1.2 (2008/03/16)
*
*Diese Bibliothek erzeugt ein Javascript-Objekt (js_popup), das sich im HTML-Code ein DIV-
*Element erzeugt, dessen ID "js-popup" heißt und welches für die Anzeige einer Vollansicht zu
*einem Thubnail-Bild verwendet wird.
*
*Die Benutzung des js_popup-Objektes ist sehr einfach. Da sich das Script basierend auf einer
*hier einzustellenden CSS-Klasse die Link-Elemente dynamisch aus einem beliebigen Eltern-
*Element holt und ihnen ein onClick-Event zuweist, braucht es im HTML- Quelltext lediglich
*folgende Struktur (<element> steht stellvertretend für Elemente wie <p>, <div>, <span> usw.):
*
*<element class="bildergalerie">
*<a href="pfad/img.jpg"><img src="pfad/tn_img.jpg" alt="Beschreibung" /></a>
*</element>
*
*Die Vollansicht wird als Bildunterschrift den Wert aus dem ohnehin zwingend erforderlichen
*alt-Attribut verwenden. 
*
*Diese Bibliothek unterliegt der LGPL!
*
* SOFTWARE LICENSE: LGPL
* (C) 2006-2008 Felix Riesterer
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
* 
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
* Lesser General Public License for more details.
* 
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
*
*
*erstellt von Felix Riesterer (Felix.Riesterer@gmx.net)
*/

// js_popup-Objekt definieren
var jsPopup = {

	settings : {
		// Hier steht später die URL dieses Scripts
		baseURL : false,

		// Hier die CSS-Klasse eintragen, die Links in Kindelementen mit der Popup-Funktion versieht!
		triggerCssClass : "bildergalerie",
		// CSS-ID für das Popup-Eltern-Element (DIV)
		parentDiv : {
			cssID : "js-popup"
		},
		// CSS-ID für die Popup-Box (DIV)
		popupBox : {
			cssID : "js-popup-box"
		},
		// Bilddatei für den Overlay-Hintergrund (teiltransparente PNG-Grafik)
		overlayBackground : {
			src_png : "{$baseURL}/images/overlay.png",
			src_blank_gif : "{$baseURL}/images/blank.gif"
		},
		// CSS-ID für das Vollansichts-Bild
		fullViewImage : {
			cssID : "js-popup-image"
		},
		// Bilddatei für die Lade-Animation
		waitAnimation : {
			src : "{$baseURL}/images/sanduhr.gif",
			alt : "Sanduhr",
			cssID : "js-popup-wait"
		},
		// Bilddatei für das Schließen-Icon
		closeIcon : {
			src : "{$baseURL}/images/x-beenden.gif",
			alt : "schlie&szlig;en",
			cssID : "js-popup-close"
		},
		// Bilddateien für das Icon zum Vergrößern/Verkleinern
		resizeIcon : {
			src_resize : "{$baseURL}/images/resize.gif",
			alt_resize : "verkleinern",
			src_fullSize : "{$baseURL}/images/resize_full.gif",
			alt_fullSize : "volle Gr&ouml;&szlig;e",
			cssID : "js-popup-resize"
		},
		// Meldung während des Ladens
		waitText : "Bild wird geladen...",
		// Alternative Bildunterschrift, falls das Thumbnail kein (oder ein leeres) alt-Attribut besitzt
		altCaption : "..."
	},




	controls : {
		oversize : "resize",
		boxWidth : 90,
		boxHeight : 90,
		boxMaxWidth : 100,
		boxMaxHeight : 100,
		winInnerWidth : 100,
		winInnerHeight : 100
	},




	htmlElements : { },




	functions : {

		// Fensterinhalt überblenden und Lademeldung anzeigen
		preload : function (linkObj) {
			// wurde jsPopup nicht korrekt initialisiert? -> Nachholen!
			if (!jsPopup.htmlElements.box) {
				jsPopup.functions.oldWinOnLoad = window.onload;
				jsPopup.functions.oldWinOnResize = window.onresize;

				window.onresize = function () {
					if (typeof(jsPopup.functions.oldWinOnResize) == "function")
						jsPopup.functions.oldWinOnResize();
					jsPopup.functions.initPopupBox();
				}

				jsPopup.functions.initPopupBox();
			}

			// Resized-Darstellung und Popup-Abmessungen für die Ladeanzeige setzen
			jsPopup.preloadImage = new Image();
			jsPopup.preloadImage.src = linkObj.href;

			var html_code = jsPopup.settings.waitText
				+ ' <img src="' + jsPopup.settings.waitAnimation.src
				+ '" alt="' + jsPopup.settings.waitAnimation.alt
				+ '" id="' + jsPopup.settings.waitAnimation.cssID
				+ '" />';

			jsPopup.htmlElements.box.innerHTML = html_code;
			jsPopup.controls.boxWidth = 200;
			jsPopup.controls.boxHeight = 50;

			jsPopup.functions.center();


			// Bildunterschrift für die Vollansicht vorbereiten
			jsPopup.preloadImage.caption = '';

			var caption = linkObj.getElementsByTagName("img")[0].getAttribute("alt");
			jsPopup.preloadImage.caption = (caption && caption != "") ? caption : jsPopup.settings.altCaption;

			jsPopup.htmlElements.div.style.display = "block";

			if (jsPopup.preloadImage.width > 0) {
				// Bild schon im Cache geladen? -> Sofort anzeigen
				jsPopup.functions.display();
			} else {
				// Eventhandler setzen, damit nach dem Laden eine Anzeige kommt
				jsPopup.functions.addEvent("load", jsPopup.preloadImage, jsPopup.functions.display);
				jsPopup.functions.addEvent("error", jsPopup.preloadImage, jsPopup.functions.display);
			}

			return false;
		},




		// Popup mit Vollansichtsbild anzeigen
		display : function () {
			// DIV unsichtbar schalten, um die Ladeanzeige zu deaktivieren
			jsPopup.htmlElements.box.style.display = "none";

			// Minimal-Größe für die Popup-Box
			jsPopup.controls.boxWidth = 90;
			jsPopup.controls.boxHeight = 90;

			// DIV-Box neu mit HTML-Code befüllen
			var html_code = '<img id="' + jsPopup.settings.closeIcon.cssID + '" src="' + jsPopup.settings.closeIcon.src + '" alt="' + jsPopup.settings.closeIcon.alt + '" />';

			// Bild größer als Minimal-Größe? -> Box vergrößern
			if (
				jsPopup.preloadImage.width > jsPopup.controls.boxWidth
				|| jsPopup.preloadImage.height > jsPopup.controls.boxHeight
			) {
				jsPopup.controls.boxWidth = jsPopup.preloadImage.width;
				jsPopup.controls.boxHeight = jsPopup.preloadImage.height;
			}

			// Bild größer als Maximal-Größe?
			if (
				jsPopup.controls.boxWidth > jsPopup.controls.boxMaxWidth
				|| jsPopup.controls.boxHeight > jsPopup.controls.boxMaxHeight
			) {
				html_code += '<img src="';
				html_code += (jsPopup.controls.oversize == "resize") ? jsPopup.settings.resizeIcon.src_fullSize : jsPopup.settings.resizeIcon.src_resize;
				html_code += '" alt="';
				html_code += (jsPopup.controls.oversize == "resize") ? jsPopup.settings.resizeIcon.alt_fullSize : jsPopup.settings.resizeIcon.alt_resize;
				html_code += '" id="' + jsPopup.settings.resizeIcon.cssID + '" />';

				// Bild soll verkleinert angezeigt werden?
				if (jsPopup.controls.oversize == "resize") {
					// Bild  proportional verkleinern
					var ratio = jsPopup.preloadImage.width / jsPopup.preloadImage.height;
					var scale = jsPopup.preloadImage.width / jsPopup.controls.boxMaxWidth;
					if (jsPopup.preloadImage.height / scale > jsPopup.controls.boxMaxHeight) scale = jsPopup.preloadImage.height / jsPopup.controls.boxMaxHeight;

					jsPopup.controls.boxWidth = Math.ceil(jsPopup.preloadImage.width / scale);
					jsPopup.controls.boxHeight = Math.ceil(jsPopup.preloadImage.height / scale);
				}
			}

			jsPopup.functions.center();

			html_code += '<img id="'
				+ jsPopup.settings.fullViewImage.cssID
				+ '" alt="'
				+ jsPopup.preloadImage.caption
				+ '" />';

			if (jsPopup.preloadImage.caption != "") {
				html_code += '<br />' + jsPopup.preloadImage.caption;
			}

			jsPopup.htmlElements.box.innerHTML = html_code;

			jsPopup.htmlElements.fullViewImage = document.getElementById(jsPopup.settings.fullViewImage.cssID);
			jsPopup.htmlElements.fullViewImage.src = jsPopup.preloadImage.src;
			//jsPopup.htmlElements.fullViewImage.width = jsPopup.controls.boxWidth;
			//jsPopup.htmlElements.fullViewImage.height = jsPopup.controls.boxHeight;

			jsPopup.htmlElements.box.style.display = "block";

			// Eventhandler für das Resize-Icon setzen
			jsPopup.htmlElements.resizeIcon = document.getElementById(jsPopup.settings.resizeIcon.cssID);
			if (jsPopup.htmlElements.resizeIcon) {
				jsPopup.functions.addEvent("click", jsPopup.htmlElements.resizeIcon, jsPopup.functions.toggleResize);
				jsPopup.functions.addEvent("mouseover", jsPopup.htmlElements.resizeIcon,
					function () { this.style.display = "inline"; }
				);
				jsPopup.htmlElements.resizeIcon.style.display = "none";

				jsPopup.functions.addEvent("mouseover", jsPopup.htmlElements.fullViewImage,
					function () {
						document.getElementById(jsPopup.settings.resizeIcon.cssID).style.display = "inline";
					}
				);

				jsPopup.functions.addEvent("mouseout", jsPopup.htmlElements.fullViewImage,
					function () {
						document.getElementById(jsPopup.settings.resizeIcon.cssID).style.display = "none";
					}
				);
			}

			return false;
		},




		// Popup auf dem Bildschirm zentrieren (es wird das DIV mit der id "js-popup-box" ausgerichtet, welches als Objekt "jsPopup.box" verfügbar ist)
		center : function () {
			// Popup-Box in linke obere Ecke positionieren
			var x_pos = 0;
			var y_pos = 0;

			// zentrierte Position der Box errechnen
			if (window.innerWidth) {
				x_pos = Math.ceil((jsPopup.controls.winInnerWidth - jsPopup.controls.boxWidth)/2 + window.pageXOffset);
				y_pos = Math.ceil((jsPopup.controls.winInnerHeight - jsPopup.controls.boxHeight)/2 + window.pageYOffset);
			} else {
				x_pos = Math.ceil((jsPopup.controls.winInnerWidth - jsPopup.controls.boxWidth)/2 + jsPopup.IE.scrollLeft);
				y_pos = Math.ceil((jsPopup.controls.winInnerHeight - jsPopup.controls.boxHeight)/2 + jsPopup.IE.scrollTop);
			}

			// Padding berücksichtigen
			x_pos -= 15;
			y_pos -= 15;

			// übergroßes Bild? -> in Linke obere Ecke positionieren
			if (x_pos < 0)
				x_pos = 0;

			if (y_pos < 0)
				y_pos = 0;

			// Popup-Box positionieren
			jsPopup.htmlElements.box.style.left = x_pos + "px";
			jsPopup.htmlElements.box.style.top = y_pos + "px";

			return false;
		},




		// Verkleinerung des Popup-Bildes ein-/ausschalten
		toggleResize : function (e) {
			if (!e)
				e = window.event;

			if (e.stopPropagation)
				e.stopPropagation();

			e.cancelBubble = true;

			jsPopup.controls.oversize = (jsPopup.controls.oversize == "resize") ? "fullView" : "resize";
			jsPopup.functions.display();

			return false;
		},




		// Popup wieder ausschalten (verbergen)
		hide : function () {
			jsPopup.htmlElements.div.style.display = "none";

			return false;
		},




		// Funktion zum Ermitteln der maximalen Fensterfläche
		getBrowserDimensions : function () {
			if (window.innerWidth) {
				jsPopup.controls.winInnerWidth = window.innerWidth;
				jsPopup.controls.winInnerHeight = window.innerHeight;
			} else {
				jsPopup.controls.winInnerWidth = jsPopup.IE.offsetWidth;
				jsPopup.controls.winInnerHeight = jsPopup.IE.offsetHeight;
			}

			// Maximal-Größe für die Popup-Box abzüglich eines Rahmens
			jsPopup.controls.boxMaxWidth = jsPopup.controls.winInnerWidth - 50;
			jsPopup.controls.boxMaxHeight = jsPopup.controls.winInnerHeight - 50;

			return false;
		},




		// Funktion zum Setzen eines Eventhandlers
		addEvent : function (ev, obj, handle) {
			if (navigator.userAgent.toLowerCase().lastIndexOf("msie") < 0) {
				obj.addEventListener(ev, handle, false);
				obj.addEventListener(ev, handle, false);
			} else {
				obj.attachEvent("on" + ev, handle);
				obj.attachEvent("on" + ev, handle);
			}
		},




		// Funktion zum Löschen eines Eventhandlers
		removeEvent : function (ev, obj, handle) {
			if (navigator.userAgent.toLowerCase().lastIndexOf("msie") < 0) {
				obj.removeEventListener(ev, handle, false);
				obj.removeEventListener(ev, handle, false);
			} else {
				obj.detachEvent("on" + ev, handle);
				obj.detachEvent("on" + ev, handle);
			}
		},




		// Funktion zum Bereiten der PopupBox
		initPopupBox : function () {
			// Quirksmode des IE berücksichtigen
			jsPopup.IE = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null;

			// Fenstermaße ermitteln
			jsPopup.functions.getBrowserDimensions();

			// Falls noch kein DIV-Element mit der ID "js-popup" existiert, ein solches erzeugen und am Ende des body-Dokuments hinzufügen
			jsPopup.htmlElements.div = document.getElementById(jsPopup.settings.parentDiv.cssID);
			if (!jsPopup.htmlElements.div) {
				jsPopup.htmlElements.div = document.createElement("div");
				jsPopup.htmlElements.div.id = jsPopup.settings.parentDiv.cssID;
				document.body.appendChild(jsPopup.htmlElements.div);

				// Style-Angaben zum vorläufigen Verstecken des DIVs
				jsPopup.htmlElements.div.style.display = "none";
				jsPopup.htmlElements.div.style.position = "absolute";
				jsPopup.htmlElements.div.style.backgroundImage = "url(" + jsPopup.settings.overlayBackground.src_png + ")";

				// Dieses DIV-Element ist die eigentliche Box mit der Vollansicht
				jsPopup.htmlElements.box = document.createElement("div");
				jsPopup.htmlElements.box.id = jsPopup.settings.popupBox.cssID;
				jsPopup.htmlElements.box.style.position = "absolute";

				// Die eigentliche Box mit der Vollansicht in das Popup-Eltern-DIV einhängen und click-Ereignis zuweisen
				jsPopup.htmlElements.div.appendChild(jsPopup.htmlElements.box);
				jsPopup.functions.addEvent("click", jsPopup.htmlElements.div, jsPopup.functions.hide);
				jsPopup.functions.addEvent("click", jsPopup.htmlElements.box, jsPopup.functions.hide);

				if (typeof(jsPopup.htmlElements.div.style.filter) != "undefined") {
					// AlpgaImageLoader für echte Transparenz auf das Hintergrundbild des "js-popup"-DIVs anwenden
					jsPopup.htmlElements.div.style.backgroundImage = "url(" + jsPopup.settings.overlayBackground.src_blank_gif + ")";
					jsPopup.htmlElements.div.style.filter = ''
						+ 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'
						+ jsPopup.settings.overlayBackground.src_png
						+ '", sizingMethod="scale")';
				}
			}

			// Style-Angaben für das "js-popup"-DIV, damit es das komplette Browserfenster ausfüllt
			if (window.innerWidth && typeof(window.scrollMaxY)) {
				jsPopup.htmlElements.div.style.width = document.body.scrollWidth + "px";
				jsPopup.htmlElements.div.style.height = window.innerHeight + window.scrollMaxY + "px";
			}

			if (jsPopup.IE.scrollWidth) {
				jsPopup.htmlElements.div.style.width = jsPopup.IE.scrollWidth + "px";
				jsPopup.htmlElements.div.style.height = jsPopup.IE.scrollHeight + "px";
			}

			// alle HTML-Elternelemente mit der oben eingestellten CSS-Klasse ermitteln, um ihnen die Vollansichts-Funktionalität zu geben
			var allElements = document.getElementsByTagName("*");

			var allGalleries = new Array();
			for (var index_e = 0; index_e < allElements.length; index_e++) {
				if (allElements[index_e].className.indexOf(jsPopup.settings.triggerCssClass) != -1) {
					// Das Class-Attribut eines HTML-Elementes kann mehrere Klassennamen enthalten, die alle durch Leerzeichen getrennt sind.
					// Diese Leerzeichen werden nun durch Kommata ersetzt, ebenso am Anfang und Ende je ein Komma hinzugefügt, sodass
					// der gesuchte Klassenname zwischen zwei Kommas stehen muss, wenn er denn für dieses Element existiert.
					var test = "," + allElements[index_e].className.split(" ").join(",") + ",";

					if (test.indexOf("," + jsPopup.settings.triggerCssClass + ",") != -1)
						allGalleries.push(allElements[index_e]);
				}
			}

			for (var index_g = 0; index_g < allGalleries.length; index_g++) {
				// alle Bilder-Links eines gefundenen Elternelements mit der Popup-Funktion erweitern
				var allLinks = allGalleries[index_g].getElementsByTagName("a");

				for (var index_a = 0; index_a < allLinks.length; index_a++) {
					// jedes Link-Element auf enthaltendes Bild überprüfen
					if (allLinks[index_a].getElementsByTagName("img")[0])
						// falls Bild im Link, Popup-Funktion anbringen
						allLinks[index_a].onclick = function () {
							return jsPopup.functions.preload(this);
						};
				}
			}
		},




		// Initialisierung des kompletten jsPopup-Objektes
		init : function () {
			// baseURL bestimmen
			var scripts = document.getElementsByTagName("script");

			for (var i = 0; i < scripts.length; i++) {
				if (scripts[i].src && scripts[i].src.match(/\/js_popup.js\b/i)) {
					jsPopup.settings.baseURL = scripts[i].src.replace(/^(.*\/)[^\/]+$/, "$1");
				}
			}

			// CSS einbinden
			var css = document.createElement("link");
			css.rel = "stylesheet";
			css.type = "text/css";
			css.media = "screen, projection";
			css.href = jsPopup.settings.baseURL + "css/js_popup.css";
			document.getElementsByTagName("head")[0].appendChild(css);

			// URLs in den Settings anpassen
			for (var setting in jsPopup.settings) {
				var valueAlt = jsPopup.settings[setting];
				if (typeof (valueAlt) == "string") {
					if (valueAlt.match(/^\{\$baseURL\}/g))
						jsPopup.settings[setting] = valueAlt.replace(/^\{\$baseURL\}\/?/g, jsPopup.settings.baseURL);
				} else {
					for (var subsetting in valueAlt) {
						var subValueAlt = valueAlt[subsetting];
						if (typeof (subValueAlt) == "string")
							if (subValueAlt.match(/^\{\$baseURL\}/g))
								jsPopup.settings[setting][subsetting] = subValueAlt.replace(/^\{\$baseURL\}\/?/g, jsPopup.settings.baseURL);
					}
				}
			}

			// PopupBox einrichten lassen, wenn die Seite fertig geladen hat
			jsPopup.functions.oldWinOnLoad = window.onload;
			window.onload = function () {
				if (typeof (jsPopup.functions.oldWinOnLoad) == "function")
					jsPopup.functions.oldWinOnLoad();

				jsPopup.functions.initPopupBox();
			};
		},



		// Platzhalter für alte onload-Funktion vor dem Einbinden von jsPopup
		oldWinOnLoad : null
		}
	};


// Die Popup-Funktionalität initialisieren
jsPopup.functions.init();