// Image Album / Thumbnail Menu
// Copyright Tony Wallace / Heuristic Media, 2009
// Requires jQuery http://www.jquery.com

// Selected image numbers are output from the loadImage() function.

// Image directories:
var imagesDirectory = 'images/';
var thumbnailsDirectory = 'images/thumbnails/';

// Define colors and opacity:
var textBaseColor = "#999999";
var textHighlightColor = "#ffffff";
var thumbnailBorderBaseColor = "#333333";
var thumbnailBorderHighlightColor = "#999999";
var thumbnailBaseOpacity = 0.6;
var thumbnailHighlightOpacity = 1.0;

var titleColors = new Array();
titleColors[0] = "#999999";
titleColors[1] = "#A6A6A6";
titleColors[2] = "#B0B0B0";
titleColors[3] = "#BABABA";
titleColors[4] = "#C4C4C4";
titleColors[5] = "#CECECE";
titleColors[6] = "#D8D8D8";
titleColors[7] = "#E2E2E2";
titleColors[8] = "#ECECEC";
titleColors[9] = "#F6F6F6";
titleColors[10] = "#FFFFFF";

var loadStatusMeterColors = new Array();
loadStatusMeterColors[0] = "#333333";
loadStatusMeterColors[1] = "#666666";
loadStatusMeterColors[2] = "#999999";
loadStatusMeterColors[3] = "#FFFFFF";

// Fade times:
var titleFadeTime = 100;
var thumbnailFadeTime = 200;
var thumbnailFadeResolution = 10;
var slideshowImageHoldTime = 3000;
var slideshowImageFadeTime = 1000;
var slideshowImageFadeResolution = 10;

// Initialize global mouse position variables:
var menuMousePosX = 0;
var menuMousePosY = 0;

// Initialize menu element arrays:
var thumbnailMenuTitles = new Array();
var thumbnails = new Array();
var thumbnailMenuPanels = new Array();

// Menu element object definitions:
function thumbnailMenuTitleObject(titleElement, collectionNumber, isHighlighted, isSelected, titleColorIndex, fadeTimerId) {
	this.element = titleElement;
	this.collection = collectionNumber;
	this.highlighted = isHighlighted;
	this.selected = isSelected;
	this.colorIndex = titleColorIndex;
	this.fadeTimer = fadeTimerId;
}

function thumbnailObject(imgElement, frameElement, collectionNumber, isHighlighted, isSelected, imgOpacity, fadeTimerId) {
	this.image = imgElement;
	this.frame = frameElement;
	this.collection = collectionNumber;
	this.highlighted = isHighlighted;
	this.selected = isSelected;
	this.currentOpacity = imgOpacity;
	this.fadeTimer = fadeTimerId;
}

function thumbnailMenuPanelObject(panelElement, collectionNumber, isVisible) {
	this.element = panelElement;
	this.collection = collectionNumber;
	this.visible = isVisible;
}

// Contact menu object definitions:

var contactMenuObj = null;

function contactMenuObject(titleElement, menuElement, itemsArray, isVisible) {

	this.title = new contactMenuTitleObject(
		titleElement,
		false,
		false,
		0,
		0
	);
	
	this.element = menuElement;
	this.items = itemsArray;
	this.visible = false;
	
}

function contactMenuTitleObject(titleElement, isHighlighted, isSelected, isSelected, titleColorIndex, fadeTimerId) {
	this.element = titleElement;
	this.highlighted = isHighlighted;
	this.selected = isSelected;
	this.colorIndex = titleColorIndex;
	this.fadeTimer = fadeTimerId;
}

function contactMenuItemObject(itemElement, isHighlighted, isSelected, titleColorIndex, fadeTimerId) {
	this.element = itemElement;
	this.highlighted = isHighlighted;
	this.selected = isSelected;
	this.colorIndex = titleColorIndex;
	this.fadeTimer = fadeTimerId;
}

// Load status meter object definition:

var loadStatusMeter = null;

