var OverlayBox;
var load_method = (window.ie ? 'load' : 'domready'); 

var overlayBoxState = 0, overlayBoxFX;  
	
// DOM elements for overlay
var overlayBoxDarkOverlay, overlayBoxCenter, overlayBoxOuterTable, overlayBoxInnerTable, overlayBoxInnerTableCloseButton, CloseButtonImage;

//	Initialize the overlay
window.addEvent(load_method, function() 
{
	// Append the OverlayBox HTML code at the bottom of the document
	$(document.body).adopt(
		$$([
			overlayBoxDarkOverlay = new Element("div", {id: "OBOverlay", style: "position: absolute;	z-index: 9990;	left: 0; width: 100%;  background-color: #000;	cursor: pointer;"}).addEvent("click", OverlayBox.close),
			closeButtonDiv = new Element("div", {id: "OBCloseButton", style:"position: absolute; z-index: 9999;	left: 0; height:23px; width:20px; margin: 0px 0 0 -35px; cursor: pointer;"}).addEvent("click", OverlayBox.close),
			overlayBoxCenter = new Element("div", {id: "OBCenter", style: "position: absolute; z-index: 9991; left: 100px; height: auto; margin: 15px 15px 15px 15px; overflow: hidden; background-color: #fff; border:1px solid #BBBBBB;"})
		]).setStyle("display", "none")
	);

	closeButtonDiv.innerHTML = '<img src="http://www.zdnet.de/i/g/z/ico/ico_expand_close.jpg">';
	
	overlayBoxOuterTable = new Element("div", {id: "OBOuterTable", style:"color:red"}).injectInside(overlayBoxCenter);
	overlayBoxInnerTable = new Element("div", {id: "OBInnerTable", style:"margin:10px; text-align:left; color:black"}).injectInside(overlayBoxOuterTable);
	overlayBoxInnerTable.addClass('storybody');
	
	overlayBoxFX = {
		overlayBoxDarkOverlay: new Fx.Tween(overlayBoxDarkOverlay, {property: "opacity", duration: 300}).set(0),
		closeButtonDiv: new Fx.Tween(closeButtonDiv, {property: "opacity", duration: 300}).set(0),
		overlayBoxCenter: new Fx.Tween(overlayBoxCenter, {property: "opacity", duration: 500})
	};
});


OverlayBox = {
	open: function(divtoOverlay) {
		
		overlayBoxInnerTable.innerHTML = $(divtoOverlay).innerHTML;
		overlayBoxInnerTable.setStyles({width: "auto", height: "auto", overflow: "auto"});
		overlayBoxOuterTable.setStyles({width: "auto", height: "auto", overflow: "hidden"});
		
		darkLayerPosition();
		OverlayBoxSetup(true);
		overlayOpacity = 0.6;
		
		layerPositions();
		
		overlayBoxFX.overlayBoxDarkOverlay.start(overlayOpacity);
		overlayBoxFX.closeButtonDiv.start(1);
		overlayBoxState = 1;
				
		return false;
	}
};

