$(document).ready(function(){
	

		$(function() {
			
			// Show the first element to start
			$('#portfolio .thumb .first').css({ "right" : '0px'});
			
			//Hide the enlarge hover feature innititally
			$('.enlarge').stop().animate({ "opacity" : '0'}, 0);
			
			//Hide the enlarge hover feature innititally (for video and audio)
			$('.enlarge-play').stop().animate({ "opacity" : '0'}, 0);


			$('#portfolio .thumb').hover(function() {
												  
				//Make sure the first element is off screen
				$('.item').stop().animate({ "right" : '-300px'}, 400);
				
				//Move current portfolio item on screen
                $(this).find('.item').stop().animate({ "right" : '0px'}, 400);
				
				//Show darkenned hover over thumbnail image
				$(this).find('.enlarge').stop().animate({ "opacity" : '.75'}, 400);
				
				//Show darkenned hover over thumbnail image (for video and audio)
				$(this).find('.enlarge-play').stop().animate({ "opacity" : '.75'}, 400);

            }, function() {
				
				//Hide darkenned hover over thumbnail image
                $(this).find('.enlarge').stop().animate({ "opacity" : '0'}, 400);
				
				//Hide darkenned hover over thumbnail image (for video and audio)
                $(this).find('.enlarge-play').stop().animate({ "opacity" : '0'}, 400);
				
            });
			
        });


});