function loadStatusMeterObject(meterElement, segmentElements, segmentColors, currentSegmentNumber, timerId) {
	this.element = meterElement;
	this.segments = segmentElements;
	this.colors = segmentColors;
	this.currentSegment = currentSegmentNumber;
	this.timer = timerId;
}

// Slideshow object definition:

var slideshowObj = null;
var slideshowTitleObj = null;

function slideshowObject(slideshowData, isPlaying, currentPosition, pauseTimerId, fadeTimerId) {
	this.images = slideshowData;
	this.playing = isPlaying;
	this.position = currentPosition;
	this.pauseTimer = pauseTimerId;
	this.fadeTimer = fadeTimerId;
}

// IMPLEMENTATION:

window.onload = function() {
	setupLoadStatusMeter();
	setupContactMenu();
	setupThumbnailMenu();
	//loadSlideshow();
}

function setupContactMenu() {

	var contactMenu = document.getElementById("contact_menu");
	var contactMenuElements = contactMenu.childNodes;
	var contactMenuItemObjectArray = new Array();
	
	for (var i = 0; i < contactMenuElements.length; i++) {
	
		contactMenuElements[i].onmouseover = contactMenuElements[i].onmouseout = contactMenuHighlightItemTitle;
		
		contactMenuItemObjectArray[i] = new contactMenuItemObject(
			contactMenuElements[i],
			false,
			false,
			0,
			0
		);
		
	}

	contactMenuObj = new contactMenuObject(
		document.getElementById("contact_menu_title"),
		document.getElementById("contact_menu"),
		contactMenuItemObjectArray,
		false
	);
	
	contactMenuObj.title.element.onmouseover =contactMenuObj.title.element.onmouseout = contactMenuHighlightTitle;
	contactMenuObj.title.element.onclick = toggleContactMenu;
	
	// Prevent text selection in the menu:
	contactMenuObj.title.element.onmousedown = contactMenuObj.element.onmousedown = function() {
		return false;
	}
	
}

function toggleContactMenu() {
	
	if (contactMenuObj.visible) {
		contactMenuObj.title.selected = false;
		hideContactMenu();
	} else {
		contactMenuObj.title.selected = true;
		showContactMenu();
	}
	
}

function showContactMenu() {
	$("#" + contactMenuObj.element.id).slideDown(500);
	contactMenuObj.visible = true;
}

function hideContactMenu() {
	$("#" + contactMenuObj.element.id).slideUp(500);
	contactMenuObj.visible = false;
}

function setupThumbnailMenu() {

	// Set up the slideshow title object:
	/*
	var slideshowTitle = document.getElementById("title_for_slideshow");
	
	slideshowTitleObj = new thumbnailMenuTitleObject(
		slideshowTitle,
		null,
		false,
		false,
		0,
		0
	);
	
	slideshowTitleObj.element.onmouseover = slideshowTitleObj.element.onmouseout = slideshowHighlightTitle;
	slideshowTitleObj.element.onclick = clickPlaySlideshow;
	*/
	// Get the thumbnail menu element:

	var thumbnailMenu = document.getElementById("thumbnail_menu");
	var thumbnailMenuGroups = thumbnailMenu.childNodes;
	
	// Set up title & thumbnail objects, set mouse behaviour:
	
	var t = 0; // Thumbnails array counter.
	
	for (var i = 0; i < thumbnailMenuGroups.length; i++) {
	
		thumbnailMenuTitles[i] = new thumbnailMenuTitleObject(
			titleElementForThumbnailMenuGroup(i),
			collectionNumberForThumbnailMenuGroup(i),
			false,
			false,
			0,
			0
		);
		
		thumbnailMenuTitles[i].element.onmouseover = thumbnailMenuTitles[i].element.onmouseout = thumbnailMenuHighlightTitle;
		thumbnailMenuTitles[i].element.onclick = clickToggleThumbnailPanel;
		
		thumbnailMenuPanels[i] = new thumbnailMenuPanelObject(
			thumbnailPanelElementForThumbnailMenuGroup(i),
			collectionNumberForThumbnailMenuGroup(i),
			false
		);
		
		var thumbnailFrames = thumbnailMenuPanels[i].element.childNodes;
				
		for (var n = 0; n < thumbnailFrames.length; n++) {
	
			thumbnails[t] = new thumbnailObject(
				thumbnailFrames[n].childNodes[0],
				thumbnailFrames[n],
				thumbnailMenuTitles[i].collection,
				false,
				false,
				thumbnailBaseOpacity,
				0
			);
				
			thumbnails[t].image.onmouseover = thumbnails[t].image.onmouseout = highlightThumbnail;
			thumbnails[t].image.onclick = clickLoadImage;
			
			t++;
			
			/*
			// Load default image (first image in first colection):
			if (i == 0 && n == 0) {
				loadImage(thumbnailFrames[n].childNodes[0]);
			}
			*/
			
		}
		
	}
	
	/*
	// Show the default thumbnail menu (first collection):
	toggleThumbnailPanel(thumbnailMenuTitles[0].element);
	*/
		
	// Prevent text selection in the menu:
	thumbnailMenu.onmousedown = /*slideshowTitle.onmousedown =*/ function() {
		return false;
	}

}

