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

Andrew Wyatt
andrew@wyatt-software.com

      Started: 2009-08-26
Last Modified: 2011-04-12


function initGallery(
	intPhotoWidth,
	intPhotoHeight,
	intBorders,
	strPhotoClass, 
	intThumbsPerPage,
	intThumbHeight,
	strXMLFile,
	bStartAsPlaying,
	intPlaySpeed,
	bShowPlayerControls,
	bShowPhotoName,
	bShowThumbs
)
*/


// Constants
var PHOTO_PATH					= '';

var THUMB_ARROW_WIDTH			= 16;
var THUMB_ARROW_HEIGHT			= 60;

var CROSSFADE_STEP				= 10;
var CROSSFADE_DELAY				= 25;
var SCROLL_DELAY				= 20;



// Global Variables.
var strArrPhotoName				= new Array();
var strArrPhotoFilename			= new Array();
var strArrPhotoFilenameThumb	= new Array();

strArrPhotoName				[0]	= 'Loading...';
strArrPhotoFilename			[0]	= 'Images/GalleryControls/Spacer.gif';
strArrPhotoFilenameThumb	[0]	= 'Images/GalleryControls/Spacer.gif';

var intWidth					= 600;
var intHeight					= 400;
var intPhotoCount				= 0;
var intCurrentPhoto				= 0;
var intPlayDelay				= 4000;

var bLoading					= false;
var bPlaying					= false;
var bScrolling					= false;
var bShowControls				= false;
var bShowName					= false;
var playTimer;

// Scrolling
var intFrom						= 0;
var intTo						= 0;
var intHalfWay					= 0;
var intSpeed					= 0;
var intDirection				= 0;
var intAcceleration				= 2;
var intContainerWidth			= 0;
var intMaxLeft;





// 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;
			strArrPhotoFilenameThumb	[intPhotoCount] = x[i].getElementsByTagName("filenamethumb")[0].childNodes[0].nodeValue;
		}

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

	return bSuccess;
}



