/*	
	
	Params for loading content:
	===========================
	url: [String. Valid URL (relative or absolute).]
	width: [Integer. Size of the box width (content).]
	height: [Integer. Size of the box height (content).]
	cssClass: [String. Special Case Styling for Error Box.]
	
	This can also be a URL with queryString.
	"/my-page?width=xxx&height=xxx&cssClass=abc"
	
*/

var ContentBox = new Class ({
	Implements: [Options, Events],
	
	// Properties.
	_isVisible : false,
	
	// Options
	options: {
		id: "content-box",
		container: "main",
		position: "top",
		darkness: 0.8,
		cssPath: "/styles/ContentBox.js.css",
		width: 500,
		height: 300,
		
		// special options
		clickAnywhereToDismiss: false,
		useEscapeToDismiss: true
	},
	
	// Methods
	initialize: function(options){
		
		this.setOptions(options);
		this._init_dom();
		
		return this;
		
	},
	
	_init_dom: function() {

		var self = this;
		
	// Styles
		this.modalStyles = new Asset.css(this.options.cssPath);
		
	// Build the components.
		this.modal = new Element("div", {
			id: self.options.id + "-modal"
		}).inject(self.options.container, self.options.position);
		
		this.content_box = new Element("div", {
			id: self.options.id
		}).inject(this.options.container, self.options.position);
		
		this.content_area = new Element("div", {
			id: self.options.id + "-content"
		}).inject(this.content_box, "top");
		
		this.close_button = new Element("a", {
			href: "#close-"+ self.options.id,
			id: self.options.id+"-close-button",
			text: "Close"
		}).inject(this.content_box, "top");
		
		// Default: hide everything!!
		this._hide("now");
		
	// Animations?
		this.content_area.fade("hide");
		
		this.morpher = new Fx.Morph(this.content_box, {
			duration: 500,
			transition: Fx.Transitions.Expo.easeOut,
			onComplete: function() {
				
				self.content_area.fade("in");
				
			}
		});
				
	// Events!!!
		this._init_events();
	},
	
	_init_events: function() {
		
		var self = this;
		
		this.close_button.addEvents({
			"click": function(evt) {
				
				evt.stop();
				self._hide();
				
			}
		});
		
		// Escape Key dismisses
		if (this.options.useEscapeToDismiss == true) {
			
			window.addEvents({
				"keypress" : function(evt) {
					
					if (evt.key == "esc") {
						
						self.close_button.fireEvent("click", evt);
						
					}
					
				}
			});
			
		}
		
		// Clickable Modal
		if (this.options.clickAnywhereToDismiss == true) {
			
			this.modal.addEvents({
				"click" : function(evt) {
					evt.stop();
					self.close_button.fireEvent("click", evt);
				}
			});
			
		}
		
	},
	
	_load: function(what, title, callback) {
		
		var self = this;
		self._show();
		(function(){ self._loadContent(what, title, callback); }).delay(500);
		
	},
	
	_loadContent: function(what, title, callback) {
		
		var self = this;
		
		self._removeContent();
		
		if (title != null) {
			
			this._setContentBoxTitle(title);
			
		}
		
		var content_path = null;
		var data = {};
		data.width = self.options.width;
		data.height = self.options.height;
		
		// Is it a string or a hash/object?
		switch ($type(what)) {
			
			case "string":
				
				// url to object?
				var uri = new URI(what);
				data = uri.get("data");
				
				uri.clearData();
				content_path = uri.toString();
				
			break;
			
			case "object":
				
				// carry on.
				content_path = what.url;
				data.width = what.width;
				data.height = what.height;
				if (what.cssClass) {
					data.cssClass = what.cssClass;
				}
				
			break;	
			
			case "element":
				
				// inject HTML.
				data.type = "element";
				
			break;
			
		}
		
		// Go and get it.
		if (data.type == "swf") {
			
			self.content_area.swfContent = new Swiff(content_path, {
				
				width: data.width,
				height: data.height,
				container: self.content_area
				
			});
			
			self._resizeTo(data.width, data.height);
			
			if (typeOf(callback) == "function") callback();
			
		
		} else if (data.type == "img") {
			
			self._resizeTo(data.width, data.height, false);
			
			self.content_area.img = Asset.image( content_path,  {
				onLoad: function() {
					
					
					self.content_area.img.injectInside(self.content_area);
					self.content_area.fade("show");
					
					if (typeOf(callback) == "function") callback();
					
				}
			});
			
		} else if (data.type == "element") {
			
			what.injectInside(self.content_area);
			self.content_area.fade("show");
			
			if (typeOf(callback) == "function") callback();
			
		} else {
			
			var request = new Request({

				url: content_path,
				headers: { "x-respond-with": "json" },
				data: data,

				onRequest: function() {

					self.content_area.addClass("loading");

				},

				onSuccess: function(responseText) {
					
					
					var elements = Elements.from(responseText);
					self.content_area.removeClass("loading");
					// self.content_area.set("html", responseText);
					self.content_area.empty();
					elements.inject(self.content_area);
					
					self.content_area.fade("show");
					
					if (typeOf(callback) == "function") callback();
					
					//console.log(data.width);
					self._resizeTo(self.content_area.getSize().x, self.content_area.getSize().y,false);
					
					//self._resizeTo(300, 300,false);
					
					
					
				},

				onComplete: function() {

					self._show();

				},

				onFailure: function(xhr) {

					//console.log("failure");

				}

			}).send();
			
		}
		
	},
	
	_resizeTo: function(x, y, animate) {
		
		// default animate to true;
		if (animate == null) animate = true;
		
		var self = this;
		var margin_left = -(x / 2);
		//alert(x + '/' + y);
		
		var options = {
		    'height': y,
		    'width': x,
			"margin-left": margin_left
		};
		
		(animate) ? self.morpher.start(options) : self.morpher.set(options);

	},
	
	_show: function() {
		var self = this;
		if (this._isVisible == false) {
			self.modal.show();
			self.content_box.show();
			this.modal.fade(this.options.darkness);
			this.content_box.fade("in");
			this._isVisible = true;
			
		}
		
	},
	
	_hide: function(when) {
		
		var self = this;
		
		if (when) {
			
			if (when == "now") {
				
				// remove stuff immediately.
				self.modal.fade("hide").hide();
				self.content_box.fade("hide").hide();
				self._isVisible = false;
				//self._removeContent();
				
			}
			
		}
		
		if (self._isVisible) {
			
			self.modal.fade(0);
			self.content_box.fade(0);
			self._isVisible = false;

			(function(){
				self.modal.hide();
				self.content_box.hide();
				if (self.content_box.hasClass("plain")) self.content_box.removeClass("plain");
			}).delay(800);
			
		}
		
	},
	
	_setContentBoxTitle: function(title) {
		
		this.title = new Element("h2", { text: title, "class": "title" }).inject(this.close_button, "after");
		
	},
	
	_removeContent: function() {
		
		if (this.title) {
			
			this.title.destroy();
						
		}

		if (this.content_area.swfContent) {
		 	
		 	this.content_area.swfContent.destroy();
		 	
		}
		
		this.content_area.set("html", null);
		this.content_area.fade("hide");
		
	}

});