/*
 * JQuery for portfolio
 * By Matt Finucane, September 2009
 */

$(document).ready(function()
{
	/*
	 * 	Portfolio page slideshow buttons (only shown if javascript enabled)
	 */
	$('#portfolio-nav-left').css('display', 'inline').click(function()
	{
		moveCarousel('left');
		return false;
	});
	$('#portfolio-nav-right').css('display', 'inline').click(function()
	{
		moveCarousel('right');
		return false;
	});	

	//Rotate carousel on key press
	$(document).keydown(function(e)
	{
		if(e.keyCode == 37)
		{
			moveCarousel('left');
			return false;
		}
		if(e.keyCode == 39)
		{
			moveCarousel('right');
			return false;
		}
	});
	
	//On hover over main portfolio image, click to zoom and prevent flicker
	$('#slideshow-images > img, #click-to-zoom').hover(function()
	{
		$('#click-to-zoom').css('visibility','visible');
	},
	function()
	{
		$('#click-to-zoom').css('visibility','hidden');
	});
	
	//Set the width and height of the lightbox to be same as document height
	
	
	//Behaviour to load embedded Vimeo website video and play it automatically
	$('#click-to-zoom').click(function()
	{
		showVideoLightbox();
	});
	
	//Behaviour to close the lightbox. Video is reset to the beginning and unloaded.
	$('#close-lightbox').click(function()
	{
		hideVideoLightbox();
		return false;
	});
	
});

function showVideoLightbox()
{
	$('#background-opacity-overlay, #background-inner-overlay').css({'height': $(document).height(), 'visibility': 'visible'});
	var vimeo_api = $('#vimeo-embedded-vid embed')[0];
	vimeo_api.api_play();
	return false;
}

function hideVideoLightbox()
{
	$('#background-opacity-overlay, #background-inner-overlay').css('visibility', 'hidden');
	var vimeo_api = $('#vimeo-embedded-vid embed')[0];
	vimeo_api.api_seekTo(0);
	vimeo_api.api_unload();
	return false;
}

function moveCarousel(direction)
{
	switch(direction)
	{
		case 'left':
		{
			var $active = $('.carousel-active-img');
			var $left = $('.carousel-left-img');
			var $right = $('.carousel-right-img');
			
			
			$active.css('z-index', 9);
			$right.css('z-index', 8);
			$left.css('z-index', 10);
			
			$active.animate({width: '160px', height: '120px', top: '90px', left: '412px'}, 200).removeClass('carousel-active-img').addClass('carousel-right-img');
			$left.animate({width: '300px', height: '225px', top: '20px', left: '150px'}, 200).removeClass('carousel-left-img').addClass('carousel-active-img');
			$right.animate({left: '30px'}, 200).removeClass('carousel-right-img').addClass('carousel-left-img');
			
			break;
		}
		case 'right':
		{
			var $active = $('.carousel-active-img');
			var $left = $('.carousel-left-img');
			var $right = $('.carousel-right-img');
			
			$active.css('z-index', 9);
			$right.css('z-index', 10);
			$left.css('z-index', 8);
			
			$active.animate({width: '160px', height: '120px', top: '90px', left: '30px'}, 200).removeClass('carousel-active-img').addClass('carousel-left-img');
			$right.animate({width: '300px', height: '225px', top: '20px', left: '150px'}, 200).removeClass('carousel-right-img').addClass('carousel-active-img');
			$left.animate({left: '412px'}, 200).removeClass('carousel-left-img').addClass('carousel-right-img');
			break;
		}
	}
}