
// -------------------------------------------------------------------------------------------------
var canvas, context, canvaso, contexto, isBlank;

// -------------------------------------------------------------------------------------------------
pencil = function () {
  this.started = false;

  this.mousedown = function (ev) {
      context.beginPath();
      context.moveTo(ev._x, ev._y);
      tool.started = true;
  };

  this.mousemove = function (ev) {
    if (tool.started) {
      context.lineTo(ev._x, ev._y);
      context.stroke();
      isBlank = false;      
    }
  };

  this.mouseup = function (ev) {
    if (tool.started) {
      tool.mousemove(ev);
      tool.started = false;
      updateCanvas();
    }
  };
  
  this.mouseout = function (ev) {
    if (tool.started) {
      tool.started = false;
      updateCanvas();
    }
  };  
};
var tool = new pencil();

// -------------------------------------------------------------------------------------------------
function updateCanvas() 
{
  contexto.drawImage(canvas, 0, 0);
  context.clearRect(0, 0, canvas.width, canvas.height);
}

// -------------------------------------------------------------------------------------------------
function clearCanvas() 
{
  contexto.clearRect(0, 0, canvas.width, canvas.height);
  context.clearRect(0, 0, canvas.width, canvas.height);
  isBlank = true;
}

// -------------------------------------------------------------------------------------------------
function canvasIsBlank() 
{
  return isBlank;
}

// -------------------------------------------------------------------------------------------------
function handleMouseEvent(ev) 
{
  // http://www.quirksmode.org/dom/w3c_cssom.html
  var parentOffset = $(this).parent().offset(); 
  ev._x = ev.pageX - parentOffset.left;
  ev._y = ev.pageY - parentOffset.top;
  
  tool[ev.type](ev);
}

// -------------------------------------------------------------------------------------------------
function touchHandler(event)
{
  var touches = event.changedTouches,
      first = touches[0],
      type = "";
  switch(event.type)
  {
      case "touchstart": type = "mousedown"; break;
      case "touchmove":  type = "mousemove"; break;        
      case "touchend":   type = "mouseup"; break;
      default: return;
  }

  var simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                            first.screenX, first.screenY, 
                            first.clientX, first.clientY, false, 
                            false, false, false, 0/*left*/, null);

  first.target.dispatchEvent(simulatedEvent);
  if (type == "mousemove")
    event.preventDefault();
}

// -------------------------------------------------------------------------------------------------
function init_AvatarScribbler(canvasDom)
{
  if (!canvasDom.getContext) 
  {
    alert('Error: no canvas.getContext!');
    return;
  }

  // Get the 2D canvas context.
  contexto = canvasDom.getContext('2d');
  if (!contexto) 
  {
    alert('Error: failed to getContext!');
    return;
  }

  // Add the temporary canvas.
  var container = canvasDom.parentNode;
  canvas = document.createElement('canvas');
  if (!canvas) 
  {
    alert('Error: I cannot create a new canvas element!');
    return;
  }

  canvas.id     = 'UIAvatarImageTemp';
  canvas.width  = canvasDom.width;
  canvas.height = canvasDom.height;
  container.appendChild(canvas);

  context = canvas.getContext('2d');
  
  clearCanvas ();

  // Attach the mousedown, mousemove and mouseup event listeners.
  canvas.addEventListener('mousedown', handleMouseEvent, false);
  canvas.addEventListener('mousemove', handleMouseEvent, false);
  canvas.addEventListener('mouseup',   handleMouseEvent, false);
  canvas.addEventListener('mouseout',  handleMouseEvent, false);
  
  // support touchscreens why not
  document.addEventListener("touchstart", touchHandler, true);
  document.addEventListener("touchmove", touchHandler, true);
  document.addEventListener("touchend", touchHandler, true);
  document.addEventListener("touchcancel", touchHandler, true);   
}

function term_AvatarScribbler(canvasDom)
{
  document.removeEventListener("touchstart", touchHandler, true);
  document.removeEventListener("touchmove", touchHandler, true);
  document.removeEventListener("touchend", touchHandler, true);
  document.removeEventListener("touchcancel", touchHandler, true);  
}
