// 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	//Not used yet
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");
		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");
		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();
		
		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. 
!!!Need to change this to load the entire image browsing system so only one 
 div needs to be added to a page with a load handler. 
*****************************************************/
function initThumbnails()
{
	var tnc=document.getElementById("thumbnails");
	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("class","thumbnailDiv");
		
		
		//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");
}

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);
}