function layerPositions()
{
	if (overlayBoxCenter.getStyle('display') == "none") {
		overlayBoxCenter.setStyles({
			top: topSpace,
			width: "auto",
			height: "auto",
			overflow: "hidden",
			display: ""
		});
		var centerBoxSize = overlayBoxCenter.getScrollSize();
		var tableSize = overlayBoxInnerTable.getScrollSize();
		overlayBoxCenter.setStyles({
			display: "none"
		});
	}
	else{
		var centerBoxSize = overlayBoxCenter.getScrollSize();
		var tableSize = overlayBoxInnerTable.getScrollSize();
	}
	
	var height = tableSize.y;
	
	var innerOVWidthMax = window.getWidth()-100;
	var innerOVWidth = centerBoxSize.x;
	
	if(innerOVWidthMax < centerBoxSize.x){
		innerOVWidth = innerOVWidthMax;
	}
	else
		innerOVWidth = centerBoxSize.x;
	
	var innerOVLeft = 50; 
	
	
	if (window.getWidth() > (centerBoxSize.x + 50)) {
		innerOVLeft = (window.getWidth() - centerBoxSize.x) / 2;
	}
	if (window.getHeight() < (tableSize.y + 40)) {
		height = window.getHeight() - 40;
		closeButtonDiv.setStyle('margin', '0px 0 0 -55px');
	}
	else {
		height = tableSize.y + 40;
		closeButtonDiv.setStyle('margin', '0px 0 0 -35px');
	}
	
	var topSpace = ((window.getHeight()- height) /2)-40; 
	if(topSpace < 1)
		topSpace = 1;
	
	topSpace = topSpace + window.getScrollTop();
	
	var currHeightInnerTable = height-40;
	
	overlayBoxInnerTable.setStyles({
		width: "auto",
		height: currHeightInnerTable,
		overflow: "auto"
	});
	
	var currHeightOuterTable = height-10;
	overlayBoxInnerTable.setStyles({overflow: "hidden"});
	overlayBoxInnerTable.setStyles({overflow: "auto"});
	overlayBoxOuterTable.setStyles({width: "auto", height: currHeightOuterTable, overflow: "hidden"});
	overlayBoxCenter.setStyles({top: topSpace, left: innerOVLeft, width: innerOVWidth, overflow: "hidden", height: 'auto', display: ""});
	
	var clButtontop = ((window.getHeight()-height) /2) - 17; 
	
	if(clButtontop < 27)
			clButtontop = 27;
	
	var clButtonleft = innerOVLeft+innerOVWidth+10;		
	var clButtontop = clButtontop + window.getScrollTop();
	closeButtonDiv.setStyles({top: clButtontop, left: clButtonleft});
}


function darkLayerPosition() {
	overlayBoxDarkOverlay.setStyles({top: window.getScrollTop(), height: window.getHeight()});
}


function OverlayBoxSetup(open) {
	["object", window.ie ? "select" : "embed"].forEach(function(tag) {
		Array.forEach(document.getElementsByTagName(tag), function(el) {
			if (open) 
				el._overlaybox = el.style.visibility;
			else
				el._overlaybox = '';
			
			el.style.visibility = open ? "hidden" : el._overlaybox;
		});
	});
	
	
	["div"].forEach(function(tag) {
		Array.forEach($$(tag), function(el) {
			if ((el.getProperty('id') != 'OBOverlay') && (el.getProperty('id') != 'OBCloseButton') && (el.getProperty('id') != 'OBCenter') && ( el.hasClass('showInOverlay') == false) ) {
				if (el.getStyle('z-index') > 9000) {
					if (open) 
						el._overlaybox = el.style.visibility;
				else
					el._overlaybox = '';
				
					el.style.visibility = open ? "hidden" : el._overlaybox;
				}
			}
		});
	});
	
	closeButtonDiv.style.display = open ? "" : "none";
	overlayBoxDarkOverlay.style.display = open ? "" : "none";
	var fn = open ? "addEvent" : "removeEvent";
	window[fn]("scroll", darkLayerPosition)[fn]("resize", darkLayerPosition);
	window[fn]("scroll", layerPositions)[fn]("resize", layerPositions);
	document[fn]("keydown", keyDown);
}

function keyDown(event) {
	switch(event.code) {
		case 27:	// Esc
			OverlayBox.close();
			return false;
			break;
	}
	return true;
}
	
OverlayBox.close = function() {
	if (overlayBoxState) {
		overlayBoxState = 0;
		for (var f in overlayBoxFX) overlayBoxFX[f].cancel();
		overlayBoxCenter.setStyles({display: "none"});
		closeButtonDiv.setStyles({display: "none"});
		overlayBoxFX.overlayBoxDarkOverlay.chain(OverlayBoxSetup).start(0);
	}
	return false;
}

// Autoload ... hide overlay Div and add event to links
OverlayBox.scan4divs = function() {
	var overlayLinks = $$('a.overlayBox'); 
	$each(overlayLinks, function(overlayLink) {
			var hideLayer = $(overlayLink.rel);
			var hideLayerName = overlayLink.rel;
			if(hideLayer)
			{
				hideLayer = $(overlayLink.rel);
				hideLayer.setStyles({display:"none"});
				overlayLink.removeEvents('click');
				overlayLink.addEvent('click',function(){
													return OverlayBox.open(hideLayerName)
											}); 
				$(overlayLink.rel).style.display = 'none';
			}
		});
};

window.addEvent(load_method, OverlayBox.scan4divs);