$(document).ready(function(){
	
	$.preLoadImages("/images/map/AusMap2-AllOff.png", 
				    "/images/map/AusMap2-NSWOn.png",
					"/images/map/AusMap2-QLDOn.png",
					"/images/map/AusMap2-SAOn.png");
						 
	mapOverlay('/images/map/AusMap2-', '.png');
	
});

function mapOverlay(imgPathPrefix, imgExt) {
	
	$('#image-map').append('<div id="desc-overlay2">Loading...</div>');
	
	var mapImg = $('#image-map img');
	var mapImgOriginal = $('#image-map img').attr('src');
	
	$('#areas area').hover(
	function() {
		mapImg.attr('src', imgPathPrefix + $(this).attr('id') + imgExt);
		
		//$('#desc-overlay2').load($(this).attr('href')+' #'+$(this).attr('id'))
						 //.addClass($(this).attr('id'))
						// .show();	  
	}, 
	function() {
		mapImg.attr('src', mapImgOriginal);
		
		//$('#desc-overlay2').html('Loading...')
						  //.removeClass($(this).attr('id'))
						  //.hide();
	})//.click(function() { 
		//return false; 
	//}
	//);
	
}

(function($) {
	
	//We define a cache array to store our preloaded images	
	var cache = [];
	
	//Our anonymous function will be called preLoadImages
	$.preLoadImages = function() {
		
		//We assign the number of images to preload	to the imageCount variable	
    	var imageCount = arguments.length;
    	
    	//And loop through each image
    	for (var i = imageCount; i--;) {
    		
    		//For each image we create a DOM element
      		var cacheImage = document.createElement('img');
      		
      		//Assign the image path
      		cacheImage.src = arguments[i];
      		
      		//And add it to the cache array
      		cache.push(cacheImage);
    
    	}
    
  	}
  	
})(jQuery)