<html>
	<head>
			<meta charset="UTF-8"/>

			<script type="text/javascript" src="../../../../js/dugga.js"></script>
			<script type="text/javascript" src="../../../../js/jquery-1.8.0.min.js"></script>
			
	<script lang='Javascript'>
		
		// User Interface Variables
		var mx=100,my=100,clickstate=1;
		
		// Application state variables
		var v=0,vv=0;
		
		// Handlers for clicks -- works equally on touch and keyboard+mouse devices
		function handler_mouseup()
		{
				if(clickstate==0){
						clickstate=1
				}else if(clickstate==1){
						clickstate=2
						v=0;
				}else{
						clickstate=0;
						v=0;
				}
		}

		function handler_mousedown()
		{
		}
		
		function handler_mousemove(cx,cy)
		{
		
		}		
		
		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 foo()
		{
				acanvas.width = acanvas.width;				
				
				if(clickstate==0){
						v+=0.1;
				}else if(clickstate==1){
						v+=0.02;
				}

				context.translate(300,300);
				context.save(); 
				                
				var elSel = document.getElementById('operations');
  			var i=0;
  			
  			var pushcount=0;
  			
  			for (i=0;i<=elSel.length-1;i++) {
						if(elSel.options[i].value=="T1"){
									context.translate(35,0);
						}if(elSel.options[i].value=="T2"){
									context.translate(55,0);
						}if(elSel.options[i].value=="T3"){
									context.translate(90,0);
						}if(elSel.options[i].value=="T4"){
									context.translate(120,0);
						}if(elSel.options[i].value=="T5"){
									context.translate(160,0);
						}if(elSel.options[i].value=="T6"){
									context.translate(200,0);
						}if(elSel.options[i].value=="T7"){
									context.translate(240,0);
						}if(elSel.options[i].value=="T8"){
									context.translate(280,0);
						}if(elSel.options[i].value=="RP"){
									context.rotate(v);
						}if(elSel.options[i].value=="RN"){
									context.rotate(-v);
						}if(elSel.options[i].value=="RP2"){
									context.rotate(v*2.0);
						}if(elSel.options[i].value=="RN2"){
									context.rotate(-v*2.0);
						}if(elSel.options[i].value=="RP3"){
									context.rotate(v*3.0);
						}if(elSel.options[i].value=="RN3"){
									context.rotate(-v*3.0);
						}if(elSel.options[i].value=="S1"){
									context.scale(0.30,0.30);
						}if(elSel.options[i].value=="S2"){
									context.scale(0.40,0.40);
						}if(elSel.options[i].value=="S3"){
									context.scale(0.60,0.60);
						}if(elSel.options[i].value=="S4"){
									context.scale(0.80,0.80);
						}if(elSel.options[i].value=="S5"){
									context.scale(1.20,1.20);
						}if(elSel.options[i].value=="D1"){
								drawball(0,0,30,20,10,"#f84",45.0,22.5);
//		function drawball(cx,cy,radie,innerradie,ballradie,col1,inangle,inangleadd)
						}if(elSel.options[i].value=="D2"){
								drawball(0,0,30,20,10,"#4f8",45.0,22.5);
						}if(elSel.options[i].value=="D3"){
								drawball(0,0,30,20,10,"#84f",45.0,22.5);
						}if(elSel.options[i].value=="PUSH"){
								// Must count saves
								context.save();
								pushcount++;
						}if(elSel.options[i].value=="POP"){
								if(pushcount>0){
										context.restore();
								}
						}
  			}

				// Restore equal amount of times
				for(i=0;i<pushcount;i++){
						context.restore();
				}
  			
				context.restore();
				context.globalAlpha = 0.5				
				context.rotate(-v*0.6);								
				drawsun();

				setTimeout("foo();",50);
				
	  }
	  
	</script>			

	</head>

	<body onload="setupcanvas();">
	
	<table>
		<tr>
			<td valign="top">
				<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:650;">
					<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="T5">Translate 5</option>
							<option value="T6">Translate 6</option>
							<option value="T7">Translate 7</option>
							<option value="T8">Translate 8</option>
							<option value="RP">Rotate +</option>
							<option value="RP2">Rotate +2</option>
							<option value="RP3">Rotate +3</option>
							<option value="RN">Rotate -</option>
							<option value="RN2">Rotate -2</option>
							<option value="RN3">Rotate -2</option>
							<option value="S1">Scale 0.3</option>
							<option value="S2">Scale 0.4</option>
							<option value="S3">Scale 0.6</option>
							<option value="S4">Scale 0.8</option>
							<option value="S5">Scale 1.2</option>
							<option value="D1">Draw R</option>
							<option value="D2">Draw G</option>
							<option value="D3">Draw B</option>
							<option value="PUSH">Push (remember state)</option>
							<option value="POP">Pop (jump back)</option>

					</select>			
					<button type="button" onclick="newbutton();">NEW</button>
					
					<br>Operations:<br> 
					<select style="width:150px;" size="30" 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>

	</body>
</html>
