Ext.onReady(function(){

    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';

    var specialtyStore = new Ext.data.Store({
        // load using HTTP
        url: 'getProviderSpecialties.aspx',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Specialty'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               'Name'
           ])
    });

    specialtyStore.load();

    var fs = new Ext.FormPanel({
        standardSubmit: true,
        frame: true,
        collapsible: true,
        title:'Search Providers',
        labelAlign: 'right',
        labelWidth: 150,
        width:500,
        waitMsgTarget: true,

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

        items: [
            new Ext.form.FieldSet({
                title: 'Search Criteria',
                autoHeight: true,
                defaultType: 'textfield',
                bodyStyle: Ext.isIE ? 'padding-top:5px;' : '',
                width: 480,
                items: [{
                    fieldLabel: 'Last Name',
					width: 200,
                    minLength: 2,
                    id: 'lastName'
                },{
                    xtype:'label',
                    html: '<span style="padding-left:155px;"><small>Minimum of 2 characters</small></span><br><br>'
                },{
                    fieldLabel: 'First Name',
                    width: 200,
                    minLength: 2,
                    id: 'firstName'
                },{
                    xtype:'label',
                    html: '<span style="padding-left:155px;"><small>Minimum of 2 characters</small></span><br><br>'
                },{
                    fieldLabel: 'Group Practice Name',
					width: 200,
                    minLength: 2,
                    id: 'groupName'
                },{
                    xtype:'label',
                    html: '<span style="padding-left:155px;"><small>Minimum of 2 characters</small></span><br><br>'
                },
				    new Ext.form.ComboBox({
                        fieldLabel: 'Specialty',
                        id:'specialty',
                        hiddenName:'specialtyCode',
                        store: specialtyStore,
                        valueField:'Name',
                        displayField:'Name',
                        typeAhead: true,
                        editable: false,
                        resizable: true,
                        width: 250,
                        triggerAction: 'all',
                        emptyText:'Select a specialty...',
                        selectOnFocus:true,
                        forceSelection: true
                    })
				,{
                    fieldLabel: 'County',
					width: 200,
                    id: 'county'
                },{
                    fieldLabel: 'City',
                    width: 200,
                    id: 'city'
                },{
                    fieldLabel: 'Zip Code',
					width: 50,
                    id: 'zipCode'
                },{
                    xtype: 'radiogroup',
                    fieldLabel: 'Search Distance',
                    xcolumns: 2,
                    items: [
                        {boxLabel: '5 miles', name: 'rbDistance', id: 'rbDistance5', inputValue: 5},
                        {boxLabel: '10 miles', name: 'rbDistance', id: 'rbDistance10', inputValue: 10},
                        {boxLabel: '20 miles', name: 'rbDistance', id: 'rbDistance20', inputValue: 20},
                        {boxLabel: '50 miles', name: 'rbDistance', id: 'rbDistance50', inputValue: 50}
                    ]
                },{
                    xtype:'label',
                    html: '<span style="padding-left:155px;"><small>City or Zip Code + Mileage required for distance search</small></span><br><br>'
                }                    
                ]
            })
        ],

        buttons: [{
            text: 'Search',
            handler: function(){
                if (fs.getForm().isValid()) {
                    var rg5 = Ext.getCmp('rbDistance5').getValue();
                    var rg10 = Ext.getCmp('rbDistance10').getValue();
                    var rg20 = Ext.getCmp('rbDistance20').getValue();
                    var rg50 = Ext.getCmp('rbDistance50').getValue();
                    if (rg5 || rg10 || rg20 || rg50) {
                        if (Ext.getCmp('city').getValue().trim() == '' && Ext.getCmp('zipCode').getValue().trim() == '') {
                            Ext.MessageBox.show({
                               title: 'Medical Network Directory',
                               msg: 'You must specify a <b>City</b> or <b>Zip Code</b> when specifying a <b>Search Distance</b>.',
                               buttons: Ext.MessageBox.OK,
                               icon: Ext.MessageBox.WARNING
                            });
                        } else if (Ext.getCmp('zipCode').getValue().trim() != '' && Ext.getCmp('zipCode').getValue().trim().length != 5) {
                            Ext.MessageBox.show({
                               title: 'Medical Network Directory',
                               msg: 'The <b>Zip Code</b> must be 5 digits in length when specifying a <b>Search Distance</b>.',
                               buttons: Ext.MessageBox.OK,
                               icon: Ext.MessageBox.WARNING
                            });
                        } else {
                            fs.getForm().submit({ waitMsg:'Searching...' });
                        }
                    } else {
                        fs.getForm().submit({ waitMsg:'Searching...' });
                    }
                }else{
                    Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
                }
            }
        }]
    });

    fs.render('theForm');

    Ext.get('lastName').focus(false, 50); // delayed focus by 50 ms

});

// 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);