// JavaScript Document
// Thumbnail Manager

function ThumbnailManager(name, containerID, thumbnail_arr, thumbnailWidth, t,l,w,h ){
	this.name = name;
	this.thumbnail_arr = (thumbnail_arr==null)? new Array():thumbnail_arr;
	this.displayedTN_arr = thumbnail_arr;
	this.selectedTNname = "";
	this.rolloverTNname = "";
	this.thumbnailWidth = thumbnailWidth;
	this.containerID = containerID;
	this.containerWidth = w;//document.getElementById(containerID).style.width;//move to layout function?
	this.listener_arr = new Array();
	
	//document.write("<div id='"+this.containerID+"' style='position:absolute; top:"+t+"px; left:"+l+"px; height:"+h+"px; width:"+w+"px; z-index:1'></div>");
	//document.write("<div id='"+this.containerID+"' style='position:absolute; top:"+t+"px; left:"+l+"px; height:"+h+"px; width:100%; z-index:1'></div>");
}

ThumbnailManager.prototype.addListener = function(listener){
	this.listener_arr.push(listener);	
}
//
ThumbnailManager.prototype.removeListener = function(listener){
	//listener_arr.pop(listener);	
}

ThumbnailManager.prototype.broadcastEvent = function(eventFunction, arg){
	for (var i = 0;i<this.listener_arr.length;i++){
		this.listener_arr[i].doEvent(eventFunction, arg);//should do this in a more elegent fashion
	}
}
//
ThumbnailManager.prototype.addThumbnail = function(thumbnailName, thumbnailDivID, labelDivID, thumbnailLink, thumbnailFileName, thumbnailColor){
	if (this.getThumbnail(thumbnailName) == null){
		this.thumbnail_arr.push(new Thumbnail(thumbnailName, thumbnailDivID, labelDivID, thumbnailLink, thumbnailFileName, thumbnailColor));
	}
}
//
ThumbnailManager.prototype.getThumbnail = function(thumbnailName){
	for (var i=0;i<this.thumbnail_arr.length;i++){
		if(thumbnailName==this.thumbnail_arr[i].name){
			return this.thumbnail_arr[i];
		}
	}
	return null;
}
//
ThumbnailManager.prototype.getThumbnailPos = function(thumbnailName){
	for (var i=0;i<this.displayedTN_arr.length;i++){
	if(thumbnailName==this.displayedTN_arr[i].name){
			return i;
		}
	}
	return -1;
}
//
ThumbnailManager.prototype.getSelectedThumbnail=function(){
	return this.selectedTNname;
}
//
ThumbnailManager.prototype.onThumbnailRollover = function(thumbnailPos, thumbnailx, thumbnailName){
	//firstCheck to make sure it is a new rollover to prevent continual firing
	if (this.rolloverTNname!=thumbnailName){
		document.getElementById('debug').innerHTML ="onThumbnailRollover('"+thumbnailPos+"', '"+thumbnailx+"', '"+thumbnailName+"')"+document.getElementById('debug').innerHTML;
		this.rolloverTNname = thumbnailName;
		this.bringToFront(thumbnailPos, thumbnailx, thumbnailName);
		this.broadcastEvent("thumbnailRollover", thumbnailName);
	}
}
//
ThumbnailManager.prototype.onThumbnailRollout = function(thumbnailName){
	this.rolloverTNname="";
	window.setTimeout(this.name+".focusSelectedThumbnail('"+thumbnailName+"')", 100);
}
//
ThumbnailManager.prototype.onThumbnailClick = function(thumbnailName){
	document.getElementById('debug').innerHTML = "onThumbnailClick('"+thumbnailName+"') "+document.getElementById('debug').innerHTML;
	this.selectedTNname = thumbnailName;
	this.showThumbnailLabel(thumbnailName);
	this.broadcastEvent("thumbnailClicked", thumbnailName);
}
//

