var currentId = 0;
var shownBackgroundElem = '';
var timer = 0;

$(document).ready(function()
{
	$('#carousel_ul li:first').before($('#carousel_ul li:last'));

	$('.small_image_container img').click(function()
	{
		$('#large_image_container' + currentId + ' .large_image').attr('src', $(this).attr('src'));
	});
	
	// Set the first project image as the large image of the project.
	for(i = 0; i < 23; i++)
	{
		$('#large_image_container' + i + ' .large_image').attr('src', $('#id' + i + ' .project_content .small_image_container img').attr('src'));
	}
});

function resetTimer()
{
	timer = 0;
}

function animSlide(side)
{
	var item_width = $('#carousel_ul li').outerWidth() + 10;
	
	if(timer > 0)
		return;
	
	timer = 500;
	setTimeout('resetTimer()', 500);
	
	if(side == 'left')
	{
		var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
		currentId--;
		$('#left_project img').animate({'opacity' :1 }, 250);
		setTimeout(function(){ $('#left_project img').animate({'opacity' : 0.7 }, 250) }, 250);
	}
	else
	{
		var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
		currentId++;
		$('#right_project img').animate({'opacity' : 1 }, 250);
		setTimeout(function(){ $('#right_project img').animate({'opacity' : 0.7 }, 250) }, 250);
	}
	
	// Make sure the current ID is still correct after we go round with the carousel.
	if(currentId < 0)
		currentId = 23;
	if(currentId > 23)
		currentId = 0;
	
	$('#carousel_ul:not(:animated)').animate({'left' : left_indent}, 500, function()
	{
		if(side == 'left')
		{
			$('#carousel_ul li:first').before($('#carousel_ul li:last'));
		}
		else
		{
			$('#carousel_ul li:last').after($('#carousel_ul li:first'));
		}

		$('#carousel_ul').css({'left' : '-388px'});
	});
}

function showProject(id)
{
	if(popupStatus == 0)
	{
		centerPopup('div.popup_content');
		$('div.popup_background').css({ opacity: '0.7' });
		$('div.popup_background').fadeIn('slow');
		$('div.popup_content').fadeIn('slow');
		
		shownBackgroundElem = 'div.popup_content';
		
		// Move the carousel to the correct project.
		if(currentId > id)
		{
			delta = currentId - id;
			slideDirection = 'left';
		}
		else
		{
			delta = id - currentId;
			slideDirection = 'right';
		}
		
		currentId = id;
		
		if(delta != 0)
		{
			for(i = 0; i < delta; i++)
			{
				slide(slideDirection);
			}
		}
		
		popupStatus = 1;
	}
}

function slide(where)
{
	var item_width = $('#carousel_ul li').outerWidth();

	if(where == 'left')
	{
		var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
	}
	else
	{
		var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
	}

	if(where == 'left')
	{
		$('#carousel_ul li:first').before($('#carousel_ul li:last'));
	}
	else
	{
		$('#carousel_ul li:last').after($('#carousel_ul li:first'));
	}

	$('#carousel_ul').css({'left' : '-388'});
}

function showInfoScreen()
{
	if(popupStatus == 0)
	{
		centerPopup('div#info_screen');
		$('div.popup_background').css({ opacity: '0.7' });
		$('div.popup_background').fadeIn('slow');
		$('div#info_screen').fadeIn('slow');
		
		shownBackgroundElem = 'div#info_screen';
		
		popupStatus = 1;
	}
}