/*!

  Citi: Localized Accessibility Fixes

  Contributor(s):
  Michael "Spell" Spellacy

  Note: Sorry to handle it this way. Too many issues. Too many templates. Too little time. This site is also going away in June. 
  
  CSS fixes can be found in the Global CSS.

*/


(function() {

    // Add ID to .search-wrap class
    
    var searchKeyword = document.querySelector(".search-keyword");
    var searchFindCareer = document.querySelector("#btn-find-a-career");
    
    if(searchKeyword && searchFindCareer) {
    
        var findCareerID = "#" + searchKeyword.id;
    
        searchFindCareer.setAttribute("href", findCareerID);
        
        var searchButton = document.querySelector(".search-toggle-btn");
        
        searchFindCareer.addEventListener("click", function() {
        
            searchButton.click(); // Force open search, which is closed on mobile. Might have jumpy effect on desktop.
        
        });
    
    }

    function fixBusinessSlider() {
    
        const businessSliders = document.querySelectorAll("#businesses_quote");
        
        businessSliders.forEach(function(slider) {
        
            const businessHeadings = slider.querySelectorAll("h3.grey");
            
            businessHeadings.forEach(function(heading, index) {
    
                const headingID = index + 1;
    
                heading.setAttribute("id", "business-slider-heading-" + headingID);
    
            });
            
            const businessLink = slider.querySelectorAll(".news-btn-dark-blue");
            
            businessLink.forEach(function(link, index) {
    
                const linkID = index + 1;
    
                link.textContent = "Learn More"; // Removing arrow. We do not need it! There is already a play button. Arrow interferes with AT. 
                link.setAttribute("aria-describedby", "business-slider-heading-" + linkID);
    
            });
            
            // Address Slick Slider buttons. 
            
            const sectionHeader = slider.querySelector("h2");
            
            if (sectionHeader) {
            
                sectionHeader.setAttribute("id", "hdr-primary-our-businesses");
            
            }
            
            const prevButton = slider.querySelector(".slick-prev");
            const nextButton = slider.querySelector(".slick-next");
            
            if (prevButton) {
            
                prevButton.setAttribute("aria-describedby", "hdr-primary-our-businesses");
            
            }
            
            if (nextButton) {
            
                nextButton.setAttribute("aria-describedby", "hdr-primary-our-businesses");
            
            }
        
        });
    
    
    }

    function fixVideoSlider() {
    
        const videoSliders = document.querySelectorAll("#video_slider");
    
        videoSliders.forEach(function(slider) {
    
            const videoHeadings = slider.querySelectorAll("h2");
    
            videoHeadings.forEach(function(heading, index) {
    
                const headingID = index + 1;
    
                heading.setAttribute("id", "video-slider-heading-" + headingID);
    
            });
    
            const videoLinks = slider.querySelectorAll(".video-box-link");
    
            videoLinks.forEach(function(link, index) {
    
                const descID = index + 1;
                const button = document.createElement("button");
    
                
                const videoImage = link.querySelector(".play-button");
                videoImage.nextElementSibling.textContent = "Watch Video"; // Removing arrow. We do not need it! There is already a play button. Arrow interferes with AT. 
    
                // Copy over relevant attributes except 'href' and 'id'
    
                Array.from(link.attributes).forEach(function(attr) {
    
                    if (attr.name !== "href" && attr.name !== "id") {
    
                        if (attr.name === "data-fancybox") {
    
                            button.setAttribute(attr.name, ""); // Set data-fancybox as a boolean attribute
    
                        } else {
    
                            button.setAttribute(attr.name, attr.value);
    
                        }
    
                    }
    
                });
    
                button.setAttribute("aria-describedby", "video-slider-heading-" + descID);
    
                button.innerHTML = link.innerHTML;
    
                link.replaceWith(button);
    
            });
    
        });
    
    }
    
    function fixTestimonialSlider() {
    
        const testimonialSlider = document.querySelectorAll("#testimonial_slider");
    
        testimonialSlider.forEach(function(slider) {
        
            const testimonialHeadings = slider.querySelectorAll("h3");
         
            testimonialHeadings.forEach(function(heading) {
    
                const quote = document.createElement("blockquote");
                quote.classList.add("testimonial-slider__quote");
    
                quote.innerHTML = heading.innerHTML;
    
                heading.replaceWith(quote);
        
            }); 
            
            // Address Slick Slider buttons. 
            
            var testimonialLabel = document.createElement("div");
            testimonialLabel.setAttribute("id", "label-testimonials");
            testimonialLabel.setAttribute("hidden", "");
            testimonialLabel.textContent = "Testimonials";
            slider.append(testimonialLabel);
            
            const prevButton = slider.querySelector(".slick-prev");
            const nextButton = slider.querySelector(".slick-next");
                
            if (prevButton) {
                
                prevButton.setAttribute("aria-describedby", "label-testimonials");
                
            }
                
            if (nextButton) {
                
                nextButton.setAttribute("aria-describedby", "label-testimonials");
                
            }
        
        });
    
    }
    
    fixBusinessSlider();
    fixTestimonialSlider();
    fixVideoSlider();

})();