$(document).ready(function(){

 //Make the selected image big...
$('.selected')
.children('.case-study-screenshot')
.css({	//top: "0px", 
			top: "3px", 
			//height:"328px", 
			height:"323px",
			//width:"487px",
			width:"479px",
			opacity:"1"});
//Hide the left arrow since there's nothing to the left...		
$('.left').hide();

//Hide the next set of inset images...
$('.panel.selected')
	.next('.panel')
	.children('img.case-study-screenshot')
	.siblings('img')
    .not(':animated')
	.css( {opacity:0} );
	
//Hide the next view-project button...
$('.panel.selected')
	.next('.panel')
	.children('.view-project')
    .not(':animated')
	.css( {opacity:0} );

	
$(".scrollButtons.right").click(function () {

//Hide the next set of inset images...
$('.panel.selected')
	.next('.panel')
	.children('img.case-study-screenshot')
	.siblings('img.inset-1')
    .not(':animated')
	.css( {opacity:0} );

$('.panel.selected')
	.next('.panel')
	.children('img.case-study-screenshot')
	.siblings('img.inset-2')
    .not(':animated')
	.css( {opacity:0} );
	
$('.panel.selected')
	.next('.panel')
	.children('.view-project')
    .not(':animated')
	.css( {opacity:0} );

	//Grow...	
    $('.panel.selected').next('.panel').children('.case-study-screenshot')
    .not(':animated')
	.animate(	 
				{top: "3px", 
				height:"323px", 
				width:"479px", 
				opacity:1 }, 
					650, "swing", function(){

//Once the big image is done animating, fade in .inset-1...
$('.panel.selected').children('.inset-1').animate( {opacity:1 }, 150, "swing", function(){

//Fade in .inset-2...
$('.panel.selected').children('.inset-2').animate({opacity:1 }, 150, "swing", function(){
	
	$('.panel.selected')
	.children('.view-project')
	.animate( {opacity:1}, 150, "linear" );
	
})
})
});
				
//Shrink the last image...

	$('.panel.selected')
	.children('.view-project')
    //.not(':animated')
	.animate( {opacity:0}, 75, "linear" );

	
    $('.panel.selected').children('.case-study-screenshot')
    .filter(':visible')     
    .not(':animated')
	.animate(	 
				{
				top: "105px", 
				height:"32%", 
				width:"20%", 
				opacity:0
				}, 
			250, "swing");

//Fade out .inset images...
	$('.panel.selected')
	.children('img.case-study-screenshot')
	.siblings('.inset-1')
    .not(':animated')
	.animate( {opacity:0 }, 100, "swing" );
	//.animate( {right: "55px", top:"75px", width: "102px", height:"55px", opacity:0}, 150, "swing" );

//Fade out .inset images...
	$('.panel.selected')
	.children('img.case-study-screenshot')
	.siblings('.inset-2')
    .not(':animated')
	.animate( {opacity:0 }, 100, "swing" );
//	.animate( {right: "55px", top:"190px", width: "102px", height:"55px", opacity:0}, 150, "swing" );
	
	$('.panel.selected').next('.panel')
	.addClass('selected');

	$('.panel.selected').prev('.panel')
	.removeClass('selected');	

	});/*END .scrollButtons.right function */

$(".scrollButtons.left").click(function () {
	 	 
//Grow the previous...	
    $('.panel.selected')
	.prev('.panel')
	.children('.case-study-screenshot')
    //.filter(':visible')     
    .not(':animated')
	.animate(	 
				{top: "3px", 
				height:"323px", 
				width:"479px", 
				opacity:1 }, 
			650, "swing", function(){
//Once the big image is done animating, fade in .inset-1...
	$('.panel.selected').children('.inset-1').animate({opacity:1}, 150, "swing", function(){
//Fade in .inset-2...
	$('.panel.selected').children('.inset-2').animate(	{opacity:1}, 150, "swing", function(){
	
	$('.panel.selected')
	.children('.view-project')
    //.not(':animated')
	.animate( {opacity:1}, 150, "linear" );
	
	})
	})
	});

	
//Shrink the current...
	$('.panel.selected')
	.children('.case-study-screenshot')
    .filter(':visible')     
    .not(':animated')
	.animate( {top: "105px", height:"32%", width:"20%", opacity:0 },  250, "swing");
	
	//Fade out .inset-1...
	$('.panel.selected')
	.children('img.case-study-screenshot')
	.siblings('.inset-1')
    .not(':animated')
	.animate( {opacity:0 }, 100, "swing" );
//	.animate( { right:'40px', opacity:0 }, 100, "swing" );
//	.animate( {right: "55px", top:"75px", width: "102px", height:"55px", opacity:0}, 150, "swing" );
	
//Fade out .inset-2...				
	$('.panel.selected')
	.children('img.case-study-screenshot')
	.siblings('.inset-2')
    .not(':animated')
	.animate( {opacity:0 }, 100, "swing" );
//	.animate( { right:'40px', opacity:0 }, 100, "swing" );
//.animate( {right: "55px", top:"190px", width: "102px", height:"55px", opacity:0}, 150, "swing" );

	$('.panel.selected')
	.children('.view-project')
    //.not(':animated')
	.animate( {opacity:0}, 100, "linear" );
	
	 $('.panel.selected').prev('.panel')
	.addClass('selected');

	$('.panel.selected').next('.panel')
	.removeClass('selected');
	
});/*END .scrollButtons.left function */

//Hide the arrows (be sure to change the second index number to the current number of case studies minus 1...) 
$(".scrollButtons").click(function () {
	 var index = $(".panel").index( $('.selected') )
	 if ( index == 0 ) {
		$('.left').hide();
		$('.right').show();
		} else if 
		( index == 7 ) {
		$('.left').show();
		$('.right').hide();
		} else {
		$('.left').show();
		$('.right').show();
		}
});/*End hide the arrows*/

});/*END jQuery*/