var width = $(window).width()* .97;
var height = width/2.2;

var color = d3.scale.quantize()
    .range(["rgb(99,99,99)","rgb(189,189,189)"])
	
//Define map projection 
var projection = d3.geo.mercator();
    projection.center([-0.10,51.5171]).scale(38000).translate([width / 2, height / 2.3]);

//Define path generator
var path = d3.geo.path().projection(projection);

d3.csv("boroughPrices.csv", function(data) {
   color.domain([
        d3.min(data, function(d) { return d.twentytwelve; }),
        d3.max(data, function(d) { return d.twentytwelve; })
   ]);
 
 d3.json("londonBoroughs.json", function(json) {

	var svg = d3.select("article").append("svg")
 		.attr({
 			"width":width,
 			"height":height
 			})
 			   	
   		 //loop through the CSV with the average
		for (var i = 0; i < data.length; i ++){
			
			//get the borough name
			var boroughName = data[i].borough;			
			
			//get the average rental price for the borough 	
			var avgRent = data[i].twentytwelve;
		
			
			for(var j = 0; j < json.features.length; j++){
				if (json.features[j].properties.Name == boroughName){
				
					//make an entry into the JSON with the rental value associated with the region 
					json.features[j].properties.value = avgRent;
	
					//stop
					break;
				}	
			}
		}
		//draw map
		var map = svg.selectAll("path")
			.data(json.features)
			.enter()
			.append("path")
			.attr("d", path)
			.style("fill", function(d) {
                  return color(d.properties.value);                                                 
        		})
		
				.on("mouseover",function(d,i){	
					var coordinates = d3.mouse(this);
	
					d3.select(this).classed("highlight",true)
					d3.select("#tooltip")
						.style({
							"left": coordinates[0] - 100 + "px",
							"top": coordinates[1] + "px"
						})
						.classed("hidden",false)
						.select("#averageRent")
						.append("text")
						.classed("hidden",false)
						.text(function(){
								return d.properties.Name + ", £" + d.properties.value;
							})
					  })
					.on("mouseout", function(d,i){
					    d3.select(this).classed("highlight",false)	
					    d3.select("#tooltip").classed("hidden",true)	
					    d3.select("#averageRent text").remove();
					})				         
	  		
	  		
	  		d3.select("#yearSelect").on("change", function() {	
				//get the year chosen by the user
				var year = this.value;

				for (var i = 0; i < data.length; i ++){
				
					var boroughName = data[i].borough;			
					var avgRent = data[i][year];
					for(var j = 0; j < json.features.length; j++){
						if (json.features[j].properties.Name == boroughName){
							json.features[j].properties.value = avgRent;
								break;
							}									
					}
				}
			  /* update the colours of the choropleth*/
			 	color.domain([
      				d3.min(data, function(d) { return d[year]; }),
       				d3.max(data, function(d) { return d[year]; })
   				]);
				svg.selectAll("path").style("fill", function(d){
   						 return color(d.properties.value);    
   				});
				
			});					  		
	})
	  
});