<html>
	<head>
			<meta charset="UTF-8"/>
	</head>
	<body>
	
	<table>
		<tr>
			<td>
				<canvas id='a' width='600' height='600' style='border:2px solid black;'>
				</canvas>
			</td>
			<td valign="top">
				<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.<br>

					<form>
					
					Function: 
					<select id="function" name="function" >

							<option value="T1">Translate 1</option>
							<option value="T2">Translate 2</option>
							<option value="T3">Translate 3</option>
							<option value="T4">Translate 4</option>
							<option value="RP">Rotate +</option>
							<option value="RN">Rotate -</option>
							<option value="S1">Scale 0.25</option>
							<option value="S2">Scale 0.50</option>
							<option value="S3">Scale 1.00</option>
							<option value="S4">Scale 2.00</option>
							<option value="S5">Scale 3.00</option>
							<option value="S6">Scale 4.00</option>
							<option value="D1">Draw R</option>
							<option value="D2">Draw G</option>
							<option value="D3">Draw B</option>

					</select>			
					<button type="button" onclick="newbutton();">NEW</button>
					
					<br>Operations:<br> 
					<select style="width:150px;" size="20" id="operations" name="operations">
					</select>			
					
					<br>
					<button type="button" onclick="moveupbutton();">MOVE UP</button>
					<button type="button" onclick="movedownbutton();">MOVE DOWN</button>
					<button type="button" onclick="deletebutton();">DELETE</button>
					<br>
							
					</form>		

					</div>
				</div>
			</td>			
		</tr>
	</table>	

	<br>
	
	
	
	</div>

	<script lang='Javascript'>

