Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
function openSignInForm() {
	//config***********************************************************************************
	var validationDelayInMillis = 2000;
		
	//Create error window*****************************************************************************
    var errWindow = new Ext.Window({
        title: '<span style="font-size:12px;">Invalid input!</span>',
        width: 350,
        height:'auto',
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        closeAction: 'hide',
        html: '',

        buttons: [{
            text: 'Close',
            handler: function(){errWindow.hide()},
            scope: this
        }]
    });
	var errMsg = '';
	errWindow.on('show', function(){
		this.body.dom.innerHTML = "<div style='padding:10px;color:red;font-size:12px;'>" + errMsg + "</div>";
	});
	
	//Create store to check user login*********************************************************
    var loginStore = new Ext.data.JsonStore({
    	url: '/CommonServlet?action=doUserLogin'
       ,root: 'results'
       ,fields: ['success', 'msg']
    });

    var doLoginSubmit = function() {
    	var isUsernameValid = Ext.getCmp('header-login-form-username').isValid();
    	var isPasswordValid = Ext.getCmp('header-login-form-password').isValid();
    	var errMsg = '';

		errWindow.on('show', function(){
			this.body.dom.innerHTML = "<div style='padding:10px;color:red;font-size:12px;'>" + errMsg + "</div>";
		});
		
    	var username = Ext.getCmp('header-login-form-username').getValue();
    	var password = Ext.getCmp('header-login-form-password').getValue();
    	if (username.length == 0) {
    		Ext.getCmp('header-login-form-username').markInvalid("Username cannot be empty.");
    		isUsernameValid = false;
    	}
    	
    	if (password.length == 0) {
    		Ext.getCmp('header-login-form-password').markInvalid("Password cannot be empty.");
    		isPasswordValid = false;
    	}
    	
    	if (err_username || !isUsernameValid || !isPasswordValid) {
    		errMsg = 'Some fields contain errors. Please correct them first.';
    		errWindow.show();
    		return;
    	}
		
		Ext.getCmp('signin-btn').disable();
		//backend check user credentials
		loginStore.load({
			params: {
		        id: username,
		        pwd: password
		    },
		    
		    callback: function(records){
		    	for (var x = 0; x < records.length; x++){
		            var status = records[x].get('success');
		            if (status == 'false') {
		            	errMsg = records[x].get('msg');
						errWindow.show();
				    	Ext.getCmp('signin-btn').enable();
						return;
		            }
		        }  
		                  
				//if no error
		    	window.location = '/member/MemberHome.jsp';
		    }
		});

    }

	var signinForm = new Ext.FormPanel({
		//url: '/CommonServlet?action=doUserLogin',
        labelWidth: 70, // label settings here cascade unless overridden
        labelAlign:'left',
		layout:'form',
		bodyStyle:'padding-left:15px;',
		items:[
            {//******************************username********************************************
            	xtype:'textfield',
		        id: 'header-login-form-username',
		        width:120,
		        fieldLabel:'Username',
		        enableKeyEvents:true,
		        maxLength: 128,
				validationDelay: validationDelayInMillis,
				validator: function(value){
					return validateUsername(value);
				},
				border:false
            }
            ,{//******************************password********************************************
            	xtype:'textfield',
		        id: 'header-login-form-password',
		        fieldLabel: 'Password',
		        inputType: 'password',
				width:120,
				style:'',
		        enableKeyEvents:true,
		        maxLength: 20,
				validationDelay: validationDelayInMillis,
				validator: function(value){
					return validatePassword(value);
				},
				border:false
            }
		]
        ,keys: [{
            key: Ext.EventObject.ENTER,
            fn: doLoginSubmit
        }]
        ,buttonAlign:'center'
		,buttons: [
			{
				id:'signin-btn',
				text:'<b>Sign In</b>',
				handler:doLoginSubmit
			}
		]
	});
	
	if (!Ext.getCmp('content-anchor-tip-signin')) {
	    var toolTip = new Ext.ToolTip({        
	        id: 'content-anchor-tip-signin',
	        target: 'sign-in',
	        anchor: 'top',
	        width: 240,
	        autoHide: false,
	        closable: true,
	        html:null,
	        items:[
	        	signinForm
	        ]
	    });
	    toolTip.on('hide', function(){
			if (Ext.getCmp('content-anchor-tip-signin')) {
				Ext.getCmp('content-anchor-tip-signin').destroy();
			}
	    });
	    toolTip.on('show', function(){
	    	Ext.getCmp('header-login-form-username').focus();
	    });
	    toolTip.show();
	}
	
	//****************************start validation**********************************************
	//validate username***************************************************
	function validateUsername(username) {
		if (username=="") {
			return "This field is required";
		}
		var msg = checkUsername2(username);
		if (msg.length != 0) {
			return msg;
		}
		
		//Create store to check user login*********************************************************
	    var store = new Ext.data.JsonStore({
	    	url: '/CommonServlet?action=checkUsernameAvailability'
	       ,root: 'results'
	       ,fields: ['success', 'exist', 'msg']
	    });

		//backend check user availability
		store.load({
			params: {
		        username: username
		    },
		    
		    callback: function(records){
		    	for (var x = 0; x < records.length; x++){
		            var status = records[x].get('success');
		            var exist = records[x].get('exist');
		            if (status == 'true' && exist == 'no') {
		            	Ext.getCmp('header-login-form-username').markInvalid("This username doesn't exist.");
						err_username = true;
						return;
		            }
		            if (status == 'true' && exist == 'yes') {
						err_username = false;
						return;
		            }
		        }  
		    }
		});
		return true;
	}
	
	//validate password***************************************************
	function validatePassword() {
		var cmp = Ext.getCmp('header-login-form-password');
		var password = cmp.getValue();
		var msg = checkPassword2(password);
		if (msg.length != 0) {
			return msg;
		}
		return true;
	}
}