Ext.onReady(function(){

    Ext.QuickTips.init();

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

    var fs = new Ext.FormPanel({
        standardSubmit: true,
        frame: true,
        collapsible: true,
        title:'Search Hospitals',
        labelAlign: 'right',
        labelWidth: 160,
        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: 'Hospital Name',
                    width: 200,
                    id: 'hospitalName'
                },{
                    fieldLabel: 'County',
                    width: 200,
                    id: 'county'
                },{
                    fieldLabel: 'City',
                    width: 200,
                    id: 'city'
                },{
                    fieldLabel: 'Zip Code',
                    width: 50,
                    id: 'zipCode'
                },{
                    fieldLabel: 'State',
                    width: 50,
                    id: 'state'

                },{
 	                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:165px;"><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('hospitalName').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);