// window.addEventListener('resize', function (event) {
//     getActualFlexWidth();
// }, true);

// // Get actual width for flex items
// function getActualFlexWidth() {
//     var thirdMenus = [].slice.call(document.querySelectorAll(".third-menu , .second-menu"));
//     thirdMenus.forEach(function (item) {
//         item.style.width = 0;
//         item.style.width = item.scrollWidth + "px";

//     })
//     var subItems = [].slice.call(document.querySelectorAll(" .sub-item"));
//     subItems.forEach(function (item) {

//         if (item.scrollHeight > 32) {
//             item.style.height = 0;

//             item.style.height = item.scrollHeight + "px";
//         }


//     })

// }

// function handleSecondMenu(el) {
//     var status = event.currentTarget.getAttribute("aria-expanded");
//     navMenuStatus = status;
//     if (event.target.classList.contains('primary-link') || event.target.classList.contains('mainmenu') || event.target.classList.contains('close-icon')) {
//         if (status == "false") {
//             openSecondMenu(el);
//         } else {
//             closeIconSecondMenu(false);
//         }
//     } else if (status == "false") {
//         openSecondMenu(el);
//     }

// }

// function openSecondMenu(el) {
//     el.focus();
//     var menuId = event.currentTarget.getAttribute("data-menu");
//     lastActiveTarget = menuId;
//     var sm = document.getElementById(menuId);
//     var modernMenu = document.getElementById("modern-menu");
//     el.setAttribute("aria-expanded", true);
//     [].slice.call(el.querySelectorAll('.primary-link')).forEach(function (item) {

//         item.setAttribute("aria-expanded", true);
//     });
//     // Close   active Menus before open
//     var allPrimerItems = [].slice.call(document.querySelectorAll(".ada-primary"));
//     allPrimerItems.forEach(function (item) {
//         if (el.id != item.id) {
//             closeSecondMenu(item);
//             item.setAttribute("aria-expanded", false);
//             [].slice.call(item.querySelectorAll('.primary-link')).forEach(function (link) {

//                 link.setAttribute("aria-expanded", false);


//             });
//         }
//     });

//     // Open new Menu
//     if (sm) {
//         sm.classList.add("open");
//         modernMenu.classList.add("open");
//         getActualFlexWidth();
//         var herderLine = modernMenu.querySelectorAll(".header-lines")[0];
//         herderLine.classList.add("open");
//         hideFindVerticalBar();
//         changeFindStoreHeight();
//         addContextClass();
//     }
//     var pinkStick = el.querySelectorAll(".pink-stick")[0];
//     if (pinkStick) {
//         pinkStick.classList.add("open");

//     }

// }

// document.addEventListener('click', function handleClickOutsideBox(event) {
//     var modernMenu = document.getElementById("modern-menu");
//     if (!modernMenu.contains(event.target) && navMenuStatus != null && navMenuStatus === "false") {
//         closeIconSecondMenu(true);
//     }
// });

// function handleCloseIcondDownKey() {
//     if (event.key == "Tab" || event.key == "Enter") {
//         closeIconSecondMenu(false);
//     }
// }

// function closeIconSecondMenu(clickOutsideFlag) {
//     var menuId;
//     if (clickOutsideFlag) {
//         menuId = lastActiveTarget;
//     } else {
//         menuId = event.currentTarget.getAttribute("data-menu");
//         lastActiveTarget = menuId;
//     }
//     var sm = document.getElementById(menuId);
//     var modernMenu = document.getElementById("modern-menu");
//     var herderLine = modernMenu.querySelectorAll(".header-lines")[0];
//     herderLine.classList.remove("open");
//     sm.removeEventListener("mouseenter mouseleave", sm);
//     sm.classList.remove("open");
//     modernMenu.classList.remove("open");
//     var pm = document.getElementById('primary-' + sm.id.split("-")[1]);
//     [].slice.call(pm.querySelectorAll('.primary-link')).forEach(function (item) {

//         item.setAttribute("aria-expanded", false);
//     });
//     [].slice.call(primaryitems).forEach(function (item) {
//         item.setAttribute("aria-expanded", false);

