/*action_type:
 * 1: redirect to a url after sign in, param will be the url to redirect
 * 2: open new window to send restaurant phone to user, param will be the restaurant ID
*/
function showMemberLoginForm(action_type, param, from_module) {
	//config***********************************************************************************
	var validationDelayInMillis = 2000;
	
	if (!from_module) {
		from_module = "";
	}
	
	//Create store to check user login*********************************************************
    var loginStore = new Ext.data.JsonStore({
    	url: '/CommonServlet?action=doUserLogin'
       ,root: 'results'
       ,fields: ['success', '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*****************************************************************************
	function doLast() {
		if (action_type == 1) {
			window.location = param;
		} else if (action_type == 2) {
			Ext.getCmp('restaurant-sign-in-form').destroy();
			openSendRestaurantPhone(param);
			return;
		}
	}
	
	function changeHeaderSignIn(username) {
        //dynamically change header sign in part
        var el_header_sign_in = Ext.get('header-signin');
        if (el_header_sign_in) {
        	var signin_win = Ext.getCmp('content-anchor-tip-signin');
        	if (signin_win) {
            	Ext.getCmp('content-anchor-tip-signin').destroy();
        	}
        	var current_url = top.location.href;
        	var dom = el_header_sign_in.dom;
        	dom.width='320';
        	el_header_sign_in.dom.innerHTML = '<b>'+username+'</b> | <a href="/member/MemberHome.jsp">My Account</a> | <a href="/MemberSignOut.jsp?url='+current_url+'">Sign Out</a>';
        }
	}
	
    var doLoginSubmit = function(){
    	var isUsernameValid = Ext.getCmp('login-form-username').isValid();
    	var isPasswordValid = Ext.getCmp('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('login-form-username').getValue();
    	var password = Ext.getCmp('login-form-password').getValue();
    	if (username.length == 0) {
    		Ext.getCmp('login-form-username').markInvalid("Username cannot be empty.");
    		isUsernameValid = false;
    	}
    	
    	if (password.length == 0) {
    		Ext.getCmp('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('success');
		            if (status == 'false') {
		            	errMsg = records[x].get('msg');
						errWindow.show();
						return;
		            }
		        }  
				changeHeaderSignIn(username);
				doLast();
		    }
		});

    }
	
	var signInForm = new Ext.FormPanel({
				id:'sign-in-form',
		        labelWidth: 80, // label settings here cascade unless overridden
		        labelAlign:'left',
        		layout:'column',
        		items:[
		            {
		            	columnWidth:1,
		            	border:false,
		            	style:"height:20px;font-size:12px;color:red;padding-bottom:5px;",
		            	html:'<span style="color:#385F95;font-size:14px;"><b>Existing user</b></span>'
		            }
		        	,{
				        columnWidth:1,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'Username',
		        				width: 160,
			                    maxLength: 128,
		        				validationDelay: validationDelayInMillis,
								validator: function(value){
									return validateUsername(value);
								},
				                id: 'login-form-username',
				                listeners: {'render': function(cmp){
				                	cmp.focus();
				                }}
		        			}
		        		]
		            }
		            ,{//**************************empty line********************************************
		            	columnWidth:1,
		            	border:false,
		            	style:"height:5px"
		            }
		            ,{
		        		columnWidth:1,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'Password',
				                inputType: 'password',
		        				width: 160,
			                    maxLength: 20,
		        				validationDelay: validationDelayInMillis,
		        				validator: function(value){
									return validatePassword(value);
								},
				                id: 'login-form-password'
		        			}
		        		]
		            }
		            ,{
		            	columnWidth:1,
		                items: [{
		                	xtype:'button',
		                	id:'sign-in-btn',
		                	style:"margin:15px 0px 10px 100px",
		                    text: '<b>Sign In</b>',
		                    minWidth: 90,
		                    handler: doLoginSubmit
		                }]
		            }
		            ,{
		            	columnWidth:1,
		                items: [{
		                	xtype:'panel',
		                	style:'margin:5px;text-align:center;font-size:12px;',
		                    html: '<a href="/member/RetrieveUsernamePwd.jsp" target="_blank">Forgot username/password?</a>'
		                }]
		            }
        		]
		        ,keys: [{
		            key: Ext.EventObject.ENTER,
		            fn: doLoginSubmit
		        }]
        	});
	
	//Create a title store******************************************************************
	var titleStore = new Ext.data.SimpleStore({
	    fields: ['title', 'id'],
	    data: [['Mr.', 'title-0'], ['Ms.', 'title-1']]
	});
	
	//field error flag***************************************************************************
	var err_username_for_sign_up = false;
	
	//validate username***************************************************
	function validateUsernameForSignUp(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 usernameAvailabilityStore = new Ext.data.JsonStore({
	    	url: '/CommonServlet?action=checkUsernameAvailability'
	       ,root: 'results'
	       ,fields: ['success', 'exist', 'msg']
	    });

		//backend check user availability
		usernameAvailabilityStore.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') {
						err_username_for_sign_up = false;
						return;
		            }
		            if (status == 'true' && exist == 'yes') {
						Ext.getCmp('signup-form-username').markInvalid('This username is not availabe.');
						err_username_for_sign_up = true;
						return;
		            }
		        }  
		    }
		});
		return true;
	}
	
	//validate confirm password***************************************************
	function validateConfirmPassword() {
		var cmp = Ext.getCmp('signup-form-confirmpassword');
		var comfirmpassword = cmp.getValue();
		var msg = checkPassword2(comfirmpassword);
		if (msg.length != 0) {
			return msg;
		}
		var password = Ext.getCmp('signup-form-password').getValue();
		if (password != comfirmpassword) {
			return "The two passwords you entered are different.";
		}
		return true;
	}
	
	//validate email*******************************************************
	function validateEmail() {
		var cmp = Ext.getCmp('signup-form-email');
		var email = cmp.getValue();
		if (email.length == 0) {
			return true;
		}
		var msg = checkEmail(email);
		if (msg.length != 0) {
			return msg;
		}
		return true;
	}
	
	//validate mobile number***************************************************
	function validateMobileNumber() {
		var cmp = Ext.getCmp('signup-form-mobile');
		var mobile = cmp.getValue();
		if (mobile.length == 0) {
			return true;
		}
		var msg = checkMobileNumber(mobile);
		if (msg.length != 0) {
			return msg;
		}
		return true;
	}

    var doSignUpSubmit = function(){
	    	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('signup-form-username').getValue();
	    	var isUsernameValid = Ext.getCmp('signup-form-username').isValid();
	    	var isPasswordValid = Ext.getCmp('signup-form-password').isValid();
	    	var isConfirmPasswordValid = Ext.getCmp('signup-form-confirmpassword').isValid();
	    	var isVCodeValid = Ext.getCmp('signup-form-vcode').isValid();
	    	var isMobileValid = Ext.getCmp('signup-form-mobile').isValid();
	    	var isEmailValid = Ext.getCmp('signup-form-email').isValid();
	    	if (err_username_for_sign_up || !isUsernameValid || !isPasswordValid || !isConfirmPasswordValid || !isVCodeValid || !isMobileValid || !isEmailValid) {
	    		errMsg = 'Some fields contain errors. Please correct them first.';
	    		errWindow.show();
	    		return;
	    	}

			Ext.getCmp('sign-in-btn').disable();
			Ext.getCmp('sign-up-btn').disable();
			signUpForm.getForm().submit({
				waitMsg:'Saving...', 
				reset: false, 
				failure: function(form, action) { 
					Ext.getCmp('sign-in-btn').enable();
					Ext.getCmp('sign-up-btn').enable();
					var msg = action.result.msg;
					Ext.Msg.show({
						title: 'Failure', 
						msg: '<span style="color:red">'+msg+'</span>',
						buttons: Ext.Msg.OK,
						minWidth: 400
					});
				}, 
				success: function(form, action) {
					changeHeaderSignIn(username);
					doLast();
				} 
			});

    }
	
	var signUpForm = new Ext.FormPanel({
				id:'sign-up-form',
				url: '/CommonServlet?action=doUserSingUp',
		        labelWidth: 110, // label settings here cascade unless overridden
		        labelAlign:'left',
        		layout:'column',
        		items:[
		            {
		            	columnWidth:1,
		            	border:false,
		            	style:"height:20px;font-size:12px;color:red;padding-bottom:5px;",
		            	html:'<span style="color:#385F95;font-size:14px;"><b>New user</b></span>'
		            }
		        	,{
				        columnWidth:1,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'Username<span style="color:red">*</span>',
		        				width: 160,
			                    maxLength: 128,
			                    allowBlank:false,
		        				validationDelay: validationDelayInMillis,
								validator: function(value){
									return validateUsernameForSignUp(value);
								},
				                id: 'signup-form-username'
		        			}
		        		]
		            }
		            ,{//**************************empty line********************************************
		            	columnWidth:1,
		            	border:false,
		            	style:"height:5px"
		            }
		            ,{//******************************password********************************************
		        		columnWidth:1,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'Password<span style="color:red">*</span>',
				                inputType: 'password',
		        				width: 160,
			                    maxLength: 20,
			                    allowBlank:false,
		        				validationDelay: validationDelayInMillis,
		        				validator: function(value){
									return validatePassword(value);
								},
				                id: 'signup-form-password'
		        			}
		        		]
		            }
		            ,{//**************************empty line********************************************
		            	columnWidth:1,
		            	border:false,
		            	style:"height:5px"
		            }
		            ,{//******************************re-type password********************************************
		        		columnWidth:1,
				        border: false,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'Re-enter password<span style="color:red">*</span>',
				                inputType: 'password',
			                    allowBlank: false,
			                    validationDelay: validationDelayInMillis,
								validator: function(value){
									return validateConfirmPassword(value);
								},
		        				width: 160,
		        				maxLength: 20,
		        				name: 'signup-form-confirmpassword',
				                id: 'signup-form-confirmpassword'
		        			}
		        		]
		            }
		            ,{//**************************empty line********************************************
		            	columnWidth:1,
		            	border:false,
		            	style:"height:5px"
		            }
		            ,{//******************************mobile no********************************************
		        		columnWidth:.52,
				        border: false,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'numberfield',
				                fieldLabel: 'Mobile no.<span style="color:red">*</span>',
			                    width: 40,
								maxLength: 3,
								allowBlank:false,
				                allowDecimals: false,
				                allowNegative: false,
								name: 'signup-form-mobile-ctry-code',
				                id: 'signup-form-mobile-ctry-code',
				                value:'65'
		        			}
		        		]
		            }
	                ,{
	                	columnWidth:.48,
	                	layout: 'form',
		                labelWidth: 1,
		                items: [{
		                    xtype:'numberfield',
		                    width: 113,
		                    fieldLabel: '',
		                    labelSeparator: '',
		                    maxLength: 16,
							allowBlank:false,
			                allowDecimals: false,
			                allowNegative: false,
		                    id: 'signup-form-mobile',
		                    name: 'signup-form-mobile'
		                }]
	                }
		            ,{//**************************empty line********************************************
		            	columnWidth:1,
		            	border:false,
		            	style:"height:5px"
		            }
		            ,{//******************************email********************************************
		        		columnWidth:1,
				        border: false,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'E-mail<span style="color:red">*</span>',
		        				width: 160,
		        				maxLength: 128,
								allowBlank:false,
		        				validationDelay: validationDelayInMillis,
			                    validator: function(value){
									return validateEmail(value);
								},
		        				name: 'signup-form-email',
				                id: 'signup-form-email'
		        			}
		        		]
		            }
		            ,{//**************************empty line********************************************
		            	columnWidth:1,
		            	border:false,
		            	style:"height:5px"
		            }
		            ,{//******************************verification code********************************************
		        		columnWidth:.53,
				        border: false,
		        		layout:'form',
		        		items:[
		        			{
		        				xtype:'textfield',
				                fieldLabel: 'Verification code<span style="color:red">*</span>',
				                validationDelay: validationDelayInMillis,
				                allowBlank: false,
		        				width: 40,
		        				minLength: 4,
		        				minLengthText: 'Length must be 4.',
		        				maxLength: 4,
		        				maxLengthText: 'Length must be 4.',
		        				name: 'signup-form-vcode',
				                id: 'signup-form-vcode'
		        			}
		        		]
		            }
		            ,{
		        		columnWidth:.47,
				        border: false,
		        		items:[
		        			{
			                	xtype:'panel',
						        border: false,
			                	style:'font-size:12px;',
			                    html: '<img src="/ValidationJPGServlet" width="116" height="23" align="top" border="0" />'
		        			}
		        		]
		            }
	            	,{
		            	xtype:'hidden',
		            	value: from_module,
		            	name: 'signup-form-interest'
	            	}
		            ,{
		            	columnWidth:1,
		                items: [{
		                	xtype:'button',
		                	id:'sign-up-btn',
		                	style:"margin:15px 0px 10px 100px",
		                    text: '<b>Sign In</b>',
		                    minWidth: 90,
		                    handler: doSignUpSubmit
		                }]
		            }
        		]
		        ,keys: [{
		            key: Ext.EventObject.ENTER,
		            fn: doSignUpSubmit
		        }]
        	});
	
	//Create tab panel*****************************************************************************
    var memberLoginPanel = new Ext.Panel({
        frame:true,
        bodyStyle:'padding:10px 5px 15px 12px',
        width: 650,
        layout: 'column',
		
        items: [
        	{
        		columnWidth:0.48,
        		style:'margin-right:10px;',
        		items:[
		        	signInForm
        		]
        	}
        	,{
        		columnWidth:0.52,
        		style:'border-left:1px dashed #ccc;padding-left:20px;',
        		items:[
		        	signUpForm
        		]
        	}
		]
		
    });

    var sign_in_form = new Ext.Window({
    	id: 'restaurant-sign-in-form',
        title: '<span style="font-size:12px;">User sign in is required!</span>',
        width: 665,
        height:'auto',
        draggable:true,
        autoScroll:true,
        border:false,
        buttonAlign:'center',
		items:[
			memberLoginPanel
		]

    });
    sign_in_form.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('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(password) {
		var msg = checkPassword2(password);
		if (msg.length != 0) {
			return msg;
		}
		return true;
	}

}