var reloadCaptcha = function(){
    var captchaImg = Ext.get('captcha');
    
    captchaImg.dom.src = '/user/captcha';
}

var charityAdd = function(){
    var forms = {
        add: new Ext.form.FormPanel({
            id: 'charityForm',
            url: '/charity/save',
            method: 'POST',
            layout: 'column',
            renderTo: 'formContainer',
            frame: true,
            bodyStyle: 'padding-top:25px',
            width: 930,
            fileUpload: true,
            defaults: {
                columnWidth: '.5',
                layout: 'form',
                labelAlign: 'top',
            },
            items: [{
                defaults: {
                    msgTarget: 'side',
                    validationEvent: 'blur'
                },
                items: [{
                    xtype: 'hidden',
                    name: 'charityid'
                }, {
                    xtype: 'hidden',
                    name: 'country',
                    value: 'US'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Nonprofit Organization Name',
                    allowBlank: false,
                    emptyText: 'Required',
                    name: 'name'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Contact Person',
                    allowBlank: false,
                    emptyText: 'The main contact at the Nonprofit organization',
                    name: 'contactperson'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Contact Email Address',
                    emptyText: 'Will also be used for Log In purposes',
                    allowBlank: false,
                    vtype: Ext.isSafari ? '' : 'email',
                    name: 'contactemail'
                }, {
                    xtype: 'textfield',
                    inputType: 'password',
                    fieldLabel: 'Password',
                    allowBlank: false,
                    width: 300,
                    name: 'password'
                }, {
                    xtype: 'textfield',
                    inputType: 'password',
                    fieldLabel: 'Verify Password',
                    allowBlank: false,
                    width: 300,
                    name: 'verifypassword'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Contact Phone Number',
                    emptyText: 'e.g. 312-555-1212',
                    allowBlank: false,
                    name: 'contactphone'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Street Address Line One',
                    emptyText: 'e.g. 600 N Michigan Ave',
                    allowBlank: false,
                    name: 'addressone'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Street Address Line Two',
                    name: 'addresstwo',
                    emptyText: 'e.g. Suite 100'
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'City',
                    emptyText: 'e.g. Chicago',
                    allowBlank: false,
                    name: 'city'
                }, {
                    xtype: 'combo',
                    width: 300,
                    fieldLabel: 'State',
                    emptyText: 'Select One',
                    allowBlank: false,
                    triggerAction: 'all',
                    mode: 'local',
                    hiddenName: 'state',
                    displayField: 'description',
                    valueField: 'abbreviation',
                    store: new Ext.data.SimpleStore({
                        fields: ['abbreviation', 'description'],
                        data: StateList
                    })
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Zip Code',
                    emptyText: 'e.g. 60614',
                    allowBlank: false,
                    name: 'postalcode'
                }]
            }, {
                defaults: {
                    validationEvent: 'blur'
                },
                items: [{
                    xtype: 'combo',
                    width: 300,
                    fieldLabel: 'Category #1',
                    emptyText: 'Nonprofit category. Select up to three.',
                    allowBlank: false,
                    name: 'categoryid',
                    hiddenName: 'categoryid',
                    valueField: 'categoryid',
                    displayField: 'description',
                    triggerAction: 'all',
                    mode: 'local',
                    store: new Ext.data.JsonStore({
                        data: charityCategory,
                        fields: ['categoryid', 'description']
                    }),
                    selectOnFocus: true
                }, {
                    xtype: 'combo',
                    width: 300,
                    fieldLabel: 'Category #2',
                    emptyText: 'Optional',
                    allowBlank: true,
                    name: 'categoryid',
                    hiddenName: 'categoryid2',
                    valueField: 'categoryid',
                    displayField: 'description',
                    triggerAction: 'all',
                    mode: 'local',
                    store: new Ext.data.JsonStore({
                        data: charityCategory,
                        fields: ['categoryid', 'description']
                    }),
                    selectOnFocus: true
                }, {
                    xtype: 'combo',
                    width: 300,
                    fieldLabel: 'Category #3',
                    emptyText: 'Optional',
                    allowBlank: true,
                    name: 'categoryid',
                    hiddenName: 'categoryid3',
                    valueField: 'categoryid',
                    displayField: 'description',
                    triggerAction: 'all',
                    mode: 'local',
                    store: new Ext.data.JsonStore({
                        data: charityCategory,
                        fields: ['categoryid', 'description']
                    })
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Federal Taxpayer ID #',
                    emptyText: 'Must be valid',
                    allowBlank: false,
                    name: 'taxpayerid',
                    maxLength: 11,
                    minLength: 9
                }, {
                    xtype: 'textfield',
                    width: 300,
                    fieldLabel: 'Website URL',
                    name: 'href',
                    emptyText: 'http://www.website.org',
                    allowBlank: false,
                    vtype: 'url'
                }, {
                    xtype: 'textarea',
                    width: 300,
                    height: 75,
                    fieldLabel: 'Description or Mission Statement',
                    name: 'description',
                    allowBlank: false
                }, {
                    xtype: 'textfield',
                    inputType: 'file',
                    fieldLabel: 'Upload Logo ( JPG, GIF or PNG )',
                    width: 300,
                    name: 'logoupload'
                }, {
                    name: 'captcha_string',
                    xtype: 'textfield',
                    minLength: 6,
                    maxLength: 6,
                    allowBlank: false,
                    fieldLabel: 'Enter the numbers from the image below'
                }, {
                    xtype: '',
                    //html: '<div><img id="captcha" src="/user/captcha"><div class="clear" style="margin-bottom:5px;"></div><a style="cursor:pointer" onClick="reloadCaptcha()">Get a new image</a></div>'
                    html: '<img src="/user/captcha"/>'
                }, {
                    xtype: 'checkbox',
                    hideLabel: true,
                    inputValue: 1,
                    name: 'agree',
                    id: 'agreement_checkbox',
                    boxLabel: ' I have read and agree to the <a href="/terms">Terms of Use</a>, <a href="/privacy">Privacy Policy</a>, and <a href="/nonprofituser">Nonprofit User Agreement</a>.<div class="clear"></div>'
                }]
            }],
            buttons: [{
                iconCls: 'btn-apply',
                text: 'Add Nonprofit',
                handler: function(){
                    var rObj = [];
                    var values = this.ownerCt.form.getValues();
                    var form = this.ownerCt.form;
                    
                    if (values.password != values.verifypassword) {
                        form.findField('password').markInvalid('Passwords must match');
                        form.findField('verifypassword').markInvalid('Passwords must match');
                        return false;
                    }
                    
                    if (!form.findField('agree').checked) {
                        alert('You must agree to our Terms of Use, Privacy Policy, and Nonprofit User Agreement.');
                        return false;
                    }
                    
                    this.ownerCt.form.submit({
                        waitMsg: 'Saving Nonprofit Information',
                        success: function(a, b){
                            window.location = '/charity/confirm';
                        },
                        failure: function(a, b){
                        }
                    })
                }
            }]
        })
    }
};

Ext.onReady(function(){
    Ext.QuickTips.init();
    var ca = charityAdd();
});