$(document).ready( function() {
  
	var width =  Math.max(400, window.innerWidth),
		height = width * 1.0625,
		variableonecolormin = '#DADAEB',
		variableonecolormax = '#9E9AC8';	
		
	var projection = d3.geo.conicConformal()
		.parallels([40 + 00 / 60, 41 + 40 / 60])
		.rotate([122 + 00 / 60, -39 - 20 / 60])
		.scale(width * 5)
		.translate([width / 4.5, height / 3.5]);
		
	var path = d3.geo.path()
		.projection(projection);
		
	var svg = d3.select("#map")
		.append("svg")
		.attr("width", width)
		.attr("height", height);
		
	d3.json("caproperties.json", function(error, ca) {
		var counties = topojson.feature(ca, ca.objects.county);
		
		var variable1min,
			variable1max,
			countypaths;
			
		var color = d3.scale.linear()
			.domain([
				variable1min = d3.min(counties.features, function(d) { return d.properties.obesity;}), 
				variable1max = d3.max(counties.features, function(d) { return d.properties.obesity;})
				])
			.range([variableonecolormin, variableonecolormax]);
			
		
		$('#variable1').on("click", function() {
		
			switch ($('#variable1').val())
			{
				case "obesity":
				variable1min = d3.min(counties.features, function(d) { return d.properties.obesity;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.obesity;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.obesity); });
				break
				
				case "unemployed":
				variable1min = d3.min(counties.features, function(d) { return d.properties.unemployed;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.unemployed;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.unemployed); });
				break
				
				case "poverty":
				variable1min = d3.min(counties.features, function(d) { return d.properties.poverty;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.poverty;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.poverty); });
				break
				
				case "democratic":
				variable1min = d3.min(counties.features, function(d) { return d.properties.democratic;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.democratic;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.democratic); });
				break
				
				case "republican":
				variable1min = d3.min(counties.features, function(d) { return d.properties.republican;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.republican;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.republican); });
				break
				
				case "other":
				variable1min = d3.min(counties.features, function(d) { return d.properties.other;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.other;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.other); });
				break
				
				case "registered":
				variable1min = d3.min(counties.features, function(d) { return d.properties.registered;});
				variable1max = d3.max(counties.features, function(d) { return d.properties.registered;});
				color.domain([
					variable1min, 
					variable1max
					]);
				countypaths.style("fill", function(d) { return color(d.properties.registered); });
				break
			}
			
		});
				
		//counties
		countypaths = svg.append("g")
			.attr("class", "county")
			.selectAll("path")
			.data(counties.features)
			.enter()
			.append("path")
			.attr("d", path)
			.style("fill", function(d) {
				return color(d.properties.obesity);
			});
		
		//county borders
		svg.append("path")
			.datum(topojson.mesh(ca, ca.objects.county, function(a, b) {
			return a !== b;
			}))
			.attr("class", "county-border")
			.attr("d", path);
	
		//state borders
		svg.append("path")
			.datum(topojson.mesh(ca, ca.objects.county, function(a, b) {
			return a === b;
			}))
			.attr("class", "state-border")
			.attr("d", path);
		
	}); // end d3.json
	
	
	
})