/**
***********************************
* 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();