var map = d3.select("#map");
var width = parseInt(map.style('width'));
var height = parseInt(map.style('height'));
//***************************************************************//
/**
 * rest the projection params so the map fills as much of the svg as possible
 * @param json geojson
 * @returns {{projection: *, path: *}}
 */
function resetProjection(json){
  console.log(json, width, height)
  //find the geo center of the current geojson data
  var center = d3.geo.centroid(json);
  //arbitrary scale, to be tweaked
  var scale  = 150;
  //move to center for now
  var offset = [width/2, height/2];
  // set the projection
  var projection = d3.geo.mercator().scale(scale).center(center)
      .translate(offset);

  // create the path
  var path = d3.geo.path().projection(projection);

  // using the path determine the bounds of the current map and use
  // these to determine better values for the scale and translation
  //bounds = [[left, top], [right, bottom]]
	var bounds;
  if(json.type =="FeatureCollection") {
    bounds = d3.geo.bounds(json);
  } else {
    bounds  = path.bounds(json);
  }
  console.log(bounds)
  //how many times the width of the current path in pixels fit
  //within the scaling *B height
  var hscale  = scale * width  / (bounds[1][0] - bounds[0][0]);
  //similar for vertical
  var vscale  = scale * height / (bounds[1][1] - bounds[0][1]);
  if(hscale < vscale) {
    scale = hscale;
  } else {
    scale = vscale;
  }
  //shift to new center
  offset  = [width - (bounds[0][0] + bounds[1][0])/2,
    height - (bounds[0][1] + bounds[1][1])/2];
console.log(center, scale, offset)
  // new projection
  projection = d3.geo.mercator().center(center)
      .scale(scale).translate(offset);
  path = path.projection(projection);
  console.log(projection)

  return {
    projection: projection,
    path: path
  }
}

var geodata;
var projection = d3.geo.mercator().scale(1900);

d3.json('https://raw.githubusercontent.com/ft-interactive/geo-data/master/uk/eu-referendum-results/output/combined.topojson', (err, data) => {
  console.log(data);
  geodata = topojson.feature(data, data.objects.gb)
  var center = d3.geo.centroid(geodata);
  console.log(center)
  projection.center([-1.8, 54.3]).translate([250, 400]);

//   projection = resetProjection(geodata).projection;
  var path = d3.geo.path().projection(projection);
  var mapG = map.append('g').attr('class', 'mapG');
  console.log(geodata.features)
   mapG.selectAll("path")
      .data(geodata.features)
      .enter().append("path")
      .attr("d", d3.geo.path().projection(projection))
      .attr("stroke", "black").style("fill", "none");

  var features = geodata.features;

})