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'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 + "]";
                }
            });
        });
    }
});

let taxContainerLinks = document.querySelectorAll('.tax-container-slide .primary-link');
let researchContainerLinks = document.querySelectorAll('.research-slide .primary-link');

for(let i = 0; i < taxContainerLinks.length; i++) {
    taxContainerLinks[i].addEventListener('click', function() {
        let event = taxContainerLinks[i].previousElementSibling.innerHTML.trim();
        console.log(event);        
        tealiumTaxLinkClick(event, taxContainerLinks[i].innerHTML.trim().split(' ').join('_').toLowerCase());
    })
}

for(let i = 0; i < researchContainerLinks.length; i++) {
    researchContainerLinks[i].addEventListener('click', function() {
        let event = researchContainerLinks[i].previousElementSibling.previousElementSibling.innerHTML.trim();
        console.log(event);
        let formattedEvent = event.trim().split(' ').join('_');
        tealiumResearchLinkClick(formattedEvent, researchContainerLinks[i].innerHTML.trim().split(' ').join('_').toLowerCase());
    });
}

function tealiumTaxLinkClick(event, eventLabel) {
    let clickdata = {
        "category_l1":"MLP",
        "category_l2":"EV",
        "category_l3":"(not set)",
        "category_l4":"(not set)",
        "event":event + "_page_click",
        "event_category":"EngagementType",
        "event_action":"EngagementType_MLP|||Click",
        "event_label":"" + eventLabel,
        "event_value":"1",
        "pagegroup":"mlp"            
    };

    window.utag_data = clickdata;
    window.utag.link(window.utag_data);
}

function tealiumResearchLinkClick(event, eventLabel) {
    let clickdata = {
        "category_l1":"MLP",
        "category_l2":"EV",
        "category_l3":"(not set)",
        "category_l4":"(not set)",
        "event":event + "_read_more_click",
        "event_category":"EngagementType",
        "event_action":"EngagementType_MLP|||Click",
        "event_label":"" + eventLabel,
        "event_value":"1",
        "pagegroup":"mlp"            
    };

    window.utag_data = clickdata;
    window.utag.link(window.utag_data);
}

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: false,
                dots: true,
                rows:0
            });
        }

            function addCarouselWithArrows(eleId) {
                $(eleId).slick({
                    mobileFirst: true,
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    arrows: true,
                    infinite: false,
                    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('researchSection');
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');                
        }

        if (check !== false && check.top) {
            tabBar.classList.add('mobile-sticky');
            console.log('Check');
        } else if (linkCheck !== false && !linkCheck.top) {
            tabBar.classList.remove('mobile-sticky');
        }
    } else {
        tabBar.classList.remove('mobile-sticky');
    }
});

for (let i = 0; i < headerTabs.length; i++) {
    headerTabs[i].addEventListener('click', function() {
        removeActive(headerTabs);
        headerTabs[i].classList.add('active');        
    });
}

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

function isOutOfViewport(elem) {
    // Get element's bounding
    if (elem == null ) {
        return false;
    }
    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;
}