/// <reference path="ext-base.js" />
/// <reference path="ext-all.js" />

GeoLocationFieldset = function(settings) {
    return new Ext.form.FieldSet({
        title: settings && settings.title ? settings.title : 'Location',
        rowspan: 2,
        width: settings && settings.width ? settings.width : 335,
        height: settings && settings.height ? settings.height : 162,
        labelWidth: 60,
        layout: 'table',
        layoutConfig: { columns: 1 },
        defaults: {
            width: 315,
            height: settings && settings.defaultHeight ? settings.defaultHeight : 39,
            border: false,
            layout: 'form',
            bodyStyle: 'background-color: transparent;'
        },
        items: [{
            items: [{
                xtype: 'combo',
                id: (settings ? settings.window : '') + 'countryCombo',
                width: 220,
                fieldLabel: 'Country*',
                forceSelection: true,
                store: new Ext.data.SimpleStore({
                    fields: ['code', 'name', 'region'],
                    data: CountriesData
                }),
                listeners: {
                    select: function(combo, record, index) {

                        var regionCombo = Ext.getCmp((settings ? settings.window : '') + 'regionCombo');
                        var cityCombo = Ext.getCmp((settings ? settings.window : '') + 'cityCombo');

                        regionCombo.reset();
                        regionCombo.setDisabled(true);
                        cityCombo.reset();
                        cityCombo.setDisabled(true);

                        
                        regionCombo.store.removeAll();

                        if (record.data.region != '') {
                            regionCombo.emptyText = 'Loading...';
                            regionCombo.reset();
                            regionCombo.getEl().up('.x-form-item').down('label').dom.innerHTML = record.data.region + ':';
                            regionCombo.store.on('load', function() {
                                regionCombo.setDisabled(false);
                                regionCombo.emptyText = 'All regions within this country';
                                regionCombo.reset();
                                if (regionCombo.store.getCount() == 0) {
                                    regionCombo.setDisabled(true);
                                }
                            }, regionCombo, { single: true });

                            regionCombo.store.load({ params: { country: record.data.code} });
                        }
                        else {
                            regionCombo.emptyText = 'All regions within this country';
                            regionCombo.setDisabled(false);
                            if (regionCombo.store.getCount() == 0) {
                                regionCombo.setDisabled(true);
                            }
                        }
                    }
                },
                valueField: 'code',
                displayField: 'name',
                hiddenName: 'country',
                editable: false,
                mode: 'local',
                triggerAction: 'all',
                emptyText: 'Select a country...'
            }
    ]
        }, { items: [{
            xtype: 'combo',
            id: (settings ? settings.window : '') + 'regionCombo',
            width: 220,
            valueField: 'code',
            displayField: 'name',
            hiddenName: 'region',
            store: new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({ url: 'locationLoader.ashx' }),
                reader: new Ext.data.JsonReader({
                    totalProperty: 'count',
                    root: 'data'
                }, [
                                'code',
                                'name'
                            ])
            }),
            listeners: {
                select: function(combo, record, index) {

                    var cityCombo = Ext.getCmp((settings ? settings.window : '') + 'cityCombo');

                    cityCombo.store.removeAll();

                    cityCombo.store.on('load', function() {
                        cityCombo.emptyText = 'All cities within this region';
                        cityCombo.setDisabled(false);
                        cityCombo.reset();
                    }, cityCombo, { single: true });

                    cityCombo.store.load({ params: { region: record.data.code} });
                    cityCombo.setDisabled(true);
                    cityCombo.emptyText = 'Loading...';
                    cityCombo.reset();

                }
            },
            fieldLabel: 'State',
            forceSelection: true,
            editable: false,
            loadingText: 'Loading...',
            //allowBlank: false,
            mode: 'local',
            triggerAction: 'all',
            emptyText: 'All regions within this country'
        }
]
        }, { items: [{
            xtype: 'combo',
            id: (settings ? settings.window : '') + 'cityCombo',
            width: 220,
            valueField: 'code',
            displayField: 'name',
            hiddenName: 'city',
            store: new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({ url: 'locationLoader.ashx' }),
                reader: new Ext.data.JsonReader({
                    totalProperty: 'count',
                    root: 'data'
                }, [
                                'code',
                                'name'
                            ]),
                listeners: {
                    load: function(store, records, options) {
                        if (store.getTotalCount() > 0) {
                            var cityCombo = Ext.getCmp((settings ? settings.window : '') + 'cityCombo');
                            cityCombo.setDisabled(false);
                        }
                    }
            }
            }),
            fieldLabel: 'City',
            forceSelection: true,
            editable: false,
            loadingText: 'Loading...',
            //allowBlank: false,
            mode: 'local',
            triggerAction: 'all',
            emptyText: 'All cities within this region',
            disabled: true
        }
    ]
        }, {
            height: 20,
            items: [{
                xtype: 'label',
                text: '*or territory'
            }
]
        }
]
    });
}

