Ext.onReady(function(){
	Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var signupForm = new Ext.FormPanel({
    	//standardSubmit: true,
		frame: true,
		title:'Sign Up Form (Silver Membership - FREE!)',    	
    	url:'./?event=signup',
		renderTo: 'signup-form',
    	width: 425,
    	bodyStyle:'padding:15px 20px 20px 20px',
    	mask:true,
        items: [
        {
        	xtype:'fieldset',
        	title: 'Profile Information',
        	layout: 'form',
        	width: 380,
        	defaults: {width: 220},
        	labelWidth: 90,
        	items: [
        {
        		name: 'userName',
        		xtype:'textfield',
                fieldLabel: '<span style="color:red;font-weight:bold">* </span>User Name',
                allowBlank:false,
                blankText:'User name is required'
            },{
        		name: 'password',
        		xtype:'textfield',
        		inputType: 'password',
        		minLength: 8,
        		maxLength: 12,
        		minLengthText: 'Password must be at least 8 characters',
        		maxLengthText: 'Password can only contain 12 characters',
                fieldLabel: '<span style="color:red;font-weight:bold">* </span>Password',
                allowBlank:false,
                blankText:'Password is required'
            },{
        		name: 'fname',
        		xtype:'textfield',
                fieldLabel: '<span style="color:red;font-weight:bold">* </span>First Name',
                allowBlank:false,
                blankText:'First name is required'
            },{
        		name: 'lname',
        		xtype:'textfield',
                fieldLabel: '<span style="color:red;font-weight:bold">* </span>Last Name',
                allowBlank:false,
                blankText:'Last name is required'
            },{
        		name: 'email',
        		xtype:'textfield',
                fieldLabel: '<span style="color:red;font-weight:bold">* </span>Email Address',
                allowBlank:false,
                vtype:'email',
                blankText:'Email address is required'
            },{
        		name: 'company',
        		xtype:'textfield',
                fieldLabel: 'Company'
            }]
            }],
       buttons: [{
            text: 'Sign Up',
            handler: function() {
            	signupForm.getForm().submit({
			    	//params: {
			    	//    userName: 'test'
				    //},
				    method:'POST',
				    success: function(form, action) {
				    	var result = Ext.decode(action.response.responseText);
				        Ext.MessageBox.alert('Status', result.msg);			        	
				    	signupForm.getForm().reset();
				    },
				    failure: function(form, action) {
				    	//Ext.MessageBox.alert ('Error', Ext.decode(action.response.responseText).success);
				    	var result = Ext.decode(action.response.responseText);
				        Ext.MessageBox.alert('Status', result.msg);			        	
			    	}            	
            	});
            	//win.hide();
				//signupForm.getForm().reset();
            }
        },{
            text: 'Cancel',
            handler: function() {
            	signupForm.getForm().reset();
            	win.hide();
            }
        }],
       buttonAlign: 'center'
    });

});