/*
"$Revision: 2699 $"
"$Author: riedel $"
"$Date: 2009-01-08 14:32:37 +0100 (Do, 08 Jan 2009) $"
*/

var Helper = {
    fade_background : function(){
        var div = new Element("div")
        div.setStyle({
            "backgroundColor" : "#fff",
            "opacity": "0.7",
            "zIndex" : "200",
            "height" : document.viewport.getHeight() + "px",
            "width" : document.viewport.getWidth() + "px",
            "position" : "fixed",
            "top" : "0",
            "left" : "0"
        })
        div.id="fading_layer"
        $$("body")[0].insert({"top": div})
    },
    
    unfade_background : function(){
        $("fading_layer").remove()
    }
}


var Control = {
    step : 100, //Die Bewegungsweite für einen Klick
    controlldiv : null,
    
    init : function(p_parent_elem){
        Control.controlldiv = new Element("div")
        Control.controlldiv.id = "controller";
        btn_top = new Element("img"); btn_top.src="/design/manx_advance/img/big_picture/controll_top.gif";
        btn_bottom = new Element("img"); btn_bottom.src="/design/manx_advance/img/big_picture/controll_bottom.gif";
        
        Control.controlldiv.insert(btn_top)
        Control.controlldiv.insert(btn_bottom)

        Control.controlldiv.setStyle({
            "width": "60px",
            "height": "59px",
            "zIndex" : "700",
            "backgroundColor" : "#ffffff"
        })
        btn_top.setStyle({
            "position" : "absolute",
            "top" : "0",
            "left" : "20px"
        })
        btn_bottom.setStyle({
            "position" : "absolute",
            "bottom" : "2px",
            "left" : "20px"
        })

        btn_top.observe("click", Control.move_image_top)
        btn_bottom.observe("click", Control.move_image_bottom)
        
        Control.hide()
        p_parent_elem.insert(Control.controlldiv)
    },

    alignTo : function(elem){
        if(elem.match("IMG"))
            elem = elem.up("A");
        Control.controlldiv.hide()
        Control.controlldiv.setStyle({
            "position" :"absolute",
            "top" : elem.cumulativeOffset()["top"] + "px",
            "left" :  "56px",
            "height" : elem.getHeight() + "px"
        })
        new Effect.Appear(Control.controlldiv, {"duration" : 0.4, "delay" : 1})
        Control.reset()
    },
    
    move_image_right : function(e){
        var step = Control.step
        var bprc = $("big_picture_right_column")
        var tbp = $("the_big_picture")
        if( tbp.cumulativeOffset()["left"] + step  > bprc.cumulativeOffset()["left"] )
            step = bprc.cumulativeOffset()["left"] -  tbp.cumulativeOffset()["left"]
        new Effect.Move(tbp, {"mode": "relative", "x" : step, "y" : 0})
    },    
    move_image_left : function(e){
        var step = Control.step
        var bprc = $("big_picture_right_column")
        var tbp = $("the_big_picture")
        var right_border = bprc.cumulativeOffset()["left"] + bprc.getWidth()
        var right_pic_ending = tbp.cumulativeOffset()["left"] + tbp.getWidth()
        if(right_pic_ending - step < right_border)
            step = right_pic_ending - right_border 
        new Effect.Move(tbp, {"mode": "relative", "x" : -step, "y" : 0})
    },    
    move_image_top : function(e){
        var step = Control.step
        var bprc = $("big_picture_right_column")
        var tbp = $("the_big_picture")
        var lower_border = bprc.cumulativeOffset()["top"] + bprc.getHeight()
        var bottom_pic_ending = tbp.cumulativeOffset()["top"] + tbp.getHeight()
        if(bottom_pic_ending - step < lower_border)
            step = bottom_pic_ending - lower_border
        new Effect.Move($("the_big_picture"), {"mode": "relative", "x" : 0, "y" : -step})
    },    
    move_image_bottom : function(e){
        var step = Control.step
        var tbp = $("the_big_picture")
        if (tbp.cumulativeOffset()["top"] + Control.step  > 0)
            step = 0 - tbp.cumulativeOffset()["top"]
        new Effect.Move(tbp, {"mode": "relative", "x" : 0, "y" : step})
    },
    
    hide : function(){
        Control.controlldiv.hide()
    },
    
    //Setzt das angezeigte Bild wieder in die obere linke Ecke 
    reset : function(){
        $("the_big_picture").setStyle({
            "position" :"absolute",
            "top" : "0",
            "left" : "0"
        }) 
    }

}



