(function(){
  var width = 960,
        height = 1160,
        padding = 6, // separation between nodes
        maxRadius = 20;

    var svg = d3.select("#mapContainer").append("svg")
            .attr("width", width)
            .attr("height", height);

    //*****hexagon grid stuff*************************//

    var hexRadius = Math.sqrt(3) * maxRadius,
            hexWidth = Math.sqrt(3) * hexRadius,
            hexHeight = 2 * hexRadius;
    //no of rows and cols in the hex grid
    var nrows = Math.ceil((height - 0.5 * hexRadius)/ (1.5 * hexRadius)),
        ncols = Math.ceil((width - 0.5 * Math.sqrt(3) * hexRadius)/ (Math.sqrt(3) * hexRadius));

    drawHexGrid(nrows, ncols, hexRadius, svg);

    //finding the centroids of the hexcells
    function hexCentroids(nrows, ncols, hexRadius) {
        var centroidMatrix = []; //array of arrays
        for (var i = 0; i< nrows; i++){
            var rowArr = [];
            var yCoord = hexRadius + 1.5 * hexRadius * i;
            var initX;
            if(i % 2 === 0) { //odd rows
                initX = 0.5 * Math.sqrt(3) * hexRadius;
            }else { //even rows
                initX = Math.sqrt(3) * hexRadius;
            }
            for (var j = 0; j < ncols; j++) {
                rowArr.push([(initX + j * Math.sqrt(3) * hexRadius), yCoord])
            }

            centroidMatrix.push(rowArr)
        }

        return centroidMatrix;

    }

    /***
     * find the closest hexcell centroid to a point with coordinates of xcoord and ycoord
     * @param xcoord
     * @param ycoord
     * @returns {*[]} array of size 2, with arr[0] corresponding to the colnumber of the hexgrid
     * and arr[1] the rownumber of the hexgrid
     */
    function getClosestCentroidIndex(xcoord, ycoord){
        var yIndex = Math.round((ycoord - hexRadius) /(1.5 * hexRadius));
        var initX;
        if(yIndex % 2 === 0) { //odd rows
            initX = 0.5 * Math.sqrt(3) * hexRadius;
        }else { //even rows
            initX = Math.sqrt(3) * hexRadius;
        }
        var xIndex = Math.round((xcoord - initX)/(Math.sqrt(3) * hexRadius));

        return [xIndex, yIndex]
    }

    function hexagon(radius) {
        var x0 = 0, y0 = 0;
        var d3_hexbinAngles = d3.range(0, 2 * Math.PI, Math.PI / 3);
        return d3_hexbinAngles.map(function(angle) {
            var x1 = Math.sin(angle) * radius,
                    y1 = -Math.cos(angle) * radius,
                    dx = x1 - x0,
                    dy = y1 - y0;
            x0 = x1;
            y0 = y1;
            return [dx, dy];
        });
    }

    function hexagonPath(radius) {
        return "m" + hexagon(radius).join("l") + "z";
    }

    function drawHexGrid(nrows, ncols, hexRadius, svg) {
        var centroid = hexCentroids(nrows, ncols, hexRadius);
        var hexrows = svg.selectAll('g.hexrow').data(centroid)
                .enter().append('g').attr('class', 'hexrow');

        hexrows.selectAll('path.hexagon').data(function(d){return d})
                .enter().append('path')
                .attr('class', 'hexagon')
                .attr("d", function (d) { return "M" + d[0]+ "," + d[1] + hexagonPath(hexRadius); })
                .attr('fill', 'rgba(255,255,255,0)').attr('stroke', 'black')



    }

    //***************************************************************//
    /**
     * rest the projection params so the map fills as much of the svg as possible
     * @param json geojson
     * @returns {{projection: *, path: *}}
     */
    function resetProjection(json){
        //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  = path.bounds(json);
        //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];

        // new projection
        projection = d3.geo.mercator().center(center)
                .scale(scale).translate(offset);
        path = path.projection(projection);

        return {
            projection: projection,
            path: path
        }
    }
    var geodata;
    var projection = d3.geo.mercator().scale(1000);
    d3.json("uk_counties.topo.json", function(err, data){
        geodata = topojson.feature(data, data.objects.uk_counties)

        var center = d3.geo.centroid(geodata);
        projection.center(center);

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

        var mapG = svg.append('g').attr('class', 'mapG');
        var nodeG = svg.append('g').attr('class', 'nodeG');

        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;

        var hexblocks = features.map(function(d){
            var centroid = path.centroid(d);
            return {
                name: d.properties.NAME,
                cx: centroid[0],
                cy: centroid[1],
                x: centroid[0],
                y: centroid[1],
                radius: maxRadius,
            }
        });

        //set to true when curating the hexagon layouts
        var isHexBlockmoving = false;
        var hexBlockMovingID = null;
        //force layout with the centroids as the nodes,
        //the size and width of the svg
        var force = d3.layout.force()
                .nodes(hexblocks)
                .size([width, height])
                .gravity(0)
                .charge(0) //instead of the default 30
                .on('tick', tick)
                .start();

        force.on('end', function() {
            var hexG = d3.selectAll('g.hexrow');
            hexblocks.forEach(function(hex) {
                var closest = getClosestCentroidIndex(hex.x, hex.y);
                hex.newX = closest[0];
                hex.newY = closest[1];
                hexG.filter(function(d, i){
                    return i === closest[1]
                }).selectAll('path').filter(function(d, i){
                    return i === closest[0]
                }).attr('fill', 'blue').attr('id', hex.name)
//                .on('mouseover', function(d, i){
//                    console.log(d3.select(this).attr('id'))
//                })

            });
            d3.selectAll('.hexagon').on('click', moveHexBlock);
            //take out the circles so they don't affect the hexagon on clikc
            d3.selectAll('.nodeG').remove();
        });

        // Move nodes toward cluster focus.
        //basically the force layout changes cy as it tries to move the
        //circles apart, but you are pulling them back towards their centroids with th
        //+= (d.clusterY - d.cy)  * alpha
        //the higher the alpah, the more strongly pulled it is
        // Move nodes toward cluster focus.
        function gravity(alpha) {
            return function(d) {
                d.y += (d.cy - d.y) * alpha;
                d.x += (d.cx - d.x) * alpha;
            };
        }

        function tick(e) {

            node.each(gravity(.2 * e.alpha))
                    .each(collide(e.alpha))
                    .attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
        }

        // Resolve collisions between nodes.
        function collide(alpha) {
            var quadtree = d3.geom.quadtree(hexblocks);
            return function(d) {
                var r = 2 * maxRadius + padding,
                        nx1 = d.x - r,
                        nx2 = d.x + r,
                        ny1 = d.y - r,
                        ny2 = d.y + r;
                quadtree.visit(function(quad, x1, y1, x2, y2) {
                    if (quad.point && (quad.point !== d)) {
                        var x = d.x - quad.point.x,
                                y = d.y - quad.point.y,
                                l = Math.sqrt(x * x + y * y),
                                r = maxRadius + quad.point.radius + padding;
                        if (l < r) {
                            l = (l - r) / l * alpha;
                            d.x -= x *= l;
                            d.y -= y *= l;
                            quad.point.x += x;
                            quad.point.y += y;
                        }
                    }
                    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
                });
            };
        }

        function moveHexBlock(d, i) {
            console.log('move this block!', d3.select(this).attr('id'))
            var hexID = d3.select(this).attr('id');
            if(hexID && hexID != null && isHexBlockmoving == false) {
                //so step 1
                isHexBlockmoving = true;
                hexBlockMovingID = hexID;

                d3.select(this).attr('id', 'moving') //set the current element id to be 'moving'
                        .attr('fill', 'rgba(0,0,255,0.5)'); // and set the moving fill to be
            }

            if((hexID == null ||!hexID) && isHexBlockmoving === true) {
                d3.select(this).attr('id', hexBlockMovingID)
                        .attr('fill', 'blue')

                isHexBlockmoving = false;
                d3.select('#moving').attr('id', null).attr('fill', 'rgba(255,255,255,0)');
                var hexBlockEl = hexblocks.filter(function(item) {
                    return item.name === hexBlockMovingID;
                });

                hexBlockEl.newX = d[0];
                hexBlockEl.newY = d[1];
            }
        }

        var node = nodeG.selectAll('.node')
                .data(hexblocks)
                .enter().append('circle')
                .attr('class', 'node');
        node.attr('r', maxRadius).attr('fill', 'grey')

        d3.select('#exportDataBtn').on('click', function() {
            var data = JSON.stringify(hexblocks);
            console.log(data)
        });

    });
})();