// Converts from degrees to radians.
Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};

// Converts from radians to degrees.
Math.degrees = function(radians) {
  return radians * 180 / Math.PI;
};

canvas  = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var percentage = 20;
var target = 0;
var speed = 0;
var bubbleWidth=40;
var bubbleHeight=25;
var labelAngle=0;
var angleSpeed=0;
var vForce=0;
var vPos=0;
var targetV=0;

function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == "undefined" ) {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  if (stroke) {
    //ctx.stroke();
  }
  if (fill) {
    ctx.fill();
  }        
}

function draw(){
  ctx.fillStyle="#EC5745";
  ctx.fillRect ( 0 , 0 , canvas.width, canvas.height );
  ctx.beginPath();
  ctx.strokeStyle="#FFF";
  ctx.lineWidth=3;

  ctx.moveTo(50,canvas.height/2);
  ctx.lineTo(50+percentage*(((canvas.width-50)-50)/100),canvas.height/2+vPos);
  
  ctx.stroke();
  
  ctx.beginPath();
  ctx.strokeStyle="#000000"; 
  ctx.moveTo(50+percentage*(((canvas.width-50)-50)/100),canvas.height/2+vPos);
  ctx.lineTo(canvas.width-50,canvas.height/2);
  
  ctx.stroke();
  ctx.save();
  ctx.translate(50+(percentage*((canvas.width-50)-50)/100),canvas.height/2+vPos-2)
  ctx.rotate(Math.radians(labelAngle));
  drawBubble();
  ctx.restore();
}



function drawBubble(){
  ctx.fillStyle="#FFFFFF";
  ctx.lineStyle="#FFFFFF";
  ctx.lineWidth=1;
  ctx.moveTo(0,0)
  
  ctx.beginPath();
  ctx.lineTo(-10,-10);
  ctx.lineTo(10,-10);
  ctx.lineTo(0,0);
  ctx.fill();
  ctx.closePath();
  
  roundRect(ctx,-bubbleWidth/2,-bubbleHeight/2-20,bubbleWidth,bubbleHeight,3,"#FFFFFF");
  
  ctx.font = "12px Helvetica";
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.fillText(Math.floor(percentage)+"%", 0, -15);
  
  
}


function update(){
  speed=((target-percentage)/20);
  percentage+=speed;
  
  
  
  labelAngle+=-speed*10;
  if(labelAngle<-20) labelAngle=-20;
  if(labelAngle>20) labelAngle=20;
  if(Math.abs(speed)<1){
   
    angleSpeed-=labelAngle/20;
    angleSpeed*=.9;
  }
  labelAngle+=angleSpeed;
  
  targetV=20-(Math.abs(percentage-50)/50*20);
  //vForce+=Math.abs(speed*100);
  vForce+=Math.abs(labelAngle/2)+(targetV-vForce)*.8;
  
  vPos=vForce;
  
}

function randPoint(){
  target=Math.floor(Math.random()*100);
  
}

setInterval( draw, 1000/60);
setInterval( update, 1000/60);
setInterval( randPoint, 2000);