/**********************************************************************
 *
 * $Id: map.js,v 1.4 2008/06/09 10:19:44 sanoju Exp $
 *
 * 画像受信テストアプリケーション用Javascript
 * 
 * Copyright (C) 2008 （株）富士情報技術センター
 **********************************************************************/
var map;               // GMapオブジェクト
var nl;                // Now Loadingオブジェクト
var request;           // GXmlHttpオブジェクト
var icon;              // GIconオブジェクト
////
// Now loading オブジェクト
//
// @author     Toshirou Takahashi http://jsgt.org/mt/archives/01/000539.html
// @version    0.03
// @license    著作権表示義務無し。商用利用、改造、自由。連絡不要。
// @sample     oj = new jsgt_jsgt_nowLoading()           //DIVを自動生成する場合
// @sample     oj = new jsgt_nowLoading('nloading') //DIV名で指定する場合
// @param  id  jsgt_nowLoading用DIVのID名(デフォルト_jsgt_nowLoading)
// @return     now loadingオブジェクトのインスタンス
// @UPDATE     2005.10.25 id="_jsgt_nowLoading"+nのnを追加
// 
//
function jsgt_nowLoading(id){

  if(!id){
    id = "_jsgt_nowLoading"
    id += (isNaN(jsgt_nowLoading.count))?jsgt_nowLoading.count=0:++jsgt_nowLoading.count;
    var crenlDIV = document.createElement("DIV") ;
    this.nlDIV = document.body.appendChild(crenlDIV)       ;
    this.nlDIV.setAttribute("id",id) ;
  } else {
    this.nlDIV = document.getElementById(id)
  }

  //表示 　リクエスト発行時に動作させてください
  //@param html 表示するメッセージ(デフォルト now loading... )
  this.showNL = function (html){
     this.nlDIV.style.display = "block";
     this.nlDIV.style.zIndex = "201";
     var html=(html)?html:" now loading... ";
     this.nlDIV.innerHTML = "  "+html+"   "
  } 

  //消去 　コールバック処理時に動作させてください
  this.hideNL = function (){
     this.nlDIV.innerHTML = "";
     this.nlDIV.style.display = "none";
  } 

}

// Now loadingオブジェクトここまで

    //*************************************
    /// 吹き出しの中身を作成
    //**************************************

	function createHtml(id, meisyou, address1, address2) {

		address = "";
		if (address2) {
			address = address1 + "<br />" ; address2;
		} else {
			address = address1;
		}
		return "<div class='info'>" + "<p class='name'>" + meisyou + "</p>" +
			"<p class='addr'>住所：" + address + "</p>" +
			"<p class='detail'><a href='info.php?id=" + id + "' target='_blank'>" + "詳細を見る" + "</a></p>" +
			"</div>";

	}

