Ext.define('ES.References', {
    singleton: true,
    
    initSlides: function() {
        var me = this;
        
        me.slidesEl = Ext.get(Ext.query('.references-slider-line')[0]);
        me.sliderTop = 0;
        
        setTimeout(function() {
            Ext.TaskManager.start({
                run: me.moveSlides,
                scope: me,
                interval: 5000
            });
        }, 3000);
    },
    
    moveSlides: function() {
        var me = this;
        
        me.slidesEl.animate({
            to: {
                top: -180
            },
            duration: 2000,
            listeners: {
                afteranimate: function() {
                    var slide = me.slidesEl.first('img');
                    slide.appendTo(me.slidesEl);
                    me.slidesEl.setTop(0);
                }
            }
        })
    },
    
    init: function(projects) {
        var me = this;
        
        me.projects = projects;
        me.pos = 0;
        me.showNext();
        
        me.el = Ext.get('box_references_image');
    },
    
    showNext: function(delay) {
        Ext.callback(this.next, this, null, delay || 4000);
    },
    
    next: function() {
        var me = this,
            project;
        
        me.pos++;
        
        if (me.pos == me.projects.length) {
            me.pos = 0;
        }
        
        project = me.projects[me.pos];
        
        me.el.animate({
            to: {
                opacity: 0
            },
            listeners: {
                afteranimate: function() {
                    me.el.set({src: 'public/images/references/' + project.image});
                    new Ext.fx.Anim({
                        target: me.el,
                        to: {
                            opacity: 1
                        },
                        duration: 1000,
                        listeners: {
                            afteranimate: function() {
                                me.showNext();
                            }
                        }
                    })
                    
                    
                }
            }
        })
        
    }
})