const brics_box = document.getElementById('brics_box')
const brics = document.getElementById('brics')
const brics_paths = Array.from(document.querySelectorAll('#brics path'))
const icon = document.getElementById('icon')


let toggle = false;
brics_box.addEventListener('click',()=>{
  toggle = !toggle

  if(toggle){
    brics_paths.map(brics_path=>brics_path.classList.add('visible'))
    icon.classList.remove('bi-eye-fill')
    icon.classList.add('bi-eye-slash-fill')
    $("#memo").removeClass("d-none");

  }else{
    brics_paths.map(brics_path=>brics_path.classList.remove('visible'))
    icon.classList.add('bi-eye-fill')
    icon.classList.remove('bi-eye-slash-fill')
    $("#memo").addClass("d-none");
  }
})

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

brics_paths.forEach((brics_path)=>{
  brics_path.addEventListener("mouseover", function () {
    tooltip.style.visibility = "visible";
    tooltip.style.opacity = "1";
    tooltip.innerText = this.getAttribute("data-geo");
    show_tooltip();
  });

  brics_path.addEventListener("mouseout", function () {
    tooltip.style.visibility = "hidden";
    tooltip.style.opacity = ".2";
  });
});

function show_tooltip() {
  parent_position = $('#main').get(0).getBoundingClientRect();
  image_position = $('#brics_svg').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";
};