// JavaScript Document

var map;
var mapsrc;
var arealist = new Array(
    "hokkaido", "tohoku", "kanto", "tokyo", "sinetu",
    "hokuriku", "tokai", "kinki", "sikoku", "chugoku",
    "kyushu", "okinawa");

$(document).ready(function(){
    // 地図画像
    map = $('#areamapimg > img');
    mapsrc = map.attr("src");
    // エリア画像キャッシュ
    $('#japanmap>area').each(function(i, val){
        $(this).addClass(arealist[i]); // エリア名をクラス名として記憶しておく
        $('<img>').attr("src", mapsrc.replace(/^(.+)(\.[a-z]+)$/, "$1_" + arealist[i] + "$2"));
    });
		// イメージマップをロールオーバー
		$('#japanmap>area').hover(function(){
				map.attr("src", mapsrc.replace(/^(.+)(\.[a-z]+)$/, "$1_" + $(this).attr('class') + "$2"));
				var areabtn = $('#areamapinfo>ul>li>.' + $(this).attr('class'));
				areabtn.css('background-position', '0 -34px');
				areabtn.css('color', '#abcd03');
				areabtn.css('text-decoration', 'underline');
		}, function(){
				map.attr("src", mapsrc);
				var areabtn = $('#areamapinfo>ul>li>.' + $(this).attr('class'));
				areabtn.css('background-position', '0 0');
				areabtn.css('color', '#666666');
				areabtn.css('text-decoration', 'none');
		});
		$('#areamapinfo>ul>li>a').hover(function(){
				map.attr("src", mapsrc.replace(/^(.+)(\.[a-z]+)$/, "$1_" + $(this).attr('class') + "$2"));
				$(this).css('background-position', '0 -34px');
				$(this).css('color', '#abcd03');
				$(this).css('text-decoration', 'underline');
		}, function(){
				map.attr("src", mapsrc);
				$(this).css('background-position', '0 0');
				$(this).css('color', '#666666');
				$(this).css('text-decoration', 'none');
		});
});