// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(function() {
 
	
 
	// thumbnail scrollable
	$("#thumbnails").scrollable({size: 5, clickable: false}).find("img").each(function(index) {
 
		// thumbnail images trigger the overlay
		$(this).overlay({
 
			effect: 'apple',
			target: '#box',
			expose: {maskId: 'mask'},
 
			/*
				when box is opened, scroll to correct position (in 0 seconds)
				the "images" variable is defined below
			*/
			onLoad: function() {
				images.seekTo(index, 0);
			}
		});
	});
 
	
 
	// scrollable inside the box. Its API is assigned to the "images" variable
	var images = $("#images").scrollable({size: 1, api:true});
 
	
	// enable tooltips for the images
	$("#images img").tooltip({
		position: "bottom center",
		offset: [-75, -30],
		opacity: 0.8,
		effect: 'fade',
 
		// position tooltips relative to the parent scrollable
		relative: true
	});
 
	
 
	// enable reflections
	$("#thumbnails img").reflect({height: 0.5, opacity: 0.6});
 
	
 
});