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

$(document).ready(function(){
	var imgBlank = "http://www.carplus.org.uk/wordpress/wp-content/themes/carplus/images/map/mapBlank.png";
	var imgUK = "http://www.carplus.org.uk/wordpress/wp-content/themes/carplus/images/map/uk.png";
	var imgPath = "http://www.carplus.org.uk/wordpress/wp-content/themes/carplus/images/map/"; 	
	$('ul.nav a').hover(  
    function(){	
			var imgVal = $(this).attr("class");				
			var imgSrc = imgPath + imgVal + ".png";
			if (imgVal == "uk") {
			  $('#cMap').siblings("img").attr("src",imgUK);
			}
			else {
			  $('#cMap').siblings("img").attr("src",imgSrc);
			  $(this).addClass('this');	
			}
    },
		function(){	
			var imgVal = $(this).attr("class");	
			$('#cMap').siblings("img").attr("src",imgBlank);
			$(this).removeClass('this');	
		}
	);
 /* Bug in JQuery - hover() doesn't work on area element in IE.  Have to use separate 
	* mouseover / mouseout events.
	* See http://groups.google.com/group/jquery-en/browse_thread/thread/8fefc900532f7727
	*/
	$('#cMap *').mouseover(  	
		function(){
			var imgVal = $(this).attr("class");
			var imgSrc = imgPath + imgVal + ".png";	
			$(this).parent("map").siblings("img").attr("src",imgSrc);
			$('ul.nav li a.'+imgVal).parent('li').addClass('this');
		}
	);		
	$('#cMap *').mouseout( 		
		function(){	
			var imgVal = $(this).attr("class");			  
			$(this).parent("map").siblings("img").attr("src",imgBlank); 
			$('ul.nav li a.'+imgVal).parent('li').removeClass('this');			
		}
	);
  $.preloadImages(
    imgPath + "ee.png",
    imgPath + "em.png",
    imgPath + "ln.png",
    imgPath + "mapBlank.png",
    imgPath + "ne.png",
    imgPath + "ni.png",
    imgPath + "nw.png",
    imgPath + "sc.png",
    imgPath + "se.png",
    imgPath + "sw.png",
    imgPath + "uk.png",
    imgPath + "wa.png",
    imgPath + "wm.png",
    imgPath + "ye.png"                                       
    );	
});