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

	

	// thumbnail scrollable
	$("#thumbnails").scrollable({size: 3, clickable: false}).find("img").each(function(index) {

		// thumbnail images trigger the overlay
		$(this).overlay({

			effect: 'apple',
			target: '#box',
			mask: { maskId: 'mask' },

			// when box is opened, scroll to correct position (in 0 seconds)
			onLoad: function() {
				$("#images").data("scrollable").seekTo(index, 0);
			}
		});
	});

	

	// scrollable inside the box.
	$("#images").scrollable();

	
	// 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});

	

});