$(document).ready(function(){
	$('.fzoom').fancybox({
		'zoomOpacity' : true,
		 'overlayShow' : true,
		 'zoomSpeedIn' : 300,
		 'zoomSpeedOut' : 300,
		 'overlayOpacity': .3
		 		 });

	switchTo('nav-web-design');	
	$("#scroller-web-design-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-web-design-wrap',
		loop: 'true',
		prev: '#button-prev-project-web-design' ,
		next: '#button-next-project-web-design' ,
		keyboard: true,
		speed: '800'
	});	

	$("#scroller-web-dev-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-web-dev-wrap',
		loop: 'true',
		prev: '#button-prev-project-web-dev' ,
		next: '#button-next-project-web-dev' ,
		keyboard: true,			
		speed: '800'
	});				

	$("#scroller-graphic-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-graphic-wrap',
		loop: 'true',
		prev: '#button-prev-project-graphic' ,
		next: '#button-next-project-graphic' ,
		keyboard: true,			
		speed: '800'
	});
	
	$("#scroller-illustration-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-illustration-wrap',
		loop: 'true',
		prev: '#button-prev-project-illustration' ,
		next: '#button-next-project-illustration' ,
		keyboard: true,			
		speed: '800'
	});

 	//set up events to handle browsing project categories
    $("#projects .nav-web-design a ").bind("click", function(){ switchTo("web-design"); });
    $("#projects .nav-web-dev a ").bind("click", function(){ switchTo("web-dev");});
	$("#projects .nav-graphic a ").bind("click", function(){ switchTo("graphic");});
	$("#projects .nav-illustration a ").bind("click", function(){ switchTo("illustration");});
    		
  });
 		
var curSect = "";

function switchTo(which){
	jQuery.easing.def = "easeInOutSine";
	
	h = $(".project").height();  //so we don't have to hardcode the row height;
	if (which == curSect) { return; }  //don't switch if we are on the selected tab
	
	if (which == "web-design"){
		$(".button-next-project").hide();
		$("#button-next-project-web-design").show();
		$(".button-prev-project").hide();
		$("#button-prev-project-web-design").show();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .nav-web-design a").css("cursor", "default");
		$("#project-type-nav .current").animate({top: "30px"  }, { "duration": 300 } );
		$("#project-type-nav .nav-web-design span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: '0'}, { "duration": 300 } );
	}
		
	if (which == "web-dev"){
		$(".button-next-project").hide();
		$("#button-next-project-web-dev").show();
		$(".button-prev-project").hide();
		$("#button-prev-project-web-dev").show();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .nav-web-dev a").css("cursor", "default");
		$("#project-type-nav .current").animate({ 	top: "130px"   }, { "duration": 300 } );
		$("#project-type-nav .nav-web-dev span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h)+"px"}, { "duration": 300 } );
	}
	
	if (which == "graphic"){
		$(".button-next-project").hide();
		$("#button-next-project-graphic").show();
		$(".button-prev-project").hide();
		$("#button-prev-project-graphic").show();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .nav-graphic a").css("cursor", "default");
		$("#project-type-nav .current").animate({ 	top: "235px"   }, { "duration": 300 } );
		$("#project-type-nav .nav-graphic span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h*2)+"px"}, { "duration": 300 } );
	}
	
	if (which == "illustration"){
		$(".button-next-project").hide();
		$("#button-next-project-illustration").show();
		$(".button-prev-project").hide();
		$("#button-prev-project-illustration").show();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .nav-illustration a").css("cursor", "default");
		$("#project-type-nav .current").animate({ 	top: "333px"   }, { "duration": 300 } );
		$("#project-type-nav .nav-illustration span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h*3)+"px"}, { "duration": 300 } );
	}

	
	curSect = which;

}