﻿// Load this script once the document is ready
	$(document).ready(function () {
		
		// Get all the thumbnail
		$('div.thumbnailRegion8').mouseenter(function(e) {

			// Calculate the position of the image tooltip
			x = e.pageX - $(this).offset().left;
			y = e.pageY - $(this).offset().top;

			// Set the z-index of the current item, 
			// make sure it's greater than the rest of thumbnail items
			// Set the position and display the image tooltip
			$(this).css('z-index','15')
//			.children("div.tooltipRegion8sz760")
//			.css({'top': y + 10,'left': x - 760,'display':'block'});
            .children("div.tooltipRegion8sz500")
			.css({'top': y + 10,'left': x - 500,'display':'block'});
			
		}).mousemove(function(e) {
			
			// Calculate the position of the image tooltip			
			x = e.pageX - $(this).offset().left;
			y = e.pageY - $(this).offset().top;
			
			// This line causes the tooltip will follow the mouse pointer
//			$(this).children("div.tooltipRegion8sz760").css({'top': y + 10,'left': x - 760});
            $(this).children("div.tooltipRegion8sz500").css({'top': y + 10,'left': x - 500});
			
		}).mouseleave(function() {
			
			// Reset the z-index and hide the image tooltip 
//			$(this).css('z-index','1')
//			.children("div.tooltipRegion8sz760")
//			.animate({"opacity": "hide"}, "fast");
            $(this).css('z-index','1')
			.children("div.tooltipRegion8sz500")
			.animate({"opacity": "hide"}, "fast");
		});

	});

