function cImageGallery(){
	this.id = this.name = "ImageGallery"; 
	this.width = 500;
	this.height = 200;
	this.imgList = new Array();
	this.reverse = false;	
	this.output = undefined;
	this.tmbCount = 5;
	this.spacer = "/assets/images/spacer.gif";
	this.leftButton = "/assets/images/leftButton.gif";
	this.rightButton = "/assets/images/rightButton.gif";
	this.current = -1;
	this.enlargeOnMouseOver = false;
	
	this.outputElements = new Object();
	
	
	/** methods */
	this.add = cImageGallery_mAddImage;
	this.build = cImageGallery_mBuild;
	this.findLocal = cImageGallery_mFindLocal;
	this.loadNav = cImageGallery_mLoadNav;
	this.loadImage = cImageGallery_mLoadImage;
	
	
	/** global properties **/
	window.__ECHO__LOADNAV = false;
	
}

function cImageGallery_mAddImage(src,tmb){	
	var newImage = this.imgList[this.imgList.length] = new cImageGallery_cImage(this.imgList.length);
		if(src){newImage.src = src;}
		if(tmb){newImage.tmb = tmb;}
		newImage.parent = this;
		
	return(newImage)
}

function cImageGallery_mBuild(){
	if(this.reverse){this.imgList.reverse();}
	if(this.output==undefined){this.output = this.findLocal()}
	var thiscell, thisimage, thislink;

	/* create a table to hold the control	*/
	var thistable = this.outputElements.table = document.createElement("table");
		thistable.width = this.width;
		thistable.id = thistable.name = "ImageGalleryTable";
		
	/* add the tbody element for IE */
	this.outputElements.tBody = document.createElement("tBody");
		thistable.appendChild(this.outputElements.tBody);
		this.outputElements.tBody.id = this.outputElements.tBody.name = "ImageGalleryTableBody";
		
	/* Row0 contains the header known as "ledger" */
	this.outputElements.row0 = document.createElement("tr");
		thiscell = this.outputElements.row0cell1 = document.createElement("td")
		thiscell.name = thiscell.id = "ImageGalleryLegend"
		thiscell.colSpan = this.tmbCount+2;
		this.outputElements.legend = document.createTextNode("Images");
		thiscell.appendChild(this.outputElements.legend);
		this.outputElements.row0.appendChild(thiscell);
		this.outputElements.tBody.appendChild(this.outputElements.row0);
		
	/* Row1 contains a seperation element */
	this.outputElements.row1 = document.createElement("tr");	
		this.outputElements.row1.id = this.outputElements.row1.name = "ImageGalleryRow1";
		this.outputElements.tBody.appendChild(this.outputElements.row1);		
		thiscell =	this.outputElements.row1Cell1 = document.createElement("td")
		thiscell.name = thiscell.id = "ImageGalleryTopHR";
		thiscell.colSpan = this.tmbCount + 2;
		thiscell.appendChild(document.createElement("hr"));
		this.outputElements.row1.appendChild(thiscell);

	/* Row 2 contains the larger image */	
	this.outputElements.row2 = document.createElement("tr");
	this.outputElements.row2.name = this.outputElements.row2.id = "ImageGalleryRow2";
	
		thiscell = this.outputElements.row2Cell1 = document.createElement("td")
		thiscell.colSpan = this.tmbCount + 2;
		thiscell.name = thiscell.id = "ImageGalleryDisplayImageCell";
		thiscell.align="center";
		thiscell.valign="middle";
		thiscell.width = this.width;
		thiscell.height = this.height;
	var thisImage = this.outputElements.displayImage = document.createElement("img")
		thisImage.name = thisImage.id = "ImageGalleryDisplayImage";
		thisImage.src = this.spacer;
		thisImage.width = this.width;
		thisImage.height = this.height;
		thiscell.appendChild(thisImage)	
		this.outputElements.tBody.appendChild(this.outputElements.row2);
		this.outputElements.row2.appendChild(thiscell);
	
	/* Row 3 contains the "click image to enlarge" text */
	this.outputElements.row3 = document.createElement("tr");	
		this.outputElements.row3.name = this.outputElements.row3.id = "ImageGalleryRow3";
		this.outputElements.tBody.appendChild(this.outputElements.row3);		
		thiscell =	this.outputElements.row3Cell1 = document.createElement("td")
		thiscell.id = thiscell.name = "ImageGalleryClickText";
		thiscell.colSpan = this.tmbCount + 2;
		thiscell.appendChild(document.createTextNode(((this.enlargeOnMouseOver)?"pass mouse over image to enlarge":"click image to enlarge")));
		this.outputElements.row3.appendChild(thiscell);
	
	/* Row4 Contains another seperator */
	this.outputElements.row4 = document.createElement("tr");	
		this.outputElements.row4.id = this.outputElements.row4.name = "ImageGalleryRow4";
		this.outputElements.tBody.appendChild(this.outputElements.row4);		
		
		thiscell =	this.outputElements.row4Cell1 = document.createElement("td")
		thiscell.id = thiscell.name = "ImageGalleryImageSeperator";
		thiscell.colSpan = this.tmbCount + 2;
		thiscell.appendChild(document.createElement("hr"));
		this.outputElements.row4.appendChild(thiscell);
		
	/* Row5 Contains Thumbnails */
	this.outputElements.row5 = document.createElement("tr");
		this.outputElements.row5.id = this.outputElements.row5.name = "ImageGalleryRow5";
		this.outputElements.tBody.appendChild(this.outputElements.row5);
	
	/* Create Left Arrow LINK*/
		thislink = this.outputElements.arrowLeftLink = document.createElement("a");
		thislink.id = thislink.name = "ImageGalleryLeftArrowLink";
		var target = this;
		// Define click action
		thislink.onclick = function(){
			window.__ECHO__LOADNAV = true;
			target.loadNav(true);
		}
		// TODO: Define onmouseup action. this will be used for action when mouse is held down. 
		thislink.onmouseup = function(){
			window.__ECHO__LOADNAV = false;
		}

/* Create Left Arrow Image */
	thisimage = this.outputElements.arrowLeft = document.createElement("img");
	thisimage.id = thisimage.name = "ImageGalleryLeftArrowImage";
	thisimage.src = this.leftButton;
	
	thiscell = this.outputElements.row5Cell0 = document.createElement("td");
	thiscell.id = thiscell.name = "ImageGalleryLeftArrowCell";
		thiscell.appendChild(thislink);
		thislink.appendChild(thisimage);
		this.outputElements.row5.appendChild(thiscell);
	
/* Loop through the images in the list and display their thumbnails */
	for(var i=1; i<=this.tmbCount;i++){
		thiscell = this.outputElements["row5Cell" + i] = document.createElement("td");
		thiscell.align = "center";
		thiscell.valign = "middle";
		thiscell.width = ((this.width - (30*2))/this.tmbCount);
		
		
		thisimage = this.outputElements["image" + i] = document.createElement("img");
		thisimage.src = this.spacer;
		thisimage.name = thisimage.id = "image" + i;
		thisimage.width = 75;
		thisimage.height = 75;
		this.outputElements.row5.appendChild(thiscell);
		thiscell.appendChild(thisimage);
	}	
		thislink = this.outputElements.arrowRightLink = document.createElement("a");
			thislink.onclick = function(){
				window.__ECHO__LOADNAV = true;
				target.loadNav(false);
			}
			thislink.onmouseup = function(){
				window.__ECHO__LOADNAV = false;
			}
		thisimage = this.outputElements.arrowRight = document.createElement("img");	
		thisimage.src = this.rightButton;
		
		thiscell = this.outputElements["row5Cell" + this.tmbCount+1] = document.createElement("td");
		thiscell.width = 30;
		thiscell.align = "right"
		thiscell.appendChild(thislink);
		thislink.appendChild(thisimage);
		this.outputElements.row5.appendChild(thiscell);
	this.output.innerHTML = "";
	this.output.appendChild(this.outputElements.table);
	
	this.loadNav();
}

