/********************************************************

TABLE OF CONTENTS

1. MAP CONTAINER
2. MAP LAYERS
3. MAP LOADING
4. ZOOM - AUXILIARY FUNCTIONS
5. CITY NAMES - AUXILIARY FUNCTIONS

********************************************************/

/******************************************************

1. MAP CONTAINER

*******************************************************/

/* Make map fullscreen */
var width = window.innerWidth,
    height = window.innerHeight,
    active = d3.select(null);

var svg = d3.select('svg')
    .attr('width', width)
    .attr('height', height)
    .on('click', stopped, true);

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

/* Define city random colors */
var color = d3.scaleLinear()
    .domain([1, 20])
    .clamp(true)
    .range(['#D5EA9F', '#91B92B']);

/* Define the appropriate map projection */
var projection = d3.geoMercator()
    .scale(40000)
    .center([-16.85, 32.85])
    .translate([width / 2, height / 2]);

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

/* Define zooming limits */
var zoom = d3.zoom()
    .scaleExtent([1, 45])
    .on('zoom', zoomed);

/******************************************************

2. MAP LAYERS

*******************************************************/

var mapContainer = svg.append('g');
var mapText = svg.append('g');

var effectLayer = mapContainer.append('g').classed('effect-layer', true);
var mapLayer = mapContainer.append('g').classed('map-layer', true);

/******************************************************

3. MAP LOADING

*******************************************************/

/* Enable Zooming on the Map */
svg.call(zoom);

/* Load the Map itself */
d3.json('data/madeira.geo.json', function(error, mapData) {
    if (error) throw error;

    var features = mapData.features;
    color.domain([0, d3.max(features, nameLength)]);

    /* Display the Map */
    mapLayer.selectAll('path')
        .data(features)
        .enter().append('path')
        .attr('d', path)
        .attr('vector-effect', 'non-scaling-stroke')
        .style('fill', fillFn)
        .on('mouseover', mouseover)
        .on('mouseout', mouseout)
        .on('click', clicked);

    /* Append City Information Section */
    var city_section = d3.select('#city_controler')
        .selectAll('text').data(features).enter().append('div')
        .attr( 'class', function(d) {
            return 'dicofre_' + d.properties.Dicofre + ' city_info';
        })
        .style('visibility', 'hidden');

        /* City Island */
        city_section.append('p')
            .attr('class','city_island')
            .text( function(d) {
                return d.properties.Ilha;
            });

        /* City District */
        city_section.append('p')
            .attr('class','city_district')
            .text( function(d) {
                return 'Concelho - ' + d.properties.Concelho;
            });

        /* City Name */
        city_section.append('h1')
            .attr('class','city_name')
            .text( function(d) {
                return d.properties.Freguesia;
            });

});

var se = [{
    latitude : 32.651542054545445,
    longitude : -16.90799122727272
}];

mapContainer.append('g')
        .attr('id', 'routers')
        .selectAll('.pin').data(se).enter().append('circle', '.pin')
        .attr('r', 10)
        .attr('fill', function(d) {
            //return d.color
            return '#000'
        })
        .attr('transform', function(d) {
            return 'translate(' + projection([d.longitude, d.latitude]) + ')'
        });

/* Load the Routers */
d3.json('data/routers.json', function(error, routers){
    if (error) throw error;

    routerGroups = groupRouters(routers);
    mapContainer.append('g')
        .attr('id', 'routers')
        .selectAll('.pin').data(routers).enter().append('circle', '.pin')
        .attr('r', 3)
        .attr('fill', function(d) {
            //return d.color
            return '#F15F22'
        })
        .attr('transform', function(d) {
            return 'translate(' + projection([d.longitude, d.latitude]) + ')'
        })
        .attr('visibility', 'hidden');

    mapContainer.append('g')
        .attr('id', 'routers')
        .selectAll('.pin').data(routerGroups).enter().append('circle', '.pin')
        .attr('r', 6)
        .attr('fill', function(d) {
            //return d.color
            return '#F15F22'
        })
        .attr('transform', function(d) {
            return 'translate(' + projection([d.longitude, d.latitude]) + ')'
        });

});

