var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 900 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var xScale = d3.scaleOrdinal()
	.range([0, width]);

var yScale = d3.scaleLinear()
	.range([height,0]);

var colScale = d3.scaleOrdinal(d3.schemeCategory20);
  
var BAR_HEIGHT = 4;

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxis = svg.append("g")
	.attr("class", "axis x--axis");
var yAxis = svg.append("g")
	.attr("class", "axis y--axis");  
  
 
function filter(myData, attr, value) {
	myData = myData.filter(function (d) {
  	return d[attr] = value;
  });
}
  
function update(myData, attrX, attrY) {

	var fnAccX = function(d) { return d[attrX]; };
  var fnAccY = function(d) { return d[attrY]; };

	xScale.domain(myData.map(fnAccX));
  yScale.domain([0, d3.max(myData, fnAccY) ]);
  
	var bars = svg.selectAll(".bars")
  	.data(myData);
  
  //Enter
  var barsEnter = bars.enter()
  	.append("rect")
    .attr("class", "bars")
    .attr("width", 0);
  
  //Exit
 	bars.exit()
  	.transition()
    .duration(1000)
    .attr("width", 0)
  	.remove();
  
  //Update
  bars.merge(barsEnter)
  	.attr("x", function(d,i) {return i * (BAR_HEIGHT+1);})
    .attr("y", height)
    .style("fill", function(d,i) { return colScale(i); })
    .attr("width", 2)
  	.transition().duration(1000)
  	.attr("y", function(d) {return (yScale(fnAccY(d))); })
    .attr("height", function(d) {return (height - yScale(fnAccY(d))); });
  	
  xAxis
  	.transition()
    .duration(1000)
  	.call(d3.axisBottom()
  		.scale(xScale)
      .tickArguments(function(d) {return xScale(fnAccX(d));}));
    
  yAxis
  	.transition()
    .duration(1000)
  	.call(d3.axisLeft()
  		.scale(yScale)
    	.ticks(10));
    
}

function selectedCountry(myData, attrX) {
  
  var fnAccX = function(d) { return d[attrX]; };
    
  orderedData = myData.sort(function (a, b) {
  	return d3.ascending(fnAccX(a), fnAccX(b));
  });
  
  var select  = d3.select("#combobox").append("select").on("change", change), 				options = select.selectAll('option').data(orderedData);
	
  options.enter().append("option").text(function(d) { return fnAccX(d);});
     
  function change() {
		var si = select.property('selectedIndex');
    console.log(myData[si]);
  	update(myData[si], "Country","EPI Score");
	}
}

var myGeoJSONPath = "world.json";
	$.getJSON(myGeoJSONPath,function(data){
		var map = L.map('map').setView([39, -1], 1.6);
		L.geoJson(data, {
			clickable: true,
			style: {
        stroke: false,
				fill: true,
				fillColor: '#FFF',
				fillOpacity: 1
      }
		}).addTo(map);
	});

d3.csv("epi2014.csv", function(err, data) {
  if(err) {
  	console.err(err);
    alert(err);
    return;
  }
  selectedCountry(data, "Country", "EPI Score");
});