/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    Ext.QuickTips.init();

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

    var fs = new Ext.FormPanel({
        frame: true,
        title:'Contact Us',
	  url:'contact-form.php',
        labelAlign: 'right',
        labelWidth: 115,
        width:420,
        waitMsgTarget: true,

        // configure how to read the XML Data
        reader : new Ext.data.XmlReader({
            record : 'contact',
            success: '@success'
        }, [
            {name: 'first', mapping:'name/first'}, // custom mapping
            {name: 'last', mapping:'name/last'},
            'company', 'email', 'state',
            {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
        ]),

        // reusable error reader class defined at the end of this file
        errorReader: new Ext.form.XmlErrorReader(),

        items: [

            new Ext.form.FieldSet({
                title: 'Contact Information',
                autoHeight: true,
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'Name',
                        name: 'name',
				allowBlank:false,
                        width:220
                    }, {
                        fieldLabel: 'Company',
                        name: 'company',
                        width:220
                    },  {
                        fieldLabel: 'Phone',
                        name: 'phone',
                        vtype:'usphone',
				allowBlank:false,
                        width:220
                    },  {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
				required:true,
				allowBlank:false,
                        width:220
                    },

    new Ext.form.TextArea({
        fieldLabel : 'Comments',
        name : 'commentz',
        height : 80,
	  width: 220,
	  allowBlank:false
    })
                ]
            })
        ]
    });

    // simple button add
    fs.addButton({
	text: 'Reset',
	type: 'reset',
	handler: function(){
            fs.getForm().reset();
        }
    });

    // explicit add
    var submit = fs.addButton({
        text: 'Submit',
	  type: 'submit',
	  action: 'submit',
        disabled:false,
        handler: function(){
		if (fs.getForm().isValid()) {
            fs.getForm().submit({url:'contact-form.php', waitMsg:'Sending Data...', wait:true, waitConfig: {interval:200}});
		} else {
		Ext.MessageBox.show({
		title: 'Error!',
		msg: 'Please fill in all required fields.',
		width:300,
		buttons: Ext.MessageBox.OK
		});
		}
        }
    });

    fs.render('form-ct');

var usphonereg = /^([0-9]{3}[-]?){1,2}([0-9]{4})$/;

	Ext.apply(Ext.form.VTypes, {
	    'usphone' : function(v){
			return usphonereg.test(v);
	    },
	    'usphoneText' : 'Invalid Phone Number.  Example: 555-555-2069.'
	});

fs.on({
	actioncomplete: function(form, action){
		if(action.type='submit') {
		fs.getForm().reset();
		}
	}
});

});

// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){
    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    );
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);