Ext.ns('Tsf.site');

Tsf.site.ProcessSlides = Ext.extend(Tsf.site.Slides, {
    // Config
    initialStep: 'discovery',

    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);

        Tsf.site.ProcessSlides.superclass.constructor.call(this, elId, config);
    },

    initEvents: function() {
        this.stage.child('a.next-step').on('click', function(evt) {
            evt.preventDefault();
            var target = evt.getTarget();
            var currentStep = Ext.History.getToken().split(this.tokenDelimiter)[1] || this.initialStep;
            var nextIndex = this.getIndexFromModel(currentStep)+1;
            // TODO only supports wrapping forward
            if (this.wrap && nextIndex == this.model.items.length) {
                nextIndex = 0;
            }
            var nextStep = this.model.items[nextIndex].stepName;
            Ext.History.add(this.historyName + this.tokenDelimiter + nextStep);
        }, this);
        
        // this.stageImage.child('img.scene').on('load', function(evt, t) {
        //     this.stageImage.show({duration: 0.75});
        // }, this);
    },
    
    onHistoryChange: function(token) {
        // Get index from bookmarked state
        var index = this.getIndexFromModel(token.split(this.tokenDelimiter)[1]);
        this.setDocumentTitle(index);
        this.setStep(index);
    },
    
    trackView: function() {
        if (Ext.isDefined(pageTracker)) {
            pageTracker._trackPageview("/process/" + this.activeStep.stepName);
        } 
    },
    
    add: function(el, index) {
        // var el = Ext.get(el);
        var stepName = el.id;
        // Add preloaded images to model and remove preloaded imag elements
        var imagePaths = [];
        el.select('.preload').each(function(el) {
            var src = el.getAttribute('data-image');
            var img = new Image();
            img.src = src;
            imagePaths.push(src);
        }, this);

        // Set model data
        var item = {};
        item.stepName = stepName;
        item.name = el.child('.step-name').dom.innerHTML;
        item.headline = el.child('.step-tagline').dom.innerHTML;
        item.text = el.child('p').dom.innerHTML;
        item.images = imagePaths;
        item.nextAction = el.child('a.next-step').getAttribute('href');
        item.nextActionText = el.child('a.next-step').dom.innerHTML;

        // Create an inex for bookmark history
        this.model.items.push(item);
        this.model.indices[stepName] = index;
    },
    
    setupStage: function(data) {
        this.stageData = data;
        
        this.stage.child('.step-name', true).innerHTML = data.name;
        this.stage.child('.step-tagline', true).innerHTML = data.headline;
        this.stage.child('p', true).innerHTML = data.text;
        this.stage.child('a.next-step').set({href: data.nextAction});
        this.stage.child('a.next-step').dom.innerHTML = data.nextActionText;
        var sceneImage = data.images[0];
        this.stageImage.child('img.scene').set({src: sceneImage});
        
        Cufon.refresh('#slide-stage .step-name, #slide-stage .step-tagline');
    },

    setDocumentTitle: function(index) {
        document.title = 'Process - ' + this.model.items[index].name + ' - The Superformula';
    }
});