<html>
	<body>
	
	<table>
		<tr>
			<td>
				<canvas id='a' width='600' height='450' style='border:2px solid black;'>
				</canvas>
			</td>
			<td>
				<div style="border:2px solid black;background-color:#fed;width:300;height:450;">
					<div id="infobox" style="padding:4px;">
					Change values in form to update curve and information box.
					</div>
				</div>
			</td>			
		</tr>
	</table>	

	<form>
	
	Function: 
	<select id="function" name="function" onchange="dataentry(this.options[this.selectedIndex].value,this.options[this.selectedIndex].label);">
			<option value="Func">Linear</option>
			<option value="Func">Step</option>
			<option value="Func">Smoothstep</option>
	</select>			
	<br>
	

			
	</form>		
	<br>
	
	
	
	</div>

	<script lang='Javascript'>
		
		var mx=100,my=100,clickstate=0;

		function ev_mouseup(ev)
		{
				clickstate=0;
		}
		
		function ev_mousedown(ev)
		{
				clickstate=1;
		}
		
		function ev_mousemove (ev) 
		{
				if(clickstate==1){
					  if (ev.layerX||ev.layerX==0) { // Firefox
						    mx=ev.layerX-acanvas.offsetLeft;
						    my=ev.layerY-acanvas.offsetTop;
					  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
						    mx=ev.offsetX-acanvas.offsetLeft;
						    my=ev.offsetY-acanvas.offsetTop;
					  }
				}		
		}

		var acanvas=document.getElementById('a');
		var context=acanvas.getContext("2d");		

		// Mouse Events
		acanvas.addEventListener('mousemove', ev_mousemove, false);
		acanvas.addEventListener('mouseup', ev_mouseup, false);
		acanvas.addEventListener('mousedown', ev_mousedown, false);

		// Touch Events
		acanvas.addEventListener('touchstart', ev_touchstart, false);
		acanvas.addEventListener('touchend', ev_touchend, false);
		acanvas.addEventListener('touchmove', ev_touchmove, false);

/*

Single Touch Works!

Multi Touch Enabled:

for (var i = 0; i < event.touches.length; i++) {
    var touch = event.touches[i];
    ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
}


*/

		// Touch start event
		function ev_touchstart(event){  
    		event.preventDefault();  
     		var numtouch = event.touches.length;  
     		clickstate=1;  
		};  

		// Touch end event
		function ev_touchend(event){  
    		event.preventDefault();  
     		var numtouch = event.touches.length;  
				clickstate=0;
		};  
		
		// Touch move event
		function ev_touchmove(event){  
    		event.preventDefault();  
     		var numtouch = event.touches.length;  

				targetEvent =  event.touches.item(0);
//				mx = targetEvent.clientX;
//				my = targetEvent.clientY;

				mx = targetEvent.pageX;
				my = targetEvent.pageY;
		};  
		
		setTimeout("foo();",20);
		

		function foo()
		{
				context.clearRect(0,0,600,600);
				
				context.strokeStyle = '#000';
				context.lineWidth   = 1.5;
				if(clickstate==1){
						context.beginPath();
						context.moveTo(0,0);
						context.lineTo(mx,my);
						context.stroke();	
				}

				setTimeout("foo();",100);
				
	  }
	  
					
	</script>

	</body>
</html>
