function createViewer(basedir, images, comments)
{
	v = new Viewer(basedir, images, comments);
}

function Viewer(basedir, images, comments)
{
	this.images = images;
	this.comments = comments;
	this.imagebase = basedir;
	this.index = 0;
	this.setupHtml();
	this.showImage(this.index);
}

Viewer.prototype.setupHtml = function()
{
	document.writeln("<form name=\"form1\" method=\"post\" action=\"\">");
	document.writeln("<div align=\"center\">");
	document.writeln("<img src=\"/logos/vor.jpg\" onclick=\"v.showPrevious()\">");
	document.writeln("&nbsp;&nbsp;<span id=\"indexCanvas\">&nbsp;</span>&nbsp;&nbsp;");
	document.writeln("<img src=\"/logos/vol.jpg\" onclick=\"v.showNext()\">");
	document.writeln("<table border=\"1\" cellspacing=\"4\" cellpadding=\"3\">");
	document.writeln("<tr>");
	document.writeln("<td>");
	document.writeln("<img id=\"imageCanvas\" align=\"center\"><br>");
	document.writeln("<div id=\"commentCanvas\" align=\"center\">&nbsp;</div>");
	document.writeln("</td>");
	document.writeln("</tr>");
	document.writeln("</table>");
	document.writeln("</div>");
	document.writeln("</form>");
}

Viewer.prototype.showPrevious = function()
{
	this.index--;
	if (this.index < 0) this.index = this.images.length-1;
	this.showImage(this.index);
}

Viewer.prototype.showNext = function()
{
	this.index++;
	if (this.index >= this.images.length) this.index = 0;
	this.showImage(this.index);
}

Viewer.prototype.showImage = function(index)
{
	var imageHolder = document.getElementById("imageCanvas");
	imageHolder.setAttribute("src", this.imagebase + "/" + this.images[index]);
	var commentHolder = document.getElementById("commentCanvas");
	commentHolder.removeChild(commentHolder.firstChild);
	var newComment = (this.comments != null && index < this.comments.length)
		? this.comments[index] : this.images[index];
	commentHolder.appendChild(document.createTextNode(newComment));
	var indexHolder = document.getElementById("indexCanvas");
	indexHolder.removeChild(indexHolder.firstChild);
	indexHolder.appendChild(document.createTextNode(''+(index+1)+'/'+this.images.length));
}