/**
***********************************
* 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
                        ) {
                                /* RVS für resizefunktionalität wieder einschalten!
                                 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();