﻿top_carousel = Class.create(Abstract, {
    initialize: function (element, options) {
        _self = this;
        this.options = Object.extend({
            container: $(element),                    //id only
            startSlide: 0,
            currentSlide: 0,
            slideTotalContainer: null,
            currentSlideContainer: null,
            slides: $(element).childElements().toArray() || null,
            numberOfSlides: $(element).childElements().size() || null,
            positionOfAd: (!$(element).down('.ad')) ? null : $(element).down('.ad').previousSiblings().size(),
            numberOfAds: (!$(element).down('.ad')) ? 0 : $(element).select('.ad').size(),
            speed: 8000,
            isMoving: true,                            //id only
            nextArrow: null,                           //id only
            prevArrow: null,                           //id only
            pauseButton: null,                         //id only
            hiddenAd: false,
            slidePositions: new Array(),
            sliderPositions: new Array(),
            slider: false
        }, options);

        if (this.options.hiddenAd == false) {
            this.options.slides.each(function (e, index) {
                _self.options.slidePositions.push(index);
            })
        } else {
            this.options.slides.each(function (e, index) {
                if (e.className != 'ad') {
                    _self.options.slidePositions.push(index);
                }
            })
        }

        _self.options.sliderPositions = _self.options.slidePositions.clone();

        if (this.options.slider == true) {
            _self.options.container.up().down('ul').select('li a').each(function (e, index) {
                e.observe('mouseover', function (event) {
                    _self.hoverSliderMove(index)
                })
            })
        }

        //hover pause
        if (this.options.container) {
            this.options.container.observe('mouseout', function (e) {
                if (Position.within(_self.options.container, Event.pointerX(e), Event.pointerY(e))) {
                    //inside
                    _self.hoverPause();
                }
            });
        }
        if (this.options.slideTotalContainer) $(this.options.slideTotalContainer).innerHTML = (this.options.numberOfSlides);
        if (this.options.currentSlideContainer) $(this.options.currentSlideContainer).innerHTML = this.options.currentSlide;
        if (this.options.nextArrow) $(this.options.nextArrow).observe('click', function () { (_self.options.slider) ? _self.changeSlider('next') : _self.move('next'); });
        if (this.options.prevArrow) $(this.options.prevArrow).observe('click', function () { (_self.options.slider) ? _self.changeSlider('prev') : _self.move('prev'); });
        if (this.options.pauseButton) $(this.options.pauseButton).observe('click', function () { _self.pause() });

        this.start();

    },

    start: function () {
        if (!this.timer) {
            this.timer = setTimeout(this.start.bind(this), this.options.speed);
        } else {
            if (this.options.isMoving == true) {
                this.move();
                this.timer = setTimeout(this.start.bind(this), this.options.speed);
            }
        }
    },

    reset: function () {
        this.stop();
        this.timer = setTimeout(this.start.bind(this), this.options.speed);
    },

    pause: function () {
        if (this.options.isMoving == true) {
            this.stop();
            this.options.isMoving = false;
            $(this.options.pauseButton).addClassName('active');
        } else {
            this.options.isMoving = true;
            this.reset()
            $(this.options.pauseButton).removeClassName('active');
        }
    },


    hoverPause: function () {
        this.stop();
        this.options.isMoving = false;
        $(this.options.pauseButton).addClassName('active');
    },

    stop: function () {
        clearTimeout(this.timer);
        this.timer = null;
    },

    changeSlider: function (direction) {
        if (this.options.slider == true) {
            moveWidth = (_self.options.container.up().down('ul').getWidth() / (_self.options.numberOfSlides - _self.options.numberOfAds));
            if (_self.slidemove) { _self.slidemove.cancel() }
            if (_self.options.container.up().down('ul').getStyle('margin-left') == '0px') {
                _self.slidemove = new Effect.Morph(_self.options.container.up().down('ul'), {
                    style: 'margin-left:-' + moveWidth + 'px;', // CSS Properties
                    duration: 0.5 // Core Effect properties
                });
            } else {
                _self.slidemove = new Effect.Morph(_self.options.container.up().down('ul'), {
                    style: 'margin-left:0px;', // CSS Properties
                    duration: 0.5 // Core Effect properties
                });
            }
        }

    },

    hoverSliderMove: function (index) {
        this.reset();
        _self.options.slidePositions.sort()
        for (i = 0; i < index; i++) {
            _self.options.slidePositions.push(_self.options.slidePositions.shift())
        }
        _self.cycle(_self.options.slidePositions[0])
        _self.options.startSlide = _self.options.slidePositions[0]
        _self.activeSlide();
    },

    activeSlide: function () {
        if (this.options.slider == true) {
            this.options.container.up().down('ul').select('li').each(function (e, index) {
                if (index == _self.options.sliderPositions.indexOf(_self.options.startSlide)) {
                    e.addClassName('active');
                } else {
                    e.removeClassName('active');
                }
            })
        }
    },

    move: function (direction) {
        this.reset();

        if (direction) {
            if (direction == 'next') {
                _self.options.slidePositions.push(_self.options.slidePositions.shift())
                this.cycle(_self.options.slidePositions[0])
                this.options.startSlide = _self.options.slidePositions[0]
            } else if (direction == 'prev') {
                _self.options.slidePositions.unshift(_self.options.slidePositions.pop())
                this.cycle(_self.options.slidePositions[0])
                this.options.startSlide = _self.options.slidePositions[0]
            }
        } else {
            if (this.options.startSlide != (this.options.positionOfAd - 1)) {
                _self.options.slidePositions.push(_self.options.slidePositions.shift())
            }

            if (this.options.startSlide == (this.options.numberOfSlides - 1)) {
                this.cycle(0)
                this.options.startSlide = 0;
            } else {
                this.cycle(this.options.startSlide + 1)
                this.options.startSlide++;
            }

        }

        this.activeSlide();
        this.changeNumber(direction);
    },

    changeNumber: function (direction) {
        if (this.options.currentSlideContainer) {
            $(this.options.currentSlideContainer).update(this.options.startSlide);
        }
    },

    cycle: function (slide) {
        if (slide == null) { slide = (_self.options.startSlide) }
        this.options.slides.each(function (e, index) {
            if (index == slide) {
                e.show();
            } else {
                e.hide();
            }
        })
    }
})

