initVariables();
nSwitch = 1;
lHandline = true;
lDisplayFingers = true;
FingersRightOn(false, false, false, false, false, false, false, false, false);
FingersLeftOn(false, false, false, false, false, false, false, false, false);
txClocalUp = "IAMETRIA: pro/sup. Posición de partida";
txClocalDown = " Gire la mano/dcha./izda";
///////////////////////////////////////////////////////
function funcionGo(ctx) {
  if (lInit) {
    txClocalUp = "IAMETRIA: pro/sup. Posición de partida";
    txClocalDown = " Gire la mano/dcha./izda";
    jsreinitProcedure();
    jsinitTimer(1);
    lDisplayFingers = false;
    lHandline = true;

    angle = 0; // Angle in degrees
    //diameter = 125;
    centerX = window.innerWidth / 2;
    centerY = window.innerHeight / 2;
    if (!deviceAndroid) {
      diameter = 125;
    }
    else {
      diameter = 100;
    }
  }

  let pV1 = createVector(0, 0, 0);
  let pV2 = createVector(0, 0, 0);
  let anclaje = createVector(0, 0, 0);

  pV1.x = (pCfbr5.x + pCfbr6.x) / 2
  pV1.y = (pCfbr5.y + pCfbr6.y) / 2
  pV2.x = (pCfbl5.x + pCfbl6.x) / 2
  pV2.y = (pCfbl5.y + pCfbl6.y) / 2

  anclaje.x = (pCfbr9.x + pCfbr10.x) / 2
  anclaje.y = (pCfbr9.y + pCfbr10.y) / 2
  if (anclaje.x > 0 && anclaje.y > 0) drawGoniometer(1, pV1, anclaje, ctx)

  anclaje.x = (pCfbl9.x + pCfbl10.x) / 2
  anclaje.y = (pCfbl9.y + pCfbl10.y) / 2
  if (anclaje.x > 0 && anclaje.y > 0) drawGoniometer(1, pV2, anclaje, ctx)

  pCfbr5.x = 0;
  pCfbr5.y = 0;
  pCfbr6.x = 0;
  pCfbr6.y = 0;

  pCfbr9.x = 0;
  pCfbr9.y = 0;
  pCfbr10.x = 0;
  pCfbr10.y = 0;

  pCfbl5.x = 0;
  pCfbl5.y = 0;
  pCfbl6.x = 0;
  pCfbl6.y = 0;

  pCfbl9.x = 0;
  pCfbl9.y = 0;
  pCfbl10.x = 0;
  pCfbl10.y = 0;


}

// Convert degrees to radians
function degreesToRadians(degrees) {
  return (degrees * Math.PI) / 180;
}

// Draw the goniómetro
function drawGoniometer(n, pV0, anclaje, ctx) {
  //ctx.clearRect(0, 0, 640, 480);

  //const rect = canvas.getBoundingClientRect();
  const mouseX = pV0.x;
  const mouseY = pV0.y;
  const dx = mouseX - anclaje.x;
  const dy = mouseY - anclaje.y;
  angle = (Math.atan2(dy, dx) * 180) / Math.PI;
  if (angle < 0) angle += 360;

  // Draw the circle
  ctx.beginPath();
  ctx.arc(anclaje.x, anclaje.y, diameter, 0, 2 * Math.PI);
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;
  ctx.stroke();

  // Draw the circle
  ctx.beginPath();
  ctx.arc(anclaje.x, anclaje.y, diameter/1.6, 0, 2 * Math.PI);
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 1;
  ctx.stroke();

  // Draw degree markers
  for (let i = 0; i < 360; i += 10) {
    const rad = degreesToRadians(i);
    const x1 = anclaje.x + diameter * Math.cos(rad);
    const y1 = anclaje.y + diameter * Math.sin(rad);
    const x2 = anclaje.x + (diameter - (i % 90 === 0 ? 20 : 10)) * Math.cos(rad);
    const y2 = anclaje.y + (diameter - (i % 90 === 0 ? 20 : 10)) * Math.sin(rad);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = 'white';
    ctx.lineWidth = i % 90 === 0 ? 2 : 1;
    ctx.stroke();

    // Add text for the angle
    if (i % 30 === 0) { // Show text every 30°
      const textX = anclaje.x + (diameter - 30) * Math.cos(rad);
      const textY = anclaje.y + (diameter - 30) * Math.sin(rad);
      ctx.fillStyle = 'white';
      ctx.font = '12px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(`${i}°`, textX, textY);
    }
  }

  // Draw the angle line
  const radAngle = degreesToRadians(angle);
  const angleX = anclaje.x + diameter * Math.cos(radAngle);
  const angleY = anclaje.y + diameter * Math.sin(radAngle);
  ctx.beginPath();
  ctx.moveTo(anclaje.x, anclaje.y);
  ctx.lineTo(angleX, angleY);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 3;
  ctx.stroke();

  const posX = anclaje.x + (diameter + 20) * Math.cos(radAngle);
  const posY = anclaje.y + (diameter + 20) * Math.sin(radAngle)

  ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.ellipse(posX, posY, 20, 20, 0, 0, Math.PI * 2);
  ctx.fill(); // Dibujar el contorno
  // Draw the angle text
  ctx.fillStyle = 'white';
  ctx.font = '18px Arial';

  let angulo = 0;
  let angulotmp = Math.round(angle);
  if (angulotmp < 180) {
    angulo = 90;
  }
  else {
    if (angulotmp >= 180 && angulotmp <= 270) {
      angulo = 270 - angulotmp;
    }
    else {
      if (angulotmp > 270 && angulotmp <= 360) {
        angulo = angulotmp - 270;
      }
    }
  }
  ctx.fillText(`${angulo}°`, posX, posY);
}

function createVector(x, y) {
  return { x, y };
}
