App.views.Viewport = Ext.extend(Ext.Panel, {

    cls: 'main-panel',
    fullscreen: true,
    layout: {
        type: 'card',
        align: 'stretch'
    },  
    cardSwitchAnimation: 'slide',
    
    initComponent: function() {
        Ext.apply(App.views, {
            albumList: new App.views.AlbumsList(),
            settingsPanel: new App.views.SettingsPanel(),
            slideshowCarousel: new App.views.SlideshowsCarousel()
        });
 
        Ext.apply(this, {
            items: [
                App.views.albumList,
                App.views.settingsPanel,
                App.views.slideshowCarousel
            ]
        });

        App.views.Viewport.superclass.initComponent.apply(this, arguments);
    },

    reveal: function(target) {
        this.setActiveItem(App.views[target]);
    }
});