var makeChart = function(priceData){
	var dataset = [
		{year: '2010', price: priceData['2010']/10000},
		{year: '2011', price: priceData['2011']/10000},
		{year: '2012', price: priceData['2012']/10000},
		{year: '2013', price: priceData['2013']/10000},
		{year: '2014', price: priceData['2014']/10000},
		{year: '2015', price: priceData['2015']/10000},
		{year: '2016', price: priceData['2016']/10000},
		{year: '2017', price: priceData['2017']/10000},
		{year: '2018', price: priceData['2018']/10000},
		{year: '2019', price: priceData['2019']/10000}
	];
	var margin = {top: 20, right: 20, bottom: 70, left: 30};
	var width = $('.modal-body').width() - margin.left - margin.right;
	var height = 300 - margin.top - margin.bottom;
	var x = d3.scaleBand().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);
	x.domain(dataset.map(function(d) { return d.year; }));
	y.domain([Math.max(d3.min(dataset, function(d) { return d.price; }) - 10, 0), d3.max(dataset, function(d) { return d.price; })]);
	var svg = d3.select('.chart-area').append('svg')
				.attr('width', width + margin.left + margin.right)
				.attr('height', height + margin.top + margin.bottom)
				.append('g')
				.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
	var barGrp = svg.selectAll()
					.data(dataset)
					.enter()
					.append('g');

	barGrp  .append('rect')
			.attr('class', 'chart_bar')
			.attr('x', function(d) { return x(d.year) + 10; })
			.attr('width', x.bandwidth() - 20)
			.attr('y', function(d) { return y(d.price); })
			.attr('height', function(d) { return height - y(d.price); });

	barGrp  .append('text')
			.attr('class', 'chart_bar_txt')
			.attr('x', function(d){ return x(d.year) + x.bandwidth() / 2; })
			.attr('y', function(d){ return y(d.price) - 5; })
			.attr('text-anchor', 'middle')
			.text(function(d){return d.price ? d.price+'万' : ''});

	svg .append('g')
		.attr('transform', 'translate(0,' + height + ')')
		.call(d3.axisBottom(x));

	svg .append("g")
		.call(d3.axisLeft(y));

	svg.append('text')
		.attr('x', -(height / 2) - margin.top)
		.attr('y', margin.left)
		.attr('text-anchor', 'middle')
		.text('価格 (万円)');
};

icon: L.icon({
	iconUrl: "",
	iconRetinaUrl: "",
	shadowUrl: "",
	iconSize: [24,36],
	iconAnchor: [12,36]'
})

var fs        = require('fs');
var geobuf    = require('geobuf');
var Pbf       = require('pbf');


var txt = fs.readFileSync('./data/A16-15_00_DID.geojson', 'utf8');
var geojson = JSON.parse(txt);

var pbf = geobuf.encode(geojson, new Pbf());

var buff = Buffer.allocUnsafe ? Buffer.from(pbf) : new Buffer(pbf);

fs.writeFileSync('./data/did.pbf', buff);

//データ取得と展開
var loadGeobuf = function(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = "arraybuffer";
	xhr.onload = function(oEvent) {
		var pbf = new Pbf(new Uint8Array(xhr.response));
		var geo = geobuf.decode(pbf);
		callback(geo);
	};
	xhr.send();
};

//描画の部分
loadGeobuf('data/did.pbf', function(geojson){
	L.geoJSON(geojson, {
		smoothFactor: 1.2,
		noClip: true,
		weight: 1
	}).bindPopup(function (layer) {
		var props = layer.feature.properties;
		var html  = [
		'<table>',
			'<tr><td>人口: </td><td>' + props['人口'] + '</td></tr>',
			'<tr><td>人口割合: </td><td>' + props['人口割合'] + '</td></tr>',
			'<tr><td>面積: </td><td>' + props['面積'] + '</td></tr>',
			'<tr><td>面積割合: </td><td>' + props['面積割合'] + '</td></tr>',
			'<tr><td>市町村名称: </td><td>' + props['市町村名称'] + '</td></tr>',
			'<tr><td>調査年度: </td><td>' + props['調査年度'] + '</td></tr>',
		'</table>'
		];
		return html.join('\n');
	}).addTo(map);
});

