/* JavaScript Document

PEN Image Browser

Requires penSiteBuilder.js
*********************************************/
var playerContainer;
var scrollBar;
var scrollBarContainer;
var xmlImageList;
var xmlImageFile;
//var imageList=new Array();
var player_width;
var player_height;
var thumbnail_width;
var thumbnail_height;
var scrollLeft_width;
var scrollRight_width;

var collectedImagePaths=new Array();

var pibSetings;
function loadPenImageBrowser(url,xmlImages)
{
	xmlImageList=xmlImages;
	
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		pibSetings=new XMLHttpRequest();
		pibSetings.onreadystatechange=pibStateChange;
		pibSetings.open("GET",url,true);
		pibSetings.send();
	}
	else
	{// code for IE6, IE5
		pibSetings=new ActiveXObject("Microsoft.XMLHTTP");
		pibSetings.onreadystatechange=pibStateChange;
		pibSetings.open("GET",url,true);
		pibSetings.send();
	}
}

function pibStateChange()
{
	if (pibSetings.readyState==4 && pibSetings.status==200)
	{
		buildImageBrowser();
	}
}

/****************************
Build the base image browser using the XML settings file that is passed to it.
****************************/
function buildImageBrowser()
{
	var docEle=pibSetings.responseXML.documentElement
	var imageBrowserContainer=document.getElementById("imageBrowserContainer");
	
	if (imageBrowserContainer!=null)
	{
		//alert(docEle);
		player_width=parseFloat(getTextNode(docEle.getElementsByTagName("player_width")[0]));
		player_height=parseFloat(getTextNode(docEle.getElementsByTagName("player_height")[0]));
		thumbnail_width=parseFloat(getTextNode(docEle.getElementsByTagName("thumbnail_width")[0]));
		thumbnail_height=parseFloat(getTextNode(docEle.getElementsByTagName("thumbnail_height")[0]));
		scrollLeft_width=parseFloat(getTextNode(docEle.getElementsByTagName("scrollLeft_width")[0]));
		scrollRight_width=parseFloat(getTextNode(docEle.getElementsByTagName("scrollRight_width")[0]));
		
		//Create the main container
		var imgContainer=buildElement("div",imageBrowserContainer,"class,imgContainer");
		imgContainer.style.width=player_width+"px";
		imgContainer.style.height=player_height+thumbnail_height+2+"px";
		
		//Container for where the images are to be displayed
		playerContainer=buildElement("div",imgContainer,"class,playerContainer");
		playerContainer.style.width=player_width+"px";
		playerContainer.style.height=player_height+"px";
		
		//Thumbnail container
		var thumbContainer=buildElement("div",imgContainer,"class,thumbContainer");
		thumbContainer.style.width=player_width+"px";
		thumbContainer.style.height=thumbnail_height+2+"px";
		
		var scrollLeft=buildElement("div",thumbContainer,"class,scrollLeft");
		scrollLeft.style.width=scrollLeft_width-2+"px";
		scrollLeft.style.height=thumbnail_height+"px";
		//Need to add mouse down functions here for scrolling the images. 
		scrollLeft.onmousedown=function(){scrollThumbNails("left")};
		var sLImg=buildElement("img",scrollLeft,"src,imageBrowserUi/scrollLeft.png;class,scrollImg");
		
		scrollBarContainer=buildElement("div",thumbContainer,"class,scrollBarContainer");
		scrollBarContainer.style.width=player_width-(scrollLeft_width+scrollRight_width)+"px";
		scrollBarContainer.style.height=thumbnail_height+2+"px";
		
		var scrollRight=buildElement("div",thumbContainer,"class,scrollRight");
		scrollRight.style.width=scrollRight_width-2+"px";
		scrollRight.style.height=thumbnail_height+"px";
		//Need to add mouse down functions here for scrolling the images. 
		scrollRight.onmousedown=function(){scrollThumbNails("right")};
		var sLImg=buildElement("img",scrollRight,"src,imageBrowserUi/scrollRight.png;class,scrollImg");
		
		//Add all thumbnails to this div. 
			//Contains the actual thumbNails and is allowed to get as wide as the number of thumbnails. 
				//This then slides as the thumbs are scrolled. 
			//Width of this element might need to be dynamic to allow for any number of thumbnails. 
				//Might be able to set the width while adding the thumbnails to it in the addThumbNails function. 
		scrollBar=buildElement("div",scrollBarContainer,"class,scrollBar");
		scrollBar.style.width=0+"px";
		scrollBar.style.height=thumbnail_height+2+"px";
		scrollBar.style.left=0+"px";
		
		//Start loading the images. 
		readXmlImageList(xmlImageList);
	}
}

