$(document).ready(function(){
	
	var currentSlide = 0; // on page load, slide 0 should be active
	var realNum;
	var currentHeadingId;
	var currentTextId;
	var newHeading;
	
	// init scrollable
	// interval - speed is when the animation to the next slide begins
	
	$(".scrollable").scrollable({circular: true,speed:1250}).autoscroll({ autoplay: true,interval: 9000 });


	// get access to scrollable api
	var api = $(".scrollable").data("scrollable");
	
	api.onSeek(function() {
		// inside callbacks the "this" variable is a reference to the API
		currentSlide 		= this.getIndex();
		realNum				= currentSlide+1;
		currentHeadingId 	= '#slide-heading-'+realNum;
		currentTextId		= '#slide-text-'+realNum;
		
		// fade out currentSlide text
		$(".currentSlide").fadeOut(250).addClass('hiddenSlide').removeClass('currentSlide');
		
		$("#slideshow-right").find(currentHeadingId).delay(300).fadeIn(250).addClass('currentSlide').removeClass('hiddenSlide');
		$("#slideshow-right").find(currentTextId).delay(300).fadeIn(250).addClass('currentSlide').removeClass('hiddenSlide');
		
		
	});
	
	
	// when a navigational button is pressed, stop the autoscrolling
	$("#prevBtn, #nextBtn").click(function(){
		api.stop();
	});
	
	
	// when one hovers over the slideshow, fade in the controls
	$("#slideshow-left").hover(
	function(){
		$("#prevBtn,#nextBtn").stop().fadeTo(300,1);
		},
	
	function(){
		$("#prevBtn,#nextBtn").stop().fadeTo(300,0);
		}
	
	);

	

});