// Adiciona um ouvinte de evento para quando o conteúdo do DOM estiver completamente carregado
document.addEventListener("DOMContentLoaded", function () {
    // Obtém o elemento com o ID 'entrada_1'
    var main = document.getElementById("entrada_1");

    // Verifica se a tag main está vazia
    if (main.innerHTML.trim() === "") {
        // Se a tag estiver vazia, obtém novamente o mesmo elemento
        const tela_laod = document.getElementById('entrada_1');

        // Adiciona um elemento canvas ao conteúdo da tag main
        tela_laod.innerHTML = '<canvas id="animationCanvas"></canvas>';

        // Obtém o contexto 2D do canvas para desenhar
        const canvas = document.getElementById('animationCanvas');
        const ctx = canvas.getContext('2d');

        // Define as dimensões do canvas para preencher a tela
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Define um objeto 'circle' que armazena as propriedades da animação
        const circle = {
            centerX: canvas.width / 2, // Centro do círculo no eixo X
            centerY: canvas.height / 2, // Centro do círculo no eixo Y
            radius: 150, // Raio do círculo
            rotationSpeed: 0.10, // Velocidade de rotação
            angle: 0, // Ângulo atual
            linePath: [], // Armazena a trajetória do ponto
            maxPathLength: 350 // Comprimento máximo da trajetória
        };

        // Função para desenhar a trajetória circular
        function drawCircularPath() {
            // Limpa o canvas antes de desenhar
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Calcula as coordenadas do ponto atual na trajetória circular
            const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
            const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
            // Adiciona o ponto atual à trajetória
            circle.linePath.push({ x: pathX, y: pathY });

            // Desenha a trajetória acumulada
            ctx.beginPath();
            for (let i = 0; i < circle.linePath.length - 1; i++) {
                ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
                ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
            }
            ctx.strokeStyle = '#22c0a3'; // Define a cor da linha
            ctx.lineWidth = 10; // Define a largura da linha
            ctx.stroke(); // Desenha a linha no canvas

            // Limita o comprimento da trajetória
            if (circle.linePath.length > circle.maxPathLength) {
                circle.linePath.shift(); // Remove o primeiro ponto do caminho
                // Reinicia a trajetória se um ciclo completo foi completado
                if (circle.angle >= Math.PI * 2) { // Verifica se completou um ciclo
                    circle.angle = 0; // Reinicia o ângulo
                    circle.linePath = []; // Limpa a trajetória
                }
            }
        }

        // Função de animação que atualiza a posição do ponto e desenha a trajetória
        function animate() {
            circle.angle += circle.rotationSpeed; // Atualiza o ângulo
            drawCircularPath(); // Desenha a trajetória atual
            requestAnimationFrame(animate); // Solicita a próxima animação
        }

        animate(); // Inicia a animação

        // Ajusta o tamanho do canvas quando a janela é redimensionada
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth; // Ajusta a largura
            canvas.height = window.innerHeight; // Ajusta a altura
            circle.centerX = canvas.width / 2; // Atualiza o centro X
            circle.centerY = canvas.height / 2; // Atualiza o centro Y
        });
    }
});