var ImageLister = Class.create();

ImageLister.prototype = {

    initialize: function (id, images, labelId, loadingId, basePath) {

        this.target   = $(id);
        this.images   = images; 

        this.loading  =  loadingId ? $(loadingId) :  false;
        this.label    =  labelId   ? $(labelId)   :  false;
        this.basePath =  basePath  ? basePath     :  '';

        this.cnt      = 0;
        this.first    = 0;
        this.last     = this.images.size() -1;
    },
 

    onloaded: function () {
        this.loading.hide();
    },
        
    showImage: function (a) {

        if (this.loading) {
            this.loading.show();
        }
        if (this.label) {
            this.label.innerHTML = this.cnt+1;
        }        
        
        this.target.src = this.basePath + this.images[this.cnt];
        
        if (this.loading) {
            this.target.onload = this.onloaded.bind(this);
        }

    },
    
    
    next: function () {
        this.cnt ++;
        if (this.cnt > this.last) this.cnt = this.first;
        this.showImage();
    },
    
    prev: function () {
        this.cnt --;
        if (this.cnt < this.first) this.cnt = this.last;
        this.showImage();
    }
    
    

}