var MapChart = {
  init: function(svg, html_tag_attr, projection, map){
    var wSvg = $(html_tag_attr).width(),
        hSvg = $(html_tag_attr).height();

    var path = d3.geoPath().projection(projection);
    
    Promise.all([map]).then(values => {
      createMap(values[0]);
    });
    
    // Code for map zooming
    var zoomSettings = d3.zoomIdentity
        .translate(wSvg / 2, hSvg / 2)
        .scale(hSvg / 2);
    
    var mapZoom = d3.zoom().on("zoom", zoomed);
    function zoomed(){
      var e = d3.event;
      projection.translate([e.transform.x, e.transform.y]).scale(e.transform.k);
      d3.selectAll("path.countries").attr("d", path);
    }

    function zoomButton(zoomDirection) {
      var width = 500;
      var height = 500;
      if (zoomDirection == "in") {
        var newZoom = projection.scale() * 1.5;
        var newX =
          ((projection.translate()[0] - (width / 2)) * 1.5) + width / 2;
        var newY =
          ((projection.translate()[1] - (height / 2)) * 1.5) + height / 2;
      }
      else if (zoomDirection == "out") {
        var newZoom = projection.scale() * .75;
        var newX = ((projection.translate()[0] - (width / 2)) * .75) + width / 2;
        var newY = ((projection.translate()[1] - (height / 2)) * .75) + height / 2;
      }
    
      var newZoomSettings = d3.zoomIdentity.translate(newX, newY).scale(newZoom);
    
      svg.transition().duration(500).call(mapZoom.transform, newZoomSettings);
    
    }
    
    d3.select(html_tag_attr).select(html_tag_attr+"_controls").append("button").attr("classed", "btn btn-success").on("click", () => {
                      zoomButton("in")}).html("Zoom In");
    d3.select(html_tag_attr).select(".controls").append("button").on("click", () => {
                      zoomButton("out")}).html("Zoom Out");
    
    function createMap(countries){
      svg.selectAll("path")
        .data(countries.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("class", "countries");
      
      svg.call(mapZoom).call(mapZoom.transform, zoomSettings);
    }
    
  }
};