/**
 * Created by gandrejc on 7.09..
 */
// stores the device context of the canvas we use to draw the outlines
// initialized in myInit, used in myHover and myLeave
var hdc;

// shorthand func
function byClass(e) {
    return document.getElementsByClassName(e)[0];
}

// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i = 2; i < n; i += 2) {
        hdc.lineTo(mCoords[i], mCoords[i + 1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);
    hdc.stroke();
    hdc.fill();
}

function drawRect(coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var top, left, bot, right;
    left = mCoords[0];
    top = mCoords[1];
    right = mCoords[2];
    bot = mCoords[3];
    hdc.strokeRect(left, top, right - left, bot - top);
    hdc.fillRect(left, top, right - left, bot - top);
}

function myHover(element) {
    var hoveredElement = element;
    var coordStr = element.getAttribute('coords');
    var areaType = element.getAttribute('shape');

    switch (areaType) {
        case 'polygon':
        case 'poly':
            drawPoly(coordStr);
            break;

        case 'rect':
            drawRect(coordStr);
    }
}

function myClick(area, el) {
    $("input.hidden.location-setter").val(area);
    $("input.hidden.location-setter").trigger("change");
    myHover(el);
}

function myLeave(canvasId, el) {
    var canvas = byClass(canvasId);
    hdc.clearRect(0, 0, canvas.width, canvas.height);
}

function myInit(id, hoverColor, canvasId) {
    setTimeout(function () {
        // get the target image
        var img = byClass(id);

        var x, y, w, h;

        // get it's position and width+height
        x = img.offsetLeft;
        y = img.offsetTop;
        w = img.clientWidth;
        h = img.clientHeight;

        // move the canvas, so it's contained by the same parent as the image
        var imgParent = img.parentNode;
        var can = byClass(canvasId);
        imgParent.appendChild(can);

        // place the canvas in front of the image
        can.style.zIndex = 1;

        // position it over the image
        can.style.left = x + 'px';
        can.style.top = y + 'px';

        // make same size as the image
        can.setAttribute('width', w + 'px');
        can.setAttribute('height', h + 'px');

        // get it's context
        hdc = can.getContext('2d');

        // set the 'default' values for the colour/width of fill/stroke operations
        hdc.fillStyle = hoverColor;
        hdc.strokeStyle = 'grey';
        hdc.lineWidth = 1;

    }, 500);


}


$(document).ready(function () {
    myInit('image-identifier', 'rgba(0, 142, 188, 0.33)', 'canvas-identifier');
});