var Facebox = new Class({
	
	Implements: [Events, Options, Chain],
	
	options: {
		overlay: {
			display: false,
			color: "#fff",
			opacity: 0,
			click: false,
			transition: Fx.Transitions.Circ.easeOut,
			duration: 600
		},
		width: 400,
		height: null,
		fx: {
			fadeDuration: 600,
			fadeTransition: Fx.Transitions.Circ.easeOut,
			showDuration: 600,
			showTransition: Fx.Transitions.Circ.easeOut
		},
		title: null,
		info: null,
		controls: [
			["Sluit", "close", function() { this.hide(); }, false]
		],
		html: null,
		draggable: false,
		loaddelay: 400
	},
	
	initialize: function(_options) {
		this.setOptions(_options);
		
		this.container = new Element("div", {"class": "facebox"});
		this.container.setStyles({
			position: "absolute",
			top: "0px",
			left: "0px",
			display: "none",
			opacity: 0
		});
		this.container.inject(document.getElement("body"));
						
		var borders = ["tl", "tr", "tc", "bl", "br", "bc"];
		borders.each(function(border) {
			border = new Element("div", {"class": border});
			border.inject(this.container);
		}.bind(this));
		
		var centerleft = new Element("div", {"class": "cl"});
		centerleft.inject(this.container.getElement(".bl"), "before");		
		
		var centerright = new Element("div", {"class": "cr"});
		centerright.inject(centerleft);
		
		var center = new Element("div", {"class": "c"});
		center.inject(centerright);
		
		this.content = new Element("div", {"class": "facebox-content"});
		this.setWidth(this.options.width);
		this.setHeight(this.options.height);
		this.content.inject(center);		
				
		if (this.options.title != null) {
			this.setTitle(this.options.title);
		}
		
		if (this.options.info != null) {
			this.setInfo(this.options.info);
		}
		
		if (this.options.controls.length > 0) {
			this._footer(this.options.controls);
		}
		
		if (this.options.html != null) {
			this.setContent(this.options.html);
		}
		
		if ((this.options.overlay.display == true) && (Overlay)) {
			this.overlay = new Overlay({
				color: this.options.overlay.color,
				opacity: this.options.overlay.opacity,
				fx: {
					duration: this.options.overlay.duration,
					transition: this.options.overlay.transition
				}
			});
			if (this.options.overlay.click == true) {
				this.overlay.addEvent("click", function() {
					this.hide();
				}.bind(this));
			}
		}
	},
	
	setContent: function(html) {
		this.content.set("html", html);
		this._position();
	},
	
	getContentElement: function() {
		return this.content;
	},
	
	loadContent: function(url, form) {
		form = (form) ? form : false; 
		
		var loadImage = false;
		/*
		this.content.setStyles({
			height: this.content.getSize().y
		});
		this.content.set("html", "");
		this.content.addClass("loading");
		this._position();
		
		var images = [".png", ".jpg", ".jpeg", ".gif"];
		images.each(function(image) {
			if (url.toLowerCase().lastIndexOf(image) == url.length - image.length) {
				loadImage = true;
			}
		});
		*/
		
		if (loadImage == false) {
			if (form == false) {
				(new Request({
					url: url,
					//encoding: 'ISO-8859-1',
					link: 'chain',
					onSuccess: function(html) {
						this._loadContentFinish(html);
					}.bind(this),
					onFailure: function(xhr) {
						this._loadContentFinish("Error code " + xhr.status);
						console.log(xhr);
					}.bind(this)
				})).send();
			} else {
				form.set('send', {
					url: form.getProperty('action'),
					//encoding: 'ISO-8859-1',
					onSuccess: function(html) {
						this._loadContentFinish(html);
					}.bind(this),
					onFailure: function(xhr) {
						this._loadContentFinish("Error code " + xhr.status);
					}.bind(this)
				});
				//alert(JSON.decode(form.send()));
				//alert('send is nu');
				form.send();
			}
		} else {
			var image = new Element("img", {src: url});
			image.addEvent("load", function() {
				var width = image.getSize().x;
				var height = image.getSize().y;
				image.dispose();
				if (width > window.getSize().x) {
					var _width = window.getSize().x *0.8;
					var _height = (_width/width) * height;
				} else if (height > window.getSize().y) {
					var _height = window.getSize().y * 0.8;
					var _width = (_height/height) * width;
				} else {
					var _width = width;
					var _height = height;
				}
				image = '<img src="' + url + '" width="' + _width + '" height="' + _height + '" class="facebox-image" />';
				this._loadContentFinish(image, _width, _height);
			}.bind(this));
			image.setStyles({
				position: "absolute",
				top: "-500px",
				left: "-500px",
				visibility: "hidden"
			});
			image.inject(document.getElement("body"));
		}
		return this;
	},
	
	_loadContentFinish: function(html, width, height) {
		window.setTimeout(function() {
			this.content.removeClass("loading");
			this.setWidth(this.width);
			this.setHeight(this.height);
			this.setContent(html);
			if (width != null) {
				this.getContentElement().setStyle("width", width);
				this.resetposition();
			}
			if (height != null) {
				this.getContentElement().setStyle("height", "auto");
				this.resetposition();
			}
			this._position();
			this.callChain();
		}.bind(this), this.options.loaddelay);	
	},
	
	setWidth: function(width) {
		this.content.setStyle("width", width);
		this.width = width;
	},
	
	setHeight: function(height) {
		this.content.setStyle("height", height || "auto");
		this.height = height || "auto";
	},
	
	setTitle: function(title) {
		if (!this.title)
			this._title();
		this.title.set("html", title);
	},
	
	setInfo: function(info) {
		if (!this.info)
			this._info();
		this.info.set("html", info);	
	},
	
	show: function() {
		this.container.setStyle("display", "block");
		this._position();
		if (!this.fxShow)
			this.fxShow = new Fx.Morph(this.container, {duration: this.options.fx.showDuration, transition: this.options.fx.showTransition});		
		this.fxShow.start({
			opacity: 1
		}).chain(function() {
			this.fireEvent("show");
		});
		if (this.overlay) {
			this.overlay.show();
		}
	},
	
	hide: function() {	
		if (!this.fxFade)
			this.fxFade = new Fx.Morph(this.container, {duration: this.options.fx.fadeDuration, transition: this.options.fx.fadeTransition});		
		this.fxFade.start({
			opacity: 0
		}).chain(function() {
			this.container.setStyles({
				display: "none"
			});
			this.fireEvent("hide");
		}.bind(this));
		if (this.overlay) {
			this.overlay.hide();
		}
	},
	
	resetposition: function() {
		this.dragged = false;
		this._position();
	},
	
	addControl: function(value, name, func, submit) {
		submit = (submit == null) ? false : submit;
		var control = Array();
		control["value"] = value;
		control["name"] = name;
		control["function"] = func;
		control["submit"] = submit;
		var controls = new Array();
		controls[0] = control;
		this.controls.each(function(control) {
			controls[controls.length] = control;
		});
		this.setControls(controls);
		this.fireEvent("controlAdd", name);
	},
	
	removeControl: function(name) {
		var controls = new Array();
		this.controls.each(function(control) {
			if ((control[1] || control["name"]) != name) {
				controls[controls.length] = control;
			}
		}.bind(this));
		this.setControls(controls);
		this.fireEvent("controlRemove", name);
	},
	
	/*
		-- Not tested yet
	editControl: function(name, properties) {
		this.controls.each(function(control) {
			if ((control[1] || control["name"]) == name) {
				control[0] = properties[0];
				control[1] = properties[1];
				control[2] = properties[2];
				control["value"] = properties["value"];
				control["function"] = properties["function"];
				control["submit"] = properties["submit"]; 
			}
		});
		this.setControls(this.controls);
		this.fireEvent("controlEdit", name);
	},
	*/
	
	getControl: function(name) {
		var control = false;
		this.controls.each(function(_control) {
			if ((_control["name"] || _control["1"]) == name) {
				control = _control;
			}
		});
		return control;
	},
	
	setControls: function(controls) {
		this._footer(controls);
	},
	
	_position: function() {
		if (!this.dragged) {
			this.container.setStyles({
				left: (window.getSize().x/2) + window.getScroll().x - (this.container.getSize().x/2),
				top: (window.getSize().y/2) + window.getScroll().y - (this.container.getSize().y/2)
			});
		}
	},
	
	_title: function() {
		this.title = new Element("div", {"class": "facebox-title"});
		this.title.inject((this.info || this.content), "before");
		if (this.options.draggable == true) {
			(new Drag.Move(this.container, {handle: this.title})).addEvent("drag", function() { this.dragged = true }.bind(this));
		}	
	},
	
	_info: function() {
		this.info = new Element("div", {"class": "facebox-info"});
		this.info.set("html", this.options.subtitle);
		this.info.inject(this.content, "before");
		if (this.options.draggable == true) {
			(new Drag.Move(this.container, {handle: this.info})).addEvent("drag", function() { this.dragged = true }.bind(this));
		}
	},
	
	_footer: function(controls) {
		if (!this.footer) {
			this.footer = new Element("div", {"class": "facebox-footer"});
			this.footer.inject(this.content, "after");
		}
		this.controls = controls;
		this.footer.set("html", "");
		controls.each(function(control) {
			var input = new Element("input", {"type": "button", value: (control[0] || control["value"]), name: (control[1] || control["name"])});
			input.addEvent("click", (control[2] || control["function"]).bind(this));
			if ((control[3] || control["submit"]) == true) {
				input.addClass("doesubmit");
			}
			input.inject(this.footer);
		}.bind(this));
	}
	
});