/*

		// Cutouts from v3

		function drawcircle(radius,color)
		{
				context.lineWidth   = 1.5;
				context.strokeStyle = color;
				context.arc(0, 0, radius, 0 , 2 * Math.PI, false);
		}
		
		function point(x,y)
		{
				context.rect(x,y,2,2);
		}

		// x' = x cos f - y sin f  Base sin rotation formula
		// y' = y cos f + x sin f

		// context.bezierCurveTo(-15,10,10,20,10,30);
		// context.bezierCurveTo(10,10,15,10,30,0);

		function sundial(radius,angle,scale)
		{
				
					cosv=Math.cos(angle);
					sinv=Math.sin(angle);
										
					yaddx=scale*cosv;
					yaddy=scale*sinv;
					
					xaddx=-scale*sinv;
					xaddy=scale*cosv;

					xk=cosv*radius;
					yk=sinv*radius;

					context.bezierCurveTo((-1.5*xaddx)+(yaddx*1.5)+xk,(-1.5*xaddy)+(yaddy*1.5)+yk,xaddx+(yaddx*2.0)+xk,xaddy+(yaddy*2.0)+yk,xaddx+(yaddx*3.0)+xk,xaddy+(yaddy*3.0)+yk);
					context.bezierCurveTo(xaddx+yaddx+xk,xaddy+yaddy+yk,(1.5*xaddx)+yaddx+xk,(1.5*xaddy)+yaddy+yk,(3.0*xaddx)+xk,(3.0*xaddy)+yk);
		}

		function drawsun()
		{
				context.fillStyle = "#fe9";
				context.strokeStyle = "#d82";
				context.lineWidth   = 1.5;
								 
				context.beginPath();
				context.moveTo(30,0);
				for(i=0.0;i<360.0;i+=22.5){
						angle=(i/360.0)*2*Math.PI;
						sundial(30,angle,3);
				}
				context.stroke();
				context.fill();															
		}
		
		
		
		function drawball(cx,cy,radie,innerradie,ballradie,col1,inangle,inangleadd)
		{
					
					angleadd=(inangleadd/360.0)*2*Math.PI;
					
					context.fillStyle = col1;					
					context.beginPath();
					context.arc(cx,cy,radie,0,Math.PI*2.0,1.0);												
					context.stroke();															
					
					context.fillStyle = col1;					
					
					for(i=0;i<360;i+=inangle){
														
							angle=(i/360.0)*2*Math.PI;
							angle2=angle+angleadd;
							angle3=angle+(angleadd*2.0);
							angle4=angle-angleadd;

							cosv=Math.cos(angle);
							sinv=Math.sin(angle);

							cosv2=Math.cos(angle2);
							sinv2=Math.sin(angle2);

							cosv4=Math.cos(angle4);
							sinv4=Math.sin(angle4);
							
							context.beginPath();

							context.moveTo(cx,cy);
							context.quadraticCurveTo(cx+(cosv*innerradie),cy+(sinv*innerradie),cx+(cosv2*radie),cy+(sinv2*radie));							
							context.arc(cx,cy,radie,angle2,angle,1.0);
							context.quadraticCurveTo(cx+(cosv4*innerradie),cy+(sinv4*innerradie),cx,cy);							
														
							context.fill();															
							
					}	
								
		}
*/
		
		var mx=100,my=100,clickstate=0;
		
		function newbutton()
		{
				var funclist;
				var oplist;
				
				funclist=document.getElementById('function');
				oplist=document.getElementById('operations');
				
				oplist.innerHTML+="<option value='"+funclist.options[funclist.selectedIndex].value+"'>"+funclist.options[funclist.selectedIndex].text+"</option>";
								
		}
		
		function deletebutton()
		{
				var elSel = document.getElementById('operations');
  			var i=0;
  			for (i=elSel.length-1;i>=0;i--) {
    				if (elSel.options[i].selected) {
      				elSel.remove(i);
    				}
  			}
		}
		
		function moveupbutton()
		{
				var elSel = document.getElementById('operations');
				var ind=elSel.selectedIndex;
				var val;
				var tex;

				if(elSel.selectedIndex>0){
						
						val=elSel.options[ind].value;
						tex=elSel.options[ind].text;

						elSel.options[ind].value=elSel.options[ind-1].value;
						elSel.options[ind].text=elSel.options[ind-1].text;
						
						elSel.options[ind-1].value=val;
						tex=elSel.options[ind-1].text=tex;
							
						elSel.selectedIndex--;				
				}
		}

		function movedownbutton()
		{
				var elSel = document.getElementById('operations');
				var ind=elSel.selectedIndex;
				var val;
				var tex;

				if(elSel.selectedIndex<elSel.length-1){
						
						val=elSel.options[ind].value;
						tex=elSel.options[ind].text;

						elSel.options[ind].value=elSel.options[ind+1].value;
						elSel.options[ind].text=elSel.options[ind+1].text;
						
						elSel.options[ind+1].value=val;
						tex=elSel.options[ind+1].text=tex;
							
						elSel.selectedIndex++;				
				}
				
		}

		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");		

		acanvas.addEventListener('mousemove', ev_mousemove, false);
		acanvas.addEventListener('mouseup', ev_mouseup, false);
		acanvas.addEventListener('mousedown', ev_mousedown, false);
		
		setTimeout("foo();",100);
		
		function drawcircle(radius,color)
		{
				context.lineWidth   = 1.5;
				context.strokeStyle = color;
				context.arc(0, 0, radius, 0 , 2 * Math.PI, false);
		}
		
		function point(x,y)
		{
				context.rect(x,y,2,2);
		}

		// x' = x cos f - y sin f  Base sin rotation formula
		// y' = y cos f + x sin f

		// context.bezierCurveTo(-15,10,10,20,10,30);
		// context.bezierCurveTo(10,10,15,10,30,0);

		function sundial(radius,angle,scale)
		{
				
					cosv=Math.cos(angle);
					sinv=Math.sin(angle);
										
					yaddx=scale*cosv;
					yaddy=scale*sinv;
					
					xaddx=-scale*sinv;
					xaddy=scale*cosv;

					xk=cosv*radius;
					yk=sinv*radius;

					context.bezierCurveTo((-1.5*xaddx)+(yaddx*1.5)+xk,(-1.5*xaddy)+(yaddy*1.5)+yk,xaddx+(yaddx*2.0)+xk,xaddy+(yaddy*2.0)+yk,xaddx+(yaddx*3.0)+xk,xaddy+(yaddy*3.0)+yk);
					context.bezierCurveTo(xaddx+yaddx+xk,xaddy+yaddy+yk,(1.5*xaddx)+yaddx+xk,(1.5*xaddy)+yaddy+yk,(3.0*xaddx)+xk,(3.0*xaddy)+yk);
		}

		function drawsun()
		{
				context.fillStyle = "#fe9";
				context.strokeStyle = "#d82";
				context.lineWidth   = 1.5;
								 
				context.beginPath();
				context.moveTo(30,0);
				for(i=0.0;i<360.0;i+=22.5){
						angle=(i/360.0)*2*Math.PI;
						sundial(30,angle,3);
				}
				context.stroke();
				context.fill();															
		}
		
		var v=0;

		function foo()
		{
				acanvas.width = acanvas.width;				
				
				v+=0.1;

				context.translate(300,300);
				context.save(); 
				                
				var elSel = document.getElementById('operations');
  			var i=0;
  			for (i=0;i<=elSel.length-1;i++) {
						if(elSel.options[i].value=="T1"){
									context.translate(100,0);
						}if(elSel.options[i].value=="T2"){
									context.translate(150,0);
						}if(elSel.options[i].value=="T3"){
									context.translate(200,0);
						}if(elSel.options[i].value=="RP"){
									context.rotate(v);
						}if(elSel.options[i].value=="RN"){
									context.rotate(-v);
						}if(elSel.options[i].value=="S1"){
									context.scale(0.25,0.25);
						}if(elSel.options[i].value=="S2"){
									context.scale(0.5,0.5);
						}if(elSel.options[i].value=="S3"){
									context.scale(0.75,0.75);
						}if(elSel.options[i].value=="S4"){
									context.scale(1.5,1.5);
						}if(elSel.options[i].value=="D1"){
								context.beginPath();
								drawcircle(40,'#f84');
								context.stroke();
						}if(elSel.options[i].value=="D2"){
								context.beginPath();
								drawcircle(40,'#4f8');
								context.stroke();
						}if(elSel.options[i].value=="D3"){
								context.beginPath();
								drawcircle(40,'#84f');
								context.stroke();
						}
  			}

  			

				// Must count saves
				// Restore equal amount of times
				
/*
				context.beginPath();
				drawcircle(40,'#f0f');
				
				context.lineWidth   = 0.5;

				context.moveTo(0,0);
				context.rect(0,0,30,30);

				context.stroke();
*/
				context.restore();
				context.globalAlpha = 0.5				
				context.rotate(-v*0.6);								
				drawsun();

				setTimeout("foo();",100);
				
	  }
	  
	  
					
	</script>

	</body>
</html>
