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: flx/ext. Posición de partida.";
txClocalDown = "Mover mano arriba y abajo";
///////////////////////////////////////////////////////
function funcionGo(ctx) {
  if (lInit) {
    txClocalUp = "IAMETRIA: flx/ext. Posición de partida.";
    txClocalDown = "Mover mano arriba y abajo";
    jsreinitProcedure();
    jsinitTimer(1);
    lDisplayFingers = false;
    lHandline = true;

    //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);

  pV1.x = 0
  pV1.y = 0
  pV2.x = 0
  pV2.y = 0
  pV1.x = (pCfbr17.x + pCfbr18.x + pCfbr19.x + pCfbr20.x) / 4
  pV1.y = (pCfbr17.y + pCfbr18.y + pCfbr19.y + pCfbr20.y) / 4
  pV2.x = (pCfbr0.x + pCfbr1.x) / 2
  pV2.y = (pCfbr0.y + pCfbr1.y) / 2
  if (pV2.x > 0 && pV2.y > 0) {
    drawGoniometerR(pV1, pV2, ctx)
  }

  pV1.x = 0
  pV1.y = 0
  pV2.x = 0
  pV2.y = 0
  pV1.x = (pCfbl17.x + pCfbl18.x + pCfbl19.x + pCfbl20.x) / 4
  pV1.y = (pCfbl17.y + pCfbl18.y + pCfbl19.y + pCfbl20.y) / 4
  pV2.x = (pCfbl0.x + pCfbl1.x) / 2
  pV2.y = (pCfbl0.y + pCfbl1.y) / 2
  if (pV2.x > 0 && pV2.y > 0) {
    drawGoniometerR(pV1, pV2, ctx)
  }
  pCfbl0.x = 0;
  pCfbl1.x = 0;
  pCfbl0.y = 0;
  pCfbl1.y = 0;

  pCfbr0.x = 0;
  pCfbr1.x = 0;
  pCfbr0.y = 0;
  pCfbr1.y = 0;
}

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

// Draw the goniómetro
function drawGoniometerR(pV, anclaje, ctx) {
  //ctx.clearRect(0, 0, 640, 480);

  //const rect = canvas.getBoundingClientRect();
  const mouseX = pV.x;
  const mouseY = pV.y;
  const dx = mouseX - anclaje.x;
  const dy = mouseY - anclaje.y;
  let 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();

  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 = parseInt(Math.round(angle));

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

}

// Draw the goniómetro
function drawGoniometerL(pV, anclaje, ctx) {
  //ctx.clearRect(0, 0, 640, 480);

  //const rect = canvas.getBoundingClientRect();
  const mouseX = pV.x;
  const mouseY = pV.y;
  const dx = mouseX - anclaje.x;
  const dy = mouseY - anclaje.y;
  let 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();

  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 = 'rted';
  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 = parseInt(Math.round(angle));

  if (angulotmp >= 180 && angulotmp <= 270) {
    angulo = angulotmp - 180;
  }
  else {
    if (angulotmp > 90 && angulotmp < 180) {
      angulo = 180 - angulotmp;
    }
    else {
      if (angulotmp >= 0 && angulotmp <= 90) {
        angulo = angulotmp;
      }
      else {
        if (angulotmp >= 270 && angulotmp <= 360) {
          angulo = 360 - angulotmp;
        }
      }
    }
  }

  //ctx.fillText(`${Math.round(angle)}°`, posX - 40, posY - 40);
  ctx.fillText(`${angulo}°`, posX, posY);
}

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