Ext.ns('Tsf.site');

Tsf.site.HomeSlides = Ext.extend(Tsf.site.Slides, {
    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);

        Tsf.site.HomeSlides.superclass.constructor.call(this, elId, config);
        
        var numSlides = this.model.items.length;
        this.setStep(Math.floor(Math.random()*numSlides));
    },
    
    initMarkup: function() {
        Tsf.site.HomeSlides.superclass.initMarkup.call(this);
        // this.stage.child('h3', true).innerHTML = 'View Work';
        this.stage.child('h3').update(Ext.DomHelper.markup({tag: 'a', "href": '#', html: 'View Work'}));
    },
    
    initEvents: function() {
        this.el.select('a.next').on('click', function(evt) {
            evt.preventDefault();
            this.setStep(this.activeIndex + 1);
        }, this);
        this.el.select('a.prev').on('click', function(evt) {
            evt.preventDefault();
            this.setStep(this.activeIndex - 1);
        }, this);
    },

    add: function(el, stepName) {
        // Add preloaded images to model and remove preloaded imag elements
        var imagePaths = this.getImagePaths(el.select('img.preload'));
        // Set model data
        var item = {};
        item.id = el.id;
        item.name = el.child('h1', true).innerHTML;
        item.headline = el.child('h3', true).innerHTML;
        item.images = imagePaths;
        
        this.model.items.push(item);
    },
    
    setupStage: function(data) {
        this.stageData = data;
        
        this.stage.child('h1', true).innerHTML = data.name;
        this.stage.child('h3 a').set({"href": '/work#project:' + data.id});

        var sceneImage = data.images[0];
        this.stageImage.child('img.scene').set({src: sceneImage});
        // this.stageImage.setStyle({"background": 'url('+sceneImage+') no-repeat'});
        
        Cufon.refresh('.home #slide-stage h1, .home #slide-stage h3');
    }
});