// JavaScript Document
function ImageViewer(name, imageSetName, image_arr, t, l, w, h, elementID){
	this.name=name;
	this.imageSetName = imageSetName;
	this.image_arr = image_arr;
	this.currentImageIndex = 0;
	this.rect = {top:t, left:l, right:l+w, bottom:t+h};
	this.height = h;
	this.width = w;
	this.thumbnail_arr = new Array();
	for (var i=1;i<this.image_arr.length;i++){
		this.thumbnail_arr.push(i);
	}
	if (elementID!=null){
		this.elementID = elementID;
		//document.getElementById(elementID).style.top = t.toString()+'px';
		//document.getElementById(elementID).style.left = l.toString()+'px';
		//document.getElementById(elementID).style.width = w.toString()+'px';
		//document.getElementById(elementID).style.height = h.toString()+'px';
		
	}else{
		this.elementID = "imageViewer";
		document.write("<div id='"+elementID+"' style='position:absolute; top:"+t+"px; left:"+l+"px; width:"+w+"px; height:"+h+"px'></div>");
	}
}
//
ImageViewer.prototype.getViewerHTML = function(){
	//label
	var labelHeight = 0;// 40;
	viewerLabelHTML = "";//"<div id='viewerLabel' style='position:absolute; top:0px; left:0px; width:20%; height:"+labelHeight+"px'>"+this.imageSetName+" images:</div>";
	//thumbnails
	var thumbnailBoxHTML = "";
	var thumbnailBoxHTMLWidth = 0;
	if (this.image_arr.length >1){
		thumbnailBoxHTMLWidth =20;
		thumbnailBoxHTML = "<div id='thumbnailBox'style='position:absolute; top:0px; left:0px; width:"+thumbnailBoxHTMLWidth+"%'>";
		var tnNum = 0;
		for (var i=0;i<this.image_arr.length;i++){
			if (i!=this.currentImageIndex){
			onclickFunction = this.name+".onThumbnailClick("+tnNum+")";	
			thumbnailBoxHTML  +="<div id='thumbnail"+tnNum+"' onclick='"+onclickFunction+"' style='position:relative; top:"+(tnNum*10)+"px'><img src='"+this.image_arr[i].imagePath+this.image_arr[i].imageThumbnail+"'/></div>";
			tnNum++;
			}
		}
		thumbnailBoxHTML+="</div>";
	}

	//image
	var imageBoxHTML = "<div id='imageBox'  style='position:absolute; top:0px; left:"+thumbnailBoxHTMLWidth+"%;'>";
	imageBoxHTML+= "<div id='image'><img src='"+this.image_arr[this.currentImageIndex].imagePath+this.image_arr[this.currentImageIndex].imageFilename+"'/></div>";
	imageBoxHTML+= "<div id='caption'style='position:relative; top:10px'>"+this.image_arr[this.currentImageIndex].caption+"</div>";
	imageBoxHTML+="</div>";
	return viewerLabelHTML+thumbnailBoxHTML+imageBoxHTML;
}
//
ImageViewer.prototype.buildViewer = function(){
	document.getElementById(this.elementID).innerHTML = this.getViewerHTML();
}
//
ImageViewer.prototype.onThumbnailClick = function(thumbnailIndex){
	var imageIndex = this.thumbnail_arr[thumbnailIndex];
	this.thumbnail_arr[thumbnailIndex] = this.currentImageIndex;
	
	document.getElementById("thumbnail"+thumbnailIndex).innerHTML = "<img src='"+this.image_arr[this.currentImageIndex].imagePath+this.image_arr[this.currentImageIndex].imageThumbnail+"'/>";
	//var onclickFunction = this.name+".onThumbnailClick("+this.currentImageIndex+", "+thumbnailIndex+")";
	
	this.currentImageIndex = imageIndex;
	document.getElementById('image').innerHTML = "<img src='"+this.image_arr[this.currentImageIndex].imagePath+this.image_arr[this.currentImageIndex].imageFilename+"'/>";
	document.getElementById('caption').innerHTML = this.image_arr[this.currentImageIndex].caption;
	//document.getElementById('caption').style.top = (document.getElementById('image').offsetHeight +10).toString()+'px';
	document.getElementById('caption').style.width = (document.getElementById('image').offsetWidth).toString()+'px';
}