var width = 950, height = 700;

var projection = d3.geo.equirectangular().translate([480, 250]);
var path = d3.geo.path().projection(projection);
var graticule = d3.geo.graticule()
    .step([15, 0])
var hourWidth = projection([15,0])[0] - projection([0,0])[0]

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom()
        .on("zoom", redraw))
    .append("g");

var tooltip = d3.select('body').append("div").attr("class", "tooltip hidden");

function redraw() {
    var s = d3.event.scale;
    var t = d3.event.translate;

    svg.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
var defs = svg.append('defs')
var gradient = defs.append('linearGradient')
    .attr('id', 'gradient')
    .attr('x1', 0)
    .attr('x2', '100%')
    .attr('y1', 0)
    .attr('y2', 0)
gradient
    .append('stop').attr('stop-color', '#f51').attr('offset', '5%')
gradient
    .append('stop').attr('stop-color', '#5f5').attr('offset', '50%')
gradient
    .append('stop').attr('stop-color', '#f51').attr('offset', '95%')

var id = 0
function generateId() {
    return id++
}

d3.json("timezones-topo2.json", function (error, world) {

    var tzdata = topojson.feature(world, world.objects.timezones).features;
    tzdata.forEach(function(d) {
        var hours = d.properties.Name.match('[+-]?\\d+')
        d.properties.id = generateId()
        d.properties.hours = +hours
    })
    var tz = defs.selectAll(".tz").data(tzdata);

    tz.enter().insert("clipPath")
        .attr("id", function (d) {
            return d.properties.id;
        })
        .append('path')
        .attr("d", path)

    var rects = svg.selectAll('rect').data(tzdata).enter().append('rect')
    var zoneWidth = 7 * hourWidth
    rects
        .attr('x', function(d) {
            return projection([d.properties.hours * 15, 0])[0] - zoneWidth / 2
        })
        .attr('y', 0)
        .attr('width', zoneWidth)
        .attr('height', '100%')
        .attr('fill', 'url(#gradient)')
        .attr('clip-path', function(d) {
            return 'url(#' + d.properties.id + ')'
        })
    svg.append('path')
        .attr("d", path(graticule()))
        .attr('opacity', 0.3)
    //tooltips
    rects.on("mousemove", function (d, i) {
        var mouse = d3.mouse(svg.node()).map(function (d) {
            return parseInt(d);
        });
        tooltip
            .classed("hidden", false)
            .attr("style", "left:" + (mouse[0] + 20) + "px;top:" + (mouse[1] + 100) + "px")
            .html(d.properties.Name)
    })
        .on("mouseout", function (d, i) {
            tooltip.classed("hidden", true)
        });

});