function cImageGallery_mLoadNav(shiftLeft){
	clearTimeout();
	var loadFirstImageWhenDone = false;
	if(window.__ECHO__LOADNAV==false && this.current>-1){return;}
	if(this.current==-1){
		this.current=1;
		loadFirstImageWhenDone = true;
	} // first load
	if(shiftLeft==false && shiftLeft!=undefined){
		this.current++; if(this.current>this.imgList.length-this.tmbCount){this.current=this.imgList.length-this.tmbCount;}
	} else {
		this.current--; if(this.current<0){this.current=0}
	}
	var target = this;
	var thisimage 

	
	var firstImageInList = undefined;
	
	for(var i = 0; i<this.tmbCount; i++){
		
		thisimage = this.outputElements["image" + (i+1)];
		if(firstImageInList==undefined){firstImageInList = this.imgList[this.current+i]};
		this.imgList[this.current+i].loadThumb(thisimage);
	}
	
	this.outputElements.legend.nodeValue = "Viewing Images: " + (this.current+1) + "-" + (this.current+this.tmbCount) + " of " + this.imgList.length ;
	
	this.outputElements.arrowLeft.src = (this.current==0)?this.spacer:this.leftButton;
	this.outputElements.arrowRight.src = (this.current>=this.imgList.length-this.tmbCount)?this.spacer:this.rightButton;
	
	
	if(loadFirstImageWhenDone){this.loadImage(firstImageInList);}
	
	window.__ECHO_GALLERYOBJECT = this;
	if(window.__ECHO__LOADNAV){
		var theFunction = this.loadNav;

		//setTimeout("doNavMove(window.__ECHO_GALLERYOBJECT," + shiftLeft + ")",500);
	}
}

