var mySlideShow;
var mySlideShow2;

window.addEvent('domready',function(){
    
    // instance with a few options
    mySlideShow = new SlideShow('img-container1', {
        delay: 9000,
        autoplay: true
    });

	// instance with a few options
    mySlideShow2 = new SlideShow2('billboardInfos', {
        delay: 9000,
        autoplay: true
    });
    
});

var Loop = new Class({

    loopCount: 0,
    isStopped: true,
    isLooping: false,
    loopMethod: $empty,

    setLoop: function(fn,delay){
        if(this.isLooping) {
            //this.stopLoop();
            var wasLooping = true;
        } else {
            var wasLooping = false;
        }
        this.loopMethod = fn;
        this.loopDelay = delay || 3000;
        if(wasLooping) this.startLoop();
        return this;
    },

    startLoop: function(delay) {
        if(this.isStopped){
            var delay = (delay) ? delay : this.loopDelay;
            this.isStopped = false;
            this.isLooping = true;
            this.periodical = this.looper.periodical(delay,this);
        };
        return this;
    },

    looper: function(){
        this.loopCount++;
        this.loopMethod(this.loopCount);
        return this;
    }

});




// THE CLASS

/*

script: SlideShow.js

*/


var SlideShow = new Class({
    
    Implements: [Options, Events, Loop],
        
        options: {
            delay: 9000,
            transition: 'crossFade',
            duration: '500',
            autoplay: false
        },
    
    initialize: function(element, options){
        this.setOptions(options);
        this.setLoop(this.showNext, this.options.delay);
        this.element = document.id(element);
        this.slides = this.element.getChildren();
        this.current = this.slides[0];
        this.setup();
        if(this.options.autoplay) this.startLoop();
    },
    
    setup: function(){
      this.setupElement();
      this.setupSlides();
        return this;
    },
    
    setupElement: function(){
        var el = this.element;
        if(el.getStyle('position') != 'absolute' && el != document.body) el.setStyle('position','relative');
        return this;
    },
    
    setupSlides: function(){
        this.slides.each(function(slide, index){
            this.storeTransition(slide).reset(slide);
            if(index != 0) slide.setStyle('display','none');
        }, this);
        return this;
    },
    
    storeTransition: function(slide){
        var classes = slide.get('class');
        var transitionRegex = /transition:[a-zA-Z]+/;
        var durationRegex = /duration:[0-9]+/;
        var transition = (classes.match(transitionRegex)) ? classes.match(transitionRegex)[0].split(':')[1] : this.options.transition;
        var duration = (classes.match(durationRegex)) ? classes.match(durationRegex)[0].split(':')[1] : this.options.duration;
        slide.store('ssTransition', transition);
        slide.store('ssDuration', duration);
        return this;
    },
    
    getTransition: function(slide){
        return slide.retrieve('ssTransition');
    },
    
    getDuration: function(slide){
        return slide.retrieve('ssDuration');
    },
    
    show: function(slide){
        this.fireEvent('show');
        if(slide != this.current){
            var transition = this.getTransition(slide);
            var duration = this.getDuration(slide);
            var previous = this.current.setStyle('z-index', 1);
            var next = this.reset(slide);
           
            this.transitions[transition](previous, next, duration, this);
            (function() {
                previous.setStyle('display','none');
                previous.removeClass('test');
                this.fireEvent('showComplete');
               resizeBackground();
               
            }).bind(this).delay(duration);
            this.current = next;
        }

        return this;
    },
    
    reset: function(slide){
        
        return slide.setStyles({
            'position': 'fixed',
            'z-index': 0,
            'display': 'block',
            'left': 0,
            'top': 0
        }).fade('show');
        return this;
    },
    
    nextSlide: function(){
        var next = this.current.getNext();
        return (next) ? next : this.slides[0];
    },

    previousSlide: function(){
        var previous = this.current.getPrevious();
        return (previous) ? previous : this.slides.getLast();
    },
    
    showNext: function(){
        this.show(this.nextSlide());
        return this;
    },
    
    showPrevious: function(){
        this.show(this.previousSlide());
        return this;
    },
    
   /* play: function(){
        this.startLoop();
        this.fireEvent('play');
        return this;
    },
    
    pause: function(){
        this.stopLoop();
        this.fireEvent('pause');
        return this;
    },*/
    
    reverse: function(){
        var fn = (this.loopMethod == this.showNext) ? this.showPrevious : this.showNext;
        this.setLoop(fn, this.options.delay);
        this.fireEvent('reverse');
        return this;
    }
    
});

SlideShow.adders = {
    transitions:{},
  
    add: function(className, fn){
        this.transitions[className] = fn;
        this.implement({
            transitions: this.transitions
        });
    },
    
    addAllThese : function(transitions){
        $A(transitions).each(function(transition){
            this.add(transition[0], transition[1]);
        }, this);
    }
    
}

