Application.login.LoginPanel = Ext.extend(Ext.Panel, {
	
	 email:											''
	,password:										''
	
	,cn: null
	
	,getData: function () {
		return {
			email: this.getEmail()
			,password: this.getPassword()
		}
	}
	
	,getEmail: function () {
		return this.getEmailCmp().getData();
	}
	
	,getPassword: function () {
		return this.getPasswordCmp().getData();
	}
	
	,getEmailCmp: function () {
		return this.findByType('ux.form.emailaddress')[0];
	}
	
	,getPasswordCmp: function () {
		return this.findByType('ux.form.password')[0];
	}
	
	,getFormPanel: function () {
		return this.findByType('form')[0];
	}
	
	,mask: function (doMask) {
		if (doMask)
			this.getEl().mask('Authenticating...','x-mask-loading');
		else 
			this.getEl().unmask();
	}
	
	,isValid: function () {
		var fp = this.getFormPanel();
		return fp.getForm().isValid();	
	}
	
	,busy: function (isBusy) {
		this.mask(isBusy);
	}
	
	,onLogin: function (target, event){
		if (this.isValid()) {
			if (this.cn) {
				this.busy(true);
				this.cn.request({
					params: {
						method: 'login'
						,data: Ext.encode(this.getData())
					}
					,success: this.onSuccess
					,failure: this.onFailure
					,scope: this
				});
			}
		} else {
			Ext.Msg.showAppError('Application.Validation');
		}
	}
	
	,onSuccess: function (response, options) {
		var r = Ext.decode(response.responseText);
		if (!r.isAuthenticated){
			this.busy(false);
			if (r.errors.length)
				Ext.Msg.showAppError(r.errors[0].type)
		} else 
			window.location = '/index.cfm';		
	}
	
	,onFailure: function (response, options) {
		this.busy(false);
		//Ext.Msg.showResponseError(response.status);
		Ext.Msg.showResponseError(['Sorry, the email and password you entered were not valid. Please try again.']);
	}
	
	,onForgotPassword: function () {
		this.fireEvent('forgotPassword', this);
	}
	
	,onForgotPasswordRender: function (cmp) {
		cmp.el.on({
			'click': this.onForgotPassword
			,scope: this
		});
	}
	
	,onRender: function () {
		Application.login.LoginPanel.superclass.onRender.apply(this, arguments);
		this.el.addKeyListener(
			Ext.EventObject.ENTER, this.onKeyPress, this 
		);
	}
	
	,onKeyPress: function (keyCode, e) {
		if (keyCode == Ext.EventObject.ENTER)
			this.onLogin();
	}
	
	,initComponent:function() {
		
		Ext.apply(this, {
			border: false
			,items: [
				{
					title: 'Login'
					,border: true
					,bodyBorder: true
					,cls: 'panel-bg'
					,items:  [
						{
							xtype: 'form'
							//,frame: true
							,monitorValid: false //true
							,labelAlign: 'right'
							,autoHeight: true
							,border: false
							,bodyStyle: 'padding: 5px;'
							,items: [
								{
									xtype: 'ux.textpanel'
									,hidden: true
								},{
									xtype: 'ux.form.emailaddress'
									,fieldCfg: {
										anchor: '0'
										,allowBlank: true //false
										,tabIndex: 1
										,value: this.email
									}	
								},{
									xtype: 'ux.form.password'
									,fieldCfg: {
										anchor: '0'
										,allowBlank: true //false
										,tabIndex: 2
										,value: this.password
									}
								}
							]
							,buttons: [{
						         text: 'Login'
								,id: 'btnLogin'
								,handler: this.onLogin
								,scope: this
								,tabIndex: 3
							}]
						}
					]
				},{
					xtype: 'ux.linktextpanel'
					,cfg: {
						 txt: 'Forgot password?'
						,style:	'width:100px; padding:5px;'
					}
					,listeners: {
						'render': this.onForgotPasswordRender	
						,scope: this
					}
				}
			]
		});
		
		this.addEvents({
			forgotPassword : true
		});
				
		Application.login.LoginPanel.superclass.initComponent.apply(this, arguments);
	}	
});	

Ext.reg('login.loginpanel', Application.login.LoginPanel);