Slideshow = new Class({
    initialize: function(image_arr) {
        this.container = $('slideshow');
        this.image_arr = [];
        this.active = 0;
        this.next = null;
        this.preload_counter = 0;

        var thisObject = this;
        for (var i = 0; i < image_arr.length; i++) {
            var image = new Asset.image(image_arr[i], {
                onload: function() {
                    thisObject.onImageLoad();
                }
            });

            image.injectInside(this.container);
            image.setStyle('z-index', 10);

            var fx = new Fx.Style(image, 'opacity', {
                duration: 800,
                onComplete: function() {
                    thisObject.onFxComplete();
                }
            });

            this.image_arr.push({image:image, fx: fx});

            if (i == 0) {
                image.setStyle('z-index', 200);
            }
        }
    },

    animate: function() {    
        if ((this.active + 1) < this.image_arr.length) {
            this.next = this.active + 1;
        } else {
            this.next = 0;
        }

        this.image_arr[this.next].image.setStyles({
            zIndex: 100,
            opacity: 1
        });
        this.image_arr[this.active].fx.start(1.0, 0);
    },

    onFxComplete: function() {
        this.image_arr[this.active].image.setStyle('z-index', 10);

        this.active = this.next;
        this.image_arr[this.active].image.setStyle('z-index', 200);
    },

    onImageLoad: function() {
        this.preload_counter++;

        if ((this.preload_counter == this.image_arr.length) && (this.image_arr.length > 1)) {
            var thisObject = this;
            this.animate.periodical(4000, thisObject);
        }
    }
});