var paint = false;
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var theCanvas;
var context;
var annotations = new Array();
var timeNow = 0;

var replayCounter = 0;
var replayStep = 30;
var replayInterval;
var strokeIndex = 0;

/*
   Test function called on key down of the letter "T"
*/
function doIfT(e) {
	if( e.keyCode == "84") {
		alert("this worked");
	}
}

/*
   Clears the drawing canvas.
*/
function clearDrawCanvas() {
	context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
}

/*
   Clears the drawinf memory.
*/
function clearDrawingMemory() {
	annotations = [];
	replayCounter = 0;
	strokeIndex = 0;
}

function replayAnnotations() {
	clearDrawCanvas();
	replayInterval = window.setInterval(updateRepCounter, replayStep);
}


function updateRepCounter() {

	if(annotations.length - 1 < strokeIndex) {
		window.clearInterval(replayInterval);
	}
	
	while(annotations[strokeIndex].timestamp < replayCounter) {
		drawStroke(annotations[strokeIndex].a, annotations[strokeIndex].b);
		++strokeIndex;
	}
	
	replayCounter += replayStep;
}

function redraw() {
  // clearDrawCanvas();
  
  context.strokeStyle = "#e60000";
  context.lineJoin = "round";
  context.lineWidth = 5;
			
  for(var i=0; i < clickX.length; i++) {		
    context.beginPath();
    if(recording) {
    	var coordA = new Coord();
    }
    
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
      if(recording) {
	      coordA.x = clickX[i-1];
	      coordA.y = clickY[i-1];
	  }
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
       if(recording) {
	       coordA.x = clickX[i]-1;
	       coordA.y = clickY[i];
		}
     }

     if(recording){
	     var coordB = new Coord(clickX[i], clickY[i]);
	     var newStroke = new Stroke(coordA, coordB, miliCount);
	     annotations.push(newStroke);
	 }
     
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

function drawStroke(a, b) {
	context.strokeStyle = "#e60000";
  	context.lineJoin = "round";
  	context.lineWidth = 5;
  	context.beginPath();
	context.moveTo(a.x, a.y);
	context.lineTo(b.x, b.y);
    context.closePath();
    context.stroke();
}

function addClick(x, y, dragging) {
	clickX.push(x);
	clickY.push(y);
	clickDrag.push(dragging);
}

function setUp() {
	theCanvas = document.getElementById("daddy-canvas");
	context = theCanvas.getContext("2d");
	
	theCanvas.addEventListener("mousedown", function(e) {
  		paint = true;
  		addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  		redraw();
	});

	theCanvas.addEventListener("mousemove",function(e){
	  	if(paint){
		    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
		    redraw();
	  	}
	});

	theCanvas.addEventListener("mouseup",function(e){
	  	paint = false;

  		clickX = [];
		clickY = []; 
		clickDrag = [];
	});

	theCanvas.addEventListener("mouseleave",function(e){
	  	paint = false;

  		clickX = [];
		clickY = []; 
		clickDrag = [];
	});
}

window.addEventListener("load", setUp, false);
window.addEventListener("keydown", doIfT, false);









