var canvas_mousemove_temp;
var canvas_keyup_temp;
var CANVAS_KEY_ESC = 27;

function canvas_click(obj)
{
  var click_x = mouseX - $(obj).Left();
  var click_y = mouseY - $(obj).Top() + getScrollOffset();
  
  if ( obj.canvas_in_draw )
  {
    canvas_close_draw(obj, click_x, click_y);
  }
  else
  {
    canvas_open_draw(obj, click_x, click_y);
  }
}

function canvas_open_draw(obj, x, y)
{
  obj.canvas_box_obj = canvas_create_box(obj, x, y, 1, 1);
  obj.canvas_in_draw = true;
  obj.onclick = function(e)
  {
    canvas_click(this);
    var onclose = this.getAttribute('canvas:oncomplete');
    if ( onclose )
    {
      eval(onclose);
    }
  }
  canvas_replace_mousemove(obj);
}

function canvas_replace_mousemove(obj)
{
  canvas_mousemove_temp = document.onmousemove;
  canvas_mousemove_temp.box_obj = obj;
  canvas_keyup_temp = document.onkeyup;
  document.onmousemove = function(e)
  {
    canvas_mousemove_temp(e);
    canvas_redraw_box(canvas_mousemove_temp.box_obj);
  }
  document.onkeyup = function(e)
  {
    if ( typeof(canvas_keyup_temp) == 'function' )
      canvas_keyup_temp(e);
    
    if ( e.keyCode == CANVAS_KEY_ESC )
      canvas_cancel_draw(canvas_mousemove_temp.box_obj);
  }
}

function canvas_restore_mousemove()
{
  document.onmousemove = canvas_mousemove_temp;
  document.onkeyup = canvas_keyup_temp;
}

function canvas_create_box(obj, x, y, width, height)
{
  var inner_width = width - 2;
  var inner_height = height - 2;
  var top = $(obj).Top() + y;
  var left = $(obj).Left() + x;
  
  // draw outer box
  var div_outer = document.createElement('div');
  div_outer.className = 'canvasbox';
  div_outer.style.border = '1px solid #000000';
  div_outer.style.position = 'absolute';
  div_outer.style.width = String(width) + 'px';
  div_outer.style.height = String(height) + 'px';
  div_outer.style.top = String(top) + 'px';
  div_outer.style.left = String(left) + 'px';
  
  div_outer.rootY = y;
  div_outer.rootX = x;
  
  var div_inner = document.createElement('div');
  div_inner.style.border = '1px solid #FFFFFF';
  if ( IE )
  {
    div_inner.style.width = '100%';
    div_inner.style.height = '100%';
  }
  else
  {
    div_inner.style.width = String(inner_width) + 'px';
    div_inner.style.height = String(inner_height) + 'px';
  }
  
  div_outer.appendChild(div_inner);
  
  obj.appendChild(div_outer);
  return div_outer;
}

function canvas_redraw_box(obj)
{
  if ( !obj.canvas_box_obj )
    return false;
  var rel_x = mouseX - $(obj).Left();
  var rel_y = mouseY - $(obj).Top() + getScrollOffset();
  var new_width = rel_x - obj.canvas_box_obj.rootX;
  var new_height = rel_y - obj.canvas_box_obj.rootY;
  var rootX = obj.canvas_box_obj.rootX;
  var rootY = obj.canvas_box_obj.rootY;
  // Limit dimensions to width - origin_x and height - origin_y
  if ( new_width + rootX > $(obj).Width() )
    new_width = $(obj).Width() - rootX;
  if ( new_height + rootY > $(obj).Height() )
    new_height = $(obj).Height() - rootY;
  // If going to the top or left of the origin, avoid negative width/height by moving the box
  if ( new_width < 1 )
  {
    new_width = rootX - rel_x;
    obj.canvas_box_obj.style.left = String(mouseX + 2) + 'px';
  }
  if ( new_height < 1 )
  {
    new_height = rootY - rel_y;
    obj.canvas_box_obj.style.top = String(mouseY + getScrollOffset() + 2) + 'px';
  }
  obj.canvas_box_obj.style.width = String(new_width) + 'px';
  obj.canvas_box_obj.style.height = String(new_height) + 'px';
  new_width = new_width - 2;
  new_height = new_height - 2;
  if ( IE )
  {
    var nw = new_width;
    var nh = new_height;
    obj.canvas_box_obj.firstChild.style.width = String(nw) + 'px';
    obj.canvas_box_obj.firstChild.style.height = String(nh) + 'px';
  }
  else
  {
    obj.canvas_box_obj.firstChild.style.width = String(new_width) + 'px';
    obj.canvas_box_obj.firstChild.style.height = String(new_height) + 'px';
  }
}

function canvas_close_draw(obj, x, y)
{
  canvas_restore_mousemove();
  obj.canvas_in_draw = false;
  obj.canvas = {
    top: $(obj.canvas_box_obj).Top() - $(obj).Top(),
    left: $(obj.canvas_box_obj).Left() - $(obj).Left(),
    width: $(obj.canvas_box_obj).Width(),
    height: $(obj.canvas_box_obj).Height()
  }
  obj.onclick = function(e)
  {
    canvas_click(this);
  }
}

function canvas_cancel_draw(obj)
{
  canvas_restore_mousemove();
  obj.canvas_in_draw = false;
  obj.removeChild(obj.canvas_box_obj);
  obj.canvas_box_obj = null;
  obj.onclick = function(e)
  {
    canvas_click(this);
  }
  var ga = obj.getAttribute('canvas:oncancel');
  if ( ga )
  {
    eval(ga);
  }
}