<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="スマッチ　物件検索" 
	height="300"
	author="convivial-web"
	author_email="info@convivial-web.com" >
  <Require feature="sharedmap"/>
  <Require feature="analytics"/>
</ModulePrefs>
<Content type="html"><![CDATA[
<div style=" border:1px solid; margin:2px; padding:2px;  background-color: #FFFFFF">
	<div style="float:left">
		<input id="SE010" type="checkbox"  checked="true" /><label for="SE010">新築マンション</label><br/>
		<input id="SE011" type="checkbox"  checked="true" /><label for="SE011">中古マンション</label><br/>
		
	</div>
	<div style="float:left">
		<input id="SE020" type="checkbox"  checked="true" /><label for="SE020">新築一戸建て</label><br/>
		<input id="SE021" type="checkbox"  checked="true" /><label for="SE021">中古一戸建て</label><br/>
		<input id="SE030" type="checkbox"  checked="true" /><label for="SE030">土地</label><br/>
	</div>
	<div style="clear:both"></div>
</div>

<div style=" border:1px solid; margin:2px; padding:2px; background-color: #FFFFFF">
	<div style="float:left">
		<input id="M1" type="checkbox" checked="true"  /><label for="M1">ワンルーム</label><br/>
		<input id="M2" type="checkbox" checked="true"  /><label for="M2">1K/DK/LDK</label><br/>
		<input id="M3" type="checkbox" checked="true"  /><label for="M3">2K/DK/LDK</label>
	</div>
	<div style="float:left">
		<input id="M4" type="checkbox" checked="true"  /><label for="M4">3K/DK/LDK</label><br/>
		<input id="M5" type="checkbox" checked="true"  /><label for="M5">4K/DK/LDK</label><br/>
		<input id="M6" type="checkbox" checked="true"  /><label for="M6">5K以上</label>
	</div>
	<div style="clear:both"></div>
</div>
<input type="button" value="不動産を検索" onClick="search();" />
<div id="bukkenResult" ></div>
<div>
powered by <a href="http://www.smatch.jp/" target="_blank">スマッチ</a>
</div>

<style type="text/css">
#bukkenResult {
	border:1px solid; 
	background-color:#FFF; 
	overflow:auto; 
	display:block;
	height:170px;
	margin-top: 4px;
	margin-left: 4px;
	margin-right:4px;
	text-align: left;
}

#blogResult {
	border:1px solid; 
	background-color:#FFF; 
	overflow:auto;
	height:170px;
	margin:3px;
	text-align: left;
}


.bukkenList1 {
	cursor:pointer;
	background-color: #FFFFFF;
	padding: 4px;
}

.bukkenList2 {
	cursor:pointer;
	background-color: #F0F0F0;
	padding: 4px;
}

.bukkenList1 h2 , .bukkenList2 h2 {
	font-size:0.9em;
	font-weight:bold;
	padding:0px;
	margin:1px;
}
.bukkenList1 span,.bukkenList2 span {
	font-size:0.7em;
	color:#FF0000;
}
.bukkenList1 p , .bukkenList2 p {
	font-size:0.8em;
	padding:0px;
	margin:2px;
	line-height: 130%;
}

.bukkenMarker {
	color: #000000;
	margin:1px;
	padding:2px;
	border:0px solid;
	width:300px;
	height:250px;
	overflow:auto;
}
.bukkenMarkerSub {
	color: #000000;
	font-size:0.9em;
	line-height: 130%;
	margin:4px;
	padding:6px;
	border:0px solid;
	background-color: #F0F0F0;
	
}
.bukkenMarkerSub span {
	font-size:0.7em;
	color:#FF0000;
}


</style>
<script type="text/javascript" src="http://convivial-web.com/lib/js/prototype.js" ></script>
<script>
_IG_Analytics("UA-378291-1","/mapplets/");

var map = new GMap2();
var geocoder = new GClientGeocoder();

function $(id) {
	return document.getElementById(id);
}