function thumbnailObjectForImage(imageElement) {

	thumbnailObj = null;
	
	for (var i = 0; i < thumbnails.length; i++) {
	
		if (thumbnails[i].image.id == imageElement.id) {
			thumbnailObj = thumbnails[i];
		}
		
	}
	
	return thumbnailObj;
	
}

function highlightThumbnail() {

	thumbnailObj = thumbnailObjectForImage(this);
	
	if (thumbnailObj.highlighted && !thumbnailObj.selected)  {
		thumbnailOpacityFadeOut(thumbnailObj);
	} else {
		thumbnailOpacityFadeIn(thumbnailObj);
	}
	
}

function thumbnailOpacityFadeIn(thumbnailObj) {

	clearInterval(thumbnailObj.fadeTimer);

	thumbnailObj.highlighted = true;
	
	if (!thumbnailObj.selected) {
	
		var op = thumbnailObj.currentOpacity;
		
		thumbnailObj.fadeTimer = setInterval(
			function() {
				op = op + ((thumbnailHighlightOpacity - thumbnailBaseOpacity) / thumbnailFadeResolution);
				thumbnailObj.currentOpacity = op;
				thumbnailObj.image.style.opacity = op;
				thumbnailObj.image.style.filter = "alpha(opacity=" + (op * 100) + ")";
				if (op >= thumbnailHighlightOpacity) {
					thumbnailObj.image.style.opacity = thumbnailHighlightOpacity;
					clearInterval(thumbnailObj.fadeTimer);
				}
			}, (thumbnailFadeTime / thumbnailFadeResolution));
		
	}
		
}

function thumbnailOpacityFadeOut(thumbnailObj) {

	clearInterval(thumbnailObj.fadeTimer);

	thumbnailObj.highlighted = false;
	
	if (!thumbnailObj.selected) {
	
		var op = thumbnailObj.currentOpacity;
		
		thumbnailObj.fadeTimer = setInterval(
			function() {
				op = op - ((thumbnailHighlightOpacity - thumbnailBaseOpacity) / thumbnailFadeResolution);
				thumbnailObj.currentOpacity = op;
				thumbnailObj.image.style.opacity = op;
				thumbnailObj.image.style.filter = "alpha(opacity=" + (op * 100) + ")";
				if (op <= thumbnailBaseOpacity) {
					thumbnailObj.image.style.opacity = thumbnailBaseOpacity;
					clearInterval(thumbnailObj.fadeTimer);
				}
			}, (thumbnailFadeTime / thumbnailFadeResolution));
		
	}
		
}

function selectThumbnail(imageElement) {

	thumbnailObj = thumbnailObjectForImage(imageElement);
	
	thumbnailObj.image.style.opacity = thumbnailHighlightOpacity;
	thumbnailObj.image.style.filter = "alpha(opacity=" + (thumbnailHighlightOpacity * 100) + ")";
	thumbnailObj.frame.style.borderColor = thumbnailBorderHighlightColor;
	thumbnailObj.selected = true;
	
	// Reset opacity and border for all other thumbnails:
	resetOtherThumbnails(thumbnailObj);
	
}

