document.addEventListener("DOMContentLoaded", function() { const scope = document.querySelector(".explore-centers-section"); if (!scope) { console.warn("Explore Centers section not found"); return; } const stateHeaders = scope.querySelectorAll(".state-header-link"); const centerItems = scope.querySelectorAll(".center-link-template[data-center-state]"); const centerListWrapper = scope.querySelector(".center-list-scroll-wrapper"); const allStatesLink = document.createElement("a"); allStatesLink.className = "state-header-link all-states-link"; allStatesLink.setAttribute("data-state", "ALL"); allStatesLink.textContent = "All States"; allStatesLink.href = "/map"; const stateListParent = stateHeaders[0].parentElement; stateListParent.insertBefore(allStatesLink, stateHeaders[0]); const allStateHeaders = scope.querySelectorAll(".state-header-link"); function highlightState(stateSlug) { allStateHeaders.forEach(header => { const headerSlug = header.getAttribute("data-state"); if (stateSlug === null || headerSlug === stateSlug || headerSlug === "ALL") { header.classList.remove("dimmed"); } else { header.classList.add("dimmed"); } }); centerItems.forEach(center => { const centerSlug = center.getAttribute("data-center-state"); if (stateSlug === null || centerSlug === stateSlug) { center.classList.remove("dimmed"); } else { center.classList.add("dimmed"); } }); } function scrollToState(stateSlug) { if (!centerListWrapper) return; const stateHeaderElement = scope.querySelector(`[data-state="${stateSlug}"]`); if (stateHeaderElement) { const scrollOffset = stateHeaderElement.offsetTop - centerListWrapper.offsetTop; centerListWrapper.scrollTo({ top: scrollOffset, behavior: "smooth" }); } } allStateHeaders.forEach(header => { const stateSlug = header.getAttribute("data-state"); header.addEventListener("mouseenter", () => { if (stateSlug === "ALL") { highlightState(null); return; } highlightState(stateSlug); scrollToState(stateSlug); }); header.addEventListener("mouseleave", () => { highlightState(null); }); }); centerItems.forEach(center => { const centerSlug = center.getAttribute("data-center-state"); center.addEventListener("mouseenter", () => { allStateHeaders.forEach(header => { const headerSlug = header.getAttribute("data-state"); if (headerSlug === centerSlug || headerSlug === "ALL") { header.classList.remove("dimmed"); } else { header.classList.add("dimmed"); } }); const matchingHeader = scope.querySelector(`.state-header-link[data-state="${centerSlug}"]`); const stateListWrapper = matchingHeader?.closest(".prez-list-wrapper"); if (matchingHeader && stateListWrapper) { const headerRect = matchingHeader.getBoundingClientRect(); const wrapperRect = stateListWrapper.getBoundingClientRect(); const isVisible = headerRect.top >= wrapperRect.top && headerRect.bottom <= wrapperRect.bottom; if (!isVisible) { matchingHeader.scrollIntoView({ behavior: "smooth", block: "nearest" }); } } }); center.addEventListener("mouseleave", () => { allStateHeaders.forEach(header => header.classList.remove("dimmed")); }); }); });