$(function(){
	
	$('#work .carousel').each(function(){
		var $thumbs = $('.nav li', this);
		var $images = $('.window li', this);
		var $window = $('.window', this);
		
		// Setup scrollTo function for window
		$window.bind('scrollToCurrent', function(){
			// Get the active thumb id, and scroll the list to it
			var $current = $('#' + $thumbs.filter('.current').attr('id').replace('thumb-', 'media-'));
			var currentPos = $current.position();
			$('ul', this).animate({
				top: -currentPos.top
			}, 600, 'easeOutExpo');
			/*
			$(this).animate({
				height: $current.height()
			}, 600, 'easeOutExpo');
			*/
		});
		
		// Activeate/Deactivate animations
		$thumbs.each(function(){
			var $thumb = $(this);
			var $image = $('img', this);
			var $link = $('a', this);
			// Bind slide animations to events
			$thumb.bind('slideOut', function(){
				$image.animate({
					left: '-10px',
					opacity: 1
				}, 200, 'easeOutExpo');
			});
			$thumb.bind('slideIn', function(){
				$image.animate({
					left: '-25px',
					opacity: .5
				}, 200, 'easeOutExpo');
			});
			// When hovering over a link
			$link.hover(
				function(){
					if (! $thumb.hasClass('current')) {
						$thumb.trigger('slideOut');
					};
				},
				function(){
					if (! $thumb.hasClass('current')) {
						$thumb.trigger('slideIn');
					};
				}
			).click(function(){
				if (! $thumb.hasClass('current')) {
					$thumbs.filter('.current').removeClass('current').trigger('slideIn');
					$thumb.addClass('current');
					$window.trigger('scrollToCurrent');
				};
				return false;
			});
		});
		
		// Toggle on all the top thumbnails
		$thumbs.eq(0).toggleClass('current').trigger('slideOut');
	});
	
})