function resetOtherThumbnails(thumbnailObj) {
	
	for (var i = 0; i < thumbnails.length; i++) {
		if (thumbnails[i].image.id != thumbnailObj.image.id) {
			thumbnails[i].selected = false;
			thumbnailOpacityFadeOut(thumbnails[i]);
			thumbnails[i].frame.style.borderColor = thumbnailBorderBaseColor;
		}
	}
	
}

function resetAllThumbnails() {
	
	for (var i = 0; i < thumbnails.length; i++) {
		thumbnails[i].selected = false;
		thumbnailOpacityFadeOut(thumbnails[i]);
		thumbnails[i].frame.style.borderColor = thumbnailBorderBaseColor;
	}
	
}

function clickLoadImage() {
	loadImage(this);
}

function loadImage(imgElement) {

	// Stop the slideshow if it's playing:
	/*
	if (slideshowObj.playing) {
		endSlideshow();
	}
	*/
	selectThumbnail(imgElement);
	
	var imageNumbers = getNumbersForImageElement(imgElement);
	
	// Output:
	// imageNumbers['collection'] : collection number
	// imageNumbers['image'] : image number
	
	// Start animating the load status meter:
	var loadStatusMeter = startLoadStatusMeter();
	
	// Fetch the requested image data:
	
	$.post("resources/php/ajax/load_image.php",
		{c_num: imageNumbers['collection'], img_num: imageNumbers['image']},
		function(data) { writeImageData( JSON.parse(data) ); }
	);
	
}

function createImageCaptionElements(loadedImageObj) {

	var imageCaptionElements = new Array();

	if (loadedImageObj.title) {
		imageCaptionElements['title'] = document.createElement("p");
		imageCaptionElements['title'].id = "image_caption_title";
		imageCaptionElements['title'].className = "image_caption_item";
		imageCaptionElements['title'].innerHTML = unescape(loadedImageObj.title);
	}
	
	if (loadedImageObj.creator) {
		imageCaptionElements['creator'] = document.createElement("p");
		imageCaptionElements['creator'].id = "image_caption_creator";
		imageCaptionElements['creator'].className = "image_caption_item";
		imageCaptionElements['creator'].innerHTML = unescape(loadedImageObj.creator);
	}
	
	if (loadedImageObj.date) {
		imageCaptionElements['date'] = document.createElement("p");
		imageCaptionElements['date'].id = "image_caption_date";
		imageCaptionElements['date'].className = "image_caption_item";
		imageCaptionElements['date'].innerHTML = unescape(loadedImageObj.date);
	}
	
	if (loadedImageObj.description) {
		imageCaptionElements['description'] = document.createElement("p");
		imageCaptionElements['description'].id = "image_caption_description";
		imageCaptionElements['description'].className = "image_caption_item";
		imageCaptionElements['description'].innerHTML = unescape(loadedImageObj.description);
	}
	
	return imageCaptionElements;

}

function writeImageData(loadedImageObj) {
	
	var imageViewer = document.getElementById("image_viewer");
	var imageFrame = document.getElementById("image_frame");
	var imageCaption = document.getElementById("image_caption");
	
	var img = new Image();
	
	img.onload = function() {
	
		var frameMargin = ((imageViewer.offsetWidth - img.width) / 2);
		
		imageFrame.style.marginLeft = frameMargin + "px";
		imageFrame.style.marginRight = frameMargin + "px";
		imageCaption.style.marginLeft = frameMargin + "px";
		imageCaption.style.marginRight = frameMargin + "px";
		
		imageFrame.innerHTML = '';
		imageCaption.innerHTML = '';
		
		imageViewer.style.opacity = 1.0;
		imageViewer.style.filter = "alpha(opacity=100)";
		
		imageFrame.appendChild(img);
		
		var imageCaptionElements = createImageCaptionElements(loadedImageObj);
		
		for (var i in imageCaptionElements) {
			imageCaption.appendChild(imageCaptionElements[i]);
		}
		
		stopLoadStatusMeter(); // Stop animating the load status meter
		
	}
	
	img.src = imagesDirectory + loadedImageObj.image;

}

