var start = "https://api.census.gov/data/2014/pep/natstprc/?get=STNAME,";
var middle = "&DATE_=7&for=state:";
var end = "&key=243fdd0de92dc9c930bcc4abc772149b04a23d09";
var dataset_long = "";

//Get the information about the states from the Census API
function loadDoc(dataset,state) {

	//Rest the project div
	reset();

	//Select the dataset we're pulling data from
	switch(dataset){
		case "POP": dataset_long = "United States Population by State"; break;
		case "DEATHS": dataset_long = "United States Deaths by State"; break;
		case "NIM": dataset_long = "United States Net International Migration by State"; break;
		case "BIRTHS": dataset_long = "United States Births by State"; break;
	}
	
	//Create the GET request URL from our variables and endpoints
	let test = start + dataset + middle + state + end;

	//Instantiate http request object
	let xhttp = new XMLHttpRequest();
	let HTTP_CONTENT = {};
	let data = [];
	
	//Wait for a response
	xhttp.onreadystatechange = function() {

		if ( this.readyState == 4 && this.status == 200 ) {

			//Parse response as a JSON object
			HTTP_CONTENT = JSON.parse( this.responseText );

			//Process the response into a list of JSON objects
			HTTP_CONTENT.slice( 1 ).forEach( function( _ ) {  

				//Get rid of PR because it has negative values and is not a state.
				if ( _[0] !== "Puerto Rico Commonwealth"){ 
					let name = _[ 0 ];
					let num = _[ 1 ];

					//NIM needs to be an integer, not a string repr of an integer
					let pair = { state: name, nim: parseInt(num) };
					data.push( pair );
				}
			});

			//Use the data to create a bar chart
			create_bars(data);
		}
	};
	
	//Send a get request
	xhttp.open( "GET", test, true );
	xhttp.send();
	
}

function reset() {
	document.getElementById("project_body").innerHTML = " ";
	document.getElementById("hidden_header").innerHTML = " ";
}

function create_bars(data) {

	//Show the title
	let h1 = document.getElementById("hidden_header");
	h1.innerHTML = dataset_long;
	h1.style.display = "block";
	

	//Define bounds
	var margin = {
		top:10,
		right:10, 
		bottom:90, 
		left:90
	};

	//Define SVG dimensions
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	//Define scales
	var xScale = d3.scaleBand()
		.rangeRound( [ 0, width ] )
		.padding( .06 );

	//TODO USE A LOGARITHMIC SCALE ... somehow...
	var yScale = d3.scaleLinear()
		.range( [height, 0] );

	//Define axes
	var xAxis = d3.axisBottom(xScale);
	var yAxis = d3.axisLeft(yScale);

	//Create the svg area
	//Select the are where the bar chart will appear
	//Create an SVG element to hide everything information
	//Define the SVG attributes
	//Create a group for all of the bars within the SVG
	//Give the G element attributes
	var svgContainer = d3.select("#project_body")
		.append("svg")
		.attr("width", width+margin.left + margin.right)
		.attr("height",height+margin.top + margin.bottom)
		.append("g")
		.attr("class", "container")
		.attr("transform", "translate("+ margin.left +","+ margin.top +")");

	//Domain and ranges of the x and y axis
	xScale.domain(
		data.map(function(d) { 
			return d.state; 
		})
	);
	yScale.domain([	0, 
		d3.max(data, function(d) { return d.nim; })
	]);

	//Create another g tag to keep the axis and the text
	var xAxis_g = svgContainer.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + (height) + ")")
		.call(xAxis)
		.selectAll("text")
		.attr("class", "rotated")
		.attr("y", -4)
		.attr("x", 10)
		.style("text-anchor", "start");

	//Create another g tag for the y axis
	var yAxis_g = svgContainer.append("g")
		.attr("class", "y axis")
		.call(yAxis)
		.append("text")
		.attr( "transform", "rotate(90deg)" )
		.attr("y", 6) //orig - 6
		.attr("dy", ".71em");

	svgContainer.selectAll(".bar")
		.data(data)
		.enter()
		.append("rect")
		.attr("class", "bar")
		.attr("x", function(d) { return xScale(d.state); })
		.attr("width", 10)
		.attr("transform", "translate(3,0)")
		.attr("y", function(d) { return yScale(d.nim); })
		.attr("height", function(d) { return height - yScale(d.nim); })
		.append("div")
		.attr("class", "tooltip")
		.append("span")
		.attr("class", "tooltiptext")
		.text(function(d) {return d.nim;});
}