function search(address) {
	var url = "http://convivial-web.com/api/smatch/getBukkenInfo.php?";

	$('bukkenResult').innerHTML = "検索中です...";
	var pars = "V=2" ;
	pars += "&geocoding=TRUE";
	pars += "&format=text/json";
	if( $('SE010').checked )  pars += "&SE[]=010";
	if( $('SE011').checked )  pars += "&SE[]=011";
	if( $('SE020').checked )  pars += "&SE[]=020";
	if( $('SE021').checked )  pars += "&SE[]=021";
	if( $('SE030').checked )  pars += "&SE[]=030";
	
	if( $('M1').checked )  pars += "&M[]=1";
	if( $('M2').checked )  pars += "&M[]=2";
	if( $('M3').checked )  pars += "&M[]=3";
	if( $('M4').checked )  pars += "&M[]=4";
	if( $('M5').checked )  pars += "&M[]=5";
	if( $('M5').checked )  pars += "&M[]=6";
			   
			   
	map.getBoundsAsync( function( bounds ) {
		var center = bounds.getCenter();
		var wx = center.lng();
		var wy = center.lat();
		var jy = wy * 1.000106961 - wx * 0.000017467 - 0.004602017;
		var jx = wx * 1.000083049 + wy * 0.000046047 - 0.010041046;
		
		var sw = bounds.getSouthWest();
		var ne = bounds.getNorthEast();
		var width = parseFloat( ne.distanceFrom( sw ) );
		
		pars += "&LG=" + jx;
		pars += "&LT=" + jy;
		pars += "&DIST=" + width / 3000;
		pars += "&CNT=20";
		pars += "&P=1";
		//pars += "&debug=true";
		url += pars;
		
		//$('bukkenResult').innerHTML = url ;
		_IG_FetchContent( url , responseBukkenInfo );
	} );

}


function responseBukkenInfo(response) {
	var html = "";
	var bounds = new GLatLngBounds();
	map.clearOverlays();
	
	this.bukkenResults = new SearchResults(
		"bukken_result","物件検索",
		{ 
			"markerIcon" : null ,
			"markerClass" : "bukkenMarker",
			"markerSubClass" : "bukkenMarkerSub",
			"listClass1" : "bukkenList1",
			"listClass2" : "bukkenList2"
		} );	
		
	var result =  eval('(' + response + ')');
	if( result.smatch.resultset.item ) {
		for( var i = 0 ; i < result.smatch.resultset.item.length ; i++ ) {
			var item = result.smatch.resultset.item[i];
			if( !isNaN(parseFloat(item.latitude ) )) {

				var markerHtml = "";
				markerHtml += createBukkenHTML(item);

				
				
				var listHtml = "";
				listHtml += "<h2>";
				listHtml += item.stitle;
				listHtml += "</h2>";

				this.bukkenResults.addResult( "bukken_result_" + i , 
					item.latitude , item.longitude , markerHtml , listHtml);
					
				bounds.extend( new GLatLng( item.latitude , item.longitude ) );
			}
			
			
		}		
		this.bukkenResults.display(this.map, $('bukkenResult'));
		
	}else { 
		$('bukkenResult').innerHTML = "物件はみつりませんでした。";
	}
}



