/**********************************************************************
 *
 * $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オブジェクト
    var customTileOverlays;
    var gocWatcher;
    ////
    // 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";
        } 

    }

    //*************************************
    /// 吹き出しの中身を作成
    //**************************************
        function createHtml(meisyou, id, address1, address2, detail1_id) {

		address = "";
		if (address2) {
			address = address1 + "<br />" ; address2;
		} else {
			address = address1;
		}

		if (detail1_id == 1) {
		         sFlg = "救護病院";
		}
		if (detail1_id == 2) {
		         sFlg = "救護医院";
		}
		if (detail1_id == 3) {
		         sFlg = "診療所";
		}

		return "<div class='info'>" + "<p class='name'>" + meisyou + "</p>" +
			"<p class='addr'>種別：" + sFlg + "</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(id) {
      var icon = new GIcon();
	if (id == 1) {
		icon.image = "icon/i_fa_hospital.png";
	}
	if (id == 2) {
		icon.image = "icon/i_fa_clinic.png";
	}
	if (id == 3) {
		icon.image = "icon/i_firstaid.png";
	}

      icon.iconSize = new GSize(32, 37);
      icon.iconAnchor = new GPoint(15,40);
      icon.infoWindowAnchor = new GPoint(15,40);

      return icon;
    }

//***********************************************
   var GOCheckbox = Class.create();
   GOCheckbox.prototype = {
      glayerOverlay: null,
      checkbox: null,
      initialize: function(glayerOverlay, checkbox) {
        this.glayerOverlay = glayerOverlay;
        this.checkbox = checkbox;
      }
    };
    var GOCheckboxWatcher = Class.create();
    GOCheckboxWatcher.prototype = {
      goCheckboxes: null,

      initialize: function(goCheckboxes) {
        this.addCheckboxes(goCheckboxes);
      },
      addCheckboxes: function(goCheckboxes) {
        this.goCheckboxes = $A(goCheckboxes);

        var watcher = this;
        this.goCheckboxes.each(function(node){
          Event.observe(node.checkbox, 'click',
            watcher.checkAll.bindAsEventListener(watcher));
        });
      },

    checkAll: function() {
        this.goCheckboxes.each(function(node){
          if (node.checkbox.checked) {
            node.glayerOverlay.show();
          }
          else {
            node.glayerOverlay.hide();
          }
        });
      }

    };
    //タイル画像を取得するためのURL生成関数
    //パラメタはタイルのインデックス番号と縮尺
    function CustomGetTileUrl(tile, zoom) { 
      //ピクセル位置の計算（タイルは１枚256px）
      var ulp = new GPoint(tile.x*256,(tile.y)*256);
      var lrp = new GPoint((tile.x+1)*256,(tile.y+1)*256);
      //緯度経度に変換
      var ull = G_NORMAL_MAP.getProjection().fromPixelToLatLng(ulp,zoom);
      var lrl = G_NORMAL_MAP.getProjection().fromPixelToLatLng(lrp,zoom);
      //URL組み立て。サーバ側は画像を生成するServlet

// ==引用ここまで
      var xmin = -180;
      var ymin = -90;
      var xmax = 180;
      var ymax = 90;
      if (ull.lng() <= lrl.lng()) {
        xmin = ull.lng();
        xmax = lrl.lng();
      }
      else {
        xmin = lrl.lng();
        xmax = ull.lng();
      }
      if (ull.lat() <= lrl.lat()) {
        ymin = ull.lat();
        ymax = lrl.lat();
      }
      else {
        ymin = lrl.lat();
        ymax = ull.lat();
      }

      var extent = xmin + ',' + ymin + ',' +  xmax + ',' + ymax;
      return 'tile.php?e=' + extent;
    }
//**************************************************

// bodyのonloadイベントで実行される関数
function load() {

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

	initDHTMLAPI();

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

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

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

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

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

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

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

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

	//マウスホイールのイベントを追加
	map.enableScrollWheelZoom();

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

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


//*****************************学区選択

    customTileOverlays = new Array();
    //小学校
    var elementaryLayer = new GTileLayer(new GCopyrightCollection(""), 11, 19);
    elementaryLayer.getTileUrl = function (tile, zoom) {
      return CustomGetTileUrl(tile, zoom) + '&l=elementary';
    };
    elementaryLayer.getOpacity = function () { return 0.5 };
    var elementaryOverlay = new GTileLayerOverlay(elementaryLayer);
    customTileOverlays.push(elementaryOverlay);
    //中学校
    var juniorhighLayer = new GTileLayer(new GCopyrightCollection(""), 11, 19);
    juniorhighLayer.getTileUrl = function (tile, zoom) {
      return CustomGetTileUrl(tile, zoom) + '&l=juniorhigh';
    };
    juniorhighLayer.getOpacity = function () { return 0.5 };
    var juniorhighOverlay = new GTileLayerOverlay(juniorhighLayer);
    customTileOverlays.push(juniorhighOverlay);
    //富士宮
    var miyaLayer = new GTileLayer(new GCopyrightCollection(""), 11, 19);
    miyaLayer.getTileUrl = function (tile, zoom) {
      return CustomGetTileUrl(tile, zoom) + '&l=miya';
    };
    miyaLayer.getOpacity = function () { return 0.5 };
    var miyaOverlay = new GTileLayerOverlay(miyaLayer);
    customTileOverlays.push(miyaOverlay);

    // マップにオーバーレイを追加
    map.addOverlay(elementaryOverlay);
    map.addOverlay(juniorhighOverlay);
    map.addOverlay(miyaOverlay);
    //デフォルトを非表示
    elementaryOverlay.hide();
    juniorhighOverlay.hide();
    miyaOverlay.hide();

    var gocElementary = new GOCheckbox(elementaryOverlay, $('chkElementary'));
    var gocJuniorhigh = new GOCheckbox(juniorhighOverlay, $('chkJuniorhigh'));
    var gocmiya = new GOCheckbox(miyaOverlay, $('chkmiya'));
    gocWatcher = new GOCheckboxWatcher([gocElementary, gocJuniorhigh,gocmiya]);

    GEvent.addListener(map, "moveend", function(){
      gocWatcher.checkAll();
    });

//*****************************

	url = "xmlfirstaid.php";

	// xmlを読み込む
        // マーカー作成xml
	request.open("GET", url, 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");
	//検索パネル
        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 detail1_id = markers[i].getAttribute("detail1_id");
          var is_landmark = markers[i].getAttribute("is_landmark");
          var open_flg = markers[i].getAttribute("open_flg");
          var new_flg = markers[i].getAttribute("new_flg");

		// アイコンを作成
		// GoogleMapsのデフォルトのアイコンを
	        // 使用する場合はコメントアウト
	        icon = createIcon(detail1_id);

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

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

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

          html = html.replace(/'/g, "\\'");
         
	      //NEWマーク
	      if (new_flg == "t") {
		var new_mark = "<img src='../../img/new_icon.gif' border='0' style='margin-top: 1px;'> ";
	      } else {
		var new_mark = "";
	      }

              //一覧に追加
              lp.innerHTML = lp.innerHTML +
                             "<li><a class=\"list\" " +
                             "     href=\"javascript:" +
                             "  map.panTo(" +
                             "    new GLatLng(" + lat + ", " +  lon + "));" +
                             "  map.openInfoWindowHtml(" +
                             "    new GLatLng(" + lat + ", " +  lon + "), '" +  html + "');" +
                             "\" title='周辺を表示'>" +
                            " "  + new_mark +  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\">" + 
								"	      <select name=\"detail1_id\" id=\"detail1_id\">" + 
								"	      		<option value=\"\">すべて</option>" + 
								"	      		<option value=\"1\">救護病院</option>" + 
								"	      		<option value=\"2\">救護医院</option>" + 
								"	      		<option value=\"3\">診療所</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_firstaid"].elements["detail1_id"].value = "";
	search();
    }

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

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

        var url = "xmlfirstaid.php?detail1_id=" + detail1_id;

        map.clearOverlays();
        //*****************************
        checkOptions();    //学区線追加
        //*****************************

        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 = "";

		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 detail1_id = markers[i].getAttribute("detail1_id");
	                  var is_landmark = markers[i].getAttribute("is_landmark");
	                  var open_flg = markers[i].getAttribute("open_flg");
              		  var new_flg = markers[i].getAttribute("new_flg");

			// アイコンを作成
			// GoogleMapsのデフォルトのアイコンを
			// 使用する場合はコメントアウト
			icon = createIcon(detail1_id);

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

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

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

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

		      //NEWマーク
		      if (new_flg == "t") {
			var new_mark = "<img src='../../img/new_icon.gif' border='0' style='margin-top: 1px;'> ";
		      } else {
			var new_mark = "";
		      }

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

	          // 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() {
  // xmlを読み込む
  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 = 18;
      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, 450, html);

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

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

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

//*************************************
//学校一覧表示
//*************************************
function showSchoolList() {
  // xmlを読み込む
  request.open("GET", "../../xml/school-fujinomiya.xml", true);

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

      var schools = xmlDoc.getElementsByTagName("school");
      var elementarySchoolList = "";
      var juniorHighSchoolList = "";
      var highSchoolList = "";

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

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

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

        if (type == "elementarySchool")
          elementarySchoolList += li;
        else if (type == "juniorHighSchool")
          juniorHighSchoolList += li;
        else if (type == "highSchool")
          highSchoolList += li;
      }

      var html = '<div style="float: left; width: 180px;">' +
                 '  <div class="school_index">小学校</div>' +
                   elementarySchoolList + '</div>' +
		'<div style="float: left; width: 160px;">' +
                 '  <div class="school_index">中学校</div>' +
                   juniorHighSchoolList + '</div>' +
		'<div style="float: left; width: 150px;">' +
                 '  <div class="school_index">高校</div>' +
                   highSchoolList + '</div>';

      showChildWindow(100, 50, 600, 600, 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);

  var cityZoomDiv = document.createElement("div");
  cityZoomDiv.setAttribute("title", "学校名を選択して周辺を表示");
  this.setButtonStyle_(cityZoomDiv);
  container.appendChild(cityZoomDiv);
  cityZoomDiv.appendChild(document.createTextNode("学校一覧"));
  GEvent.addDomListener(cityZoomDiv, "click", showSchoolList);

  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%";
}


//****************************
function checkOptions() {
  var nodes = $A(customTileOverlays);

  nodes.each(function(node){
    map.addOverlay(node);
  });
  gocWatcher.checkAll();
}
//****************************