var width = 960;
var height = 490;

d3.select('svg')
    .attr('width', width)
    .attr('height', height);

var worldProjection = d3.geoEquirectangular();

d3.select('svg').selectAll('path')
    .data(map_json.features)
	.enter()
    .append('path')
    .attr('fill', '#099');

var dAttributeFunction = d3.geoPath()
    .projection(worldProjection);

d3.selectAll('path').attr('d', dAttributeFunction);

var dragBehavior = d3.drag() //create a drag behavior
	.on('start', function(event){
		d3.select('table tr:nth-child(2) td:first-child')
			.html(worldProjection.invert([event.x, event.y])[0])
		d3.select('table tr:nth-child(2) td:last-child')
			.html(worldProjection.invert([event.x, event.y])[1])

		d3.selectAll('rect').remove();
		d3.select('svg').append('rect')
			.attr('x', event.x)
			.attr('y', event.y);
	})
	.on('drag', function(event){
		d3.select('table tr:nth-child(3) td:first-child')
			.html(worldProjection.invert([event.x, event.y])[0])
		d3.select('table tr:nth-child(3) td:last-child')
			.html(worldProjection.invert([event.x, event.y])[1])

		d3.select('rect').attr('width', event.x-d3.select('rect').attr('x'))
		d3.select('rect').attr('height', event.y-d3.select('rect').attr('y'))
	})

d3.select('svg').call(dragBehavior);

d3.select('form').on('submit', function(event){
	event.preventDefault();

	d3.selectAll('rect').remove();

	const lat1 = d3.select('input:first-child').node().value
	const lng1 = d3.select('input:nth-child(2)').node().value
	const location1 = worldProjection([lat1, lng1]);
	const x1 = location1[0];
	const y1 = location1[1];
	console.log(x1, y1);

	const lat2 = d3.select('input:nth-child(4)').node().value
	const lng2 = d3.select('input:nth-child(5)').node().value
	const location2 = worldProjection([lat2, lng2]);
	const x2 = location2[0];
	const y2 = location2[1];
	console.log(x2, y2);

	d3.select('svg').append('rect')
		.attr('fill', '#000')
		.attr('x', x1)
		.attr('y', y1)
		.attr('width', x2-x1)
		.attr('height', y2-y1) 
});