$(function(){
	// Marks all list items as "before" or "after" the active one
	markSiblings();
	
	// Set up back and next buttons
	$('#back, #next').bind('click', function(ev){
		moveSlides($(this), 1);
		return false;
	});
	
	// Set up thumbnail clicks
	$('#portfolio-thumbs li').bind('click', function(ev){
		var clicked = $('#portfolio-thumbs li').index(this),
			active = $('#portfolio-thumbs li').index($('#portfolio-thumbs .active')),
			index = (clicked > active) ? (clicked - active) : (active - clicked);
		
		moveSlides($(this), index);
	});
	
	// Set up left/right arrow keys
	$(document).keydown(function(e){
	    if(e.keyCode == 37) 
	    { 
	       $('#back').trigger('click');
	       return false;
	    }
	    
	    if(e.keyCode == 39) 
	    { 
	       $('#next').trigger('click');
	       return false;
	    }
	});
});

function markSiblings(){
	var el = $('.portfolio-list .active');
	
	el.removeClass('after before');
	el.nextAll().addClass('after');
	el.prevAll().addClass('before');
}

function moveSlides(el, multiplier){	
	var id = el.attr('id');
	
	if(id == 'back' || id == 'next')
	{
		var next = (el.attr('id') == 'next') ? true : false,
			active = $('#portfolio-thumbs li').index($('#portfolio-thumbs .active')),
			index = next ? active + 1 : active - 1;
	}
	
	else
	{
		var next = ($('#portfolio-thumbs li').index(el) > $('#portfolio-thumbs li').index($('#portfolio-thumbs .active'))) ? true : false,
			index = $('#portfolio-thumbs li').index(el);
	}
	
	if($('.active').hasClass('first') && next == false) return false;
	if($('.active').hasClass('last') && next == true) return false;
	
	var thumbsPosition = $('#portfolio-thumbs').css('margin-left'),
		slidesPosition = $('#portfolio-slides').css('margin-left'),
		thumbsDistance = 80 * multiplier,
		slidesDistance = 1550 * multiplier,
		newThumbsPosition = next ? parseInt(thumbsPosition) - thumbsDistance : parseInt(thumbsPosition) + thumbsDistance,
		newSlidesPosition = next ? parseInt(slidesPosition) - slidesDistance : parseInt(slidesPosition) + slidesDistance;
		
	$('.portfolio-list:not(:animated)').each(function(){
		var newPosition = ($(this).attr('id') == 'portfolio-slides') ? newSlidesPosition : newThumbsPosition;
		
		$(this).animate({'margin-left': newPosition}, 1000, 'easeInOutExpo', function(){
			$(this).find('.active').removeClass('active');
			$('#portfolio-thumbs li').eq(index).addClass('active');
			markSiblings();
		});
	});
	
	return false;
}