// JavaScript Document
/**
 * This file contains the JavaScript Class for opening and manipulating AJAX based modal pop-up window (lighbox)
 *
 * This file contains a single JavaScript Class that provides the said 
 * functionality
 *
 * Language: JavaScript
 * Depenedancies: MooTools 1.11 Core
 *
 * @package    modalWindow
 * @author     ProjectMiso.net <email@projectmiso.net>
 * @version    1.0
 * @since      January 2010
 * @deprecated N/A
*/

/**
 * Description:
 * The Class must be initiated on a given page or globally. Once initiated the public methods of the 
 * Class can be used to open and manipulate the modal pop-ups. The window is customizable through predefined 
 * CSS class names.
 ****
 *
 * Features:
 * 1. Open with custom width, height, caption and window content
 * 2. Supply HTML text for the  content window 
 * 4. Display a page within the content window as an iframe
 * 5. Invoke JavaScript code after the content loading is complete to add events or processing code for the content window elements
 ****
 *
 * Required CSS classes: (preix is customizable i.e. "modal_")
 * modal_Overlay - the style for the alpha overlay covering the parent page.
 * modal_Container - the container holding all window elements
 * modal_iframeLoader - loading image for iframe when source is waiting to load
 * modal_Caption - the caption bar on top of the window
 * modal_Close - the close button
 * modal_Content - the window content panel
 * modal_Cover - the panel that may cover the window content when invoked - i.e. after submitting a form
 ****
 *
 * Initiation Example:
 *
 * 			var myModal = new modalWindow({ classPrefix: "modal_" });
 *
 * Initiation Options - Public Variables:
 *	classPrefix: "modal_"			//A String - name for CSS prefix for each of the element
 ****
 *
 * Window Invokation Examples:
 *
 * Supply HTML to the window
 * 		Lightbox.open_ajax({width: 425, height: 344, caption: 'My Captions......', iframe: false, text: "Hellow World!" });
 *
 * 		Required optins are - width, height, text
 * 		Optional options are - close (boolean), iframe (default is false), onLoad (function) and caption (string)
 *
 * Open an URL in an iframe
 * 		Lightbox.open_ajax({width: 425, height: 344, caption: 'My Captions......', iframe: true, url: 'http://domain.com' });
 *
 * 		Required optins are - width, height, iframe (true), url
 * 		Optional options are - close (boolean), onLoad (function) and caption (string)
 ****
 *
 * The Invokation Options:
 * width: integer with custom width - required
 * height: integer with custom height - required 
 * caption: string as the window caption - optional 
 * text: supplied HTML text - if HTML is supplied, only the previous options are required and next options are options
 * url: a local page or remote url - required when content is being loaded from a source file/url
 * iframe: will open the url in an iframe - optional
 * close: Boolean - default is true. If false, will make the close button disappear
 * overlayClose: Boolean - default is true. Allows closing by clicking the background
 *
*/

/**
 * Public Functions:
 *
 * myModal.open_ajax({options}); 				//launches the pop-up - see below for details on the "options" object
 * myModal.close(); 							//hides or closes the window
 * myModal.updateContent(text); 				//updates the window content panel with supplied HTML
 * myModal.changeDimension(width, height); 		//updates the width/height of the window. arguments are required
 *
 *
*/

var modalWindow = new Class({
	options:{
		classPrefix: "modal_",
		width: 300,
		height: 200
	},
	initialize: function(options){
		this.setOptions(options);				//set options if custom options are being supplied
		this.parseOptions(this.options);		//parse optionsand convert them into class properties
		
		//create the initial modal assets
		this.render();
	},
	parseOptions: function(optionsObj, ignoreUndefinedProps){
		if (!optionsObj){ return; } else {
			for (var optionName in optionsObj){
				if (ignoreUndefinedProps && optionsObj[optionName] == undefined){ continue; } else { this[optionName] = optionsObj[optionName]; }
			}
		}
	},
	render: function(){
		var tmp_top = 0, tmp_left = 0, self = this;
		
		//create the modal background
		this.overlay = new Element("div", {"id": "modalOverlay", "class": this.classPrefix + "Overlay" }).injectInside(document.body);
		this.overlay.setStyles({ height: window.getScrollHeight(), 'display': 'none' });
		
		//create the modal container
		this.container = new Element("div", {"id": "modalContainer", "class": this.classPrefix + "Container" }).injectInside(document.body);
		tmp_top = 50; tmp_left = 50;
		if (tmp_top < (window.getHeight() - this.height)/2){ tmp_top = (window.getHeight() - this.height)/2; }
		if (tmp_left < (window.getWidth() - this.width)/2){ tmp_left = (window.getWidth() - this.width)/2; }
		this.container.setStyles({ 
			height: this.height, width: this.width, top: tmp_top,  display: 'none'
		});
		//IE 6 fix
		if (window.ie6){
			this.container.setStyle("position", "absolute");
		}
		
		//create the close button
		this.closeButton = new Element("div", {"id": "modalClose", "href": "", "class": this.classPrefix + "Close" }).injectInside(this.container);
		
		//create the content panel
		this.content = new Element("div", {"id": "modalContent", "class": this.classPrefix + "Content" }).injectInside(this.container);
		this.content.setStyles({ height: this.height, width: this.width });
		
		
		//this.closeButton.addClass(this.classPrefix + "Close");
		this.closeButton.addEvent("click", self.close.bind(self));
		
		//create the caption
		this.caption = new Element("div", {"id": "modalCaption", "class": this.classPrefix + "Caption" }).injectInside(this.container);
		this.caption.setStyles({	width: this.width });
		
		//position it
		this.positionWindow();
	}
});

