
function ncmsSlideshowDefaultLabelBuilder(title, index) {
    var label = new Element('div', {'class': 'label'});
    var text = new Element('span', {'class': 'text-content', 'html': title});
    text.inject(label);
    return label;
}



var ncmsSlideshow = new Class({
    Implements: Options,
    options: {
        pause: 1500,
        elWidth: 950,
        duration: 1000,
        transition: Fx.Transitions.Quart.easeInOut,
        delayIndexUpdate: 500,
        delayIndexUpdateAfterClick: 100,
        showDescription: true,
        showNavigation: true,
        showLabels: true,
        pauseOnHover: true

    },
    initialize: function(element, options) {
        this.setOptions(options);
        this.element = element;
        var slideshow = this;
        this.inner = this.element.getElement(".inner-slideshow");
        this.numberSlides = this.inner.getElements('.slide-item').length;
        this.width = this.numberSlides * this.options.elWidth;
        this.position = 0;
        this.activeSlide = 1;
        this.labelBuilder = ncmsSlideshowDefaultLabelBuilder;
        this.indexElement = this.element.getElement('.labels');
        if(this.options.showLabels) {
            this.indexElements = this.element.getElements('.label');
        } else {
            if(this.indexElement) {
                this.indexElement.destroy();
            }
        }
        if(this.indexElements) {
            Array.each(this.indexElements, function(item, index) {
                item.addEvent('click', function() { slideshow.slideToIndex(index); });
            }, this);
        }
        var descriptionParent = this.element.getElement('.description');
        if(this.options.showDescription) {
            if(descriptionParent) {
               // descriptionParent.setStyle('width', this.width);
                this.descriptionElements = descriptionParent.getElements('.item');
            }
        } else {
            if(descriptionParent) {
                descriptionParent.destroy();
            }
        }

        if(this.options.pauseOnHover) {
            this.element.addEvent('mouseenter', function() { slideshow.pause(); });
            this.element.addEvent('mouseleave', function() { slideshow.start(); });
        }

        if(this.options.showNavigation) {
            var leftArrow = new Element("div", { 'class': 'left-arrow', html: '&lt;' });
            var rightArrow = new Element("div", { 'class': 'right-arrow', html: '>' });
            leftArrow.inject(this.element);
            rightArrow.inject(this.element);
            leftArrow.addEvent('click', function() { slideshow.slideRight(); });
            rightArrow.addEvent('click', function() { slideshow.slideLeft(); });
        }
        this.start();
        this.updateIndex();
    },
    addLabel: function(title, index) {
        var label = this.labelBuilder(title, index);
		if(this.indexElement) {
			label.inject(this.indexElement);
			this.indexElements = this.element.getElements('.label');
			var slideshow = this;
			label.addEvent('click', function() { slideshow.slideToIndex(index); });
			this.updateIndex();
		}
    },
    pause: function() {
        $clear(this.periodical);
    },
    start: function () {
        this.periodical = this.slide.periodical(this.options.pause, this);
    },
    slide: function() {
        if(this.position - this.options.elWidth > -this.width) {
            this.slideLeft();
        } else {
            this.slideBack();
        }
    },
    slideToIndex: function(number) {
        this.activeSlide = number + 1;
        this.slideTo(-(number) * this.options.elWidth, this.options.delayIndexUpdateAfterClick);
    },
    slideLeft: function() {
        if(this.activeSlide < this.numberSlides) {
            this.activeSlide = this.activeSlide + 1;
            this.slideTo(this.position - this.options.elWidth, this.options.delayIndexUpdate);
        } else {
            this.slideBack();
        }
    },
    slideRight: function() {
        if(this.activeSlide > 1) {
            this.activeSlide = this.activeSlide - 1;
            this.slideTo(this.position + this.options.elWidth, this.options.delayIndexUpdate);
        } else {
            this.slideEnd();
        }
    },
    slideBack: function() {
        this.activeSlide = 1;
        this.slideTo(0, this.options.delayIndexUpdate);

    },
    slideEnd: function() {

        this.activeSlide = this.numberSlides;
        this.slideTo(-this.width + this.options.elWidth, this.options.delayIndexUpdate);

    },
    slideTo: function(position, delayIndexUpdate) {
        if(position <= -this.width) {
            position = -this.width;
        }


        this.inner.set('tween', {duration: this.options.duration, transition: this.options.transition});
        this.inner.tween('left', position);
        //this.inner.setStyle("left", position);
        this.position = position;
        this.updateIndex.delay(delayIndexUpdate, this);

    },
    updateIndex: function() {
        if(this.indexElements && this.options.showLabels ) {
            this.indexElements.removeClass('act');
            if(this.indexElements[this.activeSlide-1]) {
                this.indexElements[this.activeSlide-1].addClass('act');
            }
        }

        if(this.descriptionElements && this.options.showDescription) {
            this.descriptionElements.removeClass('act');
            this.descriptionElements[this.activeSlide-1].addClass('act');
        }
    }

});


