// Beginning of boxed list scripts
let numberList = document.querySelectorAll('.boxed-container .circled-number .number');

for(let i = 0; i < numberList.length; i++) {
    numberList[i].innerHTML = i + 1;
}

// End of boxed list scripts

// Beginning of carousel scripts
document.addEventListener("DOMContentLoaded", function(event) { 
    $(document).ready(function () {
        //let carouselContainer = '#carousel';
        let carouselContainer = document.querySelectorAll('.carousel');
        let carouselAdded = false;
        //addOrRemoveCarousel();
        addCarousel(carouselContainer);
        //window.onresize = addOrRemoveCarousel;

        function addOrRemoveCarousel() {
            if (window.outerWidth >= 901) {
                removeCarousel(carouselContainer);
                carouselAdded = false;
                addCarousel(carouselContainer);
            } else if (window.outerWidth < 900 && carouselAdded === false){
                removeCarousel(carouselContainer);
                carouselAdded = true;
                addCarousel(carouselContainer);
            }
        }

        function addCarousel(carouselList) {
            for (let i = 0; i < carouselList.length; i++) {
                let carousel = carouselList[i];
                let classList = carousel.classList;
                let formattedClassList = '.' + Array.from(carousel.classList).join('.');                

                let settingsDict = carouselSettings(classList, []);
                console.log(formattedClassList + ' ~ .swiper-button-prev');  

                $(carousel).slick({
                    mobileFirst: false,
                    slidesToShow: settingsDict.numberOfSlides,
                    slidesToScroll: 1,
                    arrows: settingsDict.arrows,
                    prevArrow: formattedClassList + ' + .swiper-button-next + .swiper-button-prev',
                    nextArrow: formattedClassList + ' + .swiper-button-next',
                    infinite: settingsDict.infinite,
                    dots: settingsDict.pagination, 
                    centerPadding: '0px',
                    slidesPerRow: 1,                                                          
                    responsive: [
                        {
                            breakpoint: 1116,
                            settings: {
                                slidesToShow: settingsDict.largeTabletNumOfSlides
                            }
                        },
                        {
                            breakpoint: 825,
                            settings: {
                                slidesToShow: settingsDict.tabletNumOfSlides
                            }
                        },
                        {
                            breakpoint: 767,
                            settings: {
                                arrows: false,
                                slidesToShow: 1,
                                slidesToScroll: 1,
                                centerMode: true,
                                centerPadding: '0px',                           
                            }
                        }
                    ]
                });

                $(carousel).slick('refresh');                            
            }
        }

        function removeCarousel(carouselList) {
            for (let i = 0; i < carouselList.length; i++) {
                let carousel = $(carouselList[i]);

                if (carousel.hasClass('slick-initialized')) {
                    carousel.slick('unslick');
                }
            }
        }

        function carouselSettings(classList, dict) {
            //Sets up default settings
            dict.arrows = false;
            dict.pagination = false;
            dict.infinite = false;
            dict.numberOfSlides = 1;
            dict.largeTabletNumOfSlides = 1;
            dict.tabletNumOfSlides = 1;

            if (classList != null && classList.contains('arrow')) {
                dict.arrows = true
            }

            if (classList != null && classList.contains('pagination')) {
                dict.pagination = true;
            }

            if (classList != null && classList.contains('infinite')) {
                dict.infinite = true;
            }

            if (classList != null && (classList.value.includes('slideNumber-') 
                                    || classList.value.includes('LTabletSlides-')
                                    || classList.value.includes('tabletSlides-'))) {
                let arr = classList.value.split(' ');                

                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].includes('slideNumber-')) {
                        let number = arr[i].substring(arr[i].length-1);
                        dict.numberOfSlides = +number;
                    }

                    if (arr[i].includes('LTabletSlides-')) {
                        let number = arr[i].substring(arr[i].length-1);
                        dict.largeTabletNumOfSlides = +number;
                    }

                    if (arr[i].includes('tabletSlides-')) {
                        let number = arr[i].substring(arr[i].length-1);
                        dict.tabletNumOfSlides = +number;
                    }
                }
            }

            console.log(dict);
            return dict;
        }
    });
});
// End of carousel scripts

// Start of hero banner scripts

let heroBannerInput = document.getElementById('js-typeahead-inventory');
let heroBannerSearchButton = document.querySelector('.hero-banner-search');

if (heroBannerSearchButton != null) {
    heroBannerSearchButton.addEventListener('click', function() {
        srpSearch();
    });
}

if (heroBannerInput != null) {
    heroBannerInput.addEventListener('keydown', function(e) {
        if (e.keyCode === 13) {
            srpSearch();
        }
    });
}