//     });
//     var pinkStick = pm.querySelectorAll(".pink-stick")[0];
//     if (pinkStick) {
//         pinkStick.classList.remove("open");

//     }
//     event.stopPropagation();


// }


// function mouseLeaveMenu(event) {
//     var newEl = event.relatedTarget;
//     if (!("ontouchstart" in document.documentElement)) {
//         if (!newEl || (!!newEl && !newEl.classList.contains("menu-area") && !newEl.parentElement.classList.contains("menu-area"))) {
//             var allPrimerItems = [].slice.call(document.querySelectorAll(".ada-primary"));
//             allPrimerItems.forEach(function (item) {

//                 closeSecondMenu(item);
//                 item.setAttribute("aria-expanded", false);
//                 [].slice.call(item.querySelectorAll('.primary-link')).forEach(function (link) {

//                     link.setAttribute("aria-expanded", false);


//                 });


//             });
//         }
//     }

// }
// function closeSecondMenu(el) {
//     var menuId = el.getAttribute("data-menu");
//     var sm = document.getElementById(menuId);
//     var modernMenu = document.getElementById("modern-menu");
//     var herderLine = modernMenu.querySelectorAll(".header-lines")[0];
//     if (sm) {
//         herderLine.classList.remove("open");
//         sm.classList.remove("open");
//         modernMenu.classList.remove("open");
//         var pinkStick = el.querySelectorAll(".pink-stick")[0];
//         if (pinkStick) {
//             pinkStick.classList.remove("open");

//         }
//     }


// }

// function primaryMenuKeyDown(el, event) {
//     switch (event.key) {
//         case " ":

//             break;
//         case "Tab":

//             break;
//         case "ArrowLeft":

//             break;
//     }
// }

// var menuClickEnable = document.getElementById('menuClickEnable') != undefined ? true : false;
// var secondMenus = document.getElementsByClassName('menu-body');
// setTimeout(()=> {
//     [].slice.call(primaryitems).forEach(function (primaryitem) {
//         primaryitem.addEventListener('click', function () { handleSecondMenu(this) });
//         primaryitem.addEventListener('keydown', function (event) { primaryMenuKeyDown(this, event) });
//         if (!menuClickEnable) {
//             primaryitem.addEventListener('mouseenter', function () { openSecondMenu(this) });
//             primaryitem.addEventListener('mouseleave', function (event) { mouseLeaveMenu(event) });
//         }
//         else {
//             //primaryitem.addEventListener('click', function () { mouseLeaveMenu(this) });
//         }
    
//     });
// }, 500);


// [].slice.call(secondMenus).forEach(function (primaryitem) {
//     if (!menuClickEnable) {
//         primaryitem.addEventListener('mouseleave', function () { mouseLeaveMenu(this) });
//     }

// });


////////////////////////////////////////



// var acc = document.getElementsByClassName("accordion");
// var closeMobileMenu = document.getElementById("close-icon-m");

// var closeMobileMenuAcc = document.getElementById("profile-icon-m");
// var profileIconAcc = document.getElementById("profile-acc-m");
// var closeProfileIconAcc = document.getElementById("close-icon-acc");

// var chatIcon = document.getElementById("chat-icon");
// var locationIcon = document.getElementById("location-icon");
// var accountIcon = document.getElementById("account-icon");

// var modernMenuM = document.getElementsByClassName("modern-menu-m");
// var primaryMenu = document.getElementsByClassName("primary-menu");
// var primaryMenuAcc = document.getElementsByClassName("primary-menu-acc");
// var mobileMenu = document.getElementById("mobileMenu");
// var isDefault = document.getElementById("menuContextClass").value;
// var isAuthincated = document.getElementById("isAuthincated");
// var accountText = document.getElementsByClassName("accountText")[0];
// var body = document.body;
// var html = document.getElementsByTagName("html")[0];
// var i;

