var width = 960,
	height = 500;

var mapsource = "wgs84_edited.json";	
var gemeentesource = "w_Gemeentenalfabetischperprovincie2015.csv";	

var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
var path = d3.geo.path().projection(projection);

var c20 = d3.scale.category20();

var svg = d3.select('#country-hook')
		.append('svg')
		.attr('width', width)
		.attr('height', height);

var gemeentedata;

function initMap(){

	d3.json(mapsource, function(geo_data){

		var bounds = path.bounds(geo_data);

		var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
		  (bounds[1][1] - bounds[0][1]) / height);

		var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
		  (height - scale * (bounds[1][1] + bounds[0][1])) / 2];
		
		projection.scale(scale).translate(transl);

		var mergedData = mergeGeoData(geo_data.features, gemeentedata);

		svg.selectAll('path')
			.data(mergedData)
			.enter()
			.append('path')
			.filter(function(d) {
				return d.properties.WATER !== 'JA';
			})
			 .attr({
				d: path,
                fill: function(d) { return c20(d.properties.provincie); },
                stroke: function(d) { return c20(d.properties.provincie); },
				class: function(d) { return 'gemeente ' + d.properties.provincie; }
              })
			.on('mouseover', function(d) {
				var provincie = d.properties.provincie;
				showTooltip(provincie);

				d3.selectAll('.gemeente')
					.classed('fadeout', true);

				d3.selectAll('.' + provincie)
                	.classed('hover', true);

			})
			.on('mouseout', function(d) {
				var provincie = d.properties.provincie;
				d3.selectAll('.' + provincie)
                	.classed('hover', false);

				d3.selectAll('.gemeente')
					.classed('fadeout', false);

                hideTooltip();
			})

	})	
}

function mergeGeoData(data, dataset2) {
	var dataset = data;
	for( var i = 0, l = dataset.length; i < l; i++) {
		var gemeenteCode = dataset[i].properties.GM_CODE.split("GM")[1]; //GM_CODE: "GM0003"
		for (var j = 0, jlen = dataset2.length; j < jlen; j++ ) {
			var jsonGemeente = dataset2[j].Gemcode; //Gemcode: "0003"
			if (gemeenteCode === jsonGemeente) {
				dataset[i].properties.provincie = dataset2[j].provcodel;
				break;
			}
		}
	}
	return dataset;
}

function getTooltipContent(title) {
	var html = '<div class="tooltip-label">' + title + '</h1>';
	return html;
}

function showTooltip(title){
	//Get this bar's x/y values, then augment for the tooltip
	var xPosition = (d3.event.pageX),
		yPosition = (d3.event.pageY - 28);

	var content = getTooltipContent(title);

	d3.select("#tooltip")
	  .style("left", xPosition + "px")
	  .style("top", yPosition + "px")
	  .html(content);

	d3.select("#tooltip").classed("none", false);
}

function hideTooltip() {
   d3.select("#tooltip").classed("none", true);
}

function initGemeentedata() {
	d3.csv(gemeentesource, function(data) {
		gemeentedata = data;
        initMap();
	})
}

initGemeentedata();