var ElevitionJP = L.Control.extend({
	options: {
		position: 'bottomright'
	},
	demApiURL: '//cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php',
	onAdd: function(map){
		this._container = L.DomUtil.create('div', 'l_elevitionjp');
		L.DomEvent.disableClickPropagation(this._container);
		map.on('mousemove', this._onMouseMove, this);

		var me = this;
		me._lazyDem = _.debounce(function(){
			var requestData = {
				lat: me.currentLatLng.lat,
				lon: me.currentLatLng.lng,
				outtype: 'JSON'
			};
			$.ajax({
				url: me.demApiURL,
				dataType: 'json',
				data: requestData,
				beforeSend: function(jqXHR, settings){
					jqXHR.requestData = requestData;
				}
			}).done(function(data, textStatus, jqXHR) {
				if(jqXHR.requestData.lat == me.currentLatLng.lat && jqXHR.requestData.lon == me.currentLatLng.lng) {
					me.currentDem = data;
					me.resetHtml();
				}
			});
		}, 300);

		me.currentLatLng = {lon: null, lng: null};

		return me._container;
	},

	onRemove: function(map){
		var me = this;
		map.off('mousemove', me._onMouseMove, me);
	},

	_onMouseMove: function(e){
		var me = this;
		me.currentLatLng = e.latlng.clone();
		me.currentDem = {elevation: '-----', hsrc: '-----'};
		me._lazyDem();
		me.resetHtml();
	},

	resetHtml: function(){
		var me = this;
		var zoom = me.currentZoom;
		var lat = me.currentLatLng.lat;
		var lng = me.currentLatLng.lng;
		var html = _.template([
			'<table>', 
			'	<tr><td colspan="2" style="text-align: left;"><%=elevation=="-----" ? "標高: -----" : "標高: " + Math.round(elevation*3.28084) + " ft　" + elevation + " m" %></td></tr>', 
			'	<tr><td><%=lat10%></td><td><%=lng10%></td></tr>', 
			'	<tr><td><%=lat60%></td><td><%=lng60%></td></tr>', 
			'</table>'
		].join('\n'))(_.extend({
			lat10: lat ? me.convertLat2NS(lat, 5) : '',
			lng10: lng ? me.convertLng2EW(lng, 5) : '',
			lat60: lat ? me.convertLat2DMS(lat)   : '',
			lng60: lng ? me.convertLng2DMS(lng)   : '',
			zoom: zoom,
			elevation: '-----',
			hsrc: '-----'
		}, me.currentDem));
		me._container.innerHTML = html;
	},
	//...
});

var map = L.map('map', {
	zoomAnimation: false,
	zoomControl: false,
	inertia: false,
	maxZoom: 18, 
	minZoom: 6,
	maxBounds: [[80, 0], [-80, 360]],
	maxBoundsViscosity: 1,
	worldCopyJump: false,
	preferCanvas: false,
	zoomSnap: 1,
	zoomDelta: 1,
	wheelPxPerZoomLevel: 240,
	padding: 0,
	doubleClickZoom: false,
	renderer: L.canvas()
}).setView(new L.LatLng(35.681236, 139.767125), 12);


L.control.polylineMeasure({
	showMeasurementsClearControl: false,
	showUnitControl: true,
	showBearings: false
}).addTo(map);

new MousePositionControl().addTo(map);

var tile = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {
	attribution: "<a href='https://developers.google.com/maps/documentation' target='_blank'>Google Map</a> | <a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
map.addLayer(tile);



$('.ctl-tile-url').on('click', function(e){
	e.preventDefault();
	var tile_url = $(e.target).data('url');
	tile.setUrl(tile_url);
});