console.clear()

//Alerts for browser compatibility
if (navigator.vendor ==  "Apple Computer, Inc." && !/Mobi|Android/i.test(navigator.userAgent)) {
	alert("This visualization doesn't work very well in Safari. Try using Chrome if you can!");
}

if (/Mobi|Android/i.test(navigator.userAgent)) {
    alert("This visualization doesn't work very well on mobile. Try using Chrome on Desktop if you can!")
}

var w = 1000;
var h = 650;

console.log("d3 executed!")

//Create variable for updating dataset
var newData;

var svg = d3.select("body .viz-row")
            .append("svg")
              .attr("width", w)
              .attr("height", h);

// set color scale for each tile
var color = d3.scaleLinear()
.range(["brown", "steelblue"]);

// add the tooltip
var tooltip = d3.select("body .viz-row").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

var csvData, dataValue, dataState

// load the dataset specified in the dropdown
function displayData() {

	// load the csv file with all the data
	d3.csv("SFData.csv", function(data) {
		//Set domain for color scale
		
    csvData = data
		
		//Load in GeoJSON data with all the json
		d3.json("bs.json", function(json) {
			// make a copy of the json object for fixing the map projection
			var jsonClone = JSON.parse(JSON.stringify(json));
			json = topojson.feature(json, json.objects.SFgeojson).features
			jsonClone = topojson.feature(jsonClone, jsonClone.objects.SFgeojson)

			// initialize dataState and dataValues for connecting the csv to json       
			for (var i = 0; i < data.length; i++) {
				dataState = data[i].nhood;

				// add the data value to the appropriate record in json        	
				for (var j = 0; j < json.length; j++) {
					var jsonState = json[j].properties.nhood;

					if (dataState == jsonState) {
						json[j].properties.population = data[i].population
            json[j].properties.popdensity = data[i].popdensity
            json[j].properties.encampments =  data[i].encampments
            json[j].properties.encampmentsacre = data[i].encampmentsacre
						// console.log(json[j].properties.value)
						break;
					}
				}

			}

			//Bind data and create one path per GeoJSON feature
			var projection = d3.geoIdentity()
											.reflectY(true)
											.fitSize([w,h],jsonClone)

			var pathFlipped = d3.geoPath()
			.projection(projection);
			
      // illustrate each neighborhood 
			mapPath = svg.selectAll("path")
			.data(json).enter()
			.append("path")
			.attr("d", pathFlipped);

			// add the transition for filling the nhood colors        
			mapPath.style("fill", "#ccc")
      	.style("stroke", "FFF")

			/*mapPath.on("mouseover", function(d) {

				//Inject data value into paragraph

				//Remove old text
				d3.select(".blurb-row .dropdown #value-label")
				.remove()

				//Display new text
				var paragraph = d3.select(".blurb-row .dropdown")
				.append("p")
				.text(function() {
					return (d.properties.value);
				})
				.attr("id", "value-label")
				.classed("supreme", true)
				.style("font-size", "1em")
				.style("display", "inline")
				.style("margin-left", "30px");

				//Highlight current state
				d3.select(this)
				.transition()
				.duration(300)
				.style("opacity", .6);

			})
			.on("mouseout", function(d) {

				//Remove old text
				d3.select(".dropdown #value-label")
				.remove()

				//Return state to original opacity
				d3.select(this)
				.transition()
				.duration(350)
				.style("opacity", 1);

			});*/

		});

	});

};

//Display text function
function displayInformation(dataset) {

	//Load in dataset:description json file
	d3.json("descriptions.json", function(json) {
		var description = json[dataset];

		//Remove old text
		d3.select("#dataset-description")
		.remove()

		//Display new text
		var paragraph = d3.select("body .blurb-row")
		.append("p")
		.html(description)
		.attr("id", "dataset-description")
		.style("font-size", "1em")
		.style("font-family", "Futura, sans-serif")
		.style("font-style", "italic");

	});

}


//Load initial data and description
displayData("default");
//displayInformation("default");

// handle on click event
d3.select('#opts')
  .on('change', function() {
  
    newData = d3.select(this).property('value');
    //displayInformation(newData);
    updateData(newData);
});

function updateData(dataset) {
  
  color.domain([
			d3.min(csvData, function(d) { return parseFloat(d[dataset]); }),
			d3.max(csvData, function(d) { return parseFloat(d[dataset]); })
		]);
  
  console.log( color.domain())
  
  svg.selectAll('path')
  	.style("fill", function(d) {
    	//console.log(d)
    	return color(d.properties[dataset])
  	})
  	
  
  
}