/*
 * 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';

Ext.namespace('Ext.exampledata');



Ext.exampledata.job = [
        ['New Construction', 'New Construction'],
        ['Exsisting Home', 'Exsisting Home'],
        ['Exsisting Attic', 'Exsisting Attic']
    ];

Ext.exampledata.subject = [
        ['Insulation', 'Insulation'],
        ['Gutters', 'Seamless Gutters'],
        ['Storage', 'Storage'],
        ['Shower Enclosures', 'Shower Enclosures'],
        ['Bathroom', 'Bathroom'],
        ['Fireplaces', 'Fireplaces'],
        ['Mirrors', 'Mirrors']
    ];   

  

    var storeJOB = new Ext.data.SimpleStore({
        fields: ['id', 'name'],
        data : Ext.exampledata.job
    });

    var storeSUB = new Ext.data.SimpleStore({
        fields: ['id', 'name'],
        data : Ext.exampledata.subject
    });
    
   

    var comboJOB = new Ext.form.ComboBox({
        store: storeJOB,
        displayField:'name',
        name:'job',
   			fieldLabel: 'Job Type',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select an option...',
        selectOnFocus:true,
        allowBlank:false
    }); 

    var comboSUB = new Ext.form.ComboBox({
        store: storeSUB,
        displayField:'name',
        name: 'product',
   			fieldLabel: 'Product',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select an option...',
        selectOnFocus:true,
        allowBlank:false
    });
  
    var simple = new Ext.FormPanel({
        labelWidth: 175, // label settings here cascade unless overridden
        url:'aj-appointment.php',
        frame:true,
        title: ' ',
        bodyStyle:'padding:5px 5px 0',
        width: '100%',
        defaults: {width: 300},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank:false
            },{
                fieldLabel: 'Phone Number',
                name: 'phone',
                emptyText: '(888) 555-1212',
                allowBlank:false
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, comboJOB,comboSUB,{
            xtype:'textarea',
            id:'message',
            fieldLabel:'Job Description',
            height:200
        		}
        ],
        buttons: [{
					text: 'Request Appointment',
					handler: function(){
						if(simple.getForm().isValid()){
							simple.getForm().submit({
								waitMsg: 'Sending Request...',
								success: function(form, action){
									Ext.MessageBox.alert('Successful', action.result.msg);
									simple.getForm().reset();
								},
								failure: function(form, action){	
									Ext.MessageBox.alert('Error Message', action.result.msg); 
								}
							});
						}else{
							Ext.MessageBox.alert('Errors', 'Please fill in the required fields');
						}
					}			
				}]
    });

    simple.render('Appt-Form');

});