$(function(){
	var box1 = $('#middle_1st_navi1 a');
	box1.click(function(){
		$('#area_box').css({'display':'block'});
		$('#railway_box').css({'display':'none'});
		$('#town_box').css({'display':'none'});		

		changeImage(1);
	});

	var box2 = $('#middle_1st_navi2 a');
	box2.click(function(){
		$('#area_box').css({'display':'none'});
		$('#railway_box').css({'display':'block'});
		$('#town_box').css({'display':'none'});		

		changeImage(2);
	});

	var box3 = $('#middle_1st_navi3 a');
	box3.click(function(){
		$('#area_box').css({'display':'none'});
		$('#railway_box').css({'display':'none'});
		$('#town_box').css({'display':'block'});		

		changeImage(3);
	});

	function changeImage (num){
		var src = $('#middle_1st_navi'+num+' a img').attr('src').replace(/_(off|on)/,'');
		$('#middle_1st_navi'+num+' a img').attr('src',src);

		for(i=1;i<=3;i++){
			if(i != num){
				var img = $('#middle_1st_navi'+i+' a img');
				
				if(!img.attr('src').match('_off')){
					var src = img.attr('src').replace('.gif','_off.gif');
					img.attr('src',src);
				}
			}
		}
	}
});