//*************************************
// マーカーを作成
//*************************************
function createMarker(point, html) {
  // GMarkerオブジェクトを作成
      var marker = new GMarker(point, icon);

  // イベントリスナーを設定
  GEvent.addListener(marker, "click", function() {
    // マーカーがクリックされたら吹き出しを表示
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

//*************************************
// アイコンを作成
//*************************************
function createIcon() {
  var icon = new GIcon();
  icon.image = "icon/i_nijimasu.png";
  icon.iconSize = new GSize(32, 37);
  icon.iconAnchor = new GPoint(15,40);
  icon.infoWindowAnchor = new GPoint(15,40);

  return icon;
}
 
 //+++++++++++++++++++++++++++
    	//□マウスホールによるズーム処理
    	function mouseWheelZooming( event ){
    		//マウスホイールの上／下の取得と、スクロールのキャンセル
    		if( navigator.userAgent.match( "MSIE"   ) ){ var delta = event.wheelDelta;   event.returnValue = false; }	//IE
    		if( navigator.userAgent.match( "Gecko"  ) ){ var delta = event.detail * -1;  event.preventDefault();    }	//Gecko
    		if( navigator.userAgent.match( "Safari" ) ){ var delta = event.wheelDelta;   event.returnValue = false; }	//Safari
     
    		//ズーム処理
 		map.setZoom(map.getZoom() + ( delta < 0 ? 1 : -1 ));
    	}
 //+++++++++++++++++++++++++++

//*************************************
// bodyのonloadイベントで実行される関数
//*************************************

function load() {
  // ブラウザーが対応しているかどうかチェック
  if (GBrowserIsCompatible()) {
    initDHTMLAPI();

    // id="map"のDIV要素内にGMap2オブジェクトを生成
    map = new GMap2(getRawObject("map"));

    // setCenterメソッドを実行して、中心を富士宮に合わせる

    // GLatLngは緯度(Longitude)経度(Latitude)を表すクラス

    // 2つ目の引数はズームレベル(大=詳細、小=広域)
    map.setCenter(new GLatLng(defaultLat, defaultLon), defaultZoomLevel);

    // マップタイプ(普通の地図か衛星画像か両方か)を
    // 選択するコントロール
//  map.addControl(new GMapTypeControl());

    // ズームやパンをするコントロール
    map.addControl(new GLargeMapControl());

    // 一覧からズームするためのカスタムコントロール
    map.addControl(new ListZoomControl());

    // 右下に縮小地図を表示する
//  map.addControl(new GOverviewMapControl());

   //++++++++++++++++
   	// ------------------------------------------------------------------------------------------------------------
   	// KsGMap.jp Tips 『マウスホイールによるズーム機能』	http://www.ksgmap.jp/	Copyright(c) 2005 Ksc
   	//▼ここから関連コードです▼
    
   	//マウスホイールのイベントを追加
   	if( navigator.userAgent.match( "MSIE"   ) ){ document.getElementById( "map" ).attachEvent( "onmousewheel" , mouseWheelZooming ); }
   	if( navigator.userAgent.match( "Gecko"  ) ){ document.getElementById( "map" ).addEventListener( "DOMMouseScroll" , mouseWheelZooming , false ); }
   	if( navigator.userAgent.match( "Safari" ) ){ document.getElementById( "map" ).onmousewheel = mouseWheelZooming; }
   //++++++++++++++++
   
    // アイコンを作成
    // GoogleMapsのデフォルトのアイコンを
    // 使用する場合はコメントアウト
    icon = createIcon();

    //Now Loading インスタンス生成
    nl = new jsgt_nowLoading("nowloading");

    //XMLHttpRequestによる読込み
    request = GXmlHttp.create();

    // xmlを読み込む
    request.open("GET", "xmlnijimasu.php", true);

    //コールバック関数
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        //alert( request.responseText);

	var res = request.responseXML;
        var xmlDoc = res.documentElement;
        var markers = xmlDoc.getElementsByTagName("marker");

        //一覧パネル
        var lp = getRawObject("listpanel");
	lp.innerHTML = "";
	//検索パネル
        var sp = getRawObject("searchpanel");

	for (var i = 0; i < markers.length; i++) {

	  // XMLから属性を読み取る
              var id = markers[i].getAttribute("id");
              var syozoku = markers[i].getAttribute("syozoku");
              var meisyou = markers[i].getAttribute("meisyou");
              var yuubin = markers[i].getAttribute("yuubin");
              var address1 = markers[i].getAttribute("address1");
              var address2 = markers[i].getAttribute("address2");
              var tel = markers[i].getAttribute("tel");
              var e_mail = markers[i].getAttribute("e_mail");
              var url = markers[i].getAttribute("url");
              var time1 = markers[i].getAttribute("time1");
              var time2 = markers[i].getAttribute("time2");
              var holiday = markers[i].getAttribute("holiday");
              var parking = markers[i].getAttribute("parking");
	      var lon = parseFloat(markers[i].getAttribute("lon"));
              var lat = parseFloat(markers[i].getAttribute("lat"));
              var picture1 = markers[i].getAttribute("picture1");
              var picture2 = markers[i].getAttribute("picture2");
              var picture3 = markers[i].getAttribute("picture3");
              var picture4 = markers[i].getAttribute("picture4");
              var picture5 = markers[i].getAttribute("picture5");
              var hitokoto = markers[i].getAttribute("hitokoto");
              var ukeiresuu = markers[i].getAttribute("ukeiresuu");
              var recommend = markers[i].getAttribute("recommend");
              var tokuten_point = markers[i].getAttribute("tokuten_point");
              var heartfull_nintei = markers[i].getAttribute("heartfull_nintei");
              var kurumaisuflg = markers[i].getAttribute("kurumaisuflg");
              var etc1 = markers[i].getAttribute("etc1");

          // GPointオブジェクトを作成
	  var point = new GPoint(lon,lat);

          // htmlを作成
	  var html = createHtml(id, meisyou, address1, address2);

          // マーカーを作成
          var marker = createMarker(point, html);

	  html = html.replace(/'/g, "\\'");

	  //一覧に追加
	  lp.innerHTML = lp.innerHTML +
                             "<li><a class=\"list\" " +
                             "     href=\"javascript:" +
                             "  map.panTo(" +
                             "    new GLatLng(" + lat + ", " +  lon + "));" +
                             "  map.openInfoWindowHtml(" +
                             "    new GLatLng(" + lat + ", " +  lon + "), '" +  html + "');" +
                             "\" title='周辺を表示'>" +
                            " " + meisyou + "</a></li>";

          // 地図に追加
          map.addOverlay(marker);
        }

          // 検索用
          sp.innerHTML = fujinomiya_searchHtml();
          // Now Loadingを消去
          nl.hideNL();
      }
    }

    // Now Loadingを表示
    if((typeof nl)=='object'){
      nl.showNL('データを読み込み中...'); 
    }

    //送信
    request.send(null);
  }
}



//**************************************
// 情報をHTMLで記述
//マーカークリック時に表示される詳細情報
//**************************************
function fujinomiya_searchHtml() {
  return "<table class=\"formTABLE\">" + 
							"	<tr>" + 
							"	  <th class=\"fieldCaptionTH\">店名</th>" + 
							"	  <td class=\"dataTD\">" + 
							"	      <input type=\"text\" name=\"meisyou\" id=\"meisyou\" class=\"size\" value=\"\" />" + 
							"	  </td>" + 
							"	</tr>" + 
							/*"	<tr>" + 
							"	  <th class=\"fieldCaptionTH\">" + 
							"	      商店街" + 
							"	  </th>" + 
							"	  <td class=\"dataTD\">" + 
							"	      <select name=\"syoutengai\">" + 
							"	      		<option value=\"\"></option>" + 
							"	      		<option value=\"5\"> 中央 </option>" + 
							"	      		<option value=\"2\"> 宮町 </option>" + 
							"	      		<option value=\"4\"> 本町 </option>" + 
							"	      		<option value=\"3\"> 神田 </option>" + 
							"	      		<option value=\"1\"> 西町 </option>" + 
							"	      		<option value=\"6\"> 駅前通り </option>" + 
							"	      </select>" + 
							"	  </td>" + 
							"	</tr>" + */
							"	<tr>" + 
							"	  <th class=\"fieldCaptionTH\">ハートフル<br />認定店</th>" + 
							"	  <td class=\"dataTD\">" + 
							"			<select name=\"heartfull_nintei\" id=\"heartfull_nintei\">" + 
							"				<option value=\"\" selected=\"selected\"></option>" + 
							"				<option value=\"1\" >はい</option>" + 
							"				<option value=\"2\" >いいえ</option>" + 
							"			</select>" + 
							"	  </td>" + 
							"	</tr>" + 
							"	<tr>" + 
							"	  <td class=\"buttonTD\" colspan=\"2\">" + 
							"	  	<button type=\"button\"" + 
							"	                onmouseover=\"this.style.color='green'\"" + 
							"	                onmouseout=\"this.style.color='black'\"" + 
							"									onclick=\"search()\" title=\"情報を絞り込みます。\">" + 
							"							絞込み" + 
							"	  	</button>" + 
							"	  	<button type=\"button\"" + 
							"	                onmouseover=\"this.style.color='green'\"" + 
							"	                onmouseout=\"this.style.color='black'\"" + 
							"									onclick=\"serchclear()\" title=\"検索条件をクリアします\">" + 
							"							クリア" + 
							"	  	</button>" + 
							"    </td>" + 
							"	</tr>" + 
							"  </table>";
}

//*************************************
//クリア処理
//*************************************
function serchclear()	{
　document.forms["f_nijimasu"].elements["meisyou"].value = ""; 
  document.forms["f_nijimasu"].elements["heartfull_nintei"].value = ""; 
  search();
}


//*************************************
//検索処理
//*************************************
function search() {
  var meisyou =   encodeURIComponent(document.getElementById("meisyou").value);
  var heartfull_nintei =   encodeURIComponent(document.getElementById("heartfull_nintei").value);

  //XMLHttpRequestによる読込み
  var request = GXmlHttp.create();
  var url = "xmlnijimasu.php?meisyou=" + meisyou +  "&heartfull_nintei=" + heartfull_nintei;

  // xmlnijimasu.phpを読み込む
  request.open("GET", url, true);

  //コールバック関数
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      //alert( request.responseTEXT);

      var res = request.responseXML;
      var xmlDoc = res.documentElement;

      // 検索結果をリセット
      var lp = document.getElementById("listpanel");
      lp.innerHTML = "";
      map.clearOverlays();

        var markers = xmlDoc.getElementsByTagName("marker");

         for (var i = 0; i < markers.length; i++) {

          // XMLから属性を読み取る
          var id = markers[i].getAttribute("id");
          var syozoku = markers[i].getAttribute("syozoku");
          var meisyou = markers[i].getAttribute("meisyou");
          var yuubin = markers[i].getAttribute("yuubin");
          var address1 = markers[i].getAttribute("address1");
          var address2 = markers[i].getAttribute("address2");
          var tel = markers[i].getAttribute("tel");
          var e_mail = markers[i].getAttribute("e_mail");
          var url = markers[i].getAttribute("url");
          var time1 = markers[i].getAttribute("time1");
          var time2 = markers[i].getAttribute("time2");
          var holiday = markers[i].getAttribute("holiday");
          var parking = markers[i].getAttribute("parking");
          var lon = parseFloat(markers[i].getAttribute("lon"));
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var picture1 = markers[i].getAttribute("picture1");
          var picture2 = markers[i].getAttribute("picture2");
          var picture3 = markers[i].getAttribute("picture3");
          var picture4 = markers[i].getAttribute("picture4");
          var picture5 = markers[i].getAttribute("picture5");
          var hitokoto = markers[i].getAttribute("hitokoto");
          var ukeiresuu = markers[i].getAttribute("ukeiresuu");
          var recommend = markers[i].getAttribute("recommend");
          var tokuten_point = markers[i].getAttribute("tokuten_point");
          var heartfull_nintei = markers[i].getAttribute("heartfull_nintei");
          var kurumaisuflg = markers[i].getAttribute("kurumaisuflg");
          var etc1 = markers[i].getAttribute("etc1");

          // GPointオブジェクトを作成
          var point = new GPoint(lon,lat);

          // htmlを作成
          var html = createHtml(id, meisyou, address1, address2);

          // マーカーを作成
          var marker = createMarker(point, html);

          html = html.replace(/'/g, "\\'");

          //一覧に追加
          lp.innerHTML = lp.innerHTML +
                         "<li><a class=\"list\" " +
                         "     href=\"javascript:" +
                         "  map.panTo(" +
                         "    new GLatLng(" + lat + ", " +  lon + "));" +
                         "  map.openInfoWindowHtml(" +
                         "    new GLatLng(" + lat + ", " +  lon + "), '" +    html + "');" +
                         "\" title='周辺を表示'>" +
                        " " + meisyou + "</a></li>";
           // 地図に追加
          map.addOverlay(marker);
        } //for
          
      // Now Loadingを消去
      nl.hideNL();
      nl.nlDIV.style.width ="0px";
      nl.nlDIV.style.height ="0px";
    }
  }

  //送信
  request.send(null);

  // Now Loadingを表示
  if((typeof nl)=='object'){
    nl.nlDIV.style.width ='180px';
    nl.nlDIV.style.height ='20px';
    nl.showNL('検索しています...') ;
  }

}

//************************************* 
//地区一覧表示
//*************************************
function showAreaList() {
  request.open("GET", "../../xml/area-fujinomiya.xml", true);

  //コールバック関数
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var res = request.responseXML;
      var xmlDoc = res.documentElement;

      var areas = xmlDoc.getElementsByTagName("area");
      var areaList = "";
      var html = "";
      var prevIndex = "";

      var li = new Array();

      for (var i = 0; i < areas.length; i++) {

        // XMLから属性を読み取る
        var name = areas[i].getAttribute("name");
        var lon = parseFloat(areas[i].getAttribute("lon"));
        var lat = parseFloat(areas[i].getAttribute("lat"));
        var index = areas[i].getAttribute("index");

        if (prevIndex != index) {
          li.push("<div class=\"area_index\">" + index + "</div>");
        }

        prevIndex = index;

        li.push("<div class=\"area_name\"><a href=\"javascript:" +
                "  map.panTo(" +
                "    new GLatLng(" + lat + ", " +
                                     lon + "));" +
                "  closeChildWindow();" +
                "\" title=\"周辺を表示\">" + name + "</a>" +
                "</div>");
      }

      var maxrows = 15;
      html = '<div style="float: left; width: 100px;">';
      for (var i = 0; i < li.length; i++) {
        if (i != 0 && i % maxrows == 0) // 列換え
          html += '</div><div style="float: left; width: 100px;">';

        html += li[i];
      }
      html += '</div>';

      showChildWindow(100, 50, 700, 400, html);

      // Now Loadingを消去
      nl.hideNL();
    }
  }

  // Now Loadingを表示
  if((typeof nl)=='object'){
    nl.showNL(); 
  }

  //送信
  request.send(null);
}

// A ListZoomControl is a GControl that displays a school-list button
// and a area-list button
function ListZoomControl() {
}

ListZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
ListZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var areaZoomDiv = document.createElement("div");
  areaZoomDiv.setAttribute("title", "地区名を選択して周辺を表示");
  this.setButtonStyle_(areaZoomDiv);
  container.appendChild(areaZoomDiv);
  areaZoomDiv.appendChild(document.createTextNode("地区一覧"));
  GEvent.addDomListener(areaZoomDiv, "click", showAreaList);

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
ListZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
ListZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.color = "#333366";
  button.style.backgroundColor = "white";
  button.style.border = "2px outset #336666";
  button.style.padding = "3px 1em 3px 1em";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
//  button.style.width = "6em";
  button.style.cursor = "pointer";
//  button.style.fontSize = "75%";
}