ImageSlider = Class.create({
    initialize: function(container, images, idx, imgCallback, clickCallback) {
        if (!images.length) throw 'Invalid argument images.';

        this.container = container = $(container);
        this.images = [];
        this.scrollOffset = 125;
        this._imgCallback = (imgCallback) ? imgCallback : Prototype.emptyFunction;
        this._clickCallback = (clickCallback) ? clickCallback : Prototype.emptyFunction;

        // create slider div
        var slider = this.slider = document.createElement('div');
        Element.addClassName(slider, 'image_slider');
        Element.setStyle(slider, { position: 'relative', 
            left: (- 10 - this.scrollOffset) + 'px', width: '500px'});
        $A(container.childNodes).each(function(e) { e.parentNode.removeChild(e); });
        container.appendChild(slider);

        // add images divs inside slider
        var i, imdiv, imlen = images.length;

        if (imlen <= 2) {
            this.emptyRight = this.emptyLeft = true;
            images.unshift('');
            while (images.length < 4) images.push('');
        } else if (imlen == 3) {
            if (idx == 0) {
                this.emptyLeft = true;
                this.emptyRight = false;
                images.unshift('');
            } else {
                this.emptyLeft = false;
                this.emptyRight = true;
                images.push('');
            }
        } else {
            this.emptyRight = this.emptyLeft = false;
        }

        for (i = 0; i < 4; i++) {
            if (images[i] == '') continue;
            this.images.push(images[i]);
            imdiv = this._makeImgDiv(images[i], 10 + i*this.scrollOffset);
            imdiv.addClassName('img');
            slider.appendChild(imdiv);
        }

    },

    _makeImgDiv: function(imgSrc, leftOffset) {
        var img, div;
        img = document.createElement('img');
        img.src = imgSrc;
        Element.setStyle(img, { border: 'none', cursor: 'pointer'});
        img.setAttribute('imagePath', imgSrc);
        img.observe('click', this._clickCallback);

        div = document.createElement('div');
        Element.addClassName(div, 'img');
        Element.setStyle(div, { position: 'absolute', padding: '3px', 
                margin: '5px', width: '100px', height: '100px', 
                'text-align' : 'center', 
                left: leftOffset + 'px' });
        div.appendChild(img);
        return div;
    },

    moveRight: function() {
        if (this.emptyRight) return;

        var first = this.slider.down('div.img', 0);
        var last  = this.slider.down('div.img', this.images.length-1);

        // remove first image if it is the "extra left image" before moving
        if (!this.emptyLeft) {
            first.parentNode.removeChild(first);
            this.images.shift();
        } else {
            // we will now have an "extra left image" after moving the
            // "current left" image to the "extra left" position
            this.emptyLeft = false;
        }

        // add element to the last, as reserve for the right image
        var newImg = this._imgCallback('right', this.images[this.images.length - 1]);
        if (newImg) {
            var offset = parseFloat(last.getStyle('left') || '0');
            var imdiv = this._makeImgDiv(newImg, offset + this.scrollOffset);
            this.images.push(newImg);
            this.slider.appendChild(imdiv);
        } else {
            this.emptyRight = true;
        }

        new Effect.Move(this.slider, { x: - this.scrollOffset, y: 0, mode: 'relative', duration: 0.5 });
    },

    moveLeft: function() {
        if (this.emptyLeft) return;

        var first = this.slider.down('div.img', 0);
        var last  = this.slider.down('div.img', this.images.length-1);

        // remove last image if it is the "extra right image" before moving
        if (!this.emptyRight) {
            last.parentNode.removeChild(last);
            this.images.pop();
        } else {
            this.emptyRight = false;
        }

        // add element to the last, as reserve for the right image
        var newImg = this._imgCallback('left', this.images[0]);
        if (newImg) {
            var offset = parseFloat(first.getStyle('left') || '0');
            var imdiv = this._makeImgDiv(newImg, offset - this.scrollOffset);
            this.images.unshift(newImg);
            this.slider.insertBefore(imdiv, first);
        } else {
            this.emptyLeft = true;
        }

        new Effect.Move(this.slider, { x: this.scrollOffset, y: 0, mode: 'relative', duration: 0.5});
    }
});