/*
+------------+
| gallery.js |
+------------+

Andrew Wyatt
andrew@wyatt-software.com

      Started: 2009-08-26
Last Modified: 2009-11-12

+-------+
| To Do |
+-------+
- Scrollable thumbnail row at the bottom?
*/


// Global Variables.
var strArrPhotoName		= new Array();
var strArrPhotoFilename	= new Array();
strArrPhotoName		[0]	= 'Loading...';
strArrPhotoFilename	[0]	= '';

var intPhotoCount		= 0;
var intCurrentPhoto		= 0;

var PHOTO_PATH			= '';

var ARROW_DIV_WIDTH		= 40;
var ARROW_WIDTH			= 24;
var ARROW_HEIGHT		= 48;

var CROSSFADE_STEP		= 10;
var CROSSFADE_DELAY		= 25;
var PLAY_DELAY			= 3000;

var bLoading			= false;
var bPlaying			= false;
var bShowControls		= true;
var playTimer;



// Functions
function togglemode()		{ setPlaying(!bPlaying); }



function createXMLDOM() {
	
	var arrSignatures = [
		"MSXML2.DOMDocument.6.0", 
		"MSXML2.DOMDocument.5.0", 
		"MSXML2.DOMDocument.4.0", 
		"MSXML2.DOMDocument.3.0", 
		"MSXML2.DOMDocument", 
		"Microsoft.XMLDOM"];

	var objXMLDOM;

	for (var i = 0; i < arrSignatures.length; i++) {
		try	{
			objXMLDOM = new ActiveXObject(arrSignatures[i]);
			return objXMLDOM;
		} catch (objError) {
			// Ignore
		}
	}

	return null;
}



function loadXMLDoc(strDocName) {
	
	var xmlDoc;

	if (window.XMLHttpRequest) {
		xmlDoc = new XMLHttpRequest();
		xmlDoc.open('GET', strDocName, false);
		xmlDoc.send('');
		return xmlDoc.responseXML;
	}

	// IE 5 and IE 6
	else {
		xmlDoc = createXMLDOM();
		if (xmlDoc) {
			xmlDoc.async = false;
			xmlDoc.load(strDocName);
			return xmlDoc;
		}
	}

	return null;
}



function loadPhotos(strXMLFile) {

	// Try to load the photo list from an XML file.

	var bSuccess	= false;
	var xmlDoc		= loadXMLDoc(strXMLFile);

	if (xmlDoc) {
		
		var x = xmlDoc.getElementsByTagName('photo');

		for (var i = 0; i < x.length; i++) {
			intPhotoCount++;
			strArrPhotoName		[intPhotoCount] = x[i].getElementsByTagName("name")    [0].childNodes[0].nodeValue;
			strArrPhotoFilename	[intPhotoCount] = x[i].getElementsByTagName("filename")[0].childNodes[0].nodeValue;
		}

		if (intPhotoCount > 0) intCurrentPhoto = 1;
		
		bSuccess = true;
	}

	return bSuccess;
}



