var canvas;
		var ctx;
		var tau = Math.PI * 2;
		var ucx = 300;  //Unit Circle x
		var ucy = 300;	//Unit Circle y
		var ucr = 250;	//Unit Circle radius :actually ucr+cor
		var cor = 25;	//Coordinate Circle radius
		var ucdeg = 0;  //radius for degree display
		var ucrad = 0; //radius for radians display
		var uctau = 0; //radius for radians display
		var osc = 0;	//oscillator 0-360
		var ucdata = new Array(
						new Array(0,30,45,60,90,120,135,150,180,210,225,240,270,300,315,330,360,0),
						new Array(0,1,1,1,1,2,3,5,1,7,5,4,3,5,7,11,2,0),
						new Array(1,6,4,3,2,3,4,6,1,6,4,3,2,3,4,6,1,0),
						new Array(0,1,1,1,1,1,3,5,1,7,5,2,3,5,7,11,1,0),
						new Array(1,12,8,6,4,3,8,12,2,12,8,3,4,6,8,12,1,0),
						new Array(1,3,2,1,0,1,2,3,1,3,2,1,0,1,2,3,1,0),
						new Array(0,1,2,3,1,3,2,1,0,1,2,3,1,3,2,1,0,0),
						new Array(1,1,1,1,0,-1,-1,-1,-1,-1,-1,-1,0,1,1,1,1,0),
						new Array(0,1,1,1,1,1,1,1,0,-1,-1,-1,-1,-1,-1,-1,0,0)
						);
		
		var refreshIntervalId;
		
		function init() {
		  canvas = document.getElementById("canvas");
		  ctx = canvas.getContext("2d");
		  refreshIntervalId = setInterval(draw, 10);		  
		 }	
		
		function draw(){
			ctx.clearRect(0,0,600,600);
			unitCircle(ucx, ucy, ucr+cor);
			
			for(var i = -1; i < 16; i++){
				coord(i, cor);
				degree(i,10+10*Math.cos(tau*osc/360));
				radian(i,10+10*Math.cos(tau*((osc+120)%360)/360)); 
				tauradian(i,10+10*Math.cos(tau*((osc+240)%360)/360)); 
			}
		
			ucdeg = (ucr-20)/2+(ucr-50)/2*Math.sin(tau*osc/360); 
			ucrad = (ucr-20)/2+(ucr-50)/2*Math.sin(tau*((osc+120)%360)/360);  
			uctau = (ucr-20)/2+(ucr-50)/2*Math.sin(tau*((osc+240)%360)/360);  

		}
		
		function unitCircle(h,k,r) {
			osc=(osc+1)%360;
			var radgrad = ctx.createRadialGradient(h,k,0,h,k,r);  
						  radgrad.addColorStop(0, 'rgb(0,0,0)');
						  //radgrad.addColorStop(0.1, '#000000');
						  radgrad.addColorStop(.45+.35*Math.sin(tau*osc/360), 'rgba(0,204,255,.5)');
						  //radgrad.addColorStop(0.8, '#00CCFF');
						  radgrad.addColorStop(0.9, '#FFFFFF');
						  radgrad.addColorStop(1, 'rgba(255,255,255,0)');
		
			ctx.fillStyle=radgrad;
			ctx.beginPath();
			ctx.arc(h,k,r,0,tau,true);
			ctx.closePath();
			ctx.fill();
			}

		function coord(pos, size){
			var x = ucx + (ucr)*Math.cos(ucdata[0][pos]*tau/360);
			var y = ucy - (ucr)*Math.sin(ucdata[0][pos]*tau/360);
			
			if(pos < 0){
						x=ucx;
						y=ucy;
			}
			
			var grad = ctx.createRadialGradient(x,y,0,x,y,size);  
						  grad.addColorStop(0, 'rgba(255,255,255,.5)');
						  grad.addColorStop(.4+.4*Math.sin(tau*osc/360), 'rgba(255,255,255,.5)');
						  grad.addColorStop(.9, 'rgba(127,127,127,.5)');
						  grad.addColorStop(.9, 'rgba(127,127,127,.5)');
						  grad.addColorStop(1, 'rgba(0,0,0,.75)');
		
			ctx.fillStyle = grad;
			ctx.beginPath();
			ctx.arc(x, y, size, 0, tau, true);
			ctx.closePath();
			ctx.fill();
			
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";		
			ctx.fillStyle='rgb(0,0,0)';
		
			if(pos < 0){
			ctx.font = "18pt Times New Roman"; 
			ctx.fillText("0, 0", ucx, ucy);
			return;
			}
			
			if(ucdata[5][pos]*ucdata[6][pos] == 0){
				ctx.font = 18 * size / 25 +"pt Times New Roman"; 
				ctx.fillText(ucdata[7][pos]+", "+ucdata[8][pos], x, y);
				}
			if(ucdata[5][pos]*ucdata[6][pos] != 0){
				ctx.font = 18 * size / 25 +"pt Times New Roman";  
				ctx.fillText(",", x+2, y+5);
				ctx.font = 12 * size / 25 +"pt Times New Roman";
			
				ctx.fillText(" _    _", x, y-6);
				ctx.fillText(" 2    2", x, y+10);
				
				if(ucdata[5][pos] > 1){
				ctx.fillText("\u221A"+ucdata[5][pos],x-12,y-6);
				ctx.fillText("_", x-8, y-23);
					if(ucdata[7][pos] == -1){
					ctx.fillText("-", x-18, y-13);
					}
				}
				
				if(ucdata[6][pos] > 1){
				ctx.fillText("\u221A"+ucdata[6][pos],x+10,y-6);
				ctx.fillText("_", x+14, y-23);
				if(ucdata[8][pos] == -1){
					ctx.fillText("-", x+4, y-13);
					}
				}
				
				if(ucdata[5][pos] == 1){
				ctx.fillText("1",x-10,y-6);
					if(ucdata[7][pos] == -1){
					ctx.fillText("-", x-15, y-9);
					}
				}
				
				if(ucdata[6][pos] == 1){
				ctx.fillText("1",x+14,y-6);
					if(ucdata[8][pos] == -1){
					ctx.fillText("-", x+9, y-9);
					}
				}
			}
	}	

		function degree(pos, size){
			var x = ucx + (ucdeg)*Math.cos(ucdata[0][pos]*tau/360);
			var y = ucy - (ucdeg)*Math.sin(ucdata[0][pos]*tau/360);
			ctx.fillStyle = "#000000";
			ctx.strokeStyle = "#FFFFFF"; 
			ctx.beginPath();
			ctx.arc(x, y, size, 0, tau, true);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();	
				
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";		
			ctx.fillStyle='rgb(255,255,255)';
			ctx.font = 12 * size / 20 +"pt Times New Roman";  
		
			ctx.fillText(ucdata[0][pos]+"\xB0", x,y);

		}
		
		function radian(pos, size){
			var x = ucx + (ucrad)*Math.cos(ucdata[0][pos]*tau/360);
			var y = ucy - (ucrad)*Math.sin(ucdata[0][pos]*tau/360);
			var scale = size/20;
			ctx.fillStyle = "#FFFFFF";
			ctx.strokeStyle = "#000000"; 
			ctx.beginPath();
			ctx.arc(x, y, size, 0, tau, true);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();	
				
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";		
			ctx.fillStyle='rgb(0,0,0)';
			
			if(ucdata[2][pos]==1 && ucdata[1][pos]==0){
			ctx.font = 18 * size / 20 +"pt Times New Roman";  
			ctx.fillText("0", x,y+1*scale);
			}
			else if(ucdata[2][pos]==1 && ucdata[1][pos]==1){
			ctx.font = 18 * size / 20 +"pt Times New Roman";  
			ctx.fillText("\u03C0", x,y-1*scale);
			}
			else{
			ctx.font = 12 * size / 20 +"pt Times New Roman";  
			if(ucdata[1][pos]==1){
			ctx.fillText("\u03C0", x,y-7*scale);
			ctx.fillText("_", x,y-7*scale);
			}
			else{
			ctx.fillText(ucdata[1][pos]+"\u03C0", x,y-7*scale);
			ctx.fillText("__", x,y-7*scale);
			}
			ctx.fillText(ucdata[2][pos], x,y+9*scale);
			}
		}
		
		function tauradian(pos, size){
			var x = ucx + (uctau)*Math.cos(ucdata[0][pos]*tau/360);
			var y = ucy - (uctau)*Math.sin(ucdata[0][pos]*tau/360);
			var scale = size/20;
			ctx.fillStyle = "#CCCCCC";
			ctx.strokeStyle = "#000000"; 
			ctx.beginPath();
			ctx.arc(x, y, size, 0, tau, true);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();	
				
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";		
			ctx.fillStyle='rgb(0,0,0)';
			
			if(ucdata[4][pos]==1 && ucdata[3][pos]==0){
			ctx.font = 18 * size / 20 +"pt Times New Roman";  
			ctx.fillText("0", x,y+1*scale);
			}
			else{
			ctx.font = 12 * size / 20 +"pt Times New Roman";  
			if(ucdata[3][pos]==1){
			ctx.fillText("\u03C4", x,y-7*scale);
			ctx.fillText("_", x,y-7*scale);
			}
			else{
			ctx.fillText(ucdata[3][pos]+"\u03C4", x,y-7*scale);
			ctx.fillText("_", x,y-7*scale);
			}
			ctx.fillText(ucdata[4][pos], x,y+9*scale);
			}
		}