var width = 830;
var height = 560;
var distance = 20;
var closeimg = "typo3conf/ext/schulmap/media/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();
							};
		if($('overlay') != null){
			$('overlay').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){
				var e = window.event;
			}
			var clickObject = Event.element(e).id;
			if(clickObject == "maplightbox"){
				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.6, 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.6});
		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;
					}
	}
}