var width = 960,
    height = 500,
    active = d3.select(null);

var margin = {top: 0, bottom: 0, left: 0, right: 0};

var projection = d3.geoMercator()
    .translate([width / 2, height / 2])
    .scale(3800)
    .center([-2.1897038068837262, 53.03800390983686]);

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

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

var g = svg.append("g");
var path = d3.geoPath().projection(projection);

var completeData = [];
var dataToDraw = [];


d3.queue()
    .defer(d3.json, "uk_topo.json")
    .defer(d3.json, "stoke_topojson.json")
    .defer(d3.json, 'countries_boundary.json')
    .await(entryPoint);


function entryPoint(error, ukMap, stokeMap, ukBoundaries) {
    if (error) {
        console.error(error)
    }

    //reset button
    infoBox();

    var topoUK = topojson.feature(ukMap, ukMap.objects.GBR_adm2).features;
    var stokeCounty = topojson.feature(stokeMap, stokeMap.objects.E06000021).features;
    var ukCountries = topojson.feature(ukBoundaries, ukBoundaries.objects.subunits).features;

    completeData = topoUK;

    bdv.vis().drawPath(g, stokeCounty, "counties");
    bdv.vis().drawPath(g, ukCountries, "countries", "green");

    g.append("path")
        .datum(topojson.mesh(ukMap, ukMap.objects.GBR_adm2, function (a, b) {
            return a !== b;
        }))
        .attr("class", "mesh")
        .attr("d", path);
}

function clicked(d) {

    var activeCountry = d.properties.name;
    drawCountyPathOnClick(activeCountry);

    //update info text
    var infoContainer = d3.select("#info");
    bdv.vis().drawInfoSection(infoContainer, d);

    if (active.node() === this) {
        svg.selectAll(".buttons")
            .text("Super");
    }

    active.classed("active", false);
    active = d3.select(this).classed("active", true);

    var bounds = path.bounds(d),
        dx = bounds[1][0] - bounds[0][0],
        dy = bounds[1][1] - bounds[0][1],
        x = (bounds[0][0] + bounds[1][0]) / 2,
        y = (bounds[0][1] + bounds[1][1]) / 2,
        scale = .9 / Math.max(dx / width, dy / height),
        translate = [width / 2 - scale * x, height / 2 - scale * y];

    g.transition()
        .duration(750)
        .style("stroke-width", 1.5 / scale + "px")
        .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
    active.classed("active", false);
    active = d3.select(null);

    g.transition()
        .duration(750)
        .style("stroke-width", "1.5px")
        .attr("transform", "");

    g.selectAll(".counties").remove()
    g.selectAll(".county-text").remove()
}

function infoBox() {
    //back button
    svg.append("rect")
        .attr("width", 200)
        .attr("height", 100)
        .attr("fill", "blue")
        .attr("x", 10)
        .attr("y", 10)
        .attr("class", "buttons")
        .on("click", reset);

    svg.selectAll(".buttons")
        .append("text")
        .attr('class', "button-text")
        .attr("x", 10)
        .attr("y", 10)
        .text("Saminu")
        .attr("dx", 5)
        .attr("dy", 2)
}

function drawCountyPathOnClick(activeCountry) {
    var dataDraw = completeData.map(function (d) {
        if (d.properties.NAME_1 == activeCountry) {
            dataToDraw.push(d)
        }
    });


    g.selectAll(".counties")
        .data(dataToDraw)
        .enter()
        .append("path")
        .attr("class", "counties")
        .attr("d", path)
        .on("click", clicked);

    bdv.vis().drawTitle(g, dataToDraw);

}