var Bekent = Bekent || {};

Bekent.SlideShow = new Class({

    Extends: Bekent.Rotater,

    options: {
        autoplay: true,
        itemSelector: '.item',
        navContainer: '.navbar',
        titleContainer: '.titlebar'
    },

    initialize: function(container, options){
        this.setOptions(options);
        this.container = $(container);
        this.items = this.container.getElements(this.options.itemSelector);
        if(this.items.length == 0) return false;
        this.createNavigation();
        this.parent(this.container.getElements(this.options.itemSelector),options);
        return this;
    },

    createNavigation: function () {
        this.navContainer = this.container.getElement(this.options.navContainer);
        this.titleContainer = this.container.getElement(this.options.titleContainer);
        this.nextButton = new Element('a', {'class':'nav-button next','text':'Volgende'}).inject(this.navContainer).addEvent('click', function(){
            this.stop();
            this.showNext();
        }.bind(this));
            this.prevButton = new Element('a', {'class':'nav-button prev','text':'Vorige'}).inject(this.navContainer).addEvent('click', function(){
            this.stop();
            this.showPrev();
        }.bind(this));
    }.protect(),

    activateSlide: function(slideIndex) {
        this.items.removeClass('active');
        this.items.removeClass('hide');
        this.items[slideIndex].addClass('active');
        this.titleContainer.set('text', this.items[slideIndex].get('title')).setStyle('opacity', 0);
        this.titleFx = new Fx.Tween(this.titleContainer, {
            property: 'opacity',
            duration: 500,
            transition: Fx.Transitions.Quart.easeInOut,
            chain: 'wait'
        });
        this.titleFx.start([0,1]).start([1,0]);
        
    }.protect(),

    showNext: function(){
        var current = this.currentSlide;        
        var next = (current+1 >= this.slides.length) ? 0 : current+1;
        this.showSlide(next);
        return this;
    },

    showPrev: function(){
        var current = this.currentSlide;
        var next = (current-1 < 0) ? this.slides.length-1 : current-1;
        this.showSlide(next);
        return this;
    },

    showSlide: function(slideIndex){
        if(slideIndex == this.currentSlide || this.running) return this;

        this.activateSlide(slideIndex);
        this.parent(slideIndex);
        return this;
    }

});