function initGallery(intWidth, intHeight, strXMLFile, bStartAsPlaying, bShowPlayerControls) {

	// Initialises the gallery.

	var objGallery		= document.getElementById('gallery');
	var bPhotosLoaded	= false;
	var intArrowLeft	= (ARROW_DIV_WIDTH - ARROW_WIDTH) / 2;
	var intArrowTop		= (intHeight - ARROW_HEIGHT) / 2;
	var objPhotoName;
	var objWait;
	var strHTML;

	intWidth += 8;
	intHeight += 8;

	bShowControls	= bShowPlayerControls;
	bPlaying		= bStartAsPlaying;

	// Try to load the XML File.
	bPhotosLoaded = true;
	if (strXMLFile.length) bPhotosLoaded = loadPhotos(strXMLFile);

	// Create the HTML for the gallery.
	strHTML = '';

	if (bShowControls) {

		strHTML += '<div style="text-align:center; width:100%;">';
		strHTML += '	<div id="gallery" style="width:' + (intWidth + 2 * ARROW_DIV_WIDTH) + 'px; margin:auto;">';

		// Play|Pause / Name / Wait / X of Y
		strHTML += '		<div style="padding:0 ' + ARROW_DIV_WIDTH + 'px; margin-bottom:4px; font-family:helvetica; font-size:10px; color:#808080;">';
		strHTML += '			<div style="float:left;">';
		strHTML += '				<img id="playpause" src="Images/GalleryControls/Play.gif" alt="Play" style="width:16px; height:16px; cursor:pointer;" align="absmiddle" onclick="togglemode();" />';
		strHTML += '				<span id="photoname">Loading...</span>';
		strHTML += '				<img id="wait" src="Images/GalleryControls/Wait.gif" style="width:16px; height:16px;" align="absmiddle" />';
		strHTML += '			</div>';
		strHTML += '			<div style="float:right;">';
		strHTML += '				<span id="photonumber">' + intCurrentPhoto + '</span> of <span id="photocount">' + intPhotoCount + '</span>';
		strHTML += '			</div>';
		strHTML += '			<div style="clear:both;"></div>';
		strHTML += '		</div>';

		// Previous
		strHTML += '		<div>';
		strHTML += '			<div style="float:left; position:relative; width:' + ARROW_DIV_WIDTH + 'px; height:' + intHeight + 'px; cursor:pointer;" onmouseover="liOn(this);" onmouseout="liOff(this);" onclick="setPlaying(false); previous();">';
		strHTML += '				<img id="arrowprevious" style="position:absolute; width:' + ARROW_WIDTH + 'px; height:' + ARROW_HEIGHT + 'px; left:' + intArrowLeft + 'px; top:' + intArrowTop + 'px;" src="Images/GalleryControls/Previous.gif" alt="Previous" />';
		strHTML += '			</div>';
		strHTML += '			<div style="float:left; position:relative; width:' + intWidth + 'px; height:' + intHeight + 'px;">';

	} else {
		strHTML += '<div style="position:relative; width:' + intWidth + 'px; height:' + intHeight + 'px;">';		
	}

	// Photo
	strHTML += '				<div id="main" style="position:absolute; width:' + intWidth + 'px; height:' + intHeight + 'px; left:0px; top:0px; z-index:1; overflow:hidden; text-align:center;">';
	strHTML += '					<table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td align="center">';
	strHTML += '						<img id="mainphoto" class="photo" src="' + PHOTO_PATH + strArrPhotoFilename[intCurrentPhoto] + '" style="margin:auto; cursor:pointer;" onclick="setPlaying(false); next();" onload="crossFade(100);" />';
	strHTML += '					</td></tr></table>';
	strHTML += '				</div>';
	strHTML += '				<div id="fade" style="position:absolute; width:' + intWidth + 'px; height:' + intHeight + 'px; left:0px; top:0px; z-index:2; overflow:hidden; text-align:center;">';
	strHTML += '					<table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td align="center">';
	strHTML += '						<img id="fadephoto" class="photo" src="Images/GalleryControls/Spacer.gif" style="margin:auto;" />';
	strHTML += '					</td></tr></table>';
	strHTML += '				</div>';

	if (bShowControls) {

		// Next
		strHTML += '			</div>';
		strHTML += '			<div style="float:left; position:relative; width:' + ARROW_DIV_WIDTH + 'px; height:' + intHeight + 'px; cursor:pointer;" onmouseover="liOn(this);" onmouseout="liOff(this);" onclick="setPlaying(false); next();">';
		strHTML += '				<img id="arrownext" style="position:absolute; width:' + ARROW_WIDTH + 'px; height:' + ARROW_HEIGHT + 'px; left:' + intArrowLeft + 'px; top:' + intArrowTop + 'px;" src="Images/GalleryControls/Next.gif" alt="Next" />';
		strHTML += '			</div>';
		strHTML += '			<div style="clear:both;"></div>';
		strHTML += '		</div>';

		strHTML += '	</div>';
		strHTML += '</div>';

	} else {
		strHTML += '</div>';
	}

	// Copy the gallery HTML into it's <div>.
	objGallery.innerHTML = strHTML;

	// Successfully loaded the photos?
	if (bPhotosLoaded) {
		showPhoto(intCurrentPhoto);
		setPlaying(bPlaying);
	} else if (bShowControls) {
		objPhotoName				= document.getElementById('photoname');
		objWait						= document.getElementById('wait');		
		objPhotoName.innerHTML		= 'Sorry, the photos couldn\'t be loaded.';
		objWait.style.visibility	= 'hidden';
	}
}



