var resultList = {
	id:'geojsonList',
	view:"list",
	select:true,
//		template:'<a target="_blank" href="#link#">#name#</a>:',
	template:'#name#',
	data:[]
}

var search_input = {id:'search_input', view:'text', placeholder:'e.g. japan or usa or london or polygon'};
var search_btn = { id:'search_btn', view:'button', width:120,label:'search'}
//var resultClear_btn = {id:'resultClear_btn', view:'button',height:30, label:'Result Clear'}

webix.ui({
	rows:[
		{template:'<h1>箱根駅伝 2016 出身校マップ</h1>', height:40, css:'header'},
/*
		{view:"form", elements:[
			{cols:[
				search_input,
				search_btn
				]
			}
			]

		},
*/
		{
			cols:[
				{width:250,
					rows:[
					resultList,
//					resultClear_btn
				]},
				{view:'resizer'},
				{template:'<div id="map"></div>'}
			]
		}
	]
});


/****************************************************
 * init
 ***************************************************/	

var dataName = "http://www.sugasaki.com/d3/hakone2016/teamList.php";
d3.json(dataName, function(teams){
	teams.forEach(function(item){
		$$('geojsonList').add(item);
	});
});


/****************************************************
 * Event
 ***************************************************/	

$$('geojsonList').attachEvent('onAfterSelect', function(id){
	var item = this.getItem(id);
	geojsonLayer.clearLayers();

	d3.json("http://www.sugasaki.com/d3/hakone2016/" + item.link, function(geodata){
		geojsonLayer.addData(geodata);
		map.fitBounds(geojsonLayer.getBounds())
	});
});