ThumbnailManager.prototype.focusThumbnail = function(thumbnailName){
	//get the position of the thumbnail
	thumbnailPos = this.getThumbnailPos(thumbnailName);
	if (thumbnailPos >=0){
		//get the x-coord of the thumbnail
		var thumbnailx = Number(document.getElementById(this.getThumbnail(thumbnailName).divID).style.left.match(/\d+/));
		this.bringToFront(thumbnailPos, thumbnailx, thumbnailName);
		this.broadcastEvent("thumbnailRollover", thumbnailName);//careful!!!!
	}
}
//
ThumbnailManager.prototype.focusSelectedThumbnail = function(){
	if (this.rolloverTNname==""&& this.selectedTNname != ""){
		this.focusThumbnail(this.selectedTNname);
	}
}
ThumbnailManager.prototype.bringToFront = function(thumbnailPos, thumbnailx, thumbnailName){
	this.layoutThumbnails(thumbnailPos, thumbnailx);
	this.showThumbnailLabel(thumbnailName);
}
//
ThumbnailManager.prototype.selectThumbnail = function(thumbnailName){
	this.selectedTNname = thumbnailName;
	this.focusSelectedThumbnail();
	this.broadcastEvent("thumbnailClicked", thumbnailName);//careful!!!!
}
//
ThumbnailManager.prototype.resetThumbnails = function(){
	this.selectedTNname = "";
	this.rolloverTNname = "";
	this.showThumbnails();
}
//
ThumbnailManager.prototype.showThumbnails = function(TNnames_arr){
	//document.getElementById('debug').innerHTML = TNnames_arr;
	if (TNnames_arr == null||TNnames_arr =="undefined"){
		this.displayedTN_arr = this.thumbnail_arr;
	}else{
		this.displayedTN_arr = new Array();
		for (var i =0;i<TNnames_arr.length;i++){
			var thumbnail = this.getThumbnail(TNnames_arr[i]);
			if (thumbnail !=null){
				this.displayedTN_arr.push(thumbnail);
			}
		}
	}
	this.layoutThumbnails(0, 0);
	//if there is only one thumbnail, select it
	if (this.displayedTN_arr.length == 1&&this.selectedTNname!=this.displayedTN_arr[0].name){
		this.onThumbnailClick(this.displayedTN_arr[0].name);
	}
	this.focusSelectedThumbnail();	
}
//
ThumbnailManager.prototype.showThumbnailLabel = function(thumbnailName){
	var t = this.getThumbnail(thumbnailName);
	if (t){
		var existingClass = document.getElementById(t.labelDivID).className;
		document.getElementById(this.getThumbnail(thumbnailName).labelDivID).className="thumbnailLabel show";
	}
}
//
ThumbnailManager.prototype.layoutThumbnails = function(selectedTN, selectedTNx){
	document.getElementById('debug').innerHTML = "layoutThumbnails('"+selectedTN+"', '"+selectedTNx+"') "+document.getElementById('debug').innerHTML;
	var html = "";
	for (var i=0;i<this.displayedTN_arr.length;i++){
		if (this.displayedTN_arr.length ==1||this.displayedTN_arr.length*this.thumbnailWidth<=this.containerWidth){
			var TNx = i*this.thumbnailWidth;
		}else{
			var TNx = i*(this.containerWidth - this.thumbnailWidth)/(this.displayedTN_arr.length-1);
		}
		var TNz = 10+ this.displayedTN_arr.length - (Math.abs(selectedTN - i));
		var colorN = 2+(i+5)%5;//2+ Math.abs(7-(i+14)%14);
		var rolloverFunction = this.name+'.onThumbnailRollover('+i+','+TNx+',"'+this.displayedTN_arr[i].name+'");';
		var rolloutFunction = this.name+'.onThumbnailRollout("'+this.displayedTN_arr[i].name+'")';
		var onclickFunction = this.name+'.onThumbnailClick("'+this.displayedTN_arr[i].name+'")';
		var thumbnailDiv = document.getElementById(this.displayedTN_arr[i].divID);
		
		
		thumbnailDiv.style.display= 'block';
		thumbnailDiv.style.position='absolute';
		thumbnailDiv.style.top=(0)+'px';
		thumbnailDiv.style.left=TNx+'px';
		thumbnailDiv.style.zIndex=TNz;
		thumbnailDiv.style.backgroundColor=this.displayedTN_arr[i].thumbnailColor;
	
		//= "'display:block; position:absolute; top:"+(0)+"px; left:"+TNx+"px; height:136px; width:"+this.thumbnailWidth+"px; z-index:"+TNz+"; background-color:"+this.displayedTN_arr[i].thumbnailColor+"'";
		thumbnailDiv.onmouseover = new Function(rolloverFunction);
		thumbnailDiv.onmouseout = new Function(rolloutFunction);
		
		var thumbnailDiv = document.getElementById(this.displayedTN_arr[i].labelDivID);
		thumbnailDiv.className="hidden";
	}
}