var ThemeSwitcher = function(app){
    this.app = app;
    this.node = document.getElementById('themeTag');
    this.activeTheme = /themes\/([\w\d-_\.]+)\/resources/.exec(this.node.href)[1];
    this.activeBg = '';
    this.activeIcon = '<div style="width:16px;height:16px;margin:2px;background-image:url(images/icons/accept.png)"></div>';
}
ThemeSwitcher.prototype.setTheme = function(themeName){
    themeName == 'default' ? themeName = '../ext-3.0.0' : '';
    this.node.href = 'library/client/themes/'+themeName+'/resources/css/ext-all.css';
    this.activeTheme = themeName;
}
ThemeSwitcher.prototype.setBg = function(bgUrl){
    document.getElementById('portal').style.backgroundImage = 'url(\''+bgUrl+'\')';
    this.activeBg = bgUrl;
}
ThemeSwitcher.prototype.showList = function(){
    var that = this;
    var wnd = new Ext.Window({
        resizable: false,
        draggable: false,
        title: 'Desktop settings',
        modal: true,
        width: 631,
        height: 400,
        bodyStyle: 'background: #fff;',
        items: new Ext.TabPanel({
            activeTab: 0,
            anchor: '100% 100%',
            border: false,
            items: [{
                title: 'Themes',
                items: new Ext.DataView({
                    anchor: '100% 100%',
                    store: new Ext.data.JsonStore({
                        idProperty: 'name',
                        fields: ['name', 'active'],
                        data: function(){
                            var arr = [];
                            for(var i=1;i<22;i++){
                                arr.push({name: i, active: that.activeTheme == i ? true : false});
                            }
                            return arr;
                        }()
                    }),
                    tpl: new Ext.XTemplate(
                        '<tpl for=".">',
                            '<div class="theme2switch" style="border:1px solid #fff; float:left;margin: 5px 0 0 5px; width:20px;height:20px;padding:10px;background-image:url(\'library/client/themes/{name}/resources/images/default/window/top-bottom.png\')">',
                                '<tpl if="active == true">',
                                    that.activeIcon,
                                '</tpl>',
                            '</div>',
                        '</tpl>'
                    ),
                    multiSelect: false,
                    itemSelector:'div.theme2switch',
                    listeners: {
                        click: function(dv, num) {
                            var newTheme = dv.getStore().getAt(num).data.name;
                            dv.getNode(dv.getStore().find('name', that.activeTheme)).innerHTML = '';
                            dv.getNode(num).innerHTML = that.activeIcon;
                            that.setTheme(newTheme);
                        }
                    }
                })
            },{
                title: 'Background',
                disabled: true,
                items: new Ext.DataView({
                    store: new Ext.data.JsonStore({
                        idProperty: 'file',
                        fields: ['file', 'active'],
                        data: function(){
                            var arr = [];
                            var file;
                            for(var i=1;i<22;i++){
                                file = 'library/client/themes/'+i+'/resources/images/default/window/top-bottom.png';
                                arr.push({
                                    file: file,
                                    active: that.activeBg == file ? true : false
                                });
                            }   
                            return arr;
                        }() 
                    }), 
                    tpl: new Ext.XTemplate(
                        '<tpl for=".">',
                            '<div class="background2switch" style="border:1px solid #fff; float:left;margin: 5px 0 0 5px; width:75px;height:50px;padding:10px;background-image:url(\'{file}\')">',
                                '<tpl if="active == true">',
                                    that.activeIcon,
                                '</tpl>',
                            '</div>',
                        '</tpl>'
                    ),  
                    multiSelect: false,
                    itemSelector:'div.background2switch',
                    listeners: {
                        click: function(dv, num) {
                            var newBg = dv.getStore().getAt(num).data.file;
                            dv.getNode(dv.getStore().find('file', that.activeBg)).innerHTML = ''; 
                            dv.getNode(num).innerHTML = that.activeIcon;
                            that.setBg(newBg);
                        }   
                    }   
                })
            }]
        }),
        buttons: [{
            text: 'Save',
            handler: function(){
                var doc = new JSON.Document('packet', JSON.DefaultPacket('themeSwitcher', 'save'));
                doc.packet.xmldata.theme = that.activeTheme;
                doc.packet.xmldata.bg = that.activeBg;
                (new JSON.Request(function(response) {
                                  
                })).send(application.server, doc);
                wnd.close();
                application.status('Settings saved');
            }
        }, {
            text: 'Close',
            handler: function(){
                wnd.close();
            }
        }]
    });
    wnd.show();
}