var Overlay = {
	element: null,
	background: null,
	chrome: null,
	title : null,
	closeButton : null,
	blur: null,
	onhide: null,

	show: function(elementId, title, showCloseButton)
	{
		this.element = document.getElementById(elementId);
		this.element.style.display = "block";
		this.element.style.position = "absolute";
		this.element.style.zIndex = 1000;

		var winSize = window.getSize();

		var width = this.element.offsetWidth;
		var height = this.element.offsetHeight;
		var top = document.body.scrollTop + (winSize.height - height) / 2;
		var left = document.body.scrollLeft + (winSize.width - width) / 2;
		
		this.element.style.top = top + "px";
		this.element.style.left = left + "px";
		
		if(title != null && title != "")
		{
			if(this.chrome == null)
			{
				this.chrome = document.createElement("div");
				this.chrome.style.position = "absolute";
				this.chrome.style.zIndex = 900;
				this.chrome.style.border = "solid 1px #97968F";
				this.chrome.style.backgroundColor = "#FFFFFF";
				this.chrome.style.textAlign = "left";
				this.chrome.style.paddingLeft = this.chrome.style.paddingRight = 4;
				this.chrome.style.paddingTop = 2;

				document.body.appendChild(this.chrome);

				if(showCloseButton !== false)
				{
					var closeDiv = document.createElement("div");
					closeDiv.style.width = 80;
					closeDiv.style.textAlign = "right";
					closeDiv.style.styleFloat = closeDiv.style.cssFloat = "right";
					this.chrome.appendChild(closeDiv);
					
					var closeLink = document.createElement("a");
					closeLink.href = "javascript:Overlay.hide();";
					closeLink.className = "overlay-close";
					closeLink.innerHTML = "sluit venster";
					closeDiv.appendChild(closeLink);
				}

				this.title = document.createElement("span");
				this.title.style.fontFamily = "Verdana, Arial, Helvetica, Sans-Serif";
				this.title.style.fontWeight = "bold";
				this.title.style.fontSize = "11px";				
				this.chrome.appendChild(this.title);
			}
			
			top = top - 19;
			left = left - 1;
			width = width + 2;
			height = height + 20;
			
			this.chrome.style.display = "block";
			this.chrome.style.top = top + "px";
			this.chrome.style.left = left + "px";
			this.chrome.style.width = width + "px";
			this.chrome.style.height = height + "px";
			
			this.title.innerHTML = "";
			this.title.appendChild(document.createTextNode(title));
		}
		
		if(this.blur == null)
		{
			this.blur = [];
			
			for(var i=0; i<3; i++)
			{
				this.blur[i] = document.createElement("div");
				this.blur[i].style.position = "absolute";
				this.blur[i].style.backgroundColor = "Black";
				this.blur[i].style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=05)";
				this.blur[i].style.opacity = 0.05;
				this.blur[i].zIndex = 600+i;
				document.body.appendChild(this.blur[i]);
			}
		}

		this.blur[0].style.display = this.blur[1].style.display = this.blur[2].style.display = "block";

		this.blur[0].style.top = top-3; this.blur[0].style.left = left-1;
		this.blur[0].style.width = width+2; this.blur[0].style.height = height+6;
		this.blur[1].style.top = top-1; this.blur[1].style.left = left-3;
		this.blur[1].style.width = width+6; this.blur[1].style.height = height+2;
		this.blur[2].style.top = top-2; this.blur[2].style.left = left-2;
		this.blur[2].style.width = width+4; this.blur[2].style.height = height+4;

		if(this.background == null)
		{
			this.background = document.createElement("div");
			this.background.style.position = "absolute";
			this.background.style.top = 0;
			this.background.style.left = 0;
			this.background.style.backgroundColor = "#858482";
			this.background.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
			this.background.style.opacity = 0.4;
			this.background.zIndex = 500;
			document.body.appendChild(this.background);
		}

		this.background.style.width = Math.max(document.body.scrollWidth, winSize.width);
		this.background.style.height = Math.max(document.body.scrollHeight, winSize.height);
		this.background.style.display = "block";
	},

	hide: function()
	{
		this.element.style.display = "none";
		this.chrome.style.display = "none";
		this.background.style.display = "none";
		
		for(var i=0; i<3; i++)
		{
			this.blur[i].style.display = "none";
		}
		
		if(Overlay.onhide != null)
		{
			Overlay.onhide();
			Overlay.onhide = null;
		}		
	}
};

// Get the size of the window
window.getSize = function()
{
	var size = [];
	size.width = 0;
	size.height = 0;

	if( typeof( window.innerWidth ) == 'number' )
	{
		size.width = window.innerWidth;
		size.height = window.innerHeight;
	}
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
	{
		size.width = document.documentElement.clientWidth;
		size.height = document.documentElement.clientHeight;
	} 
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
	{
		size.width = document.body.clientWidth;
		size.height = document.body.clientHeight;
	}
	
	return size;
}