//WANT TO OBSERVE MOVEMENT IN <DIV ID="canvas"></DIV> AND DRAW A POINT AS THE FIGURE DRAGS

var canvas = document.getElementById("imvw");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "white";
      ctx.lineWidth = 5;//BRUSH WIDTH
      ctx.strokeStyle = "green";
      ctx.beginPath();


FirstAssistant.prototype.setup = function() {

    //DRAGGING LIST HANDLER
   this.dragStartHandler = this.dragStart.bindAsEventListener(this);
   this.draggingHandler = this.dragging.bindAsEventListener(this);
   this.dragEndHandler = this.dragEnd.bindAsEventListener(this);
   //this.flickHandler = this.flick.bindAsEventListener(this);

   //LISTEN FOR STARTS AND FLICKS
   this.trackingArea = this.controller.get('canvas');
   //this.flickArea = this.controller.get('res-t');
   //HANDLE DRAG STUFF
   Element.observe(this.trackingArea, Mojo.Event.dragStart, this.dragStartHandler);

}


////////////////////////////////
//DRAG FRIEND LIST TO XY POINT
///////////////////////////////
FirstAssistant.prototype.dragStart = function(event) {
   //Event.pointerX(event.down) && Event.pointerY(event.down)
   Element.observe(this.trackingArea, Mojo.Event.dragging, this.draggingHandler);
   Element.observe(this.trackingArea, Mojo.Event.dragEnd, this.dragEndHandler);
   Event.stop(event);
}

FirstAssistant.prototype.dragging = function(event) {
   this.controller.get("canvas").style.left = Event.pointerX(event.move) + "px";
   this.controller.get("canvas").style.top = Event.pointerY(event.move) + "px";

   //this.controller.get('canvas').innerHTML = '.';

    Event.stop(event);
}

FirstAssistant.prototype.dragEnd = function(event) {
   Element.stopObserving(this.trackingArea, Mojo.Event.dragging, this.draggingHandler);
   Element.stopObserving(this.trackingArea, Mojo.Event.dragEnd, this.dragEndHandler);
   Event.stop(event);
}