$(document).ready(function() {

$("#flowpanes").scrollable({size: 1,clickable:false});
panes.init();
});

var panes = 
{
	api: "",
	init: function()
	{
		this.api = $("#flowpanes").scrollable({api:true});
		this.register();
	},
	register: function()
	{
		panes.overFlow();
		
		panes.navButtons();
		this.api.onBeforeSeek(function(pn,seekto){
		
		panes.navAni(seekto);
			$("#nav").fadeOut("fast",function(){$(this).removeClass().addClass("fondo-"+panes.api.getPageIndex()).fadeIn("fast");
				
		});
				
		});
		this.api.onSeek(function(){ panes.overFlow();  });
		
		
	},
	navButtons: function()
	{
		var lis = $("#nav-links").children();
		lis.each(function(a,b){ 
		
			$(this).click(function()
			{
				panes.api.setPage(lis.size()-1-a);
			});
		
		});
		panes.navAni(0);
	},
	navAni: function(seekto)
	{
		var lis = $("#nav-links").children();

		var nextClicked = lis.size()-1-seekto;

		lis.each(function(a,b)
		{
			if($(this).hasClass("currentnav"))
    		{
				$(this).animate({opacity:0},100,
		        function()
		        {
		            $(b).removeClass("currentnav").animate({opacity:1},200);
		        });
   			}
   		
   		
	    	if(a == nextClicked)
	    	{
	    	    $(b).animate({opacity:0,marginTop:"50px"},200,
	    	    function()
	    	    {
	    	        $(b).addClass("currentnav").animate({opacity:1,marginTop:"0px"},300);
	    	    });
	    	}
		});


	},
	overFlow: function()
	{
		var index = panes.api.getPageIndex();
		switch(index)
		{
			case 0:
				$("#flowpanes").css("overflow-y","hidden");
				break;
			default:
				$("#flowpanes").css("overflow-y","scroll");
				break;
		}
	
	}

	

}