// for (i = 0; i < acc.length; i++) {
//     acc[i].addEventListener("click", function () {
//         this.classList.toggle("active");
//         var id = this.id;
//         $(".accordion").each(function () {                
//             let primaryClickCss = $("#" + id).attr('class');
//             if ($("#" + id).attr('id').replace(/\s/g, '') != this.id.replace(/\s/g, '') && primaryClickCss.includes('primary-clickable') ) {
//                 this.nextElementSibling.style.display = "none";
//                 if (isDefault == 'default') {
//                     if ($("#" + this.id)[0] && $("#" + this.id).attr('id') != "ACCOUNT")
//                         $("#" + this.id)[0].children[0].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-down';
//                     if ($("#" + this.id)[0] && $("#" + this.id).attr('id') == "ACCOUNT")
//                         $("#" + this.id)[0].children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-down';
//                 }
//                 else {
//                     if ($("#" + this.id)[0] && $("#" + this.id).attr('id') != "ACCOUNT")
//                         $("#" + this.id)[0].children[0].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-down';
//                     if ($("#" + this.id)[0] && $("#" + this.id).attr('id') == "ACCOUNT")
//                         $("#" + this.id)[0].children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-down';
//                 }
//                 this.classList.remove("active");
//             }
//         });

//         var panel = this.nextElementSibling;
//         if (panel.style.display === "block") {

//             panel.style.display = "none";
//             //2 is account
//             if (this.children[1]) {

//                 if (isDefault == 'default' && isAuthincated.value.toString() == 'true') {
//                     // accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/loggedin-icon";
//                     // accountIcon.style.marginLeft = "0px";
//                     accountText.style.top = "-5px";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-down';
//                 }
//                 else if (isDefault == 'secondary' && isAuthincated.value.toString() == 'true') {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/loggedin-icon";
//                     //accountIcon.style.marginLeft = "0px";
//                     accountText.style.top = "-5px";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-down';
//                 }
//                 else if (isDefault == 'default') {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/default-account-icon";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-down';
//                     //accountText.style.top = "-13px";
//                 }
//                 else {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/secondary-account-icon";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-down';
//                     //accountText.style.top = "-13px";
//                 }
//             }
//             else {
//                 if (isDefault == 'default') {
//                     this.children[0].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-down';
//                 }
//                 else {
//                     this.children[0].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-down';
//                 }
//             }
//         } else {
//             panel.style.display = "block";
//             if (this.children[1]) {

//                 if (isDefault == 'default' && isAuthincated.value.toString() == 'true') {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/loggedin-icon";
//                     //accountIcon.style.marginLeft = "0px";
//                     accountText.style.top = "-5px";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-up';
//                 }
//                 else if (isDefault == 'secondary' && isAuthincated.value.toString() == 'true') {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/loggedin-icon";
//                     //accountIcon.style.marginLeft = "0px";
//                     accountText.style.top = "-5px";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-up';
//                 }
//                 else if (isDefault == 'default') {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/default-account-icon";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-up';
//                 }
//                 else {
//                     //accountIcon.src = "/~/media/Images/Autonation/ANNavigation/ModernHeader/icons/secondary-account-icon";
//                     this.children[1].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-up';
//                 }
//             }
//             else {
//                 if (isDefault == 'default') {
//                     this.children[0].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/white-caret-up';
//                 }
//                 else {
//                     this.children[0].src = '/~/media/Images/Autonation/ANNavigation/ModernHeader/blue-caret-up';
//                 }
//             }
//         }
//     });
// }

