const boxes = Array.from(document.getElementsByClassName('colored-box'))
const paths = Array.from(document.getElementsByClassName('path'))

boxes.forEach((box)=>{
    let toggle = false;
    box.addEventListener('click',()=>{
        toggle = !toggle
        const selectedPath = paths.find(path => path.getAttribute('id') === box.getAttribute('id'))

        if (toggle) {
            selectedPath.classList.add('visible');
        } else {
            selectedPath.classList.remove('visible');
        }
    })
})

const tooltip = document.getElementById("tooltip");

paths.forEach((path) => {
    path.addEventListener("mouseover", function () {
      this.classList.add("highlight");
      tooltip.style.visibility = "visible";
      tooltip.style.opacity = "1";
      tooltip.innerText = this.getAttribute("data-geo");
      show_tooltip();
    });

    path.addEventListener("mouseout", function () {
      this.classList.remove("highlight");
      tooltip.style.visibility = "hidden";
      tooltip.style.opacity = "0";
    });
  });

  function show_tooltip() {
    parent_position = $('#main').get(0).getBoundingClientRect();
    image_position = $('.imageContainer').get(0).getBoundingClientRect();
    tooltip_position = tooltip.getBoundingClientRect();
    
    let tooltipLeft = (parent_position.width /2);
    let tooltipTop =  image_position.height + image_position.top - tooltip_position.height;

    if(parent_position.width < parent_position.height){
      tooltipTop += tooltip_position.height + 20;
    }

    tooltip.style.top = tooltipTop+ "px";
    tooltip.style.left = tooltipLeft+ "px";
  };