function Viewer() {
	  this.imgDir;
	  this.fileNames;
	  this.captions;
	  this.credits;
	  this.currentIndex = 0;
	  this.imageId    = 'currentImg';
	  this.arrowsId   = 'arrows';
	  this.fileNameId = 'fileName';
	  this.captionId  = 'caption';
	  this.creditId   = 'credit';
	  
    this.showPrev = function() {
        if (--this.currentIndex < 0) {
            this.currentIndex = this.fileNames.length - 1;
        }
        this.showPic();
    }
    this.showNext = function() {
        if (++this.currentIndex > this.fileNames.length - 1) {
            this.currentIndex = 0;
        }
        this.showPic();
          
        // preload next image
        //if (this.currentIndex < this.fileNames.length - 1) {
        //	  var tmp = new Image();
        //    tmp.src = imgDir + "/" + this.fileNames[this.currentIndex];
        //}
    }
    this.showPic = function(index) {
    	  if (index != undefined) {
    	  	  this.currentIndex = index;
    	  }
        //console.log("index=" + this.currentIndex);
    	  
    	  // 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.imageId);
        
        // 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.currentIndex];
        
        // set the file name
        var fileNameElm = document.getElementById(this.fileNameId);
        if (fileNameElm) {fileNameElm.innerHTML = this.fileNames[this.currentIndex];}
        
        // set the caption
        if (this.captions && this.captions[this.currentIndex] != undefined) {
            var captionElm = document.getElementById(this.captionId);
            if (captionElm) {captionElm.innerHTML = this.captions[this.currentIndex];}
        }
        
        // set the credit
        if (this.credits && this.credits[this.currentIndex] != undefined) {
            var creditElm = document.getElementById(this.creditId);
            if (creditElm) {creditElm.innerHTML = 'Photo by ' + this.credits[this.currentIndex];}
        }
    }
}