function srpSearch() {
    let textValue = heroBannerInput.value;
    let URL = "/v2/api/sitecore/HomePageWidget/AutoCompleteFields?text=" + textValue;

    $.get(URL, function(result){
        let resultObj = result;

        if (typeof result != 'object') {
            resultObj = JSON.parse(result);
        }

        let srpURL = sendToSRP(resultObj);
//      window.open( srpURL, "_blank");
        location.href = srpURL;
    });
}

function sendToSRP(arguments) {
    let url = '/cars-for-sale?';
    let parameter = '';
    let keyCount = 0;

    for (let key in arguments) {
        keyCount++;
        if (keyCount > 1) {
            parameter += '&'; 
        }
        parameter += key + '=';
        if (arguments.hasOwnProperty(key)) {
            let paramList = arguments[key];
            for(let i = 0; i < paramList.length; i++) {
                if (i > 0) {
                    parameter += '|' + paramList[i];
                } else {
                    parameter += paramList[i];
                }
            }
        }
    }

    return url + parameter ;
}
// End of hero banner scripts

// Start of lazy load scripts
document.addEventListener("DOMContentLoaded", function() {
    var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
  
    if ("IntersectionObserver" in window) {
      let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            lazyBackgroundObserver.unobserve(entry.target);
          }
        });
      });
  
      lazyBackgrounds.forEach(function(lazyBackground) {
        lazyBackgroundObserver.observe(lazyBackground);
      });
    }
  });
// End of lazy load scripts

// Start of video scripts
    "use strict";
    document.addEventListener('DOMContentLoaded', function () {
        if (window.hideYTActivated) return;
        let onYouTubeIframeAPIReadyCallbacks = [];
        for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
            let playerFrame = playerWrap.querySelector("iframe");
            let tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            let firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            let onPlayerStateChange = function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    playerWrap.classList.add("ended");
                } else if (event.data == YT.PlayerState.PAUSED) {
                    playerWrap.classList.add("paused");
                } else if (event.data == YT.PlayerState.PLAYING) {
                    playerWrap.classList.remove("ended");
                    playerWrap.classList.remove("paused");
                }
            };
            let player;
            onYouTubeIframeAPIReadyCallbacks.push(function () {
                player = new YT.Player(playerFrame, {events: {'onStateChange': onPlayerStateChange}});
            });
            playerWrap.addEventListener("click", function () {
                let playerState = player.getPlayerState();
                if (playerState == YT.PlayerState.ENDED) {
                    player.seekTo(0);
                } else if (playerState == YT.PlayerState.PAUSED) {
                    player.playVideo();
                }
            });
        }
        window.onYouTubeIframeAPIReady = function () {
            for (let callback of onYouTubeIframeAPIReadyCallbacks) {
                callback();
            }
        };
        window.hideYTActivated = true;
    });

    (function(){
    let YouTubeContainers = document.querySelectorAll(".embed-youtube");

    // Iterate over every YouTube container you may have
    for (let i = 0; i < YouTubeContainers.length; i++) {
        let container = YouTubeContainers[i];
        let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg"; 

        // Load the Thumbnail Image asynchronously
        let image = new Image();
        image.src = imageSource;
        image.addEventListener("load", function() {
            container.appendChild(image);
        });

        // When the user clicks on the container, load the embedded YouTube video
        container.addEventListener("click", function() {
            let iframe = document.createElement( "iframe" );

            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "");
            iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
            // Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it 
            iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");

            // Clear Thumbnail and load the YouTube iframe
            this.innerHTML = "";
            this.appendChild( iframe );
        });
    }
})();
// End of video scripts

//Start of three column carousel scripts
let threeColumn = document.querySelectorAll('.three-column-carousel');

for (let i = 0; i < threeColumn.length; i++) {
    addThreeColumnCarousel(threeColumn[i]);    
}

function addThreeColumnCarousel(carousel) {
    let classList = carousel.classList;
    let formattedClassList = '.' + carousel.classList.value.split(/\s+/).join('.');
    let settingsDict = threeColumnCarouselSettings(classList, []); 
    
    checkForCarousel(carousel,formattedClassList, settingsDict);

    if (settingsDict.startAtLTablet == true || settingsDict.startAtSmTablet == true) {
        window.addEventListener('resize', function() {
            checkForCarousel(carousel, formattedClassList, settingsDict);            
        });
    }     
}