// closeMobileMenu.addEventListener("click", function () {
//     this.classList.toggle("active");
//     primaryMenuAcc[0].style.display = "none";
//     profileIconAcc.style.display = 'block';
//     closeProfileIconAcc.style.display = 'none';
//     if (primaryMenu[1].style.display === "block") {
//         //hidding options
//         document.body.style.height = 'auto';
//         primaryMenu[1].style.display = "none";
//         if (isDefault == 'default') {
//             closeMobileMenu.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/default-hamburger-icon';
//             modernMenuM[0].firstChild.nextSibling.classList.remove("default-m");
//             modernMenuM[0].firstChild.nextSibling.classList.add("transparent-background");
//             mobileMenu.style.marginBottom = "0px";
//             mobileMenu.classList.remove("cover-height");
//         }
//         else {
//             closeMobileMenu.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/secondary-hamburger-icon';
//             closeMobileMenu.style.background = "white";
//             closeMobileMenu.style.opacity = "1";
//             mobileMenu.classList.remove("cover-height-secondary");
//         }
//         changeOverflow('auto');
//     } else {
//         //Showing options
//         document.body.style.height = '100vh';
//         primaryMenu[1].style.display = "block";
//         if (isDefault == 'default') {
//             closeMobileMenu.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/default-close-icon';
//             modernMenuM[0].firstChild.nextSibling.classList.remove("transparent-background");
//             modernMenuM[0].firstChild.nextSibling.classList.add("default-m");
//             mobileMenu.style.marginBottom = "-20px";
//             if (isAuthincated.value.toString() == 'true') {
//                 accountText.style.top = "-5px";
//             }
//             mobileMenu.classList.add("cover-height");
//         }
//         else {
//             closeMobileMenu.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/default-hover-close-icon';
//             //closeMobileMenu.style.background = "#74C8FF 0% 0%";
//             closeMobileMenu.style.borderRadius = "300px";
//             closeMobileMenu.style.opacity = "1.1";
//             //mobileMenu.style.marginBottom = "20px";
//             if (isAuthincated.value.toString() == 'true') {
//                 accountText.style.top = "-5px";
//             }
//             mobileMenu.classList.add("cover-height-secondary");
//         }
//         changeOverflow('hidden');

//     }
// })

// closeMobileMenuAcc.addEventListener("click", function () {
//     this.classList.toggle("active");
//     primaryMenu[1].style.display = "none";
//     if (isDefault == 'default') {
//         closeMobileMenu.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/default-hamburger-icon';
//     } else {
//         closeMobileMenu.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/secondary-hamburger-icon';
//     }

//     if (primaryMenuAcc[0].style.display === "block") {
//         //hidding options
//         document.body.style.height = 'auto';
//         primaryMenuAcc[0].style.display = "none";
//         if (isDefault == 'default') {
//             profileIconAcc.style.display = 'block';
//             closeProfileIconAcc.style.display = 'none';
//             modernMenuM[0].firstChild.nextSibling.classList.remove("default-m");
//             modernMenuM[0].firstChild.nextSibling.classList.add("transparent-background");
//             mobileMenu.style.marginBottom = "0px";
//             mobileMenu.classList.remove("cover-height");
//         }
//         else {
//             profileIconAcc.style.display = 'block';
//             closeProfileIconAcc.style.display = 'none';
//             mobileMenu.classList.remove("cover-height-secondary");
//         }
//         changeOverflow('auto');
//     } else {
//         //Showing options
//         document.body.style.height = '100vh';
//         primaryMenuAcc[0].style.display = "block";
//         // By default opens MY ACCOUNT accordion
//         if (document.getElementById('ACCOUNT') !== null && !document.getElementById('ACCOUNT').classList.contains('active')) {
//             document.getElementById('ACCOUNT').click();
//         }
//         if (isDefault == 'default') {
//             profileIconAcc.style.display = 'none';
//             closeProfileIconAcc.style.display = 'block';
//             closeProfileIconAcc.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/default-close-icon';
//             modernMenuM[0].firstChild.nextSibling.classList.remove("transparent-background");
//             modernMenuM[0].firstChild.nextSibling.classList.add("default-m");
//             mobileMenu.style.marginBottom = "-20px";
//             if (isAuthincated.value.toString() == 'true') {
//                 accountText.style.top = "-5px";
//             }
//             mobileMenu.classList.add("cover-height");
//         }
//         else {
//             closeProfileIconAcc.src = '/~/media/images/Autonation/ANNavigation/ModernHeader/icons/default-hover-close-icon';
//             profileIconAcc.style.display = 'none';
//             closeProfileIconAcc.style.display = 'block';
//             if (isAuthincated.value.toString() == 'true') {
//                 accountText.style.top = "-5px";
//             }
//             mobileMenu.classList.add("cover-height-secondary");
//         }
//         changeOverflow('hidden');

//     }
// })

// function changeOverflow(value) {
//     body.style.overflow = value;
//     html.style.overflow = value;
// }

// function attachEvents() {
//     var dealerLinks = document.querySelectorAll('a.jsattachEvents');
//     [].slice.call(dealerLinks).forEach(function (dealerLink) {
//         dealerLink.addEventListener('click', function () {
//             if (this.href.indexOf('dealers/results') >= 0) {
//                 window.location.href = this.href;
//                 return false;
//             }
//         });
//     });
// }

