/*
	Class to display a Lightbox-esque overlay on top of the page.
	(c) 2008 Verkkojulkaisut Oy
*/

function Overlay(optionsObj){
	// Init options
	this.optionsObj = {width: 400, height: 400, addClass: "", contentHolderId: "ce_overlay"};
	
	if(optionsObj != null && optionsObj != "undefined"){
		if(optionsObj.width != null && optionsObj.width != "undefined") this.optionsObj.width = optionsObj.width;
		if(optionsObj.height != null && optionsObj.height != "undefined") this.optionsObj.height = optionsObj.height;
		if(optionsObj.addClass != null && optionsObj.addClass != "undefined") this.optionsObj.addClass = optionsObj.addClass;
		if(optionsObj.contentHolderId != null && optionsObj.contentHolderId != "undefined") this.optionsObj.contentHolderId = optionsObj.contentHolderId;
	}
	
	
	// Init other local variables
	
	// Element references
	this.fader = null; // Fader
	this.overlayEmt = null; // Overlay

	// Base classes
	this.faderBaseClass = "vj_fader";
	this.overlayBaseClass = "vj_overlay";
	
	
	
	
	
	// This function shamelessly snatched from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
	// Modified to return a neat object consisting of two properties: width and height
	// Included here for namespacing purposes only.
	this.getWinSize = function(){
		var myWidth = 0;
		var myHeight = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			myWidth = window.innerWidth;
			myHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			myWidth = document.documentElement.clientWidth;
			myHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			myWidth = document.body.clientWidth;
			myHeight = document.body.clientHeight;
		}
		
		return {width: myWidth, height: myHeight}; // Return object literal
	}




	// Method just to reassure the user that it's okay to change the content holder id
	this.setContentHolderId = function(newId){
		this.optionsObj.contentHolderId = newId;
	}
	
	
	
	// Hide overlay and fader
	this.hide = function(){
		this.fader.style.display = "none";
		this.overlayEmt.style.display = "none";
		
		// Delete overlay elements from DOM
		var temp = document.getElementsByTagName("body")[0].removeChild(this.fader);
		temp = document.getElementsByTagName("body")[0].removeChild(this.overlayEmt);
		temp = null;
		
		window.ce_vj_overlay = null;
		// Leave garbage collection to the garbage collector :)
	}
	
	
	
	// Build overlay
	this.build = function(){
		if(typeof(window.ce_vj_overlay) == 'undefined' || window.ce_vj_overlay == null){
			winSize = this.getWinSize();
			
			var scrollTop = document.body.scrollTop;
			if (scrollTop == 0)
			{
				if (window.pageYOffset)
					scrollTop = window.pageYOffset;
				else
					scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
			}
			
			var scrollLeft = document.body.scrollLeft;
			if (scrollLeft == 0)
			{
				if (window.pageXOffset)
					scrollLeft = window.pageXOffset;
				else
					scrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
			}
			
			// Good ol' DOM manipulation
			
			this.fader = document.createElement("div");
			this.fader.style.display = "none";
			this.fader.className = (this.optionsObj.addClass != '') ? this.faderBaseClass + " " + this.optionsObj.addClass : this.faderBaseClass;
			this.fader.style.width = (winSize.width > document.body.offsetWidth) ? winSize.width + "px" : document.body.offsetWidth + "px";
			this.fader.style.height = (winSize.height > document.body.offsetHeight) ? winSize.height + "px" : document.body.offsetHeight + "px";
			
			this.overlayEmt = document.createElement("div");
			this.overlayEmt.style.display = "none";
			this.overlayEmt.className = (this.optionsObj.addClass != '') ? this.overlayBaseClass + " " + this.optionsObj.addClass : this.overlayBaseClass;
			this.overlayEmt.style.position = "absolute";
			this.overlayEmt.style.width = this.optionsObj.width + "px";
			this.overlayEmt.style.height = this.optionsObj.height + "px";
			this.overlayEmt.style.left = (winSize.width/2) - (this.optionsObj.width/2) + scrollLeft + "px";
			this.overlayEmt.style.top = (winSize.height/2) - (this.optionsObj.height/2) + scrollTop + "px";
			
			this.overlayEmt.innerHTML = document.getElementById(this.optionsObj.contentHolderId).innerHTML.replace("_p.jpg", "_i.jpg");
			
			var docBody = document.getElementsByTagName("body")[0];
			docBody.appendChild(this.fader);
			docBody.appendChild(this.overlayEmt);
			
			
			// What a stupid way to preserve object binding! Well, object binding in JS is awfully tricky.		
			window.ce_vj_overlay = this;
			
			if(this.fader.addEventListener){
				this.fader.addEventListener('click', function(){window.ce_vj_overlay.hide();}, false);
			}
			else if(this.fader.attachEvent){
				this.fader.attachEvent('onclick', function(){window.ce_vj_overlay.hide();});
			}
		}
	}
	
	
	// There's no initialization method, so we have to rebuild the overlay every time it's displayed.
	// Has ít's advantages and disadvantages.
	this.display = function(){
		this.build();
		this.fader.style.display = "block";
		this.overlayEmt.style.display = "block";
	}
}