/******************************************************

4. ZOOM - AUXILIARY FUNCTIONS

*******************************************************/

/*
Zoomed - Zooms the elements in and out. Makes circles and text
         smaller or bigger.
*/
function zoomed() {
    mapContainer.attr('transform', d3.event.transform);
    mapContainer.selectAll('circle').attr('r', 3/d3.event.transform.k);
    mapText.attr('transform', d3.event.transform);
}

/*
Clicked - Zooms a specific city if it was clicked and centers it
          on the screen.
*/
function clicked(d) {
    if (active.node() === this) return reset();

    /* Finds the correspondent city name to show */
    var className = '.dicofre_' + d.properties.Dicofre;

    /* Fade In City Information */
    $('#city_controler').fadeIn( "fast", function() {
        d3.select(this).selectAll('div').style('visibility', 'hidden');
        d3.select(this).select(className).style('visibility', 'visible');
    });

    /* Marks the city as selected */
    active.classed('active', false)
                .style('fill', function(d) { return fillFn(d); });
    active = d3.select(this).classed('active', true)
                .style('fill', '#417505');

    /* Centers the screen on the city */
    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 = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
        translate = [width / 2 - scale * x, height / 2 - scale * y];

    /* Animates the zooming in */
    svg.transition()
        .duration(750)
        .call( zoom.transform, d3.zoomIdentity.translate(translate[0],translate[1]).scale(scale) );

}

/*
Reset - Zooms out of specific city if it was clicked.
*/
function reset() {

    /* Unmarks the city as selected */
    active.classed('active', false);
    active = d3.select(null);

    /* Hides any city name visible */
    d3.select('#city_controler').selectAll('div').style('visibility', 'hidden');
    $('#city_controler').hide();

    /* Animates the zooming out */
    svg.transition()
        .duration(750)
        .call( zoom.transform, d3.zoomIdentity );
}

/*
Stopped - Stops zoom.
*/
function stopped() {
    if (d3.event.defaultPrevented) d3.event.stopPropagation();
}

/******************************************************

5. CITY NAMES - AUXILIARY FUNCTIONS

*******************************************************/

/*
nameFn - Returns the name of a city.
*/
function nameFn(d) {
    return d && d.properties ? d.properties.Freguesia : null;
}

/*
nameLength - Returns the size of the name of a city.
*/
function nameLength(d) {
    var n = nameFn(d);
    return n ? n.length : 0;
}

/*
fillFn - Returns a random color based on the name lenght of a city.
*/
function fillFn(d) {
    return color(nameLength(d));
}

/*
mouseover - Animates a city color when hovered.
*/
function mouseover(d) {
    d3.select(this).style('fill', '#417505');
}

/*
mouseout - Animates a city color when it stops being hovered.
*/
function mouseout(d) {
    d3.select(this).style('fill', function(d) { return d===active ? '#417505' : fillFn(d); });
}

/******************************************************

6. ROUTERS - AUXILIARY FUNCTIONS

*******************************************************/

/*
groupRouters - Returns multiple groups of routers
*/
function groupRouters(d) {
    var groups = new Map()
    var list = []
    d.forEach(function(router) {
        var id = router.cityId;
        if (groups.has(id)) {
            var oldData = groups.get(id);
            var newData = {}
            newData.latitude = (router.latitude + oldData.latitude * oldData.size) / (oldData.size + 1)
            newData.longitude = (router.longitude + oldData.longitude * oldData.size) / (oldData.size + 1)
            newData.size = oldData.size + 1;
            newData.id = id;
        } else {
            var newData = {
                latitude : router.latitude,
                longitude : router.longitude,
                size : 1,
                id : id
            };
        }
        groups.set(id, newData)
    });

    groups.forEach(function (group, id, groups) {
        list.push(group)
    });
    console.log(list)
    return list;
}