function doNavMove(o,d){
	o.loadNav(d);
}

function cImageGallery_mFindLocal(){
	document.write("<div name='ImageGalleryOutputLayer' id='ImageGalleryOutputLayer'>Creating Output Layer...</div>")
	var o = document.getElementById("ImageGalleryOutputLayer");
	return(o);
}

function cImageGallery_mLoadImage(SRC){
	var image = new Image();
	var owner = this.outputElements.displayImage;
	owner.onclick = function(){};
	owner.width = this.width;
	owner.height = this.height;
	owner.src=this.spacer;
		
	var width = this.width;
	var height = this.height;
	var target = this
	var strSrs  = SRC.src + "?pepper=" + getPepper();	
	image.src = strSrs;
	image.onload = function(){
		if(this.width<width && this.height<height){
			owner.width = this.width;
			owner.height = this.height;
		} else {
			var w = (this.width-owner.width)/this.width;
			var h = (this.height-owner.height)/this.height;
			var m = 1-((w>h)?w:h);			
			owner.width=(this.width*m);
			owner.height=(this.height*m);
		}
		if(target.enlargeOnMouseOver){		
			owner.onmouseout = function(){
				KillGalleryImage();
			}
			owner.onmouseover = function(){
				ClearGalleryImage();
				/* if it's not the same image, clear out the image layer */
				try{
					if(document.getElementById("ImageGalleryWindowImage").src!=this.src){
						document.body.removeChild(document.getElementById("ImageGalleryWindow"));
					} else {
						return;
					}
				} catch(e){}
				var oDiv = document.createElement("div");
				oDiv.name = oDiv.id = "ImageGalleryWindow";
				oDiv.style.position = "absolute";
				oDiv.style.top = document.body.scrollTop;
				oDiv.style.left = document.body.scrollLeft;


				if(image.width<window.width()-40 && image.height<window.height()-40){
					oDiv.style.width = image.width;
					oDiv.style.height = image.height;
				} else {
					var w = (image.width-(window.width()-40))/image.width;
					var h = (image.height-(window.height()-40))/image.height;
					var m = 1-((w>h)?w:h);			
					oDiv.style.width=(image.width*m);
					oDiv.style.height=(image.height*m);
				}
				
				var oLink = document.createElement("a");
				oLink.id=oLink.name = "ImageFalleryWindowLink";
				oLink.href="javascript:;";
				oLink.onmouseover = function(){
					ClearGalleryImage();
				}	
				oLink.onmouseout = function(){
					KillGalleryImage();
				}
				oLink.onclick=function(){doKillGalleryImage();}
				var oImage = document.createElement("img");
				oImage.id=oImage.name = "ImageGalleryWindowImage";
				oImage.style.width = oDiv.style.width
				oImage.style.height = oDiv.style.height
				oImage.src = this.src;
				oImage.border = 0;
				
				document.body.appendChild(oDiv);
				oDiv.appendChild(oLink);
				oLink.appendChild(oImage);
			}
		} else {
			owner.onclick = function(){			
				if(__ImageGalleryLastWindowOpened){
					__ImageGalleryLastWindowOpened.close();
				}
				var kk = imgWindow(this.src,"Image Gallery",((image.width<screen.availWidth)?image.width:screen.availWidth),((image.height<screen.availHeight)?image.height:screen.availHeight)+20);
				__ImageGalleryLastWindowOpened = kk;
			}
		}
		owner.src = this.src;
	}
}
var j;
var __ImageGalleryLastWindowOpened = undefined;


function cImageGallery_cImage(index){
	this.id = this.name = "image" + index;
	this.parent = undefined;
	this.src = undefined;
	this.tmb = undefined;
	
	this.loadThumb = cImageGallery_cImage_mLoadThumb;
}

function cImageGallery_cImage_mLoadThumb(output){
	if(output){
		var parent = this.parent;
		var owner = this;
		output.src = this.tmb;
		output.onclick = function(){
			parent.loadImage(owner);
		}
	}
}

window.__ECHO__TIMER_FOR_CLOSING_GALLERY_WINDOW=0;
function KillGalleryImage(){
	__ECHO__TIMER_FOR_CLOSING_GALLERY_WINDOW = setTimeout("doKillGalleryImage()",200);
	
}

function ClearGalleryImage(){
	clearTimeout(__ECHO__TIMER_FOR_CLOSING_GALLERY_WINDOW)
}

function doKillGalleryImage(){
	try{
		document.body.removeChild(document.getElementById("ImageGalleryWindow"));
	} catch(e){}	
}