var width = document.getElementById('container').offsetWidth-60;
var height = width/1.5;

var zoomBehaviour=d3.behavior.zoom();

var projection = d3.geo.mercator()
    .scale(230)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("#container").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoomBehaviour.on("zoom", zoom));

var g = svg.append("g");


d3.json("world.json", function(error, map) {
	var w = document.getElementById('container').width;
  	var h =document.getElementById('container').height;

	function clicked(d){
		zoomBehaviour.translate([10,10]);
	    zoom();
	}

  	var country = g.selectAll(".country")
	   .data(topojson.feature(map,map.objects.subunits).features)
	   .enter()
	   .append("path")
	   .style("fill", "green")
	   .attr("d", path)
	   .on("click", clicked);
});



function zoom() {
  g.transition()
      .duration(500)
      .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale+ ")");
}