App.views.SlideshowsCarousel = Ext.extend(Ext.Carousel, {
    id: 'slideshowCarousel',
    fullscreen: true,
    cls: 'slideshow-carousel',
    indicator: false,
    index: 0,
    speed: 2000,
    effect: 'fade',
    total: 0,
    intervalObj: null,
    ui: 'dark',

    listeners: {
        afterLayout: function(c) {
                c.items.each(function(item) {
                    item.el.on('tap', function() {
                        App.views.slideshowCarousel.stop();
                        App.views.slideshowCarousel.popup.show('pop');
                    });
                });
        },
        scope: this
    },

    initComponent: function() {
        var that = this;

        that.popup = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
            width: 'auto',
            height: 58,
            layout: 'hbox',
            items: [{
                xtype: 'toolbar',
                items: [{
                    ui: 'back',
                    text: 'Albums',
                    handler: function() {
                        App.views.slideshowCarousel.popup.hide();
                        App.views.viewport.reveal('albumPanel');
                        App.views.slideshowCarousel.stop();
                    }
                },{
                    iconCls: 'play1',
                    id: 'pause-play-btn',
                    iconMask: true,
                    handler: function (btn, evt) {
                        App.views.slideshowCarousel.popup.hide();
                        App.views.slideshowCarousel.start();
                    }
                }/*,{ 
                    iconCls: 'share',
                    iconMask: true,
                    handler: function() {
                        App.views.slideshowCarousel.popup.hide();
                        Ext.dispatch({
                            controller: 'Slideshows',
                            action: 'share',
                            data: {
                                slideshow: that.album,
                                photos: App.stores.Photos
                            }
                        });
                    }   
                }*/]
            }]
        });

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

    init: function() {
        this.speed = App.stores.Settings.first().data.speed;
        this.effect = App.stores.Settings.first().data.effect;

        this.loadPhotos();
        this.hideLoading();
        this.total = this.items.length;
        this.index = 0;

        return this;
    },

    initLoading: function() {
        if (this.loadingMask === undefined) {
            this.loadingMask = new Ext.LoadMask(Ext.getBody(), 
                                                {msg:"Loading Slideshow..."});
        }
    },

    loadPhotos: function() {
        this.removeAll();

        App.stores.Photos.each(function(photo) {
            imgTag = new Ext.XTemplate('<div class="slideshow-image" style="background-image: url(' + photo.data.source + ');" />');
            this.add(imgTag);

        }, this);
        
        this.doLayout();
    },

    reset: function() {
        this.index = 0;
    },

    showLoading: function() {
        this.initLoading();
        this.loadingMask.show();
    },

    hideLoading: function() {
        this.initLoading();
        this.loadingMask.hide();
    },

    start: function() {
        var that = this;
        that.index = (that.index === that.total) ? 0 : that.index;
        this.intervalObj = setInterval(function() { 
            if (that.index < that.total) {
                if (that.effect !== 'none' && that.effect !== 'random') {
                    that.setActiveItem(that.index, {
                        type: that.effect,
                        duration: 1000,
                    });
                } else if (that.effect === 'random') {
                    var effects = ['cube', 'fade', 'flip', 'pop', 'slide'];

                    var nr = Math.floor(Math.random()*4)

                    effect = effects[nr]

                    that.setActiveItem(that.index, {
                        type: effect,
                        duration: 1000,
                    });
                } else {
                    that.setActiveItem(that.index);
                }

                that.index++;
            } else {
                if(App.stores.Settings.first().data.loop === 0) {
                    that.stop(); 
                    that.popup.show('pop');
                } else {
                    that.index = 0;
                }
            }
        }, this.speed);
    },

    stop: function() {
        clearInterval(this.intervalObj);
    }
});

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