function createBukkenHTML( item ) {
	var html = "";
	html += "<div class='bukkenDetail' style='font-weight:bold;'>" + item.category + "</div>";
	html += "<h2 style='font-size:14px;'>" ;
	html += "<a target='_blank' href='" + item.link + "' >";
	html += item.stitle 
	html += "</a>";
	html += "</h2>";
	html += "<div class='bukkenDetail'><span style='font-weight:bold;'>住所：</span>" + item.address + "</div>";
	html += "<div class='bukkenDetail'><span style='font-weight:bold;'>価格：</span>" + item.kakaku + "</div>";
	html += "<div class='bukkenDetail'><span style='font-weight:bold;'>間取り：</span>" + item.madori + "</div>";
	html += "<div class='bukkenDetail'><span style='font-weight:bold;'>面積：</span>" + item.menseki + "</div>";
	html += "<div class='bukkenDetail'><span style='font-weight:bold;'>築年：</span>" + item.chikunen + "</div>";
	//html += "<div>" + item.description + "</div>";	

	if( item.kanigazo != null && item.kanigazo != "" ) {
		html += "<a target='_blank' href='" + item.kanigazo + "' >";
		html += "<img width='100' height='100' style='1px #000000 solid;' src='" + item.kanigazo +"' />";
		html += "</a>";
	}
	if( item.madorigazo != null && item.madorigazo != "" ) {
		html += "<a target='_blank' href='" + item.madorigazo + "' >";
		html += "<img width='100' height='100' style='1px #000000 solid;'  src='" + item.madorigazo +"' />";
		html += "</a>";
	}

	html += '<div>';
	//html += '<iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=convivialblog-22&o=9&p=13&l=st1&mode=books-jp&search=%E3%83%9E%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%B3&=1&fc1=&lt1=&lc1=&bg1=&f=ifr" marginwidth="0" marginheight="0" width="268" height="60" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>';
	html += '</div>';
	return html;
}




/**
 * 検索結果クラス
 **/
function SearchResults(id,name,options) {
	this.id = id;
	this.name = name;
	this.options = options;
	this.markerIcon = options["markerIcon"];
	this.markerClass = options["markerClass"];
	this.markerSubClass = options["markerSubClass"];
	this.listClass1 = options["listClass1"];
	this.listClass2 = options["listClass2"];
	this.markerFooter = options["markerFooter"];
	this.results = $H();
}

/**
 * 結果を追加
 **/
SearchResults.prototype.addResult = function( id , lat , lon , markerHtml , listHtml ) {
	var key = "ll" +  lat.toString() + "," + lon.toString();
	var result = {
		"id" : id,
		"lat":lat,
		"lon":lon,
		"markerHtml":markerHtml,
		"listHtml":listHtml
	}
	if( !this.results[key] ) {
		this.results[key] = [];
		this.results[key].push(result);
	}
}



/**
 * 結果を地図とリストへ表示
 **/
SearchResults.prototype.display = function( map , list ) {
	
	list.innerHTML = "";
	var markerClass = this.markerClass;
	var markerSubClass = this.markerSubClass;
	var listClass1 = this.listClass1;
	var listClass2 = this.listClass2;
	var listCount = 0;
	var me = this;
	this.results.each( 
		function( value , index , data ) {
			var marker = createMarker( value[1] );
			appendListDiv( list , value[1] , marker );
			map.addOverlay( marker );
		} 
	);	
	

	function createMarker( items ) {
	
		var point = new GLatLng(items[0].lat, items[0].lon);
		
		if( me.markerIcon ) {
		    var icon = new GIcon();
		    icon.image = me.markerIcon; // "./img/restaurant.png";
		    icon.shadow = me.markerIcon; // "./img/restaurant.png";
		    icon.iconSize = new GSize(30, 30);
		    icon.shadowSize = new GSize(30, 30);
		    icon.iconAnchor = new GPoint(6, 20);
		    icon.infoWindowAnchor = new GPoint(15,15);

		    var marker = new GMarker(point,icon);
		} else {
		    var marker = new GMarker(point);
		}
		var markerId = me.id + "_marker";
		var markerHtml = "<div id='" + markerId + "' class='" + markerClass + "' " +
			" style=' padding:2px;margin:2px; ' >";
		for( var i = 0 ; i < items.length ; i++ ) {
			markerHtml += "<div id='" +  items[i].id + "' class='" + markerSubClass +"' style='border-bottom:1px solid;' >";
			markerHtml += items[i].markerHtml;
			markerHtml += "</div>";
		}
		markerHtml += "</div>";
		if( me.markerFooter ) {
			markerHtml += me.markerFooter;
		}
		
		GEvent.addListener(marker, "click", function() {
		    marker.openInfoWindowHtml( markerHtml );
			//$(markerId).style.overflow = "auto";
		    if( marker.scrollId ) {
		    	//location.href = "#" + marker.scrollId;
				//SmoothScroll.scrollTo( marker.scrollId , markerId );
		    	//marker.scrollId = "";
		    }
		});
		return marker;
	};
	

	function appendListDiv( root, items , marker ) {
		
		for( var i = 0 ; i < items.length ; i++ ) {
			
			var html = "";
			html += "<div id='#" + items[i].id + "'></div>";
			html += items[i].listHtml;
			if( listCount % 2 == 0 ) {
				var div = createDiv(html, listClass1);
			} else {
				var div = createDiv(html, listClass2)
			}
			div.scrollId = items[i].id;
			div.onclick = function() {
				if( this.scrollId ) {
					marker.scrollId = this.scrollId;
				}
				GEvent.trigger( marker , "click");
			}
			root.appendChild(div);
			listCount++;
		}
	};
	
	/** 
	 * divタグ生成
	 **/
	function createDiv(opt_text, opt_className) {
	  var el = document.createElement("div");
	  if (opt_text) {
	    el.innerHTML = opt_text;
	  }
	  if (opt_className) { el.className = opt_className; }
	  return el;
	};

}


