/**
***********************************
* Eine Art Popup für Bildanzeigen 
***********************************
*
*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="gallerie">
*<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. 
*
*
*erstellt von Felix Riesterer (Felix.Riesterer@gmx.net)
*/

// js_popup-Objekt definieren
var js_popup =
	{
	settings :
		{
		// Hier die CSS-Klasse eintragen, die Links in Kindelementen mit der Popup-Funktion versieht!
		triggerCssClass : "bildergallerie",
		// 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 : "/js/overlay.png",
			src_blank_gif : "/js/blank.gif"
			},
		// CSS-ID für das Vollansichts-Bild
		fullViewImage : {
			cssID : "js-popup-image"
			},
		// Bilddatei für die Lade-Animation
		waitAnimation : {
			src : "/js/sanduhr.gif",
			alt : "Sanduhr",
			cssID : "js-popup-wait"
			},
		// Bilddatei für das Schließen-Icon
		closeIcon : {
			src : "/js/x-beenden.gif",
			alt : "schlie&szlig;en",
			cssID : "js-popup-close"
			},
		// Bilddateien für das Icon zum Vergrößern/Verkleinern
		resizeIcon : {
			src_resize : "/js/resize.gif",
			alt_resize : "verkleinern",
			src_fullSize : "/js/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)
			{
			// Resized-Darstellung und Popup-Abmessungen für die Ladeanzeige setzen
			js_popup.preloadImage = new Image();
			js_popup.preloadImage.src = linkObj.href;

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

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

			js_popup.functions.center();


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

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

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

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

			return false;
			},




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

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

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

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

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

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

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

			js_popup.functions.center();

			html_code += '<img id="' + js_popup.settings.fullViewImage.cssID + '" alt="' + js_popup.preloadImage.caption + '" />';
			if(js_popup.preloadImage.caption != "") html_code += '<br />' + js_popup.preloadImage.caption;

			js_popup.htmlElements.box.innerHTML = html_code;

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

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

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

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

				js_popup.functions.addEvent("mouseout", js_popup.htmlElements.fullViewImage,
					function ()
						{ document.getElementById(js_popup.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 "js_popup.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((js_popup.controls.winInnerWidth - js_popup.controls.boxWidth)/2 + window.pageXOffset);
				y_pos = Math.ceil((js_popup.controls.winInnerHeight - js_popup.controls.boxHeight)/2 + window.pageYOffset);
				}
			else
				{
				x_pos = Math.ceil((js_popup.controls.winInnerWidth - js_popup.controls.boxWidth)/2 + js_popup.IE.scrollLeft);
				y_pos = Math.ceil((js_popup.controls.winInnerHeight - js_popup.controls.boxHeight)/2 + js_popup.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
			js_popup.htmlElements.box.style.left = x_pos + "px";
			js_popup.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;

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

			return false;
			},




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

			return false;
			},




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

			// Maximal-Größe für die Popup-Box abzüglich eines Rahmens
			js_popup.controls.boxMaxWidth = js_popup.controls.winInnerWidth - 50;
			js_popup.controls.boxMaxHeight = js_popup.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);
				}
			},




		// Initialisierung des kompletten Popup-Objektes
		init : function ()
			{
			// Quirksmode des IE berücksichtigen
			js_popup.IE = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null;

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

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

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

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

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

				if(typeof(js_popup.htmlElements.div.style.filter) != "undefined")
					{
					// AlpgaImageLoader für echte Transparenz auf das Hintergrundbild des "js-popup"-DIVs anwenden
					js_popup.htmlElements.div.style.backgroundImage = "url(" + js_popup.settings.overlayBackground.src_blank_gif + ")";
					js_popup.htmlElements.div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'
																+ js_popup.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))
				{
				js_popup.htmlElements.div.style.width = document.body.scrollWidth + "px";
				js_popup.htmlElements.div.style.height = window.innerHeight + window.scrollMaxY + "px";
				}

			if(js_popup.IE.scrollWidth)
				{
				js_popup.htmlElements.div.style.width = js_popup.IE.scrollWidth + "px";
				js_popup.htmlElements.div.style.height = js_popup.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(js_popup.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("," + js_popup.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 js_popup.functions.preload(this); };
					}
				}
			}
		}
	}




// Die Popup-Funktionalität initialisieren
js_popup.functions.oldOnLoad = window.onload;
js_popup.functions.oldResize = window.onresize;
window.onload = function () { if(js_popup.functions.oldOnLoad) js_popup.functions.oldOnLoad(); js_popup.functions.init(); }
window.onresize = function () { if(js_popup.functions.oldResize) js_popup.functions.oldResize(); js_popup.functions.init(); }