'use strict';

var BuoyAnalysisSvgMap = {
    /**
     *
     */
    projection: d3.geo.mercator()
                .center([-122, 38])
                .scale(1960)
                .translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]),

    /**
     *
     */
    drawMap: function() {
        var path = d3.geo.path().projection(BuoyAnalysisSvgMap.projection);

        d3.select("svg#map").selectAll('.subunit')
            .data(BuoyAnalysisData.mapJson.features)
            .enter().append('path')
                .attr('d', path)
                .attr('fill', 'khaki')
                .attr('stroke', 'lime');
    },

    /**
     *
     */
    drawStations: function() {
        var tmp;
        var station;
        var stations = [];

        for (var prop in BuoyAnalysisData.stationJson) {
            station = BuoyAnalysisData.stationJson[prop];

            tmp = BuoyAnalysisSvgMap.projection([station.lon, station.lat]);
            station.x = tmp[0];
            station.y = tmp[1];

            stations.push(station);
        }

        d3.select("svg#map").selectAll('.station')
            .data(stations)
            .enter().append('circle')
                .attr('cx', function(d) { return d.x; })
                .attr('cy', function(d) { return d.y; })
                .attr('r', 3)
                .attr('id', function(d) { return 's' + d.id; })
                .attr('fill', '#f00')
                .attr('stroke', '#f00')
                .attr('stroke-width', 5)
                // .on("mouseover", startAnimateDetail)
                // .on("mouseout", stopAnimateDetail)
    },

    /**
     *
     */
    drawReticle: function() {
        d3.select("svg#map").append('circle')
            .attr('r', 50)
            .attr('fill', 'rgba(200, 200, 200, 0.5)')
            .attr('stroke', '#f00')
            .attr("transform", "translate(" + 100 + "," + 100 + ")")
            .data([ {"x": 100, "y": 100} ])
            .classed('reticle', true);
    }
};