/* geometry */

var size = {width: 500, height: 200};
var center = {x: size.width / 2 , y: size.height / 2};
var radius = 0.8 * Math.min(center.x, center.y);


/* timer */

var stop = true;

function startTimer() {
    stop = false;
    d3.timer(function(elapsed) {
        var remaining = Math.max(0, (zoomDelay - elapsed) / 1000);
        if (!stop) {
            if (remaining > 0) {
                messageRemainingTime(remaining)
            } else {
                enableZoom();
                messageZoomEnabled();
            }
        }
        return stop || remaining === 0
    })
}

function stopTimer() {
    stop = true;
}


/* zooming */

var zoomDelay = 800;

var zoom =
    d3.behavior.zoom()
    .size([size.width, size.height])
    .center([center.x, center.y])
    .on('zoom', updateZoom);

function updateZoom() {
    circle.attr('r', radius * zoom.scale())
}

function enableZoom() {
    svg.call(zoom);
}

function disableZoom() {
    svg.on('.zoom', null);
}


/* message */

function messageInit() {
    p.text('hover the viz to enable zooming in ' + zoomDelay / 1000 + ' seconds');
}

function messageRemainingTime(t) {
    p.text('zoom enabled in ' + t.toFixed(1) + ' seconds');
}

function messageZoomEnabled() {
    p.text('zoom enabled');
}


/* DOM setup */

var p = d3.select('body').append('p')

var svg = d3.select('body').append('svg')
    .attr('width', size.width)
    .attr('height', size.height)
    .on('mouseenter', function() {
        startTimer()
    })
    .on('mouseleave', function() {
        disableZoom()
        stopTimer()
        messageInit();
    })
    ;

var circle = svg.append('circle')
    .attr('cx', center.x)
    .attr('cy', center.y)
    .attr('r', radius)

messageInit()