$extend(SlideShow, SlideShow.adders);
SlideShow.implement(SlideShow.adders);

SlideShow.add('fade', function(previous, next, duration, instance){
    previous.set('tween',{duration: duration}).fade('out');
    return this;
});

SlideShow.addAllThese([
    ['crossFade', function(previous, next, duration, instance){
        previous.set('tween',{duration: duration}).fade('out');
        next.set('tween',{duration: duration}).fade('in');
        return this;
    }]
]);


var SlideShow2 = new Class({
    
    Implements: [Options, Events, Loop],
        
        options: {
            delay: 9000,
            transition: 'crossFade',
            duration: '500',
            autoplay: false
        },
    
    initialize: function(element, options){
        this.setOptions(options);
        this.setLoop(this.showNext, this.options.delay);
        this.element = document.id(element);
        this.slides = this.element.getChildren();
        this.current = this.slides[0];
        this.setup();
        if(this.options.autoplay) this.startLoop();
    },
    
    setup: function(){
      this.setupElement();
      this.setupSlides();
        return this;
    },
    
    setupElement: function(){
        var el = this.element;
        if(el.getStyle('position') != 'absolute' && el != document.body) el.setStyle('position','relative');
        return this;
    },
    
    setupSlides: function(){
        this.slides.each(function(slide, index){
            this.storeTransition(slide).reset(slide);
            if(index != 0) slide.setStyle('display','none');
        }, this);
        return this;
    },
    
    storeTransition: function(slide){
        var classes = slide.get('class');
        var transitionRegex = /transition:[a-zA-Z]+/;
        var durationRegex = /duration:[0-9]+/;
        var transition = (classes.match(transitionRegex)) ? classes.match(transitionRegex)[0].split(':')[1] : this.options.transition;
        var duration = (classes.match(durationRegex)) ? classes.match(durationRegex)[0].split(':')[1] : this.options.duration;
        slide.store('ssTransition', transition);
        slide.store('ssDuration', duration);
        return this;
    },
    
    getTransition: function(slide){
        return slide.retrieve('ssTransition');
    },
    
    getDuration: function(slide){
        return slide.retrieve('ssDuration');
    },
    
    show: function(slide){
        this.fireEvent('show');
        if(slide != this.current){
            var transition = this.getTransition(slide);
            var duration = this.getDuration(slide);
            var previous = this.current.setStyle('z-index', 1);
            var next = this.reset(slide);
           
            this.transitions[transition](previous, next, duration, this);
            (function() {
                previous.setStyle('display','none');
                previous.removeClass('test');
                this.fireEvent('showComplete');
               resizeBackground();
               
            }).bind(this).delay(duration);
            this.current = next;
        }

        return this;
    },
    
    reset: function(slide){
        
        return slide.setStyles({
 
            'z-index': 0,
            'display': 'block',
            'left': 0,
            'top': 0
        }).fade('show');
        return this;
    },
    
    nextSlide: function(){
        var next = this.current.getNext();
        return (next) ? next : this.slides[0];
    },

    previousSlide: function(){
        var previous = this.current.getPrevious();
        return (previous) ? previous : this.slides.getLast();
    },
    
    showNext: function(){
        this.show(this.nextSlide());
        return this;
    },
    
    showPrevious: function(){
        this.show(this.previousSlide());
        return this;
    },
    
   /* play: function(){
        this.startLoop();
        this.fireEvent('play');
        return this;
    },
    
    pause: function(){
        this.stopLoop();
        this.fireEvent('pause');
        return this;
    },*/
    
    reverse: function(){
        var fn = (this.loopMethod == this.showNext) ? this.showPrevious : this.showNext;
        this.setLoop(fn, this.options.delay);
        this.fireEvent('reverse');
        return this;
    }
    
});

SlideShow2.adders = {
    transitions:{},
  
    add: function(className, fn){
        this.transitions[className] = fn;
        this.implement({
            transitions: this.transitions
        });
    },
    
    addAllThese : function(transitions){
        $A(transitions).each(function(transition){
            this.add(transition[0], transition[1]);
        }, this);
    }
    
}

$extend(SlideShow2, SlideShow2.adders);
SlideShow2.implement(SlideShow2.adders);

SlideShow2.add('fade', function(previous, next, duration, instance){
    previous.set('tween',{duration: duration}).fade('out');
    return this;
});

SlideShow2.addAllThese([
    ['crossFade', function(previous, next, duration, instance){
        previous.setStyle('display','none');
        //previous.set('tween',{duration: duration}).fade('out');
        next.set('tween',{duration: duration}).fade('in');
        return this;
    }]
]);