function getNumbersForImageElement(imageElement) {
	
	var numberSuffix = imageElement.id.substring(imageElement.id.lastIndexOf("_") + 1);
	
	var imageNumbers = new Array();
	imageNumbers['collection'] = numberSuffix.substring(0, numberSuffix.lastIndexOf("-"));
	imageNumbers['image'] = numberSuffix.substring(numberSuffix.lastIndexOf("-") + 1);
	
	return imageNumbers;
	
}

function menuTitleObjectForElement(titleElement, titleObjectsToCompare) {

	var menuTitleObj = null;
	
	for (var i = 0; i < titleObjectsToCompare.length; i++) {
		if (titleObjectsToCompare[i].element.id == titleElement.id) {
			menuTitleObj = titleObjectsToCompare[i];
		}
	}
	
	return menuTitleObj;
	
}

function contactMenuHighlightTitle() {

	var menuTitleObj = contactMenuObj.title;
	
	if (menuTitleObj.highlighted && !menuTitleObj.selected)  {
		menuTitleObj.highlighted = false;
		titleColorFadeOut(menuTitleObj);
	} else {
		menuTitleObj.highlighted = true;
		titleColorFadeIn(menuTitleObj);
	}
	
}

function contactMenuHighlightItemTitle() {

	var menuTitleObj = menuTitleObjectForElement(this, contactMenuObj.items);
	
	if (menuTitleObj.highlighted && !menuTitleObj.selected)  {
		menuTitleObj.highlighted = false;
		titleColorFadeOut(menuTitleObj);
	} else {
		menuTitleObj.highlighted = true;
		titleColorFadeIn(menuTitleObj);
	}
	
}

function thumbnailMenuHighlightTitle() {

	var menuTitleObj = menuTitleObjectForElement(this, thumbnailMenuTitles);
	
	if (menuTitleObj.highlighted && !menuTitleObj.selected)  {
		menuTitleObj.highlighted = false;
		titleColorFadeOut(menuTitleObj);
	} else {
		menuTitleObj.highlighted = true;
		titleColorFadeIn(menuTitleObj);
	}
	
}

function titleColorFadeIn(menuTitleObj) {

	clearInterval(menuTitleObj.fadeTimer);
	
	if (!menuTitleObj.selected) {
		
		menuTitleObj.fadeTimer = setInterval(
			function() {
				menuTitleObj.element.style.color = titleColors[menuTitleObj.colorIndex];
				menuTitleObj.colorIndex++;
				if (menuTitleObj.colorIndex >= (titleColors.length - 1)) {
					menuTitleObj.element.style.color = titleColors[titleColors.length - 1];
					menuTitleObj.colorIndex = titleColors.length - 1;
					clearInterval(menuTitleObj.fadeTimer);
				}
			}, (titleFadeTime / titleColors.length));
		
	}
		
}

function titleColorFadeOut(menuTitleObj) {

	clearInterval(menuTitleObj.fadeTimer);
	
	if (!menuTitleObj.selected) {
		
		menuTitleObj.fadeTimer = setInterval(
			function() {
				menuTitleObj.element.style.color = titleColors[menuTitleObj.colorIndex];
				menuTitleObj.colorIndex = menuTitleObj.colorIndex - 1;
				if (menuTitleObj.colorIndex <= 0) {
					menuTitleObj.element.style.color = titleColors[0];
					menuTitleObj.colorIndex = 0;
					clearInterval(menuTitleObj.fadeTimer);
				}
			}, (titleFadeTime / titleColors.length));
		
	}
		
}

