var OverlayLogin = new Class({
	Implements: [Options, Events, Log],
	Extends: Overlay,
	
	options: {
		message: "Vul je gegevens in en klik op inloggen."
	},
	
	// Constants
	AUTO_HIDE_DELAY: 5000,

	// Variables
	form: null,
	explanationMessage: null,
	callback: null,
	
	initialize: function(options)
	{
		//this.enableLog();
		this.log("OverlayLogin::initialize()");
		
		this.setOptions(options);
		
		this.parent('login', options);
	},

	reset: function()
	{
		this.log("OverlayLogin::reset()");

		// Invoke parent
		this.parent();

		// Error message
		this.errorMessage.hide();
		this.errorMessage.fx.set(0);
		this.element.removeClass('error');
		
		// Forgotten password
		this.forgottenPassword.fx.set({
			'color': '#787878',
			'background-color': 'transparent'
		});

		// Success message
		this.successMessage.hide();
		this.successMessage.updateAccount.hide();
		this.successMessage.fx.set(0);
	},

	submit: function()
	{
		this.log("OverlayLogin::submit()");
	},
	
	initilizeWindow: function()
	{
		this.log("OverlayLogin::initilizeWindow()");
		
		// Invoke parent
		this.parent();

		// Window
		this.window = this.element.getElement('.window');

		// Explanation message
		this.explanationMessage = this.element.getElement('.explanation .message');
		this.options.message = this.explanationMessage.get('html');

		// Form
		this.initForm();
	},


	show: function(message)
	{
		this.log("OverlayLogin::show(" + message + ")");

		if(!message)
		{
			message = this.options.message;
		}

		this.explanationMessage.set('html', message);

		this.parent();
	},

	/*
	 * Init form
	 */
	initForm: function()
	{
		this.log("OverlayLogin::initForm()");

		// Error message
		this.errorMessage = this.element.getElement('.error-message');
		this.errorMessage.fx = new Fx.Tween(this.errorMessage, {
			duration: 500,
			transition: Fx.Transitions.Quad.easeOut,
			property: 'opacity',
			link: 'cancel'
		});
		this.errorMessage.fx.addEvent('start', function() {
			if(this.errorMessage.getStyle('opacity').toInt() == 0)
			{
				this.errorMessage.show();
				this.element.addClass('error');
			}
		}.bind(this));
		this.errorMessage.fx.addEvent('complete', function() {
			if(this.errorMessage.getStyle('opacity').toInt() == 0)
			{
				this.errorMessage.hide();
				this.element.removeClass('error');
			}
		}.bind(this));
		this.errorMessage.fx.set(0);

		// Forgotten password
		this.forgottenPassword = this.element.getElement('.forgotten-password');
		this.forgottenPassword.fx = new Fx.Morph(this.forgottenPassword, {
			duration: 500,
			transition: Fx.Transitions.Quad.easeOut,
			link: 'cancel'
		});

		// Success message
		this.successMessage = this.element.getElement('.success');
		this.successMessage.updateAccount = this.successMessage.getElement('.update-account');
		this.successMessage.fx = new Fx.Tween(this.successMessage, {
			duration: 500,
			transition: Fx.Transitions.Quad.easeOut,
			property: 'opacity',
			link: 'cancel'
		});
		this.successMessage.fx.addEvent('start', function() {
			if(this.successMessage.getStyle('opacity').toInt() == 0)
			{
				this.successMessage.show();
			}
		}.bind(this));
		this.successMessage.fx.addEvent('complete', function() {
			if(this.successMessage.getStyle('opacity').toInt() == 0)
			{
				this.successMessage.hide();
			}
		}.bind(this));
		this.successMessage.fx.set(0);

		var requestUrl = this.application.getConfig().requestPath.login;

		var handlers = {
			onRequest: function()
			{
				this.log("onRequest");

				this.forgottenPassword.fx.start({
					'color': '#787878',
					'background-color': '#fff'
				});

			}.bind(this),
			onSuccess: function(response)
			{
				this.log("onSuccess(" + response + ")");

				if(response.success)
				{
					this.log("succes!");

					this.log("response.email: " + response.email);

					if(response.url)
					{
						this.successMessage.updateAccount.getElement('.update').set('href', response.url);
						this.successMessage.updateAccount.show();
					}
					else
					{
						this.close.delay(this.AUTO_HIDE_DELAY, this);
					}

					// Error message
					this.errorMessage.fx.start(0);

					// Success message
					this.successMessage.fx.start(1);

					this.fireEvent('success', [response]);
				}
				else
				{
					this.log("error!");

					// Forgotten password
					this.forgottenPassword.fx.start({
						'color': '#fff',
						'background-color': '#ff6c00'
					});

					// Error message
					this.errorMessage.fx.start(1);
				}
			}.bind(this),
			onFailure: function(xhr)
			{
				this.log("onFailure");

				this.form.formErrorMessage.clear();
				this.form.formErrorMessage.addMessage('email', 0, "Verzenden mislukt");
				this.form.formErrorMessage.show();
			}.bind(this)
		};

		var options = {
			showLoader: true,
			allowStatus: true,
			formErrorMessage: {
				allow: false,
				container: this.element.getElement('.form-message-container'),
				allowClose: false
			}
		};

		var elementOptions = {
		};

		var form = new JsonForm($('login-form'), requestUrl, handlers, options);

		var emailElement = new FormElement(form, 'email', elementOptions);
		//emailElement.addValidation(Form.REGEX_EMAIL, 'Vul een geldig e-mailadres in');
		form.addElement(emailElement);

		var passwordElement = new FormElement(form, 'password', elementOptions);
		//passwordElement.addValidation(Form.REGEX_PASSWORD, 'Vul een wachtwoord in');
		form.addElement(passwordElement);

		// Add buttons
		var submitButton = new FormSubmitButton(form, '.button.submit', {showLoader: true});
		form.addButton(submitButton);
		
		// Cancel button
		this.element.getElement('.cancel').addEvent('click', function(event){
			event.preventDefault();
			this.close();
		}.bind(this));

		// Save form
		this.form = form;

		/*
		this.form.addEvent('onError', function() {

			this.log("onERROR!!!!!!");

			this.forgottenPassword.fx.start({
				'color': '#fff',
				'background-color': '#ff6c00'
			});

		}.bind(this));
		*/
	}
	
});