var old_timer = null;
var old_node = null;

var make_button = function (target, label)
{
    var msg  = '<button onclick="';
    msg += 'activate(\'' + target + '\')"';
    if (target == 'node-1') msg+= ' disabled="disabled" ';
    msg+= '>' + label + '</button>';
    return msg;
};

var activate = function (id)
{
    if (old_node) {
        clearInterval(old_timer);
        old_node.style.fillOpacity = 1.0;
        old_node.style.stroke = 'black';
        old_node.classList.remove('blink');
    };
    var node = document.getElementById(id);
    var div = document.getElementById('svg');
    var node_dim = node.getBBox();
    var div_dim = div.getBoundingClientRect();
    var nx = node_dim.x;
    var ny = node_dim.y;
    var hs = nx - (div_dim.width / 2 - node_dim.width / 2);
    var vs = ny - (div_dim.height / 2 - node_dim.height / 2);
    div.scrollLeft = hs;
    div.scrollTop = vs;
    node.style.stroke = 'red';
    old_node = node;
    node.classList.add('blink');

    var d = document.getElementById('data');
    var msg = '';
    for (i=0; i < rounds; i++)
	msg += ('<p>round: ' + i + ':<br/>') + data[i][id] + '</p>\n';

    var rect = document.getElementById(id);
    var fce = rect.firstElementChild;
    var nse = fce.nextElementSibling;
    var pare = nse.nextElementSibling;
    var pse = pare.nextElementSibling;
    var fc = fce.textContent;
    var ns = nse.textContent;
    var par = pare.textContent;
    var ps = pse.textContent;
    msg += make_button(par, "↑");
    msg += make_button(ps, "←");
    msg += make_button(fc, "↓");
    msg += make_button(ns,"→");
    d.innerHTML = msg;
    return;
};