var width = 480;
var height = 480;
var distance = 20;
var closeimg = "fileadmin/templates/images/lb/closelabel.gif";

var MapBox = Class.create();
MapBox.prototype = {
    initialize: function(clickelement){
        this.create();
        this.setAction(clickelement);
    },
    create : function(){
        var insertNode = document.getElementsByTagName("body").item(0);
        // BACKGROUND-COLOR
        var nodeOverlay = document.createElement("div");
        nodeOverlay.setAttribute("id", "overlay");
        nodeOverlay.style.opacity = 0;
        nodeOverlay.style.top = "-1000px";
        nodeOverlay.style.left = "-1000px";
        nodeOverlay.onclick = function(){
            box.hidden();
        }
        // FRONT-BOX
        var nodeMapBox = document.createElement("div");
        nodeMapBox.setAttribute("id", "maplightbox");
        nodeMapBox.style.top = "-1000px";
        nodeMapBox.style.left = "-1000px";
        nodeMapBox.onclick = function(e){
            if (!e){
                e = window.event;
            }
            var clickObject = Event.element(e).id;
            if(clickObject == "lightbox" || clickObject == "maplightbox" || clickObject == "overlay"){
                box.hidden();
            }
        };
        var nodeOuterBox = document.createElement("div");
        nodeOuterBox.setAttribute("id", "outerBoxContainer");

        var nodeBox = document.createElement("div");
        nodeBox.setAttribute("id", "imageContainer");
        /**/
        var nodeInnerBox = document.createElement("div");
        nodeInnerBox.setAttribute("id", "includebox");
        nodeInnerBox.style.width = width+"px";
        nodeInnerBox.style.height = height+"px";
        /**/
        var nodeClose = document.createElement("div");
        nodeClose.setAttribute("id", "bottomNav");

        var nodeCloseAction = document.createElement("a");
        nodeCloseAction.setAttribute("href", "#");
        nodeCloseAction.setAttribute("id", "bottomNavClose");
        nodeCloseAction.onclick = function(){
            box.hidden();
            return false;
        }
        var nodeCloseImage = document.createElement("img");
        nodeCloseImage.setAttribute("src", closeimg);

        nodeCloseAction.appendChild(nodeCloseImage);
        nodeClose.appendChild(nodeCloseAction);
        /**/
        nodeBox.appendChild(nodeInnerBox);
        nodeBox.appendChild(nodeClose);
        nodeOuterBox.appendChild(nodeBox);
        nodeMapBox.appendChild(nodeOuterBox);
        insertNode.appendChild(nodeOverlay);
        insertNode.appendChild(nodeMapBox);
    },
    hidden: function(){
        new Effect.Fade("overlay",{
            duration: 0.2, 
            from: 0.8, 
            to: 0.0
        });
        Element.setTop('maplightbox', -10000);
        Element.setLeft('maplightbox', -10000);
    },
    show: function(){
        var size = getPageSize();
        Element.setTop("overlay", 0);
        Element.setLeft("overlay", 0);
        Element.setWidth("overlay", size[0]);
        Element.setHeight("overlay", size[1]);
        new Effect.Appear("overlay", {
            duration: 0.2, 
            from: 0.0, 
            to: 0.8
        });
        var position = getPageScroll();
        Element.setTop('maplightbox', position[1] + (size[3] / 10));
        Element.setLeft('maplightbox', position[0]);
    },
    setAction: function(element){
        element.onclick = function(){
            box.show();
            return false;
        }
    }
}