jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$.preloadImages("../javascript/jQueryMap/images/region1.png");
$.preloadImages("../javascript/jQueryMap/images/region2.png");
$.preloadImages("../javascript/jQueryMap/images/region3.png");
$.preloadImages("../javascript/jQueryMap/images/region4.png");
$.preloadImages("../javascript/jQueryMap/images/region5.png");
$.preloadImages("../javascript/jQueryMap/images/region6.png");
$.preloadImages("../javascript/jQueryMap/images/region7.png");
				
$(document).ready(function()
{
	$('.state').hover
	(
		function()
		{
			$('.state-copy').remove();
			$('.state-mask').remove();
			
			var img = "<img class=\"state-copy\" id=\"" + $(this).attr("id") + "-copy\" src=\"../javascript/jQueryMap/images/" + $(this).attr("id") + ".png\" />";
			var imgmask = "<img class=\"state-mask\" id=\"" + $(this).attr("id") + "-mask\" src=\"../javascript/jQueryMap/images/spacer.png\" />";
			
			$("#usmap").prepend(img);
			$("#usmap").prepend(imgmask);
			positionimage();
			$(".state-copy").each(function()
			{
				var width = $(this).width();
				var height = $(this).height();
				
				var zoomheight = height * 1.2;
				var zoomwidth = width * 1.2;
				
				var	centerheight = (zoomheight - height) / 2;
				var	centerwidth = (zoomwidth - width) / 2;
			
				$(this).animate(
				{
					top: '-=' + centerheight,
					left: '-=' + centerwidth,
					width: zoomwidth,
					height: zoomheight
				}, 100);
	
			});
			
		},
		function(){
			$('.state-copy').remove();
			$('.state-mask').remove();
		}
	);
});

function positionimage()
{
	$("#region1-copy").css({'top':20,'left':390});
	$("#region2-copy").css({'top':100,'left':320});
	$("#region3-copy").css({'top':160,'left':280});
	$("#region4-copy").css({'top':25,'left':190});
	$("#region5-copy").css({'top':120,'left':130});
	$("#region6-copy").css({'top':-15,'left':-30});
	$("#region7-copy").css({'top':80,'left':-10});
}