document.addEventListener('DOMContentLoaded', function () {
    let size = 16;
    const sizeDisplay = document.getElementById('ring-size');
    const diameterDisplay = document.getElementById('ring-diameter');
	const scaleDisplay = document.getElementById('ring-diameter-scale');
    const ringImage = document.getElementById('ring-image');

    // Define base values for size 16
    const baseDiameter = 1.68; // Diameter in cm for size 16
    const baseImageSize = 100; // Image size in px for size 16

    // Function to update the ring size, diameter, and image size
    function updateRing() {
        let diameter = baseDiameter + (size - 16) * 0.2; // Adjust diameter proportionally
        let imageSize = baseImageSize + (size - 16) * 4; // Increase image size proportionally
        
        // Update the text values without changing font size
        sizeDisplay.textContent = size;
        diameterDisplay.textContent = diameter.toFixed(2) + ' cm';
		scaleDisplay.textContent = diameter.toFixed(2) + ' cm';
        
        // Update the ring image size
        ringImage.style.width = imageSize + 'px';
        ringImage.style.height = imageSize + 'px';
    }

    // Event listener for the minus button
    document.querySelector('.ring-minus').addEventListener('click', function () {
        if (size > 1) {
            size -= 1;
            updateRing();
        }
    });

    // Event listener for the plus button
    document.querySelector('.ring-plus').addEventListener('click', function () {
        size += 1;
        updateRing();
    });

    // Event listener for the submit button
    document.querySelector('.ring-submit').addEventListener('click', function () {
        alert(`Medida enviada: ${size}`);
    });

    // Initialize the display with the base values for size 16
    updateRing();
});