// PEN Image Browser

/******************************************************
Array of images to create thumbnails from
Each array item is a string with multiple parts separated by ;
"image path;link path;image map"
This needs to be moved to an external file and loaded via ajax. 
*******************************************************/
var imageAr=new Array(
"home/EarthMap_600.jpg;;#EarthMap_600_imageMap_Map",
"home/fullAuto.jpg;scripts.htm",
"home/hna550.jpg",
"home/Intermediate_Rigging_Boxshot.JPG",
"home/dresden.jpg",
"home/bioShockBanner.jpg",
"home/DVD_Boxshots_0008.JPG",
"home/OgreFaceSetup.jpg",
"home/steamPunkTruckBanner.jpg",
"home/vehicleDesigns.jpg",
"home/fullAuto.jpg;scripts.htm",
"home/hna550.jpg",
"home/Intermediate_Rigging_Boxshot.JPG",
"home/dresden.jpg",
"home/bioShockBanner.jpg",
"home/DVD_Boxshots_0008.JPG",
"home/OgreFaceSetup.jpg",
"home/steamPunkTruckBanner.jpg",
"home/vehicleDesigns.jpg"
)

/*****************************************************
Settings for display. 
These settings should also be read from the image list file as local settings for each 
	thumbnail gallery that is setup. 
*****************************************************/
var globalImageHeader="PEN Productions Inc. Serving Clients World Wide since 2002"
var useImageHeader=true
var tnWidth=48
var tnHeight=48
var tnPadding=0 //Not used yet
var tnMargin=1	//Only used in moving thumbnails so far. 
var tnPageIndex=1	//Not used yet

/*****************************************************
Builds structure for images and thumbnails. 
*****************************************************/
function initImageBrowser()
{
	var penImageBrowser=document.getElementById("penImageBrowser");
	if (penImageBrowser!=null)
	{
		//Set the class of the image browser
		penImageBrowser.setAttribute("class","imageBrowserContainer");
		
		//Image Header
		if (useImageHeader)
		{
//			alert(penImageBrowser);
			var div=document.createElement("div");
			div.setAttribute("class","imageBrowserHeader");
			div.innerHTML=globalImageHeader;
			penImageBrowser.appendChild(div);
		}
		
		//Image loader
		//<div id="imageLoader" class="imageLoader">
		var div=document.createElement("div");
		div.setAttribute("id","imageLoader");
		div.setAttribute("class","imageLoader");
		penImageBrowser.appendChild(div);
		
		//Thumbnail container
		//<div id="thumbnailContainer" class="thumbnailContainer">
		var thumbnailContainer=document.createElement("div");
		thumbnailContainer.setAttribute("id","thumbnailContainer");
		thumbnailContainer.setAttribute("class","thumbnailContainer");
		penImageBrowser.appendChild(thumbnailContainer);
		
		//Scroll left
		//<div id="thumbnailScrollLeft" class="thumbnailScrollLeft"></div>
		var scrollLeft=document.createElement("div");
		scrollLeft.setAttribute("id","thumbnailScrollLeft");
		scrollLeft.setAttribute("class","thumbnailScrollLeft");
		scrollLeft.onmousedown=scrollThumbsLeft;
		thumbnailContainer.appendChild(scrollLeft);
		
		//Thumbnails
		//<div id="thumbnails" class="thumbnails"></div>
		var thumbNails=document.createElement("div");
		thumbNails.setAttribute("id","thumbnails");
		thumbNails.setAttribute("class","thumbnails");
		thumbnailContainer.appendChild(thumbNails);
		
		//ScrollRight
		//<div id="thumbnailScrollRight" class="thumbnailScrollRight"></div>
		var scrollRight=document.createElement("div");
		scrollRight.setAttribute("id","thumbnailScrollRight");
		scrollRight.setAttribute("class","thumbnailScrollRight");
		scrollRight.onmousedown=scrollThumbsRight;
		thumbnailContainer.appendChild(scrollRight);
		
		//!!!Images need to be preloaded for firefox to load them correctly the first time
			//not sure that this is correcting the problem how ever.
		preloadImages();
		
		//!!!Using this setTimeout hack to wait for the images to load this will not work if the 
			//images load slower then the 400 milliseconds. Need to find a way to check the
			//images before adding them and waiting till they have loaded to add them to the 
			//page. 
		setTimeout("initThumbnails();",400);
//		initThumbnails();
	}
}

/*****************************************************
Preloads the images so there are no errors on first load. 
	!!!Doesn't appear that this is correcting the problem of the thumbnails not 
	showing up on first load in Firefox and Chrome.
*****************************************************/
function preloadImages()
{
	for (var i=0;i<imageAr.length;i++)
	{
		var str=imageAr[i];
		var strAr=str.split(";");
		var preImage=new Image(25,25);
		preImage.src=strAr[0];
	}
}

