/*

Diese Klasse verhält sich ähnlich wie die bekannte Lightbox.

*/


var mooImageBox = new Class({
    Implements: Options,
    options: {
        cssprefix: 'box',
        rel: 'imagebox',
        maximumWidth: 0,
        maximumHeight: 0,
        imageresizeurl: null,   // url zu unserem image-resize-service. wenn angegeben wird bild damit zugeschnitten und die optimale grösse für den bildschirm gesucht.
        cutHorizontal: 100,     // beim zuschneiden des bildes wird der angegebene wert abgezogen in der horizontalen
        cutVertical: 100,       // beim zuschneiden des bildes wird der angegebene wert abgezogen in der vertikalen
        debugmode: true
    },

    /* constructor */
    initialize: function(options) {

        this.setOptions(options);

        this.isOverlayLoaded = false;
        this.imgIndex = 0;

        // hole alle links
        this.linkArr = $(document.body).getElements('a[rel="' + this.options.rel + ']');

        // speichere objekt im body
        $(document.body).store("imagebox", this);

        // füge dieses objekt zu jedem link  
        for (var i = 0; i < this.linkArr.length; i++)
            this.linkArr[i].store('imagebox', this);

        // wenn auf link geklickt wird dann öffne nicht bildurl sondern lade das bild entsprechend
        this.linkArr.removeEvents("click").addEvents({
            'click': function(event) {


                event.target.getParent().retrieve('imagebox').showImageByUrl(event.target.getParent().getProperty('href'))

                // nicht den eigentlich link öffnen
                return false;
            }
        });



    },



    /* setze alles auf schwarzen hintergrund */
    loadOverlay: function() {

        // helle box in der mitte
        this.whitebox = document.createElement("div");
        this.whitebox.id = "light";
        this.whitebox.className = "white_content";

        // dunkler overlay-effekt
        var el2 = document.createElement("div");
        el2.id = "fade";
        el2.className = "black_overlay";

        // mootools
        this.whitebox = $(this.whitebox);
        el2 = $(el2);

        // füge beide elemente am beginn des DOM ein
        document.body.insertBefore(el2, document.body.firstChild);
        document.body.insertBefore(this.whitebox, document.body.firstChild);

        // setze beides sichtbar (todo: mit effekt)
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';

        // berücksichtige aktuelle scrollposition des fensters
        this.whitebox.style.marginTop = window.getScroll().y + "px";
        el2.style.top = window.getScroll().y + "px";

        // wird auf dunkle Fläche geklickt, dann schliesse imagebox
        el2.addEvent("click", function(event) {
            $(document.body).retrieve("imagebox").close();
        });

        // unterbinde scrolling wenn imagebox geladen wurde
        this.whitebox.addEvent('mousewheel', function() { return false; });
        el2.addEvent('mousewheel', function() { return false; });


        // overlay ist geladen
        this.isOverlayLoaded = true;

        // lade die einzelnen navigations-elemente, etc.
        this.loadElements(this.whitebox);

        this.calculateMaximum();

        // höre auf tastatureingaben
        $(document.body).addEvent("keydown", function(event) {
            var imagebox = $(document.body).retrieve("imagebox");
            switch (event.code) {
                case 27: // Esc
                case 88: // 'x'
                case 67: // 'c'
                    imagebox.close();
                    break;
                case 37: // Left arrow
                case 80: // 'p'
                    imagebox.prevImage();
                    break;
                case 39: // Right arrow
                case 78: // 'n'
                    imagebox.nextImage();
            }
            // Prevent default keyboard action (like navigating inside the page)
            return true;

        });


    },

    /* der Überblendeffekt wird entfernt */
    hideOverlay: function() {
        var el1 = document.getElementById("light");

        if (el1 != null)
            document.body.removeChild(el1);

        var el2 = document.getElementById("fade");

        if (el2 != null)
            document.body.removeChild(el2);

        this.isOverlayLoaded = false;
    },

    /* ladet alle Navigationselemente und container. Darstellung kann über CSS definiert werden */
    loadElements: function(parentdiv) {


        this.el_container = new Element("div", { id: "boxcontainer", 'class': this.options.cssprefix + "_container" });
        this.el_head = new Element("div", { id: "boxheadline", 'class': this.options.cssprefix + "_headline" });
        this.el_nav = new Element("div", { id: "boxnav", 'class': this.options.cssprefix + "_nav" });
        this.el_prev = new Element("div", { id: "btleft", 'class': this.options.cssprefix + "_btprev" });
        this.el_next = new Element("div", { id: "btright", 'class': this.options.cssprefix + "_btnext" });
        this.el_close = new Element("div", { id: "btclose", 'class': this.options.cssprefix + "_btclose" });
        this.el_title = new Element("div", { id: "boxtitle", 'class': this.options.cssprefix + "_title" });
        this.el_comment = new Element("div", { id: "boxcomment", 'class': this.options.cssprefix + "_comment" });
        this.el_img = new Element("img", { id: "boximg", 'class': this.options.cssprefix + "_img" });
        this.el_loading = new Element("img", { id: "boxload", 'class': this.options.cssprefix + "_loading", 'src': '../grafik/laden.gif' });

        this.el_next.store('imagebox', this);
        this.el_prev.store('imagebox', this);
        this.el_close.store('imagebox', this);

        this.el_next.addEvent('click', function(ev) {
            ev.target.retrieve('imagebox').nextImage();
        });

        this.el_prev.addEvent('click', function(ev) {
            ev.target.retrieve('imagebox').prevImage();
        });

        this.el_close.addEvent('click', function(ev) {
            ev.target.retrieve('imagebox').close();
        });

        if (this.linkArr.length < 2) {
            this.el_prev.style.visibility = 'hidden';
            this.el_next.style.visibility = 'hidden';
        }

        // bei IE6.0 muss die höhe des schwarzen hintergrundes per javascript gesetzt werden
        if (Browser.Engine.trident && Browser.Engine.version < 5) {
            $('fade').style.height = window.getSize().y;
        }

        parentdiv.grab(this.el_container);

        this.el_container.grab(this.el_head);
        this.el_head.grab(this.el_nav);
        this.el_nav.grab(this.el_title);
        this.el_nav.grab(this.el_prev, "top");
        this.el_nav.grab(this.el_next, "bottom");
        this.el_container.grab(this.el_close);
        this.el_container.grab(this.el_img);
        this.el_container.grab(this.el_comment);
        this.el_container.grab(this.el_loading);
    },

    /* zeigt das Bild mit der angegeben Url an */
    showImageByUrl: function(url) {


        // lade überblendeffekt falls noch nicht geladen
        if (this.isOverlayLoaded == false)
            this.loadOverlay();

        // für jeden link
        for (var i = 0; i < this.linkArr.length; i++) {

            this.linkArr[i].href = this.linkArr[i].href;
           
            if (this.encodeUrl(this.linkArr[i].href) == url) {
                this.showImage(i);
                break;
            }
        }


    },
    
    encodeUrl: function(url) {
    
        // Ä ä Ü ü Ö ö
        //  %C3%84%20%C3%A4%20%C3%9C%20%C3%BC%20%C3%96%20%C3%B6%0A
        //  %C3%A4 %C3%9C %20 %C3%BC %20 %C3%96 %20 %C3%B6%0A

        url = url.replace(/%20/gi, ' ');
     
        url = url.replace(/%C3%84/gi, 'Ä');
        url = url.replace(/%C3%A4/gi, 'ä');
        url = url.replace(/%C3%9C/gi, 'Ü');
        url = url.replace(/%C3%BC/gi, 'ü');
        url = url.replace(/%C3%96/gi, 'Ö');
        url = url.replace(/%C3%B6/gi, 'ö');

        return url;
    },

    nextEffect: function() {
        $('boxload').style.display = 'block';
    },

    stopEffect: function() {
        $(document.body).retrieve('imagebox').el_img.style.display = 'block';
        $('boxload').style.display = 'none';

        this.fitWhiteBoxToImage();
    },

    showImage: function(index) {

        // lade überblendeffekt falls noch nicht geladen
        if (this.isOverlayLoaded == false)
            this.loadOverlay();


        this.calculateMaximum();


        this.nextEffect();
        this.el_img.style.display = 'none';
        this.el_img.onload = this.stopEffect.bind(this);

        if (this.options.maximumWidth < 0)
            this.options.maximumWidth = 0;

        if (this.options.maximumHeight < 0)
            this.options.maximumHeight = 0;

        if (this.options.imageresizeurl != null) {
            this.el_img.src = this.options.imageresizeurl + "?w=" + this.options.maximumWidth + "&h=" + this.options.maximumHeight + "&url=" + this.linkArr[index].href;
        } else {
            this.el_img.src = this.linkArr[index].href;
        }
        // this.el_head.innerHTML = "lade " + this.el_img.src;
        this.el_title.innerHTML = this.linkArr[index].getFirst().getProperty('alt');

        this.imgIndex = index;

        if (this.linkArr[index].getProperty('alt') != null)
            this.el_comment.innerHTML = this.linkArr[index].getProperty('alt');


    },

    nextImage: function(url) {

        this.imgIndex++;

        if (this.imgIndex >= this.linkArr.length)
            this.imgIndex = 0;

        this.showImage(this.imgIndex);
    },

    prevImage: function(url) {
        this.imgIndex--;

        if (this.imgIndex < 0)
            this.imgIndex = this.linkArr.length - 1;

        this.showImage(this.imgIndex);
    },

    close: function() {
        this.hideOverlay();
    },

    calculateMaximum: function() {

        var winw = $(document.body).getSize().x;
        var winh = $(document.body).getSize().y;

        this.options.maximumWidth = winw - 200;
        this.options.maximumHeight = winh - this.el_head.getSize().y - this.whitebox.getTop() + this.getScrollPosition() - 100;

        //        alert(this.options.maximumWidth + "-" +  this.whitebox.getTop());
        //        alert(this.options.maximumHeight);
    },

    fitWhiteBoxToImage: function() {


        var winw = $(document.body).getSize().x;
        var imgw = this.el_img.getSize().x;

        if (imgw > this.whitebox.getSize().x) {
            // es muss weisse box an bild angepasst werden
            this.whitebox.style.width = ((this.el_img.getSize().x)) + "px";
            this.el_container.style.width = ((this.el_img.getSize().x)) + "px";

            this.whitebox.style.left = ((winw - this.whitebox.getSize().x) / 2).toInt() + "px";
        }
    },

    getScrollPosition: function() {
        var ScrollTop = document.body.scrollTop;

        if (ScrollTop == 0) {
            if (window.pageYOffset)
                ScrollTop = window.pageYOffset;
            else
                ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
        }

        return ScrollTop;
    }

});