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

	switchTo('info1');	
	$("#scroller-info1-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-info1-wrap',
		loop: 'true',
		next: '#button-next-project-info1' ,
		navi: '#project-dots-info1',
		naviItem: 'a',
		keyboard: true,
		speed: '800'
	});	

	$("#scroller-info2-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-info2-wrap',
		loop: 'true',
		next: '#button-next-project-info2' ,
		navi: '#project-dots-info2',
		naviItem: 'a',
		keyboard: true,			
		speed: '800'
	});				
	$("#scroller-desk-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-desk-wrap',
		loop: 'true',
		next: '#button-next-project-desk' ,
		navi: '#project-dots-desk',
		naviItem: 'a',
		keyboard: true,			
		speed: '800'
	});	
			
 	//set up events to handle browsing project categories
    $("#projects .info1 a ").bind("click", function(){ switchTo("info1"); });
    $("#projects .info2 a ").bind("click", function(){ switchTo("info2");});
    $("#projects .info3 a ").bind("click", function(){ switchTo("info3");}); 
    		
  });
 		
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 == "info1"){
		$(".button-next-project").hide();
		$("#button-next-project-info1").show();		
		$(".project-dots").hide();
		$("#project-dots-info1").show(300);		
		$("#project-type-nav span").animate({opacity: '1.0'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .info1 a").css("cursor", "default");
		$("#project-type-nav .info1 span").animate({opacity: '0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: '0'}, { "duration": 300 } );
	}
		
	if (which == "info2"){
		$(".button-next-project").hide();
		$("#button-next-project-info2").show();		
		$(".project-dots").hide();	
		$("#project-type-nav span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .info2 a").css("cursor", "default");
		$("#project-type-nav .info2 span").animate({opacity: '0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h)+"px"}, { "duration": 300 } );
		$("#project-dots-info2").show(300);
	}
	
	if (which == "info3"){
	
		$(".button-next-project").hide();
		$("#button-next-project-desk").show();		
		$(".project-dots").hide();
		$("#project-type-nav span").animate({opacity: '1.0'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .info3 a").css("cursor", "default");
		$("#project-type-nav .info3 span").animate({opacity: '0'}, { "duration": 300 });
		$("#scroller-vertical").animate({top: "-"+(h*2)+"px"}, { "duration": 300 } );
		$("#project-dots-desk").show(300);
	}		

	curSect = which;

}