var resultList = {
	id:'geojsonList',
	view:"list",
	select:true,
	template:'#name#',
	data:[]
}


webix.ui({
	rows:[
		{template:'<h1>箱根駅伝 2016 出身校マップ</h1>', height:40, css:'header'},

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


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

var dataName = "http://suga-app.azurewebsites.net/api/Universities";
d3.json(dataName, function(teams){
	if (!teams)return;
  teams.forEach(function(item){
		$$('geojsonList').add(item);
	});
});


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

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

	d3.json("http://suga-app.azurewebsites.net/api/EntryRunners/2016/" + universe.id, function(geodata){
		geojsonLayer.addData(geodata);
		map.fitBounds(geojsonLayer.getBounds())
	});
});