var AN = AN || (AN = {});
AN.AuthenticationModule = AN.AuthenticationModule || (AN.AuthenticationModule = {});
AN.AuthenticationModule.Config = AN.AuthenticationModule.Config || (AN.AuthenticationModule.Config = {});
AN.AuthenticationModule.Config.Selector = AN.AuthenticationModule.Config.Selector || (AN.AuthenticationModule.Config.Selector = {});
AN.AuthenticationModule.Config.Selector = ".Sign_in_Or_Register, .login-modal-link";
AN.AuthenticationModule.EmailServerError = "Sorry, the email address provide is not registered.";
AN.AuthenticationModule.PasswordServerError = "Please enter a valid username and / or password.";
AN.AuthenticationModule.RegisterEmailServiceError = "This email address is already associated with a My AutoNation Account.  Try signing in or using a different email.";
AN.AuthenticationModule.ResetEmailServiceError = "This email address doesn&#39;t match an account in our system.";
var _ANUserId = "";
var _UserLoginStatus = "Anonymous";

window.addEventListener('load', () => {
    var authCssAdded = "";
    var accountLink = document.querySelectorAll('[data-menu-value="account"]');

    if (accountLink != null && accountLink.length > 0) {
        accountLink.forEach(link => {
            link.addEventListener('click', function () {
                var authCssFilename = "/Content/AutoNation/autonationcom/css/authentication.bundle.css";
                if (authCssAdded.indexOf("[" + authCssFilename + "]") === -1) {
                    $('head').append('<link rel="stylesheet" href="/Content/AutoNation/autonationcom/css/authentication.bundle.css">');
                    authCssAdded += "[" + authCssFilename + "]";
                }
            });
        });
    }
});