function thumbnailPanelForTitleElement(titleElement) {

	var thumbnailPanelElement = thumbnailPanelElementForThumbnailMenuGroup(getItemNumberFromString(titleElement.id));
	
	thumbnailPanelObj = null;
	
	for (var i = 0; i < thumbnailMenuPanels.length; i++) {
		if (thumbnailMenuPanels[i].element.id == thumbnailPanelElement.id) {
			thumbnailPanelObj = thumbnailMenuPanels[i];
		}
	}
	
	return thumbnailPanelObj;

}

function titleObjectForThumbnailPanel(thumbPanel) {

	var thumbnailPanelElement = titleElementForThumbnailMenuGroup(getItemNumberFromString(thumbPanel.id));
	
	titleElementObj = null;
	
	for (var i = 0; i < thumbnailMenuTitles.length; i++) {
		if (thumbnailMenuTitles[i].element.id == thumbnailPanelElement.id) {
			titleElementObj = thumbnailMenuTitles[i];
		}
	}
	
	return titleElementObj;

}

function thumbnailObjectForImage(imageElement) {
	
	var imageNum = getItemNumberFromString(imageElement.id);
	
	thumbnailObject = null;
	
	for (var i = 0; i < thumbnails.length; i++) {
	
		var thumbnailNum = getItemNumberFromString(thumbnails[i].image.id);
		
		if (thumbnailNum == imageNum) {
			thumbnailObject = thumbnails[i];
		}
		
	}
	
	return thumbnailObject;

}

function clickToggleThumbnailPanel() {
	toggleThumbnailPanel(this);
	//resetSlideshowTitle();
}

function toggleThumbnailPanel(titleElement) {

	var thumbnailPanelObj = thumbnailPanelForTitleElement(titleElement);
	var menuTitleObj = menuTitleObjectForElement(titleElement, thumbnailMenuTitles);
	
	if (thumbnailPanelObj.visible) {
		
		hideThumbnailPanel(thumbnailPanelObj);
		
		if (!menuTitleObj.highlighted)  {
			titleColorFadeOut(menuTitleObj);
		}
		
		menuTitleObj.selected = false;
		
	} else {
	
		showThumbnailPanel(thumbnailPanelObj);
		
		titleColorFadeIn(menuTitleObj);
		menuTitleObj.selected = true;
		
	}
	
	// Hide all other thumbnail panels:
	hideOtherThumbnailPanels(thumbnailPanelObj);

}

function hideOtherThumbnailPanels(thumbnailPanelObj) {
	
	for (var i = 0; i < thumbnailMenuPanels.length; i++) {
	
		menuTitleObj = menuTitleObjectForElement(titleElementForThumbnailMenuGroup(i), thumbnailMenuTitles);
		
		if (thumbnailMenuPanels[i].element.id != thumbnailPanelObj.element.id) {
		
			menuTitleObj.selected = menuTitleObj.highlighted = false;
			titleColorFadeOut(menuTitleObj);
			hideThumbnailPanel(thumbnailMenuPanels[i]);
			
		}
		
	}

}

function hideAllThumbnailPanels() {
	
	for (var i = 0; i < thumbnailMenuPanels.length; i++) {
	
		menuTitleObj = menuTitleObjectForElement(titleElementForThumbnailMenuGroup(i), thumbnailMenuTitles);
		
		menuTitleObj.selected = menuTitleObj.highlighted = false;
		titleColorFadeOut(menuTitleObj);
		hideThumbnailPanel(thumbnailMenuPanels[i]);
		
	}

}

function showThumbnailPanel(thumbnailPanelObj) {
	$("#" + thumbnailPanelObj.element.id).slideDown(500);
	thumbnailPanelObj.visible = true;
}

function hideThumbnailPanel(thumbnailPanelObj) {
	$("#" + thumbnailPanelObj.element.id).slideUp(500);
	thumbnailPanelObj.visible = false;
}

function getChildNodesForItem(itemID) {
	return document.getElementById(itemID).childNodes;
}

function getItemNumberFromString(string) {
	return string.substring(string.lastIndexOf('_') + 1);
}