function checkForCarousel(carousel, formattedClassList, settingsDict) {
    if (settingsDict.startAtLTablet == true && window.innerWidth <= 1115 && !carousel.classList.contains('slick-initialized')) {

        addLargeTabletCarousel(settingsDict, carousel, formattedClassList);

    } else if (settingsDict.startAtSmTablet == true && window.innerWidth <= 825 && !carousel.classList.contains('slick-initialized') ) {

        addTabletCarousel(settingsDict, carousel, formattedClassList);

    } else if (settingsDict.startAtLTablet == true && window.innerWidth > 1115 && carousel.classList.contains('slick-initialized')) {
        
        $(carousel).slick('unslick');

    } else if (settingsDict.startAtSmTablet == true && window.innerWidth > 825 && carousel.classList.contains('slick-initialized')) {
        
        $(carousel).slick('unslick');

    }
}

function removeThreeColumnCarousel(carouselList) {
    for (let i = 0; i < carouselList.length; i++) {
        let carousel = $(carouselList[i]);

        if (carousel.hasClass('slick-initialized')) {
            carousel.slick('unslick');
        }
    }
}

function addTabletCarousel(settings, element, formattedClassList) {
    $(element).slick({
        arrows: settings.arrows,
        prevArrow: formattedClassList + ' + .swiper-button-next + .swiper-button-prev',
        nextArrow: formattedClassList + ' + .swiper-button-next',
        infinite: settings.infinite,
        dots: settings.pagination,        
        slidesToShow: settings.tabletNumOfSlides,
        slidesToScroll: 1,                                  
        responsive: [
            {
                breakpoint: 577,
                settings: {
                    slidesToShow: 1,
                    arrows: false
                }
            }
        ]
    });
}

function addLargeTabletCarousel(settings, element, formattedClassList) {
    $(element).slick({
        arrows: settings.arrows,
        prevArrow: formattedClassList + ' + .swiper-button-next + .swiper-button-prev',
        nextArrow: formattedClassList + ' + .swiper-button-next',
        infinite: settings.infinite,
        dots: settings.pagination,        
        slidesToShow: settings.largeTabletNumOfSlides,
        slidesToScroll: 1,                                  
        responsive: [
            {
                breakpoint: 825,
                settings: {
                    slidesToShow: settings.tabletNumOfSlides
                }
            },
            {
                breakpoint: 577,
                settings: {
                    slidesToShow: 1,
                    arrows: false
                }
            }
        ]
    });
}

function threeColumnCarouselSettings(classList, dict) {
    //Sets up default settings
    dict.arrows = false;
    dict.pagination = false;
    dict.infinite = false;
    dict.startAtLTablet = false;
    dict.startAtSmTablet = false;
    dict.largeTabletNumOfSlides = 1;
    dict.tabletNumOfSlides = 1;

    if (classList != null && classList.contains('arrow')) {
        dict.arrows = true
    }

    if (classList != null && classList.contains('pagination')) {
        dict.pagination = true;
    }

    if (classList != null && classList.contains('infinite')) {
        dict.infinite = true;
    }

    if (classList != null && ( classList.value.includes('LTabletSlides-')
                            || classList.value.includes('tabletSlides-'))) {
        let arr = classList.value.split(' ');                

        for (let i = 0; i < arr.length; i++) {
            if (arr[i].includes('LTabletSlides-')) {
                let number = arr[i].substring(arr[i].length-1);
                dict.largeTabletNumOfSlides = +number;
            }

            if (arr[i].includes('tabletSlides-')) {
                let number = arr[i].substring(arr[i].length-1);
                dict.tabletNumOfSlides = +number;
            }
        }
    }

    if (classList != null && ( classList.value.includes("LTabletCarousel") )) {
        dict.startAtLTablet = true;
    }

    if (classList != null && ( classList.value.includes('SmTabletCarousel') )) {
        dict.startAtSmTablet = true;
    }
    return dict;
}
//End of three column carousel scripts

// Start of Table scripts
let chevrons = document.querySelectorAll('.table-title-chevron');
let textContainers = document.querySelectorAll('.table-text-content');

window.addEventListener('resize', function() {
    removeFlip(chevrons);
});

for(let i = 0; i < chevrons.length; i++) {
    chevrons[i].parentElement.addEventListener('click', function(e) {
        let clickedChevron = chevrons[i];

        if (clickedChevron.classList.contains('flip')) {                    
            clickedChevron.classList.remove('flip');
        } else {
            removeFlip(chevrons);             
            clickedChevron.classList.add('flip');
        }
    });
}

function removeFlip(elements) {
    for(let i = 0; i < elements.length; i++) {
        elements[i].classList.remove('flip');
    }
}
// End of Table scripts