/*****************************************************
Called when page loads.
Builds thumbnails. 
!!!Might want to manage thumbnail positions with absolute. As it is
	at the moment the overflow-x isn't working at all. 
*****************************************************/
var tnPos=0;
function initThumbnails()
{
	var tnc=document.getElementById("thumbnails");
//	tnPos=tnc.offsetLeft
	for (var i=0;i<imageAr.length;i++)
	{
		var str=imageAr[i];
		var strAr=str.split(";");
		
		//Add thumbnail holder
		var div=document.createElement("div");
		div.setAttribute("id","thumbnailDiv");
		div.setAttribute("class","thumbnailDiv");
//		div.style.position="relative";
//		div.style.left="0px";
		div.style.position="relative";
		div.style.left=tnPos+"px";
		div.style.top=tnPos*-1+"px";
		tnPos+=tnWidth+(tnMargin*2)+(tnPadding*2)+1;
		
		
		//Add thumbnail
		var img=document.createElement("img");
		img.setAttribute("src",strAr[0]);
		if (strAr.length>=2) img.setAttribute("link",strAr[1]);
		if (strAr.length>=3) img.setAttribute("usemap",strAr[2]);
		img.setAttribute("class","thumbnailImage");
		img.onmouseover=penThumbOver;
		img.onmouseout=penThumbOut;
		
		//Add link if there is one. 
		var a=document.createElement("a");
		if (strAr.length>=2 && strAr[1]!=null && strAr[1]!="" && strAr[1]!=undefined) 
		{
			//Add <a href> element if link is found. 
			a.setAttribute("href",strAr[1]);
			a.appendChild(img);
			div.appendChild(a);
			tnc.appendChild(div);
		}else
		{
			//If no link is found just add the thumbnail. 
			div.appendChild(img);
			tnc.appendChild(div);
		}
		//Size the image
		setThumbnailSize(img);
		
		if (i==0){loadImage(img)}
	}
}

function setThumbnailSize(img)
{
	var w=tnWidth;
	var h=tnWidth;
	if (img.width>=img.height)
	{
		var r=img.width/img.height;
		w=h*r;
	}
	if (img.height<img.width)
	{
		var r=img.height/img.width;
		h=w*r;
	}
	//Need to center the image here as well. 
	img.width=w;
	img.height=h;
	img.style.position="relative";
	img.style.top=((-(h-tnHeight)/2)+"px");
	img.style.left=((-(w-tnWidth)/2)+"px");
}

/*****************************************************
Loads images when mouse over thumbnail. 
Called from penThumbOver.
e: thumbnail image
!!!Need to size image and not just rely on the CSS styles as it is not work
	correctly in IE.
*****************************************************/
function loadImage(e)
{
	var imageLoader=document.getElementById("imageLoader");
	var imageLoaderImage=document.getElementById("imageLoaderImage");
	
	//Remove current image
	if (imageLoaderImage!=null)
	{
		imageLoaderImage.parentNode.removeChild(imageLoaderImage);
	}
	
	//Add link
	var a=document.createElement("a");
	var href=e.getAttribute("link");
	if (href!=null && href!="") a.setAttribute("href",href);
	imageLoader.appendChild(a);
	
	//Add new image
	var img=document.createElement("img");
	var src=e.getAttribute("src");
	img.setAttribute("src",src);
	img.setAttribute("id","imageLoaderImage");
	img.setAttribute("class","imageLoaderImage");
	
	var usemap=e.getAttribute("usemap");
	if (usemap!=null && usemap!="" && usemap!=undefined) img.setAttribute("usemap",usemap);
	
	a.appendChild(img);
}

function penThumbOut()
{
	this.setAttribute("class","thumbnailImage");
}

function penThumbOver()
{
	this.setAttribute("class","thumbnailImageOver");
	loadImage(this);
	alert(this.offsetLeft);
}


/*****************************************************
Scroll right
*****************************************************/
var offsetAmount=0;
function scrollThumbs(amount)
{
	var thumbnails=document.getElementById("thumbnails");
	offsetAmount=offsetAmount+((tnWidth+tnMargin*2)*amount);
	if (offsetAmount<=0)
	{
		for (var i=0;i<thumbnails.childNodes.length;i++)
		{
			thumbnails.childNodes[i].style.left=(thumbnails.childNodes[i].offsetLeft+offsetAmount+"px");
//			thumbnails.childNodes[i].style.top=(offsetAmount+"px");
		}
	}
}
function scrollThumbsRight(){scrollThumbs(-1)}
function scrollThumbsLeft(){scrollThumbs(1)}