/** canvas supporting browser section:
 * Firefox Code to create dynamic canvas above all other element in a html page.
 * F. Permadi, 2009
 * http://www.permadi.com 
 *
 * This code is made available for educational purpose comes with no warranty.  Use at your own risk.
 *
 * MODIFIED BY Jon Vile http://www.guidedelearing.com May 2009
 */
var myCanvas;
var stuff;
var context;
var erase;
//if (browser.isIE) {
//	document.onmouseup = onMouseUpMyCanvasIE;
//}
function createIEOverlay() {
	if (!myCanvas) {
		myCanvas = document.createElement('div');
		document.getElementById('annotator').appendChild(myCanvas);
		myCanvas.style.position="absolute";
		myCanvas.style.left="0px";
		myCanvas.style.top="0px";
		myCanvas.style.width= document.getElementById('annotator').scrollWidth + 'px';
		myCanvas.style.height= document.getElementById('annotator').scrollHeight + 'px';
		myCanvas.style.zIndex="999999";
		document.getElementById('annotator').style.border = "1px dotted #FFB300";
		myCanvas.onmousedown =  onMouseDownMyCanvasIE;
		myCanvas.onmouseup = onMouseUpMyCanvasIE;
		myCanvas.onmousemove =  onMouseMoveOnMyCanvasIE;
		myCanvas.style.backgroundColor = "white";
		myCanvas.style.filter = "alpha(Opacity=0)";
     	} else {
	       document.getElementById('annotator').style.border = '1px dotted #FFB300';
	       myCanvas.style.display='block';
		for (i=0;i<document.all.length;i++) {
			if (document.all[i].tagName == 'line') {
				document.all[i].style.display = 'block';
			}
		}
     		}

}
 function createCanvasOverlay(color, canvasContainer)
 {
    if (!myCanvas)
    {
	//canvasContainer = document.body;
      if (!canvasContainer)
      {
        canvasContainer = document.createElement('div'); 
        document.getElementById("annotator").appendChild(canvasContainer);
        canvasContainer.style.position="absolute";
        canvasContainer.style.left="0px";
        canvasContainer.style.top="0px";
        canvasContainer.style.width= document.getElementById("annotator").scrollWidth + 'px';
        canvasContainer.style.height= document.getElementById("annotator").scrollHeight + 'px';
        canvasContainer.style.zIndex="999999";
	canvasContainer.style.border = "1px dotted #FFB300";
        superContainer=document.body;
      }
      //else
        superContainer=canvasContainer;
      
      // Part of block below is inspired by code from Google excanvas.js
      {
      	myCanvas = document.createElement('canvas');    
      	canvasContainer.appendChild(myCanvas);
        myCanvas.style.width= document.getElementById("annotator").scrollWidth + 'px';
       	myCanvas.style.height= document.getElementById("annotator").scrollHeight + 'px';
      	myCanvas.width=superContainer.scrollWidth;
      	myCanvas.height=superContainer.scrollHeight;    
     	myCanvas.style.overflow = 'visible';
      	myCanvas.style.position = 'absolute';
      }
      	context=myCanvas.getContext('2d');
     
      	context.lineWidth=2;                 // 4 pixels thickness    
	context.strokeStyle = "#FFB300";
      	context.fillStyle = '#FFB300';

      	myCanvas.onmousedown =  onMouseDownMyCanvas;
      	myCanvas.onmouseup = onMouseUpMyCanvas;
     	myCanvas.onmousemove =  onMouseMoveOnMyCanvas;
    }
    else
      myCanvas.parentNode.style.display='block';
      
 }

function onMouseDownMyCanvas(event) {
	stuff = 1;
}
function onMouseUpMyCanvas(event) {
	stuff = 0;
	if (document.getElementById("ann_undo")) {
	document.getElementById("ann_undo").disabled = false;
	}

}


strX = 0;
strY = 0;

