// Tour Diary images script.

// Constants to set up images stuff.
// These values can be changed when specifying widths of thumbnail images and main image container.
// GRW - March 2007

// *********************** START Editable Parameters ***********************************
// *************************************************************************************

// Set the display width of the thumbnail images.
var thumbnailImageWidth = "90px";

// Set the display height of the main image.
var mainImageHeight = "300px";

// Set the location of the XML file that contains the image properties. This will need to be the full URL path.
var photoXMLFileLocation = "/tourDiary/script/photoList.xml";

// *************************************************************************************
// ************************ END Editable Parameters ***********************************//


window.onload = init;

var tourDiaryPhotos = new Array();

function photoObject(photoDate,photoUrl,photoDesc) 
{
  	this.photoDate = photoDate;
	this.photoUrl = photoUrl;
	this.photoDesc = photoDesc;
}

function init()
{
	registerImages();
}

function registerImages()
{
	loadThumbnailImages();
	
}

function displayMainImage(imageIndex)
{
	document.getElementById("imageContainer").innerHTML = "<img src='" + tourDiaryPhotos[imageIndex].photoUrl + "' height='" + mainImageHeight + "' alt='" + tourDiaryPhotos[imageIndex].photoDesc + "'>";
	document.getElementById("imageTitle").innerHTML = "<img src='/tourDiary/images/picturesTitle.gif' alt='Pictures' align='absmiddle'>" + tourDiaryPhotos[imageIndex].photoDate;
	document.getElementById("imageDesc").innerHTML = tourDiaryPhotos[imageIndex].photoDesc;
}

function displayThumbnailImages()
{
	var tempImgString = "";
	for (var cnt = 0; cnt < tourDiaryPhotos.length; cnt++)
	{
		tempImgString = tempImgString + "<img src='" + tourDiaryPhotos[cnt].photoUrl + "' alt='" + tourDiaryPhotos[cnt].photoDesc +"' width='" + thumbnailImageWidth + "' onclick='displayMainImage(" + cnt + ")';>" 
	}
	document.getElementById("picStrip").innerHTML = tempImgString;
}

var xmlHttp=null;
function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{
		var myXML = xmlHttp.responseXML.documentElement;
		
		var photoNodes = myXML.getElementsByTagName('photo');

		for (var p = 0; p < photoNodes.length;p++)
		{
			var photoUrl = photoNodes[p].getElementsByTagName("photoUrl")[0].firstChild.nodeValue;
			var photoDesc = photoNodes[p].getElementsByTagName("photoDescription")[0].firstChild.nodeValue;
			var photoDate = photoNodes[p].getElementsByTagName("photoDate")[0].firstChild.nodeValue;

			var thisPhoto = new photoObject(photoDate,photoUrl,photoDesc);
			
			tourDiaryPhotos[p] = thisPhoto;
		}
		
		displayThumbnailImages();
	
		displayMainImage(0);
	}
}

function GetXmlHttpObject()
{
	try
  		{
	  		// Firefox, Opera 8.0+, Safari
	  		xmlHttp=new XMLHttpRequest();
  		}
	catch (e)
  		{
  			// Internet Explorer
  		try
    		{
    			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    		}
  		catch (e)
    		{
    			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}
 		}

	return xmlHttp;
}

function loadThumbnailImages()
{  
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null)
  		{
  			alert ("Your browser does not support AJAX!");
  			return;
  		}
		var url = photoXMLFileLocation;
		url=url+"?q=";
		url=url+"&sid="+Math.random()*1000;
		xmlHttp.onreadystatechange=stateChanged;
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
}