function setOpacity(obj, opacity) {

	opacity = (opacity == 100) ? 99.999 : opacity;

	// IE/Win
	obj.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ");";

	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity / 100;

	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity / 100;

	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity / 100;
}



function crossFade(intOpacity) {

	var objMain			= document.getElementById('main');
	var objFade			= document.getElementById('fade');
	var objWait			= document.getElementById('wait');
	var objPhotoName	= document.getElementById('photoname');
	var objPhotoNumber	= document.getElementById('photonumber');

	if (intOpacity == 0) {
		objFade.style.visibility	= 'hidden';
		setOpacity(objMain, 100);
		bLoading = false;
	} else {
		
		if (bShowControls) {
			objWait.style.visibility	= 'hidden';
			objPhotoNumber.innerHTML	= intCurrentPhoto;
			objPhotoName.innerHTML		= strArrPhotoName[intCurrentPhoto];
		}

		setOpacity(objFade, intOpacity);
		setOpacity(objMain, 100 - intOpacity);
		setTimeout('crossFade(' + (intOpacity - CROSSFADE_STEP) + ');', CROSSFADE_DELAY);
	}
}



function showPhoto(intPhotoNumber) {

	// Cross-fades to the desired photo

	// Get the objects
	var objMain					= document.getElementById('main');
	var objMainPhoto			= document.getElementById('mainphoto');
	var objFade					= document.getElementById('fade');
	var objFadePhoto			= document.getElementById('fadephoto');
	var objWait					= document.getElementById('wait');

	// Set the loading flag to stop the previous() and next() functions from working until the new image is loaded.
	bLoading = true;

	if (bShowControls) {
		objWait.style.visibility = "visible";
	}

	// Copy the old main photo to the fade.
	objFadePhoto.alt			= objMainPhoto.alt;
	objFadePhoto.src			= objMainPhoto.src;
	objFadePhoto.className		= objMainPhoto.className;

	// Show the fade photo
	objFade.style.visibility	= "visible";
	setOpacity(objFade, 100);

	// Hide the main photo
	objMain.style.visibility	= "visible";
	setOpacity(objMain, 0);

	// Change the main photo
	intCurrentPhoto				= intPhotoNumber;
	objMainPhoto.src			= PHOTO_PATH + strArrPhotoFilename[intCurrentPhoto];
	objMainPhoto.alt			= strArrPhotoName[intCurrentPhoto];
	objMainPhoto.className		= "photo";
}



function previous() {
	if (intPhotoCount > 0) {

		if (!bLoading) {

			intCurrentPhoto--;
			// Loop to the last photo.
			if (intCurrentPhoto < 1) intCurrentPhoto = intPhotoCount;
			showPhoto(intCurrentPhoto);
		}
	}
}



function next() {

	if (intPhotoCount > 0) {

		if (!bLoading) {

			intCurrentPhoto++;
			// Loop to the first photo.
			if (intCurrentPhoto > intPhotoCount) intCurrentPhoto = 1;
			showPhoto(intCurrentPhoto);
		}
	}
}


function setPlaying(bValue) {

	var objPlayPause = document.getElementById('playpause');

	if (intPhotoCount > 0) {

		bPlaying = bValue;
		if (bPlaying) {
			if (bShowControls) {
				objPlayPause.src	= 'Images/GalleryControls/Pause.gif';
				objPlayPause.alt	= 'Pause';
			}
			playTimer			= setInterval('next()', PLAY_DELAY);
		} else {
			if (bShowControls) {
				objPlayPause.src	= 'Images/GalleryControls/Play.gif';
				objPlayPause.alt	= 'Play';
			}
			clearInterval(playTimer);
		}
	}
}