var color1 = "black";
var color2 = "white";

var lineWidth = 3;

var coordsString = "";
var updateTimeout = 2000;
var flickerTimeout = 500;

window.onload = function() {drawFlickeringBound();};

function drawFlickeringBound() {
var y = document.getElementsByClassName("VwaRenderingPage");
var containerDiv;
var image;
for (var i = 0; i < y.length; i++) {
    var curDiv = y.item(i);
    if (curDiv.id.indexOf("_BackPage_ForeDiv") > -1) {
        containerDiv = curDiv.parentNode;
        image = curDiv.children[1];
        break;
    }
}
var canvas = document.createElement("canvas");
containerDiv.appendChild(canvas);
canvas.style.position = "absolute";
canvas.height = image.clientHeight;
canvas.width = image.clientWidth;
canvas.style.width = "100%";
canvas.style.height = "100%";
updateCoordinateString();
flicker(canvas, color2);
}

function updateCoordinateString() {
var areaElements = document.getElementsByTagName("area");
if (areaElements.length > 0) {
    coordsString = areaElements.item(0).coords;//replace me!
} else {
    coordsString = "";
}
setTimeout(function(){updateCoordinateString();}, updateTimeout);
}

function drawBound(canvas, color) {
if (coordsString == "") {
    return;
}
var coordsArray = coordsString.split(",")
if (coordsArray.length < 4)
    return;
var prevX;
var prevY;
var curX = parseInt(coordsArray[0]);
var curY = parseInt(coordsArray[1]);
var ctx = canvas.getContext("2d");
for (var i = 1; (i * 2 + 1) < coordsArray.length; i++) {
    prevX = curX;
    prevY = curY;
    curX = parseInt(coordsArray[i * 2]);
    curY = parseInt(coordsArray[i * 2 + 1]);
    drawLine(prevX, prevY, curX, curY, ctx, color);
}
}

function drawLine(ax,ay,bx,by,ctx, color) {
ctx.moveTo(ax, ay);
ctx.lineTo(bx, by);
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.stroke();
}

function flicker(canvas, color) {
canvas.getContext("2d").clearRect(0, 0, canvas.width - 1, canvas.height - 1);
drawBound(canvas, color);
setTimeout(function(){flicker(canvas, color == color1 ? color2 : color1);}, flickerTimeout);
}