document.addEventListener("DOMContentLoaded", function(event) { 
    $(document).ready(function () {
        let vehicleTypeSliderId = '#vehicleTypeSlider';
        let taxSliderId = '#taxSlider';
        let goGreenId = '#goGreenSlider';
        let performanceSliderId = '#performanceSlider';
        let rangeChargeSliderId = '#rangeSlider';
        let maintenanceSliderId = '#maintenanceSlider';
        let researchSliderId = '#researchSlider';
        let carouselAdded = false;
        const secondColumn = document.querySelector('.sticky-head:nth-child(2)');
        const headerText = document.getElementsByClassName('banner-header')[0];

        if (window.document.documentMode) {
            headerText.classList.add('IEHeader');
        }

        if (window.outerWidth <= '640') {
            secondColumn.classList.add('second-col');
        }

        addOrRemoveCarousel();
        window.onresize = function() {
            addOrRemoveCarousel();
            addSecondCol();
        };

        function addSecondCol() {
            if (window.outerWidth <= '640') {
                secondColumn.classList.add('second-col');
            } else {
                secondColumn.classList.remove('second-col');
            }
        }

        function addOrRemoveCarousel() {
            if (window.outerWidth >= 768) {
                
                removeCarousel(vehicleTypeSliderId);
                removeCarousel(taxSliderId);
                removeCarousel(goGreenId);
                removeCarousel(performanceSliderId);
                removeCarousel(rangeChargeSliderId);
                removeCarousel(maintenanceSliderId);
                removeCarousel(researchSliderId);
                addCarouselWithArrows(researchSliderId);
                 
                carouselAdded = false;
            } else if (window.outerWidth < 768 && carouselAdded === false){
                carouselAdded = true;
                addCarousel(vehicleTypeSliderId);
                addCarousel(taxSliderId);
                addCarousel(goGreenId);
                addCarousel(performanceSliderId);
                addCarousel(rangeChargeSliderId);
                addCarousel(maintenanceSliderId);
                removeCarousel(researchSliderId); 
                addCarousel(researchSliderId);
            }
        }

        function addCarousel(eleId) {
            $(eleId).slick({
                mobileFirst: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                infinite: true,
                dots: true,
                rows:0
            });
        }

            function addCarouselWithArrows(eleId) {
                $(eleId).slick({
                    mobileFirst: true,
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    arrows: true,
                    infinite: true,
                    dots: true,
                    rows:0,
                    centerMode: false,
                });                
            }
           

        function removeCarousel(eleId) {
            let carousel = $(eleId);

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

});
var tableHead = document.getElementsByClassName('table-header')[0];
var table = document.getElementsByClassName('compare-vehicle-table')[0];
var chevrons = document.getElementsByClassName('header-icon');
var ascending = false;
var tabBar = document.getElementsByClassName('electric-vehicle-tab-bar')[0];
const headerTabs = document.querySelectorAll('.electric-vehicle-tab');
var compareLink = document.getElementById('compareLink');
let typeSection = document.getElementById('typesSection');
let incentiveSection = document.getElementById('incentives');
let researchSection = document.getElementById('research');
let goGreenSection = document.getElementById('goGreenSection');
let performanceSection = document.getElementById('performanceSection');
let rangeSection = document.getElementById('rangeSection');
let maintenanceSection = document.getElementById('maintenanceSection');
let compareSection = document.getElementById('compareSection');

var addedFlag = false;

window.addEventListener('scroll', function() {
    if (window.outerWidth <= 1150) {
        let check = isOutOfViewport(tabBar);
        let linkCheck = isOutOfViewport(compareLink);
        let checkTypeInView = isElementInViewport(typeSection);
        let checkIncentivesInView = isElementInViewport(incentiveSection);
        let checkResearchInView = isElementInViewport(researchSection);
        let checkGreenInView = isElementInViewport(goGreenSection);
        let checkPerformanceInView = isElementInViewport(performanceSection);
        let checkRangeInView = isElementInViewport(rangeSection);
        let checkMaintenanceInView = isElementInViewport(maintenanceSection);
        let checkCompareInView = isElementInViewport(compareSection);
        
        if (checkTypeInView) {                
            removeActive(headerTabs);
            headerTabs[0].classList.add('active');                          
        } else if (checkIncentivesInView) {
            removeActive(headerTabs);
            headerTabs[1].classList.add('active');      
        }  else if (checkResearchInView) {
            removeActive(headerTabs);
            headerTabs[2].classList.add('active');   
        } else if (checkGreenInView) {
            removeActive(headerTabs);
            headerTabs[3].classList.add('active');                 
        } else if (checkPerformanceInView) {
            removeActive(headerTabs);
            headerTabs[4].classList.add('active');                  
        } else if (checkRangeInView) {
            removeActive(headerTabs);
            headerTabs[5].classList.add('active');                    
        } else if (checkMaintenanceInView) {
            removeActive(headerTabs);
            headerTabs[6].classList.add('active');                
        } else if (checkCompareInView) {
            removeActive(headerTabs);
            headerTabs[7].classList.add('active');                  
        }

        if (check.top) {
            tabBar.classList.add('mobile-sticky');
        } else if (!linkCheck.top) {
            tabBar.classList.remove('mobile-sticky');
        }
    } else {
        tabBar.classList.remove('mobile-sticky');
    }
});

function removeActive(eles) {
    for (let i = 0; i < eles.length; i++) {
        eles[i].classList.remove('active');
    }
}

function isOutOfViewport(elem) {
    // Get element's bounding
    var bounding = elem.getBoundingClientRect();

    // Check if it's out of the viewport on each side
    var out = {};
    out.top = bounding.top < 0;
    out.left = bounding.left < 0;
    out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight);
    out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth);
    out.any = out.top || out.left || out.bottom || out.right;
    out.all = out.top && out.left && out.bottom && out.right;

    return out;
}

function isElementInViewport(el) {
    let top = el.getBoundingClientRect().top - 100;
    let bottom = el.getBoundingClientRect().bottom - 100;

    if (top <= 0 && bottom >= 0) {
        return true;
    } else {
        return false;
    }
}

tableHead.addEventListener('click', function(event) {
    let td = event.target.cellIndex;

    if (td !== 'undefined' && td > 0) {
        sortTable(td, ascending);
        rotateChevron(td);
        ascending = !ascending;
    }
});

function sortTable(columnIndex, ascending) {
    let rows, i, x, y, shouldSwitch;
    let switching = true;

    while(switching) {
        switching = false;
        rows = table.rows;

        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName('TD')[columnIndex].innerHTML.toLowerCase().replace(/\D/g,'');
            y = rows[i + 1].getElementsByTagName('TD')[columnIndex].innerHTML.toLowerCase().replace(/\D/g,'');

            if (ascending) {
                if (+x < +y) {
                    shouldSwitch = true;
                    break;
                }
            } else {
                if (+x > +y) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}

function rotateChevron(chevronIndex) {
    for (let i = 0; i < chevrons.length - 1; i++) {
        if (chevrons[i].classList.contains('flipped')) {
            chevrons[i].classList.remove('flipped');
        }
    }
    if (!ascending) {
        chevrons[chevronIndex - 1].classList.add('flipped');
    }
}

const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';

let rangeLink = document.getElementById('rangeModal');
let rangeModal = document.getElementById('range-modal');
let dropdownButtons = document.getElementsByClassName('dropdown-button');
let makeDropdownRange = document.getElementById('make');
let modelDropdownRange = document.getElementById('model');
let trimDropdownRange = document.getElementById('trim');
let yearDropdownRange = document.getElementById('year');
let rangeModalDropdowns = document.querySelectorAll('#range-modal .modal-dropdown');

let chargeLink = document.getElementById('chargeModal');
let chargeModal = document.getElementById('charge-modal');
let batterySizeDisplay = document.getElementById('batterySize');
let chargeSizeDisplay = document.getElementById('chargeLevel');
let targetChargeSizeDisplay = document.getElementById('targetChargeLevel');
let distanceDisplay = document.getElementById('distance');
let batterySizeInput = document.getElementById('batterySlider');
let chargeSizeInput = document.getElementById('chargeSlider');
let targetChargeSizeInput = document.getElementById('targetChargeSlider');
let distanceInput = document.getElementById('distanceSlider');
let chargingPowerInput = document.getElementById('chargingPower');
let consumptionInput = document.getElementById('energyConsumption');
let outputHours = document.getElementById('hours');
let outputMins = document.getElementById('minutes');
let outputHoursRight = document.getElementById('hours-right');
let outputMinsRight = document.getElementById('minutes-right');

const firstFocusableElement = chargeModal.querySelectorAll(focusableElements)[0];
const focusableContent = chargeModal.querySelectorAll(focusableElements);
const lastFocusableElement = chargeModal.querySelectorAll(focusableElements)[focusableContent.length - 1];

batterySizeDisplay.innerHTML = batterySizeInput.value;
chargeSizeDisplay.innerHTML = chargeSizeInput.value;
targetChargeSizeDisplay.innerHTML = targetChargeSizeInput.value;
distanceDisplay.innerHTML = targetChargeSizeInput.value;

let close = document.getElementsByClassName('close');

/* Focus Modal Script */
document.addEventListener('keydown', function(e) {
let isTabPressed = e.key === 'Tab' || e.keyCode === 9;

if (!isTabPressed) {
return;
}

if (e.shiftKey) { // if shift key pressed for shift + tab combination
if (document.activeElement === firstFocusableElement) {
  lastFocusableElement.focus(); // add focus for the last focusable element
  e.preventDefault();
}
} else { // if tab key is pressed
if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
  firstFocusableElement.focus(); // add focus for the first focusable element
  e.preventDefault();
}
}
});

firstFocusableElement.focus();
/* End of Focus Modal Script */

/*
rangeLink.addEventListener('click', function() {
    openModal(rangeModal);
});
*/

chargeLink.addEventListener('click', function() {
    openModal(chargeModal);
    batterySizeInput.focus();
});

document.addEventListener("keydown", function(e) {
    if (e.key === 'Escape') {
        closeChargeModal(chargeModal);
    }
 })

for(let i = 0; i < close.length; i++) {
    close[i].addEventListener('click', function() {
        closeChargeModal(rangeModal);
        closeChargeModal(chargeModal);
    });

    close[i].addEventListener('keydown', function(e) {
        console.log(e);
        if (e.keyCode == 13) {
            closeChargeModal(rangeModal);
            closeChargeModal(chargeModal);            
        }
    });
}

for(let i = 0; i < rangeModalDropdowns.length; i++) {
    rangeModalDropdowns[i].addEventListener('change', function(e) {
        if (makeDropdownRange.value !== 'None' &&
            modelDropdownRange.value !== 'None' &&
            trimDropdownRange.value !== 'None' &&
            yearDropdownRange.value !== 'None') {
                disableDropdownButton(false);
        } else if (dropdownButtons[0].disabled === false){
            disableDropdownButton(true);
        }
    });
}

batterySizeInput.oninput = function() {
    batterySizeDisplay.innerHTML = this.value;
    updateLeftOutput();
}

chargeSizeInput.oninput = function(e) {
    let stopSlide = neverExceedMax(chargeSizeInput, targetChargeSizeInput);

    if (stopSlide) {
        e.preventDefault();
    }
    chargeSizeDisplay.innerHTML = this.value;

    updateLeftOutput();
}

targetChargeSizeInput.oninput = function() {
    targetChargeSizeDisplay.innerHTML = this.value;
    setNewMax(chargeSizeInput, chargeSizeDisplay, targetChargeSizeInput);
    updateLeftOutput();
}

chargingPowerInput.oninput = function() {
    updateLeftOutput();
}

distanceInput.oninput = function() {
    distanceDisplay.innerHTML = distanceInput.value;
    updateRightOutput();
}

consumptionInput.oninput = function() {
    updateRightOutput();
}

function openModal(ele) {
    console.log("ele1",ele);
    if(ele){
        ele.style.display = 'block';
    }
    
}

function closeChargeModal(ele) {
    console.log("ele2",ele);
    ele.style.display = 'none';
}

function disableDropdownButton(bool) {
    for (let i = 0; i < dropdownButtons.length; i++) {
        dropdownButtons[i].disabled = bool;
    }
}

function updateLeftOutput() {
    let batteryValue = +batterySizeInput.value;
    let targetValue = +targetChargeSizeInput.value;
    let sizeValue = +chargeSizeInput.value;
    let powerValue = +chargingPowerInput.value;        

    let charging_Time = (batteryValue)*0.01*((targetValue)-(sizeValue))/((powerValue)*0.9);
    let hourDisplay = Math.floor(charging_Time);
    let minDisplay = Math.floor((charging_Time - Math.floor(charging_Time)) * 60);

    if (Number.isNaN(charging_Time)) {
        outputHours.innerHTML = 0;
        outputMins.innerHTML = 0;
    } else if (Number.isNaN(hourDisplay) || Number.isNaN(minDisplay)){
        outputHours.innerHTML = 0;
        outputMins.innerHTML = 0;
    } else {
        outputHours.innerHTML = hourDisplay;
        outputMins.innerHTML = minDisplay;
    }
}

function updateRightOutput() {
    let distanceValue = +distanceInput.value;
    let consumptionValue = +energyConsumption.value;
    let powerValue = +chargingPowerInput.value;

    let daily_charging_Time = distanceValue * consumptionValue * 0.01/(powerValue * 0.9);
    let hourDisplay = Math.floor(daily_charging_Time);
    let minDisplay = Math.floor((daily_charging_Time - Math.floor(daily_charging_Time)) * 60);

    if (Number.isNaN(daily_charging_Time)) {
        outputHoursRight.innerHTML = 0;
        outputMinsRight.innerHTML = 0;
    } else if (Number.isNaN(hourDisplay) || Number.isNaN(minDisplay)) {
        outputHoursRight.innerHTML = 0;
        outputHoursRight.innerHTML = 0;
    } else {
        outputHoursRight.innerHTML = hourDisplay;
        outputMinsRight.innerHTML = minDisplay;
    }
}

function setNewMax(targetEle, targetEleLabel, ele) {
    let targetVal = +targetEle.value;
    let eleVal = +ele.value;
    if (targetVal >= eleVal) {
        targetEle.value = eleVal - 1;
        targetEleLabel.innerHTML = targetEle.value;
    }
}

function neverExceedMax(targetEle, ele) {
    let stopSlide = false;
    let targetVal = +targetEle.value;
    let eleVal = +ele.value;

    if (targetVal >= eleVal) {
        targetEle.value = eleVal - 1;
        stopSlide = true;
    }

    return stopSlide;
}