﻿var slideProjector = new Class({

    Implements: [Events, Options],

    options: {
        slideCarouselClass: 'slideshow',
        slideClass: 'slide',
        pagerClass: 'slideshow_pager',
        pagerItemType: 'li',
        selectedPagerItemClass: 'selected',
        autoScrollWait: 7000
    },

    initialize: function(selector, options) {

        this.setOptions(options);

        this.Carousel = $(selector);
        this.Slides = this.Carousel.getElements('.' + this.options.slideClass);
        this.SlideWidth = this.Slides[0].offsetLeft + (this.Slides[0].getSize()).x;
        this.SlideHeight = 170; // this.Slides[0].offsetTop + (this.Slides[0].getSize()).y;

        $$('.' + this.options.pagerClass).each(function(el) {
            el.destroy();
        });

        this.Pager = new Element('ul', { 'class': this.options.pagerClass }).inject(this.Carousel, 'after');
        this.PageCount = this.Slides.length; //((this.Slides.length - this.Slides.length % 5) / 5) + ((this.Slides.length % 5 >0)?1:0);
        this.CurrentPage = 1;

        this.makepager();

        this.makenavigation();

        this.Fx = new Fx.Scroll(this.Carousel, {
            duration: 0,
            offset: { 'x': 0, 'y': 0 }
        })

        this.play();

    },
    makepager: function() {
        for (pageNum = 1; pageNum <= this.PageCount; pageNum++) {
            this.Pager.adopt(
                new Element(this.options.pagerItemType, {
                    'html': pageNum,
                    'title': this.Slides[pageNum - 1].getFirst('a').getFirst('h4').get('text')
                }).addEvent('click', function() {
                    this.navigate(arguments[0]);
                    this.pause();
                } .pass(pageNum, this))
            );
        }
    },
    makenavigation: function() {

        this.PrevBtn = new Element(this.options.pagerItemType, { 'html': '<img src="/upload/images/TemplateResources/images/buttons/control_rewind_blue.png"/>' });
        this.PrevBtn.addEvent('click', function() { this.prev(); } .bind(this));

        this.PauseBtn = new Element(this.options.pagerItemType, { 'html': '<img src="/upload/images/TemplateResources/images/buttons/control_pause_blue.png"/>' });
        this.PauseBtn.addEvent('click', function() { this.pause(); } .bind(this));

        this.PlayBtn = new Element(this.options.pagerItemType, { 'html': '<img src="/upload/images/TemplateResources/images/buttons/control_play_blue.png"/>' });
        this.PlayBtn.addEvent('click', function() { this.play(); } .bind(this));

        this.NextBtn = new Element(this.options.pagerItemType, { 'html': '<img src="/upload/images/TemplateResources/images/buttons/control_fastforward_blue.png"/>' });
        this.NextBtn.addEvent('click', function() { this.next(); } .bind(this));

        this.Pager.adopt(this.PrevBtn);
        this.Pager.adopt(this.PlayBtn);
        this.Pager.adopt(this.PauseBtn);
        this.Pager.adopt(this.NextBtn);

    },
    pause: function() {
        clearInterval(this.timer);
        this.PlayBtn.set('styles', { display: 'block' });
        this.PauseBtn.set('styles', { display: 'none' });
    },
    play: function() {
        this.navigate(this.CurrentPage);
        this.timer = this.next.periodical(this.options.autoScrollWait, this);
        this.PlayBtn.set('styles', { display: 'none' });
        this.PauseBtn.set('styles', { display: 'block' });
    },
    next: function() {
        if (this.CurrentPage < this.PageCount)
            this.CurrentPage += 1;
        else
            this.CurrentPage = 1;
        this.navigate(this.CurrentPage);
    },
    prev: function() {
        if (this.CurrentPage > 1)
            this.CurrentPage -= 1;
        else
            this.CurrentPage = this.PageCount;
        this.navigate(this.CurrentPage);
    },
    navigate: function(page) {
        this.Pager.getElements(this.options.pagerItemType).each(function(item) {
            if (item.innerHTML != page) {
                item.removeClass(this.options.selectedPagerItemClass);
            } else {
                item.addClass(this.options.selectedPagerItemClass);
            }
        } .bind(this));
        this.Fx.start(0, this.SlideHeight * (page - 1));
        this.CurrentPage = page;
    }

});
