// execute your scripts when DOM is ready. this is a good habit 
$(function() {         
         
    // initialize scrollable  
  var api =  $("div#slideshow").scrollable({
    	size:1,
    	clickable:true,
    	loop: true,
		vertical: true,
    	interval: 5000,
    	speed: 750,
        items: '.items',
        navi: '#slideshowNav',
        
        onBeforeSeek: function() { 
            this.getItems().fadeTo(300, 0.2);
           }, 
         
        // when seek ends resume items to full transparency 
        onSeek: function() { 
            this.getItems().fadeTo(300, 1);
            var slidenum 	= this.getIndex();
           			
  			var titlecontainer 	= "#info-"+slidenum+" .title";       	
  			var title 			= $(titlecontainer).html();
  			
  			var blurbcontainer 	= "#info-"+slidenum+" .introtext";
  			var blurb			= $(blurbcontainer).html();         
            
            var featureBtnId	= "#featurebtn-"+slidenum;
            
            $("#slideshowTitle").html(title);
            $("#slideshowBlurb").html(blurb);
            
             $("#slideshowNav > *").removeClass("activefeature");
            $(featureBtnId).addClass("activefeature");
            
            }
            
           
            
            

    });          

}); 

// we need to define a few new functions here

function goToSlide(slide) {

	// get handle to scrollable api
	var api		= $("div#slideshow").scrollable();
	
	var current = api.getIndex();

	if (slide != current) {
		api.seekTo(slide);
	}	

} // end function goToSlide()