﻿var map;
function load() {
  if (GBrowserIsCompatible()) {
    var zoom = 13;
    var mapsize = 500;
    var layout = {101:"1R",103:"1K",105:"1DK",107:"1LDK",108:"1SLDK",203:"2K",205:"2DK",207:"2LDK",208:"2SLDK",
		303:"3K",305:"3DK",307:"3LDK",308:"3SLDK",403:"4K",405:"4DK",407:"4LDK",408:"4SLDK"};
    var showInfoCode = ""; //今表示しているInfoWindowの物件コードを保持
    var mode = 0;
    map = new GMap2(document.getElementById("map"));

    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
    //map.enableScrollWheelZoom();
    map.setCenter(new GLatLng(34.667064,133.917675), zoom);

    //中心点アイコンの作成
    var cicon = new GIcon();
    cicon.image = "/static/img/gmap/center.png";
    cicon.iconSize = new GSize(36,50);
    cicon.iconAnchor = new GPoint(18,50);
    var cmarker; //中心点アイコンのオブジェクト
    var data; //読み込んでいる物件データ

	var clat = 34.666372;
	var clng = 133.918204;
	//GLog.write(clat + ":" + clng);
	var cpoint = new GLatLng(clat,clng);
	cmarker = new GMarker(cpoint, {icon:cicon, draggable:true});
//	map.addOverlay(cmarker);
	GEvent.addListener(cmarker, "dragend", eventIconMove);

    function eventFunc(e){
	p_max_index = price_max.selectedIndex;
	p_max_value = price_max.options[p_max_index].value;
	p_min_index = price_min.selectedIndex;
	p_min_value = price_min.options[p_min_index].value;

	if(parseInt(p_max_value) > parseInt(p_min_value)){
		p_min_index = p_max_index;
		price_min.selectedIndex = p_min_index;
		p_min_value = price_min.options[p_min_index].value;
	}

	if(!layout_L5.checked)layout_str="@@@@@@";else layout_str="000000";
	if(!layout_L4.checked)layout_str+="@";else layout_str+="0";
	if(!layout_L3.checked)layout_str+="@";else layout_str+="0";
	if(!layout_L2.checked)layout_str+="@";else layout_str+="0";
	if(!layout_L1.checked)layout_str+="@";else layout_str+="0";
	if(layout_str == "@@@@@@@@@@")layout_str = "";
	//GLog.write(layout_str);

	if(area_all.checked){
		area_value = "all";
	}else{
		area_value = "select";
	}

	getBuildingData();
    } //end of eventFunc()

    function increaseMap(e){
	mapsize += 200;
	document.getElementById("main").style.height = mapsize + "px";
	document.getElementById("menu").style.height = mapsize + "px";
	map.checkResize();
    } //end of resizeMap()

    function decreaseMap(e){
	if(mapsize > 300){
	  mapsize -= 200;
	  document.getElementById("main").style.height = mapsize + "px";
	  document.getElementById("menu").style.height = mapsize + "px";
	}
	map.checkResize();
    } //end of resizeMap()

//地図大きさ変更用イベント設定
    var mapinc = document.getElementById("mapinc");
    addListener(mapinc, 'click', increaseMap, false);
    var mapdec = document.getElementById("mapdec");
    addListener(mapdec, 'click', decreaseMap, false);

//検索条件用イベント設定
    var price_max = document.getElementById("price_max");
    var p_max_index = price_max.selectedIndex;
    var p_max_value = price_max.options[p_max_index].value;
    addListener(price_max, 'change', eventFunc, false);

    var price_min = document.getElementById("price_min");
    var p_min_index = price_min.selectedIndex;
    var p_min_value = price_min.options[p_min_index].value;
    addListener(price_min, 'change', eventFunc, false);

    var layout_L1 = document.getElementById("L1");
    var layout_L2 = document.getElementById("L2");
    var layout_L3 = document.getElementById("L3");
    var layout_L4 = document.getElementById("L4");
    var layout_L5 = document.getElementById("L5");
    addListener(layout_L1, 'click', eventFunc, false);
    addListener(layout_L2, 'click', eventFunc, false);
    addListener(layout_L3, 'click', eventFunc, false);
    addListener(layout_L4, 'click', eventFunc, false);
    addListener(layout_L5, 'click', eventFunc, false);

	var layout_str;

	if(!layout_L5.checked)layout_str="@@@@@@";else layout_str="000000";
	if(!layout_L4.checked)layout_str+="@";else layout_str+="0";
	if(!layout_L3.checked)layout_str+="@";else layout_str+="0";
	if(!layout_L2.checked)layout_str+="@";else layout_str+="0";
	if(!layout_L1.checked)layout_str+="@";else layout_str+="0";
	if(layout_str == "@@@@@@@@@@")layout_str = "";


    var area_selected = document.getElementById("area-s");
    var area_all = document.getElementById("area-a");
    var area_value = "select";
	if(area_all.checked){
		area_value = "all";
	}
    addListener(area_selected, 'click', eventFunc, false);
    addListener(area_all, 'click', eventFunc, false);

    div_found = document.getElementById("found");
    addListener(div_found, 'click', checkMode, false);

    getBuildingData();
    GEvent.addListener(map, "dragend", eventMapMove);
    GEvent.addListener(map, "zoomend", eventMapMove);
    GEvent.addListener(map, "infowindowclose", closeInfo);
  }

  function eventMapMove(){
    if(area_value == "select" && map.getZoom() >= 8){
	getBuildingData();
    }

    if(map.getZoom() < 8){
	showOkayama();
	area_value = "showOkayama";
    }else if(area_value == "showOkayama"){	
	if(area_all.checked){
		area_value = "all";
	}else{
		area_value = "select";
	}
	getBuildingData();
    }
  }

  function eventIconMove(){
    cpoint = new GLatLng(cmarker.getLatLng().lat(),cmarker.getLatLng().lng());
    makeMarker();
  }

  function showOkayama(){
     map.clearOverlays();
     clearListItems();
     var point = new GLatLng(34.640047, 133.890825);
     var marker = new GMarker(point);
     map.addOverlay(marker);
     marker.openInfoWindowHtml("岡山はココですよ！");
  } //end of show Okayama()

  function makeMarker(){

	//マーカー、リストにリセット処理
	   map.clearOverlays();
	   clearListItems();

	//中心点を作成
	map.addOverlay(cmarker);

	// マーカー作成・表示
	   ///var showMarker; //消えてしまったマーカーの再表示用
	   for (var i=0; i<data.length; i++) {
		//アイコン作成
		var icon = new GIcon(G_DEFAULT_ICON);
		var t;
		var price = parseInt(data[i]["WEB_価格"].replace(",",""));
		if(price < 1000){
		   t = "Y";
		}else if(price < 2000){
		   t = "R";
		}else if(price < 3000){
		   t = "G";
		}else if(price >= 3000){
		   t = "B";
		}else{
		   t = "Y";
		}
		
		var lnum = parseInt(data[i]["間取数"]);
		if( (lnum >= 1) && (lnum < 5) ){
			icon.image = "/static/img/gmap/marker" + t + lnum + data[i]["間取種別"] + ".png";
		}else if(lnum >= 5){
			icon.image = "/static/img/gmap/marker" + t + "5.png";
		}

		var point = new GLatLng(data[i]["Lat"],data[i]["Lng"]);
		var chiptitle = data[i]["マンション名"] + " " + data[i]["マンション部屋名"] + " / " + data[i]["WEB_価格"] + "万円 / " + data[i]["間取数"] + data[i]["間取種別"] + " ("+ data[i]["専有面積_壁芯m2"] + "㎡)";
		var marker = new GMarker(point,{icon:icon, title:chiptitle});
		marker.code = data[i]["ID"];
		///if(marker.code == showInfoCode){ showMarker = marker; } //消えてしまったマーカーの再表示用
		marker.name = data[i]["マンション名"] + data[i]["マンション部屋名"] ;
		marker.type = data[i]["物件種別::種別名"];
		marker.price = data[i]["WEB_価格"];
		marker.layout = data[i]["間取数"] + data[i]["間取種別"];
		marker.m2 = data[i]["専有面積_壁芯m2"];
			if(marker.m2 == ""){ data[i]["専有面積_公簿m2"];}
		marker.pic  = data[i]["mansion_pic01::RECID"];
		marker.distance = cpoint.distanceFrom(point);

		map.addOverlay(marker);

		addListItem( addListLink(marker), marker);
		addInfoWindow(marker);
	   } //end of for
	   ///showInfo(showMarker);//消えてしまったマーカーの再表示用
  }

  function getBuildingData(){
    //GLog.write("[検索条件] ￥" + p_max_value + "-￥" + p_min_value + " (間取数値) " + l_max_value + "-" + l_min_value + " area=" + area_value);
    var httpObj = GXmlHttp.create();
    var str = "/fmi/xml/fmresultset.xml";
/* DB */
	str += "?-db=mansion";
/* Layout */
	str += "&-lay=GMAP";
/* 状態=販売中 */
	str += "&%e7%8a%b6%e6%85%8b=%e8%b2%a9%e5%a3%b2%e4%b8%ad";
/* guest用 */
	str += "&googlemap.op=gte&googlemap=4";
/* 物件種別細目=中古マンション */
	str += "&%e7%89%a9%e4%bb%b6%e7%a8%ae%e5%88%a5ID=1301...1302";
/* 現況.op=neq	*/
    	str += "&%e7%8f%be%e6%b3%81.op=neq";
/* 現況=賃貸中	*/
    	str += "&%e7%8f%be%e6%b3%81=%e8%b3%83%e8%b2%b8%e4%b8%ad";
/* 価格 */
	str += "&%e4%be%a1%e6%a0%bc=" + p_max_value + "..." + p_min_value;
/* 間取り */
    	str += "&Lbit.op=neq";
    	str += "&Lbit=" + layout_str;
/* 表示範囲 */
	if(area_value == "select"){
	  var rectObj = map.getBounds();
	  var rectSW = rectObj.getSouthWest();
	  var rectNE = rectObj.getNorthEast();
	  var rectSLat = rectSW.lat();
	  var rectNLat = rectNE.lat();
	  var rectWLng = rectSW.lng();
	  var rectELng = rectNE.lng();
	//GLog.write("[rect] " + rectSLat + "-" + rectNLat + " : " + rectWLng + "-" + rectELng);

    	  str += "&Lat=" + rectSLat + "..." + rectNLat;
	  str += "&Lng=" + rectWLng + "..." + rectELng;
	}
/* 検索コマンド */
	str += "&-find";

    httpObj.open("get", str);

//    GLog.writeUrl("http://fmsrv/fmi/xml/fmresultset.xml?" + str);

    httpObj.onreadystatechange = function() {
//	GLog.write("Loading... s=" + httpObj.readyState + "," + httpObj.status);
	if (httpObj.readyState == 3){ //IEはreadyState==3の時、statusを参照できないらしい？
   	   document.getElementById("found").innerHTML = "[該当物件] 読み込み中...";
	   document.getElementById("loading").style.visibility = "visible";
	}else if ((httpObj.readyState == 4)/* && (httpObj.status == 200) */){
//	   GLog.write("Load OK.");

	//マーカー、リストにリセット処理
	   map.clearOverlays();
	   clearListItems();

	//データ読み込み処理
	   var xmlData = httpObj.responseXML;
	   var pointData = xmlData.getElementsByTagName("record");

	   var errCode   = xmlData.getElementsByTagName("error")[0].getAttribute("code");
//	   GLog.write("error code= "+ errCode);
	   if(errCode != 0) {
   	      document.getElementById("found").innerHTML = "[システムエラー] ErrorCode=" + errCode;
	      return;
	   }
	   var foundData = xmlData.getElementsByTagName("resultset")[0].getAttribute("count");
	   document.getElementById("found").innerHTML = "[該当物件]　全"+foundData+ "件中" +pointData.length+"件を表示";

	   var fieldData = xmlData.getElementsByTagName("field-definition");
	   var fieldCount = fieldData.length;
//	   GLog.write("fieldCount= "+ fieldCount);

	//データフィールド名取得
	   var fieldName = new Array(fieldCount);
	   for (var i=0; i<fieldCount; i++){
		fieldName[i] = fieldData[i].getAttribute("name");
	   }


	//データを配列に格納
	   data = new Array(pointData.length);
	   for (var i=0; i<pointData.length; i++) {
		var subdata = {};
		for(var j=0; j<fieldCount; j++) {
		if(pointData[i].getElementsByTagName("field")[j].firstChild != null)
		if(pointData[i].getElementsByTagName("field")[j].firstChild.firstChild != null){
//			GLog.write("j=" + j + ";" + fieldName[j] + ":" +pointData[i].getElementsByTagName("field")[j].firstChild.firstChild.nodeValue);
			subdata[fieldName[j]] = pointData[i].getElementsByTagName("field")[j].firstChild.firstChild.nodeValue;
		}else{
			subdata[fieldName[j]] = "";
		}else{
			subdata[fieldName[j]] = "";
		}
		}
	   data[i] = subdata;
	   }

/*******************************************************
	// for DEBUG
	   GLog.write(fieldName.join(","));
	   for (var i=0; i<pointData.length; i++) {
		var str1 = "";
		for (var j in data[i]) {
			str1 += data[i][j] + ",";
		}
		GLog.write(str1);
	   }
********************************************************/
	makeMarker();

/*
	// マーカー作成・表示
	   ///var showMarker; //消えてしまったマーカーの再表示用
	   for (var i=0; i<pointData.length; i++) {
		//アイコン作成
		var icon = new GIcon(G_DEFAULT_ICON);
		var t;
		var price = parseInt(data[i]["WEB_価格"].replace(",",""));
		if(price < 1000){
		   t = "Y";
		}else if(price < 2000){
		   t = "R";
		}else if(price < 3000){
		   t = "G";
		}else if(price >= 3000){
		   t = "B";
		}else{
		   t = "Y";
		}
		
		var lnum = parseInt(data[i]["間取数"]);
		if( (lnum >= 1) && (lnum < 5) ){
			icon.image = "images/marker" + t + lnum + data[i]["間取種別"] + ".png";
		}else if(lnum >= 5){
			icon.image = "images/marker" + t + "5.png";
		}

		var point = new GLatLng(data[i]["Lat"],data[i]["Lng"]);
		var chiptitle = data[i]["マンション名"] + " " + data[i]["マンション部屋名"] + " / " + data[i]["WEB_価格"] + "万円 / " + data[i]["間取数"] + data[i]["間取種別"] + " ("+ data[i]["専有面積_壁芯m2"] + "㎡)";
		var marker = new GMarker(point,{icon:icon, title:chiptitle});
		marker.code = data[i]["ID"];
		///if(marker.code == showInfoCode){ showMarker = marker; } //消えてしまったマーカーの再表示用
		marker.name = data[i]["マンション名"] + data[i]["マンション部屋名"] ;
		marker.type = data[i]["物件種別::種別名"];
		marker.price = data[i]["WEB_価格"];
		marker.layout = data[i]["間取数"] + data[i]["間取種別"];
		marker.m2 = data[i]["専有面積_壁芯m2"];
			if(marker.m2 == ""){ data[i]["専有面積_公簿m2"];}
		marker.pic  = data[i]["mansion_pic01::RECID"];
		marker.distance = "0";

		map.addOverlay(marker);

		addListItem( addListLink(marker), marker);
		addInfoWindow(marker);
	   } //end of for
	   ///showInfo(showMarker);//消えてしまったマーカーの再表示用

*/

	document.getElementById("loading").style.visibility = "hidden";
	}
    } //end of function()

    httpObj.send(null);

  } //end of getBuildingData()

  function addInfoWindow(marker){
	GEvent.addListener( marker, "click", function(){showInfo(marker);} );
  } //end of addInfoWindow()

  function showInfo(marker) {
	var infoLink = "/buy/detail/no/"+marker.code;
	var infoHtml = '<table height=100><tr><td width=110><img src="/obj/pic/t/jpg/d/mansion_pic01/l/PHP/r/' + marker.pic + '/f/PIC01/h/75/w/100/pic.jpg" height=75 /></td><td><b>' + marker.name + "</b><br />家賃：" + marker.price + "万円<br/>間取り：" + marker.layout + " (" + marker.m2 + "㎡)<div align=center><a href='"+ infoLink +"' target='_blank'>物件詳細ページ</a></div></td></tr></table>";
	marker.openInfoWindowHtml(infoHtml);

	showInfoCode.id = null;
	showInfoCode = marker.tr;
	showInfoCode.id ='tableWidget_dataSelect';

  } //end of showInfo()

  function closeInfo() {
	showInfoCode.id = null;
  }// end of closeInfo()

  function checkMode() {
	mode += 1;
	if(mode == 5){
	document.getElementById("found").style.backgroundColor = "#0c419a";
	getBuildingData();
	}
	if(mode == 10){
	document.getElementById("found").style.backgroundColor = "30c419a";
	mode = 0;
	getBuildingData();
	}
  }

  function addListLink(marker) {
	var posLink = document.createElement("a");
	posLink.innerHTML = "位置";
	posLink.href = "#";
	posLink.onclick = function() {
		map.panTo(marker.getPoint());
		showInfo(marker);
	} //end of function onclick()
	return posLink;
  } //end of addListLink()

  function addListItem( pl, marker ){
	var newTr = document.createElement("tr");
	marker.tr = newTr;

	var newTd1 = document.createElement("td");
	var newTd2 = document.createElement("td");
	var newTd3 = document.createElement("td");
	var newTd4 = document.createElement("td");
	var newTd5 = document.createElement("td");
	var newTd6 = document.createElement("td");
	var newTd7 = document.createElement("td");
	var newTd8 = document.createElement("td");

	newTd5.style.textAlign = "right";
	newTd6.style.textAlign = "right";
	newTd7.style.textAlign = "right";
	newTd8.style.textAlign = "right";

	var colCode = document.createTextNode(marker.code);
	var colName = document.createTextNode(marker.name);
	var colType = document.createTextNode(marker.type);
	var colPrice = document.createTextNode(marker.price + "万円");
	var colLayout = document.createTextNode(marker.layout);
	var colm2 = document.createTextNode(marker.m2);
	var colDistance = document.createTextNode(Math.ceil(marker.distance) /1000 + "km");

	newTd1.appendChild(pl);
	newTd2.appendChild(colCode);
	newTd3.appendChild(colType);
	newTd4.appendChild(colName);
	newTd5.appendChild(colPrice);
	newTd6.appendChild(colLayout);
	newTd7.appendChild(colm2);
	newTd8.appendChild(colDistance);

	//newTr.appendChild(newTd1);
	//newTr.appendChild(newTd2);
	//newTr.appendChild(newTd3);
	newTr.appendChild(newTd4);
	newTr.appendChild(newTd5);
	newTr.appendChild(newTd6);
	newTr.appendChild(newTd7);
	newTr.appendChild(newTd8);

	var resultList = document.getElementById("result");
	resultList.appendChild(newTr);

	newTr.onmouseover = highlightDataRow;
	newTr.onmouseout = deHighlightDataRow;
//	addListener(newTr, 'mouseover', highlightDataRow, false); //IEでは、この形はthisを渡さないから使えない
//	addListener(newTr, 'mouseout', deHighlightDataRow, false);
	addListener(newTr, 'click', function() {
		map.panTo(marker.getPoint());
		showInfo(marker);
	} );

	return newTr;
  } //end of addListItem()

  function clearListItems(){
	var resultList = document.getElementById("result");
	while(resultList.hasChildNodes()){
		resultList.removeChild(resultList.firstChild);
	}
  } //end of clearListItems()

  function addListener(elem, eventType, func, cap){
     if(elem.addEventListener){
	elem.addEventListener(eventType, func, cap);
     }else if(elem.attachEvent){
	elem.attachEvent('on'+eventType, func);
     }else{
	alert('ご利用のブラウザーはサポートされていません。');
	return false;
     }
  }//end of addListener()

} //end of load()

