var currentState = 0;

function readMap(){
	var map, id;
	map = $$('area');
	map.each( function(e){ 
		Event.observe(e, 'mouseover', function() { shift(e.id.substr(3)); }); 
		Event.observe(e, 'mouseout', function() { shift(0); });
		Event.observe(e, 'click', function() { changeState(e.id.substr(3)) });
	});
}

function shift(position){
	var mapbg = $('map_background');
	if(!position){
		position = currentState;
	}
	xOffset = (position * -244) + 'px 0';
	mapbg.setStyle({ backgroundPosition:xOffset });
}

function changeState(position){
	$('map_copy'+currentState).hide(); 
	$('map_copy'+position).show();
	currentState = position;
 }

Event.observe(window, 'load', function(){
	$$('.map_copy').each( function(e){ e.setStyle({ display:'none' }); });
	$('map_copy0').setStyle({ display:'block' });
	readMap();
});