/**********************************************************************
 *
 * $Id: public.js,v 2.0 2009/10/31 $
 *
 * 画像受信テストアプリケーション用Javascript
 * 
 * Copyright (C) 2009 （株）富士情報技術センター
 **********************************************************************/

    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 = getRawObject(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(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(id) {
      var icon = new GIcon();
	if (id == 1) {
		icon.image = "icon/i_kuni.png";
	}
	if (id == 2) {
		icon.image = "icon/i_ken.png";
	}
	if (id == 3) {
		icon.image = "icon/i_cityhall.png";
	}
	if (id == 4) {
		icon.image = "icon/i_police.png";
	}
	if (id == 5) {
		icon.image = "icon/i_firestation.png";
	}

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

      return icon;
    }


//*************************************
// bodyのonloadイベントで実行される関数
//*************************************
function load(cid) {
			// ブラウザーが対応しているかどうかチェック
      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());

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

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

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

	if (cid) {
		url = "xmlpublic.php?detail1_id=" + cid;
	} else {
		url = "xmlpublic.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 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(id, meisyou, address1, address2);

              // マーカーを作成
              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();
          }//if
        }//if

        // 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=\"detail1_id\" id=\"detail1_id\">" + 
								"	      		<option value=\"\">すべて</option>" + 
								"	      		<option value=\"1\">国の施設</option>" + 
								"	      		<option value=\"2\">県の施設</option>" + 
								"	      		<option value=\"3\">市役所・出張所</option>" + 
								"	      		<option value=\"4\">警察</option>" + 
								"	      		<option value=\"5\">消防</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_public"].elements["meisyou"].value = "";
　　　document.forms["f_public"].elements["detail1_id"].value = "";
      search();
    }

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

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

      // xmlpublic.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 detail1_id = markers[i].getAttribute("detail1_id");
              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(id, meisyou, address1, address2);

              // マーカーを作成
              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);
            } //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() {
     // 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);
}

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