var ModalBox = new Class({
	options: {
		maskColor: '#ffffff',
		openers: [],
		otherBoxOpeners: [],
		otherBox: null
	},
	initialize: function(element, options){
		/**
		 * We have to clone the original element, and work with the clone, since the
		 * popup is appended to the document after we have added a mask to the entire
		 * page.
		 */ 
		this.element = $(element);
		this.setOptions(options);
		/*
		 * Seems as if IE6 can not handle the transparency in this situation
		 */
		if (!Browser.Engine.trident4) {
			this.mask = new Element('div',
				{
					'styles':
					{
						'position':'absolute',
						'top':0,
						'left':0,
						'opacity':0,
						'height': (window.getHeight() > window.getScrollHeight()) ? window.getHeight() + "px": window.getScrollHeight() + "px",
						'width': (window.getWidth() > window.getScrollWidth()) ? window.getWidth() + "px": window.getScrollWidth() + "px",
						'background':this.options.maskColor,
						'z-index':9999
					}
				}
			);
		} else {
			this.mask = new Element('div',
				{
					'html':' ',
					'styles':
					{
						'position':'absolute',
						'top':0,
						'left':0,
						'height':(window.getHeight() > window.getScrollHeight()) ? window.getHeight() + "px": window.getScrollHeight() + "px",
						'width':(window.getWidth() > window.getScrollWidth()) ? window.getWidth() + "px": window.getScrollWidth() + "px",
						'background':this.options.maskColor,
						'z-index':9999
					}
				}
			);
		}
		
		/**
		 * Now we extend this.element with this, to make it easier to reach the mask and options.
		 */
		$extend(element, this);
		/**
		 * Some styling
		 */
		 
		element.setStyles({
			'display':'block',
			'visibility':'hidden',
			'position':'absolute',
			'z-index':10000
		});
		/**
		 * Tweening effects should last for a short time, it is not a movie we are watching.
		 */
		element.mask.set('tween', {duration: 'short'});
		element.set('tween', {duration: 'short'});
		/**
		 * We add event listeners to the elements which are provided as openers, and make them open the popup on click.
		 */
		element.options.openers.each(function(opener) {
			opener.addEvent('click', function(e) {
				e.stop();
				element.show();
			});
		});
		element.options.otherBoxOpeners.each(function(otherBoxOpener) {
			otherBoxOpener.addEvent('click', function(e) {
				e.stop();
				element.hide();
				element.options.otherBox.show();
			});
		});
		/**
		 * The closer is an element with class name cancelLink within the element itself.
		 */
		element.getElements(".cancelLink").each(function(cancelLink) {
			cancelLink.addEvent('click', function(e) {
				e.stop();
				element.hide();
			});
		});
		window.addEvents({
			'resize': this.update.bindWithEvent(this),
			'scroll': this.update.bindWithEvent(this)
		});
		element.getElements(".focusDelete").each(function(focusDelete) {
			focusDelete.store('original', focusDelete.value);
			focusDelete.addEvent('focus', function(e) {
				if (focusDelete.value==focusDelete.retrieve('original')) {
					focusDelete.value='';
				}
				focusDelete.setStyle('color', '#000000');
			});
			focusDelete.addEvent('blur', function(e) {
				if (focusDelete.value=='') {
					focusDelete.value=focusDelete.retrieve('original');
				}
				focusDelete.setStyle('color', '#000000');
			});
		});
		element.getElements(".focusTextAreaDelete").each(function(focusDelete) {
			focusDelete.store('original', focusDelete.get('html'));
			focusDelete.addEvent('focus', function(e) {
				if (focusDelete.get('html')==focusDelete.retrieve('original')) {
					focusDelete.set('html','');
				}
				focusDelete.setStyle('color', '#000000');
			});
			focusDelete.addEvent('blur', function(e) {
				if (focusDelete.get('html')=='') {
					focusDelete.set('html',focusDelete.retrieve('original'));
				}
				focusDelete.setStyle('color', '#000000');
			});
		});
	},
	show: function() {
		var element = this.element;
		document.body.appendChild(element.mask);
		document.body.appendChild(element);
		leftPoint = ((window.getWidth()-element.getCoordinates().width)/2)+window.getScrollLeft();
		topPoint = ((window.getHeight()-element.getCoordinates().height)/2)+window.getScrollTop();
		element.setStyles({
			'top': topPoint + 'px',
			'left': leftPoint + 'px',
			'visibility': 'visible'
		});
		if (!Browser.Engine.trident4) {
			element.mask.tween('opacity', 0.8);
		}
	},
	update: function() {
		var element = this.element;
		leftPoint = ((window.getWidth()-element.getCoordinates().width)/2)+window.getScrollLeft();
		topPoint = ((window.getHeight()-element.getCoordinates().height)/2)+window.getScrollTop();
		element.morph({'top': topPoint, 'left': leftPoint});
	},
	hide: function() {
		this.element.dispose();
		this.mask.dispose();
		$$('body').setStyle('overflow','auto');
	}
});
ModalBox.implement(new Options, new Events);
var FormModalBox = new Class({
	Extends: ModalBox,
	options: {
		action: '',
		inputNames: [],
		submitButtonSelector: '.somethingstrange',
		extras: []
	},
	initialize: function(element, options) {
		this.parent(element, options);
		this.setOptions(options);
		$extend(element, this);
		element = this.element;
		element.getElements(element.options.submitButtonSelector).each(function(submitLink) {
			submitLink.addEvent('click', function(e) {
				e.stop();
				element.getElement(".popupDivGreenGradientImg").getElements("").each(function(a) {a.setStyle("visibility", "hidden")});
				//element.getElement(".ajaxLoaderIndicator").getElements("").each(function(a) {a.setStyle("display", "")});
				var values = new Array();
				for (var i=0; i < element.options.inputNames.length; i++) {
					if (element.getElement('input[name=' + element.options.inputNames[i] + ']') != null) {
						values[i] = element.realValue(element.getElement('input[name=' + element.options.inputNames[i] + ']'));
					} else {
						values[i] = element.realValue(element.getElement('textarea[name=' + element.options.inputNames[i] + ']'));
					} 
				}
				var nameValues = values.associate(element.options.inputNames);
				nameValues['action'] = this.className;
				element.options.extras.each(function(extra) {
					nameValues[extra[0]] = extra[1];
				});
				var myHTMLRequest = new Request.HTML({
					url:element.options.action,
					onComplete: function(responseTree, responseElements, responseHTML, responseJavaScript) {
						if (!responseHTML || responseHTML.length == 0) {
							if (element.options.afterSubmitMessage != null) {
								element.getElement('.popupLoginContainer').set('html', element.options.afterSubmitMessage);
								element.getElement(".popupDivGreenGradientImg").getElements("").each(function(a) {a.setStyle("visibility", "visible")});
							}
							element.highlightErrors(responseHTML);
							element.reloadWindow.delay(1000);
						} else {
							element.getElement(".popupDivGreenGradientImg").getElements("").each(function(a) {a.setStyle("visibility", "visible")});
							//element.getElement(".ajaxLoaderIndicator").getElements("").each(function(a) {a.setStyle("display", "none")});
							element.highlightErrors(responseHTML);
						}
					}
				}).post(nameValues);
			});
		});
		element.getElement('input[name=' + element.options.inputNames[element.options.inputNames.length-1] + ']').addEvent('keydown', function(e) {
			var event = new Event(e);
			if (event.key == 'enter') {
				element.getElements(element.options.submitButtonSelector).each(function(submitLink) {
					submitLink.fireEvent('click', e);
				});
			}
		});
	},
	reloadWindow: function() {
		window.location.reload(null);
	},
	realValue: function(input) {
		return input.value;
	},
	highlightErrors: function(responseHTML) {
		var element = this.element;
		errorPopup = element.getElement(".popupGreenErrorBox");
		hasErrors = false;
		element.getElement(".popupGreenErrorBox").getElements("li").each(function(li) {
			li.setStyle('display', 'none');
		});
		element.options.errors.each(function(error) {
			if (responseHTML.indexOf(error[1]) != -1) {
				hasErrors = true;
				errorPopup.getElement("li." + error[2]).setStyle('display', 'block');
				element.getElement('input[name=' + error[0] + ']').setStyle('color', 'red');
			}
		});
		if (hasErrors) {
			element.getElement(".popupGreenErrorBox").setStyle('display','block');
		}
	}
});