var Jotter;
var ctx;

var drawing = false;
var lastpos = {x:-1, y:-1};
var path;

function LoadJotter (Canvas)
{
    Jotter = Canvas;
    ctx = getCtx();

    Jotter.addEventListener("mousedown", on_mousedown, false);
    Jotter.addEventListener("mousemove", on_mousemove, false);
    Jotter.addEventListener("mouseup", on_mouseup, false);
}

function Path()
{
    this.xs = new Array();
    this.ys = new Array();
    var ls = new Array();

    this.init = function(inX, inY)
    {
        for (var i = 0; i < inX.length; i++)
        {
            this.add(inX[i], inY[i]);
        }
    }

    this.add = function(x, y)
    {
        var i = ls.length;
        this.xs.push(x);
        this.ys.push(y);
    }
}

function getCtx()
{
    var Thisctx = Jotter.getContext("2d");
    return Thisctx;
}

function on_mousedown(e)
{
//    getCtx().clear();

    drawing = true;

    lastpos.x = e.clientX - Jotter.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
    lastpos.y = e.clientY - Jotter.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);

    path = new Path();
    path.add(lastpos.x, lastpos.y);
}

function on_mousemove(e)
{
    if (!drawing)
    {
        return;
    }

    var pos = {x:-1, y:-1};

    pos.x = e.clientX - Jotter.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
    pos.y = e.clientY - Jotter.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);

    path.add(pos.x, pos.y);

    ctx.strokeStyle = "rgba(0,0,255,0.5)";
    ctx.lineWidth = 4.0;

    ctx.beginPath();
     ctx.moveTo(lastpos.x, lastpos.y);
     ctx.lineTo(pos.x, pos.y);
    ctx.closePath();

    ctx.stroke();

    lastpos = pos;
}

function on_mouseup(e)
{
    drawing = false;
}