var drawing = false;

var context;

var offset_left = 0;
var offset_top = 0;

function start_canvas ()
{
    var scribbler = document.getElementById ("scribbler");
    context = scribbler.getContext ("2d");
    scribbler.onmousedown = function (event) {mousedown(event)};
    scribbler.onmousemove = function (event) {mousemove(event)};
    scribbler.onmouseup   = function (event) {mouseup(event)};
    for (var o = scribbler; o ; o = o.offsetParent) {
	offset_left += (o.offsetLeft - o.scrollLeft);
	offset_top  += (o.offsetTop - o.scrollTop);
    }
}

function getPosition(evt)
{
    evt = (evt) ?  evt : ((event) ? event : null);
    var left = 0;
    var top = 0;
    var scribbler = document.getElementById("scribbler");

    if (evt.pageX) {
	left = evt.pageX;
	top  = evt.pageY;
    } else if (document.documentElement.scrollLeft) {
	left = evt.clientX + document.documentElement.scrollLeft;
	top  = evt.clientY + document.documentElement.scrollTop;
    } else  {
	left = evt.clientX + document.body.scrollLeft;
	top  = evt.clientY + document.body.scrollTop;
    }
    left -= offset_left;
    top -= offset_top;

    return {x : left, y : top}; 
}

function random_colour()
{
    var colour = new String();
    for (var i = 0; i < 3; i++) {
        var random16 = Math.floor (Math.random() * 16);
	colour = colour.concat (random16.toString(16).toUpperCase());
    }
    return colour;
}

function
mousedown(event)
{
    drawing = true;
    var location = getPosition(event);
    context.lineWidth = 4.0;
    context.strokeStyle="#"+random_colour();
    context.beginPath();
    context.moveTo(location.x,location.y);
}

function
mousemove(event)
{
    if (!drawing) 
	return;
    var location = getPosition(event);
    context.lineTo(location.x,location.y);
    context.stroke();
}

function
mouseup(event)
{
    if (!drawing) 
	return;
    mousemove(event);
    drawing = false;
}