function toggleDropdown(dropdownId) {
  var dropdown = document.getElementById("dropdown" + dropdownId);
  var button = document.getElementById("button" + dropdownId);
  var otherDropdownId = (dropdownId === 1) ? 2 : 1;
  var otherDropdown = document.getElementById("dropdown" + otherDropdownId);
  var otherButton = document.getElementById("button" + otherDropdownId);

  if (dropdown.classList.contains("open")) {
    dropdown.classList.remove("open");
    button.classList.remove("active-button");
  } else {
    dropdown.classList.add("open");
    button.classList.add("active-button");
    otherDropdown.classList.remove("open");
    otherButton.classList.remove("active-button");
  }
}

// Get all buttons with the class "action"
const actionButtons = document.querySelectorAll('button.action');

// Add a click event handler to each button
actionButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Toggle the class "on" when the button is clicked
    button.classList.toggle('on');
  });
});

// Smooth Scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

// JavaScript to add "is-active" class to jump links

const jumpLinks = document.querySelectorAll('ul li a.jump-link');
const sections = document.querySelectorAll('section[id^="section"]');

jumpLinks.forEach((link, index) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();

    // Remove the "is-active" class from all jump links
    jumpLinks.forEach((link) => {
      link.classList.remove('is-active');
    });

    // Add the "is-active" class to the clicked jump link
    link.classList.add('is-active');

    // Scroll to the corresponding section
    sections[index].scrollIntoView({ behavior: "smooth" });
  });
});

// Function to determine which section is in the viewport
function isSectionInViewport(section) {
  const rect = section.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  );
}

// Function to update "is-active" class when scrolling
function updateActiveSection() {
  sections.forEach((section, index) => {
    if (isSectionInViewport(section)) {
      // Remove the "is-active" class from all jump links
      jumpLinks.forEach((link) => {
        link.classList.remove('is-active');
      });

      // Add the "is-active" class to the corresponding jump link
      jumpLinks[index].classList.add('is-active');
    }
  });
}

// Listen for scroll events and update "is-active" class accordingly
window.addEventListener('scroll', updateActiveSection);



// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get elements that closes the modal
var spans = document.querySelectorAll(".close, .cancel");

// Get the body element
const body = document.body;

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function (e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "flex";
    body.style.height = '100vh';
    body.style.overflowY = 'hidden';
  }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function () {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
      body.style.height = '';
      body.style.overflowY = '';
    }
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target.classList.contains('modal')) {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
      body.style.height = '';
      body.style.overflowY = '';
    }
  }
}


// Get references to the modals
var modalAddList = document.getElementById("myModalAddList");
var modalNewCollection = document.getElementById("myModalNewCollection");

// Get the button with the class "new-collection"
var newCollectionButton = document.querySelector(".new-collection");

if (modalAddList && modalNewCollection && newCollectionButton) {
    // Add a click event listener to the button
    newCollectionButton.addEventListener("click", function () {
        // Hide myModalAddList
        modalAddList.style.display = "none";

        // Show myModalNewCollection
        modalNewCollection.style.display = "flex";
    });
}


//Get current year for footer
//document.getElementById("year").innerHTML = new Date().getFullYear();




// Get all elements with the class '.content'
const contentElements = document.querySelectorAll('.text-toggle');

if (contentElements) {

    // Loop through each '.content' element
    contentElements.forEach((element) => {
        // Get the current height of the element
        const elementHeight = element.clientHeight;

        // Check if the height is greater than 147px
        if (elementHeight > 147) {
            // Add the '.clip' class to the element
            element.classList.add('clip');
        }
    });
}

function toggleClipClass() {
  var contentClip = document.querySelector('.text-toggle');

    if (contentClip) {
        // Toggle the classes when the link is clicked
        contentClip.classList.toggle('clip');
        contentClip.classList.toggle('unclip');
    }
}


function toggleButton(button) {
  var gridButton = document.querySelector('.media .grid');
  var listButton = document.querySelector('.media .list');
  var mediaContainer = document.getElementById('mediaContainer');

  if (button === gridButton) {
      if (!button.classList.contains('active')) {
          button.classList.add('active');
          listButton.classList.remove('active');
      }
      mediaContainer.classList.remove('list');
      mediaContainer.classList.add('grid');
  } else if (button === listButton) {
      gridButton.classList.remove('active');
      button.classList.add('active');
      mediaContainer.classList.remove('grid');
      mediaContainer.classList.add('list');
  }
}

