script.js

async function loadSVGs() {
    const svgElements = document.querySelectorAll('[data-src]');
  
    for (const svgElement of svgElements) {
      const src = svgElement.dataset.src;
      try {
        const response = await fetch(src);
        const svgContent = await response.text();
        svgElement.innerHTML = svgContent;
      } catch (error) {
        console.error(`Error loading SVG from ${src}:`, error);
      }
    }
  
    applyTransforms();
  }
  
  function applyTransforms() {
    const roundLetters = document.querySelector('[data-group="roundletters"]');
    if (roundLetters) {
      const sixcrossBBox = document.querySelector('[data-group="sixcross"]').getBBox();
      const scaleFactor = 1.1; // Adjust this value to change the size of the roundletters.svg
  
      const translateX = (sixcrossBBox.width - sixcrossBBox.width * scaleFactor) / 2;
      const translateY = (sixcrossBBox.height - sixcrossBBox.height * scaleFactor) / 2;
  
      roundLetters.setAttribute('transform', `translate(${translateX}, ${translateY}) scale(${scaleFactor})`);
    }
  }
  
  function updateCircleRadius(input, circle) {
    const additive = parseFloat(circle.dataset.additive || 0);
    const inputValue = parseFloat(input.value);
    let radius;
    if (input.id === 'leiderschap') {
      const oldMin = 0;
      const oldMax = 5;
      const newMin = 0 + additive;
      const newMax = 4.2 + additive;
      const newValue = ((inputValue - oldMin) * (newMax - newMin)) / (oldMax - oldMin) + newMin;
      radius = newValue * 100 / 5.3 * 0.65;
    } else {
      radius = (inputValue + additive) * 100 / 5.3 * 0.65;
    }
    circle.setAttribute('r', radius);
  }
  
  function updateBlueCircles() {
    const inputs = document.querySelectorAll('.blue-input-fields input');
    inputs.forEach((input) => {
      const inputId = input.id;
      const circles = document.querySelectorAll(`[data-group="${inputId.replace('radius', '')}"]`);
      circles.forEach((circle) => {
        updateCircleRadius(input, circle);
      });
    });
  }
  
  function updateOrangeCircles() {
    const orangeInputs = document.querySelectorAll('.orange-input-fields input');
    orangeInputs.forEach((input) => {
      const inputId = input.id.replace('orange_', '');
      const circles = document.querySelectorAll(`[data-group="${inputId}"] circle[data-group="orange"]`);
      circles.forEach((circle) => {
        updateCircleRadius(input, circle);
      });
    });
  }
  
  document.addEventListener('DOMContentLoaded', () => {
    loadSVGs();
    updateBlueCircles();
    updateOrangeCircles();
  });
  
  document.querySelectorAll('.blue-input-fields input').forEach((input) => {
    input.addEventListener('input', updateBlueCircles);
  });
  
  document.querySelectorAll('.orange-input-fields input').forEach((input) => {
    input.addEventListener('input', updateOrangeCircles);
  });
  
  async function exportSvg() {
    const svgContainer = document.getElementById('svgContainer').cloneNode(true);
    const sixcrossGroup = svgContainer.querySelector('[data-group="sixcross"]');
    const sixcrossSrc = sixcrossGroup.dataset.src;
  
    try {
      const response = await fetch(sixcrossSrc);
      const svgContent = await response.text();
      sixcrossGroup.innerHTML = svgContent;
      await inlineStyles(sixcrossGroup);
    } catch (error) {
      console.error(`Error loading SVG from ${sixcrossSrc}:`, error);
    }
  
    const serializer = new XMLSerializer();
    const svgData = serializer.serializeToString(svgContainer);
    const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(blob);
  
    const link = document.createElement('a');
    link.href = url;
    link.download = 'exported-svg.svg';
    link.click();
  
    URL.revokeObjectURL(url);
  }
  
  document.getElementById('exportSvg').addEventListener('click', exportSvg);
  function toggleGemiddelde2023() {
  const gemiddelde2023 = document.querySelector('[data-group="gemiddelde2023"]');
  if (gemiddelde2023.style.display === 'none') {
    gemiddelde2023.style.display = '';
  } else {
    gemiddelde2023.style.display = 'none';
  }
}

document.getElementById('toggleGemiddelde2023').addEventListener('click', toggleGemiddelde2023);