function onMouseDownMyCanvasIE(event) {
	stuff = 1;
	strX = window.event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
	strY = window.event.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
	if (myCanvas) {
		myCanvas.style.cursor='crosshair';
	}
}
function onMouseUpMyCanvasIE(event) {
	if (stuff = 1) {
			document.selection.empty();
        if (document.getElementById("ann_undo")) {
			document.getElementById("ann_undo").disabled = false;
	}

	}
	stuff = 0;
	if (myCanvas) {
		myCanvas.style.cursor='crosshair';
	}
}
var lines_array = Array();
function onMouseMoveOnMyCanvasIE(event) {
	if (myCanvas.style.display != 'none') {
		
		var mouseX = window.event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
		var mouseY = window.event.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
		if (stuff == 1) {	
			MyLine = document.createElement("v:line");
			obj = document.body.appendChild(MyLine);
			obj.style.position = 'absolute';
			obj.style.left = '0px';
			obj.style.top =  '0px';;
			obj.unselectable = "on"
			obj.strokecolor = '#ffb300';
			obj.strokeweight = '2px';
			tmpvar = 'theid'+lines_array.length;
			obj.id = tmpvar;
			lines_array.push(tmpvar);
			obj.from = strX+','+strY;
			obj.to = mouseX + ',' + mouseY;
			strX = mouseX;
			strY = mouseY;
			document.selection.empty();

		}
	}
}
function onMouseMoveOnMyCanvas(event)
  {
    if (myCanvas.style.display != 'none') {
	var mouseX = event.layerX;
	var mouseY = event.layerY;
	if (stuff == 0) {
		 myCanvas.pathBegun=false;
	}
    if (stuff == 1) {
      if (myCanvas.pathBegun==false)
      {
        context.beginPath();
        myCanvas.pathBegun=true;
      }
     else
      {
	if (erase) {
	context.clearRect(mouseX-15,mouseY-15,30,30);
	} else {
  	context.lineTo(mouseX, mouseY);	
        context.stroke();
	}
      }
     }
    }
  }

  function onMouseClickOnMyCanvas(event)
  {
    myCanvas.drawing=!myCanvas.drawing;
    // reset the path when starting over
    if (myCanvas.drawing)
      myCanvas.pathBegun=false;
  }
 
 function hideCanvas()
 {
    if (myCanvas)
    {
      myCanvas.parentNode.style.display='none';
    }
 }
  function hideIECanvas()
  {
     if (myCanvas)
     {
       document.getElementById('annotator').style.border = '';
       myCanvas.style.display='none';
	for (i=0;i<document.all.length;i++) {
		if (document.all[i].tagName == 'line') {
			document.all[i].style.display = 'none';
		}
	}
     }
 }

function do_undo_annotate() {
	if (browser.isIE) {
		lastline = lines_array.pop();
		document.getElementById(lastline).removeNode(true);
		if (lines_array.length == 0) {
			        if (document.getElementById("ann_undo")) {
					document.getElementById('ann_undo').disabled = true;
				}
		}
	} else {
		if (erase) {
			 document.getElementById('ann_undo').value = "Eraser";
			erase = 0;
		} else {
			document.getElementById('ann_undo').value = "Pencil";
			erase = 1;
		}
//		context.strokeStyle = "#FFFFFF";
//		context.beginPath();     	
//		context.moveTo(startX,startY);
//		context.lineTo(endX,endY);
//		context.stroke();
//		context.strokeStyle = "#FFB300";
	
		//canvas func
	}
}

 flag = 0;
function do_annotate() {
	if (flag) {
		flag = 0;
		document.getElementById("ann_button").innerHTML = "Turn on underline";
		document.getElementById("ann_undo").style.display = "none";
		document.getElementById("ann_undo").disabled = true;
		if (browser.isIE) {
			hideIECanvas();
		} else {
			hideCanvas();
		}
		
	} else {
		flag = 1;
		document.getElementById("ann_button").innerHTML = "Turn off";
		if (browser.isIE) {
			document.getElementById("ann_undo").style.display = "none";
			createIEOverlay();
			myCanvas.style.cursor='crosshair';
		} else {
			document.getElementById("ann_undo").style.display = "inline";
			document.getElementById('ann_undo').value = "Eraser";
			createCanvasOverlay('rgba(0,0,0,0)');
			myCanvas.parentNode.style.cursor='crosshair';
		}
	}
}