jQuery(document).ready(function(){

	jQuery("area#area1").stop().mouseover(function() { changeMap('1')})
	jQuery("area#area1").stop().mouseout(function() { changeMap('off')})	
	jQuery("area#area2").stop().mouseover(function() { changeMap('2')})
	jQuery("area#area2").stop().mouseout(function() { changeMap('off')})
	jQuery("area#area3").stop().mouseover(function() { changeMap('3')})
	jQuery("area#area3").stop().mouseout(function() { changeMap('off')})
	jQuery("area#area4").stop().mouseover(function() { changeMap('4')})
	jQuery("area#area4").stop().mouseout(function() { changeMap('off')})
 
});

function changeMap(map) {
	var $active = jQuery("#homeDiv IMG.active");
    var $next =  jQuery("#homeDiv IMG#"+map);

    $active.addClass("last-active");

    $next.css({opacity: 0.0})
        .addClass("active")
        .animate({opacity: 1.0}, 50, function() {
			$active.removeClass("active last-active");
        });
}