function rec_button(_id,_no){
    console.log("xxxxxx:"+_no);
    $target	= $("#recommend"+_id);
    if ($target.is(':hidden')) {
	$target.slideToggle();
    }

    for(var j = 0; j < 20; j++){
	$target_ = $("#recommend"+_id+"_"+j);
	if ($target_ && !$target_.is(':hidden')) {
	    $target_.hide(0);//slideToggle();
	}
    }

    $target2	= $("#recommend"+_id+"_"+_no);
    if ($target2 && $target2.is(':hidden')) {
	$target2.slideToggle();
    }

    var __id = _id+"_"+_no;
    setTimeout(function () {
	// 時間差でスクロール実行
	scroll_delay("#rec_id"+__id) ;
    }, 200);
}

// 時間差でスクロール実行
function scroll_delay(_id){
    // スクロールの速度
    var speed = 400; // ミリ秒
    // 移動先を取得
    var target = $(_id);
    // 移動先を数値で取得
    var position = target.offset().top-120;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');

    return false;
}

function rec_close(_no){
    $target	= $("#recommend"+_no);
    $target.slideToggle();
    var _id = "0_"+_no
    setTimeout(function () {
	// 時間差でスクロール実行
	scroll_delay("#_title"+_no) ;
    }, 200);
}

function rec_toggle(_no){
    $target	= $("#recommend"+_no);
    if ($target.is(':hidden')) {
	for(var i = 0; i < 4; i++){
	    for(var j = 0; j < 20; j++){
		$target_ = $("#recommend"+i+"_"+j);
		if ($target_ && !$target_.is(':hidden')) {
		    $target_.slideToggle();
		}
	    }
	    if(i != _no){
		$target2	= $("#recommend"+i);
		if ($target2 && !$target2.is(':hidden')) {
		    $target2.slideToggle();
		}
	    }
	}
    }
    else{
	for(var i = 0; i < 4; i++){
	    if(i == _no){
		for(var j = 0; j < 20; j++){
		    $target_ = $("#recommend"+i+"_"+j);
		    if ($target_ && !$target_.is(':hidden')) {
			$target_.slideToggle();
		    }
		}
	    }
	}
    }
    $target.slideToggle();
}
function rec_toggle0(_no){
    $target = $("#recommend0_"+_no);
    $target.slideToggle();
}
function rec_toggle1(_no){
    $target = $("#recommend1_"+_no);
    $target.slideToggle();
}
function rec_toggle2(_no){
    $target = $("#recommend2_"+_no);
    $target.slideToggle();
}
function rec_toggle3(_no){
    $target = $("#recommend3_"+_no);
    $target.slideToggle();
}
function rec_toggle4(_no){
    $target = $("#recommend4_"+_no);
    $target.slideToggle();
}

$(function(){
    var rect0 = [
	[14,154,143,242],
	[145,142,269,222],
	[48,260,175,349],
	[18,350,157,434],
	[88,449,215,535],
	[633,9,763,96],
	[657,100,786,187],
	[580,190,705,274],
	[645,275,768,361],
	[505,333,632,420],
	[649,367,776,452],
	[521,430,647,513],
	[666,460,792,543],
    ];
    var rect1 = [
	[125,22,313,151],
	[322,53,488,168],
	[27,155,216,275],
	[11,317,190,440],
	[610,26,788,145],
	[588,158,781,290],
    ];
    var rect2 = [
	[125,21,314,149],
	[329,33,491,155],
	[14,162,211,291],
	[25,386,210,516],
	[496,277,672,412],
	[587,419,784,537],
    ];
    var rect3 = [
	[128,32,249,117],
	[259,17,379,106],
	[193,128,319,214],
	[385,19,510,105],
	[328,127,453,213],
	[600,14,728,96],
	[586,113,725,201],
	[638,226,767,319],
	[507,301,630,386],
	[664,340,787,436],
	[507,410,643,503],
	[662,438,792,544],
    ];
    var rect4 = [
	[387,20,508,106],
	[155,115,277,204],
	[312,115,431,202],
	[661,11,795,93],
	[596,95,722,183],
	[657,185,777,267],
	[595,274,712,355],
	[655,362,777,442],
	[524,431,645,515],
	[668,462,792,544],
    ];
    var w0 = document.getElementById('imagemap0').width;
    var w1 = document.getElementById('imagemap1').width;
    var w2 = document.getElementById('imagemap2').width;
    var w3 = document.getElementById('imagemap3').width;
    var w4 = document.getElementById('imagemap4').width;
    
    // 800->360
    var html0  = "";
    for(var i = 0; i < rect0.length; i++){
	for(var j = 0; j < 4; j++){
	    rect0[i][j] *= w0/800;
	}
	html0 += '<area shape="rect" coords='+rect0[i]+' alt="" onclick="rec_button(0,'+i+')"/>';
    }

    var html1  = "";
    for(var i = 0; i < rect1.length; i++){
	for(var j = 0; j < 4; j++){
	    rect1[i][j] *= w1/800;
	}
	html1 += '<area shape="rect" coords='+rect1[i]+' alt="" onclick="rec_button(1,'+i+')"/>';
    }
    
    var html2  = "";
    for(var i = 0; i < rect2.length; i++){
	for(var j = 0; j < 4; j++){
	    rect2[i][j] *= w2/800;
	}
	html2 += '<area shape="rect" coords='+rect2[i]+' alt="" onclick="rec_button(2,'+i+')"/>';
    }
    
    var html3  = "";
    for(var i = 0; i < rect3.length; i++){
	for(var j = 0; j < 4; j++){
	    rect3[i][j] *= w3/800;
	}
	html3 += '<area shape="rect" coords='+rect3[i]+' alt="" onclick="rec_button(3,'+i+')"/>';
    }
    
    var html4  = "";
    for(var i = 0; i < rect4.length; i++){
	for(var j = 0; j < 4; j++){
	    rect4[i][j] *= w3/800;
	}
	html4 += '<area shape="rect" coords='+rect4[i]+' alt="" onclick="rec_button(4,'+i+')"/>';
    }
    
    var doc_map0 = document.getElementById('map0');
    var doc_map1 = document.getElementById('map1');
    var doc_map2 = document.getElementById('map2');
    var doc_map3 = document.getElementById('map3');
    var doc_map4 = document.getElementById('map4');

    doc_map0.innerHTML	= html0;
    doc_map1.innerHTML	= html1;
    doc_map2.innerHTML	= html2;
    doc_map3.innerHTML	= html3;
    doc_map4.innerHTML	= html4;
})