//Read the xmlImageList
function readXmlImageList(url)
{
	//alert(url);
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlImageFile=new XMLHttpRequest();
		//xmlImageFile.onreadystatechange=loadImages;
		xmlImageFile.onreadystatechange=collectImagePaths;
		xmlImageFile.open("GET",url,true);
		xmlImageFile.send();
	}
	else
	{// code for IE6, IE5
		xmlImageFile=new ActiveXObject("Microsoft.XMLHTTP");
		//xmlImageFile.onreadystatechange=loadImages;
		xmlImageFile.onreadystatechange=collectImagePaths;
		xmlImageFile.open("GET",url,true);
		xmlImageFile.send();
	}
}

/********************************
Collect image paths from XML file. 
	Stores the paths in collectedImagePaths
********************************/
function collectImagePaths()
{
	if (xmlImageFile.readyState==4 && xmlImageFile.status==200)
	{
		var docEle=xmlImageFile.responseXML.documentElement;
		
		var imgEles=docEle.getElementsByTagName("img");
		
		for (var i=0;i<imgEles.length;i++)
		{
			var imgName=imgEles[i].getAttribute("src");
			if (imgName!="" && imgName!=undefined)
			{
				var imgPath=(xmlImageList.split("/"))[0];
				//alert(imgPath+"/"+imgName);
				collectedImagePaths.push(imgPath+"/"+imgName);
			}
		}
		
		//Not sure that this will work once on the web but it is working on a local server. 
		//!!!This definitly isn't working. The images are not showing up which means they are still loading
			//in the background. 
		//preLoadImages();
		//setTimeout("loadImages()",200);
		//alert("Loading");
		loadHomeImage();
		addThumbNails();
		
		//slideShow();
	}
}

function slideShow()
{
	collectedImagePaths; //Paths for all listed images. 
	var int=Math.floor(Math.random()*collectedImagePaths.length);
	alert(collectedImagePaths.length);
	setTimeout(function(){slideShow()},4000);
}

/*****************************************************
Preloads the images so there are no errors on first load. 
	!!!Currently not being called.
*****************************************************/
function preLoadImages()
{
	for (var i=0;i<collectedImagePaths.length;i++)
	{
		//alert("preLoadImages");
		//var preImage=new Image(0,0);
		//preImage.src=collectedImagePaths[i];
		
		var preImage=new Image(0,0);
		preImage.src=collectedImagePaths[i];
		//alert(preImage.complete);
		//alert(theImage.naturalWidth);
	}
	//alert("preLoadImages");
	loadHomeImage();
	//return undefined;
}

/********************************
Builds an array of img tags that are then displayed in the player. 
!!!Will need to use a setTimeout() function to load the images so that they display 
correctly. 
********************************/
function loadHomeImage()
{
	var docEle=xmlImageFile.responseXML.documentElement;
	var homeImg=docEle.getAttribute("homeImg");
	var path=(xmlImageList.split("/"))[0];
	var imgPath=path+"/"+homeImg;
	//alert("loadHomeImage");
	function loadImg(image)
	{
		//var imgEles=docEle.getElementsByTagName("img");
		
		//Display the homeImg here
		if (image.complete>0)
		{
			var img=buildElement("img",playerContainer,("src,"+image.src));
			resizeImage(img,player_width,player_height);
			return true;
		}else
		{
			setTimeout(function(){loadImg(image)},200);
		}
	}
	
	var preImage=new Image(0,0);
	preImage.src=imgPath;
	loadImg(preImage);
	return false;
}