SettingsPanel = Ext.extend(Ext.form.FormPanel, {
    title: 'Type: <b>Quick</b>',
    collapsed: true,
    //collapsible: true,
    collapseFirst: false,
    bodyStyle: 'padding-top: 5px;',
    //frame: true,
    labelAlign: 'right',
    border: false,
    updateState: false,

    updateTitle: function() {
        var google = Ext.getCmp('googleCheckbox').checked;
        var yahoo = Ext.getCmp('yahooCheckbox').checked;
        var delimeter = ' <img src="newDesignImages/formsettings-divider.png" style="margin-left: 5px; margin-right: 5px;" />';

        if (this.updateState) {
            state.set('googleState', google);
            state.set('yahooState', yahoo);

            state.set('countryState', Ext.getCmp('countryCombo').value);
            state.set('regionState', Ext.getCmp('regionCombo').value);
            state.set('cityState', Ext.getCmp('cityCombo').value);
        }

        var title = '';
        if (google || yahoo) {
            title += '<span style="vertical-align: top; line-height: 16px;"> Search Engine: ';
            title += google ? 'Google' : '';
            title += google && yahoo ? ' and ' : '';
            title += yahoo ? 'Yahoo!' : '';
            title += '</span>' + delimeter;
        }

        if (Ext.getCmp('cityCombo').value && parseInt(Ext.getCmp('cityCombo').value).toString() == 'NaN') {
            title += '<span style="vertical-align: top; line-height: 16px;"> Location: ';
            title += Ext.getCmp('cityCombo').value + '</span>' + delimeter;
        } else
            if (Ext.getCmp('regionCombo').value && parseInt(Ext.getCmp('regionCombo').value).toString() == 'NaN') {
            title += '<span style="vertical-align: top; line-height: 16px;"> Location: ';
            title += Ext.getCmp('regionCombo').value + '</span>' + delimeter;
        } else
            if (Ext.getCmp('countryCombo').value) {
            title += '<span style="vertical-align: top; line-height: 16px;"> Location: ';
            title += Ext.getCmp('countryCombo').value + '</span>' + delimeter;
        }

        title = '<table cellspacing="0" cellpadding="0" style="display:inline; width: ' + (this.width - 15) + 'px; height:16px;">' +
            '<tr><td align="left" ' + (!Ext.isIE ? 'width="' + (this.width - 100) + 'px"' : '') + '>' +
            '<div style="overflow:hidden; vertical-align:top; white-space:nowrap; text-overflow: ellipsis; height:16px; width: ' + (this.width - 150) + 'px;">' + title + '</div>' + '</td><td align="right"><a href="javascript:changeSettings();" style="text-decoration:underline;margin-top: 0px;">Change Settings</a></td></tr></table>';

        this.setTitle(title)
    },

    searchEngine: new Ext.form.FieldSet({
        title: 'Search Engine',
        hideLabels: true,
        bodyStyle: 'vertical-align: top;',
        width: 225,
        height: Ext.isIE ? 65 : 70,
        items: [{
            xtype: 'checkbox',
            width: 200,
            id: 'googleCheckbox',
            boxLabel: 'Google',
            name: 'google',
            checked: true
        }, {
            xtype: 'checkbox',
            width: 200,
            id: 'yahooCheckbox',
            boxLabel: 'Yahoo!',
            name: 'yahoo'
}]
        }),


        geoTargeting: GeoLocationFieldset(),


                    initComponent: function() {
                        var defConfig = {
                            items: [{
                                layout: 'table',
                                border: false,
                                autoHeight: true,
                                defaults: { bodyStyle: 'vertical-align: top;', style: 'margin-left:10px; background:transparent;' },
                                layoutConfig: { columns: 2 },
                                items: [
                                    this.searchEngine,
                                    this.geoTargeting
                                ]
}]
                            }
                            Ext.applyIf(this, defConfig);
                            //SettingsPanel.superclass.initComponent.call(this);

                            this.form = this.createForm();

                            this.bodyCfg = {
                                tag: 'div',
                                cls: this.baseCls + '-body',
                                //method: this.method || 'POST',
                                id: this.formId || Ext.id()
                            };
                            if (this.fileUpload) {
                                this.bodyCfg.enctype = 'multipart/form-data';
                            }

                            Ext.FormPanel.superclass.initComponent.call(this);

                            this.addEvents(
                                    'clientvalidation'
                                );

                            this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);

                            Ext.getCmp('googleCheckbox').on('check', this.updateTitle.createDelegate(this));
                            Ext.getCmp('yahooCheckbox').on('check', this.updateTitle.createDelegate(this));
                            Ext.getCmp('countryCombo').on('select', this.updateTitle.createDelegate(this));
                            Ext.getCmp('regionCombo').on('select', this.updateTitle.createDelegate(this));
                            Ext.getCmp('cityCombo').on('select', this.updateTitle.createDelegate(this));

                            //Ext.getCmp('regionCombo').setDisabled(true);
                            //Ext.getCmp('cityCombo').setDisabled(true);

                            this.updateTitle(true);
                        }
                    });