/**
 * divタグ内の スムーススクロールクラス
 **/
var SmoothScroll = {};
SmoothScroll = {
	targetScrollTop : 0,	// we're gonna make the $(parentid).scrollTop -> targetScrollTop
	dist : 0,
	timer : 0,
	count : 0,
	parentid : 0,
	lastDist : 0,
	//speedStore : [],		// for debug
	options : {},
	defaultOptions : {
		time : 1*1000,	// [ms]
		unit : 50			// [ms]
	},
	scrollTo : function( element, parent_e, options ){
		this.options.time = this.defaultOptions.time;
		this.options.unit = this.defaultOptions.unit;
		if( options ){
			this.options.time = ( options.time ) ? options.time : this.options.time;
			this.options.unit = ( options.unit ) ? options.unit : this.options.unit;
		}
		clearInterval( this.timer );
		this.parentid = parent_e;

		this.scrollTopMax = $(parent_e).scrollHeight - $(parent_e).offsetHeight + parseInt($(parent_e).style.borderTopWidth) + parseInt($(parent_e).style.borderBottomWidth);

		if( navigator.userAgent.match( "MSIE" ) ){
			this.targetScrollTop = ( element ) ? $(element).offsetTop : 0;
		}else{
			var targetOffsetTop = ( element ) ? $(element).offsetTop : $(parent_e).offsetTop;
			this.targetScrollTop = targetOffsetTop - $(parent_e).offsetTop;
		}
		this.targetScrollTop = ( this.targetScrollTop > this.scrollTopMax ) ? this.scrollTopMax : this.targetScrollTop;

		this.dist = this.targetScrollTop - $(parent_e).scrollTop;
		this.lastDist = 0;
		this.timer = setInterval('SmoothScroll.update()', this.options.unit );
		this.count = 0;
		//this.speedStore = [];
		this.update();
	},
	update : function(){
		var dist = this.targetScrollTop - $(this.parentid).scrollTop;
		var speed = 2 * dist * this.options.unit / ( this.options.time - this.options.unit * this.count );
		//this.speedStore.push( speed );
		speed = ( speed > 0 ) ? Math.ceil( speed ) : Math.floor( speed );
		if( Math.abs(dist) <= Math.abs(speed) ){
			// got there
			clearInterval( this.timer );
			$(this.parentid).scrollTop = this.targetScrollTop;
			return;
		}else if( this.lastDist == dist ){
			// stuck
			clearInterval( this.timer );
			$(this.parentid).scrollTop = this.targetScrollTop;
			return;
		}
		var scrollTop = $(this.parentid).scrollTop + speed;
		$(this.parentid).scrollTop = scrollTop;
		this.lastDist = dist;
		this.count++;
		if( this.count == this.options.time / this.options.unit ){
			// timeout
			clearInterval( this.timer );
			$(this.parentid).scrollTop = this.targetScrollTop;
		}
	},
	$ : function(id) {
		return document.getElementById(id);
	}
}

</script>

]]></Content>
</Module>
