var modal = {
	modalOn: false,
	windowWidth: null,
	windowHeight: null,
	display: function(title,url,width,height) {
		// Check if required parameters are present.
		if(title && url && width && height) {
		// If Modal is already on, hide it.
		if(this.modalOn) {
			this.hide();
		}
		
		this.windowWidth = width;
		this.windowHeight = height;
		
		this.showOverlay();
		
		// Create Window Elements.
		var windowElement = document.createElement("div");
		windowElement.id = "modalWindow";
		windowElement.style.width = width+"px";
		windowElement.style.height = height+"px";
		windowElement.style.zIndex = 1001;
		windowElement.style.position = "absolute";
		windowElement.style.top = "0";
		windowElement.style.left = "0";
		document.body.appendChild(windowElement);
				
		var closeBtnElement = document.createElement("a");
		closeBtnElement.href = "javascript:modal.hide();";
		closeBtnElement.className = "closeBtn";
		closeBtnElement.innerHTML = " ";		
		windowElement.appendChild(closeBtnElement);
		
		var titleElement = document.createElement("div");
		titleElement.className = "titlebar";
		windowElement.appendChild(titleElement);
		
		var titleTextElement = document.createTextNode(title);
		titleElement.appendChild(titleTextElement);
		
		var iframeElement = document.createElement("iframe");
		iframeElement.style.height = height-titleElement.offsetHeight-10+"px";
		iframeElement.style.width = width+"px";
		iframeElement.frameBorder = "0";
		iframeElement.src = url;
		windowElement.appendChild(iframeElement);
		this.centerWindow();
		window.onresize = function() {
			modal.centerWindow();
			modal.resizeOverlay();
			};
			
		this.modalOn = true;
		} else {
			// If required parameters are missing, show error.
			var message = "MODAL ERROR:\r\nRequired parameter(s) missing:\r\n";
			if(!title) {
				message += "- Title";
			}
			if(!url) {
				message += "- URL\r\n";
			}
			if(!width) {
				message += "- Width\r\n";
			}
			if(!height) {
				message += "- Height\r\n";
			}
			alert(message);
		}
	},
	showOverlay: function() {
			// Create Overlay Element.
		var overlayElement = document.createElement("div");
		overlayElement.id = "modalOverlay";
		overlayElement.style.zIndex = 1000;
		overlayElement.style.position = "absolute";
		overlayElement.style.top = "0";
		overlayElement.style.left = "0";
		document.body.appendChild(overlayElement);
		this.resizeOverlay();	
	},
	hide: function(refresh) {
		window.onresize = null;
		windowElement = document.getElementById("modalWindow");
		if(windowElement) {
		document.body.removeChild(windowElement);
		this.hideOverlay();
		}
		this.modalOn = false;
		if(refresh == true) {
			window.location.reload();
		}
	},
	hideOverlay: function() {
		if(document.getElementById("modalOverlay")) {
			document.body.removeChild(document.getElementById("modalOverlay"));	
			}
	},
	centerWindow: function() {
		windowElement = document.getElementById("modalWindow");
		windowWidth = client.GetViewportSize()[0];
		windowHeight = client.GetViewportSize()[1];
		windowElement.style.left = windowWidth/2-windowElement.offsetWidth/2+"px";
		windowElement.style.top = windowHeight/2-windowElement.offsetHeight/2+"px";
	},
	resizeOverlay: function() {
		windowWidth = client.GetViewportSize()[0];
		windowHeight = client.GetViewportSize()[1];
		overlayElement = document.getElementById("modalOverlay");
		if(document.body.offsetHeight > windowHeight) {
			overlayElement.style.height = document.body.offsetHeight+"px";
		} else {
			overlayElement.style.height = windowHeight+"px";
		}
	}
}

var overlays = {
	showProcess: function() {
		modal.showOverlay();
		overlayElement = document.getElementById("modalOverlay");
		overlayElement.className = "modalOverlay_process";
	}
}


var client = {
	GetViewportSize: function() {
		 var viewportwidth;
		 var viewportheight; 
		 if (typeof window.innerWidth != 'undefined')
		 {
		      viewportwidth = window.innerWidth,
		      viewportheight = window.innerHeight
		 }	
		 else if (typeof document.documentElement != 'undefined'
		     && typeof document.documentElement.clientWidth !=
		     'undefined' && document.documentElement.clientWidth != 0)
		 {
		       viewportwidth = document.documentElement.clientWidth,
		       viewportheight = document.documentElement.clientHeight
		 }
		 else
		 {
		       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		       viewportheight = document.getElementsByTagName('body')[0].clientHeight
		 }
		 return [viewportwidth,viewportheight];
	}
}