document.observe("dom:loaded", function () {
    var top = new top_carousel('rotator', {
        name: 'test1',               
        nextArrow: 'right-arrow',
        prevArrow: 'left-arrow',
        pauseButton: 'pause-button',
        hiddenAd: true,
        slider: true
    });
})

toprotator = Class.create({
    initialize: function (slides, hovers, hideHoversOnAd) {
        if (slides) this.slides = $$(slides)[0].childElements() || null;
        this.adpointer = function () { if ($$(slides + ' .ad')[0]) { pointer = $$(slides + ' .ad')[0].previousSiblings().size() } else { pointer = 99 }; return pointer }
        this.currentSlide = 0;
        this.currentHover = 0;
        this.speed = 8000;
        this.isTurning = true;
        this.hoverContainer = $$(hovers)[0];
        if (hovers) {
            this.hovers = $$(hovers + " > *");
            var self = this;
            this.hovers.each(function (e, index) { e.observe('mouseover', function () { self.hoverMove(index) }); e.observe('mouseout', function () { self.isTurning = true; self.timer = setTimeout(self.start.bind(self), self.speed); }) });
        }
        if (hideHoversOnAd) { this.hideHovers = hideHoversOnAd } else { this.hideHovers = false }
        this.start();
    },
    nextSlide: function () {
        nextSlide = this.currentSlide += 1;
        if (nextSlide + 1 > this.slides.size()) { nextSlide = 0 }
        this.currentSlide = nextSlide;

        if (nextSlide != this.adpointer()) {
            this.currentHover += 1
            if (this.currentHover > this.hovers.size() - 1) { this.currentHover = 0 }
        }
        return nextSlide;
    },
    rotate: function () {
        var self = this;
        if (this.slides) {
            var nextSlide = this.nextSlide();
            this.slides.each(function (e, index) {
                if (index == nextSlide) { e.setStyle({ 'display': 'block' }); } else { e.setStyle({ 'display': 'none' }) }
            })
        }
    },
    changeHover: function () {
        var self = this;
        if (self.hideHovers == true) {
            if (!self.hoverContainer.visible()) { self.hoverContainer.show() }
        }
        if (self.hovers) {
            self.hovers.each(function (e, index) {
                if (index == self.currentHover && self.currentSlide != self.adpointer()) { e.addClassName('active') } else { e.removeClassName('active'); if (self.hideHovers == true && self.currentSlide == self.adpointer()) { self.hoverContainer.hide(); } }
            })
        }
    },
    hoverMove: function (hover) {
        var self = this;
        self.stop();
        self.hovers.each(function (e) { e.removeClassName('active') });
        if (hover >= self.adpointer()) {
            self.currentSlide = hover;
        } else {
            self.currentSlide = hover - 1;
        }
        self.rotate();
        self.hovers[hover].addClassName('active')
        self.currentHover = hover;
    },
    move: function () {
        this.rotate();
        this.changeHover()
    },
    start: function () {
        if (this.timer != null) {
            if (this.isTurning == true) {
                this.move();

            }
        }
        this.timer = setTimeout(this.start.bind(this), this.speed);
    },
    stop: function () {
        clearTimeout(this.timer);
        this.isTurning = false;
    }

});

//document.observe("dom:loaded", function () {
//    var car1 = new toprotator('.carousel-slides', '.top-story-list', false);
//});
