var Facebox = new Class({
	Implements: Options,
	
	options: {
		message: 'Message not specified.',
		url: false,
		ajaxErrorMessage: '<h3>Error 404</h3><p>The requested file could not be found.</p>',
		ajaxDelay: 800,
		width: 370,
		height: 'auto',
		title: false,
		draggable: true,
		submitValue: false,
		submitFunction: false,
		submitFocus: false,
		cancelValue: 'Ok',
		cancelFunction: false,
		loadIcon: '/webshop/themes/common/default/resources/js/facebox/images/loading.gif',
		fadeOpacity: .75
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.box = $(document.createElement("table")).addClass('facebox');
		this.mbox = $(document.createElement("div"));
		window.addEvent('keypress', function(e) {
			if(e.key == 'esc') {
				this.close();
			}
		}.bind(this));
	},
	
	show: function() {
		for (var i = 0; i < 3; i++) {
			var row = this.box.insertRow(i);
			for (var a = 0; a < 3; a++) {
				var cell = row.insertCell(a);
				var cellClass = '';
				if (i == 0)
					cellClass = 'top';
				else if (i == 1)
					cellClass = 'center';
				else if (i == 2)
					cellClass = 'bottom';
				if (a == 0)
					cellClass += 'Left';
				else if (a == 1)
					cellClass += 'Center';
				else if (a == 2)
					cellClass += 'Right';
				if (cellClass == "centerCenter") {
					cell.style.width = this.options.width + "px";
					cell.style.height = "auto";
					this.mbox.className = 'faceboxContent';
					this.mbox.style.position = "relative";
					cell.appendChild(this.mbox);
				}
				cell.className = cellClass;
			}
		}
		this.box.style.position = "absolute";
		var boxLeft = (window.getSize().x / 2) + window.getScroll().x;
		var boxTop = (window.getSize().y / 2) + window.getScroll().y;
		this.box.style.left = boxLeft + "px";
		this.box.style.top = boxTop + "px";
		$$('body')[0].appendChild(this.box);
		var boxMLeft = (this.box.offsetWidth / 2) * (-1); // this.box.getSize().x
		this.box.style.marginLeft = boxMLeft + "px";
		var boxMTop = (this.box.offsetHeight / 2) * (-1); // this.box.getSize().y
		this.box.style.marginTop = boxMTop + "px";
		
		if (this.options.url != false) {
			var loading = document.createElement("img");
			loading.src = this.options.loadIcon;
			loading.className = 'loading';
			this.mbox.appendChild(loading);
			if ((this.options.url != false) && (this.options.url.toLowerCase().indexOf(".png") == -1) && (this.options.url.toLowerCase().indexOf(".jpg") == -1) && (this.options.url.toLowerCase().indexOf(".gif") == -1)) {
				var ajax = new Request({
					url: this.options.url,
					onComplete: function() {
						window.setTimeout(function() {
							this.mbox.removeChild(loading);	
							this.insertMessage();
						}, this.options.ajaxDelay);
					}.bind(this),
					onSuccess: function(html) {
						this.options.message = html;
					}.bind(this),
					onFailure: function(html) {
						this.options.message = options.ajaxErrorMessage;
					}.bind(this)
				});
				ajax.send();
			} else {
				var img = document.createElement("img");
				img.src = this.options.url;
				img.style.visibility = "hidden";
				img.style.position = "absolute";
				img.style.left = "0px";
				img.style.top = "0px";
				this.mbox.appendChild(img);
				window.setTimeout(function() {
					this.faceboxLoadImage(img, loading);
				}.bind(this), this.options.ajaxDelay);
			}
		} else {
			this.insertMessage();
		}
	},
	
	faceboxLoadImage: function(img, loading) {
		if ((img.width != null) && (img.width != undefined) && (img.width != "")) {
			this.options.width = img.width;
			this.options.height = img.height;
			if ((this.options.title != "") && (this.options.title != false)) {
				var imgAlt = this.options.title;
			}
			else {
				var imgAlt = img.src;
			}
			this.options.message = '<img src="' + img.src + '" alt="' + imgAlt + '" />';
			this.mbox.removeChild(img);
			this.mbox.removeChild(loading);
			this.insertMessage();
		} else {
			this.faceboxLoadImage(img, loading);
		}
	},
		
	insertMessage: function() {
		var title = false;
		if ((this.options.title != null) && (this.options.title != false) && (this.options.title != "")) {
			title = document.createElement("h2");
			title.innerHTML = this.options.title;
			title.className = 'faceboxTitle';
			this.mbox.appendChild(title);
		}
		
		var faceboxMessage = document.createElement("div");
		faceboxMessage.className = "faceboxMessage";
		if (this.options.height != "auto")
			faceboxMessage.style.height = this.options.height + "px";
		this.mbox.appendChild(faceboxMessage);
		faceboxMessage.style.width = this.options.width + "px";
		if (this.options.height != "auto")
			faceboxMessage.style.height = this.options.height + "px";
	
		var content = this.options.message;
		faceboxMessage.innerHTML = content;
		
		if ((this.options.url != false) && ((this.options.url.toLowerCase().indexOf(".png") != -1) || (this.options.url.toLowerCase().indexOf(".jpg") != -1) || (this.options.url.toLowerCase().indexOf(".gif") != -1)) && ((title == false) || (title == "")) && (this.options.submitValue == false) && (this.options.cancelValue == "Cancel") && (this.options.submitFunction == false)) {
			var img = faceboxMessage.getElementsByTagName("img");
			if (img.length > 0) {
				img[0].style.cursor = "pointer";
				if (window.attachEvent) {
					img[0].attachEvent("onclick", function() {
						var fx = new Fx.Morph(this.box, {duration: 300});
						fx.start({opacity: 0}).chain(function() { $$('body')[0].removeChild(this.box); });
					}.bind(this));						
				} else {
					img[0].addEvent("click", function() {
						var fx = new Fx.Morph(this.box, {duration: 300});
						fx.start({opacity: 0}).chain(function() { $$('body')[0].removeChild(this.box); });
					}.bind(this));
				}
			}
		} else {
			var faceboxFooter = document.createElement("div");
			faceboxFooter.className = "faceboxFooter";
			this.mbox.appendChild(faceboxFooter);
			
			if ((this.options.submitValue != false) && (this.options.submitValue != null) && (this.options.submitValue != "")) {
				var submitButton = document.createElement("input");
				submitButton.setAttribute("type", "button");
				submitButton.className = 'faceboxSubmit';
				submitButton.setAttribute("value", this.options.submitValue);
				if (window.attachEvent)
					submitButton.attachEvent("onclick", this.options.submitFunction);
				else
					submitButton.addEvent("click", this.options.submitFunction);
				faceboxFooter.appendChild(submitButton);
				if (this.options.submitFocus == true)
					submitButton.focus();
			}
			var cancelButton = document.createElement("input");
			cancelButton.setAttribute("type", "button");
			cancelButton.setAttribute("value", this.options.cancelValue);
			if (this.options.cancelFunction == false) {
				if (window.attachEvent) {
					cancelButton.attachEvent("onclick", this.close.bind(this));
				} else {
					cancelButton.addEvent("click", this.close.bind(this));
				}
			} else {
				if (window.attachEvent)
					cancelButton.attachEvent("onclick", this.options.cancelFunction);
				else	
					cancelButton.addEvent("click", this.options.cancelFunction);
			}
			faceboxFooter.appendChild(cancelButton);
		}
		
		if ((this.options.draggable == true) && (title != false))
			var dragging = new Drag.Move(this.box, {handle: title});
			
		var boxMTop = (this.box.getSize().y / 2) * (-1);
		this.box.style.marginTop = boxMTop + "px";
	},
	
	close: function() {
		var fx = new Fx.Morph(this.box, {duration: 300});
		fx.start({
			opacity: 0
		}).chain(function() {
			$$('body')[0].removeChild(this.box);
		}.bind(this));
	},
	
	fastclose: function() {
		$$('body')[0].removeChild(this.box);
	},
	
	returnMessageBox: function() {
		var messageBox = box.getElements(".faceboxMessage")[0];
		return messageBox;
	},
	
	fade: function() {
		var overlayW = this.mbox.offsetWidth; // mbox.getSize().x
		var overlayH = this.mbox.offsetHeight; // mbox.getSize().y
		var overlay = document.createElement("div");
		overlay.style.width = overlayW + "px";
		overlay.style.height = overlayH + "px";
		overlay.style.position = "absolute";
		overlay.style.left = "-1px";
		overlay.style.top = "-1px";
		overlay.className = 'faceboxOverlay';
		overlay.style.backgroundColor = "#fff";
		var hide = new Fx.Morph(overlay, {duration: 400});
		hide.set({
			opacity: this.options.fadeOpacity
		});
		this.mbox.appendChild(overlay);
	},
	
	unfade: function() {
		this.mbox.setAttribute("id", "tmpMBoxId");
		var overlay = $$('#tmpMBoxId .faceboxOverlay'); // mbox.getElements('.faceboxOverlay');
		this.mbox.setAttribute("id", "");
		if (overlay.length > 0)
			this.mbox.removeChild(overlay[0]);
		var fx = new Fx.Morph(this.box);
		fx.set({opacity: 1});
	}
});