var Images = Class.create({

    data: null,
    iterator: null,
    container: null,

    next: null,
    prev: null,
    img: null,
    title: null,

    initialize: function(containerId, data, iterator) {

        this.container = $(containerId);
        if (this.container) {
            this.data = data.evalJSON(true);
            this.iterator = iterator;
            
            this.next = $$('#' + containerId + ' a.next').first();
            this.prev = $$('#' + containerId + ' a.previous').first();
            this.img = $$('#' + containerId + ' img').first();
            this.title = $$('#' + containerId + ' div.info').first();

            this.next.observe('click', function(event) {
                Event.stop(event);
                this.iterator++;
                this.update(this.iterator);
            }.bind(this));
            this.prev.observe('click', function(event) {
                Event.stop(event);
                this.iterator--;
                this.update(this.iterator);
            }.bind(this));

        }
    },

    update: function(iterator) {
        var i = Math.abs(iterator % this.data.length);
        if (this.img && this.title) {
            this.title.innerHTML = this.data[i].name;
            this.img.src = this.data[i].img;
        }
    }
});