// JavaScript Document

//Gallery Objects
var Album;
var Enlarged;
var Caption;

//xml
var xmlDoc;
var xmlPath = "Gallery.xml";

//Set styles

//XML
function loadXML()
{
	// code for IE
	if (window.ActiveXObject)
	{
		  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		  xmlDoc.async=false;
		  xmlDoc.load(xmlPath);
		  PopulateAlbum();
	}
	// code for Mozilla, Firefox, Opera, etc.
	else if (document.implementation &&	document.implementation.createDocument)
	{
		  xmlDoc=document.implementation.createDocument("","",null);
		  xmlDoc.load(xmlPath);
		  xmlDoc.onload=PopulateAlbum;
	}
	else
	{
	  	alert('Your browser cannot handle this script');
	}
}

function GetImagePath(imageNumber){
	var path = '';
	var xmlAlbumPhotos = xmlDoc.getElementsByTagName('Photo');
	for(var i=0;i<xmlAlbumPhotos.length;i++){
		if(imageNumber == i){
			path = xmlAlbumPhotos[i].getElementsByTagName('FileName')[0].childNodes[0].nodeValue;
		}
	}
	return path;
}

//Populate Album
function PopulateAlbum(){
	
	//create <UL> for gallery
	var albumList = document.createElement('ul');
	
	//add an <li> for each image
	var xmlAlbumPhotos = xmlDoc.getElementsByTagName('Photo');
	var totalHeights = 0;
	for(var i=0;i<xmlAlbumPhotos.length;i++){
		var photoListItem = document.createElement('li');
		var photoListItemTable = document.createElement('table');
		var photoListItemTableBody = document.createElement("tbody");
		var photoListItemTableRow = document.createElement('tr');
		var photoThumbNail = document.createElement('img');
		
		photoThumbNail.src = xmlAlbumPhotos[i].getElementsByTagName('ThumbNail')[0].childNodes[0].nodeValue;
		photoThumbNail.className = "Thumbnail";
		totalHeights += photoThumbNail.height + 20;
		var photoListItemTableCell = document.createElement('td');
		photoListItemTableCell.appendChild(photoThumbNail);
		
		//set caption
		var photoCaption = document.createElement('span');
		if(xmlAlbumPhotos[i].getElementsByTagName('Caption')[0].hasChildNodes()){
			photoCaption.innerHTML = xmlAlbumPhotos[i].getElementsByTagName('Caption')[0].childNodes[0].nodeValue;
		}else{
			photoCaption.innerHTML = "";
		}
		photoCaption.className = "Caption";
		var photoListItemTableCellCap = document.createElement('td');
		photoListItemTableCellCap.appendChild(photoCaption);
		
		photoListItemTableRow.appendChild(photoListItemTableCell);
		photoListItemTableRow.appendChild(photoListItemTableCellCap);
		photoListItemTableBody.appendChild(photoListItemTableRow);
		photoListItemTable.appendChild(photoListItemTableBody);
		photoListItem.appendChild(photoListItemTable);
		
		//set some styles
		photoListItem.style.padding = '10px';
		photoListItem.style.listStyleType = 'none';
		photoListItem.style.cursor = 'pointer';
		//photoListItem.style.display = 'inline';
		
		//set behaviours
		photoListItem.id = i;
		photoListItem.onmousedown = ThumbClick;
		
		albumList.appendChild(photoListItem);
	}
	albumList.style.minHeight = totalHeights + 'px';
	albumList.className = "ThumbnailList";
	Album.appendChild(albumList);
	Album.style.overflowY = "scroll";
	
	//set the first image in the div
	var imageData = GetImagePath(0);
	//set enlarged photo
	var photoEnlarged = document.createElement('img');
	photoEnlarged.src = imageData
	Enlarged.appendChild(photoEnlarged);	
	
}

function ThumbClick(){
	var imageData = GetImagePath(this.id);
	//set enlarged photo
	var photoEnlarged = document.createElement('img');
	photoEnlarged.src = imageData
	
	if(Enlarged.hasChildNodes()){
		Enlarged.removeChild(Enlarged.childNodes[0]);
	}
	Enlarged.appendChild(photoEnlarged);	
	
	//set caption
	/*
	var photoCaption = document.createTextNode(imageData[1]);
	
	if(Caption.hasChildNodes()){
		Caption.removeChild(Caption.childNodes[0]);
	}
	Caption.appendChild(photoCaption);	
	*/
}

function init() {
	Album = document.getElementById("Album");
	Enlarged = document.getElementById("Enlarged");
	Caption = document.getElementById("Caption");
	loadXML();
}
window.onload = init;