// JavaScript Document
$(document).ready(function(){

  // マップの初期化
  var map = new GMap2(document.getElementById("mapArea"));
  
  // コントローラー
  map.addControl(new GSmallZoomControl3D());

  // 1番目の店データを読み込み中央に表示
  var firstData = $(".shopmap:first").attr("longdesc").split(",");
  var burnsvilleMN = new GLatLng(parseFloat(firstData[2]),parseFloat(firstData[3]));
  map.setCenter(burnsvilleMN, parseFloat(firstData[4]));

  var manager = new GMarkerManager(map);
  var markers = [];

  // 店舗数（ボタン）の数だけループ
  $(".shopmap").each(function(index, domEle){

	var shopdata = ($(domEle).attr("longdesc")).split(",");

	//マーカーを作成 
	var marker = new GMarker(new GLatLng(parseFloat(shopdata[2]), parseFloat(shopdata[3])));
	markers[index] = marker;

	// ボタンをクリック
	$(domEle).click(function(){
		displayPoint(marker, index, shopdata);
	;})

	//マーカーをクリック 
	GEvent.addListener(marker, "click", function(){
		displayPoint(marker, index, shopdata);
	});
  });

  // マーカーを地図上に配置 
  manager.addMarkers(markers, 2);
  manager.refresh();

  // 1番目の吹き出しを表示 
  displayPoint(markers[0], 0, firstData);

  // 吹き出しを表示 
  function displayPoint(marker, index, shopdata){

	//マーカーを中央に 
	var moveEnd = GEvent.addListener(map, "moveend", function(){
		GEvent.removeListener(moveEnd);
	});
	map.panTo(marker.getLatLng());
  
	// 少し待ってから吹き出し表示
	var txt="<p class='mapInfoWin'><strong>" + shopdata[1] + "</strong><br />" + shopdata[5] + "</p>"; 
	window.setTimeout( function() {
	  marker.openInfoWindowHtml(txt);
	}, 500);
  }
});