/***************************************
Adds the thumbnails to the scrollBar
	!!!Need to randomize the order.
		Put an option in the xml set file for this. 
***************************************/
function addThumb(image)
{
	//alert(imgPath);
	//document.write(preImage.src);
	if (image.complete>0)
	{
		//alert("Loading"+": "+image.src);
		var thumbDiv=buildElement("div",scrollBar,"class,thumbDiv");
		var img=buildElement("img",thumbDiv,("src,"+image.src+";class,thumbImg"));
		thumbDiv.onmouseover=function(){popUpThumbnail(this)};
		img.onmousedown=function(){switchImage(this.getAttribute("src"))};
		
		//Resize the thumbnail image.
		//resizeImage(img,thumbnail_width,thumbnail_height,false);
		resizeThumbnail(img,thumbnail_height-2);
		
		//Set the width of the scrollBar as the thumbnails are being added. 
			//Width of the thumbnail needs to be determined by the width of the img. 
		var sbw=parseFloat(scrollBar.style.width);
		sbw+=parseFloat(img.width)+2;
		scrollBar.style.width=sbw+"px";
		
		return true;
	}else
	{
		//alert("NOT Loading"+": "+image.src);
		setTimeout(function(){addThumb(image)},200);
	}
	//alert(preImage.src);

	return false;
}

/***************************************
addThumbNails()
***************************************/
function addThumbNails()
{
	//alert(imageList.length);
	var paths=collectedImagePaths;
	var sortedPaths=new Array();
	while (paths.length>0)
	{
		var int=Math.floor(Math.random()*paths.length);
		sortedPaths.push(paths[int]);
		paths.splice(int,1);
	}
	
	//for (var i=0;i<imageList.length;i++)
	for (var i=0;i<sortedPaths.length;i++)
	{
		//alert(imageList[i].getAttribute("src"));
		//var imgPath=imageList[i].getAttribute("src");
		var curImgPath=sortedPaths[i];
		if (curImgPath!="")
		{
			var preImage=new Image(0,0);
			preImage.src=curImgPath;
			//alert("Starting to load: "+curImgPath);
			addThumb(preImage);
		}
	}
	return undefined;
}

/***************************************
switchImage(imgPath)
	Switches the image in the main player.  
***************************************/
function switchImage(imgPath)
{
	deleteAllElements(playerContainer);
	var img=buildElement("img",playerContainer,("src,"+imgPath));
	//img.onmousedown=function(){alert(this.getAttribute("src"))};
	resizeImage(img,player_width,player_height);
	//img.onmouseover=function(){enlargePlayerImage()};
	img.onmousedown=function(){enlargePlayerImage(this.getAttribute("src"))};
	//img.onmouseover=function(){clickToEnlarge(this.parentNode)};
	
	//img.onmouseover=function(){showPlayerTools()};
	//alert(playerContainer.children[0].getAttribute("src"));
}

function enlargePlayerImage(imgPath)
{
	var docEle=document.getElementsByTagName("body")[0];
	var imageCon=buildElement("div",docEle,"class,enlargedImage");
	img=buildElement("img",imageCon,("src,"+imgPath));
	img.onmousedown=function(){this.parentNode.parentNode.removeChild(this.parentNode)};
}
function clickToEnlarge(parent)
{
	var div=buildElement("div",parent,"class,clickToEnlarge");
	div.innerHTML="Click To Enlarge"
}

/***************************************
showPLayerTools
***************************************/
function showPlayerTools()
{
	//Tool bar
	//alert("showPlayerTools");
	var toolDiv=buildElement("div",playerContainer,"class,playerTools");
	var absPlayerPos=getAbsolutePosition(playerContainer);
	toolDiv.style.top="139px";//absPlayerPos[0]+"px";
	toolDiv.style.left="0px";//absPlayerPos[1]+"px";
	//alert(absPlayerPos);
}

