var _slideshows = new Array();

var SlideShow = new Class({

    initialize: function(element) {
        this.container = element;
        this.canvas = this.container.getElement('.canvas');
        this.left_arrow = this.container.getElement('.left-arrow');
        this.right_arrow = this.container.getElement('.right-arrow');

        this.canvas_width = this.canvas.getStyle('width').toInt();
        this.wrapper_width = this.container.getElement('.wrapper').getStyle('width').toInt();
        this.image_width = this.canvas.getElement('.column').getStyle('width').toInt();
        this.max_index = Math.ceil((this.canvas_width - this.wrapper_width) / this.image_width);

        if (this.left_arrow) {
            this.left_arrow.addEvent('click', function(e) {
                this.scroll_left();
            }.bind(this));
        }
        if (this.right_arrow) {
            this.right_arrow.addEvent('click', function(e) {
                this.scroll_right();
            }.bind(this));
        }

        this.period = null;
        this.start();
    },

    start: function() {
        this.period = this.scroll_right.bind(this).pass(true).periodical(5000);
    },

    stop: function() {
        this.period = $clear(this.period);
    },

    scroll_right: function() {
        var periodical = arguments[0];
        if (!periodical && this.period != null) {
            this.stop();
        }
        var current = Math.floor(Math.abs(this.canvas.getStyle('left').toInt() / this.image_width));
        if (current < this.max_index) {
            current++;
            this.canvas.tween('left', -(current * this.image_width));
            if (current == this.max_index) {
                if (this.right_arrow) {
                    this.right_arrow.setStyle('display', 'none');
                }
                if (this.period != null) {
                    this.stop();
                    this.go_to.bind(this).pass(0).delay(5000);
                    if (this.repeat) {
                        this.start.bind(this).delay(5000);
                    }
                }
            }
            if (current > 0 && this.left_arrow) {
                this.left_arrow.setStyle('display', 'block');
            }
        }
    },

    scroll_left: function() {
        var periodical = arguments[0];
        if (!periodical && this.period != null) {
            this.stop();
        }
        var current = Math.floor(Math.abs(this.canvas.getStyle('left').toInt() / this.image_width));
        if (current > 0) {
            current--;
            this.canvas.tween('left', -(current * this.image_width));
            if (current < this.max_index && this.right_arrow) {
                this.right_arrow.setStyle('display', 'block');
            }
            if (current == 0 && this.left_arrow) {
                this.left_arrow.setStyle('display', 'none');
            }
        }
    },

    go_to: function(pos) {
        this.canvas.tween('left', -(pos * this.image_width));
        this.stop();
    }

});

var setup_slideshows = function() {
    $$('.slideshow').each(function(e) {
        _slideshows[e.get('id')] = new SlideShow(e);
    });
}

window.addEvent('domready', setup_slideshows);