const viewElement = document.getElementById('view');
if(viewElement)
{
viewElement .addEventListener('change', function() {
  const mediaContainer = document.getElementById('mediaContainer');
  const selectedValue = this.value;

  if (mediaContainer && selectedValue === 'card') {
      mediaContainer.classList.remove('list');
      mediaContainer.classList.add('grid');
  } else if (mediaContainer && selectedValue === 'list') {
      mediaContainer.classList.remove('grid');
      mediaContainer.classList.add('list');
  }
});
}


function showPassword() {
  var x = document.getElementById("password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

document.addEventListener("DOMContentLoaded", function () {
    var fieldsets = document.querySelectorAll('fieldset');

    if (fieldsets) {
        fieldsets.forEach(function (fieldset) {
            var inputContainers = fieldset.querySelectorAll('.input-container');
            if (inputContainers.length > 3) {
                inputContainers.forEach(function (inputContainer, index) {
                    if (index >= 3) {
                        inputContainer.classList.add('input-clip');
                    }
                });
            }
        });
    }
});

document.addEventListener('DOMContentLoaded', function () {
  const fieldsetClipLinks = document.querySelectorAll('.fieldset-clip-link');
    if (fieldsetClipLinks) {
        fieldsetClipLinks.forEach((fieldsetClipLink) => {
            const parentFieldset = fieldsetClipLink.closest('fieldset');
            const inputClipElements = parentFieldset.querySelectorAll('.input-clip');

            fieldsetClipLink.addEventListener('click', function () {
                inputClipElements.forEach((element) => {
                    element.classList.toggle('input-clip');
                    element.classList.toggle('input-unclip');
                });
            });
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
  var collapsibleLinks = document.querySelectorAll('.collapsible-link');

    if (collapsibleLinks) {
        collapsibleLinks.forEach(function (collapsibleLink) {
            collapsibleLink.addEventListener('click', function () {
                var collapsibleContent = this.nextElementSibling;

                if (collapsibleContent.classList.contains('expand')) {
                    collapsibleContent.classList.remove('expand');
                    collapsibleContent.classList.add('collapse');
                    this.classList.remove('rotate-i');
                } else {
                    collapsibleContent.classList.remove('collapse');
                    collapsibleContent.classList.add('expand');
                    this.classList.add('rotate-i');
                }
            });
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
  // Get a reference to the button with the class ".filter"
  var filterButton = document.querySelector('main .display-container button.filter');

    if (filterButton) {
        // Add a click event listener to the button
        filterButton.addEventListener('click', function () {
            // Get a reference to the "aside" element inside the "main" section
            var asideElement = document.querySelector('aside.search-results-filter');

            if (asideElement) {
                // Add the class ".active" to the "aside" element
                asideElement.classList.add('active');
            }
            // Get a reference to the "main.background-overlay" element
            var backgroundOverlay = document.querySelector('.background-overlay');

            if (backgroundOverlay) {
                // Add the class ".active" to the "main.background-overlay" element
                backgroundOverlay.classList.add('active');
            }

            // Get a reference to the body element
            var bodyElement = document.querySelector('body');

            // Add the class ".fixed" to the body element
            bodyElement.classList.add('fixed');
        });
    }
});


document.addEventListener('DOMContentLoaded', function() {
  // Get a reference to the "h2 i" element inside "aside.search-results-filter"
  var h2iElement = document.querySelector('aside.search-results-filter h2 i');

    if (h2iElement) {
        // Add a click event listener to the "h2 i" element
        h2iElement.addEventListener('click', function () {
            // Get a reference to the "aside" element inside "main main"
            var asideElement = document.querySelector('aside.search-results-filter');

            // Remove the class ".active" from the "aside" element
            if (asideElement) {
                asideElement.classList.remove('active');
            }

            // Get a reference to the "main.background-overlay" element
            var backgroundOverlay = document.querySelector('.background-overlay');

            // Remove the class ".active" from the "main .background-overlay" element
            if (backgroundOverlay) {
                backgroundOverlay.classList.remove('active');
            }

            // Remove the class ".fixed" from the "body" element
            document.body.classList.remove('fixed');
        });
    }
});


document.addEventListener("DOMContentLoaded", function() {
  // Get references to the elements
  const backgroundOverlay = document.querySelector(".background-overlay");
  const searchMainAside = document.querySelector("aside.search-results-filter");

    if (backgroundOverlay) {
        // Add a click event listener to the background-overlay
        backgroundOverlay.addEventListener("click", function () {
            // Remove the .active class from searchMainAside
            if (searchMainAside) {
                searchMainAside.classList.remove("active");
            }
            // Remove the .active class from the background-overlay
            backgroundOverlay.classList.remove("active");

            // Remove the .fixed class from the body element
            document.body.classList.remove("fixed");
        });
    }
});


document.addEventListener('DOMContentLoaded', function() {
  // Get a reference to the button with the class ".view"
  var viewButton = document.querySelector('main .display-container button.view');

    if (viewButton) {
        // Add a click event listener to the button
        viewButton.addEventListener('click', function () {
            // Get a reference to the "aside" element inside the "main" section
            var asideView = document.querySelector('aside.view-options');

            // Add the class ".active" to the "aside" element
            if (asideView) {
                asideView.classList.add('active');
            }

            // Get a reference to the "main.background-overlay" element
            var backgroundOverlay = document.querySelector('.background-overlay');

            // Add the class ".active" to the "main.background-overlay" element
            if (backgroundOverlay) {
                backgroundOverlay.classList.add('active');
            }

            // Get a reference to the body element
            var bodyElement = document.querySelector('body');

            // Add the class ".fixed" to the body element
            bodyElement.classList.add('fixed');
        });
    }
});


document.addEventListener('DOMContentLoaded', function() {
  function closeViewOptions() {
    // Get a reference to the "aside" element inside "main main"
    var asideView = document.querySelector('aside.view-options');

      // Remove the class ".active" from the "aside" element
      if (asideView) {
          asideView.classList.remove('active');
      }

    // Get a reference to the "main.background-overlay" element
    var backgroundOverlay = document.querySelector('.background-overlay');

      // Remove the class ".active" from the "main .background-overlay" element
      if (backgroundOverlay) {
          backgroundOverlay.classList.remove('active');
      }

    // Remove the class ".fixed" from the "body" element
    document.body.classList.remove('fixed');
  }

  // Get a reference to the "h2 i" element inside "aside.view-options"
  var h2iElement = document.querySelector('aside.view-options h2 i');

  // Get a reference to the ".view-options-footer .close" element
  var closeButton = document.querySelector('.view-options-footer .close');

    // Add a click event listener to the "h2 i" element
    if (h2iElement) {
        h2iElement.addEventListener('click', closeViewOptions);
    }

    // Add a click event listener to the ".view-options-footer .close" element
    if (closeButton) {
        closeButton.addEventListener('click', closeViewOptions);
    }
});



document.addEventListener("DOMContentLoaded", function() {
  // Get references to the elements
  const backgroundOverlay = document.querySelector(".background-overlay");
  const searchMainAside = document.querySelector("aside.view-options");

    if (backgroundOverlay) {
        // Add a click event listener to the background-overlay
        backgroundOverlay.addEventListener("click", function () {
            // Remove the .active class from searchMainAside
            if (searchMainAside) {
                searchMainAside.classList.remove("active");
            }
            // Remove the .active class from the background-overlay
            backgroundOverlay.classList.remove("active");

            // Remove the .fixed class from the body element
            document.body.classList.remove("fixed");
        });
    }
});



document.addEventListener("DOMContentLoaded", function () {
  var resultsContainer = document.querySelectorAll('.result-type-container');
    if (resultsContainer) {
        resultsContainer.forEach(function (result) {
            var results = result.querySelectorAll('.content-type-result');
            if (results.length > 3) {
                results.forEach(function (result, index) {
                    if (index >= 3) {
                        result.classList.add('result-clip');
                    }
                });
            }
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
  // Get a reference to the button with the class ".filter"
  var filterButton = document.querySelector('main .display-container button.filter');

    if (filterButton) {
        // Add a click event listener to the button
        filterButton.addEventListener('click', function () {
            // Get a reference to the "aside" element inside the "main" section
            var asideElement = document.querySelector('aside.search-results-filter');

            // Add the class ".active" to the "aside" element
            asideElement.classList.add('active');

            // Get a reference to the "main.background-overlay" element
            var backgroundOverlay = document.querySelector('.background-overlay');

            // Add the class ".active" to the "main.background-overlay" element
            backgroundOverlay.classList.add('active');

            // Get a reference to the body element
            var bodyElement = document.querySelector('body');

            // Add the class ".fixed" to the body element
            bodyElement.classList.add('fixed');
        });
    }
});

document.addEventListener('DOMContentLoaded', function ()
    {
        const resultClipLinks = document.querySelectorAll('.content-type-result-clip-link');

        if (resultClipLinks)
        { 
            resultClipLinks.forEach( function(resultClipLink)  {
                const parentContainer = resultClipLink.closest('.result-type-container');
                const resultClip = parentContainer.querySelectorAll('.result-clip');

                resultClipLink.addEventListener('click', function () {
                    resultClip.forEach((element) => {
                        element.classList.toggle('result-clip');
                        element.classList.toggle('result-unclip');
                    });
                });
            });
        }
    });