var settingsForm = new Ext.form.FormPanel({
    url: 'alertsSettings.ashx?save=true',
    region: 'center',
    width: 385,
    border: false,
    margins: '3 0 3 3',
    cmargins: '3 3 3 3',
    style: 'padding-top: 15px; padding-left: 15px;',
    bodyStyle: 'background-color: transparent;',
    defaultType: 'checkbox',
    defaults: {
        ctCls: ''
    },
    labelWidth: 365,
    items: [
        {
            xtype: 'label',
            html: 'Please select which reports you wish to have<br>emailed to you:<br><br>',
            style: 'font-size:12px; font-weight: bold;'
        },
        {
            xtype: 'fieldset',
            id: 'monitoringAlerts',
            name: 'monitoringAlerts',
            title: 'Monitoring Alerts',
            cellCls: 'td-align-top',
            width: 385,
            height: Ext.isIE ? 140 : 155,
            bodyStyle: 'margin-left: 5px;',
            hideLabels: true,
            layout: 'form',
            items: [
                {
                    xtype: 'checkbox',
                    boxLabel: 'Keywords where your PPC competitors have higher page rank',
                    id: 'beating'
                }, {
                    xtype: 'checkbox',
                    height: 40,
                    boxLabel: 'Keywords your PPC competitors stopped targeting<br>&nbsp;&nbsp;&nbsp;&nbsp;and Ads they stopped using',
                    id: 'notFound'
                }, {
                    xtype: 'checkbox',
                    boxLabel: 'Ad changes',
                    id: 'foundAndUsed'
                }, {
                    xtype: 'checkbox',
                    boxLabel: 'Average position changes among PPC competitors',
                    id: 'competitor'
                }
            ]
        },
        {
            xtype: 'fieldset',
            id: 'discoveryAlerts',
            name: 'discoveryAlerts',
            title: 'New Keywords and PPC Competitors Alerts',
            cellCls: 'td-align-top',
            width: 385,
            height: Ext.isIE ? 100 : 115,
            bodyStyle: 'margin-left: 5px;',
            hideLabels: true,
            layout: 'form',
            items: [
                {
                    xtype: 'checkbox',
                    boxLabel: 'Newly added keywords',
                    id: 'newKeywords'
                },
                {
                    xtype: 'checkbox',
                    boxLabel: 'New PPC competitors',
                    id: 'newCompetitors',              
                    listeners: {
                        check: function(checkbox, checked) {
                            if (checked) {
                                Ext.getCmp('newCompetitorsOverlap').enable();
                            } else {
                                Ext.getCmp('newCompetitorsOverlap').disable();
                            }
                        }
                    }
                },
                {
                    layout: 'form',
                    border: false,
                    labelAlign: 'left',
                    style: 'margin-top: 10px;',
                    bodyStyle: 'background-color: transparent;',
                    labelWidth: 290,
                    items: [
                        {
                            id: 'newCompetitorsOverlap',
                            disabled: true,
                            xtype: 'numberfield',
                            labelSeparator: '',
                            width: 30,
                            allowDecimals: false,
                            allowNegative: false,
                            allowBlank: false,
                            value: '',                              
                            minValue: 0,
                            maxValue: 100,
                            fieldLabel: 'Send new PPC competitors with overlap more than'
                        }
                    ]
                }
            ]
        }
    ],
    listeners: {
        beforerender: function() {
            Ext.Ajax.request({
                url: 'alertsSettings.ashx',
                params: { getSettings: true },
                success: function(result) {
                    //Ext.Msg.hide();
                    var alertSettings = Ext.decode(result.responseText);
                    Ext.getCmp('beating').setValue(alertSettings.SendBeating);
                    Ext.getCmp('notFound').setValue(alertSettings.SendDeletedKwrdsAds);
                    Ext.getCmp('newKeywords').setValue(alertSettings.SendNewKeywords);
                    Ext.getCmp('foundAndUsed').setValue(alertSettings.SendFoundOrChangedAds);
                    Ext.getCmp('competitor').setValue(alertSettings.SendCompetitorChangedPos);
                    Ext.getCmp('newCompetitors').setValue(alertSettings.SendNewCompetitors);
                    Ext.getCmp('newCompetitorsOverlap').setValue(alertSettings.NewCompetitorsOverlap);

                    var label = document.createElement('span');
                    label.innerHTML = '&nbsp;%';
                    Ext.getCmp('newCompetitorsOverlap').container.dom.appendChild(label);
                },
                failure: function() { Ext.Msg.alert('Error', 'Cannot load alerts settings.'); }
            });
        }
    },
    monitorValid: true,
    monitorPoll: 250,
    buttons: [{
        text: 'Save',
        //formBind: true,
        handler: function() {

            if (!ValidateForm(settingsForm)) {
                return;
            }
            Ext.Msg.wait('Saving...', 'Please wait')
            settingsForm.getForm().submit({
                success: function(f, a) {
                    Ext.getCmp('settingsWindow').hide();
                    Ext.Msg.alert('Information', 'Settings were successfully saved.');
                },
                failure: function(f, a) {
                    Ext.Msg.alert('Error', 'Can not save the settings.');
                }
            });
        }
    }, {
        text: 'Cancel',
        handler: function() {
            Ext.getCmp('settingsWindow').hide();
        }
    }]
});
    
var settingsWindow;
    
function showAlertsSettings() {
    if (!settingsWindow) {
        settingsForm.setTitle(null);
        settingsForm.elements = 'body';
        settingsForm.initialConfig.border = false;
        
        settingsWindow = new Ext.Window({
            title: 'Email Alert Preferences',
            id: 'settingsWindow',
            closable: true,
            width: 440,
            height: 420,
            plain: true,
            layout: 'border',
            modal: true,
            resizable: false,
            items: [settingsForm]
        });
    }
    settingsWindow.show();       
}