$(document).ready(function() {
	
	$(".scrollable").scrollable({
			circular: true,
			speed: 1000
		}).autoscroll({
			autoplay: true,
			interval: 6000
		});

	// get a handle here to the api
	var api = $(".scrollable").data("scrollable");
	
	// we need a function that sets the current slide text
	// it will be called at page load and for every "seek"
	
	function showCurrentSlideText() {
	
		var curPos		= api.getIndex();
		var curId		= "#text-"+curPos;

		$(curId).addClass("current").fadeIn(250);
	
	} // end showCurrentSlideText()	


	// call the first slide on document.ready
	showCurrentSlideText();
		
		
	// use the api to get rid of the current slide...
	api.onBeforeSeek(function() {
		$("#text-slides .current").fadeOut(800).removeClass("current");
		});
	
	// ... and call the new one
	api.onSeek(function() {
		showCurrentSlideText();	
		});
		
	$(".slide-button").hover(
		function() {
			api.pause();
			},
		function() {

			}
	);
	
	
	// Shows/Hides the featured slides navigation buttons
	// when the top part of the page is hovered
	$("#feature-wrapper").hover(
		function(){
			$("#slide-navigation").stop().fadeTo(250,1);
		},
		function(){
			$("#slide-navigation").stop().fadeOut(250,0);
		}
	);
	
});