const observer1 = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const id = entry.target.getAttribute("id");
      if (entry.isIntersecting) {
        document.querySelectorAll(".active").forEach((z) => {
          z.classList.remove("active") });
        document.querySelector(`a[href="#${id}"]`).classList.add("active");
      }});
  }, { rootMargin: '0px 0px -50% 0px' });
 $('#dam-tab-element.tab-element').each(function(e){
  if($(this).is(':visible')) {
  document.getElementById("dam-tab-element1").querySelectorAll("h2:not(.w-dyn-bind-empty)").forEach(function(heading, i) { 
   observer1.observe(heading);
    heading.setAttribute("id", "toc-" + i);
    let str = heading.innerHTML; 
    str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase();  
    heading.setAttribute("id", str);
    const item = document.createElement("a");
    item.innerHTML = heading.innerHTML 
    item.setAttribute("class", "tab-link-text"); 
    item.setAttribute("href", "#" + str); 
    document.querySelector("#dam-tablink1").appendChild(item); 
    });}});

    const observer2 = new IntersectionObserver(entries => {
        entries.forEach(entry => {
        const id = entry.target.getAttribute("id");
        if (entry.isIntersecting) {
          document.querySelectorAll(".active").forEach((z) => {
            z.classList.remove("active") });
          document.querySelector(`a[href="#${id}"]`).classList.add("active");
        }});
    }, { rootMargin: '0px 0px -50% 0px' });
   $('#dam-tab-element1.tab-element').each(function(e){
    if($(this).is(':visible')) {
    document.getElementById("dam-tab-element1").querySelectorAll("h2:not(.w-dyn-bind-empty)").forEach(function(heading, i) { 
     observer1.observe(heading);
      heading.setAttribute("id", "toc-" + i); // gives each h2 a unique id
      let str = heading.innerHTML; // adds section titles to slugs
      str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs
      heading.setAttribute("id", str); // gives each heading a unique id
      const item = document.createElement("a"); // creates an anchor element called "item" for each h2
      item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading
      item.setAttribute("class", "tab-link-text"); // gives each item the correct class
      item.setAttribute("href", "#" + str); // gives each item the correct anchor link
      document.querySelector("#dam-tablink1").appendChild(item); // places each item inside the Table of Contents div
      });
 }
});
    
    function elementVisible1(m_ele1) {
        var ele1 = m_ele1; //var parentcontaniner1 = document.querySelector(".af-scroll");
        var parentcontaniner1 = $('.af-scroll:visible').get(0);
        const io1 = new IntersectionObserver(entries => {
            entries.forEach(entry => { 
                //var cont1 = $('.af-scroll');
                var cont1 = $('.af-scroll:visible').eq(0);
                var element1 = $(entry.target);
                var containerOffset1 = cont1.offset().left;
                var containerWidth1 = cont1.width();
                var containerScrollLeft1 = cont1.scrollLeft();
                var elementOffset1 = element1.offset().left;
                var elementWidth1 = element1.outerWidth();
                if (entry.isIntersecting && entry.target.classList.contains("active")) {
                    console.log("active and visble");
                    cont1.scrollLeft(element1.scrollLeft() + 200);
                }
                else if (entry.isIntersecting == false && entry.target.classList.contains("active")) {
                    console.log("USED");
                    if (elementOffset1 < containerOffset1) {
                        cont1.animate({
                            scrollLeft: containerScrollLeft1 + (elementOffset1 - containerOffset1)
                        }, 200);
                    }
                    else if ((elementOffset1 + elementWidth1) > (containerOffset1 + containerWidth1)) {
                        cont1.animate({
                            scrollLeft: 200 + containerScrollLeft1 + (elementOffset1 + elementWidth1 - containerOffset1 - containerWidth1)
                        }, 200);
                    }
                }
                else {
                    //console.log("not active and not visible"); }
              }}
          );
        }, { root: parentcontaniner1, threshold: 1 });
        io1.observe(ele1);
    }//const targetNode1 = document.querySelectorAll('.af-scroll .tab-link-text');
    const targetNode1 = $('.af-scroll:visible .tab-link-text');
    const config1 = { attributes: true, childList: true, characterData: true, subTree: true };
    const callback1 = function (mutationsList, observer) {
        for (let mutation of mutationsList) {
            elementVisible1(mutation.target);}};
    const observer_link1 = new MutationObserver(callback1);
    // targetNode1.forEach(function (ele1) {
    //     observer_link1.observe(ele1, config1);
    // });
    targetNode1.each(function (i, e) {
        observer_link1.observe(e, config1);});
    
    
    var button = document.getElementById('slide4');
    button.onclick = function () {
        var container = document.getElementById('dam-tablink1');
        sideScroll(container,'right',25,170,5);};
    var back = document.getElementById('slideBack4');
    back.onclick = function () {
        var container = document.getElementById('dam-tablink1');
        sideScroll(container,'left',25,170,5);};
    function sideScroll(element,direction,speed,distance,step){
        scrollAmount = 0;
        var slideTimer = setInterval(function(){
            if(direction == 'left'){
                element.scrollLeft -= step;
            } else {
                element.scrollLeft += step;}
            scrollAmount += step;
            if(scrollAmount >= distance){
                window.clearInterval(slideTimer);}
        }, speed);}