//  AutoScroller 1.0
//
var AutoScroller = Class.create(
{
    initialize: function(container, options) {
        this.container = $(container);
        this.containerWidth = this.container.getWidth();
        this.options = Object.extend({ delay: 3, duration: 0.5, autoStart: true }, options);
        this.counter = 0;
        this.delay = this.options.delay * 1000;
        this.elements = this.container.childElements();
        this.container.setStyle({ overflow: 'hidden', position: 'relative' });
        this.elements.each(function(el, i) {
            if (i == 0) {
                el.setStyle({ position: 'absolute', top: 0, left: 0 });
            } else {
                el.setStyle({ position: 'absolute', top: 0, left: this.containerWidth + 'px' });
            }
        } .bind(this));

        this.isPaused = false;
        this.update();
    },
    update: function() {
        if (this.elements.length > 1 && this.isPaused == false) {
            if (this.options.controls) this.addControls();
            if (this.options.autoStart == true) {
                if (this.timer != null) {
                    clearTimeout(this.timer);
                    this.start();
                }
                this.timer = setTimeout(this.update.bind(this), this.delay);
                this.isPaused = false;
            }
        }
    },
    start: function() {
        this.next();
    },
    pause: function(globalPause) {
        clearInterval(this.timer);
        this.timer = null;
        if (globalPause) this.isPaused = true;
    },
    play: function() {
        this.isPaused = false;
        this.update();
    },
    addControls: function() {
        var ul = new Element('ul');

        // Previous Button
        ul.insert(
            new Element('li').addClassName('previous').insert(
                new Element('a', { href: 'javascript:void(0);' })
                    .update('Previous')
                    .observe('click', this.goToPrevious.bind(this))
            )
        );

        // Pause/Play Button
        ul.insert(
          new Element('li').addClassName('pausePlay').insert(
            new Element('a', { href: 'javascript:void(0);' })
                .update('Pause')
                .observe('click', function(e) {
                    var element = Event.element(e);
                    if (element.hasClassName('paused')) {
                        element.update('Paused');
                        this.play();
                        element.removeClassName('paused');
                    } else {
                        element.update('Play');
                        this.pause(true);
                        element.addClassName('paused');
                    }
                } .bind(this))
          )
        );

        this.elements.each(function(el, i) {
            ul.insert(
                new Element('li').addClassName('pager').insert(
                    new Element('a', { href: 'javascript:void(0);' })
                        .update(i + 1)
                        .observe('click', this.goTo.bind(this, i))
                )
            );
        } .bind(this));

        // Previous Button
        ul.insert(
            new Element('li').addClassName('next').insert(
                new Element('a', { href: 'javascript:void(0);' })
                    .update('Next')
                    .observe('click', this.goToNext.bind(this))
            )
        );

        $(this.options.controls).update(ul);
    },
    goTo: function(i) {
        //this.pause();
        this.goToIndex(i);
    },
    goToPrevious: function() {
        //this.pause();
        this.previous();
        //this.update();
    },
    goToNext: function() {
        //this.pause();
        this.next();
        //this.update();
    },
    previous: function() {
        var currentElement = this.elements[this.counter];
        var container = this.container;
        var containerWidth = this.containerWidth;
        var previousElement = this.getPreviousElement();

        new Effect.Move(currentElement,
        {
            x: containerWidth,
            duration: this.options.duration
        });
        new Effect.Move(previousElement, {
            x: containerWidth,
            beforeStart: function() {
                previousElement.setStyle({ left: -(containerWidth) + 'px' });
            }, duration: this.options.duration
        });

        if (this.counter == 0) {
            this.counter = this.elements.length - 1;
        } else {
            this.counter--;
        }
    },
    next: function() {
        var currentElement = this.elements[this.counter];
        var container = this.container;
        var containerWidth = this.containerWidth;

        new Effect.Move(currentElement,
        {
            x: -(containerWidth),
            duration: this.options.duration,
            afterFinish: function() {
                currentElement.setStyle({ left: containerWidth + 'px' });
            }
        });
        new Effect.Move(this.getNextElement(),
        {
            x: -(containerWidth),
            duration: this.options.duration
        });
        if (this.counter == (this.elements.length - 1)) {
            this.counter = 0;
        } else {
            this.counter++;
        }
    },
    goToIndex: function(i) {
        if (this.counter != i) {
            var currentElement = this.elements[this.counter];
            var container = this.container;
            var containerWidth = this.containerWidth;

            new Effect.Move(currentElement,
            {
                x: -(containerWidth),
                duration: this.options.duration,
                afterFinish: function() {
                    currentElement.setStyle({ left: containerWidth + 'px' });
                }
            });
            new Effect.Move(this.elements[i],
            {
                x: -(containerWidth),
                duration: this.options.duration
            });
            this.counter = i;
        }
    },
    getPreviousElement: function() {
        if (this.elements[this.counter - 1]) return this.elements[this.counter - 1];
        return this.elements[this.elements.length - 1];
    },
    getNextElement: function() {
        if (this.elements[this.counter + 1]) return this.elements[this.counter + 1];
        return this.elements[0];
    }
});