var transparentLayer = new Class({
	initialize: function() {
		this.layer = 'transparentlayer';
	},
	
	getPageSize: function() {
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}


		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
		return arrayPageSize;
	},
	
	getPageScroll: function() {
		var yScroll;

		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		} else if (document.body) {// all other Explorers
			yScroll = document.body.scrollTop;
		}

		arrayPageScroll = new Array('',yScroll) 
		return arrayPageScroll;
	},
	
	createLayer: function(opacity, closeFunctions) {
		var myDiv = document.createElement("div");
		
		// CSS
		myDiv.style.background 	= "#000";
		myDiv.style.position 	= "fixed";
		myDiv.style.top 		= "0";
		myDiv.style.left 		= "0";
		myDiv.style.height 		= "100%";
		myDiv.style.width 		= "100%";
		myDiv.style.zIndex 		= "1011";
		myDiv.id				= this.layer;
		
		// Opacity
 		myDiv.style.opacity 		= opacity / 100;
		myDiv.style.MozOpacity 		= opacity / 100;
		myDiv.style.KhtmlOpacity 	= opacity / 100;
		myDiv.style.filter 			= "alpha(opacity=" + opacity + ")";
		
		document.body.appendChild(myDiv);
		
		$(myDiv).addEvent('click', function(e){
			for(var i = 0; i < closeFunctions.length; i++) {
				closeFunctions[i]();
			}
		});
	},
	
	closeLayer: function() {
		$('popup-qotd-question').setStyle('display', 'none');
		$('popup-qotd-answer').setStyle('display', 'none');
		$('transparentlayer').destroy();
	},
	
	showContent: function(id, closeFunction){
		element = id;
		if($(element) != null) {
			var arrayPageSize 	= this.getPageSize();
			var arrayPageScroll = this.getPageScroll();
			
			var elementSize = $(element).getSize();
			/* 
			var elementTop 	= (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - elementSize.y) / 2) + 'px');
			var elementLeft = (((arrayPageSize[0] - 20 - elementSize.x) / 2) + 'px'); */
			var elementTop 	= '210px';
			var elementLeft = '275px';
			
			$(element).setStyles({top: elementTop});
			$(element).setStyles({left: elementLeft});
			$(element).setStyles({display: 'block'});
		}
		
		this.createLayer(50, closeFunction);
	}
});
var transparentLayer = new transparentLayer();