/**
 * Overlay Class
 * Make an overlay (dialog box, image overlay)
 */

Inventure.Overlay = function()
{
	//global variable for Overlay namespace - only one overlay can be created at a time
	var overlay;
	
	return {
		
		/**
		 * Add a new overlay
		 * @param title(String) - title of the overlay
		 * @param content(HTML Collection) - all of the content to be appended to the overlay-content-container
		 */
		add : function(title, content)
		{
			//if an overlay already exists, remove it
			var currentOverlay = document.getElementById('overlay') || document.getElementById('overlay-image');
			if(currentOverlay) this.remove();
			
			//create new overlay
			overlay = document.createElement('div');
			overlay.id="overlay";
		
			var header = document.createElement('div');
			header.id="overlay-header";
			header.innerHTML=title;
			
			var contentContainer = document.createElement('div');
			contentContainer.id="overlay-content-container";
			
			contentContainer.appendChild(content);
			overlay.appendChild(header);
			overlay.appendChild(contentContainer);
			
			//append the overlay to the document and center it
			document.body.appendChild(overlay);
			Inventure.Util.centerObject(overlay);
		},
		
		/**
		 * Add a new image overlay (Primarily for the gallery)
		 * @param el(Element) - the element that was clicked (contains src of thumbnail image)
		 */
		enlargeImage : function(src, width, height, widthRatio, heightRatio)
		{
			//if an overlay exists, remove it
			var currentOverlay = document.getElementById('overlay') || document.getElementById('overlay-image');
			if(currentOverlay) this.remove();
						
			//get the client width and height
			var clientHeight = document.documentElement.clientHeight -100;
			var clientWidth = document.documentElement.clientWidth -300;
			
			//while the img height and width is larger than the client width and height reduce the img width and height 
			//by the widthRatio and heightRatio
			while(width > clientWidth || height > clientHeight) {
				width -= widthRatio;
				height -= heightRatio;	
			}
			
			width = Math.round(width);
			height = Math.round(height);
						
			//create a new image with the new src, width, and height
			var image = new Image();
						
			image.src=src;
			image.style.width=width+"px";
			image.style.height=height+"px";		
					
			//create a new image overlay
			overlay = document.createElement('div');
			overlay.id="overlay-image";
			
			var container = document.createElement('div');
			container.className = 'overlay-image-container';
			
			var close = document.createElement('div');
			close.className = 'overlay-close';
			close.title = 'Close Image';
			close.onclick = this.remove;
			
			overlay.appendChild(container);
			container.appendChild(close);
			container.appendChild(image);
			overlay.close = close;
			overlay.image = image;
			
			//append the image overlay to the document and center it
			document.body.appendChild(overlay);
			Inventure.Util.centerObject(overlay);
			
			image.onabort = function(){
				container.removeChild(image);
				container.appendChild(image);
				container.removeChild(close);
				container.appendChild(close);
			};
		},
		
		/**
		 * Add a new image overlay (Random)
		 * @param src(Element) - the src of the new image
		 * @param width(Element) - the width of the new image
		 * @param height(Element) - the height of the new image
		 */
		showImage : function(src, width, height)
		{
			//if an overlay exists, remove it
			var currentOverlay = document.getElementById('overlay') || document.getElementById('overlay-image');
			if(currentOverlay) this.remove();
			
			//create the new image
			var image = new Image();
			image.src=src;
			image.style.width=width+"px";
			image.style.height=height+"px";
			
			//create the image overlay
			overlay = document.createElement('div');
			overlay.id="overlay-image";
			overlay.title="Click image to close";
			overlay.onclick = this.remove;

			overlay.appendChild(image);
			
			//append the image overlay to the document and center it
			document.body.appendChild(overlay);
			Inventure.Util.centerObject(overlay);
			
			image.onabort = function(){
				overlay.removeChild(image);
				overlay.appendChild(image);
			};
		},
		
		/**
		 * Remove the current overlay
		 */
		remove : function()
		{
			if(overlay.close){
				overlay.close.onclick = null;
				overlay.close = null;
			}
			if(overlay.image){
				overlay.image.onabort = null;
				overlay.image = null;
			}
			document.body.removeChild(overlay);
		}
	}
}();