window.addEvent('domready',function(event){
    var explanation = document.id('explanation');
    if (explanation) {
        var container = explanation.getElement('.container');
        
        container.set('tween', {
            fps: 30,
            duration: 300,
            transition: Fx.Transitions.Expo.easeInOut
        });
        
        var stepSize = explanation.getCoordinates().width * -1;
        var allSteps = container.getElements('div.step');
        
        explanation.store('step',0);
        
        document.id('explanationScrollBar').getElement('.scrollback').addEvent('click',function(event){
            var step = explanation.retrieve('step');
            if (step > 0) {
                step--;
                if (step == 0) {
                    this.addClass('disabled');
                }
                document.id('explanationScrollBar').getElement('.scrollnext').removeClass('disabled');
                explanation.store('step',step);
                
                container.tween('left',step*stepSize);
            }
            
            event.stop();
        });
        
        document.id('explanationScrollBar').getElement('.scrollnext').addEvent('click',function(event){
            var step = explanation.retrieve('step');
            if (step < allSteps.length - 1) {
                step++;
                if (step == allSteps.length - 1) {
                    this.addClass('disabled');
                }
                document.id('explanationScrollBar').getElement('.scrollback').removeClass('disabled');
                explanation.store('step',step);
                
                container.tween('left',step*stepSize);
            }
            
            event.stop();
        });
    }
});