// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {
$(".picture img[rel]").overlay({expose: {maskId: 'mask'}});						   
$(".scrollable .desc").show(); //Show Banner
$(".scrollable .block").animate({ opacity: 0.55 }, 1 );	
$(".picture .desc").show(); //Show Banner
$(".picture .block").animate({ opacity: 0.55 }, 1 );	
// main vertical scroll
var items = $("#main").scrollable({
	// basic settings
	vertical: true,
	size: 1,
	clickable: false,
	easing:'linear',
	// up/down keys will always control this scrollable
	keyboard: 'static',
	onBeforeSeek: function() {
				
		//$(".scrollable .desc").animate({ opacity: 0, marginBottom: -imgDescHeight }, 10);
	},
	// assign left/right keys to the actively viewed scrollable
	onSeek: function(i) {
		horizontal.scrollable(i).focus();
		//alert(i);
		return $(".scrollable .block").animate({ opacity: 0.55 }, 250 );	
	}
	
// main navigator (thumbnail images)
}).circular().navigator("#main_navi").autoscroll({steps:1,interval:5000});
// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");
var imgDescHeight = $(".scrollable").find('.block').height(); //Find the height of the "block"

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

});