function switchToMap(areaName) {
	var map = $('map');
	if (map.useMap.substring(map.useMap.indexOf('#')+1) == areaName) return;
	
	map.opacity = 1;

	if (!map.observingLoad) {
		map.observe('load', function(event){
			var inTimer = setInterval(function() {
				if (map.opacity < 1) {
					map.opacity += .125;
					map.setOpacity(map.opacity);
					loading.setOpacity(1-map.opacity);
				} else {
					clearInterval(inTimer);
					loading.hide();
				}
			}, 20);
		});
		map.observingLoad = true;
	}
	
	loading.show();
	var outTimer = setInterval(function(){
		if (map.opacity > 0) {
			map.opacity -= .125;
			map.setOpacity(map.opacity);
			loading.setOpacity(1-map.opacity);
		} else {
			clearInterval(outTimer);
			map.src = 'images/map/'+areaName+'.png';
			map.useMap = '#'+areaName;
		}
	}, 20);
}

$('england').observe('click', function(event) {
	var area = event.element();
	if (area.nodeName != 'AREA') return;
	event.stop();
	
	var areaName = area.id.match(/map_(?:england)_(.+)/);
	if (!areaName.length == 2) return;
	switchToMap(areaName[1]);
});

$$('area.england').each(function(element){element.observe('click', function(event) {
	event.stop();
	switchToMap('england');
})});

var loading = new Element('img', {'src' : 'images/map/loading.png', 'style' : 'position: absolute; margin-left: -500px;'});
loading.setOpacity(0);
loading.hide();
$('map').parentNode.appendChild(loading);