// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {

//	var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");

$("#chained").scrollable({circular: true, mousewheel: true}).navigator().autoscroll({
	interval: 3000		
});	

var api = $('#content').data('scrollable');
//var api = $('.scrollable').data('scrollable');
api.onSeek(function() {
	
	$('.subNav li:first-child').addClass('active');
	
});

// horizontal scrollables. each one is circular and has its own navigator instance
//var horizontal = $(".scrollable").scrollable({size: 5, clickable: false}).navigator({ navi: ".navi", history: true });

//var horizontal = $(".scrollable").not(":eq(0),:eq(3),:eq(5),:eq(6)").scrollable({size: 1}).circular().navigator(".navi");
//:gt(0)

// when page loads setup keyboard focus on the first horzontal scrollable
//horizontal.eq(0).scrollable().focus();
});

function $E(tag,el){return $(el||document).getElement(tag)}