function titleElementForThumbnailMenuGroup(groupNumber) {
	return document.getElementById("title_for_thumbnail_menu_group_" + groupNumber);
}

function collectionNumberForThumbnailMenuGroup(groupNumber) {
	return document.getElementById("collection_num_for_thumbnail_menu_group_" + groupNumber).value;
}

function thumbnailPanelElementForThumbnailMenuGroup(groupNumber) {
	return document.getElementById("thumbnail_panel_for_thumbnail_menu_group_" + groupNumber);
}

function setupLoadStatusMeter() {

	// Create the status meter object:
	
	loadStatusMeter = new loadStatusMeterObject(
		document.getElementById("load_status_meter"),
		document.getElementById("load_status_meter").childNodes,
		loadStatusMeterColors,
		0,
		0
	);

}

function startLoadStatusMeter() {
	
	loadStatusMeter.timer = setInterval(
		function() {
			for (var i = 0; i < loadStatusMeter.segments.length; i++) {
			
				var firstSegment = loadStatusMeter.currentSegment;
				var secondSegment = firstSegment - 1;
				if (secondSegment < 0) {
					secondSegment = 0;
				}
				var thirdSegment = secondSegment - 1;
				if (thirdSegment < 0) {
					thirdSegment = 0;
				}
			
				if (loadStatusMeter.segments[i].id == loadStatusMeter.segments[firstSegment].id) {
					loadStatusMeter.segments[i].style.backgroundColor = loadStatusMeter.colors[3];
				} else if (loadStatusMeter.segments[i].id == loadStatusMeter.segments[secondSegment].id) {
					loadStatusMeter.segments[i].style.backgroundColor = loadStatusMeter.colors[2];
				} else if (loadStatusMeter.segments[i].id == loadStatusMeter.segments[thirdSegment].id) {
					loadStatusMeter.segments[i].style.backgroundColor = loadStatusMeter.colors[1];
				} else {
					loadStatusMeter.segments[i].style.backgroundColor = loadStatusMeter.colors[0];
				}
			}
			if (loadStatusMeter.currentSegment < (loadStatusMeter.segments.length - 1)) {
				loadStatusMeter.currentSegment++;
			} else {
				loadStatusMeter.currentSegment = 0;
			}
		},
		40
	);
	
}

function stopLoadStatusMeter() {

	clearInterval(loadStatusMeter.timer);
	loadStatusMeter.currentSegment = 0;
	
	for (var i = 0; i < loadStatusMeter.segments.length; i++) {
		loadStatusMeter.segments[i].style.backgroundColor = loadStatusMeter.colors[0];
	}

}

function loadSlideshow() {

	// Start animating the load status meter:
	var loadStatusMeter = startLoadStatusMeter();
	
	// Fetch the requested image data:
	
	$.get("resources/php/ajax/load_slideshow.php",
		function(data) {
			createSlideshowObj( JSON.parse(data) );
			playSlideshow();
			stopLoadStatusMeter(); // Stop animating the load status meter
		}
	);

}

function createSlideshowObj(slideshowImages) {
	slideshowObj = new slideshowObject(slideshowImages, true, 0, 0, 0);
}

function clickPlaySlideshow() {

	hideAllThumbnailPanels(slideshowTitleObj);
	slideshowTitleObj.selected = true;
	
	if (!slideshowObj.playing) {
		playSlideshow();
	}
	
}

function playSlideshow() {

	slideshowObj.playing = true;
	slideshowTitleObj.selected = true;
	
	resetAllThumbnails();
	slideshowHighlightTitle();
	writeSlideshowImage();
	
}

