//	adjustable settings
var centerPhotoPosition = 2;
var totalPhotoPositions = 5;
var imageSpacing = 70;
var positionCoordinates = {
	0:-65,
	1:5,
	2:75,
	3:145,
	4:215
};


var currentPhoto;
var photoCount;
var animating = false;

$(document).ready(function(){
	if (photos == undefined)
	{	
		return;
	}
	photoCount = photos.length;

	currentPhoto = 0;
	for (var i = 0; i < totalPhotoPositions; i++)
	{
		createThumbnail(i,i - centerPhotoPosition,false);
	}
	
	$("#previous").click(function()
	{
		previous();
	}).addClass("clickable");

	$("#next").click(function()
	{
		next();
	}).addClass("clickable");
	
	checkPhotoSize();
});

//	switch to the given element
function switchTo(element)
{
	if (animating)
	{
		return;
	}
	var position = getPosition(element);
	if (position > centerPhotoPosition)
	{
		next();
	}
	else if (position < centerPhotoPosition)
	{
		previous();
	}
	else
	{
		updateMainPicture();
	}
}

//	get the integer position of the given element
function getPosition(element)
{
	var left = getPixels($(element).css("left"));
	var position;
	for (var i = 0; i < totalPhotoPositions;i++)
	{
		if(positionCoordinates[i] == left)
		{
			position = i;
			break;
		}
	}
	return position;
}

function previous()
{
	if (animating)
	{
		return false;
	}
	animating = true;
	$("#thumbnails img:last").remove();
	animate(true);
	currentPhoto = getIndex(currentPhoto - 1);
	createThumbnail(0,currentPhoto - 2,true);
	updateMainPicture();
}

function next()
{
	if (animating)
	{
		return false;
	}
	animating = true;
	$("#thumbnails img:first").remove();
	animate(false);
	currentPhoto = getIndex(currentPhoto + 1);
	createThumbnail(totalPhotoPositions - 1,currentPhoto + 2,false)
	updateMainPicture();
}

function updateMainPicture()
{
	//find the right image
	var photo = photos[currentPhoto];
	if(photo == undefined)
	{
		return;
	}	
	
	//	load the image it into a vairiable,
	var img = new Image();
	$(img).load(function()
	{
		//when the variable has its image loaded, swap it into the page
		$("#teamPic").attr({
			"src":photo["Large"],
			"alt":photo["Title"]
		});
		
		//update the line
		checkPhotoSize();		
	}).attr("src",photo["Large"]);
	
}

//	use clone, prepend, and append, basing it on #thumbnailTemplate
//	positions can be [0] [1] [2] [3] [4] where 1 through 3 are visible
function createThumbnail(position,photoIndex,prepend)
{
	photoIndex = getIndex(photoIndex);
	var photo = photos[photoIndex];
	if(photo == undefined)
	{
		return;
	}
	
	var x = positionCoordinates[position];
		
	if(prepend)
	{
		$("#thumbnailTemplate").clone().attr({
				"src":photo["Thumbnail"],
				"alt":photo["Title"],
				"id":""
			}).css("left",x)
			.prependTo("#thumbnails")
			.removeClass("hidden")
			.addClass("thumb_" + photoIndex)
			.click(function(){	switchTo(this);	});
	}
	else
	{
		$("#thumbnailTemplate").clone().attr({
				"src":photo["Thumbnail"],
				"alt":photo["Title"],
				"id":""
			}).css("left",x)
			.appendTo("#thumbnails")
			.removeClass("hidden")
			.addClass("thumb_" + photoIndex)
			.click(function(){	switchTo(this);	});
	}
}

//	check the height of the picture, and give the controls box a border
//	if the picture's too tall for its own border to show
function checkPhotoSize()
{
	var photoHeight = getPixels($("#teamPic").height());
	var containerHeight = getPixels($("#teamPicWrapper").height());
	if(photoHeight >= containerHeight)
	{
		$("#photoControls").css(
			"border-top","1px solid #000"
		);
	}
	else
	{
		$("#photoControls").css(
			"border-top","1px solid #fff"
		);	
	}		
}

//	do the shifting of the thumbnails, once they're all present
//	if previous is true, we're going back, otherwise we're going forward
function animate(previous)
{
	$("#thumbnails img").each(
		function()
		{
			var left = getPixels($(this).css("left"));
			var newleft = left;
			if(previous)
			{
				newleft = newleft + imageSpacing;
			}
			else
			{
				newleft = newleft - imageSpacing;
			}
			$(this).animate({
				left:newleft
			},200,function()
			{
				animating = false;
			});
		}			
	);
}


//	adjust a number to point to a valid index of photos
function getIndex(number)
{
	while(number < 0)
	{
		number = number + photoCount;
	}
	while (number >= photoCount)
	{
		number = number - photoCount;
	}
	return number;
}