function initGallery(
		intPhotoWidth,
		intPhotoHeight,
		intBorders,
		strPhotoClass, 
		intThumbsPerPage,
		intThumbHeight,
		strXMLFile,
		bStartAsPlaying,
		intPlaySpeed,
		bShowPlayerControls,
		bShowPhotoName,
		bShowThumbs
	) {

	// Initialises the gallery.

	var objGallery		= document.getElementById('gallery');
	var bPhotosLoaded	= false;
	var objPhotoName;
	var objWait;
	var strHTML;
	var intBorder		= parseInt(intBorders / 2);
	var intScrollWidth;
	var intThumbArrowTop;

	intWidth			= intPhotoWidth + intBorders;
	intHeight			= intPhotoHeight + intBorders;
	intPlayDelay		= intPlaySpeed * 1000;
	bShowControls		= bShowPlayerControls;
	bShowName			= bShowPhotoName;

	var intThumbWidth	= parseInt((intWidth - THUMB_ARROW_WIDTH * 2) / intThumbsPerPage);

	bPlaying			= bStartAsPlaying;

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

	// Create the HTML for the gallery.
	strHTML = '<div style="width:' + intWidth + 'px;">';

	if (bShowControls) {

		// Play|Pause / Prev / Next / Name / Wait / X of Y
		strHTML += '	<div style="margin-bottom:4px; font-family:helvetica; font-size:10px; color:#808080;">';
		strHTML += '		<div style="float:left;">';
		strHTML += '			<img id="arrowprevious"	src="Images/GalleryControls/Previous.gif"	alt="Previous"	style="width:16px; height:16px; vertical-align:middle; cursor:pointer;" onclick="setPlaying(false); previous();" />';
		strHTML += '			<img id="arrownext"		src="Images/GalleryControls/Next.gif"		alt="Next"		style="width:16px; height:16px; vertical-align:middle; cursor:pointer;" onclick="setPlaying(false); next();"" />';
		strHTML += '			<img id="playpause"		src="Images/GalleryControls/Play.gif"		alt="Play"		style="width:16px; height:16px; vertical-align:middle; cursor:pointer;" onclick="togglemode();" />';
		strHTML += '			<span id="status">Loading...</span>';
		strHTML += '			<img id="wait" src="Images/GalleryControls/Wait.gif" style="width:16px; height:16px; vertical-align:middle;" />';
		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>';
	}

	strHTML += '	<div style="position:relative; width:' + intWidth + 'px; height:' + intHeight + 'px;">';
	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 += '				<table cellspacing="0" cellpadding="0"><tr><td>';
	strHTML += '					<div style="position:relative;">';
	strHTML += '						<img id="mainphoto" class="' + strPhotoClass + '" src="' + strArrPhotoFilename[intCurrentPhoto] + '" style="margin:auto; cursor:pointer;" onclick="setPlaying(false); next();" onload="crossFade(100);" />';
	if (bShowName) strHTML += '			<div id="mainphotoname" style="position:absolute; height:48px; line-height:48px; text-align:left; color:#ffffff; font-size:17px; padding:0 12px; left:' + intBorder + 'px; bottom:' + intBorder + 'px; right:' + intBorder + 'px; background:url(Images/GalleryControls/000000_50.png);">' + strArrPhotoName[intCurrentPhoto] + '</div>';
	strHTML += '					</div>';
	strHTML += '				</td></tr></table>';
	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 += '				<table cellspacing="0" cellpadding="0"><tr><td>';
	strHTML += '					<div style="position:relative;">';
	strHTML += '						<img id="fadephoto" class="' + strPhotoClass + '" src="Images/GalleryControls/Spacer.gif" style="margin:auto;" />';
	if (bShowName) strHTML += '			<div id="fadephotoname" style="position:absolute; height:48px; line-height:48px; text-align:left; color:#ffffff; font-size:17px; padding:0 12px; left:' + intBorder + 'px; bottom:' + intBorder + 'px; right:' + intBorder + 'px; background:url(Images/GalleryControls/000000_50.png);"></div>';
	strHTML += '					</div>';
	strHTML += '				</td></tr></table>';
	strHTML += '			</td></tr></table>';
	strHTML += '		</div>';
	strHTML += '	</div>';

	if (bShowThumbs) {

		intContainerWidth	= intThumbsPerPage * intThumbWidth;
		intScrollWidth		= intPhotoCount * intThumbWidth;
		intMaxLeft			= intScrollWidth - intContainerWidth;
		intThumbArrowTop	= parseInt(((intThumbHeight + intBorders) - THUMB_ARROW_HEIGHT) / 2);

		strHTML += '	<div style="width:' + intWidth + 'px; margin-top:4px;">\n';

		strHTML += '		<div id="thumbspreviouscontainer" style="float:left; width:' + THUMB_ARROW_WIDTH + 'px; margin-top:' + intThumbArrowTop + 'px; visibility:hidden;">';
		strHTML += '			<a href="javascript:scrollprevious();"><img src="Images/GalleryControls/ThumbPrevious.png" width="' + THUMB_ARROW_WIDTH + '" height="' + THUMB_ARROW_HEIGHT + '" alt="Previous" style="border:none;" /></a>';
		strHTML += '		</div>';

		strHTML += '		<div id="thumbscontainer" style="float:left; width:' + intContainerWidth + 'px; height:' + (intThumbHeight + intBorders) + 'px; overflow:hidden;">';
		strHTML += '			<div style="width:' + intScrollWidth + 'px; height:' + (intThumbHeight + intBorders) + 'px; text-align:center; margin:auto;">';

		strHTML += '				<table cellpadding="0" cellspacing="0" height="' + (intThumbHeight + intBorders) + '">';
		strHTML += '				<tbody>';
		strHTML += '				<tr>';
		
		for (var i = 1; i <= intPhotoCount; i++) {
			strHTML += '			<td style="width:' + intThumbWidth + 'px; text-align:center;"><a href="javascript:;" onclick="setPlaying(false); showPhoto(' + i + ');"><img class="' + strPhotoClass + '" src="' + strArrPhotoFilenameThumb[i] + '" /></a></td>';
		}

		strHTML += '				</tr>';
		strHTML += '				</tbody>';
		strHTML += '				</table>';

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

		strHTML += '		<div id="thumbsnextcontainer" style="float:left; width:' + THUMB_ARROW_WIDTH + 'px; margin-top:' + intThumbArrowTop + 'px;' + (intPhotoCount > intThumbsPerPage ? '' : ' visibility:hidden;') + '">';
		strHTML += '			<a href="javascript:scrollnext();"><img src="Images/GalleryControls/ThumbNext.png" width="' + THUMB_ARROW_WIDTH + '" height="' + THUMB_ARROW_HEIGHT + '" alt="Next" style="border:none;" /></a>';
		strHTML += '		</div>';

		strHTML += '		<div style="clear:both;"></div>';
		strHTML += '	</div>';
	}

	strHTML += '</div>';

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

	// Successfully loaded the photos?
	if (bPhotosLoaded) {
		setPlaying(bPlaying);
	} else if (bShowControls) {
		if (bShowName) {
			objPhotoName			= document.getElementById('photoname');
			objPhotoName.innerHTML	= 'Sorry, the photos couldn\'t be loaded.';
		}
		objWait						= document.getElementById('wait');
		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 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;
		}

		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 objMainPhotoName		= document.getElementById('mainphotoname');
	var objFade					= document.getElementById('fade');
	var objFadePhoto			= document.getElementById('fadephoto');
	var objFadePhotoName		= document.getElementById('fadephotoname');
	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;
	if (bShowName) objFadePhotoName.innerHTML = objMainPhotoName.innerHTML
	objFadePhoto.src			= objMainPhoto.src;

	// 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];
	if (bShowName) objMainPhotoName.innerHTML = strArrPhotoName[intCurrentPhoto];
}



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');
	var objStatus		= document.getElementById('status');

	if (intPhotoCount > 0) {

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



function scrollprevious() {
	if (intSpeed == 0) {
		var objThumbsContainer = document.getElementById('thumbscontainer');
		intFrom	= objThumbsContainer.scrollLeft;
		intTo	= intFrom - intContainerWidth;
		if (intTo < 0) intTo = 0;	
		intHalfWay = (intFrom + intTo) / 2;
		intDirection = -1;
		intSpeed = intAcceleration;
		setTimeout('scroll()', SCROLL_DELAY);
	}
}



function scrollnext() {
	if (intSpeed == 0) {
		var objThumbsContainer = document.getElementById('thumbscontainer');
		intFrom	= objThumbsContainer.scrollLeft;
		intTo	= intFrom + intContainerWidth;
		if (intTo > intMaxLeft) intTo = intMaxLeft;
		intHalfWay = (intFrom + intTo) / 2;
		intDirection = 1;
		intSpeed = intAcceleration;
		setTimeout('scroll()', SCROLL_DELAY);
	}
}

function scroll() {
	var objThumbsContainer			= document.getElementById('thumbscontainer');
	var objThumbsNextContainer		= document.getElementById('thumbsnextcontainer');
	var objThumbsPreviousContainer	= document.getElementById('thumbspreviouscontainer');
	var intLeft						= objThumbsContainer.scrollLeft;

	intLeft += intDirection * intSpeed;

	if (intDirection < 0) {
		if (intLeft < intTo) {
			intLeft = intTo;
			intSpeed = 0;
		} else {
			if (intLeft >= intHalfWay) {
				intSpeed += intAcceleration;
			} else {
				intSpeed -= intAcceleration;
				if (intSpeed < intAcceleration) intSpeed = intAcceleration;
			}
			setTimeout('scroll()', SCROLL_DELAY);
		}
	} else {
		if (intLeft > intTo) {
			intLeft = intTo;
			intSpeed = 0;
		} else {
			if (intLeft <= intHalfWay) {
				intSpeed += intAcceleration;
			} else {
				intSpeed -= intAcceleration;
				if (intSpeed < intAcceleration) intSpeed = intAcceleration;
			}
			setTimeout('scroll()', SCROLL_DELAY);
		}
	}

	objThumbsContainer.scrollLeft = intLeft;
	objThumbsNextContainer.style.visibility = (intLeft < intMaxLeft) ? 'visible' : 'hidden';
	objThumbsPreviousContainer.style.visibility = (intLeft > 0) ? 'visible' : 'hidden';
}