var paper = null;
var allowcreate = true;
var canvaswidth = 900;
var canvasheight = 425;
var circles;
var rect;
var text;

function createCanvas() {
    if (paper == null) {
        paper = new Raphael(document.getElementById('canvas_container'), canvaswidth, canvasheight);
        text = paper.text(0, 0, 'dddff');
        text.hide();
        text.toFront();
        rect = paper.rect(0, 0, 100, 100, 5);
        rect.attr( {
            fill : 'white'
        });
        rect.toFront();
        rect.hide();

    }

    //
}

function createOff() {
    allowcreate = false;
}

function createCircle(x, y, height, message, comments, measurementId, commentcount, color) {
    if (allowcreate) {
        var circle = paper.circle(x, y, 2 * (height / 5));

        if (comments != null && comments != '') {
            color = 'rgb(100,150,255)';
            circle.attr("stroke-opacity", 1);
            circle.attr("r", 3);
            circle.attr("stroke-width", 1.5)
        }
        else {
           circle.attr("stroke-opacity", 0.01);
           circle.attr("stroke-width", 7);
        }

        
        circle.attr("stroke", "white");
        circle.attr( {
            fill : color
        });

        var rectwidth = 272;
        var rectheight = 80;
        if (commentcount > 0) {
            rectheight = 80 + 15 * (commentcount + 2);
        }
        var rectx = x + (height / 2);
        var recty = y + (height / 2);

        if ((x + rectwidth) > canvaswidth) {
            rectx = x - rectwidth;
        }
        if ((y + rectheight) < 0) {
            recty = y + rectheight;
        }
        
        if ((y + rectheight) > canvasheight) {
            recty = y - rectheight;
        }

        circle.click(function (event) {
            document.getElementById('measurementId').value = measurementId;
            document.getElementById('description').value = message;
            TrPanelPopup.showPopup('commentPopup_popupContainer', 'commentPopup', event, 'click', 'centered', true, 0, 0, 0, 0);
            return true;
        });

        circle.mouseout(function (event) {
            circle.attr({fill:color});
            text.hide();
            rect.hide();
        })
        circle.mouseover(function (event) {
            rect.show().attr( {
                x : rectx, y : recty, width : rectwidth, height : rectheight
            });
            text.show().attr( {
                x : rectx + (rectwidth / 2), y : recty + (rectheight / 2), text : message + comments
            });
            circle.attr({fill:'orange'});
            rect.toFront();
            text.toFront();

        })
    }

}