/* This ensures the script isn't executed until all resources are parsed.  Allowing us to ensure that all required scripts have been loaded
   and more importantly, that the DOM is ready for manipulation. */
$(document).ready(function() {

	/* Grab the display API for the Thumbnail Collection */
	var images = $("#ServerPopup").scrollable({size: 1, api:true});
	
	/* Add scrollable to the main display of image slices (thumbnails) */
	$("#ServerThunbnails").scrollable({size: 3, clickable: false});
	
	/* Launch modal on click of individual thumbs */
	$('#ServerThunbnails').find("img").each(function(index) {
		// thumbnail images trigger overlay
		$(this).overlay({
			target : '#box',
			effect : 'apple',
			expose : { maskId: 'mask' },
			onLoad : function() {
				images.seekTo(index, 0);
			}
		});
	});		
	
	/* Configure "Info" Tooltips */
	$('#ServerPopup .items span.tooltipHoverBox').hover(
		function() {
			$(this).find('.info').fadeIn();
		},
		function(e) {					
			$(this).find('.info').fadeOut();
		}					
	);

});