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

    var map;               // GMapオブジェクト
    var nl;                // Now Loadingオブジェクト
    var request;           // GXmlHttpオブジェクト
    var icon;              // GIconオブジェクト

	var date = new Date();
	var ad_now = date.getFullYear();	//現在年（西暦）
	var ad_start = 2005;	//スタート年（西暦）

    ////
    // 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 dateFormat(hiduke) {
	//日付変換
	var oldStr = hiduke;
	var newStr = oldStr.replace(/-/g, '/');
	var youbiTbl = new Array('日','月','火','水','木','金','土');

	//文字列からミリ秒を取得
	var time = Date.parse(newStr);

	//ミリ秒から日付を求める
	var date = new Date();
	date.setTime(time);

	var seireki = date.getFullYear();
	var tsuki = date.getMonth() + 1;
	var nichi = date.getDate();
	var y = date.getDay();
	var youbi = youbiTbl[y]
	var ji = date.getHours();
	var pun = date.getMinutes();
	if(pun < 10) { pun = "0" + pun; }

	return seireki + "年" + tsuki + "月" + nichi + "日" + "(" + youbi + ")" + " " + ji + ":" + pun;

}

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

	// 不審者用
    function incidentInfoHtml(hiduke, location, lead, id) {

	jikan = dateFormat(hiduke);

	if (lead) {
		if (lead.length == 29) {
			lead = lead + "・・・";
		}
	}

      return "<div class='info_l'>" + 
               "<p class='name'>" + jikan + "</p>" +
               "<p class='addr'>場所: " + location + "</p>" +
               "<p class='lead'>" + lead + "</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_fushinsya.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を読み込む
	var ar = new Array();  
	diff_ad = ad_now - ad_start;
	for (i=0; i<=diff_ad; i++) {
		ar[i] = ad_now - i;
	}
	qs = "?y=" + ar.join(",");
	url = "xmlfushinsya.php" + qs;

        // マーカー作成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 = document.getElementById("listpanel");
	    //検索パネル
            var sp = getRawObject("searchpanel");

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

              // XMLから属性を読み取る
              var id = markers[i].getAttribute("id");
              var location = markers[i].getAttribute("location");
              var url = markers[i].getAttribute("url");
              var lon = parseFloat(markers[i].getAttribute("lon"));
              var lat = parseFloat(markers[i].getAttribute("lat"));
              var date_time = markers[i].getAttribute("date_time");
              var incident_description = markers[i].getAttribute("incident_description");
              var d_suspect_gender_id = markers[i].getAttribute("d_suspect_gender_id");
              var d_suspect_age_id = markers[i].getAttribute("d_suspect_age_id");
              var d_suspect_height_id = markers[i].getAttribute("d_suspect_height_idu");
              var d_suspect_build_id = markers[i].getAttribute("d_suspect_build_id");
              var d_suspect_hair_color_id = markers[i].getAttribute("d_suspect_hair_color_id");
              var d_suspect_hair_style_id = markers[i].getAttribute("d_suspect_hair_style_id");
              var d_suspect_cloth_top_style_id = markers[i].getAttribute("d_suspect_cloth_top_style_id");
              var d_suspect_cloth_top_color_id = markers[i].getAttribute("d_suspect_cloth_top_color_id");
              var d_suspect_cloth_bottom_style_id = markers[i].getAttribute("d_suspect_cloth_bottom_style_id");
              var d_suspect_cloth_bottom_color_id = markers[i].getAttribute("d_suspect_cloth_bottom_color_id");
              var d_suspect_glasses_id = markers[i].getAttribute("d_suspect_glasses_id");
              var suspect_other_characteristics = markers[i].getAttribute("suspect_other_characteristics");
              var d_victim_gender_id = markers[i].getAttribute("d_victim_gender_id");
              var d_victim_age_id = markers[i].getAttribute("d_victim_age_id");
	      var lead = markers[i].getAttribute("lead");
	      var hiduke = markers[i].getAttribute("hiduke");

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

              // htmlを作成
              var html = incidentInfoHtml(hiduke, location, lead, id);

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

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

		//時間整理
		jikan = dateFormat(hiduke);

              //一覧に追加
              lp.innerHTML = lp.innerHTML +
                             "<li><a class=\"list\" " +
                             "     href=\"javascript:" +
                             "  map.panTo(" +
                             "    new GLatLng(" + lat + ", " +  lon + "));" +
                             "  map.openInfoWindowHtml(" +
                             "    new GLatLng(" + lat + ", " +  lon + "), '" +    html + "');" +
                             "\" title='周辺を表示'>" +
                             jikan + "<br />" + location + "</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() {

	diff_ad = ad_now - ad_start;
	ng_now = ad_now - 1988;	//現在年（平成）

	cb = "";
	year = "";
	nengou = "";

	for (i=0; i<=diff_ad; i++) {
		year = ad_now - i;
		nengou = ng_now - i;
		cb +=
			"<input type=\"checkbox\" name=\"options\" value=\"" + year + "\" checked=\"checked\"" +
			" />" + year + 
			"年／平成" + nengou + "年";
		if (year > ad_start) {
			cb += "<br />";
		}
	}

      return "<table class=\"formTABLE\">" + 

								"	<tr>" + 
								"	  <th class=\"fieldCaptionTH\">" + 
								"	      年度" + 
								"	  </th>" + 
								"	  <td class=\"dataTD\">" + cb + 
								"	  </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 search() {

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

	arr = new Array();
	  for (i=0; i<document.f_fushinsya.length-1; i++){
	    if (document.f_fushinsya.elements[i].checked == true){
	      	value = ad_now - i; 
                arr.push(value);
	    }
	  }

	qs = '?y=' + arr.join(",");
	url = "xmlfushinsya.php" + qs;

        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 location = markers[i].getAttribute("location");
	              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 date_time = markers[i].getAttribute("date_time");
	              var incident_description = markers[i].getAttribute("incident_description");
	              var d_suspect_gender_id = markers[i].getAttribute("d_suspect_gender_id");
	              var d_suspect_age_id = markers[i].getAttribute("d_suspect_age_id");
	              var d_suspect_height_id = markers[i].getAttribute("d_suspect_height_idu");
	              var d_suspect_build_id = markers[i].getAttribute("d_suspect_build_id");
	              var d_suspect_hair_color_id = markers[i].getAttribute("d_suspect_hair_color_id");
	              var d_suspect_hair_style_id = markers[i].getAttribute("d_suspect_hair_style_id");
	              var d_suspect_cloth_top_style_id = markers[i].getAttribute("d_suspect_cloth_top_style_id");
	              var d_suspect_cloth_top_color_id = markers[i].getAttribute("d_suspect_cloth_top_color_id");
	              var d_suspect_cloth_bottom_style_id = markers[i].getAttribute("d_suspect_cloth_bottom_style_id");
	              var d_suspect_cloth_bottom_color_id = markers[i].getAttribute("d_suspect_cloth_bottom_color_id");
	              var d_suspect_glasses_id = markers[i].getAttribute("d_suspect_glasses_id");
	              var suspect_other_characteristics = markers[i].getAttribute("suspect_other_characteristics");
	              var d_victim_gender_id = markers[i].getAttribute("d_victim_gender_id");
	              var d_victim_age_id = markers[i].getAttribute("d_victim_age_id");
		      var lead = markers[i].getAttribute("lead");
		      var hiduke = markers[i].getAttribute("hiduke");

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

                        // htmlを作成
                        var html = incidentInfoHtml(hiduke, location, lead, id);

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

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

			//時間整理
			jikan = dateFormat(hiduke);

                        //一覧に追加
              		lp.innerHTML = lp.innerHTML +
                             "<li><a class=\"list\" " +
                             "     href=\"javascript:" +
                             "  map.panTo(" +
                             "    new GLatLng(" + lat + ", " +  lon + "));" +
                             "  map.openInfoWindowHtml(" +
                             "    new GLatLng(" + lat + ", " +  lon + "), '" +    html + "');" +
                             "\" title='周辺を表示'>" +
                             jikan + "<br />" + location + "</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 = 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);
}


//************************************* 
//地区一覧表示
//*************************************
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: 100px;">' +
                 '  <div class="school_index">小学校</div>' +
                   elementarySchoolList + '</div>' +
		'<div style="float: left; width: 100px;">' +
                 '  <div class="school_index">中学校</div>' +
                   juniorHighSchoolList + '</div>' +
		'<div style="float: left; width: 110px;">' +
                 '  <div class="school_index">高校</div>' +
                   highSchoolList + '</div>';

      showChildWindow(100, 50, 400, 500, 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 schoolZoomDiv = document.createElement("div");
  schoolZoomDiv.setAttribute("title", "学校名を選択して周辺を表示");
  this.setButtonStyle_(schoolZoomDiv);
  container.appendChild(schoolZoomDiv);
  schoolZoomDiv.appendChild(document.createTextNode("学校一覧"));
  GEvent.addDomListener(schoolZoomDiv, "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%";
}