var ImageGallery = {
    init : function(p_activate_button){
        $(p_activate_button).observe("click", function(ev){ 
            ev.stop();
            ImageGallery.create(); 
            Control.init(ImageGallery.outerdiv);
        });
    },
    
    create : function(){
        Helper.fade_background()
        if ( ! $("big_picture_container")){
            // Die Buttons
            ImageGallery.outerdiv = new Element("div");
            ImageGallery.bigpicture = new Element("img")
            ImageGallery.bigpicture.src=""; 
            ImageGallery.bigpicture.id="the_big_picture";
            ImageGallery.btn_close = new Element("a"); 
            ImageGallery.btn_close.href="";
            ImageGallery.btn_front_image = new Element("a"); 
            ImageGallery.btn_front_image.href="";
            ImageGallery.btn_back_image = new Element("a"); 
            ImageGallery.btn_back_image.href="";
            ImageGallery.btn_close.observe("click", ImageGallery.deactivate);
            ImageGallery.btn_front_image.observe("click", ImageGallery.show_image.curry("front"))
            ImageGallery.btn_back_image.observe("click", ImageGallery.show_image.curry("back"))

            //Zusammenbasteln der Anzeigebox
            //OUTERDIV
            console.log(ImageGallery.outerdiv)
            ImageGallery.outerdiv.id = "big_picture_container"
            
            //LEFTDIV
            var leftdiv = new Element("div")
            leftdiv.id="big_picture_left_column"
            leftdiv.addClassName("bg_color_1")

            var lang = $("current_language").innerHTML;
            if (lang == "")
                lang = "de";
            var img = new Element("img"); 
            img.src="/design/manx_advance/img/big_picture/btn_close_" + lang + ".png";
            ImageGallery.btn_close.update(img)
            img = new Element("img"); 
            img.src="/design/manx_advance/img/big_picture/btn_front_" + lang + ".png";
            ImageGallery.btn_front_image.update(img)
            img = new Element("img"); 
            img.src="/design/manx_advance/img/big_picture/btn_back_" + lang + ".png";
            ImageGallery.btn_back_image.update(img)
            
            leftdiv.insert(ImageGallery.btn_close)
            leftdiv.insert(ImageGallery.btn_front_image)
            leftdiv.insert(ImageGallery.btn_back_image)

            //Ein P um die Buttons legen
            leftdiv.childElements("A").each(function(a){
                a.wrap(new Element("div"));
                a.insert({"after" : "<div style='clear:both;'></div>"});
                a.addClassName("bg_color_2");
            });
            
            //RIGHTDIV
            var rightdiv = new Element("div")
            rightdiv.id="big_picture_right_column"
            rightdiv.insert(ImageGallery.bigpicture)

            //SCHATTEN
            var right_shadow_div = "<div id='big_picture_right_shadow_column'></div>";
            var bottom_shadow_div = "<div id='big_picture_bottom_shadow_row'></div>";

            ImageGallery.outerdiv.insert(leftdiv);
            ImageGallery.outerdiv.insert(rightdiv);
            ImageGallery.outerdiv.insert(right_shadow_div);
            ImageGallery.outerdiv.insert(bottom_shadow_div);
            ImageGallery.outerdiv.hide();
            $$("BODY")[0].insert(ImageGallery.outerdiv);        
        }
        new Effect.Appear(ImageGallery.outerdiv, {"afterFinish" : function(){ImageGallery.show_image("front", "event_dummy");}})
    },

    show_image : function(site, ev){
        try{
            ev.stop();
            var trigger_elem = ev.element();
        } 
        catch(e){
            var trigger_elem = ImageGallery.btn_front_image;
        }
        var url = ""
        var size = ""
        switch(site){
            case "front":
                url = $("img_cover_front_url").innerHTML;
                size = $("img_cover_front_size").innerHTML.split(",");
                ImageGallery.btn_front_image.addClassName("active");
                ImageGallery.btn_front_image.removeClassName("bg_color_2");
                ImageGallery.btn_back_image.addClassName("bg_color_2");
                ImageGallery.btn_back_image.removeClassName("active");
                break;
            case "back":
                url = $("img_cover_back_url").innerHTML;
                size = $("img_cover_back_size").innerHTML.split(",");
                ImageGallery.btn_back_image.addClassName("active");
                ImageGallery.btn_back_image.removeClassName("bg_color_2");
                ImageGallery.btn_front_image.addClassName("bg_color_2");
                ImageGallery.btn_front_image.removeClassName("active");
                break;
        }
        Control.alignTo(trigger_elem);
        ImageGallery.bigpicture.src = url
        ImageGallery.bigpicture.writeAttribute("width", size[0])
        ImageGallery.bigpicture.writeAttribute("height",size[1])
    },

    deactivate : function(ev){
        ev.stop()
        Helper.unfade_background() 
        $("big_picture_container").remove();
    }
}




Event.observe(window, "load", function(ev){
    var button_name = "big_picture"
    if ($(button_name))
        ImageGallery.init($(button_name))
    
})