// This variable is the path to the xml file that contains all of the image information.
var imageGalleryExternalFile = "includes/imageGallery2.xml";
var imageGroupArray = new Array();
var imageGroupXMLNameArray = new Array();
// This is the delimiter that seperates the image group name from the rest of the image name.
// for instance, /imageDirectoryPath/groupName_a.jpg
var imageGroupNameDelimiter = "_";
var largeImageAddition = "_big";
// This variable sets the name of the Group name link.
// This variable is the first set of the links and the last part is the group name of the images.
var groupLinkNameInitial = "";
// controls the fadeIn and fadeOut speeds of the Large Image in the viewPort area
var fadeInSpeed = 300;
var fadeOutSpeed = 1000;
var currentImageGroupHeading;
var currentImageGroupText;
var currentImageGroupProject;
var currentImageGroupImage = new Array();
var currentImageGroupLink = new Array();
// controls the speed of the when the large image switches to the description text once the user mouses off of the thumbnail
var mouseOffViewPortImageDelay = 3000;
// Sets the opacity of the mouseOff and mouseOn states
// The closer the decimal is to 1.0 the less transparent the object will be.
// If you would like to achieve an opposite effect (having the hovered thumbnail get more transparent)
// then make the off state a higher number than the on state.
// acceptable values: 0.0 - 1.0
var imageThumbnailOpacityMouseOffState = 0.6;
var imageThumbnailOpacityMouseOnState = 1.0;
var vp;
$(function()
{
	$('.imageIconSmall').livequery(function()
	{
		$(this).css(
		{
			opacity: imageThumbnailOpacityMouseOffState
		});
	});
	initImageGallery();
	$('.imageIconSmall').livequery(function()
	{
		$(this).hover(function()
		{	
			clearTimeout(vp);
			var imageSrc = $(this).attr('src');
			var imageNameIndex = imageSrc.lastIndexOf('.');
			var imageNameLength = imageSrc.length;
			var imageLargeName = imageSrc.substring(0, imageNameIndex);
			imageLargeName = imageLargeName.concat(largeImageAddition);
			imageLargeName = imageLargeName.concat(imageSrc.substring(imageNameIndex, imageNameLength));
			if(imageLargeName != $('.largeImageViewPort').attr('src'))
			{	
				var largeImage = $('<img class="largeImageViewPort"/>').attr('src', imageLargeName);
				$('#viewPort').html(largeImage);
				$('.largeImageViewPort').livequery(function()
				{
					$(this).hide();	
					$(this).fadeIn(fadeInSpeed);
				});
			}
			$(this).stop().animate(
			{
				opacity: imageThumbnailOpacityMouseOnState
			});
		}, function()
		{
			vp = setTimeout('changeViewPortBackToDescription("1");', mouseOffViewPortImageDelay);
			$(this).stop().animate(
			{
				opacity: imageThumbnailOpacityMouseOffState
			});
		});
	});
		$('.imageGroupAnchors').livequery(function()
		{
			$(this).click(function()
			{	
				var imageGroupNameVariable = $(this).attr('groupName');
				switchGalleryGroups(imageGroupNameVariable);
			});
		});	
});
function initImageGallery()
{
	$.get(imageGalleryExternalFile, function(data)
	{
		var defaultDescription = $(data).find('defaultDescription').text();
		$('#defaultDescription').html(defaultDescription);
		$('#viewPort').append('<span class="mainDescription">'+defaultDescription+'</span>');
		$(data).find('image').each(function()
		{
			var imageSrc = $(this).attr('imageUrl');
			findImageGroupNames(imageSrc);
		});
		$(data).find('description').each(function()
		{
			currentImageGroupHeading = $(this).attr('groupName');
			imageGroupXMLNameArray.push(currentImageGroupHeading);
		});
		createGroupings();
	});
}
function findImageGroupNames(imageSrc)
{
	var imageDirectoryIndex = imageSrc.lastIndexOf('/');
	var imageUrlLength = imageSrc.length;
	imageSrc = imageSrc.substring(imageDirectoryIndex+1, imageUrlLength);
	var imageGroupIndex = imageSrc.indexOf(imageGroupNameDelimiter);
	imageGroupName = imageSrc.substring(0, imageGroupIndex);
	if(imageGroupArray.length == 0)
	{
		imageGroupArray.push(imageGroupName);
	}
	else
	{
		var newImageGroup = true;
		for(var m = 0; m < imageGroupArray.length; m++)
		{
			var imageGroup = imageGroupArray[m];
			if(imageGroupName == imageGroup)
			{
				newImageGroup = false;
				continue;
			}
		}
		if(newImageGroup == true)
		{
			imageGroupArray.push(imageGroupName);
		}
	}
}
function createGroupings()
{
	for(var i = 0; i < imageGroupArray.length; i++)
	{
		var groupAnchorObj = $('<a></a>').attr('class', 'imageGroupAnchors').attr('groupName', imageGroupArray[i]).html(groupLinkNameInitial+" "+imageGroupXMLNameArray[i]);
		$('#imageGroups').append(groupAnchorObj);
		// jScrollPane initialize
		$('#imageGroups').jScrollPane({showArrows:true});
	}
}
function switchGalleryGroups(groupName)
{	
	if($('#viewPort').text() != $('#defaultDescription').text())
	{
		var currentImageIconGroup = $('.imageIconSmall').attr('src');
		var imageNameIndex = currentImageIconGroup.lastIndexOf('/');
		var currentImageIconGroupLength = currentImageIconGroup.length;
		currentImageIconGroup = currentImageIconGroup.substring(imageNameIndex+1, currentImageIconGroupLength);
		var currentImageIconGroupIndex = currentImageIconGroup.indexOf(imageGroupNameDelimiter);
		currentImageIconGroup = currentImageIconGroup.substring(0, currentImageIconGroupIndex);

		if(groupName != currentImageIconGroup)

		{
			$('#imageIcons').html('');
			$.get(imageGalleryExternalFile, function(data)

			{
				currentImageGroupHeading = $(data).find('description[group='+groupName+']').find('heading').text();
				currentImageGroupProject = $(data).find('description[group='+groupName+']').find('project').text();
				currentImageGroupText = $(data).find('description[group='+groupName+']').find('text').text();			
				currentImageGroupImage.length = 0;
				currentImageGroupLink.length = 0;
				$(data).find('description[group='+groupName+']').find('text img').each(function()
				{
					var imageSrc = $(this).attr('src');
					var imageAltTag = $(this).attr('alt');
					if(imageAltTag == undefined || imageAltTag == '')
					{
						imageAltTag = '';	
					}
					var imageObj = '<img src="'+imageSrc+'" alt="'+imageAltTag+'"/>';
					currentImageGroupImage.push(imageObj);
				});
				$(data).find('description[group='+groupName+']').find('text a').each(function()
				{
					var anchorHref = $(this).attr('href');
					var anchorText = $(this).text();
					var anchorObj = '<a href="'+anchorHref+'">'+anchorText+'</a>';
					currentImageGroupLink.push(anchorObj);
				});
				changeViewPortBackToDescription();
				var index_1 = 0;
				$(data).find('image').each(function()
				{
					var imageSrc = $(this).attr('imageUrl');
					var imageDirectoryIndex = imageSrc.lastIndexOf('/');
					var imageUrlLength = imageSrc.length;
					imageSrc = imageSrc.substring(imageDirectoryIndex+1, imageUrlLength);
					var imageGroupIndex = imageSrc.indexOf(imageGroupNameDelimiter);
					imageGroupName = imageSrc.substring(0, imageGroupIndex);
					if(imageGroupName == groupName)
					{
						var imageObj = "<img class='imageIconSmall' src='"+$(this).attr('imageUrl')+"'/>";
						$('#imageIcons').append(imageObj);
					}
					if(index_1 == $(data).find('image').size()-1)
					{
						var thumbnailCount = $('#imageIcons img').size();
						centerImageIconsDiv(thumbnailCount);
					}
					index_1++;
				});
			});
		}
	}
	else
	{
		$('#imageIcons').html('');
		$.get(imageGalleryExternalFile, function(data)
		{
			currentImageGroupHeading = $(data).find('description[group='+groupName+']').find('heading').text();
			currentImageGroupProject = $(data).find('description[group='+groupName+']').find('project').text();
			currentImageGroupText = $(data).find('description[group='+groupName+']').find('text').text();
			currentImageGroupImage.length = 0;
			currentImageGroupLink.length = 0;
			$(data).find('description[group='+groupName+']').find('text img').each(function()
			{
				var imageSrc = $(this).attr('src');
				var imageAltTag = $(this).attr('alt');
				if(imageAltTag == undefined || imageAltTag == '')
				{
					imageAltTag = '';	
				}
				var imageObj = '<img src="'+imageSrc+'" alt="'+imageAltTag+'"/>';
				currentImageGroupImage.push(imageObj);
			});
			$(data).find('description[group='+groupName+']').find('text a').each(function()
			{
				var anchorHref = $(this).attr('href');
				var anchorText = $(this).text();
				var anchorObj = '<a href="'+anchorHref+'">'+anchorText+'</a>';
				currentImageGroupLink.push(anchorObj);
			});
			changeViewPortBackToDescription();
			var index_2 = 0;
			$(data).find('image').each(function()
			{
				var imageSrc = $(this).attr('imageUrl');
				var imageDirectoryIndex = imageSrc.lastIndexOf('/');
				var imageUrlLength = imageSrc.length;
				imageSrc = imageSrc.substring(imageDirectoryIndex+1, imageUrlLength);
				var imageGroupIndex = imageSrc.indexOf(imageGroupNameDelimiter);
				imageGroupName = imageSrc.substring(0, imageGroupIndex);
				if(imageGroupName == groupName)
				{
					var imageObj = "<img class='imageIconSmall' src='"+$(this).attr('imageUrl')+"'/>";
					$('#imageIcons').append(imageObj);
				}
				if(index_2 == $(data).find('image').size()-1)
				{
					var thumbnailCount = $('#imageIcons img').size();
					centerImageIconsDiv(thumbnailCount);
				}
				index_2++;
			});
		});
	}
}
function changeViewPortBackToDescription(image)
{	
	if(arguments.length > 0)
	{
		$('.largeImageViewPort').stop().fadeOut(fadeOutSpeed, function()
		{
			$('#viewPort').html('<span class="heading">'+currentImageGroupHeading+'</span>');
			$('#viewPort').append('<span class="project">'+currentImageGroupProject+'</span>');
			$('#viewPort').append('<span class="text">'+currentImageGroupText+'</span>');
			for(var n = 0; n < currentImageGroupImage.length; n++)
			{
				$('#viewPort').append('<span class="image">'+currentImageGroupImage[n]+'</span>');
			}
			for(var m = 0; m < currentImageGroupLink.length; m++)
			{
				$('#viewPort').append('<span class="link">'+currentImageGroupLink[m]+'</span>');
			}
		});
	}
	else
	{
		$('#viewPort').html('<span class="heading">'+currentImageGroupHeading+'</span>');
		$('#viewPort').append('<span class="project">'+currentImageGroupProject+'</span>');
		$('#viewPort').append('<span class="text">'+currentImageGroupText+'</span>');
		for(var n = 0; n < currentImageGroupImage.length; n++)
		{
			$('#viewPort').append('<span class="image">'+currentImageGroupImage[n]+'</span>');
		}
		for(var m = 0; m < currentImageGroupLink.length; m++)
		{
			$('#viewPort').append('<span class="link">'+currentImageGroupLink[m]+'</span>');
		}
	}
}
function centerImageIconsDiv(numThumbnails)
{	
	$('#imageIcons').removeClass();
	switch(numThumbnails)
	{
		case 1: 
			$('#imageIcons').addClass('oneThumb');
			break;
		case 2: 
			$('#imageIcons').addClass('twoThumbs');
			break;
		case 3: 
			$('#imageIcons').addClass('threeThumbs');
			break;
		case 4: 
			$('#imageIcons').addClass('fourThumbs');
			break;
	}
}