var ImageSlider = Class.create({
    initialize: function(el, images, opts) {
        this.el = $(el);
        this.images = images;
        this.options = Object.extend({
            path : "",
            duration : 1.0,
            interval : 5.0
        },opts||{});

        this.loadCounter = 0;
        this.showCounter = 0;
        this.numImages = this.images.length;
        this._loadImages();
    },
    _loadImages : function() {
        if ( this.numImages == this.loadCounter ) {
            var interval = Math.round(this.options.interval * 1000);
            setInterval(this._showNextImage.bind(this), interval);
            return;
        }
        var i = new Image();
        i.onload = function() {
            this.loadCounter++;
            this._loadImages();
        }.bind(this);
        i.src = this.options.path + this.images[this.loadCounter];
    },
    _showNextImage : function() {
        this.showCounter++;
        this.showCounter = this.showCounter % this.numImages;
        var src = this.options.path + this.images[this.showCounter];
        //this.el.fade({ duration: 1.0, from: 0, to: 1, queue: { position: 'end', scope: 'images_scope' } });
        this.el.hide();
        //this.el.style.background = "transparent url('" + src + "') center center no-repeat";
        this.el.style.backgroundImage = "url('" + src + "')";
        this.el.appear({ duration: this.options.duration, queue: { position: 'end', scope: 'slider_scope', limit: 2 } });
    }
});