function Viewer() {
	  this.imgDir;
	  this.fileNames;
	  this.imgIndex;
	  this.imgDiv     = 'currentImg';
	  this.arrowsId   = 'arrows';
	  this.fileNameId = 'fileName';
	  
    this.showPrev = function() {
        if (--this.imgIndex < 0) {
            this.imgIndex = this.fileNames.length - 1;
        }
        this.showPic(this.fileNames[this.imgIndex]);
    }
    this.showNext = function() {
        if (++this.imgIndex > this.fileNames.length - 1) {
            this.imgIndex = 0;
        }
        this.showPic(this.fileNames[this.imgIndex]);
          
        // preload next image
        //if (this.imgIndex < this.fileNames.length - 1) {
        //	  var tmp = new Image();
        //    tmp.src = imgDir + "/" + this.fileNames[this.imgIndex];
        //}
    }
    this.showPic = function() {
    	  // set a 'wait' cursor and hide the arrows
        document.body.style.cursor = 'wait';
        var arrowsElm = document.getElementById(this.arrowsId);
        arrowsElm.style.display = "none";
        
        // get the img element
        var img = document.getElementById(this.imgDiv);
        
        // set an 'onload' function on the img element so as to
        // change the cursor back to default and redisplay the arrows
        img.onload = function() {
            document.body.style.cursor = 'default';
            arrowsElm.style.display = "";
        };
        
        // load the image
        img.src = this.imgDir + "/" + this.fileNames[this.imgIndex];
        
        // set the image name
        var fileNameElm = document.getElementById(this.fileNameId);
        if (fileNameElm) {fileNameElm.innerHTML = this.fileNames[this.imgIndex];}
    }
}