App.views.SettingsPanel = Ext.extend(Ext.form.FormPanel, {
    id: 'settingsPanel',
    cls: 'settings-panel',
    fullscreen: true,
    scroll: 'vertical',
    initComponent: function() {
        var topBar = {
            xtype: 'toolbar',
            title: 'Settings',
            dock: 'top',
            items: [{
                ui: 'back',
                text: 'Back',
                handler: function() {
                    Ext.dispatch({
                        controller: 'Albums',
                        action: 'refreshAlbumList'
                    });

                    App.views.viewport.setActiveItem('albumPanel',
                                             {type:'slide',
                                              direction:'right'});
                }   
            }, {xtype: 'spacer'}, {
                text: 'Save',
                ui: 'confirm',
                handler: this.onSaveAction,
                scope: this 
            }]  
        }

        /*var bottomBar = {
            title: 'The Latest',
            html: '<iframe src =\"admob.html" width=\"100%\" height=\"50\" frameBorder=\"0\" scrolling=\"no\"></iframe>',
            id: 'feedTab',
            border: false,
            height: 50,
            dock: 'bottom'
        }*/

        var slideshow = {
                xtype: 'fieldset',
                title: 'Slideshows',
                instructions: 'Customize your slideshows above.',
                items: [{
                    xtype: 'sliderfield',
                    label: 'Speed',
                    name: 'speed',
                    value: 2000,
                    minValue: 2000,
                    maxValue: 5000
                }, {
                    xtype: 'selectfield',
                    label: 'Effect',
                    name: 'effect',
                    value: 'fade',
                    options: [
                        {text: 'None', value: 'none'},
                        {text: 'Cube', value: 'cube'},
                        {text: 'Fade', value: 'fade'},
                        {text: 'Flip', value: 'flip'},
                        {text: 'Pop', value: 'pop'},
                        {text: 'Slide', value: 'slide'},
                        {text: 'Random', value: 'random'}
                    ]
                },{
                    xtype: 'togglefield',
                    name: 'loop',
                    label: 'Loop'
                }]
        }

        var albums = {
            xtype: 'fieldset',
            title: 'Albums',
            instructions: 'Customize your albums above.',
            items: [/*{
                xtype: 'selectfield', 
                label: 'View',
                name: 'view',
                value: 'list',
                listeners: {
                    change: function(select, val) {
                        //update settings store
                    },
                    scope: this
                },
                options: [
                    {text: 'List', value: 'list'},
                    {text: 'Thumbnails', value: 'thumbnails'}
                ]
            },*/{
                xtype: 'selectfield',
                label: 'Sort',
                name: 'sort',
                value: 'name',
                options: [
                    {text: 'Name', value:'name'},
                    {text: 'Number of photos', value:'count'},
                    {text: 'Created Date', value:'created_time'},
                    {text: 'Updated Date', value:'updated_time'}
                ]
            },{
                xtype: 'selectfield',
                label: 'Sort Direction',
                name: 'direction',
                value: 'asc',
                options: [
                    {text: 'Ascending', value: 'ASC'},
                    {text: 'Descending', value: 'DESC'}
                ]
            },{
                    xtype: 'togglefield',
                    name: 'emptyAlbums',
                    label: 'Show Empty Albums',
            }]
        }

        this.items = [slideshow, albums];
        //this.dockedItems = [topBar, bottomBar];
        this.dockedItems = [topBar];

        App.views.SettingsPanel.superclass.initComponent.call(this);
    },

    onSaveAction: function() {
        var data = this.getValues();
        var model = this.getRecord();

        Ext.dispatch({
            controller: 'Settings',
            action    : 'save',
            record      : model,
            data      : data,
            form      : this
        });
    }
});

Ext.reg('App.views.SettingsPanel', App.views.SettingsPanel);