var speedo = document.getElementById('speedo');
var ctx = speedo.getContext('2d');
var Constante = (150 * window.innerWidth) / 1200;

var windowWitdh, windowHeight;
var light = false;

window.onresize = windowResize;
  
  
function windowResize() {
  windowWitdh = window.innerWidth;
  windowHeight = window.innerHeight;
  
  speedo.width = Constante * 2;
  speedo.height= Constante * 2;
  
  
  ctx.restore();
  ctx.translate(Constante, Constante);
  
  draw(0);
}

const Point = (radius, angle) => (
  {x: radius*Math.cos(angle*Math.PI/180), 
   y: radius*Math.sin(angle*Math.PI/180)}
)



function draw(speed) 
{
  
  
  ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
  ctx.beginPath();
  
  ctx.rect(-(Constante * 2),-(Constante * 2),(Constante * 2),(Constante * 2));
  ctx.fill();
  
  ctx.save();

  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.arc(0, 0, Constante, 0, Math.PI*2, true);
  ctx.fill();
  
  ctx.beginPath();
  ctx.fillStyle = "#ffffff";
  ctx.shadowColor = '#999';
  ctx.shadowBlur = 5;
  ctx.shadowOffsetX = 1;
  ctx.shadowOffsetY = 1;
  ctx.arc(0, 0, Constante/2, 0, Math.PI*2, true);
  ctx.fill();


  ctx.fillStyle = "rgba(255,255,255,1)";
  ctx.textAlign = "center"; 
  ctx.font=((17*Constante)/150) +"px Arial";
  ctx.fillText( "km/h", 0, Constante -20);
  ctx.restore();
  
  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.arc(0, 0, ((Constante/2) - 1), 0, Math.PI*2, true);
  ctx.fill();


 
  var degreeNum = 111; 
  var radius = Constante;
  var len;
  
  for (var i=0; i<degreeNum; i++) 
  {
    ctx.beginPath();
    
    
    if (i % 5 == 0) {
      ctx.strokeStyle="white";
      ctx.lineWidth = 1;
      len = 10;
      
    } else {
      ctx.strokeStyle="black";
      ctx.lineWidth = 1;
      len = 5;
    }
    let angle = i* (270/degreeNum) + 135;
    let startPoint = Point(radius-len, angle);
    let endPoint = Point(radius, angle)
    ctx.moveTo(startPoint.x, startPoint.y);
    ctx.lineTo(endPoint.x, endPoint.y);
    
    if ( i % 10 == 0 ) 
    {
      ctx.fillStyle = "rgba(255,255,255,1)";
      ctx.textAlign = "center"; 
      ctx.font= ((17*Constante)/150) +"px Arial";
      let numPoint  = Point(radius-30, angle);
      ctx.fillText( (i/10) *20, numPoint.x, numPoint.y);
    }

    ctx.stroke();
    
  }

  let firstPoint = Point((65*Constante)/150, speed+ 310);
  let secondPoint = Point((250*Constante)/150, speed + 135);
  let thirdPoint = Point((65*Constante)/150, speed + 320);

  ctx.beginPath();
  ctx.fillStyle = "#a6080a";
  ctx.moveTo(firstPoint.x, firstPoint.y);
  ctx.lineTo(secondPoint.x, secondPoint.y);
  ctx.lineTo(thirdPoint.x, thirdPoint.y);
  ctx.fill();

  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(0, 0, ((Constante/2) - 4), 0, Math.PI*2, true);
  ctx.fill();

  ctx.fillStyle = "rgba(255,255,255,1)";
  ctx.textAlign = "center"; 
  ctx.font=((30*Constante)/150)+"px Arial";
  ctx.fillText( speed, 0, 0);
  ctx.restore();

  ctx.fillStyle = "rgba(255,255,255,1)";
  ctx.textAlign = "center"; 
  ctx.font="12px Arial";
  ctx.fillText("km/h", 0, 20);
  ctx.restore();

}


var accelerateID,brakeID;
var data = 0;
var realRound = 0;
var goback = false;

function accelerateSpeedSimulator() 
{
  clearInterval(accelerateID);
  clearInterval(brakeID);

  accelerateID = setInterval(function()
  { 
    
    if(data == 270)
      goback = true;
    else if(data == 0)
      goback = false;

    if (goback) 
       data = data - 1;
    else
    {
      data = data + 1;
    }

    draw(data); 
  }, 10);

  console.log(accelerateID);

  return accelerateID;
}

function accelerateSpeed(value) 
{
  // 270 round = 220

  realRound = Math.trunc((value * 270) / 220);

  clearInterval(accelerateID);
  clearInterval(brakeID);

  accelerateID = setInterval(function()
  { 
    if(data > realRound)
      data = data - 1;
    else if(data < realRound)
      data = data + 1;

    draw(data); 
  }, 10);

}


function StartAccelerateSpeed(value) 
{
  // 270 round = 220

  realRound = Math.trunc((value * 270) / 220);

  clearInterval(accelerateID);
  clearInterval(brakeID);

  accelerateID = setInterval(function()
  { 
    
    if(data > realRound)
      data = data - 2;
    else if(data < realRound)
      data = data + 2;

    draw(data); 
  }, 10);

}





windowResize()
draw(0);