/***************************************
Pops up thumbnail onmouseover
***************************************/
function popUpThumbnail(thumbDiv)
{
	removePopUpThumbnail();
	var bodyEle=document.getElementsByTagName("body")[0];
	var div=buildElement("div",bodyEle,"class,thumbDivOver;id,popUpThumbnail");
	div.onmouseout=function(){removePopUpThumbnail()};
	
	var imgEle=thumbDiv.getElementsByTagName("img")[0];
	var img=buildElement("img",div,"class,thumbImg");
	img.onmousedown=function(){switchImage(this.getAttribute("src"))};
	
	var aspectRatio=imgEle.height/imgEle.width;
	img.src=imgEle.getAttribute("src");
	img.width=imgEle.width+20;
	img.height=img.width*aspectRatio;
	
	var absPos=getAbsolutePosition(thumbDiv);
	//alert(absPos);
	div.style.position="absolute";
	div.style.top=absPos[0]-(10*aspectRatio)+"px";
	div.style.left=absPos[1]-10+"px";
}
function removePopUpThumbnail()
{
	var div=document.getElementById("popUpThumbnail");
	if (div!=undefined)
	{
		div.parentNode.removeChild(div);
	}
}

/***************************************
Event handler for scrolling the thumbnails. 
	!!!Need to do some work here so that the scrolling is being controlled by the width of the images and not the 
	value stated in the setup.xml file. Also it needs to have stops on it so that the scrolling doesn't 
	go to far. 
	!!!Needs to be more complicated then it is currently. Right now half images will not end up fully on screen
	at any time. Might be best to get the width of a thumbnail and move it that amount. Might not work if 
	some thumbnails are different sizes. 
	!!!Need to add a stop for the end of the thumbs. Currently they can't be scrolled to the right when at the 
	start but they can be scrolled to the left indefinitly. 
***************************************/
function scrollThumbNails(direction)
{
	//alert(direction);
	var stPos;
	if (scrollBar.style.left==""){stPos=0}else{stPos=parseFloat(scrollBar.style.left)};
	//alert(stPos);
	switch(direction)
	{
		case "left":
		{
			//stPos+=thumbnail_width;
			if (stPos<0)
			{
				stPos+=parseFloat(scrollBarContainer.style.width)/2;
				scrollBar.style.left=stPos+"px";
			}
			break;
		}
		case "right":
		{
			//Stop the scrolling if it goes further then the end. 
			var sbW=parseFloat(scrollBar.style.width);
			var sbcW=parseFloat(scrollBarContainer.style.width);
			if (stPos<=0 && parseFloat(scrollBar.style.left)>(sbcW-sbW))
			{
				stPos-=parseFloat(scrollBarContainer.style.width)/2;
				scrollBar.style.left=stPos+"px";
			}
			break;
		}
	}
}

/***************************************
Sets the size of the images. 
Also sets the position relative.
	Working for the player images but not really doing the right thing for the thumbnails.  
***************************************/
function resizeImage(img,width,height,setPosition)
{
	if (setPosition==undefined){setPosition=true};
	
	var playerAspect=height/width;
	var imageAspect=img.height/img.width;
	//alert(playerAspect<imageAspect);
	
	var w=width;
	var h=height;
	if (playerAspect<=imageAspect)
	{
		var imageAspect=img.width/img.height;
		w=height*imageAspect;
	}else
	{
		var imageAspect=img.height/img.width;
		h=width*imageAspect;
	}
	img.width=w;
	img.height=h;
	
	//Set the position of the images here. This looks like it is centering the main image
		//as well it is working for the thumbnails. 
	if (setPosition)
	{
		img.style.position="relative";
		img.style.left=((-(w-width)/2)+"px");
		img.style.top=((-(h-height)/2)+"px");
//alert(img.style.left);
	}
}

/*********************************
Set the height to the hight of the thumbnail_height setting and sets the width to the correct aspect. 
*********************************/
function resizeThumbnail(img,height)
{
	//alert(height);
	var thumbAspect=img.width/img.height;
	img.height=height;
	img.width=height*thumbAspect;
}