function writeSlideshowImage() {

	var imageViewer = document.getElementById("image_viewer");
	var imageFrame = document.getElementById("image_frame");
	var imageCaption = document.getElementById("image_caption");
	
	op = 0;
	imageViewer.style.opacity = op;

	var img = new Image();
	
	img.onload = function() {
	
		img.onclick = function() {
			
			var imageElement = this;
			
			var imageObject = null;
		
			for (var i = 0; i < slideshowObj.images.length; i++) {
		
				if (getItemNumberFromString(imageElement.id) == slideshowObj.images[i].num) {
					imageObject = slideshowObj.images[i];
				}
			
			}
			
			if (imageObject) {
				
				var thumbnailElement = document.getElementById("thumbnail_" + imageObject.collection + "-" + imageObject.num);
				loadImage(thumbnailElement);
			
				for (var n = 0; n < thumbnailMenuPanels.length; n++) {
			
					if (imageObject.collection == thumbnailMenuPanels[n].collection) {
						toggleThumbnailPanel( titleObjectForThumbnailPanel(thumbnailMenuPanels[n].element).element );
						resetSlideshowTitle();
					}
				
				}
			
			}
	
		}
	
		var frameMargin = ((imageViewer.offsetWidth - img.width) / 2);
		
		imageFrame.style.marginLeft = frameMargin + "px";
		imageFrame.style.marginRight = frameMargin + "px";
		imageCaption.style.marginLeft = frameMargin + "px";
		imageCaption.style.marginRight = frameMargin + "px";
		
		imageFrame.innerHTML = '';
		imageCaption.innerHTML = '';
		
		img.id = "slideshow_image_" + slideshowObj.images[slideshowObj.position].num;
		imageFrame.appendChild(img);
		
		var imageCaptionElements = createImageCaptionElements(slideshowObj.images[slideshowObj.position]);
		
		for (var i = 0; i < imageCaptionElements.length; i++) {
			imageCaption.appendChild(imageCaptionElements[i]);
		}
		
		slideshowImageFadeIn(op, imageViewer);
		
	}
	
	img.src = imagesDirectory + slideshowObj.images[slideshowObj.position].image;
	
}

function slideshowImageFadeIn(op, imageViewer) {
	
	slideshowObj.fadeTimer = setInterval(
		function() {
		
			op = op + (1 / slideshowImageFadeResolution);
			
			imageViewer.style.opacity = op;
			imageViewer.style.filter = "alpha(opacity=" + (op * 100) + ")";
			
			if (op >= 1.0) {
			
				clearInterval(slideshowObj.fadeTimer);
				slideshowImageHold(op, imageViewer);
				
			}
			
		},
		(slideshowImageFadeTime / slideshowImageFadeResolution)
	);
	
}

function slideshowImageHold(op, imageViewer) {

	slideshowObj.pauseTimer = setTimeout(
		function() {
			slideshowImageFadeOut(op, imageViewer);
		},
		slideshowImageHoldTime
	);
	
}

function slideshowImageFadeOut(op, imageViewer) {

	slideshowObj.fadeTimer = setInterval(
		function() {
		
			op = op - (1 / slideshowImageFadeResolution);
			
			imageViewer.style.opacity = op;
			imageViewer.style.filter = "alpha(opacity=" + (op * 100) + ")";
			
			if (op <= 0.0) {
			
				clearInterval(slideshowObj.fadeTimer);
				
				slideshowObj.position++;
				
				if (slideshowObj.position >= slideshowObj.images.length) {
					slideshowObj.position = 0;
				}
				
				writeSlideshowImage();
				
			}
		},
		(slideshowImageFadeTime / slideshowImageFadeResolution)
	);
				
}

function slideshowHighlightTitle() {
	
	if (slideshowTitleObj.highlighted && !slideshowTitleObj.selected)  {
		slideshowTitleObj.highlighted = false;
		titleColorFadeOut(slideshowTitleObj);
	} else {
		slideshowTitleObj.highlighted = true;
		titleColorFadeIn(slideshowTitleObj);
	}
	
}

function endSlideshow() {

	clearTimeout(slideshowObj.pauseTimer);
	clearInterval(slideshowObj.fadeTimer);
	slideshowObj.playing = false;
	slideshowObj.position = 0;
	
	resetSlideshowTitle();
	
}

function resetSlideshowTitle() {

	if (slideshowTitleObj.selected) {
		slideshowTitleObj.selected = false;
		slideshowHighlightTitle();
	}
	
}