//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/Panel>
//= require <uiframework/UICEvent>
//= require <uiframework/UIButton>
var TopRightColumn = function()
{
	this.Extends = Panel;

	this.userInfo = null;
	this.title = null;
	this.statusMessage = null;
	this.statusTextChanged = false;
	this.statusText = "";
	this.rememberMeCk = null;
	this.rememberMeLabel = null;
	this.approvedLabel = null;
	this.passwordInput = null;
	this.pendingLabel = null;
	this.welcomeMsg = null;
	this.declinedLabel = null;

	this._submitButton = null;
	this._createAcctButton = null;
	
	this.initialize = function()
	{
		this.parent("topRightColumn");
		this.borderData(
		{
			bottomLeft : "img/bottom-left-corner-top-right-column.png",
			bottom : "img/border-height35px.png"
		});
		this.backgroundStyle(
		{
			"background" : '#A5B7C9'
		});
	};

	this.commitProperties = function()
	{
		this.parent();
		if (this.statusTextChanged)
		{
			this.statusMessageControl().set("text", this.statusText);
			this.statusTextChanged = false;
		}
	};

	this.createChildren = function()
	{
		this.parent();
		this.title = new UIComponent('h1',
		{
			"text" : "Account Login",
			"class":"accountLoginLabel"
		});
		this.addChild(this.title);
	};

	this.updateDisplayList = function(width, height)
	{
		this.parent(width, height);

		var paddingTop = 10;
		var paddingRight = 20;
		var paddingBottom = 10;
		var paddingLeft = 20;
		var verticalGap = 10;

		this.title.setActualSize(width - paddingLeft - paddingRight, this.title.height());
		this.title.move(paddingLeft, paddingTop);

		var posY = this.title._y + this.title.height() + verticalGap;
		if (this.currentState != "accountStatus")
		{
			this.userInput.setActualSize((width * .55) - paddingRight, this.userInput.measuredHeight() - 5);
			this.userInput.move(width - this.userInput.width() - paddingRight, posY);
			posY += this.userInput.height() + verticalGap;
			this.userNameLabel.move(paddingLeft, this.userInput._y + (this.userInput.measuredHeight() - this.userNameLabel.height()) / 2);

			this.passwordInput.setActualSize(this.userInput.width(), this.userInput.measuredHeight() - 5);
			this.passwordInput.move(this.userInput._x, posY);
			posY += this.passwordInput.height() + verticalGap;

			this.passwordLabel.move(paddingLeft, this.passwordInput._y + (this.passwordInput.measuredHeight() - this.passwordLabel.height()) / 2);
			this.rememberMeLabel.move(paddingLeft, this.passwordInput._y + this.passwordInput.height() + verticalGap);
			this.rememberMeCk.move(this.rememberMeLabel._x + this.rememberMeLabel.width(), this.rememberMeLabel._y - 2.5);
			posY += this.rememberMeCk.height() + verticalGap;
		}
		else
		{
			this.welcomeMsg.move(paddingLeft, posY);
			posY += this.welcomeMsg.height() + (verticalGap * 2);

			this.approvedLabel.move(paddingLeft, posY);
			this.approvedCount.move(width - this.approvedCount.width() - paddingRight, posY);
			posY += this.approvedLabel.height();

			this.pendingLabel.move(paddingLeft, posY);
			this.pendingCount.move(width - this.pendingCount.width() - paddingRight, posY);
			posY += this.pendingLabel.height();

			this.declinedLabel.move(paddingLeft, posY);
			this.declinedCount.move(width - this.declinedCount.width() - paddingRight, posY);
			posY += this.declinedCount.height() + verticalGap;
		}

		this.statusMessageControl().move(paddingLeft, posY);

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

		this.createAcctButton().setActualSize(65, 25);
		this.createAcctButton().move(paddingLeft, height - paddingBottom - this._createAcctButton.height());
	};

	/**
	 * Handles state changes for this view.
	 */
	this.commitNewState = function()
	{
		this.parent();
		switch (this.newState)
		{
			case "accountStatus":
				this.showLoginControl(false);
				this.showAccountStatus(true);
				this.title.set("text", "Account Status");
				this.submitButton().labelText("Sign Out");
				this.createAcctButton().fade("out");
				break;

			default:
				this.showLoginControl(true);
				this.showAccountStatus(false);
				this.title.set("text", "Account Login");
				this.submitButton().labelText("Sign In");
				this.createAcctButton().fade("in");
				break;
		}
	};

	// ------------------------------------------------
	// State dependent child creation/removal
	this.showLoginControl = function(show)
	{
		if (!this.userNameLabel && !show)
			return;
		if (!this.userNameLabel)
		{
			this.userNameLabel = new UIComponent('p',{
				text : "User Name:",
				"class":"noMargin noPadding"
			});
			this.userInput = new UIComponent('input', {name:"username"});
			this.passwordLabel = new UIComponent('p',{
				text : "Password:",
				"class":"noMargin noPadding"
			});
			this.passwordInput = new UIComponent('input',
			{
				type : "password", name:"password"
			});
			this.rememberMeLabel = new UIComponent('p', {
				text : "Remember Me",
				"class":"noMargin noPadding"
			});
			this.rememberMeCk = new UIComponent('input',
			{
				type : "checkbox"
			});
		}
		var operation = show ? this.addChild.bind(this) : this.removeChild.bind(this);
		operation(this.userNameLabel);
		operation(this.userInput);
		operation(this.passwordLabel);
		operation(this.passwordInput);
		operation(this.rememberMeLabel);
		operation(this.rememberMeCk);

		if (show)
			this.addEventListener("keypress", this.enterKeypressHandler, false, 0, this);
		else
			this.removeEventListener("keypress", this.enterKeypressHandler, false);
	};

	this.showAccountStatus = function(show)
	{
		if (!this.welcomeMsg && !show)
			return;
		if (!this.welcomeMsg)
		{
			var sharedStyles =
			{
				"class":"fontSize10 noMargin noPadding"
			};
			this.welcomeMsg = new UIComponent('p', {"class":"noMargin noPadding"});

			this.approvedLabel = new UIComponent('p', sharedStyles);
			this.approvedLabel.set("text", "Active listings:");
			this.approvedCount = new UIComponent('p', sharedStyles);

			this.pendingLabel = new UIComponent('p', sharedStyles);
			this.pendingLabel.set("text", "Pending listings:");
			this.pendingCount = new UIComponent('p', sharedStyles);

			this.declinedLabel = new UIComponent('p', sharedStyles);
			this.declinedLabel.set("text", "Declined listings:");
			this.declinedCount = new UIComponent('p', sharedStyles);
		}

		var operation = show ? this.addChild.bind(this) : this.removeChild.bind(this);
		operation(this.welcomeMsg);
		operation(this.pendingLabel);
		operation(this.pendingCount);
		operation(this.approvedLabel);
		operation(this.approvedCount);
		operation(this.declinedLabel);
		operation(this.declinedCount);

		if (show)
		{
			this.welcomeMsg.set("text", "Welcome " + this.userInfo.user_name + "!");
			this.pendingCount.set("text", this.userInfo.pending);
			this.approvedCount.set("text", this.userInfo.approved);
			this.declinedCount.set("text", this.userInfo.declined);
		}
	};

	this.submitButton = function()
	{
		if (!this._submitButton)
		{
			this._submitButton = new UIButton('div',
			{
				styles :
				{
					'cursor' : 'pointer'
				}
			});
			this._submitButton.addEventListener("click", this.submitClickHandler, false, 0, this);
			this._submitButton.buttonSkins(
			{
				upSkin : 'url("img/button1-up.png")',
				overSkin : 'url("img/button1-over.png")',
				downSkin : 'url("img/button1-down.png")'
			});
			this.addChild(this._submitButton, 'bottom');
		}
		return this._submitButton;
	};

	this.createAcctButton = function()
	{
		if (!this._createAcctButton)
		{
			this._createAcctButton = new UIButton('div',
			{
				styles :
				{
					'cursor' : 'pointer'
				}
			});
			this._createAcctButton.addEventListener("click", this.createAcctClickHandler, false, 0, this);
			this._createAcctButton.buttonSkins(
			{
				upSkin : 'url("img/button1-up.png")',
				overSkin : 'url("img/button1-over.png")',
				downSkin : 'url("img/button1-down.png")'
			});
			this.addChild(this._createAcctButton, 'bottom');
			this._createAcctButton.labelText("Get Listed");
		}
		return this._createAcctButton;
	};

	// -------------------------------------------------------------
	// Event handlers

	this.createAcctClickHandler = function()
	{
		this.dispatchEvent(new UICEvent("createAccount"));
	};

	this.submitClickHandler = function()
	{
		var e = new UICEvent(null, false, false);
		if (this.currentState == "accountStatus")
		{
			e.type = "logout";
			this.passwordInput.set("value", null);
			this.rememberMeCk.set("checked", false);
		}
		else
		{
			e.type = "login";
			var username = this.userInput.get("value");
			var password = this.passwordInput.get("value");
			var rememberMe = this.rememberMeCk.get("checked");
			e.data =
			{
				username : username,
				password : password,
				rememberMe : rememberMe
			};
		}
		// Dispatched to the mediator.
		this.dispatchEvent(e);
	};

	this.enterKeypressHandler = function(event)
	{
		if (event.data.key == "enter")
			this.submitClickHandler();
	};

	this.setStatusMessage = function(value /* String */)
	{
		if (this.statusText != value)
		{
			this.statusText = value;
			this.statusTextChanged = true;

			this.invalidateProperties();
			this.invalidateDisplayList();
		}
	};

	this.statusMessageControl = function()
	{
		if (!this.statusMessage)
		{
			this.statusMessage = new UIComponent('p', {"class":"noMargin noPadding", styles :{"font-size" : 10}});
			this.addChild(this.statusMessage);
		}
		return this.statusMessage;
	};
};
TopRightColumn = new Class(new TopRightColumn());