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

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

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

	$("#scroller-print-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-print-wrap',
		loop: 'true',
		next: '#button-next-project-print' ,
		navi: '#project-dots-print',
		naviItem: 'a',
		keyboard: true,			
		speed: '800'
	});	
		$("#scroller-forums-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-forums-wrap',
		loop: 'true',
		next: '#button-next-project-forums' ,
		navi: '#project-dots-forums',
		naviItem: 'a',
		keyboard: true,			
		speed: '800'
	});	
		$("#scroller-ads-window").scrollable({
		easing: 'swing',
		size: '1',
		items: '#scroller-ads-wrap',
		loop: 'true',
		next: '#button-next-project-ads' ,
		navi: '#project-dots-ads',
		naviItem: 'a',
		keyboard: true,			
		speed: '800'
	});	
			
 	//set up events to handle browsing project categories
    $("#projects .logos a ").bind("click", function(){ switchTo("logos"); });
    $("#projects .web a ").bind("click", function(){ switchTo("web");});
    $("#projects .banners a ").bind("click", function(){ switchTo("banners");}); 
    $("#projects .print a ").bind("click", function(){ switchTo("print"); });
    $("#projects .forums a ").bind("click", function(){ switchTo("forums");});
    $("#projects .ads a ").bind("click", function(){ switchTo("ads");}); 
    		
  });
 		
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"){
		$(".button-next-project").hide();
		$("#button-next-project-web").show();		
		$(".project-dots").hide();
		$("#project-dots-web").show(300);		
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .web a").css("cursor", "default");			
		$("#project-type-nav .current").animate({top: "0"  }, { "duration": 300 } );
		$("#project-type-nav .web span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: '0'}, { "duration": 300 } );
	}
		
	if (which == "forums"){
		$(".button-next-project").hide();
		$("#button-next-project-forums").show();		
		$(".project-dots").hide();	
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .forums a").css("cursor", "default");					
		$("#project-type-nav .current").animate({ 	top: "60px"   }, { "duration": 300 } );
		$("#project-type-nav .forums span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h)+"px"}, { "duration": 300 } );
		$("#project-dots-forums").show(300);
	}
	
	if (which == "logos"){
	
		$(".button-next-project").hide();
		$("#button-next-project-logos").show();		
		$(".project-dots").hide();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .logos a").css("cursor", "default");				
		$("#project-type-nav .current").animate({ 		top: "120px"	    }, { "duration": 300} );
		$("#project-type-nav .logos span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h*2)+"px"}, { "duration": 300 } );
		$("#project-dots-logos").show(300);	
	}		
	if (which == "banners"){
	
		$(".button-next-project").hide();
		$("#button-next-project-banners").show();		
		$(".project-dots").hide();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .banners a").css("cursor", "default");				
		$("#project-type-nav .current").animate({ 		top: "180px"	    }, { "duration": 300} );
		$("#project-type-nav .banners span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h*3)+"px"}, { "duration": 300 } );
		$("#project-dots-banners").show(300);	
	}		
	if (which == "ads"){
	
		$(".button-next-project").hide();
		$("#button-next-project-ads").show();		
		$(".project-dots").hide();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .ads a").css("cursor", "default");				
		$("#project-type-nav .current").animate({ 		top: "240px"	    }, { "duration": 300} );
		$("#project-type-nav .ads span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h*4)+"px"}, { "duration": 300 } );
		$("#project-dots-ads").show(300);	
	}		
	if (which == "print"){
	
		$(".button-next-project").hide();
		$("#button-next-project-print").show();		
		$(".project-dots").hide();
		$("#project-type-nav span").animate({opacity: '.65'}, { "duration": 300 } );	
		$("#project-type-nav a").css("cursor", "pointer");		
		$("#project-type-nav .print a").css("cursor", "default");				
		$("#project-type-nav .current").animate({ 		top: "300px"	    }, { "duration": 300} );
		$("#project-type-nav .print span").animate({opacity: '1.0'}, { "duration": 300 } );
		$("#scroller-vertical").animate({top: "-"+(h*5)+"px"}, { "duration": 300 } );
		$("#project-dots-print").show(300);	
	}		
	
	curSect = which;

}