var layer1;
		var layer2;
		var ctx1;
		var ctx2;

		var lx = 200;
		var rx = 200;
		var counter=0;
		var h=200;
		var k=100;
		var r=90;
		var pi = Math.PI;
		var tau = Math.PI*2;
		var rot = 0;
		var shift = 0;
		var refreshIntervalId;
		
		function init(){
			layer1 = document.getElementById("layer1");
			ctx1 = layer1.getContext("2d");
			layer2 = document.getElementById("layer2");
			ctx2 = layer2.getContext("2d");
			
			refreshIntervalId = setInterval(drawAll, 30);		  
		}
		
		function drawAll(){
			draw1();
			draw2();
		}	
		
		function draw1(){
			ctx1.clearRect(0,0,400,200);
			
			var leftgrad = ctx1.createRadialGradient(lx,k,0,lx,k,r);  
						  leftgrad.addColorStop(0, '#ff3300');
						  leftgrad.addColorStop(.45-.25*Math.cos(tau*rot/360), '#ff6600');
						  leftgrad.addColorStop(0.9, '#FFAA00');  
						  leftgrad.addColorStop(1, 'rgba(1,159,98,0)');  
			
			var rightgrad = ctx1.createRadialGradient(rx,k,0,rx,k,r); 	 
						  rightgrad.addColorStop(0, '#ff3300');
						  rightgrad.addColorStop(.45-.25*Math.cos(tau*rot/360), '#ff6600');
						  rightgrad.addColorStop(0.9, '#FFAA00');  
						  rightgrad.addColorStop(1, 'rgba(1,159,98,0)');  
	
			ctx1.fillStyle=leftgrad;
			ctx1.beginPath();
			ctx1.arc(lx,k,r,pi/2,3*pi/2,false);
			ctx1.bezierCurveTo(h+counter/4, 000, h+counter/4, 200, lx, k+r);
			ctx1.closePath();
			ctx1.fill();

			ctx1.fillStyle=rightgrad;
			ctx1.beginPath();
			ctx1.arc(rx,k,r,pi/2,3*pi/2,true);
			ctx1.bezierCurveTo(h-counter/4, 000, h-counter/4, 200, rx, k+r);
			ctx1.closePath();
			ctx1.fill();

			counter = 45 - 45 * Math.cos(tau * rot/360);
			
			rx=200+counter;
			lx=200-counter;
		}
		
		function draw2(){	
			ctx2.clearRect(0,0,400,200);
			var grad1 = ctx2.createLinearGradient(0,0,400,0);  
						  grad1.addColorStop(0, '#FFFFFF');
						  grad1.addColorStop(0.5, '#006699');
						  grad1.addColorStop(1, '#000000');			

		
			ctx2.textAlign = "center";
			ctx2.textBaseline = "middle";		
			ctx2.fillStyle=grad1;
	
//Text		
			if(shift==0){
				ctx2.strokeStyle="rgb(33,33,66)";
				ctx2.font = "italic 36pt Times New Roman";  
				ctx2.strokeText("log (xy)",h+3,k-5);
				ctx2.fillText("log (xy)",h+3,k-5);
				
				ctx2.font = "italic 20pt Times New Roman";  
				ctx2.strokeText("b", h-4,k+13);
				ctx2.fillText("b", h-4, k+13);			
			}
			
			if(shift>0){
				drawLogb(h-shift/25*65,shift);
				drawLogb(h+shift/25*115,shift);
			
				ctx2.font = "italic 36pt Times New Roman";  
				ctx2.strokeText("x",(h+28)-shift*3,k-5);
				ctx2.fillText("x",(h+28)-shift*3,k-5);			
				ctx2.strokeText("y",(h+49)+shift/25*85,k-5);
				ctx2.fillText("y",(h+49)+shift/25*85,k-5);

				if(shift < 23){
					ctx2.font = "italic "+(36-36*shift/25)+"pt Times New Roman";  
					ctx2.strokeText("(",h+10,k-5);
					ctx2.fillText("(",h+10,k-5);			
					ctx2.strokeText(")",h+68,k-5);
					ctx2.fillText(")",h+68,k-5);
				}
			}
//Pause			
			if(shift == 0 || shift == 25){
				 clearInterval(refreshIntervalId);
				 refreshIntervalId = setInterval(drawAll, 3000);
			}

			else{
				 clearInterval(refreshIntervalId);
				 refreshIntervalId = setInterval(drawAll, 10);
				 }
		
			rot = (rot + 1)%360;
			shift = 12.5 - 12.5 * Math.cos(tau * rot/360);
		}
		
		function drawLogb(xpo,shift){
			//log				
				ctx2.font = "italic 36pt Times New Roman";  
				ctx2.strokeText("log",xpo-40,k-5);
				ctx2.fillText("log",xpo-40,k-5);
			//b				
				ctx2.font = "italic 20pt Times New Roman";  
				ctx2.strokeText("b", xpo-4,k+13);
				ctx2.fillText("b", xpo-4, k+13);			
			
				if(shift > 2){
					ctx2.font = "italic "+(shift)+"pt Times New Roman";  
					ctx2.strokeText("+",xpo-80,k-5);
					ctx2.fillText("+",xpo-80,k-5);
				}					
			}