Ext.onReady(function(){
	
	Ext.BLANK_IMAGE_URL = "/extjs/resources/images/default/s.gif";
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
	var domNode = Ext.get('header-signin');
	if (domNode) {
		//config***********************************************************************************
		var validationDelayInMillis = 2000;
	
		//Create store to check user login*********************************************************
	    var loginStore = new Ext.data.JsonStore({
	    	url: '/RestaurantBookingServlet?action=doUserLogin'
	       ,root: 'results'
	       ,fields: ['status', 'msg']
	    });
	
		//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 err_username = false;
		//handle submit*****************************************************************************
	    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;
	    	}
			
			//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('status');
			            if (status == 'failed') {
			            	errMsg = records[x].get('msg');
							errMsg = errMsg;
							errWindow.show();
							return;
			            }
			        }  
			                  
					//if no error
			    	window.location = '/MemberHome.jsp';
			    }
			});
	
	    }
		
	  	var usernameTF = new Ext.form.TextField({
	        renderTo: 'signin-username',
	        id: 'header-login-form-username',
	        width:100,
	        style:'',
	        fieldLabel:'UN',
			emptyText: 'Username',
	        enableKeyEvents:true,
	        maxLength: 16,
			validationDelay: validationDelayInMillis,
			validator: function(value){
				return validateUsername(value);
			},
			border:false,
		    listeners: {
	    		'keypress': function(tf, e) {
	    			if (e.getKey()==Ext.EventObject.ENTER) {
	    				doLoginSubmit();
	    			}
	    		}
	    	}
	  	});
	  	
	  	var passwordTF = new Ext.form.TextField({
	        renderTo: 'signin-password',
	        id: 'header-login-form-password',
	        inputType: 'password',
			width:100,
			style:'',
			emptyText: 'Password',
	        enableKeyEvents:true,
	        maxLength: 20,
			validationDelay: validationDelayInMillis,
			validator: function(value){
				return validatePassword(value);
			},
			border:false,
		    listeners: {
	    		'keypress': function(tf, e) {
	    			if (e.getKey()==Ext.EventObject.ENTER) {
	    				doLoginSubmit();
	    			}
	    		}
	    	}
	  	});
	
	  	var signinBtn = new Ext.Button({
	        renderTo: 'signin-button',
			id: 'signin-button',
			text:'<b>Sign In</b>',
			style:'display:inline;margin:0 10px 0 5px',
			bodyStyle:'',
			border:false,
			handler: doLoginSubmit
	  	});
	  	
	
	
		//****************************start validation**********************************************
		//validate username***************************************************
		function validateUsername(username) {
			if (username=="") {
				return "";
			}
			var msg = checkUsername2(username);
			if (msg.length != 0) {
				return msg;
			}
			
			//Create store to check user login*********************************************************
		    var store = new Ext.data.JsonStore({
		    	url: '/RestaurantBookingServlet?action=checkUsernameAvailability'
		       ,root: 'results'
		       ,fields: ['status', '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('status');
			            var exist = records[x].get('exist');
			            if (status == 'success' && exist == 'no') {
			            	Ext.getCmp('header-login-form-username').markInvalid("This username doesn't exist.");
							err_username = true;
							return;
			            }
			            if (status == 'success' && 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;
		}
	}
});