const width = 960;
const height = 490;

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

const worldProjection = d3.geoEquirectangular();
const dAttributeFunction = d3.geoPath()
	.projection(worldProjection);

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

const dragBehavior = d3.drag() //set up the behavior
	.on('start', (event) => { //create the start handler
		d3.select('table tr:nth-child(2) td:first-child') //select the top left cell of the table. The table header is tr:nth-child(1)
			//use worldProject to convert the x/y pixel coordinates of the mouse click into lat/lng map coordinates
			//this takes as params [x,y] and returns [lat,lng]
			//insert the first element of the map coords array (lat) into the html of the table cell
			.html(worldProjection.invert([event.x, event.y])[0]) 
		d3.select('table tr:nth-child(2) td:last-child') //select the top right cell of the table
			//insert the second element of the map coords array (lng) into the html of the table cell
			.html(worldProjection.invert([event.x, event.y])[1])

		d3.selectAll('rect').remove(); //remove any previously drawn rectangles
		d3.select('svg').append('rect') //draw a rectangle of 0 height/width at the point where the drag started
			.attr('x', event.x)
			.attr('y', event.y);
	})
	.on('drag', (event) => { //create the drag handler
		d3.select('table tr:nth-child(3) td:first-child') //select the bottom left cell of the table
			//insert the first element of the map coords array (lat) into the html of the table cell
			.html(worldProjection.invert([event.x, event.y])[0])
		d3.select('table tr:nth-child(3) td:last-child') //select the bottom right cell of the table
			//insert the second element of the map coords array (lng) into the html of the table cell
			.html(worldProjection.invert([event.x, event.y])[1])

		//computer width of the box based on current x value and current rect's x value
		d3.select('rect').attr('width', event.x-d3.select('rect').attr('x'))
		//computer height of the box based on current y value and current rect's y value
		d3.select('rect').attr('height', event.y-d3.select('rect').attr('y'))
	})

d3.select('svg').call(dragBehavior); //atach dragBehavior to the svg

d3.select('form').on('submit', (event) => { //set up a submit handler on the form
	event.preventDefault(); // stop the form from submitting

	d3.selectAll('rect').remove(); //remove any previously drawn rectangles

	const lat1 = d3.select('input:first-child').property('value'); //get first latitude input
	const lng1 = d3.select('input:nth-child(2)').property('value'); //get first longitude input
	const location1 = worldProjection([lat1, lng1]); //convert these into pixel coordinates
	const x1 = location1[0]; //reassign for ease of reading
	const y1 = location1[1];

	const lat2 = d3.select('input:nth-child(4)').property('value'); //get second latitude input (the <br/> is :nth-child(3)
	const lng2 = d3.select('input:nth-child(5)').property('value'); //get second longitude input
	const location2 = worldProjection([lat2, lng2]); //convert these into pixel coordinates
	const x2 = location2[0]; //reassign for eas of reading
	const y2 = location2[1];

	d3.select('svg').append('rect') // append a rectangle to the svg
		.attr('fill', '#000') //make it black
		.attr('x', x1) //assign top left x location
		.attr('y', y1) //assign top left y location
		.attr('width', x2-x1) //compute width from bottom right x coordinate
		.attr('height', y2-y1) //compute height from bottom right y coordinate
});