//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/Panel>
//= require <findsalons/ApplicationFacade>
//= require <uiframework/UICEvent>
//= require <uiframework/UIButton>
var AccoutSetupView = function()
{
	this.Extends = Panel;
	
	this._usernameMessage = null;
	this._usernameMessageChanged = false;
	
	this._messageText = null;
	this._messageTextChanged = false;
	
	this.states = /^(info|ok|success|failed)$/;
	
	this.feedbackOkIcon = "img/ok-icon-19x15.png";
	this.feedbackInfoIcon = "img/info-icon-16x15.png";
	this.currentIcon = null;
	
	/**
	 * @ignore
	 */
	this.initialize = function()
	{
		this.parent("accountSetup");
		this.setStyles({
			"z-index":30
		});
		this.borderData(
		{
			topLeft : "img/panel-top-left.png",
			top : "img/panel-top-border.png",
			topRight : "img/panel-top-right.png",
			right : "img/panel-right-border.png",
			bottomLeft : "img/panel-bottom-left.png",
			bottomRight : "img/panel-bottom-right.png",
			bottom : "img/panel-bottom-border.png",
			left : "img/panel-left-border.png"
		});

		this.backgroundStyle({
			"background-color" : "#FFF"
		});
	};
	
	this.commitProperties = function()
	{
		this.parent();
		
		if (this._usernameMessageChanged)
		{
			this._usernameMessageChanged = false;
			if (this.usernameMessage)
				this.usernameMessage.set("text", this._usernameMessage);
		}
		
		if (this._messageTextChanged)
		{
			this._messageChanged = false;
			if (this.message)
				this.message.set("text", this._messageText);
		}
	}

	/**
	 * @ignore
	 */
	this.createChildren = function()
	{
		this.parent();
		
		this.wrapper = new UIComponent("div", {styles:{"position":"relative"}});
		this.addChild(this.wrapper);

		this.title = new UIComponent("h1", {
			"class":"signupLabel"
		});
		this.wrapper.addChild(this.title);

		var styles = {"class":"noMargin noPadding"};
		
		this.message = new UIComponent("p", styles);
		this.addChild(this.message);

		this.description = new UIComponent("p", styles);
		this.wrapper.addChild(this.description);
		
		this.usernameInput = new FormItem("*Username:");
		this.wrapper.addChild(this.usernameInput);
		
		this.firstNameInput = new FormItem("*First Name:");
		this.wrapper.addChild(this.firstNameInput);
		
		this.feedbackIcon = new UIComponent("img", {src:this.feedbackInfoIcon});
		this.wrapper.addChild(this.feedbackIcon);
		
		this.usernameMessage = new UIComponent('p', {"class":"fontSize10 noMargin noPadding"});
		this.wrapper.addChild(this.usernameMessage);

		this.lastNameInput = new FormItem("*Last Name:");
		this.wrapper.addChild(this.lastNameInput);

		this.emailInput = new FormItem("*Email Address:");
		this.wrapper.addChild(this.emailInput);

		this.passwordInput = new FormItem("*Password:");
		this.wrapper.addChild(this.passwordInput);

		this.confirmPasswordInput = new FormItem("*Confirm Password:");
		this.wrapper.addChild(this.confirmPasswordInput);

		this.submitButton = new UIButton("div", {styles:{"cursor":"pointer"}});
		this.wrapper.addChild(this.submitButton);

		this.cancelButton = new UIButton("div", {styles:{"cursor":"pointer"}});
		this.addChild(this.cancelButton);
	};

	this.childrenCreated = function()
	{
		this.parent();
		
		this.feedbackIcon.addEventListener("load", this.invalidateDisplayList, false, 0, this);

		this.title.set("text", "Create new Account. It's Free!");
		
		this.message.set("text", this._messageText);

		var skins =
		{
			upSkin : 'url("img/button1-up.png")',
			overSkin : 'url("img/button1-over.png")',
			downSkin : 'url("img/button1-down.png")',
			disabledSkin:'url("img/button1-disabled.png")'
		}
		var labelStyles =
		{
			up : "p.up",
			down : "p.down",
			over : "p.over",
			disabled: "p.disabled"
		};
		var lw = 125;
		
		this.usernameInput.labelWidth(lw);
		this.firstNameInput.labelWidth(lw);
		this.lastNameInput.labelWidth(lw);
		this.emailInput.labelWidth(lw);
		
		this.usernameMessage.set("text", this._usernameMessage);
		
		this.passwordInput.input().set("type","password");
		this.passwordInput.labelWidth(lw);
		this.confirmPasswordInput.input().set("type","password");
		this.confirmPasswordInput.labelWidth(lw);

		this.submitButton.labelText("Sign Up!");
		this.cancelButton.labelText("Cancel");
		this.submitButton.buttonSkins(skins);
		this.submitButton.labelStyles(labelStyles);
		this.cancelButton.buttonSkins(skins);
		this.cancelButton.labelStyles(labelStyles);

		this.submitButton.addEventListener("click", this.submitButton_clickHandler, false, 0, this);
		this.cancelButton.addEventListener("click", this.cancelButton_clickHandler, false, 0, this);

		this.description.set("text", "Signing up is the first step to getting your business listed and it's free!");
	}

	this.updateDisplayList = function(width, height)
	{
		this.parent(width, height);
		var paddingTop = 15;
		var paddingBottom = 15;
		var paddingLeft = 15;
		var paddingRight = 15;
		var gap = 5;
		
		this.cancelButton.setActualSize(65, 25);
		// Shortcut for states that do not involve 
		// the normal views
		var state = this.currentState;
		if (state == "success" || state == "failed")
		{
			this.message.setActualSize(width - (paddingLeft + paddingRight), this.message.measuredHeight());
			this.message.move(paddingLeft, (height - this.message._height) / 2);
			
			this.cancelButton.move((width - 65) / 2, this.message._y + this.message.height() + gap);
			
			return;
		}
		
		var _w = width - paddingLeft - paddingRight - 10;
		var offsetY = 0;

		var posY = paddingTop;

		this.submitButton.setActualSize(65, 25);
		this.submitButton.move(width - this.submitButton.width() - paddingRight, height - this.submitButton.height() - paddingBottom);

		this.cancelButton.move(this.submitButton._x - this.cancelButton.width() - gap, this.submitButton._y);

		this.title.setActualSize(_w, this.title.height());
		this.title.move((width - this.title.width()) / 2, posY);
		posY += this.title.height() + 25;

		this.description.move((width - this.description.width()) / 2, posY);
		offsetY = posY += this.description.height() + 25;
		
		this.usernameInput.setActualSize(_w, this.usernameInput.measuredHeight());
		this.usernameInput.move(paddingLeft, posY);
		posY += this.usernameInput.height() + 10;
		
		if (this._usernameMessage)
		{
			this.feedbackIcon.visible(true);
			this.usernameMessage.visible(true);
			
			this.feedbackIcon.move(paddingLeft + 135, posY);
			
			this.usernameMessage.setActualSize(_w - 165 - paddingLeft, this.usernameMessage.measuredHeight())
			this.usernameMessage.move(paddingLeft + 165, posY);
			posY += this.usernameMessage.height() + 10;
		}
		else
		{
			this.feedbackIcon.visible(false);
			this.usernameMessage.visible(false);
		}

		this.firstNameInput.setActualSize(_w, this.firstNameInput.measuredHeight());
		this.firstNameInput.move(paddingLeft, posY);
		posY += this.firstNameInput.height() + 10;

		this.lastNameInput.setActualSize(_w, this.lastNameInput.measuredHeight());
		this.lastNameInput.move(paddingLeft, posY);

		posY += this.lastNameInput.height() + 10;

		this.emailInput.setActualSize(_w, this.emailInput.measuredHeight());
		this.emailInput.move(paddingLeft, posY);
		
		posY += this.emailInput.height() + 10;

		this.passwordInput.setActualSize(_w, this.passwordInput.measuredHeight());
		this.passwordInput.move(paddingLeft, posY);

		posY += this.passwordInput.height() + 10;

		this.confirmPasswordInput.setActualSize(_w, this.confirmPasswordInput.measuredHeight() - 5);
		this.confirmPasswordInput.move(paddingLeft, posY);

		// center the elements
		var delta = (height - offsetY - posY) / 2;
		
		this.usernameInput._y += delta;
		this.usernameInput.invalidateDisplayList();
		
		if (this._usernameMessage)
		{
			this.feedbackIcon._y += delta;
			this.feedbackIcon.invalidateDisplayList();
			
			this.usernameMessage._y += delta;
			this.usernameMessage.invalidateDisplayList();
		}

		this.firstNameInput._y += delta;
		this.firstNameInput.invalidateDisplayList();

		this.lastNameInput._y += delta;
		this.lastNameInput.invalidateDisplayList();

		this.emailInput._y += delta;
		this.emailInput.invalidateDisplayList();

		this.passwordInput._y += delta;
		this.passwordInput.invalidateDisplayList();

		this.confirmPasswordInput._y += delta;
		this.confirmPasswordInput.invalidateDisplayList();
	};
	
	this.commitNewState = function()
	{
		this.parent();
		this.currentIcon = null;
		
		switch(this.newState)
		{
			case "info":
				this.currentIcon = this.feedbackInfoIcon;
				if (this.wrapper && !this.contains(this.wrapper))
					this.addChild(this.wrapper);
				this.message.visible(false);
				this.cancelButton.labelText("Cancel");
				break;
				
			case "ok":
				this.currentIcon = this.feedbackOkIcon;
				if (this.wrapper && !this.contains(this.wrapper))
					this.addChild(this.wrapper);
				this.message.visible(false);
				this.cancelButton.labelText("Cancel");
				break;
				
			case "success":
				if (this.wrapper && this.contains(this.wrapper))
					this.removeChild(this.wrapper);
				this.message.visible(true);
				this.cancelButton.labelText("Ok");
				break;
			
			case "failed":
				if (this.wrapper && this.contains(this.wrapper))
					this.removeChild(this.wrapper);
				this.message.visible(true);
				this.cancelButton.labelText("Back");
				break;
				
			default:
				if (this.wrapper && !this.contains(this.wrapper))
					this.addChild(this.wrapper);
				this.message.visible(false);
				this.cancelButton.labelText("Cancel");
				break;
				
		}
		if (this.feedbackIcon)
			this.feedbackIcon.set({src: this.currentIcon});
	}
	
	this.updateUsernameMessage = function(message)
	{
		if (this._usernameMessage == message)
			return;
		this._usernameMessage = message;
		this._usernameMessageChanged = true;
		
		this.invalidateProperties();
	};
	
	this.updateMessageText = function(message)
	{
		if (this._messageText == message)
			return;
		this._messageText = message;
		this._messageTextChanged = true;
		
		this.invalidateProperties();
	};

	this.cancelButton_clickHandler = function(event)
	{
		switch(this.currentState)
		{
			case "success":
				this.clearForm();
				this.state(null);
				this.usernameMessage.set("text", null);
				this.dispatchEvent(new UICEvent("cancel"));
				break;
				
			case "failed":
				this.state(null);
				this.usernameMessage.set("text", null);
				break;
				
			default:
				this.dispatchEvent(new UICEvent("cancel"));
				break;
		}
		
	};

	this.submitButton_clickHandler = function(event)
	{
		var button = event.target;
		if(!button.enabled())
			return;
		var invalidFields = this.validateForm();
		if (!invalidFields.length)
			this.dispatchEvent(new UICEvent("submit"));
	};

	this.validateForm = function()
	{
		var username = this.usernameInput.input().get("value");
		var firstName = this.firstNameInput.input().get("value");
		var lastName = this.lastNameInput.input().get("value");
		var emailAddress = this.emailInput.input().get("value");
		var password = this.passwordInput.input().get("value");
		var password2 =  this.confirmPasswordInput.input().get("value");

		var invalidFields = [];
		if (username.length < 1)
		{
			invalidFields.push(this.usernameInput);
			this.usernameInput.valid(false);
		}
		if (firstName.length < 1)
		{
			invalidFields.push(this.firstNameInput);
			this.firstNameInput.valid(false);
		}
		else
			this.firstNameInput.valid(true);
		if (lastName.length < 1)
		{
			invalidFields.push(this.lastNameInput);
			this.lastNameInput.valid(false);
		}
		else
			this.lastNameInput.valid(true);
		var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
		if (!emailPattern.test(emailAddress))
		{
			invalidFields.push(this.emailInput);
			this.emailInput.valid(false);
		}
		else
			this.emailInput.valid(true);
		if (password.length < 4)
		{
			invalidFields.push(this.passwordInput);
			this.passwordInput.valid(false);
		}
		else
			this.passwordInput.valid(true);
		if (password != password2)
		{
			invalidFields.push(this.confirmPasswordInput);
			this.confirmPasswordInput.valid(false);
		}
		else
			this.confirmPasswordInput.valid(true);
		return invalidFields;
	};
	
	this.clearForm = function()
	{
		this.usernameInput.input().set("value", null);
		this.firstNameInput.input().set("value", null);
		this.lastNameInput.input().set("value", null);
		this.emailInput.input().set("value", null);
		this.passwordInput.input().set("value", null);
		this.confirmPasswordInput.input().set("value", null);
	};
};
AccoutSetupView = new Class(new AccoutSetupView());