/**
***********************************
* 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 : "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 : "images/overlay.png",
                        src_blank_gif : "blank.gif"
                        },
                // CSS-ID für das Vollansichts-Bild
                fullViewImage : {
                        cssID : "js-popup-image"
                        },
                // Bilddatei für die Lade-Animation
                waitAnimation : {
                        src : "images/sanduhr.gif",
                        alt : "Sanduhr",
                        cssID : "js-popup-wait"
                        },
                // Bilddatei für das Schließen-Icon
                closeIcon : {
                        src : "images/x-beenden.gif",
                        alt : "schlie&szlig;en",
                        cssID : "js-popup-close"
                        },
                // Bilddateien für das Icon zum Vergrößern/Verkleinern
                resizeIcon : {
                        src_resize : "images/resize.gif",
                        alt_resize : "verkleinern",
                        src_fullSize : "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)
                        {
                        // 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(); }