modalWindow.implement(new Options);
modalWindow.implement({
	open_ajax: function(options){
		var tmp_height = 0, tmp_width = 0, self = this, show = true;
		
		//options has the following parameters
		//option.width = int							-- required
		//options.height = int							-- required
		//options.caption = html text	for teh caption		-- required
		//options.text = html text for the window			
		//options.url = URL for content of the window - will make an AJAX call if iframe is not set to true
		//options.iframe = Bool - false by default
		//options.close = Bool - true by default - hides the close button
		//options.close = Bool - true by default - hides the close button
		
		//**** handle the options *******
		if (options.width == undefined) { return false; }
		if (options.height == undefined) { return false; }
		this.width = options.width; this.height = options.height;
		if (options.iframe == undefined) { options.iframe = false; }
		if (options.close == undefined) { options.close = true; }
		if (options.overlayClose == undefined) { options.overlayClose = true; }
		
		
		//********** handle dimensions and positions ********
		this.tmp_width = this.closeButton.getStyle('width').toInt() + 5;
		this.caption.setStyle("width", options.width - this.tmp_width);
		
		this.container.setStyles({ width: options.width, height: options.height });
		this.content.setStyles({ height: this.height, width: this.width });
		this.positionWindow();
		
		//**** set caption content ****
		if (options.caption) this.caption.setHTML(options.caption);
		
		//**** handle content ****
		if (options.iframe){
			if (options.url){
				this.iframe = new Element("iframe", {"id": "modalIframe", "frameborder": "0", "width": "100%", "height": this.content.getStyle("height").toInt(), "class": this.classPrefix + "iframe", "src": options.url  }).injectInside(this.content);
				this.iframe.addClass(this.classPrefix + "iframeLoader");
				
				//.addClass(this.classPrefix + "iframe");
				//this.iframe.setStyles({
				//	width: "inherit",
				//	height: this.content.getStyle("height").toInt()
				//});
				//this.iframe.src = options.url;
				this.iframe.addEvent("load", function(event){
					this.removeClass(this.classPrefix + "iframeLoader");
				});
			} else {
				show = false;
			}
		} else {
			if (options.text){
				this.content.setHTML(options.text);
			} else {
				show = false;
			}
		}
		
		//close button option
		if (!options.close){
			this.closeButton.setStyle("visibility", "hidden");
		} else {
			this.closeButton.setStyle("visibility", "visible");
		}
		//overlay click close option
		if (options.overlayClose){
			this.overlay.addEvent("click", self.close.bind(self));
		} else {
			this.overlay.removeEvent("click", self.close.bind(self));
		}
		
		if (show) this.show();
		
	},
	close: function(){
		this.caption.setHTML("");
		if (this.iframe) this.iframe.remove(); this.iframe = null;
		this.content.setHTML("");
		this.container.setStyle("display", "none");
		this.overlay.setStyle("display", "none");
	},
	show: function(){
		this.container.setStyle("display", "block");
		this.overlay.setStyle("display", "block");
	},
	updateContent: function(text){
		this.content.setHTML(text);
	},
	positionWindow: function(){
		var tmp_top = 0, tmp_left = 0;
		
		//handle overlay dimensions
		this.overlay.setStyles({ height: window.getScrollHeight() });
		
		//handle container positioning
		tmp_top = 20; tmp_left = 20;
		if (tmp_left < (window.getWidth() - this.width)/2){ tmp_left = (window.getWidth() - this.width)/2; }
		if (tmp_top < (window.getHeight() - this.height)/2){ tmp_top = (window.getHeight() - this.height)/2; }
		this.container.setStyles({ top: tmp_top, left: tmp_left });
	},
	changeDimension: function(w, h){
		var currW = 0, currH = 0, currL, currT;
		currW = this.container.getStyle("width").toInt();
		currH = this.container.getStyle("height").toInt();
		currL = this.container.getStyle("left").toInt();
		currT = this.container.getStyle("top").toInt();
		
		if (w){
			this.container.setStyle('width', w);	
			this.caption.setStyle( 'width', w);
			this.width = w;
		}
		if (h){
			this.container.setStyle('height', h);	
			this.height = h;
		}
		this.container.setStyle('display', 'block');	
		if (this.iframe){
			this.iframe.setStyle( 'height', this.height);
		}
		this.content.setStyles({ height: this.height, width: this.width});
		this.positionWindow();
	},
	unload: function(){
		$each(this, function(item, i){
			//if ($type(item) == "element"){ item.destroy(); }
			if ($type(item) == "array"){ item.empty(); }
			item = null;
		});
	}
});
var Lightbox = null;
window.addEvent('domready', function(){
	Lightbox = new modalWindow({classPrefix: 'modal_'});	
});
window.addEvent('resize', function(){
	Lightbox.positionWindow();	
});