', {\n id: player.id\n });\n player.$componentContainer.append(videoDomElement); // Initialize IFRAME Embedding using YT API\n\n if (typeof YT !== 'undefined') {\n player.playerObject = new YT.Player(player.id, {\n videoId: player.sourceId,\n height: '100%',\n width: '100%',\n playerVars: {\n modestbranding: 1,\n rel: 0,\n showinfo: 0,\n wmode: 'opaque',\n iv_load_policy: 3,\n autoplay: player.autoplay\n },\n events: {\n onReady: player.onPlayerReady,\n onStateChange: onPlayerStateChange\n }\n });\n player.initialized = true;\n }\n };\n\n player.onPlayerReady = function () {\n player.bindEvents();\n };\n\n player.bindEvents = function () {\n if (player.$closeButton) {\n player.$closeButton.on('click', function (event) {\n player.$componentTarget.removeClass(player.options.videoOpenClass);\n player.stop();\n });\n }\n };\n\n player.play = function () {\n clearInterval(window.percentageInterval);\n\n if (player.playerObject.pauseVideo) {\n player.playerObject.playVideo();\n }\n };\n\n player.pause = function () {\n clearInterval(window.percentageInterval);\n\n if (player.playerObject.pauseVideo) {\n player.playerObject.pauseVideo();\n }\n };\n\n player.stop = function () {\n clearInterval(window.percentageInterval);\n window.setVideoPercentages();\n\n if (player.playerObject.stopVideo) {\n player.playerObject.stopVideo();\n }\n };\n }\n\n function onPlayerStateChange(event) {\n // checks if tracking data is present\n if ($(event.target.getIframe()).parent().attr('data-video-tracking')) {\n var trackingData = JSON.parse($(event.target.getIframe()).parent().attr('data-video-tracking').split(\"'\").join('\"'));\n\n if (trackingData['Video Metadata'].video_title) {\n trackingData['Video Metadata'].video_title = event.target.getVideoData().title;\n }\n\n if (trackingData['Video Metadata'].video_event_duration) {\n trackingData['Video Metadata'].video_event_duration = event.target.getDuration();\n }\n\n if (trackingData['Video Metadata'].video_id) {\n trackingData['Video Metadata'].video_id = event.target.getVideoData().video_id;\n trackingData['Video Metadata'].video_link = event.target.getVideoUrl();\n } // deleting video_milestone attribute for play/pause events\n\n\n if (trackingData['Video Metadata'].video_milestone) {\n delete trackingData['Video Metadata'].video_milestone;\n } // Video Play\n\n\n if (event.data === YT.PlayerState.PLAYING) {\n if (trackingData['Video Metadata'].video_action) {\n trackingData['Video Metadata'].video_action = 'Play';\n }\n\n if (window.Acr && window.Acr.TrackingManager) {\n triggerClickActivity(trackingData);\n }\n\n clearInterval(window.percentageInterval); // Interval to check the percentages watched on the video\n\n window.percentageInterval = setInterval(function () {\n var currentPercentage = event.target.getCurrentTime() * 100 / event.target.getDuration();\n\n if (videoPercentages.length > 0 && videoPercentages[videoPercentages.length - 1] <= currentPercentage) {\n var videoCheckpoint = getCheckpointPercentage(currentPercentage);\n trackingData['Video Metadata'].video_milestone = Math.floor(currentPercentage) + '%';\n trackingData['Video Metadata'].video_action = 'milestone';\n\n if (window.Acr && window.Acr.TrackingManager) {\n triggerClickActivity(trackingData);\n }\n }\n }, 200);\n } else if (event.data === YT.PlayerState.PAUSED) {\n // video pause\n if (trackingData['Video Metadata'].video_action) {\n trackingData['Video Metadata'].video_action = 'Paused';\n }\n\n if (window.Acr && window.Acr.TrackingManager) {\n triggerClickActivity(trackingData);\n }\n\n clearInterval(window.percentageInterval);\n } else if (event.data === YT.PlayerState.ENDED) {\n // video end\n // sending 100% checkpoint event\n trackingData['Video Metadata'].video_action = 'milestone';\n trackingData['Video Metadata'].video_milestone = '100%';\n\n if (window.Acr && window.Acr.TrackingManager) {\n triggerClickActivity(trackingData);\n }\n\n clearInterval(window.percentageInterval);\n window.setVideoPercentages();\n event.target.stopVideo();\n }\n }\n }\n\n function getCheckpointPercentage(currentPercentage) {\n var checkpointPorcentage = 0;\n\n for (var i = videoPercentages.length - 1; i >= 0; i--) {\n if (currentPercentage > videoPercentages[i]) {\n checkpointPorcentage = videoPercentages.pop();\n } else {\n return checkpointPorcentage;\n }\n }\n }\n\n function triggerClickActivity(object) {\n if (window.Acr && window.Acr.TrackingManager) {\n window.Acr.TrackingManager.sendTrackingActivity(JSON.parse(JSON.stringify(object)));\n }\n }\n\n function init() {\n loadAPI();\n initPlayers();\n window.setVideoPercentages();\n }\n\n return {\n init: init,\n YouTubePlayerObject: YouTubePlayerObject,\n onPlayerStateChange: onPlayerStateChange\n };\n}();\n\"use strict\";\n\nAcr = window.Acr || {};\n\nAcr.WebVitals = function (window) {\n function sendPerformanceActivity(object) {\n if (window.Acr.trackingObject && !window.Acr.trackingObject.initialize_in_code) {\n var performanceObject = {\n Page: {\n page_name: Acr.trackingObject ? Acr.trackingObject.Page.page_name : '',\n full_url: window.location.href,\n device_name: '',\n viewport: '',\n browser: '',\n date: new Date()\n },\n WebVitals: {}\n };\n Object.keys(window.Acr.TrackingManager.webVitals).forEach(function (key) {\n var measure = {\n metric_name: window.Acr.TrackingManager.webVitals[key].name,\n metric_value: window.Acr.TrackingManager.webVitals[key].value,\n metric_delta: window.Acr.TrackingManager.webVitals[key].delta\n };\n performanceObject.WebVitals[key] = measure;\n });\n\n if (window.ModelData) {\n performanceObject.Model = {};\n performanceObject.Model.model_name = window.ModelData.model;\n performanceObject.Model.model_year = window.ModelData.modelYear;\n }\n\n Acr.TrackingManager.sendPerformanceActivity(performanceObject);\n }\n }\n\n function updateWebVitalsObject(object) {\n if (window && window.Acr && window.Acr.TrackingManager) {\n window.Acr.TrackingManager.webVitals[object.name] = object;\n }\n }\n\n function init() {\n var webVitals = window.webVitals || undefined;\n\n if (window.Acr && window.Acr.TrackingManager) {\n window.Acr.TrackingManager.webVitals = [];\n }\n\n var Acr = window.Acr || {};\n\n if (webVitals && Acr.isWebVitalsEnabled) {\n webVitals.getCLS(updateWebVitalsObject, true);\n webVitals.getFID(updateWebVitalsObject);\n webVitals.getLCP(updateWebVitalsObject, true);\n }\n\n window.addEventListener('beforeunload', function () {\n if (Acr && Acr.TrackingManager && Acr.TrackingManager.webVitals) {\n sendPerformanceActivity(Acr.TrackingManager.webVitals);\n }\n });\n }\n\n return {\n init: init\n };\n}(window);\n\naddEventListener('DOMContentLoaded', function () {\n Acr.WebVitals.init();\n});\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.Accessories = function ($element) {\n var currentBreakpoint;\n var $accessoriesSliders;\n\n function initSlick() {\n $accessoriesSliders = $($element).slick({\n dots: true,\n prevArrow: '',\n nextArrow: '',\n useTransform: true\n });\n }\n\n function removeSlick() {\n if ($accessoriesSliders) {\n $($element).slick('unslick');\n }\n }\n\n function attachResize() {\n $(window).off('resize', resize);\n $(window).resize(resize);\n }\n\n function resize() {\n var width = window.innerWidth;\n\n if (width < Constants.breakpoints.lg && currentBreakpoint !== 'small') {\n currentBreakpoint = 'small';\n initSlick();\n ResponsiveBackground.execute();\n } else if (width >= Constants.breakpoints.lg && currentBreakpoint !== 'large') {\n currentBreakpoint = 'large';\n removeSlick();\n }\n }\n\n function init() {\n attachResize();\n resize();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.AccordionNavigation = function () {\n var $navigation;\n var $navigationList;\n var $navigationItemClone;\n var isJustCta = false;\n var activeSelectorClass = '.active';\n var cloneClass = 'acr-accordion-navigation__clone';\n var expandedClass = 'expanded';\n var justCtaClass = 'just-cta';\n var navigationListSelectorClass = '.js-acr-accordion-navigation__items';\n var navigationItemSelectorClass = '.js-acr-accordion-navigation__item';\n\n function toggleAccordion(e) {\n e.preventDefault();\n var toogleNav = $navigation.classList.contains(expandedClass);\n\n if (toogleNav) {\n $navigationList.style.removeProperty('height');\n $navigation.classList.remove(expandedClass);\n } else {\n $navigation.classList.add(expandedClass);\n var navigationListSize = $navigationList.scrollHeight;\n var viewHeight = document.documentElement.clientHeight;\n var parentPositionSize = $navigationList.parentElement.offsetTop + $navigationList.parentElement.offsetHeight;\n var calcViewSize = viewHeight - parentPositionSize;\n var finalHeightSize = calcViewSize > navigationListSize ? calcViewSize : navigationListSize;\n $navigationList.style.height = finalHeightSize + 'px';\n }\n }\n\n function initSelectors(element) {\n $navigation = element;\n var navigationItemActive = $navigation.querySelector(navigationItemSelectorClass + activeSelectorClass);\n var navigationItemActiveLink = navigationItemActive.querySelector('.acr-accordion-navigation__item__link');\n var cloneActiveLink = navigationItemActiveLink.cloneNode(true);\n $navigationItemClone = document.createElement('span');\n $navigationItemClone.appendChild(cloneActiveLink);\n $navigationItemClone.classList.add(cloneClass);\n $navigationList = $navigation.querySelector(navigationListSelectorClass);\n $navigation.insertBefore($navigationItemClone, $navigationList);\n isJustCta = $navigation.classList.contains(justCtaClass);\n }\n\n function bindEvents() {\n if (!isJustCta) {\n $navigationItemClone.addEventListener('click', toggleAccordion);\n }\n }\n\n function init(element) {\n console.log('this is acr navigation');\n initSelectors(element);\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.CarouselText = function () {\n var $carouselText;\n var $carouselTextSwiperContainer;\n var $carouselNavigationItems;\n var $swiperPagination;\n var $sliderShadow;\n var $arrowLeft;\n var $arrowRight;\n var carouselTextSwiper;\n var matchMedia;\n var swiperContainerSelector = '.js-swiper-container';\n var swiperPaginationSelector = '.js-swiper-pagination';\n var arrowLeftSelector = '.js-arrow-left';\n var arrowRightSelector = '.js-arrow-right';\n var navigationItemSelector = '.js-carousel-text-nav-item';\n var sliderShadowSelector = '.js-slider-shadow';\n var navItemActiveClass = 'acr-carousel-text__nav-item--active'; // Initialize all HTML selectors\n\n function initSelectors(element) {\n $carouselText = element;\n $carouselTextSwiperContainer = $carouselText.querySelector(swiperContainerSelector);\n $carouselNavigationItems = $carouselText.querySelectorAll(navigationItemSelector);\n $swiperPagination = $carouselText.querySelector(swiperPaginationSelector);\n $sliderShadow = $carouselText.querySelector(sliderShadowSelector);\n $arrowLeft = $carouselText.querySelector(arrowLeftSelector);\n $arrowRight = $carouselText.querySelector(arrowRightSelector);\n } // Initialize all necessary global variables in the component\n\n\n function initGlobalVariables() {\n matchMedia = window.matchMedia('(min-width: ' + Constants.breakpoints.lg + 'px)');\n } // Initialize the swiper slider for the carouse-text\n\n\n function initCarouseTextSliderSwiper() {\n carouselTextSwiper = new Swiper($carouselTextSwiperContainer, {\n slidesPerView: 1,\n loop: true,\n pagination: {\n el: $swiperPagination,\n clickable: true\n },\n navigation: {\n nextEl: $arrowRight,\n prevEl: $arrowLeft\n },\n init: true\n }); // Every time the slide changes, the navigation item outside the carousel are updated (if the navigation item are available)\n\n carouselTextSwiper.on('slideChange', function () {\n var swiperIndex = carouselTextSwiper.realIndex;\n updateNavigationItems(swiperIndex);\n\n if (Acr.TrackingManager) {\n Acr.TrackingManager.sendCarouselActivity(event.currentTarget, carouselTextSwiper);\n }\n });\n } // Update the navigation item for the carousel text when the slide changes.\n\n\n function updateNavigationItems(swiperIndex) {\n $carouselNavigationItems.forEach(function (item) {\n var itemIndex = parseInt(item.getAttribute('data-slide-index'), 10);\n\n if (swiperIndex === itemIndex) {\n item.classList.add(navItemActiveClass);\n } else {\n item.classList.remove(navItemActiveClass);\n }\n });\n }\n\n function bindEvents() {\n // Events only for Desktop size\n if (Utility.isDesktop()) {\n assignNavigationItemsClickEvent();\n $arrowLeft.addEventListener('mouseover', showArrowShadow);\n $arrowRight.addEventListener('mouseover', showArrowShadow);\n $arrowLeft.addEventListener('mouseout', hideArrowShadow);\n $arrowRight.addEventListener('mouseout', hideArrowShadow);\n $arrowLeft.addEventListener('click', hideArrowShadow);\n $arrowRight.addEventListener('click', hideArrowShadow);\n } // Using matchMedia to check if it is desktop size, to avoid window.resize\n\n\n matchMedia.addListener(matchMediaHandler);\n } // If it is desktop size, add the click events to each navigation item, otherwise delete the click event\n\n\n function matchMediaHandler() {\n if (matchMedia.matches) {\n assignNavigationItemsClickEvent();\n $arrowLeft.addEventListener('mouseover', showArrowShadow);\n $arrowRight.addEventListener('mouseover', showArrowShadow);\n $arrowLeft.addEventListener('mouseout', hideArrowShadow);\n $arrowRight.addEventListener('mouseout', hideArrowShadow);\n $arrowLeft.addEventListener('click', hideArrowShadow);\n $arrowRight.addEventListener('click', hideArrowShadow);\n } else {\n $carouselNavigationItems.forEach(function (item) {\n item.removeEventListener('click', changeSwiperSlide);\n });\n $arrowLeft.removeEventListener('mouseover', showArrowShadow);\n $arrowRight.removeEventListener('mouseover', showArrowShadow);\n $arrowLeft.removeEventListener('mouseout', hideArrowShadow);\n $arrowRight.removeEventListener('mouseout', hideArrowShadow);\n $arrowLeft.removeEventListener('click', hideArrowShadow);\n $arrowRight.removeEventListener('click', hideArrowShadow);\n }\n } // Attachment of click events for each navigation item\n\n\n function assignNavigationItemsClickEvent() {\n $carouselNavigationItems.forEach(function (item) {\n item.addEventListener('click', changeSwiperSlide);\n });\n } // Switch to the swiper slide related to the item that was clicked, using the index of both elements\n\n\n function changeSwiperSlide() {\n event.preventDefault();\n var slideIndex = parseInt(this.getAttribute('data-slide-index'), 10);\n $carouselNavigationItems.forEach(function (item) {\n item.classList.remove(navItemActiveClass);\n });\n this.classList.add(navItemActiveClass);\n carouselTextSwiper.slideToLoop(slideIndex);\n } // Show arrow shadows when arrows hover\n\n\n function showArrowShadow() {\n $sliderShadow.style.zIndex = '2';\n $sliderShadow.style.opacity = '0.6';\n } // Hide arrow shadows when arrows hover\n\n\n function hideArrowShadow() {\n $sliderShadow.style.removeProperty('opacity');\n setTimeout(function () {\n $sliderShadow.style.removeProperty('z-index');\n }, 300);\n }\n\n function init(element) {\n initSelectors(element);\n initGlobalVariables();\n initCarouseTextSliderSwiper();\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.Drawer = function () {\n var $element;\n var hash;\n var drawerSection = '.js-drawer-section';\n var drawerBody = '.js-drawer-body';\n var drawerLink = '.js-drawer-link';\n var drawerIconMinus = '.js-drawer-icon-minus';\n var drawerIconPlus = '.js-drawer-icon-plus';\n\n function openDrawer(target) {\n var drawerElements;\n drawerElements = [].slice.call(target);\n drawerElements.forEach(function (drawerElement) {\n var $drawerElement;\n $drawerElement = $(drawerElement);\n $drawerElement.removeClass('acr-drawer__section--collapsed');\n $drawerElement.find(drawerBody).slideDown().removeClass('acr-drawer__body--collapsed');\n $drawerElement.find(drawerIconMinus).css('display', 'block');\n $drawerElement.find(drawerIconPlus).css('display', 'none');\n $drawerElement.find(drawerLink).attr('aria-expanded', 'true');\n });\n }\n\n function closeDrawer(target, noCloseId) {\n var drawerElements;\n drawerElements = [].slice.call(target);\n drawerElements.forEach(function (drawerElement) {\n var $drawerElement;\n $drawerElement = $(drawerElement);\n\n if (noCloseId !== '#' + $drawerElement.find(drawerBody).attr('id')) {\n $drawerElement.addClass('acr-drawer__section--collapsed');\n $drawerElement.find(drawerBody).slideUp().addClass('acr-drawer__body--collapsed');\n $drawerElement.find(drawerIconMinus).css('display', 'none');\n $drawerElement.find(drawerIconPlus).css('display', 'block');\n $drawerElement.find(drawerLink).attr('aria-expanded', 'false');\n }\n });\n }\n\n function onClickDrawer() {\n $element.find(drawerLink).on('click', function (e) {\n var target = $(this).closest(drawerSection);\n e.preventDefault();\n\n if (target.hasClass('acr-drawer__section--collapsed')) {\n openDrawer(target);\n } else {\n closeDrawer(target);\n }\n });\n }\n\n function initSelectors(element) {\n $element = $(element);\n hash = window.location.hash;\n }\n\n function bindEvents(element) {\n initSelectors(element);\n onClickDrawer();\n closeDrawer($element.find(drawerSection), hash);\n }\n\n function init(element) {\n bindEvents(element);\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\nvar Ut = window.Utility;\n\nAcr.Footer = function () {\n var languages = {\n en: {\n name: 'English',\n subDomain: 'www'\n },\n es: {\n name: 'Español',\n subDomain: 'spanish'\n },\n zh: {\n name: 'ä¸æ–‡',\n subDomain: 'chinese'\n }\n };\n var currentLanguage;\n var matchMedia;\n var hostname;\n var $footer;\n var $footerPanel;\n var $footerAccordion;\n var $collapseIcon;\n var $expandIcon;\n var $availableLanguages;\n var $footerAccordionContainer;\n var footerPanel = '.js-footer-panel';\n var footerAccordion = '.js-footer-accordion';\n var collapseIcon = '.js-icon-collapse';\n var expandIcon = '.js-icon-expand';\n var availableLanguage = '.js-available-language';\n var footerAccordionContainer = '.js-footer-accordion-container';\n\n function initSelectors(element) {\n $footer = element;\n $footerPanel = $footer.querySelector(footerPanel);\n $footerAccordion = $footer.querySelector(footerAccordion);\n $collapseIcon = $footer.querySelector(collapseIcon);\n $expandIcon = $footer.querySelector(expandIcon);\n $availableLanguages = $footer.querySelectorAll(availableLanguage);\n $footerAccordionContainer = $footer.querySelector(footerAccordionContainer);\n }\n\n function initGlobalVariables() {\n matchMedia = window.matchMedia('(min-width: ' + Constants.breakpoints.lg + 'px)');\n hostname = window.location.hostname;\n currentLanguage = 'English';\n }\n\n function bindEvents() {\n matchMedia.addListener(enableAccordion);\n $footerAccordionContainer.addEventListener('keydown', function (e) {\n if (e.key === 'Enter') {\n toggleAccordion();\n }\n });\n }\n\n function enableAccordion() {\n if (matchMedia.matches) {\n $footerAccordion.removeEventListener('click', toggleAccordion);\n $footerPanel.removeAttribute('style');\n $collapseIcon.removeAttribute('style');\n $expandIcon.removeAttribute('style');\n } else {\n $footerAccordion.addEventListener('click', toggleAccordion);\n }\n }\n\n function toggleAccordion() {\n Ut.slideToggle($footerPanel, 400);\n Ut.slideToggle($expandIcon);\n Ut.slideToggle($collapseIcon);\n }\n\n function updateLanguageLink() {\n Object.entries(languages).forEach(function (el) {\n if (hostname.indexOf(el[1].subDomain) !== -1) {\n currentLanguage = el[1].name;\n }\n });\n $availableLanguages.forEach(function (item) {\n var $item = item;\n\n if ($item.innerText === currentLanguage) {\n $item.style.textDecoration = 'underline';\n }\n });\n }\n\n function init(element) {\n initSelectors(element);\n initGlobalVariables();\n bindEvents();\n enableAccordion();\n updateLanguageLink();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\n/**\n * Module: GalleryDetail\n *\n * Calls Utility.isElementInViewIO in order to add Lazyloading\n *\n * Returned Functions: init, openDetailview\n *\n */\nvar Acr = Acr || {};\n\nAcr.GalleryDetail = function () {\n var $element;\n var $acrDetailVideoPlayer;\n var $acrDetailPictureSlick;\n var $acrDetailFilmstripSlick;\n var $acrDetailFilmstripPrev;\n var $acrDetailFilmstripNext;\n var $acrDetailCloseBtn;\n var $acrGalleryDetailFilmstrip;\n var $acrGalleryDetailFilmstripWrapper;\n var $acrDetailFilmstripItem;\n var $acrDetailIndex;\n var $acrDetailPictureShadow;\n var $galleryDetailText;\n var $showPictureInfoBtn;\n var $enlargePictureBtn;\n var $detailBackgroundImage;\n var $detailVideoWrapper;\n var $detailWrapper;\n var $pictureContainer;\n var $videoContainer;\n var $galleryDetailLightbox;\n var $hashLinks;\n var $documentBody;\n var $window;\n var direction = '';\n var resizeTimer;\n var ieResizeTimer;\n var ieOrWinEdge;\n var acrDetailVideoPlayerList;\n var acrDetailFilmstripItemClassName;\n var acrDetailFilmstripSlickClass = '.js-acr-detail-filmstrip-slick';\n var acrDetailCarouselSlickClass = '.js-acr-detail-carousel-slick';\n var acrDetailIndexClass = '.js-acr-detail-index';\n var acrDetailCloseBtnClass = '.js-acr-detail-close-btn';\n var svgDefiniion = 'http://www.w3.org/2000/svg';\n var acrDetailLoadedClass = 'acr-gallery-detail--loaded';\n var acrDetailOpenedClass = 'acr-gallery-detail--opened';\n var modalOpenClass = 'modal-open';\n var arrowRightClass = 'arrow-right';\n var arrowLeftClass = 'arrow-left';\n var acrDetailFilmstripItemClass = '.js-acr-detail-filmstrip-item';\n var acrDetailVideoPlayerClass = '.js-acr-detail-video';\n var acrDetailFilmstripPrevClass = '.js-acr-detail-filmstrip-prev';\n var acrDetailFilmstripNextClass = '.js-acr-detail-filmstrip-next';\n var acrGalleryDetailFilmstripClass = '.js-gallery-detail-filmstrip';\n var acrGalleryDetailFilmstripWrapperClass = '.js-gallery-detail-filmstrip-wrapper';\n var acrGalleryDetailTextClass = '.js-gallery-detail-text';\n var acrDetailhoverClass = 'js-shadow-hover';\n var acrDetailPictureShadowClass = '.acr-gallery-detail__picture-shadow';\n var detailWrapperClass = '.js-acr-detail-wrapper';\n var showPictureInfoBtnSelectorClass = '.js-show-picture-info-btn';\n var visibleShowPictureInfoBtnStyleClass = 'acr-gallery-detail__pic-info-btn-show--visible';\n var enlargePictureBtnSelectorClass = '.js-enlarge-picture-btn';\n var visibleEnlargePictureBtnStyleClass = 'acr-gallery-detail__pic-info-btn-enlarge--visible';\n var backgroundImageSelectorClass = '.js-gallery-detail-background-image';\n var videoWrapperSelectorClass = '.js-gallery-detail-video-wrapper';\n var pictureContainerSelectorClass = '.js-gallery-detail-picture-container';\n var videoContainerSelectorClass = '.js-gallery-detail-video-container';\n var lightboxSelectorClass = '.js-gallery-detail-lightbox';\n var detailWrapperModifierClass = 'acr-gallery-detail__wrapper--full';\n var backgroundImageModifierClass = 'acr-gallery-detail__background-image--large';\n var videoWrapperModifierClass = 'acr-gallery-detail__video-wrapper--large';\n var pictureContainerModifierClass = 'acr-gallery-detail__picture-container--large';\n var videoContainerModifierClass = 'acr-gallery-detail__video-container--large';\n var galleryDetailTextModifierClass = 'acr-gallery-detail__detail--hidden';\n var lightboxModifierClass = 'acr-gallery-detail__lightbox--large';\n var hashLinks = 'a[href*=\"#\"]';\n var fullViewPaddingTop = 0.51; // This is the padding top for full view of the \"acr-gallery-detail__background-image\" class that is in the scss file.\n\n var detailViewPaddingTop = 0.57; // This is the padding top for detail view of the \"acr-gallery-detail__background-image\" class that is in the scss file.\n\n function openDetailview(imageId, index, isCustomIndex) {\n // If isCustomIndex, the component opens the image associated with the imageId parameter\n var indexTarget;\n\n if (isCustomIndex) {\n var imageToGo = $acrDetailPictureSlick.find('#' + imageId);\n var imageIndex = imageToGo.data('index');\n indexTarget = imageIndex !== undefined ? imageIndex : 0;\n } else {\n indexTarget = index !== undefined ? index : 0;\n }\n\n $element.addClass(acrDetailOpenedClass);\n $documentBody.addClass(modalOpenClass);\n history.replaceState('', document.title, window.location.pathname + window.location.search);\n\n if (!$element.hasClass(acrDetailLoadedClass)) {\n initDetailSlick();\n initDetailAdditionalSelectors();\n attachFilmstripWidth();\n bindFilmstripEvents();\n bindDetailPictureEvents();\n startVideos();\n $element.addClass(acrDetailLoadedClass);\n }\n\n if (ieOrWinEdge) {\n $($window).on('resize', bindEdgeIEEvents);\n\n if (Utility.isDesktop()) {\n var detailWrapperWidth = $detailWrapper.outerWidth();\n var carouselHeight = parseInt(detailWrapperWidth * fullViewPaddingTop, 10);\n $detailWrapper.css('height', carouselHeight);\n }\n }\n\n slickDetailGoTo(indexTarget);\n slickFilmstripGoTo(indexTarget);\n attachKeyboardInput();\n $($window).on('resize', modalResizeHandler);\n $showPictureInfoBtn.attr('slide-index', 'Slide ' + (indexTarget + 1));\n $enlargePictureBtn.attr('slide-index', 'Slide ' + (indexTarget + 1));\n }\n\n function updateIndex(number) {\n var currentNumber = number || 0;\n $acrDetailIndex.text(currentNumber);\n }\n\n function goToNextPage() {\n var currentItems;\n var currentVisibleItems;\n var currentSlide;\n var filmstripWidth;\n var filmstripItemWidth;\n var slideMargin = 5;\n filmstripWidth = $acrDetailFilmstripSlick.width();\n filmstripItemWidth = $acrDetailFilmstripItem.width();\n currentSlide = $acrDetailFilmstripSlick.slick('slickCurrentSlide');\n currentItems = $acrDetailFilmstripItem.length;\n currentVisibleItems = Math.round(filmstripWidth / (filmstripItemWidth + slideMargin));\n slickFilmstripGoTo((currentVisibleItems + currentSlide) % currentItems);\n }\n\n function goToPrevPage() {\n var currentItems;\n var currentVisibleItems;\n var currentSlide;\n var filmstripWidth;\n var filmstripItemWidth;\n var position;\n var slideMargin = 5;\n filmstripWidth = $acrDetailFilmstripSlick.width();\n filmstripItemWidth = $acrDetailFilmstripItem.width();\n currentSlide = $acrDetailFilmstripSlick.slick('slickCurrentSlide');\n currentItems = $acrDetailFilmstripItem.length;\n currentVisibleItems = Math.round(filmstripWidth / (filmstripItemWidth + slideMargin));\n position = currentSlide - currentVisibleItems;\n slickFilmstripGoTo(position < 0 ? currentItems + position : position);\n }\n\n function slickFilmstripGoTo(index, dontAnimate) {\n var dontAnimateTransition = dontAnimate || true;\n var filmstripWidth = $acrDetailFilmstripSlick.width();\n var filmstripItemWidth = $acrDetailFilmstripItem.width();\n\n if (filmstripItemWidth * $acrDetailFilmstripItem.length > filmstripWidth) {\n $acrDetailFilmstripSlick.slick('slickGoTo', index, dontAnimateTransition);\n }\n\n executeLazyLoading();\n }\n\n function executeLazyLoading() {\n var imagesToLoad = [].slice.call(document.querySelectorAll(acrDetailFilmstripItemClass + ' img[loading=\"lazy\"]'));\n Utility.initLazyLoadingIO(imagesToLoad, Acr.LazyLoadingHelper.loadImage);\n }\n\n function slickDetailGoTo(index, dontAnimate) {\n var dontAnimateTransition = dontAnimate || true;\n $acrDetailPictureSlick.slick('slickGoTo', index, dontAnimateTransition);\n }\n\n function addFakeSlickCurrent() {\n var index;\n index = $acrDetailPictureSlick.find('.slick-current').attr('data-slick-index');\n $acrDetailFilmstripSlick.find('.slick-slide').removeClass('slick-fake-current');\n $acrDetailFilmstripSlick.find('[data-index=\"' + index + '\"]').addClass('slick-fake-current');\n }\n\n function isSelectedItemVisible() {\n var currentVisibleItems;\n var minIndex;\n var maxIndex;\n var currentIndex;\n var fakeDataIndex;\n var filmstripWidth;\n var filmstripItemWidth;\n var slideMargin = 5;\n fakeDataIndex = $acrDetailFilmstripSlick.find('.slick-fake-current.slick-active').attr('data-slick-index');\n filmstripWidth = $acrDetailFilmstripSlick.width();\n filmstripItemWidth = $acrDetailFilmstripItem.width();\n minIndex = $acrDetailFilmstripSlick.slick('slickCurrentSlide');\n currentVisibleItems = Math.round(filmstripWidth / (filmstripItemWidth + slideMargin));\n maxIndex = currentVisibleItems + minIndex;\n currentIndex = fakeDataIndex;\n\n if (currentIndex) {\n return !(currentIndex >= maxIndex || currentIndex < minIndex);\n }\n\n return false;\n }\n\n function getPagePosition(direction) {\n var currentDirection;\n var index;\n var filmstripWidth;\n var filmstripItemWidth;\n var currentVisibleItems;\n var currentItems;\n var slideOffset;\n var slideMargin = 5;\n currentDirection = direction === 'left' ? 'left' : 'right';\n filmstripWidth = $acrDetailFilmstripSlick.width();\n filmstripItemWidth = $acrDetailFilmstripItem.width();\n index = $acrDetailFilmstripSlick.find('.slick-fake-current').attr('data-index');\n currentItems = $acrDetailFilmstripItem.length;\n currentVisibleItems = Math.round(filmstripWidth / (filmstripItemWidth + slideMargin));\n\n if (currentDirection === 'right') {\n return index;\n }\n\n index = index - currentVisibleItems + 1;\n slideOffset = currentItems + ((currentVisibleItems + index) % currentItems - currentVisibleItems);\n return index > 0 ? index : slideOffset;\n }\n\n function addModalMeasures() {\n var filmstripHeight;\n var carouselHeight;\n var galleryDetailTextWidth;\n var detailWrapperWidth;\n filmstripHeight = $acrGalleryDetailFilmstrip.outerHeight();\n galleryDetailTextWidth = $galleryDetailText.outerWidth();\n detailWrapperWidth = $detailWrapper.outerWidth();\n\n if (Utility.isDesktop()) {\n if ($detailWrapper.hasClass(detailWrapperModifierClass)) {\n $pictureContainer.css('width', detailWrapperWidth);\n $videoContainer.css('width', detailWrapperWidth);\n $detailBackgroundImage.addClass(backgroundImageModifierClass);\n $detailVideoWrapper.addClass(videoWrapperModifierClass);\n $galleryDetailText.css('left', detailWrapperWidth);\n carouselHeight = parseInt(detailWrapperWidth * fullViewPaddingTop, 10);\n $detailWrapper.css('height', carouselHeight);\n $galleryDetailLightbox.css('height', carouselHeight);\n $enlargePictureBtn.removeClass(visibleEnlargePictureBtnStyleClass);\n $showPictureInfoBtn.addClass(visibleShowPictureInfoBtnStyleClass);\n } else {\n $pictureContainer.css('width', detailWrapperWidth - galleryDetailTextWidth);\n $videoContainer.css('width', detailWrapperWidth - galleryDetailTextWidth);\n $detailBackgroundImage.removeClass(backgroundImageModifierClass);\n $detailVideoWrapper.removeClass(videoWrapperModifierClass);\n $galleryDetailText.css('left', detailWrapperWidth - galleryDetailTextWidth);\n carouselHeight = parseInt((detailWrapperWidth - galleryDetailTextWidth) * detailViewPaddingTop, 10);\n $detailWrapper.css('height', filmstripHeight + carouselHeight);\n $galleryDetailLightbox.css('height', carouselHeight);\n $showPictureInfoBtn.removeClass(visibleShowPictureInfoBtnStyleClass);\n $enlargePictureBtn.addClass(visibleEnlargePictureBtnStyleClass);\n }\n } else {\n removeEdgeIEInlineStyles();\n $detailBackgroundImage.removeClass(backgroundImageModifierClass);\n $detailVideoWrapper.removeClass(videoWrapperModifierClass);\n }\n }\n\n function removeEdgeIEInlineStyles() {\n $pictureContainer.removeAttr('style');\n $videoContainer.removeAttr('style');\n $galleryDetailText.removeAttr('style');\n $detailWrapper.removeAttr('style');\n $galleryDetailLightbox.removeAttr('style');\n }\n\n function bindEdgeIEEvents() {\n clearTimeout(ieResizeTimer);\n ieResizeTimer = setTimeout(function () {\n addModalMeasures();\n }, 250);\n }\n\n function bindDetailPictureEvents() {\n $acrDetailPictureSlick.on('afterChange', function () {\n var isSelectedItemVisibleFlag;\n var index;\n pauseVideos();\n addFakeSlickCurrent();\n isSelectedItemVisibleFlag = isSelectedItemVisible();\n\n if (!isSelectedItemVisibleFlag && direction === 'right') {\n index = getPagePosition(direction);\n slickFilmstripGoTo(index);\n } else if (!isSelectedItemVisibleFlag && direction === 'left') {\n index = getPagePosition(direction);\n slickFilmstripGoTo(index);\n }\n });\n $acrDetailPictureSlick.on('beforeChange', function (event, slick, currentSlide, nextSlide) {\n var decl = currentSlide - nextSlide;\n\n if (decl === 1 || decl === (slick.slideCount - 1) * -1) {\n direction = 'left';\n } else {\n direction = 'right';\n }\n\n updateIndex(nextSlide + 1);\n $showPictureInfoBtn.attr('slide-index', 'Slide ' + (nextSlide + 1));\n $enlargePictureBtn.attr('slide-index', 'Slide ' + (nextSlide + 1));\n $acrDetailPictureShadow.removeAttr('style');\n });\n $('.' + acrDetailhoverClass).hover(function () {\n $acrDetailPictureShadow.css('opacity', 0.6);\n }, function () {\n $acrDetailPictureShadow.removeAttr('style');\n });\n }\n\n function bindFilmstripEvents() {\n $acrDetailFilmstripSlick.on('click', acrDetailFilmstripItemClassName, function (e) {\n e.preventDefault();\n var $target;\n var index;\n $target = $(this);\n index = $target.data('index');\n slickDetailGoTo(index, false);\n addFakeSlickCurrent();\n });\n $acrDetailFilmstripNext.on('click', function (e) {\n e.preventDefault();\n goToNextPage();\n });\n $acrDetailFilmstripPrev.on('click', function (e) {\n e.preventDefault();\n goToPrevPage();\n });\n }\n\n function initPictureInfoBtns() {\n if (!ieOrWinEdge) {\n $showPictureInfoBtn.on('click', function (event) {\n event.preventDefault();\n showPictureInfoHandler();\n });\n $enlargePictureBtn.on('click', function (event) {\n event.preventDefault();\n enlargePictureHandler();\n });\n } else {\n $showPictureInfoBtn.on('click', function (event) {\n event.preventDefault();\n showPictureInfoIEHandler();\n });\n $enlargePictureBtn.on('click', function (event) {\n event.preventDefault();\n enlargePictureIEHandler();\n });\n }\n }\n\n function showPictureInfoHandler() {\n $detailWrapper.removeClass(detailWrapperModifierClass);\n $pictureContainer.removeClass(pictureContainerModifierClass);\n $videoContainer.removeClass(videoContainerModifierClass);\n $detailBackgroundImage.removeClass(backgroundImageModifierClass);\n $detailVideoWrapper.removeClass(videoWrapperModifierClass);\n $galleryDetailText.removeClass(galleryDetailTextModifierClass);\n $galleryDetailLightbox.removeClass(lightboxModifierClass);\n $showPictureInfoBtn.removeClass(visibleShowPictureInfoBtnStyleClass);\n $enlargePictureBtn.addClass(visibleEnlargePictureBtnStyleClass);\n }\n\n function enlargePictureHandler() {\n $detailWrapper.addClass(detailWrapperModifierClass);\n $detailBackgroundImage.addClass(backgroundImageModifierClass);\n $detailVideoWrapper.addClass(videoWrapperModifierClass);\n $pictureContainer.addClass(pictureContainerModifierClass);\n $videoContainer.addClass(videoContainerModifierClass);\n $galleryDetailText.addClass(galleryDetailTextModifierClass);\n $galleryDetailLightbox.addClass(lightboxModifierClass);\n $enlargePictureBtn.removeClass(visibleEnlargePictureBtnStyleClass);\n $showPictureInfoBtn.addClass(visibleShowPictureInfoBtnStyleClass);\n }\n\n function showPictureInfoIEHandler() {\n $detailWrapper.removeClass(detailWrapperModifierClass);\n addModalMeasures();\n }\n\n function enlargePictureIEHandler() {\n $detailWrapper.addClass(detailWrapperModifierClass);\n addModalMeasures();\n }\n\n function initCloseBtn() {\n $acrDetailCloseBtn.on('click', function (event) {\n event.preventDefault();\n closeHandler();\n });\n }\n\n function closeHandler() {\n $documentBody.removeClass(modalOpenClass);\n $element.removeClass(acrDetailOpenedClass);\n stopVideos();\n $(document).off('keyup', keyboardHandler);\n $($window).off('resize', modalResizeHandler);\n $($window).off('resize', bindEdgeIEEvents);\n enlargePictureHandler();\n\n if (ieOrWinEdge) {\n removeEdgeIEInlineStyles();\n }\n }\n\n function initDeeplink() {\n $hashLinks.on('click', function (event) {\n var currentUrl = window.location.pathname;\n currentUrl = currentUrl.substr(currentUrl.length - 1) === '/' ? currentUrl.pop() : currentUrl;\n\n if (currentUrl === event.target.pathname) {\n $documentBody.removeClass(modalOpenClass);\n $element.removeClass(acrDetailOpenedClass);\n stopVideos();\n }\n });\n }\n\n function initSelectors(element) {\n $element = $(element);\n $acrDetailPictureSlick = $element.find(acrDetailCarouselSlickClass);\n $acrDetailFilmstripSlick = $element.find(acrDetailFilmstripSlickClass);\n $acrDetailVideoPlayer = $element.find(acrDetailVideoPlayerClass);\n $acrDetailCloseBtn = $element.find(acrDetailCloseBtnClass);\n $acrDetailFilmstripNext = $element.find(acrDetailFilmstripNextClass);\n $acrDetailFilmstripPrev = $element.find(acrDetailFilmstripPrevClass);\n $acrDetailFilmstripItem = $element.find(acrDetailFilmstripItemClass);\n $acrDetailIndex = $element.find(acrDetailIndexClass);\n $acrDetailPictureShadow = $element.find(acrDetailPictureShadowClass);\n $acrGalleryDetailFilmstrip = $element.find(acrGalleryDetailFilmstripClass);\n $acrGalleryDetailFilmstripWrapper = $element.find(acrGalleryDetailFilmstripWrapperClass);\n $showPictureInfoBtn = $element.find(showPictureInfoBtnSelectorClass);\n $enlargePictureBtn = $element.find(enlargePictureBtnSelectorClass);\n $hashLinks = $element.find(hashLinks);\n $documentBody = $('body');\n $window = window;\n }\n\n function initDetailAdditionalSelectors() {\n $detailWrapper = $element.find(detailWrapperClass);\n $detailBackgroundImage = $element.find(backgroundImageSelectorClass);\n $detailVideoWrapper = $element.find(videoWrapperSelectorClass);\n $pictureContainer = $element.find(pictureContainerSelectorClass);\n $videoContainer = $element.find(videoContainerSelectorClass);\n $galleryDetailText = $element.find(acrGalleryDetailTextClass);\n $galleryDetailLightbox = $element.find(lightboxSelectorClass);\n }\n\n function initGlobalVariables() {\n acrDetailVideoPlayerList = [];\n acrDetailFilmstripItemClassName = acrDetailFilmstripItemClass;\n ieOrWinEdge = Utility.isIE11() || Utility.isWinEdge();\n }\n\n function createArrow(orientation, icon, className) {\n var $arrowContainer;\n var arrowContainer;\n var $svg;\n var svg;\n var use;\n var orientationTarget;\n var iconTarget;\n var customClass;\n orientationTarget = orientation !== undefined ? orientation : 'next';\n customClass = className !== undefined ? ' ' + className : '';\n iconTarget = icon !== undefined ? icon : arrowRightClass;\n svg = document.createElementNS(svgDefiniion, 'svg');\n $svg = $(svg);\n use = document.createElement('use');\n $svg.attr('class', 'acr-icon');\n $svg.attr('viewBox', '0 0 26 26');\n use.setAttribute('xlink:href', '#' + iconTarget);\n $svg.append(use);\n $svg.first().append(orientationTarget);\n arrowContainer = document.createElement('div');\n $arrowContainer = $(arrowContainer);\n $arrowContainer.attr('class', 'slick-arrow slick-' + orientationTarget + customClass);\n $arrowContainer.append($svg[0].outerHTML || new XMLSerializer().serializeToString($svg[0]).replace('NS1:', ''));\n return $arrowContainer[0].outerHTML;\n }\n\n function stopVideos() {\n for (var x = 0; x < acrDetailVideoPlayerList.length; x++) {\n var $target;\n $target = acrDetailVideoPlayerList[x];\n\n if ($target.stop != null) {\n $target.stop();\n }\n }\n }\n\n function pauseVideos() {\n for (var x = 0; x < acrDetailVideoPlayerList.length; x++) {\n var $target;\n $target = acrDetailVideoPlayerList[x];\n\n if ($target.stop != null) {\n $target.pause();\n }\n }\n }\n\n function startVideos() {\n for (var x = 0; x < $acrDetailVideoPlayer.length; x++) {\n var $target;\n var targetId;\n $target = $($acrDetailVideoPlayer[x]);\n targetId = $target.id;\n var videoID = $target.data('video-src');\n var container = $target;\n var autoplay = false;\n var player = new Acr.YouTubeManager.YouTubePlayerObject(videoID, null, container, container, autoplay);\n player.init();\n acrDetailVideoPlayerList[x] = player;\n }\n }\n\n function initDetailSlick() {\n // Init Slick for Detail Picture\n $acrDetailPictureSlick.slick({\n slidesToShow: 1,\n slidesToScroll: 1,\n mobileFirst: true,\n infinite: true,\n responsive: [{\n breakpoint: 0,\n settings: {\n draggable: true\n }\n }, {\n breakpoint: 768,\n settings: {\n draggable: false\n }\n }],\n nextArrow: createArrow('next', arrowRightClass, acrDetailhoverClass),\n prevArrow: createArrow('prev', arrowLeftClass, acrDetailhoverClass)\n });\n }\n\n function initFilsmtripSlick(slidesToShowParam) {\n // Init Slick for Filmstrip\n $acrDetailFilmstripSlick.slick({\n slidesToShow: slidesToShowParam,\n variableWidth: true,\n slidesToScroll: 1,\n mobileFirst: true,\n infinite: true,\n dots: false,\n responsive: [{\n breakpoint: 0,\n settings: {\n draggable: true,\n arrows: false\n }\n }, {\n breakpoint: 1024,\n settings: {\n draggable: false,\n arrows: false,\n slidesToScroll: 1\n }\n }]\n });\n }\n\n function modalResizeHandler() {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(function () {\n $acrDetailFilmstripSlick.slick('unslick');\n attachFilmstripWidth();\n }, 250);\n }\n\n function attachFilmstripWidth() {\n // Calculate how many items can be displayed on the filmstrip, if the total images are less the\n // than the calculated number, the images will be centered on the available space\n var filmstripItemWidth;\n var filmstripItemLength;\n var filmstripWidth;\n var currentVisibleItems;\n var slideMargin = 5;\n filmstripItemWidth = $acrDetailFilmstripItem.width();\n filmstripItemLength = $acrDetailFilmstripItem.not('.slick-cloned').length;\n $acrGalleryDetailFilmstripWrapper.css('width', '');\n filmstripWidth = $acrDetailFilmstripSlick.width();\n currentVisibleItems = Math.round(filmstripWidth / (filmstripItemWidth + slideMargin));\n\n if (filmstripItemLength <= currentVisibleItems) {\n $acrGalleryDetailFilmstripWrapper.css('width', filmstripItemLength * (filmstripItemWidth + slideMargin));\n }\n\n initFilsmtripSlick(currentVisibleItems);\n }\n\n function attachKeyboardInput() {\n $(document).on('keyup', keyboardHandler);\n }\n\n function keyboardHandler(e) {\n switch (e.which) {\n case 27:\n // esc key\n closeHandler();\n break;\n\n case 37:\n // left arrow\n $acrDetailPictureSlick.slick('slickPrev');\n break;\n\n case 39:\n // right arrow\n $acrDetailPictureSlick.slick('slickNext');\n break;\n }\n }\n\n function bindInitialEvents() {\n initCloseBtn();\n initDeeplink();\n initPictureInfoBtns();\n }\n\n function init(element) {\n initSelectors(element);\n initGlobalVariables();\n bindInitialEvents();\n }\n\n return {\n init: init,\n openDetailview: openDetailview\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.GallerySlider = function () {\n var $gallerySlider;\n var $gallerySwiperContainer;\n var $gallerySliderItems;\n var $swiperPagination;\n var $arrowLeft;\n var $arrowRight;\n var $gallerySliderDetail;\n var gallerySwiper;\n var acrGalleryDetail;\n var galleryDetailId;\n var mobilePaginationType;\n var gallerySliderItemSelector = '.js-gallery-slider-item';\n var swiperContainerSelector = '.js-swiper-container';\n var swiperPaginationSelector = '.js-swiper-pagination';\n var arrowLeftSelector = '.js-arrow-left';\n var arrowRightSelector = '.js-arrow-right';\n var mobileMaxCards = 9; // Maximum card limit to show dots pagination, if the number of cards is greater, fractional pagination is shown\n // Initialize all HTML selectors\n\n function initSelectors(element) {\n $gallerySlider = element;\n $gallerySwiperContainer = $gallerySlider.querySelector(swiperContainerSelector);\n $swiperPagination = $gallerySlider.querySelector(swiperPaginationSelector);\n $arrowLeft = $gallerySlider.querySelector(arrowLeftSelector);\n $arrowRight = $gallerySlider.querySelector(arrowRightSelector);\n } // Initialize all necessary global variables in the component\n\n\n function initGlobalVariables() {\n var numberOfCards = $gallerySlider.querySelectorAll(gallerySliderItemSelector).length;\n mobilePaginationType = numberOfCards > mobileMaxCards ? 'fraction' : 'bullets';\n } // Initialize the swiper slider for the gallery\n\n\n function initGallerySliderSwiper() {\n gallerySwiper = new Swiper($gallerySwiperContainer, {\n slidesPerView: 1,\n spaceBetween: 27,\n // 27px of margin\n loop: true,\n pagination: {\n el: $swiperPagination,\n type: mobilePaginationType,\n clickable: true\n },\n navigation: {\n nextEl: $arrowRight,\n prevEl: $arrowLeft\n },\n breakpoints: {\n // when window width is >= 768px\n 768: {\n slidesPerView: 2,\n slidesPerGroup: 2,\n pagination: {\n el: $swiperPagination,\n type: 'bullets',\n clickable: true\n }\n },\n // when window width is >= 1024px\n 1024: {\n slidesPerView: 3,\n slidesPerGroup: 3,\n pagination: {\n el: $swiperPagination,\n type: 'bullets',\n clickable: true\n }\n },\n // when window width is >= 1400px\n 1400: {\n slidesPerView: 4,\n slidesPerGroup: 4,\n pagination: {\n el: $swiperPagination,\n type: 'bullets',\n clickable: true\n }\n }\n },\n init: true\n });\n gallerySwiper.on('slideChange', function () {\n if (Acr.TrackingManager && event.type !== 'resize') {\n Acr.TrackingManager.sendCarouselActivity(event.currentTarget, this);\n }\n });\n $gallerySliderItems = $gallerySlider.querySelectorAll(gallerySliderItemSelector);\n } // Initialize the gallery detail component\n\n\n function initGalleryDetail() {\n galleryDetailId = $gallerySlider.getAttribute('data-gallery-detail');\n\n if (galleryDetailId !== undefined) {\n acrGalleryDetail = new Acr.GalleryDetail();\n $gallerySliderDetail = document.getElementById(galleryDetailId);\n acrGalleryDetail.init($gallerySliderDetail);\n }\n }\n\n function bindEvents() {\n // Attachment of click events for each image item\n $gallerySliderItems.forEach(function (item) {\n item.addEventListener('click', openGalleryDetail);\n });\n } // Function to open the gallery details every time an item is clicked\n\n\n function openGalleryDetail() {\n if (galleryDetailId !== undefined) {\n var imageId = this.getAttribute('data-image-id');\n var index = this.getAttribute('data-index');\n acrGalleryDetail.openDetailview(imageId, index, true); // We set isCustomIndex to 'true', because the component could open a gallery details with more images than those shown in the slider\n }\n }\n\n function reset() {\n gallerySwiper.update();\n }\n\n function init(element) {\n initSelectors(element);\n initGlobalVariables();\n initGallerySliderSwiper();\n initGalleryDetail();\n bindEvents();\n }\n\n return {\n init: init,\n reset: reset\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.HeroVideo = function () {\n var $heroVideo;\n var $playButton;\n var $videoTags;\n var $videoPlayerContainer;\n var $firstBackground;\n var $secondBackground;\n var videoPlayer;\n var hiddenClass = 'hidden';\n var playButtonSelector = '.js-play-button';\n var videoTagSelector = '.js-video-tag';\n var videoPlayerContainerSelector = '.js-video-player-container';\n var firstBackgroundSelector = '.js-first-background';\n var secondBackgroundSelector = '.js-second-background';\n var videoAsBackgroundClass = 'acr-hero-video--background'; // Initialize all HTML selectors\n\n function initSelectors(element) {\n $heroVideo = element;\n $playButton = $heroVideo.querySelector(playButtonSelector);\n $videoTags = $heroVideo.querySelectorAll(videoTagSelector);\n $videoPlayerContainer = $heroVideo.querySelector(videoPlayerContainerSelector);\n $firstBackground = $heroVideo.querySelector(firstBackgroundSelector);\n $secondBackground = $heroVideo.querySelector(secondBackgroundSelector);\n }\n\n function initVideoPlayer() {\n if ($videoPlayerContainer) {\n var videoType = $videoPlayerContainer.getAttribute('data-video-type');\n var videoId = $videoPlayerContainer.getAttribute('data-video-id');\n var loop = $videoPlayerContainer.getAttribute('data-video-loop');\n var autoplay = $videoPlayerContainer.getAttribute('data-video-autoplay');\n var muted = $videoPlayerContainer.getAttribute('data-video-muted');\n var background = $heroVideo.classList.contains(videoAsBackgroundClass);\n\n if (videoType === 'vimeo') {\n videoPlayer = new Acr.VimeoPlayerManager.vimeoPlayerObject(videoId, $videoPlayerContainer, autoplay, background, loop, muted);\n } else {\n window.onYouTubeIframeAPIReady = function () {\n var container = $($videoPlayerContainer); // Convert the \"videoPlayerContainer\" into a jQuery object because it is necessary for the YouTube Manager\n\n videoPlayer = new Acr.YouTubeManager.YouTubePlayerObject(videoId, null, container, container, autoplay);\n videoPlayer.init();\n };\n }\n }\n }\n\n function bindEvents() {\n if ($playButton) {\n // Event for the play button\n $playButton.addEventListener('click', playButtonClickHandler);\n $playButton.addEventListener('keypress', function (e) {\n if (e.key === 'Enter') {\n playButtonClickHandler();\n }\n });\n }\n\n if ($videoTags.length > 0) {\n // Event triggered when MP4 video ends\n $videoTags.forEach(function (video) {\n video.addEventListener('ended', endedVideoHandler);\n });\n }\n }\n\n function playButtonClickHandler() {\n $firstBackground.classList.add(hiddenClass);\n $secondBackground.classList.remove(hiddenClass);\n $playButton.classList.add(hiddenClass);\n\n if ($videoTags.length > 0) {\n $videoTags.forEach(function (video) {\n video.classList.remove(hiddenClass);\n video.play();\n });\n } else {\n $videoPlayerContainer.classList.remove(hiddenClass);\n videoPlayer.play();\n }\n }\n\n function endedVideoHandler() {\n $videoTags.forEach(function (video) {\n video.classList.add(hiddenClass);\n });\n $secondBackground.classList.add(hiddenClass);\n $firstBackground.classList.remove(hiddenClass);\n $playButton.classList.remove(hiddenClass);\n }\n\n function init(element) {\n initSelectors(element);\n initVideoPlayer();\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.HorizontalMultitab = function () {\n var $horizontalMultitab;\n var $horizontalMultitabTabs;\n var $horizontalMultitabTabsContent;\n var $desktopMedia;\n var horizontalMultitabCurrentTheme;\n var tabSelectorClass = '.js-multitab-tab-item';\n var tabContentSelectorClass = '.js-multitab-tab-content';\n var desktopMediaSelectorClass = '.js-desktop-media';\n var tabActiveClass = 'acr-horizontal-multitab__tab-item--active';\n var tabContentActiveClass = 'acr-horizontal-multitab__tab-content--active';\n var desktopMediaActiveClass = 'acr-horizontal-multitab__desktop-media--active';\n var jsModuleClass = '.js-module';\n var lightTheme = 'light-theme';\n\n function initSelectors(element) {\n $horizontalMultitab = element;\n $horizontalMultitabTabs = $horizontalMultitab.querySelectorAll(tabSelectorClass);\n $horizontalMultitabTabsContent = $horizontalMultitab.querySelectorAll(tabContentSelectorClass);\n $desktopMedia = $horizontalMultitab.querySelectorAll(desktopMediaSelectorClass);\n }\n\n function bindEvents() {\n // Attachment of click events for each of the tabs\n $horizontalMultitabTabs.forEach(function (tab) {\n tab.addEventListener('click', tabClickHandler);\n });\n } // Function that is called when a tab is clicked\n\n\n function tabClickHandler() {\n var clickedTabId = this.getAttribute('tab-id');\n updateTabsStatus(clickedTabId);\n updateDesktopMedia(clickedTabId);\n\n if (horizontalMultitabCurrentTheme) {\n updateTheme(clickedTabId);\n }\n\n resetContent(clickedTabId);\n } // Function to set a tab and its content as an \"active\" tab when a new tab is clicked.\n\n\n function updateTabsStatus(paramTargetTab) {\n $horizontalMultitabTabs.forEach(function (tab) {\n var tabId = tab.getAttribute('tab-id');\n\n if (tabId === paramTargetTab) {\n tab.classList.add(tabActiveClass);\n } else {\n tab.classList.remove(tabActiveClass);\n }\n });\n $horizontalMultitabTabsContent.forEach(function (tabContent) {\n var tabContentId = tabContent.getAttribute('id');\n\n if (tabContentId === paramTargetTab) {\n tabContent.classList.add(tabContentActiveClass);\n } else {\n tabContent.classList.remove(tabContentActiveClass);\n }\n });\n } // Function to change a desktop media element as \"active\" when a new tab is clicked.\n\n\n function updateDesktopMedia(paramTargetTab) {\n $desktopMedia.forEach(function (item) {\n var relatedTabId = item.getAttribute('related-tab-id');\n\n if (relatedTabId === paramTargetTab) {\n item.classList.add(desktopMediaActiveClass);\n } else {\n item.classList.remove(desktopMediaActiveClass);\n }\n });\n } // Function that is called to change the theme of the component\n\n\n function updateTheme(paramTargetTab) {\n var $horizontalMultitabTab = $horizontalMultitab.querySelector('#' + paramTargetTab);\n var dataTheme = $horizontalMultitabTab.getAttribute('data-theme');\n var dataBgColor = $horizontalMultitabTab.getAttribute('data-bg-color');\n $horizontalMultitab.classList.remove(horizontalMultitabCurrentTheme);\n\n if (dataTheme === '') {\n horizontalMultitabCurrentTheme = lightTheme;\n } else {\n horizontalMultitabCurrentTheme = dataTheme;\n }\n\n $horizontalMultitab.classList.add(horizontalMultitabCurrentTheme);\n $horizontalMultitab.style.backgroundColor = dataBgColor;\n } // Function that sets the current theme being used when the page loads\n\n\n function setInitialTheme() {\n var $currentActiveTab = $horizontalMultitab.querySelector('.' + tabContentActiveClass);\n var horizontalMultitabCurrentBg = $currentActiveTab.getAttribute('data-bg-color');\n horizontalMultitabCurrentTheme = $currentActiveTab.getAttribute('data-theme');\n\n if (horizontalMultitabCurrentTheme === '') {\n horizontalMultitabCurrentTheme = lightTheme;\n }\n\n if (horizontalMultitabCurrentBg) {\n $horizontalMultitab.style.backgroundColor = horizontalMultitabCurrentBg;\n }\n\n if (horizontalMultitabCurrentTheme) {\n $horizontalMultitab.classList.add(horizontalMultitabCurrentTheme);\n }\n }\n\n function resetContent(paramTargetTab) {\n var $horizontalMultitabTab = $horizontalMultitab.querySelector('#' + paramTargetTab);\n var $modules = $horizontalMultitabTab.querySelectorAll(jsModuleClass);\n\n for (var modulesIndex = 0; modulesIndex < $modules.length; modulesIndex++) {\n var moduleId = $modules[modulesIndex].dataset.moduleId;\n\n if (moduleId) {\n var currentModule = Acr.Modules[moduleId];\n\n if (currentModule.reset) {\n currentModule.reset();\n }\n }\n }\n }\n\n function init(element) {\n initSelectors(element);\n\n if ($horizontalMultitab.querySelector('.' + tabContentActiveClass)) {\n setInitialTheme();\n bindEvents();\n }\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.InputCard = function () {\n Acr = window.Acr || {};\n var $element;\n var $form;\n var $input;\n var $submitButton;\n var $errorMessage;\n var $inputSettings;\n var placeHoldText;\n var formInput = '.js-form-input';\n var submBtn = '.js-submit-btn';\n var inputSettings = '.js-input-settings';\n var errorMessage = '.js-error-message';\n\n function inputZip() {\n this.value = this.value.replace(/\\D/m, '');\n\n if (this.value.length > 5) {\n this.value = this.value.slice(0, 5);\n }\n }\n\n function showError() {\n var errorMessageText = $inputSettings.data('errorMessage');\n $errorMessage.text(errorMessageText);\n }\n\n function clearError() {\n $errorMessage.text('');\n }\n\n function validZipcodeSubmit() {\n $form.submit();\n }\n\n function validateZipcode(e) {\n var value = $input.val();\n e.preventDefault();\n callTrackingClick();\n Utility.validateZipcode(value, validZipcodeSubmit, showError);\n }\n\n function initSelectors(element) {\n $element = $(element);\n $form = $(element).find('form');\n $input = $(element).find(formInput);\n $submitButton = $(element).find(submBtn);\n $inputSettings = $element.find(inputSettings);\n $errorMessage = $element.find(errorMessage);\n placeHoldText = $input.attr('placeholder');\n }\n\n function callTrackingClick() {\n var stringObject = $submitButton.attr('data-form-submit-tracking') ? $submitButton.attr('data-form-submit-tracking') : '';\n var clickObject = JSON.parse(stringObject.split(\"'\").join('\"'));\n\n if (clickObject && Acr.TrackingManager) {\n Acr.TrackingManager.clickActivity(clickObject);\n }\n }\n\n function inputFocus() {\n $input.attr('placeholder', '');\n clearError();\n }\n\n function inputBlur() {\n clearError();\n\n if ($input.val() === '') {\n $input.attr('placeholder', placeHoldText);\n }\n }\n\n function bindEvents() {\n $input.on('focus', inputFocus);\n $input.on('blur', inputBlur);\n $input.on('input', inputZip);\n $submitButton.on('click', validateZipcode);\n }\n\n function init(element) {\n initSelectors(element);\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.InterstitialModal = function () {\n var $element;\n var $documentBody;\n var $interstitialClose;\n var $interstitialBtn;\n var modalOpenClass = 'modal-open';\n var interstitialClose = '.js-interstitial-close';\n var interstitialBtn = '.js-interstitial-btn';\n\n function openRedirect(event) {\n $element.css('display', 'block');\n $interstitialBtn.attr('data-model-name', event.detail.model);\n $interstitialBtn.attr('data-model-year', event.detail.year);\n $interstitialBtn.attr('href', event.detail.url);\n $documentBody.addClass(modalOpenClass);\n window.Acr.TrackingManager.savePageLoadObject();\n triggerTaggingPage(event.detail.taggingJson);\n }\n\n function closeRedirect() {\n $element.css('display', 'none');\n $documentBody.removeClass(modalOpenClass);\n window.Acr.TrackingManager.restorePageLoadObject();\n }\n\n function triggerRedirect() {\n closeRedirect();\n }\n\n function triggerTaggingPage(trackingObject) {\n if (Acr.TrackingManager) {\n Acr.TrackingManager.pageLoad(trackingObject);\n }\n }\n\n function initSelectors(element) {\n $element = $(element);\n $documentBody = $('body');\n $interstitialClose = $(interstitialClose);\n $interstitialBtn = $(interstitialBtn);\n }\n\n function bindEvents() {\n window.addEventListener('openInterstitialModal', openRedirect);\n $interstitialClose.click(closeRedirect);\n $interstitialBtn.click(triggerRedirect);\n }\n\n function init(element) {\n initSelectors(element);\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.Location = function () {\n var utility = window.Utility;\n var formVisible = false;\n var zipcodeUpdateEvent;\n var zipcodeValue;\n var $element;\n var $locationButton;\n var $locationForm;\n var $locationFormInput;\n var $locationFormButton;\n var $locationPlaceholder;\n var $locationZipcode;\n var $locationError;\n var locationButton = '.js-location-button';\n var locationForm = '.js-location-form';\n var locationFormInput = '.js-location-form-input';\n var locationFormButton = '.js-location-form-button';\n var locationPlaceholder = '.js-location-placeholder';\n var locationZipcode = '.js-location-zipcode';\n var locationError = '.js-location-error';\n var locationFormError = 'acr-location__form--error';\n var currentClass = 'acr-location__button--current';\n\n function validateZipCode() {\n var $this = $(this);\n var inputValue = $this.val();\n var antiRegex = new RegExp(/[^0-9]+/g);\n var validZipcode = new RegExp(/^\\d{5}$/);\n $locationError.hide();\n $locationForm.removeClass(locationFormError);\n $this.val(inputValue.replace(antiRegex, ''));\n\n if (inputValue.match(validZipcode)) {\n $locationFormButton.prop('disabled', false);\n zipcodeValue = inputValue;\n } else {\n $locationFormButton.prop('disabled', true);\n zipcodeValue = false;\n }\n }\n\n function setZipcode(zipcode) {\n if (zipcode) {\n $locationPlaceholder.hide();\n $locationZipcode.show();\n $locationZipcode.text(getLocationZipcodeText(zipcode));\n }\n }\n\n function getLocationZipcodeText(zipcode) {\n var locationZipcodeText = $locationZipcode.text().split(':');\n locationZipcodeText[1] = zipcode;\n return locationZipcodeText.join(': ');\n }\n\n function setEventZipcode(event) {\n if (event.detail && event.detail.zipcode) {\n setZipcode(event.detail.zipcode);\n }\n }\n\n function showZipcodeError() {\n $locationForm.addClass(locationFormError);\n $locationError.show();\n }\n\n function validZipcodeSubmit() {\n $locationButton.removeClass(currentClass);\n $locationForm.slideUp();\n formVisible = false;\n zipcodeUpdateEvent = utility.createEvent('zipcodeUpdate', {\n zipcode: zipcodeValue\n });\n utility.setCookie('zipcode', zipcodeValue);\n window.dispatchEvent(zipcodeUpdateEvent);\n }\n\n function submitZipcode(event) {\n event.preventDefault();\n Utility.validateZipcode(zipcodeValue, validZipcodeSubmit, showZipcodeError);\n }\n\n function openZipgate() {\n Acr.zipgateComponent.openZipgate();\n $locationButton.removeClass(currentClass);\n $locationForm.slideUp();\n $locationFormInput.val('');\n $locationPlaceholder.hide();\n $locationZipcode.show();\n formVisible = false;\n }\n\n function showForm() {\n $locationButton.addClass(currentClass);\n $locationForm.slideDown();\n $locationPlaceholder.show();\n $locationZipcode.hide();\n formVisible = true;\n }\n\n function buttonActions() {\n if (!formVisible) {\n showForm();\n } else {\n openZipgate();\n }\n }\n\n function initZipcode() {\n zipcodeValue = utility.getCookie('zipcode');\n\n if (zipcodeValue) {\n setZipcode(zipcodeValue);\n }\n }\n\n function initSelectors(element) {\n $element = $(element);\n $locationButton = $element.find(locationButton);\n $locationForm = $element.find(locationForm);\n $locationFormInput = $element.find(locationFormInput);\n $locationFormButton = $element.find(locationFormButton);\n $locationPlaceholder = $element.find(locationPlaceholder);\n $locationZipcode = $element.find(locationZipcode);\n $locationError = $element.find(locationError);\n }\n\n function bindEvents() {\n $locationButton.click(buttonActions);\n $locationFormButton.click(submitZipcode);\n $locationFormInput.on('input', validateZipCode);\n window.addEventListener('zipcodeUpdate', setEventZipcode);\n }\n\n function init(element) {\n initSelectors(element);\n bindEvents();\n initZipcode();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.MultiAccordion = function () {\n var $multiAccordion;\n var $multiAccordionLinks;\n var $multiAccordionBodies;\n var resizeWindow;\n var multiAccordionBody = '.js-multi-accordion-body';\n var multiAccordionLink = '.js-multi-accordion-link';\n var multiAccordionActive = 'acr-multi-accordion__section--active';\n var multiAccordionLook1 = 'acr-multi-accordion--look-1';\n\n function initSelectors(element) {\n $multiAccordion = element;\n $multiAccordionBodies = $multiAccordion.querySelectorAll(multiAccordionBody);\n $multiAccordionLinks = $multiAccordion.querySelectorAll(multiAccordionLink);\n } // Start video function when the accordion opens up\n\n\n function startVideo(video) {\n if (video) {\n video.play();\n }\n } // Stop video function when the accorion closes up\n\n\n function stopVideo(video) {\n if (video) {\n video.pause();\n video.currentTime = 0;\n }\n }\n\n function onClickMultiAccordion() {\n event.preventDefault();\n var accordionSection = this.parentElement.parentElement; // Select acr-multi-accordion__section\n\n if (accordionSection.classList.contains(multiAccordionActive)) {\n slideUp(accordionSection);\n this.setAttribute('aria-expanded', false);\n } else {\n // Check if another accordion is open for default look\n if (!$multiAccordion.classList.contains(multiAccordionLook1)) {\n var accordionContainer = accordionSection.parentElement;\n var currentActive = accordionContainer.querySelector('.' + multiAccordionActive);\n\n if (currentActive) {\n slideUp(currentActive);\n }\n }\n\n slideDown(accordionSection);\n this.setAttribute('aria-expanded', true);\n }\n } // Slide up function, close up the accordion\n\n\n function slideUp(accordionSection) {\n var accordionBody = accordionSection.querySelector(multiAccordionBody);\n var accordionVideo = accordionSection.querySelector('video');\n accordionBody.style.height = accordionBody.offsetHeight + 'px';\n /* eslint-disable no-unused-expressions */\n\n accordionBody.offsetHeight;\n /* eslint-enable no-unused-expressions */\n\n accordionBody.style.removeProperty('height');\n accordionSection.classList.remove(multiAccordionActive); // stop video\n\n stopVideo(accordionVideo);\n } // Slide down function, open up the accordion\n\n\n function slideDown(accordionSection) {\n var accordionBody = accordionSection.querySelector(multiAccordionBody);\n var accordionVideo = accordionSection.querySelector('video');\n accordionBody.style.height = 0;\n /* eslint-disable no-unused-expressions */\n\n accordionBody.offsetHeight;\n /* eslint-enable no-unused-expressions */\n\n accordionBody.style.height = accordionBody.scrollHeight + 'px';\n accordionSection.classList.add(multiAccordionActive); // start video\n\n startVideo(accordionVideo);\n } // Callback function when resizing occurs on desktop\n\n\n function onResizeMultiAccordion() {\n // If there's a timer, cancel it\n if (resizeWindow) {\n window.cancelAnimationFrame(resizeWindow);\n } // Setup the new requestAnimationFrame()\n\n\n resizeWindow = window.requestAnimationFrame(function () {\n $multiAccordionBodies.forEach(function (accordionBody) {\n accordionBody.style.removeProperty('height');\n });\n });\n }\n\n function bindEvents() {\n // Attachment of click events for each of the accordions\n $multiAccordionLinks.forEach(function (link) {\n link.addEventListener('click', onClickMultiAccordion);\n });\n window.addEventListener('resize', onResizeMultiAccordion);\n }\n\n function init(element) {\n Utility = window.Utility || {};\n initSelectors(element);\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.Nav = function () {\n var utility = window.Utility;\n var $element;\n var $body;\n var $toggleDropDown;\n var $navDropDown;\n var $searchForm;\n var $searchSubmitBtn;\n var $geoForm;\n var $geoZipInput;\n var $geoZipButton;\n var $currentZip;\n var $navSearch;\n var $navActionContainer;\n var zipcodeUpdateEvent;\n var observer;\n var $acrNotificationContainer;\n var $acrNotificationPagination;\n var $acrNotificationBannerItems;\n var $arrowRight;\n var $arrowLeft;\n var $acrNotificationBannerSwiper;\n var currentOfferEndpoint = Acr.currentOfferEndPoint;\n var zipcodeUpdateEventName = 'zipcodeUpdate';\n var bodyTagSelector = 'body';\n var navDropdownClassSelector = '.js-nav-dropdown';\n var toggleDropDownClassSelector = '.js-toggle-dropdown';\n var toggleLangChooserBtnSelector = '.js-lang-chooser-btn';\n var searchBtnSelector = '.js-search-btn';\n var geoBtnSelector = '.js-geo-btn';\n var shadowSelector = '.js-shadow';\n var currentZipSelector = '.js-current-zip';\n var searchFormSelector = '.js-search-form';\n var searchSubmitBtnSelector = '.js-acr-nav-search-submit';\n var openZipGateSelector = '.js-open-zipgate';\n var geoFormSelector = '.js-geo-form';\n var toggleBarClassSelector = '.js-toggle-btn';\n var acrNavInputSelector = '.js-search-form input';\n var acrNavGeoInputSelector = '.js-geo-form input';\n var acrNavGeoButtonSelector = '.js-geo-form button';\n var navSearchSelector = 'nav-search';\n var acrNavActionContainerSelector = '.acr-nav__action-container';\n var acrNavGeoErrorClassName = 'acr-nav--geo-error';\n var noValidClassName = 'no-valid';\n var acrNavShadowClassName = 'acr-nav--shadow-visible';\n var modalOpenClassName = 'modal-open';\n var noScrollSmall = 'no-scroll-small';\n var acrNavExpandedClassName = 'acr-nav--opened';\n var acrNavSearchExpandedClassName = 'acr-nav--search-opened';\n var acrNavGeoExpandedClassName = 'acr-nav--geo-opened';\n var acrNavLangExpandedClassName = 'acr-nav-lang-chooser--expanded';\n var acrNavItemLinkExpandedClassName = 'acr-nav__item-link--expanded';\n var acrNavDropdownExpandedClassName = 'acr-nav__dropdown--expanded';\n var arrowRightSelector = '.js-arrow-right';\n var arrowLeftSelector = '.js-arrow-left';\n var acrNotificationPaginationSelector = '.js-swiper-pagination';\n var acrNotificationContainerSelector = '.js-swiper-container';\n var acrNotificationBannerItemSelector = '.js-acr-notification-banner-item';\n var formSubmitTracking = 'data-form-submit-tracking';\n\n function initSelectors(el) {\n $element = el;\n $toggleDropDown = $element.querySelectorAll(toggleDropDownClassSelector);\n $navDropDown = $element.querySelectorAll(navDropdownClassSelector);\n $searchForm = $element.querySelector(searchFormSelector);\n $searchSubmitBtn = $element.querySelector(searchSubmitBtnSelector);\n $navActionContainer = $element.querySelector(acrNavActionContainerSelector);\n $geoForm = $element.querySelector(geoFormSelector);\n $geoZipInput = $element.querySelector(acrNavGeoInputSelector);\n $geoZipButton = $element.querySelector(acrNavGeoButtonSelector);\n $body = document.querySelector(bodyTagSelector);\n $currentZip = $element.querySelector(currentZipSelector);\n $navSearch = document.getElementById(navSearchSelector);\n $acrNotificationContainer = $element.querySelector(acrNotificationContainerSelector);\n $acrNotificationBannerItems = $element.querySelectorAll(acrNotificationBannerItemSelector);\n $acrNotificationPagination = $element.querySelector(acrNotificationPaginationSelector);\n $arrowLeft = $element.querySelector(arrowLeftSelector);\n $arrowRight = $element.querySelector(arrowRightSelector);\n } // Close Menu\n\n\n function closeMenu(el) {\n closeSubMenu(el);\n setClosedState(el);\n } // Set Closed State (Only necessary for Desktop)\n\n\n function setClosedState(el) {\n $body.classList.remove(modalOpenClassName);\n el.classList.remove(acrNavShadowClassName);\n } // Set Opened State (Only necessary for Desktop)\n\n\n function setOpenedState(el) {\n $body.classList.add(modalOpenClassName);\n el.classList.add(acrNavShadowClassName);\n } // Bind Menu Toggle events (Open/ Close)\n\n\n function toggleMenu(el) {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n self = event.target;\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(toggleBarClassSelector) > 0 ? self : undefined || self.closest(toggleBarClassSelector);\n }\n\n if (!mappedSelf) return;\n\n if (el.classList.contains(acrNavExpandedClassName)) {\n el.classList.remove(acrNavExpandedClassName);\n $body.classList.remove(noScrollSmall);\n $body.classList.remove(modalOpenClassName);\n closeSubMenu(el);\n setClosedState(el);\n } else {\n el.classList.add(acrNavExpandedClassName);\n $body.classList.add(noScrollSmall);\n }\n });\n } // When Shadow is clicked menu must close\n\n\n function toggleShadowMenu(el) {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n self = event.target;\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(shadowSelector) > 0 ? self : undefined || self.closest(shadowSelector);\n }\n\n if (mappedSelf) {\n closeMenu(el);\n }\n });\n } // Bind Sub Menus Toggle events (Open/ Close)\n\n\n function toggleSubMenu(el) {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n var $target;\n var targetId;\n event.stopPropagation();\n self = event.target;\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(toggleDropDownClassSelector) > 0 ? event.target : undefined || self.closest(toggleDropDownClassSelector);\n }\n\n if (!mappedSelf) return;\n targetId = mappedSelf.getAttribute('href');\n $target = document.querySelector(targetId);\n\n if ($target.classList.contains(acrNavDropdownExpandedClassName)) {\n closeSubMenu(el);\n $target.classList.remove(acrNavDropdownExpandedClassName);\n mappedSelf.classList.remove(acrNavItemLinkExpandedClassName);\n setClosedState(el);\n } else {\n closeSubMenu(el);\n $target.classList.add(acrNavDropdownExpandedClassName);\n mappedSelf.classList.add(acrNavItemLinkExpandedClassName);\n setOpenedState(el);\n }\n });\n } // Bind Lang Choser Toggle events (Open/ Close)\n\n\n function toggleLangMenu(el) {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n self = event.target;\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(toggleLangChooserBtnSelector) > 0 ? self : undefined || self.closest(toggleLangChooserBtnSelector);\n }\n\n if (!mappedSelf) return;\n\n if (!el.classList.contains(acrNavLangExpandedClassName)) {\n closeSubMenu(el);\n el.classList.add(acrNavLangExpandedClassName);\n setOpenedState(el);\n } else {\n closeSubMenu(el);\n el.classList.remove(acrNavLangExpandedClassName);\n setClosedState(el);\n }\n });\n } // Bind Search Toggle events (Open/ Close)\n\n\n function toggleSearch(el) {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n self = event.target;\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(searchBtnSelector) > 0 ? self : undefined || self.closest(searchBtnSelector);\n }\n\n if (!mappedSelf) return;\n\n if (!el.classList.contains(acrNavSearchExpandedClassName)) {\n closeSubMenu(el);\n el.classList.add(acrNavSearchExpandedClassName);\n $navSearch.focus();\n setClosedState(el);\n } else {\n closeSubMenu(el);\n el.classList.remove(acrNavSearchExpandedClassName);\n setClosedState(el);\n }\n });\n }\n\n function closeGeo() {\n $element.classList.remove(acrNavGeoExpandedClassName);\n $geoForm.classList.remove(noValidClassName);\n $geoZipInput.classList.remove(noValidClassName);\n $geoZipInput.value = '';\n setClosedState($element);\n } // Bind Search Toggle events (Open/ Close)\n\n\n function toggleGeo(el) {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n self = event.target;\n\n if (!observer) {\n observer = new IntersectionObserver(inputObserverHandler);\n }\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(geoBtnSelector) > 0 ? self : undefined || self.closest(geoBtnSelector);\n }\n\n if (!mappedSelf) return;\n\n if (!el.classList.contains(acrNavGeoExpandedClassName)) {\n closeSubMenu(el);\n el.classList.add(acrNavGeoExpandedClassName);\n $geoZipButton.disabled = true;\n $geoZipInput.focus();\n setClosedState(el);\n } else {\n closeSubMenu(el);\n closeGeo();\n observer.unobserve($geoZipInput);\n }\n });\n } // Close all SubMenu Items - Includes Lang Chooser\n\n\n function closeSubMenu(el) {\n el.classList.remove(acrNavLangExpandedClassName);\n\n for (var i = 0; i < $toggleDropDown.length; i++) {\n $toggleDropDown[i].classList.remove(acrNavItemLinkExpandedClassName);\n }\n\n for (var j = 0; j < $navDropDown.length; j++) {\n $navDropDown[j].classList.remove(acrNavDropdownExpandedClassName);\n }\n }\n\n function onSubmitSearchForm() {\n $searchForm.addEventListener('submit', function (e) {\n if (e.target.querySelector(acrNavInputSelector).value === '') {\n e.preventDefault();\n $searchForm.classList.add(noValidClassName);\n return;\n }\n\n var stringObject = $searchSubmitBtn.hasAttribute(formSubmitTracking) ? $searchSubmitBtn.getAttribute(formSubmitTracking) : '';\n\n if (Acr.TrackingManager && stringObject) {\n try {\n var object = JSON.parse(stringObject.split(\"'\").join('\"'));\n Acr.TrackingManager.clickActivity(object);\n } catch (err) {\n console.warn('ERROR AT TRACKING OBJECT: ' + err);\n }\n }\n });\n }\n\n function updateGeoZipCodeUI(zipCode) {\n $currentZip.innerText = zipCode;\n }\n\n function updateGeoZipCode(zipcode) {\n zipcodeUpdateEvent = utility.createEvent(zipcodeUpdateEventName, {\n zipcode: zipcode\n });\n utility.setCookie('zipcode', zipcode);\n window.dispatchEvent(zipcodeUpdateEvent);\n updateGeoZipCodeUI(zipcode);\n }\n\n function onChangeGeoForm() {\n $geoZipInput.addEventListener('input', function (event) {\n var inputValue = this.value;\n var antiRegex = new RegExp(/[^0-9]+/g);\n var validZipcode = new RegExp(/^\\d{5}$/);\n $geoForm.classList.remove(noValidClassName);\n $element.classList.remove(acrNavGeoErrorClassName);\n this.value = inputValue.replace(antiRegex, '');\n\n if (inputValue.match(validZipcode)) {\n $geoZipButton.disabled = false;\n } else {\n $geoZipButton.disabled = true;\n }\n });\n }\n\n function showGeoFormError() {\n $geoForm.classList.add(noValidClassName);\n $element.classList.add(acrNavGeoErrorClassName);\n }\n\n function validZipcodeSubmit() {\n var inputValue = $geoZipInput.value;\n updateGeoZipCode(inputValue);\n closeGeo();\n }\n\n function onSubmitGeoForm() {\n var inputValue;\n\n if ($geoForm.addEventListener) {\n $geoForm.addEventListener('submit', function (event) {\n event.preventDefault();\n inputValue = $geoZipInput.value;\n Utility.validateZipcode(inputValue, validZipcodeSubmit, showGeoFormError);\n }, true);\n }\n }\n\n function initZipcode() {\n var zipcode;\n window.addEventListener('zipcodeUpdate', function (event) {\n updateGeoZipCodeUI(event.detail.zipcode);\n });\n zipcode = utility.getUrlParameterValue('zipcode') || utility.getCookie('zipcode');\n\n if (zipcode) {\n updateGeoZipCode(zipcode);\n }\n }\n\n function onClickLocationbtn() {\n document.addEventListener('click', function (event) {\n var self;\n var mappedSelf;\n self = event.target;\n\n if (self.getAttribute) {\n mappedSelf = self.getAttribute('class') && self.getAttribute('class').search(openZipGateSelector) > 0 ? self : undefined || self.closest(openZipGateSelector);\n }\n\n if (mappedSelf) {\n Acr.zipgateComponent.openZipgate();\n $element.classList.remove(acrNavExpandedClassName);\n $body.classList.remove(noScrollSmall);\n $body.classList.remove(modalOpenClassName);\n closeGeo();\n closeSubMenu($element);\n setClosedState($element);\n }\n });\n }\n\n function onGeoZipInputFocus() {\n if (utility.isAndroid()) {\n $geoZipInput.addEventListener('focus', function () {\n $navActionContainer.style.paddingBottom = '6rem';\n observer.observe($geoZipInput);\n });\n }\n }\n\n function inputObserverHandler(entries, observer) {\n entries.forEach(function (entry) {\n if (!entry.isIntersecting) {\n observer.unobserve($geoZipInput);\n window.setTimeout(function () {\n $geoZipButton.scrollIntoView({\n block: 'start',\n behavior: 'smooth'\n });\n }, 500);\n }\n });\n }\n\n function bindEvents(el) {\n toggleMenu(el);\n toggleShadowMenu(el);\n toggleSubMenu(el);\n toggleLangMenu(el);\n toggleSearch(el);\n toggleGeo(el);\n initZipcode();\n onChangeGeoForm();\n onSubmitSearchForm();\n onSubmitGeoForm();\n onClickLocationbtn();\n onGeoZipInputFocus();\n }\n\n function initNotificationBanner(el) {\n if ($acrNotificationContainer && $acrNotificationBannerItems.length > 1) {\n $acrNotificationBannerSwiper = new Swiper($acrNotificationContainer, {\n // Optional parameters\n loop: false,\n // If we need pagination\n pagination: {\n el: $acrNotificationPagination,\n type: 'fraction'\n },\n // Navigation arrows\n navigation: {\n nextEl: $arrowRight,\n prevEl: $arrowLeft\n },\n init: true\n });\n $acrNotificationPagination.childNodes[1].nodeValue = ' of ';\n }\n }\n\n function init(el) {\n initSelectors(el);\n bindEvents(el);\n initNotificationBanner(el);\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.NavHelper = function () {\n var Utility = window.Utility || {};\n var $wrapper = $('.wrapper');\n var hideMenuOnScroll = Acr.hideMenuOnScroll || false;\n var $window = $(window);\n var lastScrollTop = 0;\n\n function peekABoo() {\n var st = $window.scrollTop();\n\n if (st + 180 < lastScrollTop || st <= 0) {\n if ($wrapper.hasClass('collapsed-nav')) {\n $wrapper.removeClass('collapsed-nav');\n }\n\n if (!$wrapper.hasClass('expanded-nav')) {\n $wrapper.addClass('expanded-nav'); // Add an event to the document when Global Nav is expands or collapses\n\n Utility.fireEvent(document, 'expandedGlobalNav');\n }\n\n lastScrollTop = st;\n }\n\n if (st - 180 > lastScrollTop) {\n if ($wrapper.hasClass('expanded-nav')) {\n $wrapper.removeClass('expanded-nav');\n }\n\n if (!$wrapper.hasClass('collapsed-nav')) {\n $wrapper.addClass('collapsed-nav'); // Add an event to the document when Global Nav is expands or collapses\n\n Utility.fireEvent(document, 'expandedGlobalNav');\n }\n\n lastScrollTop = st;\n }\n }\n\n function init() {\n try {\n if (hideMenuOnScroll) {\n $window.on('scroll orientationchange', $.throttle(250, peekABoo));\n $wrapper.addClass('expanded-nav');\n }\n } catch (e) {\n Utility.error(e);\n }\n }\n\n return {\n init: init\n };\n}();\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.SignUp = function () {\n var $signUp;\n var $signUpForm;\n var $signUpBody;\n var $signUpProcessing;\n var $signUpResponse;\n var $signUpResponseCopy;\n var $signUpFormInputs;\n var $signUpFormCheckboxes;\n var $signUpSubmitBtn;\n var $signUpZipCodeInput;\n var $signUpZipCodeField;\n var $signUpZipCodeFieldError;\n var $dynamicModelTracking;\n var $contactDealerTracking;\n var $labelsForm;\n var formSelectorClass = '.js-acr-sign-up-form';\n var bodySelectorClass = '.js-acr-sign-up-body';\n var processingSelectorClass = '.js-acr-sign-up-processing';\n var responseSelectorClass = '.js-acr-sign-up-response';\n var responseCopySelectorClass = '.js-acr-sign-up-copy';\n var inputSelectorClass = '.js-acr-sign-up-input';\n var checkboxSelectorClass = '.js-acr-sign-up-checkbox';\n var submitBtnSelectorClass = '.js-acr-sign-up-submit';\n var labelFormSelector = '.js-acr-sign-up-label';\n var requiredClass = 'acr-required';\n var requiredAttr = 'required';\n var conditionalRequiredAttr = 'data-conditional-required';\n var conditionalRequiredCountAttr = 'data-conditional-required-count';\n var formSubmitTracking = 'data-form-submit-tracking';\n var formCheckboxTracking = 'data-form-checkbox-tracking';\n var formcontactDealerTracking = 'data-lead-metadata';\n var fieldErrorClass = 'acr-form-element-error';\n var fieldErrorMessage = '.acr-sign-up__error';\n var errorFieldAttr = 'data-error-text';\n var zipCodeRegex = '[zipcode]';\n\n function sendSuccessTrackingObject(isSuccess) {\n var stringObject = $signUpSubmitBtn.hasAttribute(formSubmitTracking) ? $signUpSubmitBtn.getAttribute(formSubmitTracking) : '';\n\n if (Acr.TrackingManager && stringObject) {\n try {\n var object = JSON.parse(stringObject.split(\"'\").join('\"'));\n object['Event Metadata'].contact_dealer = $contactDealerTracking;\n\n if ($dynamicModelTracking && object) {\n object.Model = $dynamicModelTracking.Model;\n }\n\n if (isSuccess && object) {\n object.dynamic_variables[0].search += ' success';\n }\n\n Acr.TrackingManager.clickActivity(object);\n } catch (err) {\n console.warn('ERROR AT TRACKING OBJECT: ' + err);\n }\n }\n }\n\n function send(form) {\n var method = form.getAttribute('method');\n var url = form.getAttribute('action');\n var data = getFormElements(form);\n sendSuccessTrackingObject(false);\n\n var beforeSend = function beforeSend() {\n $signUpProcessing.classList.add('show');\n $signUpBody.classList.add('hide');\n };\n\n var request = new XMLHttpRequest();\n request.open(method, url, true);\n\n request.onload = function (data) {\n var response = JSON.parse(data.currentTarget.response);\n\n if (response.Status === 'success') {\n sendSuccessTrackingObject(true);\n }\n\n $signUpProcessing.classList.remove('show');\n $signUpResponseCopy.innerHTML += response.Message;\n $signUpResponse.classList.add('show');\n };\n\n request.setRequestHeader('Content-Type', 'application/json');\n beforeSend();\n request.send(data);\n }\n\n function getFormElements(form) {\n var dataJSON = {};\n dataJSON.checkboxes = [];\n $contactDealerTracking = 'false';\n var formElements = form.elements;\n Array.prototype.forEach.call(formElements, function (element) {\n if (element.nodeName === 'INPUT') {\n if (element.type === 'checkbox') {\n var checkboxElement = {};\n checkboxElement.name = element.name;\n checkboxElement.value = element.checked;\n dataJSON.checkboxes.push(checkboxElement);\n\n if (element.hasAttribute(formCheckboxTracking) && element.checked) {\n var stringObject = element.getAttribute(formCheckboxTracking);\n var checkboxTracking = JSON.parse(stringObject.split(\"'\").join('\"'));\n\n if (!$dynamicModelTracking) {\n $dynamicModelTracking = checkboxTracking;\n } else {\n $dynamicModelTracking.Model.model_name += ';' + checkboxTracking.Model.model_name;\n\n if (!$dynamicModelTracking.Model.model_year.includes(checkboxTracking.Model.model_year)) {\n $dynamicModelTracking.Model.model_year += ';' + checkboxTracking.Model.model_year;\n }\n\n if (!$dynamicModelTracking.Model.body_style.includes(checkboxTracking.Model.body_style)) {\n $dynamicModelTracking.Model.body_style += ';' + checkboxTracking.Model.body_style;\n }\n }\n }\n\n if (element.hasAttribute(formcontactDealerTracking) && element.checked && $contactDealerTracking === 'false') {\n $contactDealerTracking = element.getAttribute(formcontactDealerTracking);\n }\n } else {\n dataJSON[element.name] = element.value;\n }\n }\n });\n return JSON.stringify(dataJSON);\n }\n\n function onSubmit(e) {\n e.preventDefault();\n var success = Validation.validateForm(e);\n Utility.log('onSubmit submission', e); // validate zip code\n\n if (ValidateZipCode()) {\n var successZipCode = function successZipCode() {\n $signUpZipCodeFieldError.innerText = '';\n\n if ($signUpZipCodeField.classList.contains(fieldErrorClass)) {\n $signUpZipCodeField.classList.remove(fieldErrorClass);\n }\n\n if (success) {\n send(e.target);\n }\n };\n\n var errorZipCode = function errorZipCode() {\n var errorMsj = $signUpZipCodeInput.getAttribute(errorFieldAttr);\n $signUpZipCodeFieldError.innerText = errorMsj;\n\n if (!$signUpZipCodeField.classList.contains(fieldErrorClass)) {\n $signUpZipCodeField.classList.add(fieldErrorClass);\n }\n };\n\n Utility.validateZipcode($signUpZipCodeInput.value, successZipCode, errorZipCode);\n } else if (success) {\n send(e.target);\n }\n }\n\n function ValidateZipCode() {\n var validateZipCode = false;\n\n if (!$signUpZipCodeInput) {\n return validateZipCode;\n }\n\n if ($signUpZipCodeInput.value !== '') {\n validateZipCode = true;\n }\n\n return validateZipCode;\n }\n\n function OnChangeCheckbox(evt) {\n var checkbox = evt.target;\n var dataConditionRequired = checkbox.getAttribute(conditionalRequiredAttr);\n var inputRequiredIds = dataConditionRequired.split(',');\n inputRequiredIds.forEach(function (inputId) {\n var requiredLabel;\n $labelsForm.forEach(function (element) {\n if (element.htmlFor === inputId) {\n requiredLabel = element;\n }\n });\n var inputRequired = document.getElementById(inputId);\n\n if (inputRequired) {\n var hasRequiredCount = inputRequired.hasAttribute(conditionalRequiredCountAttr);\n var isRequired = inputRequired.hasAttribute(requiredAttr);\n\n if (isRequired && !hasRequiredCount) {\n return;\n }\n\n var countRequired = hasRequiredCount ? inputRequired.getAttribute(conditionalRequiredCountAttr) : 0;\n\n if (checkbox.checked) {\n inputRequired.classList.add(requiredClass);\n inputRequired.setAttribute(requiredAttr, requiredAttr);\n requiredLabel.classList.add(requiredClass);\n requiredLabel.setAttribute(requiredAttr, requiredAttr);\n countRequired++;\n inputRequired.setAttribute(conditionalRequiredCountAttr, countRequired);\n } else {\n countRequired--;\n\n if (countRequired === 0) {\n inputRequired.classList.remove(requiredClass);\n inputRequired.removeAttribute(requiredAttr);\n requiredLabel.classList.remove(requiredClass);\n requiredLabel.removeAttribute(requiredAttr);\n inputRequired.removeAttribute(conditionalRequiredCountAttr);\n } else {\n inputRequired.setAttribute(conditionalRequiredCountAttr, countRequired);\n }\n }\n }\n });\n }\n\n function initSelectors(element) {\n $signUp = element;\n $signUpForm = $signUp.querySelector(formSelectorClass);\n $signUpBody = $signUp.querySelector(bodySelectorClass);\n $signUpProcessing = $signUp.querySelector(processingSelectorClass);\n $signUpResponse = $signUp.querySelector(responseSelectorClass);\n $signUpResponseCopy = $signUpResponse.querySelector(responseCopySelectorClass);\n $signUpFormInputs = $signUpForm.querySelectorAll(inputSelectorClass);\n $signUpFormCheckboxes = $signUpForm.querySelectorAll(checkboxSelectorClass);\n $signUpSubmitBtn = $signUp.querySelector(submitBtnSelectorClass);\n $labelsForm = $signUp.querySelectorAll(labelFormSelector);\n }\n\n function bindEvents() {\n $signUpFormInputs.forEach(function (inputText) {\n inputText.addEventListener('keypress', Validation.onKeypress);\n inputText.addEventListener('keyup', Validation.onKeyup);\n inputText.addEventListener('focus', Validation.onFocus);\n inputText.addEventListener('blur', Validation.onBlur);\n\n if (inputText.getAttribute('data-regexkey') === zipCodeRegex) {\n $signUpZipCodeInput = inputText;\n $signUpZipCodeField = $signUpZipCodeInput.parentElement;\n $signUpZipCodeFieldError = $signUpZipCodeField.querySelector(fieldErrorMessage);\n }\n });\n var isIE = Utility.isIE11();\n $signUpFormCheckboxes.forEach(function (checkbox) {\n if (isIE) checkbox.classList.add('ie11');\n var dataConditionRequired = checkbox.getAttribute(conditionalRequiredAttr);\n\n if (dataConditionRequired) {\n var checkboxElement = document.getElementById(checkbox.id);\n checkboxElement.addEventListener('change', OnChangeCheckbox, false);\n }\n });\n $signUpForm.addEventListener('submit', onSubmit);\n }\n\n function init(element) {\n initSelectors(element);\n bindEvents(element);\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.Slider = function () {\n var $quotesSlider;\n var $quotesSwiperContainer;\n var $swiperPagination;\n var $arrowLeft;\n var $arrowRight;\n var $swiperSlides;\n var quotesSwiper;\n var swiperContainerSelector = '.js-swiper-container';\n var swiperPaginationSelector = '.js-swiper-pagination';\n var arrowLeftSelector = '.js-arrow-left';\n var arrowRightSelector = '.js-arrow-right';\n var swiperSlideSelector = '.js-swiper-slide';\n var arrowDisabledClass = 'quotes-container__arrow--disabled'; // Initialize all HTML selectors\n\n function initSelectors(element) {\n $quotesSlider = element;\n $quotesSwiperContainer = $quotesSlider.querySelector(swiperContainerSelector);\n $swiperPagination = $quotesSlider.querySelector(swiperPaginationSelector);\n $arrowLeft = $quotesSlider.querySelector(arrowLeftSelector);\n $arrowRight = $quotesSlider.querySelector(arrowRightSelector);\n $swiperSlides = $quotesSlider.querySelectorAll(swiperSlideSelector);\n } // Initialize the swiper slider\n\n\n function initQuotesSliderSwiper() {\n quotesSwiper = new Swiper($quotesSwiperContainer, {\n slidesPerView: 1,\n slidesPerColumn: 1,\n loop: true,\n pagination: {\n el: $swiperPagination,\n clickable: true\n },\n navigation: {\n nextEl: $arrowRight,\n prevEl: $arrowLeft\n },\n init: false\n });\n\n if ($swiperSlides.length > 1) {\n quotesSwiper.init();\n } else {\n $arrowLeft.classList.add(arrowDisabledClass);\n $arrowRight.classList.add(arrowDisabledClass);\n }\n\n quotesSwiper.on('slideChange', function () {\n if (Acr.TrackingManager && event.type !== 'resize') {\n Acr.TrackingManager.sendCarouselActivity(event.currentTarget, this);\n }\n });\n }\n\n function init(element) {\n initSelectors(element);\n initQuotesSliderSwiper();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nvar Acr = Acr || {};\n\nAcr.SocialGrid = function () {\n var utility = window.Utility;\n var $body;\n var $socialGrid;\n var $socialCardsSlider;\n var $socialModalSlider;\n var $socialModalVideo;\n var $socialModal;\n var resizeTimer;\n var showDots;\n var showArrows;\n var slidesToShow;\n var slidesToScroll;\n var $swiperPagination;\n var $arrowLeft;\n var $arrowRight;\n var $socialGridSwiper;\n var $socialGridSwiperContainer;\n var $swiperSlide;\n var focusableElements = 'button, [href]:not(.modal-cta), input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n var selectorAnchorVideo = '[href], svg.js-play-video';\n var selectorModalVisible = '.js-social-modal.visible';\n var swiperSlideActiveSelector = '.swiper-slide.swiper-slide-active';\n var modalOverlaySelector = '.acr-social-modal__overlay';\n var socialModalCloseSelector = '.acr-icon.acr-social-modal__close';\n var focusableEls = document.querySelectorAll(focusableElements);\n var firstFocusableEl = focusableEls[0];\n var lastFocusableEl = focusableEls[focusableEls.length - 1];\n\n function initSocialGridSwiper() {\n var navigation = false;\n var pagination = false;\n\n if ($socialGrid.classList.contains('social-grid--look-2') || $socialGrid.classList.contains('social-grid--look-3')) {\n if ($arrowLeft && $arrowRight) {\n Utility.removeClass('hide', $arrowLeft);\n Utility.removeClass('hide', $arrowRight);\n }\n }\n\n if ($socialGrid.classList.contains('social-grid--look-3')) {\n slidesToShow = 1.5;\n slidesToScroll = 1;\n } else {\n slidesToShow = 3;\n slidesToScroll = 3;\n }\n\n if (showArrows) {\n navigation = {\n nextEl: $arrowRight,\n prevEl: $arrowLeft\n };\n }\n\n if (showDots) {\n pagination = {\n el: $swiperPagination,\n clickable: true\n };\n }\n\n $socialGridSwiper = new Swiper($socialGridSwiperContainer, {\n slidesPerView: 1,\n watchSlidesVisibility: true,\n centeredSlides: false,\n loop: true,\n pagination: pagination,\n navigation: navigation,\n init: true,\n breakpoints: {\n 550: {\n slidesPerView: slidesToShow\n }\n },\n on: {\n init: function init() {\n setTabIndex();\n }\n }\n });\n $socialGridSwiper.on('click', function (event) {\n var goToSingleSlide = this.clickedSlide.dataset.swiperSlideIndex;\n\n if ($socialModal) {\n openHandler(goToSingleSlide);\n }\n });\n $socialGridSwiper.$el.on('keydown', function (event) {\n if (event.keyCode !== 13 && event.keyCode !== 32) return;\n var goToSingleSlide = event.target.dataset.swiperSlideIndex;\n\n if ($socialModal) {\n openHandler(goToSingleSlide);\n }\n });\n $socialGridSwiper.on('slideChange', function () {\n setTabIndex();\n\n if (Acr.TrackingManager && event.type === 'click') {\n Acr.TrackingManager.sendCarouselActivity(event.currentTarget, this);\n }\n });\n }\n\n function setTabIndex() {\n $swiperSlide.forEach(function (element) {\n if (element.classList.contains('swiper-slide-visible')) {\n element.setAttribute('tabindex', '0');\n } else {\n element.removeAttribute('tabindex');\n }\n });\n }\n\n function attachEnters() {\n $socialModal.querySelector(socialModalCloseSelector).removeEventListener('keydown', function (e) {\n if (e.key === 'Enter') closeHandler();\n });\n $socialModal.querySelector(socialModalCloseSelector).addEventListener('keydown', function (e) {\n if (e.key === 'Enter') closeHandler();\n });\n $socialModal.querySelectorAll('.js-play-video').forEach(function (el) {\n el.removeEventListener('keydown', function (e) {\n if (e.key === 'Enter') playVideo(e);\n });\n el.addEventListener('keydown', function (e) {\n if (e.key === 'Enter') playVideo(e);\n });\n });\n }\n\n function attachClicks() {\n $socialModal.querySelector(socialModalCloseSelector).removeEventListener('click', closeHandler);\n $socialModal.querySelector(socialModalCloseSelector).addEventListener('click', closeHandler);\n $socialModal.querySelector(modalOverlaySelector).removeEventListener('click', closeHandler);\n $socialModal.querySelector(modalOverlaySelector).addEventListener('click', closeHandler);\n $socialModal.querySelector(modalOverlaySelector).removeEventListener('click', stopPropagation);\n $socialModal.querySelector(modalOverlaySelector).addEventListener('click', stopPropagation);\n $socialModal.querySelectorAll('.js-play-video').forEach(function (el) {\n el.removeEventListener('click', playVideo);\n el.addEventListener('click', playVideo);\n });\n\n if ($socialModalVideo) {\n $socialModalVideo.forEach(function (el) {\n el.removeEventListener('ended', resetVideo);\n el.addEventListener('ended', resetVideo);\n });\n }\n }\n\n function openHandler(slideToGo) {\n // Disable scrolling.\n document.addEventListener('touchmove', handleTouchLock, {\n passive: false\n });\n $body.classList.add('modal-open');\n $socialModal.classList.add('visible');\n $socialModal.focus();\n setModalHeight();\n setModalSwiper(slideToGo);\n }\n\n var trapFocus = function trapFocus(e) {\n var isTabPressed = e.key === 'Tab' || e.keyCode === 9;\n\n if (!isTabPressed) {\n return;\n }\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableEl) {\n lastFocusableEl.style['-ms-user-select'] = 'text';\n lastFocusableEl.focus();\n lastFocusableEl.style['-ms-user-select'] = '';\n e.preventDefault();\n }\n }\n\n if (!e.shiftKey) {\n if (document.activeElement === lastFocusableEl) {\n firstFocusableEl.style['-ms-user-select'] = 'text';\n firstFocusableEl.focus();\n firstFocusableEl.style['-ms-user-select'] = '';\n e.preventDefault();\n }\n }\n };\n\n function closeHandler() {\n var currrentModalSlideElem = $socialModal.querySelector(swiperSlideActiveSelector); // Enable scrolling.\n\n document.removeEventListener('touchmove', handleTouchLock);\n $socialModal.classList.remove('visible');\n $body.classList.remove('modal-open');\n $socialModalSlider.destroy(true, true);\n resetVideoSlide(currrentModalSlideElem, true);\n }\n\n function playVideo(event) {\n var $videoButton = event.currentTarget;\n var $video = Utility.prev(event.currentTarget, '.js-video');\n\n if (window.getComputedStyle($video, null).getPropertyValue('display') === 'none') {\n $video = Utility.prev($video, '.js-video');\n }\n\n if ($video) {\n $video.play();\n $videoButton.style.display = 'none';\n }\n }\n\n function resetVideo(event) {\n event.target.parentElement.querySelector('.js-play-video').style.display = 'block';\n\n if (document.activeElement.classList.contains('modal-open')) {\n $socialModal.querySelector(swiperSlideActiveSelector).querySelector('svg.js-play-video').focus();\n event.preventDefault();\n } // shows the video poster after the video ends\n\n\n var videoUrl = event.target.currentSrc;\n event.target.src = '';\n event.target.src = videoUrl;\n }\n\n function resetVideoSlide(slide, force) {\n var videos;\n\n if (slide.querySelectorAll('.js-video').length > 0) {\n slide.querySelectorAll('.js-video').forEach(function (el) {\n if (el.offsetWidth > 0 && el.offsetHeight > 0) {\n videos = [el];\n }\n });\n }\n\n if (force) {\n videos = _toConsumableArray(slide.querySelectorAll('.js-video'));\n }\n\n if (videos) {\n videos.map(function (video, index) {\n if (!video.paused) {\n var videoUrl = video.currentSrc;\n video.src = '';\n video.src = videoUrl;\n }\n });\n }\n\n var video = slide.querySelector('.js-play-video');\n\n if (video) {\n video.style.display = 'block';\n }\n }\n\n function setModalHeight() {\n var windowHeight = document.body.getBoundingClientRect().height;\n var modalPadding = 100; // Modal should have 50px of padding-top and 50px of padding-bottom\n\n var imgHeight = $socialModal.querySelector('.acr-social-modal__content-container .acr-social-modal__media-container').getBoundingClientRect().height;\n\n if (utility.isMobile()) {\n var headerHeight = $socialModal.querySelector('.acr-social-modal__header.header--mobile').height;\n $socialModal.querySelector('.acr-social-modal__content').innerHeight = windowHeight - headerHeight - imgHeight - modalPadding;\n } else {\n $socialModal.querySelector('.acr-social-modal__content').innerHeight = imgHeight;\n }\n }\n\n function setModalSwiper(slideToGo) {\n $socialModalSlider = new Swiper($socialModal.querySelector('.swiper-container'), {\n slidesPerView: 1,\n loop: true,\n navigation: {\n nextEl: $socialModal.querySelector('.js-arrow-right'),\n prevEl: $socialModal.querySelector('.js-arrow-left')\n },\n initialSlide: parseInt(slideToGo, 10),\n on: {\n init: function init() {\n var currentModalSlideElem = $socialModal.querySelector(swiperSlideActiveSelector).querySelectorAll(selectorAnchorVideo);\n disableTabOnSlides();\n currentModalSlideElem.forEach(function (el) {\n el.setAttribute('tabindex', '0');\n });\n updateFocusableElements();\n }\n }\n });\n\n function disableTabOnSlides() {\n var elementsToDisable = $socialModal.querySelectorAll(selectorAnchorVideo);\n elementsToDisable.forEach(function (el) {\n el.setAttribute('tabindex', '-1');\n el.setAttribute('focusable', 'false');\n });\n }\n\n function updateFocusableElements() {\n focusableEls = document.querySelector(selectorModalVisible).querySelectorAll(focusableElements);\n focusableEls.forEach(function (element) {\n element.removeAttribute('focusable');\n });\n firstFocusableEl = focusableEls[0];\n lastFocusableEl = focusableEls[focusableEls.length - 1];\n }\n\n $socialModalSlider.on('transitionEnd', function () {\n $socialGridSwiper.slideToLoop($socialModalSlider.realIndex);\n });\n $socialModalSlider.on('slideChange', function () {\n var currentModalSlideElem = $socialModal.querySelector(swiperSlideActiveSelector);\n resetVideoSlide(currentModalSlideElem);\n\n if (Acr.TrackingManager) {\n Acr.TrackingManager.sendCarouselActivity(event.currentTarget, this);\n }\n });\n $socialModalSlider.on('slideChangeTransitionEnd', function () {\n disableTabOnSlides();\n var currentModalSlideElem = $socialModal.querySelector(swiperSlideActiveSelector).querySelectorAll(selectorAnchorVideo);\n currentModalSlideElem.forEach(function (el) {\n el.setAttribute('tabindex', '0');\n });\n updateFocusableElements();\n });\n attachClicks();\n attachEnters();\n executeLazyLoading();\n }\n\n function stopPropagation(e) {\n e.stopPropagation();\n }\n\n function handleTouchLock(e) {\n e.preventDefault();\n }\n\n function attachKeyboardInput() {\n document.removeEventListener('keyup', keyboardHandler);\n document.addEventListener('keyup', keyboardHandler);\n }\n\n function keyboardHandler(e) {\n if (e.which === 27 && $socialModal.classList.contains('visible')) {\n // esc key\n closeHandler();\n }\n }\n\n function attachResize() {\n window.addEventListener('resize', function (e) {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(function () {\n if (!$socialModal.classList.contains('visible') && $socialModalSlider) {\n $socialModalSlider.destroy(true, true);\n }\n\n if ($socialModal.length && $socialModal.classList.contains('visible')) {\n var currrentModalSlideElem = $socialModal.querySelector(swiperSlideActiveSelector);\n setModalHeight();\n resetVideoSlide(currrentModalSlideElem);\n }\n }, 250);\n });\n }\n\n function executeLazyLoading() {\n var videosToLoad = [].slice.call(document.querySelectorAll('.swiper-slide video.lazy'));\n Utility.initLazyLoadingIO(videosToLoad, Acr.LazyLoadingHelper.loadVideo);\n } // This function initializes the selectors and the data attributes required in other functions\n\n\n function initSelectors(element) {\n $body = document.body;\n $socialGrid = element;\n $socialCardsSlider = $socialGrid.querySelector('.js-social-cards-slider');\n $socialModal = Utility.next($socialGrid, '.js-social-modal');\n showDots = $socialCardsSlider.dataset.showDots === 'true';\n showArrows = $socialCardsSlider.dataset.showArrows === 'true';\n $swiperPagination = $socialGrid.querySelector('.js-swiper-pagination');\n $arrowLeft = $socialGrid.querySelector('.js-arrow-left');\n $arrowRight = $socialGrid.querySelector('.js-arrow-right');\n $socialGridSwiperContainer = $socialGrid.querySelector('.swiper-container');\n $swiperSlide = $socialGrid.querySelectorAll('.swiper-slide');\n\n if ($socialModal) {\n $socialModalVideo = $socialModal.querySelectorAll('.js-video');\n var closeElement = $socialModal.querySelector(socialModalCloseSelector);\n\n if (closeElement) {\n closeElement.setAttribute('tabindex', '0');\n }\n\n $socialModal.removeEventListener('keydown', trapFocus);\n $socialModal.addEventListener('keydown', trapFocus);\n }\n }\n\n function init(element) {\n initSelectors(element);\n initSocialGridSwiper();\n attachClicks();\n attachKeyboardInput();\n attachResize();\n executeLazyLoading();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.StickyNav = function () {\n var $stickyNav;\n var $stickyNavItemsContainer;\n var $stickyNavSentinel;\n var $stickyNavLinks;\n var $mlpNav;\n var $globalNav;\n var $mainWrapper;\n var stickyNavObserver;\n var componentsObserver;\n var resizeTimer;\n var mlpNavHeight;\n var globalNavHeight;\n var stickyNavMobileHeight;\n var stickyNavDesktopWidth;\n var stickyNavHasLook = false;\n var matchMedia;\n var itemsContainerSelectorClass = '.js-sticky-nav-items-container';\n var itemsContainerFixedClass = 'acr-sticky-nav__items-container--fixed';\n var itemsContainerExpandedClass = 'acr-sticky-nav__items-container--expanded';\n var navSentinelSelectorClass = '.js-sticky-nav-sentinel';\n var navLinkSelectorClass = '.js-sticky-nav-link';\n var mlpNavSelectorClass = '.js-mlp-nav';\n var globalNavSelectorClass = '.js-acr-nav';\n var mainWrapperSelectorClass = '.wrapper';\n var mainWrapperCollapsedClass = 'collapsed-nav';\n var activeClass = 'acr-sticky-nav__item--active';\n var look1 = 'acr-sticky-nav--sticky-look-1';\n var stickyNavHeightConstant = 50; // Height in px of the sticky nav when is fixed to the top\n\n function initSelectors(element) {\n $stickyNav = element;\n $stickyNavItemsContainer = $stickyNav.querySelector(itemsContainerSelectorClass);\n $stickyNavSentinel = $stickyNav.querySelector(navSentinelSelectorClass);\n $stickyNavLinks = $stickyNav.querySelectorAll(navLinkSelectorClass);\n $mlpNav = document.querySelector(mlpNavSelectorClass);\n $globalNav = document.querySelector(globalNavSelectorClass);\n $mainWrapper = document.querySelector(mainWrapperSelectorClass);\n }\n\n function initGlobalVariables() {\n mlpNavHeight = $mlpNav ? $mlpNav.offsetHeight : 0;\n globalNavHeight = $globalNav ? $globalNav.offsetHeight : 0;\n stickyNavHasLook = $stickyNav.classList.contains(look1);\n matchMedia = window.matchMedia('(min-width: ' + Constants.breakpoints.lg + 'px)');\n }\n\n function initStickyNavObserver() {\n // Options used by the IntersectionObserver assigned to Sticky Nav\n var stickyNavOptions = {\n rootMargin: setRootMarginStickyNavObserver(),\n threshold: [0, 1]\n }; // Creation of IntersectionObserver assigned to Sticky Nav\n\n stickyNavObserver = new IntersectionObserver(stickyNavObserverHandler, stickyNavOptions);\n stickyNavObserver.observe($stickyNavSentinel);\n }\n\n function initComponentsObserver() {\n // Options used by the IntersectionObserver assigned to all the page componentes that activate sticky nav title change\n var componentsOptions = {\n rootMargin: setRootMarginComponentsObserver(),\n threshold: [0, 1]\n }; // Creation of IntersectionObserver assigned to all the page componentes that activate sticky nav title change\n\n if (!componentsObserver) {\n componentsObserver = new IntersectionObserver(componentsObserverHandler, componentsOptions);\n } // Here all the page componentes that activate sticky nav title change are assigned to the observer\n\n\n $stickyNavLinks.forEach(function (link) {\n var componentId = link.getAttribute('data-component-id');\n var $elementToObserve = document.getElementById(componentId);\n\n if ($elementToObserve) {\n componentsObserver.observe($elementToObserve);\n }\n });\n } // Callback function used by the sticky nav observer\n\n\n function stickyNavObserverHandler(entries, observer) {\n entries.forEach(function (entry) {\n if (entry.intersectionRatio === 0 && entry.boundingClientRect.top < window.innerHeight) {\n if (!Utility.isDesktop()) {\n $stickyNav.style.height = '0';\n }\n\n $stickyNavItemsContainer.classList.add(itemsContainerFixedClass);\n\n if (!$stickyNavItemsContainer.classList.contains(itemsContainerExpandedClass)) {\n $stickyNavItemsContainer.style.height = stickyNavHeightConstant + 'px';\n }\n\n $stickyNavItemsContainer.style.width = '100%';\n setStickyTopPosition();\n } else if (entry.intersectionRatio === 1) {\n if (Utility.isDesktop()) {\n if (stickyNavHasLook) {\n $stickyNavItemsContainer.style.removeProperty('width');\n } else {\n $stickyNavItemsContainer.style.width = stickyNavDesktopWidth + 'px';\n }\n\n $stickyNavItemsContainer.style.removeProperty('height');\n } else {\n setStickyNavHeight();\n }\n\n $stickyNavItemsContainer.classList.remove(itemsContainerFixedClass);\n $stickyNavItemsContainer.classList.remove(itemsContainerExpandedClass);\n $stickyNavItemsContainer.style.removeProperty('top');\n }\n });\n }\n\n function setStickyTopPosition() {\n mlpNavHeight = $mlpNav ? $mlpNav.offsetHeight : 0;\n\n if ($mainWrapper.classList.contains(mainWrapperCollapsedClass)) {\n $stickyNavItemsContainer.style.top = mlpNavHeight + 'px';\n } else {\n globalNavHeight = $globalNav ? $globalNav.offsetHeight : 0;\n $stickyNavItemsContainer.style.top = globalNavHeight + mlpNavHeight + 'px';\n }\n }\n\n function matchMediaHandler() {\n setStickyTopPosition();\n\n if (matchMedia.matches) {\n // Attachment of resize event for Desktop Size\n window.addEventListener('resize', windowResizeStickyNavHandler);\n } else {\n if ($stickyNavItemsContainer.classList.contains(itemsContainerFixedClass)) {\n stickyNavMobileHeight = 0;\n $stickyNavLinks.forEach(function (link) {\n stickyNavMobileHeight += link.offsetHeight;\n });\n } else {\n setStickyNavHeight();\n } // Remove of resize event for mobile size\n\n\n window.removeEventListener('resize', windowResizeStickyNavHandler);\n }\n } // Callback function used by the general components observer\n\n\n function componentsObserverHandler(entries, observer) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n updateLinksStatus(entry.target.id);\n }\n });\n } // Function to calculate the top margin used for options in the stickyNav observer\n\n\n function setRootMarginStickyNavObserver() {\n var marginTop;\n var marginsString; // If $globalNav is collapsed, only take the height of $mlpNav\n\n if ($mainWrapper.classList.contains(mainWrapperCollapsedClass)) {\n marginTop = mlpNavHeight;\n } else {\n marginTop = mlpNavHeight + globalNavHeight;\n }\n\n marginsString = '-' + marginTop + 'px 0px 0px 0px';\n return marginsString;\n } // Function to calculate the top and bottom margin used for options in the component observer\n\n\n function setRootMarginComponentsObserver() {\n var navigatorsHeight;\n var marginTop;\n var marginBottom;\n var marginsString;\n navigatorsHeight = $mlpNav ? mlpNavHeight : globalNavHeight; // If $mlpNav exists, only take the height of $mlpNav (because the global nav is collapse in that case\n\n marginTop = navigatorsHeight + (stickyNavHeightConstant + 5); // \"5px\" is added to \"stickyNavHeightConstant\" to add a little more space and avoid unwanted title changes\n\n marginBottom = window.innerHeight - navigatorsHeight - stickyNavHeightConstant * 2; // We multiply \"stickyNavHeightConstant\" by 2, to have more space to the observer\n\n marginsString = '-' + marginTop + 'px 0px -' + marginBottom + 'px 0px';\n return marginsString;\n }\n\n function bindEvents() {\n // Attachment of click events for each of the sticky nav links\n $stickyNavLinks.forEach(function (link) {\n link.addEventListener('click', linkClickHandler);\n }); // Attachment of resize event for Desktop Size\n\n if (Utility.isDesktop()) {\n window.addEventListener('resize', windowResizeStickyNavHandler);\n } // Using matchMedia to check window size, to avoid window.resize\n\n\n matchMedia.addListener(matchMediaHandler); // Attachment of \"expandedGlobalNav\" listener to execute \"globalNavChangeHandler\" when global nav changes\n\n document.addEventListener('expandedGlobalNav', globalNavChangeHandler);\n } // Function called every time the Global Nav changes from \"expanded\" or \"collapsed\" state\n\n\n function globalNavChangeHandler() {\n stickyNavObserver.unobserve($stickyNavSentinel);\n initStickyNavObserver();\n setStickyTopPosition();\n } // Function that is called when a link is clicked\n\n\n function linkClickHandler() {\n event.preventDefault();\n\n if (!Utility.isDesktop() && $stickyNavItemsContainer.classList.contains(itemsContainerFixedClass) && !$stickyNavItemsContainer.classList.contains(itemsContainerExpandedClass)) {\n document.addEventListener('click', clickOutsideLinkHandler);\n $stickyNavItemsContainer.style.height = stickyNavMobileHeight + 'px';\n $stickyNavItemsContainer.classList.add(itemsContainerExpandedClass);\n } else {\n var clickedComponentId = this.getAttribute('data-component-id');\n var $elementToGo = document.getElementById(clickedComponentId);\n var scrollPosition;\n\n if ($stickyNavItemsContainer.classList.contains(itemsContainerExpandedClass)) {\n $stickyNavItemsContainer.classList.remove(itemsContainerExpandedClass);\n $stickyNavItemsContainer.style.height = stickyNavHeightConstant + 'px';\n }\n\n document.removeEventListener('click', clickOutsideLinkHandler);\n\n if ($elementToGo) {\n updateLinksStatus(clickedComponentId);\n scrollPosition = calculateScrollPosition($elementToGo);\n Utility.scrollTo(scrollPosition, 1000);\n }\n }\n } // Function to calculate the scroll position, using the element to go position and adding the global, mlp and sticky navigation heights\n\n\n function calculateScrollPosition(element) {\n var elementPosition;\n var stickyNavCurrentHeight;\n var positionToScroll;\n stickyNavCurrentHeight = $stickyNavItemsContainer.offsetHeight;\n\n if ($stickyNavItemsContainer.classList.contains(itemsContainerFixedClass)) {\n elementPosition = element.offsetTop;\n } else {\n elementPosition = element.offsetTop - stickyNavCurrentHeight;\n }\n\n if (!$mainWrapper.classList.contains(mainWrapperCollapsedClass)) {\n positionToScroll = elementPosition - globalNavHeight - mlpNavHeight - stickyNavHeightConstant;\n } else {\n positionToScroll = elementPosition - mlpNavHeight - stickyNavHeightConstant;\n }\n\n return positionToScroll;\n } // Function that is called when is clicked outside the sticky navigation while is expanded\n\n\n function clickOutsideLinkHandler() {\n event.preventDefault();\n\n if (!$stickyNavItemsContainer.contains(event.target)) {\n $stickyNavItemsContainer.classList.remove(itemsContainerExpandedClass);\n $stickyNavItemsContainer.style.height = stickyNavHeightConstant + 'px';\n document.removeEventListener('click', clickOutsideLinkHandler);\n }\n } // Function to set the new \"active\" link when the page scrolls or an element is clicked\n\n\n function updateLinksStatus(paramTargetComponent) {\n $stickyNavLinks.forEach(function (link) {\n var componentId = link.getAttribute('data-component-id');\n\n if (componentId === paramTargetComponent) {\n link.parentElement.classList.add(activeClass);\n } else {\n link.parentElement.classList.remove(activeClass);\n }\n });\n } // Callback function when resizing occurs on desktop\n\n\n function windowResizeStickyNavHandler() {\n // If there's a timer, cancel it\n if (resizeTimer) {\n window.cancelAnimationFrame(resizeTimer);\n } // Setup the new requestAnimationFrame()\n\n\n resizeTimer = window.requestAnimationFrame(function () {\n stickyNavWidthDesktopHandler();\n });\n }\n\n function stickyNavWidthDesktopHandler() {\n if (!$stickyNavItemsContainer.classList.contains(itemsContainerFixedClass)) {\n if (!stickyNavHasLook) {\n setStickyNavWidth();\n } else {\n $stickyNav.style.removeProperty('height');\n $stickyNavItemsContainer.style.removeProperty('height');\n $stickyNavItemsContainer.style.removeProperty('width');\n }\n }\n } // Sets the size for the sticky nav, height for mobile and tablet and width only for desktop\n\n\n function setStickyNavSize() {\n if (Utility.isDesktop()) {\n stickyNavWidthDesktopHandler();\n } else {\n setStickyNavHeight();\n }\n }\n\n function setStickyNavWidth() {\n stickyNavDesktopWidth = 1;\n $stickyNav.style.removeProperty('height');\n $stickyNavItemsContainer.style.removeProperty('height');\n $stickyNavItemsContainer.style.removeProperty('width');\n $stickyNavLinks.forEach(function (link) {\n stickyNavDesktopWidth += link.parentElement.offsetWidth + 1; // offsetWidth + 1 to add the border right of the li element\n });\n $stickyNavItemsContainer.style.width = stickyNavDesktopWidth + 'px';\n }\n\n function setStickyNavHeight() {\n stickyNavMobileHeight = 0;\n $stickyNavLinks.forEach(function (link) {\n stickyNavMobileHeight += link.offsetHeight;\n });\n $stickyNavItemsContainer.style.removeProperty('width');\n $stickyNav.style.height = stickyNavMobileHeight + 'px';\n $stickyNavItemsContainer.style.height = stickyNavMobileHeight + 'px';\n }\n\n function init(element) {\n initSelectors(element);\n initGlobalVariables();\n initStickyNavObserver();\n initComponentsObserver();\n setStickyNavSize();\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.StickySideNav = function () {\n var $stickySideNav;\n var $stickySideNavList;\n var $backToTopButton;\n var $openChatButton;\n var $chatBotTitle;\n var backToTopButton = '.js-back-to-top-button';\n var stickySideNavList = '.js-sticky-side-nav-list';\n var openChatButton = '.js-open-chat-button';\n var chatBotTitle = '.js-chatbot-title';\n var stickySideNavItemVisible = 'sticky-side-nav__item--visible';\n var stickySideNavItemExpanded = 'sticky-side-nav__item--expanded';\n var stickySideNavListExpanded = 'sticky-side-nav__list--expanded';\n\n function openChat() {\n event.preventDefault();\n\n if (typeof carlaBot !== 'undefined') {\n $stickySideNav.addClass('hidden');\n carlaBot.openChat();\n setTimeout(function () {\n $stickySideNav.removeClass('hidden');\n }, 1500);\n }\n }\n\n function backToTop(event) {\n event.preventDefault();\n $('html, body').animate({\n scrollTop: 0\n }, '300');\n $backToTopButton.removeClass(stickySideNavItemVisible);\n $backToTopButton.removeClass(stickySideNavItemExpanded);\n }\n\n function eventHandler(event) {\n if (event.type === 'touchend' && !$stickySideNavList.hasClass(stickySideNavListExpanded)) {\n event.preventDefault();\n $stickySideNavList.addClass(stickySideNavListExpanded);\n $stickySideNavList.setAttribute[0]('aria-expanded', 'true');\n $(document).on('touchend', hideStickySideNavList);\n } else if ($(event.currentTarget.parentElement).is($openChatButton)) {\n openChat();\n $stickySideNavList.removeClass(stickySideNavListExpanded);\n $stickySideNavList.setAttribute[0]('aria-expanded', 'false');\n $(document).off('click touchend', hideStickySideNavList);\n } else {\n $stickySideNavList.removeClass(stickySideNavListExpanded);\n $stickySideNavList.setAttribute[0]('aria-expanded', 'false');\n $(document).off('click touchend', hideStickySideNavList);\n }\n }\n\n function onScroll() {\n if ($stickySideNavList.hasClass(stickySideNavListExpanded)) {\n $stickySideNavList.removeClass(stickySideNavListExpanded);\n $stickySideNavList.setAttribute[0]('aria-expanded', 'false');\n $(document).off('click', hideStickySideNavList);\n }\n\n if (!$backToTopButton.hasClass(stickySideNavItemVisible)) {\n $backToTopButton.addClass(stickySideNavItemVisible);\n }\n\n if (($backToTopButton.hasClass(stickySideNavItemVisible) || $backToTopButton.hasClass(stickySideNavItemExpanded)) && $(document).scrollTop() === 0) {\n $backToTopButton.removeClass(stickySideNavItemExpanded);\n $backToTopButton.removeClass(stickySideNavItemVisible);\n }\n }\n\n function hideStickySideNavList() {\n if (!$(event.target).parents().is($stickySideNavList)) {\n $stickySideNavList.removeClass(stickySideNavListExpanded);\n $stickySideNavList[0].setAttribute('aria-expanded', 'false');\n $(document).off('click touchend', hideStickySideNavList);\n }\n }\n\n function initSelectors(element) {\n $stickySideNav = $(element);\n $stickySideNavList = $stickySideNav.find(stickySideNavList);\n $backToTopButton = $stickySideNav.find(backToTopButton);\n $openChatButton = $stickySideNav.find(openChatButton);\n $chatBotTitle = $stickySideNav.find(chatBotTitle);\n }\n\n function bindEvents() {\n $stickySideNavList.hover(function () {\n $(this).addClass(stickySideNavListExpanded);\n $(this)[0].setAttribute('aria-expanded', 'true');\n $(document).off('click', hideStickySideNavList);\n $(document).on('click', hideStickySideNavList);\n });\n $(window).scroll(function () {\n onScroll();\n });\n $stickySideNavList.find('a').on('click touchend', eventHandler);\n $backToTopButton.find('a').on('click touchend', backToTop);\n }\n\n function init(element) {\n initSelectors(element);\n bindEvents();\n $stickySideNav.css('display', 'flex');\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\n/* global pannellum */\nvar Acr = Acr || {};\n\nAcr.ThreeSixty = function () {\n var $threeSixty;\n var $threeSixtyGalleries;\n var $clickAndDragBtn;\n var $threeSixtyTabs;\n var $threeSixtyTabsDisclaimers;\n var $threeSixtyColorSelectors;\n var $threeSixtyCTABtn;\n var galleriesArray = [];\n var clickAndDragBtnEnabled = true;\n var threeSixtyGallerySelector = '.js-three-sixty-gallery';\n var clickAndDragBtnSelector = '.js-click-and-drag-btn';\n var spinnerSelector = '.js-three-sixty-spinner';\n var galleryImgSelector = '.js-three-sixty-img';\n var galleryPanoramaSelector = '.js-three-sixty-panorama';\n var panoPictureSelector = '.js-three-sixty-pano-picture';\n var panoramaControlsSelector = '.js-panorama-controls';\n var panoramaZoomInSelector = '.js-panorama-zoom-in';\n var panoramaZoomOutSelector = '.js-panorama-zoom-out';\n var threeSixtyTabSelector = '.js-three-sixty-tab';\n var tabDisclaimerSelector = '.js-tab-disclaimer';\n var colorsContainerSelector = '.js-colors-container';\n var colorSelector = '.js-three-sixty-color';\n var colorsDescriptionSelector = '.js-color-description';\n var ctaBtn = '.js-cta-btn';\n var activeClass = 'is-active';\n var hideClass = 'hide';\n var loadedClass = 'loaded';\n var imgExt = '.jpg';\n\n function initSelectors(element) {\n $threeSixty = element;\n $clickAndDragBtn = $threeSixty.querySelector(clickAndDragBtnSelector);\n $threeSixtyGalleries = $threeSixty.querySelectorAll(threeSixtyGallerySelector);\n $threeSixtyTabs = $threeSixty.querySelectorAll(threeSixtyTabSelector);\n $threeSixtyTabsDisclaimers = $threeSixty.querySelectorAll(tabDisclaimerSelector);\n $threeSixtyColorSelectors = $threeSixty.querySelectorAll(colorsContainerSelector);\n $threeSixtyCTABtn = $threeSixty.querySelector(ctaBtn);\n } // Init each gallery of the 360\n\n\n function initGalleries() {\n $threeSixtyGalleries.forEach(function ($gallery) {\n var galleryId = $gallery.id;\n var threeSixtyGallery = new Gallery($gallery); // One \"Gallery\" instance for each gallery (exterior/interior)\n\n galleriesArray[galleryId] = threeSixtyGallery; // The the gallery instance to the galleries array\n });\n }\n\n function bindEvents() {\n // Attachment of click event for the \"Click and Drag Button\"\n $clickAndDragBtn.addEventListener('click', clickAndDragBtnHandler); // Attachment of click events for each of the tabs\n\n $threeSixtyTabs.forEach(function (tab) {\n tab.addEventListener('click', tabClickHandler);\n });\n } // Function that is triggered when the \"Click and Drag\" button is clicked\n\n\n function clickAndDragBtnHandler() {\n var activeGalleryId;\n var $threeSixtyActiveGallery = $threeSixty.querySelector('.' + activeClass); // Gets the active gallery\n\n activeGalleryId = $threeSixtyActiveGallery.id;\n galleriesArray[activeGalleryId].initGallery(); // Find the active gallery in the galleries array to init the active gallery\n\n clickAndDragBtnEnabled = false;\n $clickAndDragBtn.classList.add(hideClass);\n } // Function that is triggered when a \"Tab\" is clicked\n\n\n function tabClickHandler(event) {\n var tabGalleryId = event.currentTarget.getAttribute('data-gallery-id'); // Add the \"active\" class to the tab that was clicked and removes the class to the others\n // If the tab gallery is not initialized, init all the content of the tab\n\n $threeSixtyGalleries.forEach(function ($gallery) {\n var galleryId = $gallery.id;\n\n if (galleryId === tabGalleryId) {\n $gallery.classList.add(activeClass);\n\n if (!$gallery.classList.contains(loadedClass) && !clickAndDragBtnEnabled) {\n galleriesArray[galleryId].initGallery();\n }\n } else {\n $gallery.classList.remove(activeClass);\n }\n }); // Change the \"disclaimer\" text according to the selected tab\n\n $threeSixtyTabsDisclaimers.forEach(function ($disclaimer) {\n var disclaimerId = $disclaimer.getAttribute('data-gallery-id');\n\n if (disclaimerId === tabGalleryId) {\n $disclaimer.classList.add(activeClass);\n } else {\n $disclaimer.classList.remove(activeClass);\n }\n }); // Change the \"colors\" container according to the selected tab\n\n $threeSixtyColorSelectors.forEach(function ($container) {\n var containerId = $container.getAttribute('data-gallery-id');\n\n if (containerId === tabGalleryId) {\n $container.classList.add(activeClass);\n } else {\n $container.classList.remove(activeClass);\n }\n }); // Add styles for the selected tab\n\n $threeSixtyTabs.forEach(function (tab) {\n tab.classList.remove(activeClass);\n });\n event.currentTarget.classList.add(activeClass);\n }\n\n function Gallery(pGallery) {\n var $gallery = pGallery;\n var $threeSixtyGalleryImg;\n var $spinner;\n var $galleryColors;\n var $galleryColorDescription;\n var $panoStaticPicture;\n var $panoStaticPictureSource;\n var $panoStaticPictureImg;\n var galleryId = $gallery.id;\n var dataFrames;\n var pointerStartPosX = 0;\n var pointerEndPosX = 0;\n var monitorStartTime = 0;\n var monitorInt = 10;\n var pointerDistance = 0;\n var pointerSpeed = 10; // Speed of the pointer\n\n var framesPerGallery = 0; // Frames for the gallery\n\n var currentFrame = 0;\n var expectedFrame = 0;\n var dataSource = '';\n var galleryType = $gallery.getAttribute('data-type');\n var matchMedia = window.matchMedia('(min-width: ' + Constants.breakpoints.lg + 'px)');\n var colorsStringSelector = \"\".concat(colorsContainerSelector, '[data-gallery-id=\"').concat(galleryId, '\"]'); // Get only the colors for the current gallery instance\n\n var $colorsContainer = $threeSixty.querySelector(colorsStringSelector);\n var panoView;\n var panoColorScenes = {}; // Empty object for storing interior color scenes\n // Add the matchMedia listener and load the first image only if the gallery type is \"threesixty\"\n\n if (galleryType === 'threesixty') {\n matchMedia.addListener(updateImgDataSource);\n loadFirstImgSrc();\n } // If the color container exists in the markup, attach the click event for each color\n\n\n if ($colorsContainer) {\n var activeColorSwatch = null;\n $galleryColors = $colorsContainer.querySelectorAll(colorSelector);\n $galleryColorDescription = $colorsContainer.querySelectorAll(colorsDescriptionSelector); // Attachment of click events for each color depending on the gallery type\n\n if (galleryType === 'threesixty') {\n $galleryColors.forEach(function (color) {\n // Search for the active swatch in order to add the color swatch code to the cta\n if (color.classList.contains(activeClass)) {\n activeColorSwatch = color;\n }\n\n color.addEventListener('click', changeColorThreeSixtyHandler);\n });\n\n if (activeColorSwatch) {\n updateColorSwatchCode(activeColorSwatch);\n }\n } else {\n $galleryColors.forEach(function (color) {\n color.addEventListener('click', changeColorPanoramaHandler);\n var interiorImg = color.getAttribute('data-pano-img');\n var interiorColorId = color.getAttribute('data-id'); // Adding color keys and images to the \"panoColorScenes\" object\n\n panoColorScenes[interiorColorId] = {\n panorama: interiorImg\n };\n });\n $panoStaticPicture = $threeSixty.querySelector(panoPictureSelector);\n $panoStaticPictureSource = $panoStaticPicture.querySelector('source');\n $panoStaticPictureImg = $panoStaticPicture.querySelector('img');\n }\n } // Load the \"static\" img for the 360 gallery depending on the screen size, img that is showed when the 360 is not initialized\n\n\n function loadFirstImgSrc() {\n var firstImgNumber = '01';\n $threeSixtyGalleryImg = $gallery.querySelector(galleryImgSelector);\n updateImgDataSource();\n\n if ($threeSixtyGalleryImg.getAttribute('loading') === 'lazy' && !Acr.LazyLoadingHelper.isLazyLoadingNative()) {\n $threeSixtyGalleryImg.setAttribute('data-src', \"\".concat(dataSource).concat(firstImgNumber).concat(imgExt));\n } else {\n $threeSixtyGalleryImg.src = \"\".concat(dataSource).concat(firstImgNumber).concat(imgExt);\n }\n\n $threeSixtyGalleryImg.classList.remove(hideClass);\n } // Get the data source for the Img depending on the size of the screen\n\n\n function updateImgDataSource() {\n var previousDataSource = dataSource;\n\n if (matchMedia.matches) {\n dataSource = $gallery.getAttribute('data-source-large');\n } else {\n dataSource = $gallery.getAttribute('data-source-small');\n }\n\n if (previousDataSource !== '') {\n $threeSixtyGalleryImg.src = $threeSixtyGalleryImg.src.replace(previousDataSource, dataSource);\n }\n } // Function that is activated when a \"color\" of a gallery type \"threesixty\" is clicked\n\n\n function changeColorThreeSixtyHandler(event) {\n var dataSourceSmall = event.currentTarget.getAttribute('data-source-small');\n var dataSourceLarge = event.currentTarget.getAttribute('data-source-large');\n $gallery.setAttribute('data-source-small', dataSourceSmall);\n $gallery.setAttribute('data-source-large', dataSourceLarge);\n updateActiveColor(event.currentTarget);\n updateImgDataSource();\n\n if ($gallery.classList.contains(loadedClass)) {\n var imagesToLoad = dataFrames;\n $spinner.classList.remove(hideClass); // Load one image per frame\n\n for (var i = 1; i <= dataFrames; i++) {\n var newImage = new Image();\n var formattedIndex = ('0' + i).slice(-2); // Format the index in two digits, example: 1 --> 01\n\n var newUrl = \"\".concat(dataSource).concat(formattedIndex).concat(imgExt);\n newImage.src = newUrl;\n\n newImage.onload = function () {\n imagesToLoad--;\n\n if (imagesToLoad === 0) {\n // Lines executed when all images are ready\n $spinner.classList.add(hideClass);\n }\n };\n }\n }\n\n updateColorSwatchCode(event.currentTarget);\n } // Function that is activated when a \"color\" of a gallery type \"pano\" is clicked\n\n\n function changeColorPanoramaHandler(event) {\n var dataSourceSmall = event.currentTarget.getAttribute('data-source-small');\n var dataSourceLarge = event.currentTarget.getAttribute('data-source-large');\n var newPanoImg = event.currentTarget.getAttribute('data-pano-img');\n var selectedColor = event.currentTarget.getAttribute('data-id'); // Update the data attributes for the current gallery\n\n $gallery.setAttribute('data-pano-img', newPanoImg);\n $gallery.setAttribute('data-color-id', selectedColor);\n updateActiveColor(event.currentTarget);\n\n if ($gallery.classList.contains(loadedClass)) {\n $spinner.classList.remove(hideClass); // Switch to the \"pannellum\" scene with the new color, keeping the same position and zoom\n\n panoView.loadScene(selectedColor, panoView.getPitch(), panoView.getYaw(), panoView.getHfov());\n panoView.on('load', function () {\n $spinner.classList.add(hideClass);\n });\n } else {\n // Update the pictures attributes and image source\n $panoStaticPictureSource.setAttribute('srcset', dataSourceLarge);\n $panoStaticPictureImg.setAttribute('srcset', dataSourceSmall);\n $panoStaticPictureImg.setAttribute('src', dataSourceSmall);\n }\n }\n\n function updateActiveColor(selectedColor) {\n var colorId = selectedColor.getAttribute('data-id'); // Add styles for the selected color\n\n $galleryColors.forEach(function (color) {\n color.classList.remove(activeClass);\n });\n selectedColor.classList.add(activeClass); // Update the color description text\n\n $galleryColorDescription.forEach(function (description) {\n var descriptionId = description.getAttribute('data-id');\n\n if (descriptionId === colorId) {\n description.classList.add(activeClass);\n } else {\n description.classList.remove(activeClass);\n }\n });\n } // Function that update the color swatch code in the CTA href base on the active color swatch\n\n\n function updateColorSwatchCode(colorSwatch) {\n if ($threeSixtyCTABtn) {\n var ctaHrefParams = new URL($threeSixtyCTABtn.href).searchParams;\n var colorCode = colorSwatch.getAttribute('data-color-code');\n\n if (ctaHrefParams.has('exterior')) {\n var extParam = ctaHrefParams.get('exterior');\n $threeSixtyCTABtn.href = $threeSixtyCTABtn.href.replace(extParam, colorCode);\n } else {\n var oldParams = ctaHrefParams.toString();\n ctaHrefParams.append('exterior', colorCode);\n var newParams = ctaHrefParams.toString();\n\n if (oldParams === '') {\n $threeSixtyCTABtn.href += '?' + newParams;\n } else {\n $threeSixtyCTABtn.href = $threeSixtyCTABtn.href.replace(oldParams, newParams);\n }\n }\n }\n } // Function to init the \"active\" gallery depending on the type of gallery\n\n\n function initGallery() {\n if (galleryType === 'threesixty') {\n initThreeSixty();\n } else {\n initPannellum();\n }\n } // Function to init the \"exterior three sixty\" and load all required images\n\n\n function initThreeSixty() {\n dataFrames = parseInt($gallery.getAttribute('data-frames'), 10);\n var imagesToLoad = dataFrames;\n $spinner = $gallery.querySelector(spinnerSelector);\n framesPerGallery = dataFrames;\n $spinner.classList.remove(hideClass); // Load one image per frame\n\n for (var i = 1; i <= dataFrames; i++) {\n var newImage = new Image();\n var formattedIndex = ('0' + i).slice(-2); // Format the index in two digits, example: 1 --> 01\n\n var newUrl = \"\".concat(dataSource).concat(formattedIndex).concat(imgExt);\n newImage.src = newUrl;\n\n newImage.onload = function () {\n imagesToLoad--;\n\n if (imagesToLoad === 0) {\n // Lines executed when all images are ready\n $spinner.classList.add(hideClass);\n addThreeSixtyListeners();\n galleryLoaded();\n }\n };\n }\n } // Add the class \"loaded\" to the active gallery when the content is loaded\n\n\n function galleryLoaded() {\n $gallery.classList.add(loadedClass);\n } // Event listeners for the exterior gallery\n\n\n function addThreeSixtyListeners() {\n $gallery.addEventListener('mousedown', mouseDownHandler);\n $gallery.addEventListener('mouseup', mouseUpHandler);\n $gallery.addEventListener('touchstart', mouseDownHandler);\n $gallery.addEventListener('touchend', mouseUpHandler);\n } // Events that are executed when the user presses the mouse or touches the screen and keeps pressing\n\n\n function mouseDownHandler(event) {\n event.preventDefault();\n pointerStartPosX = getPointerEvent(event).pageX; // Assign the mouse pointer X position\n\n event.currentTarget.addEventListener('mousemove', mouseMoveHandler);\n event.currentTarget.addEventListener('touchmove', mouseMoveHandler);\n } // Events that are executed when the user releases the mouse or stops pressing the screen\n\n\n function mouseUpHandler(event) {\n event.preventDefault();\n event.currentTarget.removeEventListener('mousemove', mouseMoveHandler);\n event.currentTarget.removeEventListener('touchmove', mouseMoveHandler);\n } // Events that are executed when the user moves the mouse while holding it down or moves the finger while holding down the screen\n\n\n function mouseMoveHandler(event) {\n event.preventDefault();\n var currentPosition;\n var currentGallery = event.currentTarget;\n pointerEndPosX = getPointerEvent(event).pageX; // Assign the mouse pointer X position\n\n if (monitorStartTime < new Date().getTime() - monitorInt) {\n var sign; // used to convert the \"currentPosition\" to a positive or negative number\n\n pointerDistance = pointerEndPosX - pointerStartPosX; // pointer position from initial pressure to stop\n\n sign = pointerDistance < 0 ? -1 : 1; // Applying \"Math.abs\" to remove the negative symbol from \"pointerDistance\", then after the \"Math.ceil\" on the calculation, multiply the result by \"sign (1 or -1)\" to add the symbol\n\n currentPosition = Math.ceil(framesPerGallery * pointerSpeed * (Math.abs(pointerDistance) / currentGallery.offsetWidth)) * sign;\n expectedFrame = currentFrame + currentPosition;\n refreshFrame();\n monitorStartTime = new Date().getTime();\n pointerStartPosX = getPointerEvent(event).pageX;\n }\n } // Refresh currentFrame when the user moves the mouse\n\n\n function refreshFrame() {\n var framesDiff;\n var ease;\n\n if (currentFrame !== expectedFrame) {\n framesDiff = Math.ceil((expectedFrame - currentFrame) * 0.1);\n ease = expectedFrame < currentFrame ? Math.floor((expectedFrame - currentFrame) * 0.1) : framesDiff;\n currentFrame += ease;\n changeImageSource();\n }\n } // Change the image source depending on the current frame and the frames per gallery\n\n\n function changeImageSource() {\n var imgNumber = -Math.ceil(currentFrame % framesPerGallery) + 1;\n\n if (imgNumber <= 0) {\n imgNumber += framesPerGallery;\n }\n\n var formattedNumber = ('0' + imgNumber).slice(-2); // Format the number in two digits, example: 1 --> 01\n\n var newSrc = \"\".concat(dataSource).concat(formattedNumber).concat(imgExt);\n $threeSixtyGalleryImg.src = newSrc;\n }\n\n function getPointerEvent(event) {\n return event.targetTouches ? event.targetTouches[0] : event;\n }\n\n function initPannellum() {\n $spinner = $gallery.querySelector(spinnerSelector);\n var $panorama = $gallery.querySelector(galleryPanoramaSelector);\n var $panoramaControls = $panorama.querySelector(panoramaControlsSelector);\n var $panoramaZoomIn = $panorama.querySelector(panoramaZoomInSelector);\n var $panoramaZoomOut = $panorama.querySelector(panoramaZoomOutSelector);\n var interiorImg = $gallery.getAttribute('data-pano-img');\n var interiorColorId = $gallery.getAttribute('data-color-id');\n var zoomButtonsDisabled = false;\n var initialScenes = {}; // Empty object for storing interior color scenes\n // Adding color keys and images to the \"initialScenes\" object\n\n initialScenes[interiorColorId] = {\n panorama: interiorImg\n };\n $spinner.classList.remove(hideClass); // Create a \"pannellum\" object with its properties\n\n panoView = pannellum.viewer($panorama, {\n autoLoad: true,\n showControls: false,\n mouseZoom: false,\n hfov: 90,\n // Initial zoom level. minimum 50 / maximum 120.\n pitch: -12,\n // Sets the panorama’s starting pitch position in degrees\n default: {\n firstScene: interiorColorId\n },\n scenes: Object.keys(panoColorScenes).length !== 0 ? panoColorScenes : initialScenes // Use \"panoColorScenes\" if it has colors, otherwise use \"initialScenes\"\n\n }); // Actions executed when the panoramic view is ready\n\n panoView.on('load', function () {\n $spinner.classList.add(hideClass);\n $panoramaControls.classList.remove(hideClass);\n galleryLoaded();\n attachControlsEvents();\n });\n\n function attachControlsEvents() {\n // Attachment of click event for the \"Zoom In\" button\n $panoramaZoomIn.addEventListener('click', zoomInButtonHandler); // Attachment of click event for the \"Zoom Out\" button\n\n $panoramaZoomOut.addEventListener('click', zoomOutButtonHandler);\n } // Actions executed when the zoom-in button is clicked\n\n\n function zoomInButtonHandler() {\n panoView.setHfov(panoView.getHfov() - 15); // This block removes click event listener for the zoom buttons to avoid strange \"multiple click\" behavior\n\n $panoramaZoomIn.removeEventListener('click', zoomInButtonHandler);\n $panoramaZoomOut.removeEventListener('click', zoomOutButtonHandler);\n zoomButtonsDisabled = true;\n } // Actions executed when the zoom-out button is clicked\n\n\n function zoomOutButtonHandler() {\n panoView.setHfov(panoView.getHfov() + 15); // This block removes click event listener for the zoom buttons to avoid strange \"multiple click\" behavior\n\n $panoramaZoomIn.removeEventListener('click', zoomInButtonHandler);\n $panoramaZoomOut.removeEventListener('click', zoomOutButtonHandler);\n zoomButtonsDisabled = true;\n } // Actions executed when the zoom animation is finished\n\n\n panoView.on('animatefinished', function () {\n // This block adds click event listener for the zoom buttons when the zoom finish\n if (zoomButtonsDisabled) {\n zoomButtonsDisabled = false;\n $panoramaZoomIn.addEventListener('click', zoomInButtonHandler);\n $panoramaZoomOut.addEventListener('click', zoomOutButtonHandler);\n }\n });\n }\n\n return {\n initGallery: initGallery\n };\n }\n\n function init(element) {\n initSelectors(element);\n initGalleries();\n bindEvents();\n }\n\n return {\n init: init\n };\n};\n\"use strict\";\n\nvar Acr = Acr || {};\n\nAcr.ThreeSixtySmall = function () {\n var mainContainer = $('.acr-threesixty-small');\n var galleriesContainer = mainContainer.find('.galleries-container');\n var buttonsTabContainer = mainContainer.find('.color-selector .row.buttons');\n var buttonsColorsContainer = mainContainer.find('.color-selector');\n var buildCTAs = mainContainer.find('.build-n-price .acr-cta-btn');\n var cutline = mainContainer.find('.js-threesixty-cutline');\n var activeGallery = true;\n var btnClass = 'btn-color-select';\n var colorName = 'color-name';\n var pClass = 'previous-image';\n var currentClass = 'current-image';\n var ext = '.jpg';\n var aspectW = 16;\n var aspectH = 9;\n var defaultTotalFrames = 72;\n var isActive = 'is-active';\n var prevCur = 'acr-threesixty-small-prev-current';\n var dButtons = '.btn-display-selector';\n var lazyClass360 = 'lazy-360';\n var lazyClassPano = 'lazy-pano';\n\n function Gallery(gallery) {\n this.id = gallery.name.replace(/\\s/g, '_');\n this.colorId = 0;\n this.name = gallery.name;\n this.type = gallery.type;\n this.framePerGallery = gallery.frames ? parseInt(gallery.frames, 10) : defaultTotalFrames;\n this.vehicles = gallery.vehicles;\n this.disclaimer = gallery.disclaimer;\n this.activeGallery = '';\n this.ldImages = 0;\n this.frames = [];\n this.galleryContainer = '';\n this.imagesContainer = '';\n this.colorsContainer = '';\n this.spinner = '';\n this.threesixtyIcon = '';\n this.selectedFrame = 0;\n this.lWinW = 0;\n this.pointerStartPosX = 0;\n this.pointerEndPosX = 0;\n this.dragging = false;\n this.ready = false;\n this.monitorStartTime = 0;\n this.monitorInt = 10;\n this.pDist = 0;\n this.sPd = 10; // Speed\n\n this.cFrame = 0;\n this.eFrame = 0;\n this.ticker = 0;\n this.isLoaded = false;\n var oThis = this;\n\n if (activeGallery) {\n activeGallery = false;\n this.activeGallery = 'is-active';\n }\n\n this.initialize = function () {\n this.addTabBtnChangeGallery();\n this.addColorBtnsAndDisclaimer();\n\n if (this.type === 'iframe') {\n this.initIframe();\n } else if (this.type === 'pano') {\n this.initPano();\n } else {\n this.initThreesixty();\n }\n };\n\n this.initThreesixty = function () {\n this.addThreesixtyDom();\n this.loadImage(0);\n this.attachListeners();\n this.selectGalleryListener();\n };\n\n this.initIframe = function () {\n this.addIframeDom();\n this.imagesContainer.attr({\n src: this.vehicles[0].baseUrl\n });\n this.setSizes();\n this.setColorName(0);\n this.attachIntListeners();\n this.selectGalleryListener();\n };\n\n this.initPano = function () {\n this.addPanoDom();\n var panoUrl = galleriesContainer.data('panohtml');\n this.setSizes();\n this.setColorName(0);\n this.attachPanoListeners();\n this.selectGalleryListener();\n };\n\n this.attachIntListeners = function () {\n var that = this;\n this.colorsContainer.on('click', '.btn-color-select', function (e) {\n var selected = $(this).data('item');\n e.preventDefault(); // This function doesn't exist anywhere! Commenting for now,\n // probably can be removed next time this file needs an update\n // that.updateInterior(selected);\n\n that.setColorName(selected);\n });\n $(window).on('resize', that.resizeHandler);\n };\n\n this.attachPanoListeners = function () {\n var that = this;\n this.colorsContainer.on('click', '.btn-color-select', function (e) {\n var selected = $(this).data('item');\n e.preventDefault();\n\n if (that.colorId !== selected) {\n window.pano.readConfigUrlAsync(that.vehicles[selected].baseUrl);\n that.setColorName(selected);\n }\n });\n $(window).on('resize', that.resizeHandler);\n };\n\n this.addIframeDom = function () {\n var templateIframe = '';\n galleriesContainer.append(templateIframe);\n this.galleryContainer = galleriesContainer.find('.iframe360.' + this.id);\n this.imagesContainer = galleriesContainer.find('#iframeSpin-' + this.id);\n this.colorsContainer = buttonsColorsContainer.find('.' + this.id);\n };\n\n this.addPanoDom = function () {\n var that = this;\n var templateIframe = '';\n galleriesContainer.append(templateIframe);\n this.galleryContainer = galleriesContainer.find('.pano360.' + this.id);\n $.ajax({\n url: galleriesContainer.data('panohtml'),\n type: 'GET',\n dataType: 'html',\n xhrFields: {\n withCredentials: true\n },\n success: function success(resp) {\n that.galleryContainer.html(resp);\n window.pano.setBasePath(galleriesContainer.data('absolute-url'));\n that.initLazyLoadingPano();\n },\n error: function error(xhr, ajaxOptions, thrownError) {\n console.log(xhr.status);\n console.log(xhr.responseText);\n }\n });\n this.colorsContainer = buttonsColorsContainer.find('.' + this.id);\n };\n\n this.selectGalleryListener = function () {\n var toggleTimeout;\n var that = this;\n buttonsTabContainer.on('click', '[data-target=\"' + this.id + '\"]', function (event) {\n event.preventDefault();\n\n if (!$(this).hasClass(isActive)) {\n var target = $(this).data('target');\n clearTimeout(toggleTimeout);\n $(dButtons).removeClass(isActive);\n $(this).addClass(isActive);\n galleriesContainer.find('.item').removeClass(isActive);\n buttonsColorsContainer.find('.item').removeClass(isActive);\n galleriesContainer.find('.' + target).addClass(isActive);\n buttonsColorsContainer.find('.' + target).addClass(isActive); // If the pano wasn't loaded on component load is reloaded with the current selected color\n\n if (target.toLowerCase() === 'interior' && !that.isLoaded) {\n that.isLoaded = true;\n }\n\n toggleTimeout = setTimeout(function () {\n that.resizeHandler();\n }, 500);\n }\n });\n };\n\n this.attachListeners = function () {\n var that = this;\n this.galleryContainer.mousedown(function (event) {\n event.preventDefault();\n that.pointerStartPosX = that.getPointerEvent(event).pageX;\n that.dragging = true;\n });\n this.galleryContainer.mouseup(function (event) {\n event.preventDefault();\n that.dragging = false;\n });\n this.galleryContainer.mousemove(function (event) {\n event.preventDefault();\n that.trackPointer(event);\n });\n this.galleryContainer.on('touchstart', function (event) {\n that.pointerStartPosX = that.getPointerEvent(event).pageX;\n that.dragging = true;\n });\n this.galleryContainer.on('touchmove', function (event) {\n that.trackPointer(event);\n });\n this.galleryContainer.on('touchend', function (event) {\n event.preventDefault();\n that.dragging = false;\n });\n this.colorsContainer.on('click', '.btn-color-select', function (e) {\n var selected = $(this).data('item');\n e.preventDefault();\n that.frames = [];\n that.eFrame = 0;\n that.ldImages = 0;\n that.clearContainer();\n that.loadImage(selected);\n that.setColorName(selected);\n });\n $(window).on('resize', that.resizeHandler);\n }; // Handling window resize event\n\n\n this.resizeHandler = function () {\n oThis.setSizes();\n }; // Cleaning DOM elements when changing colors\n\n\n this.clearContainer = function () {\n var $current;\n this.spinner.fadeIn();\n $current = this.imagesContainer.find('li .current-image').parent('li');\n $current.addClass(prevCur);\n this.imagesContainer.find('li:not(.' + prevCur + ')').remove();\n };\n\n this.trackPointer = function (event) {\n var cLc;\n\n if (this.ready && this.dragging) {\n this.pointerEndPosX = this.getPointerEvent(event).pageX;\n\n if (this.monitorStartTime < new Date().getTime() - this.monitorInt) {\n this.pDist = this.pointerEndPosX - this.pointerStartPosX;\n cLc = Math.ceil((this.framePerGallery - 1) * this.sPd * (this.pDist / this.galleryContainer.width()));\n this.eFrame = this.cFrame + cLc;\n this.refresh();\n this.monitorStartTime = new Date().getTime();\n this.pointerStartPosX = this.getPointerEvent(event).pageX;\n }\n }\n };\n\n this.refresh = function () {\n this.renderFrame();\n };\n\n this.renderFrame = function () {\n var deft;\n var ease;\n\n if (this.cFrame !== this.eFrame) {\n deft = Math.ceil((this.eFrame - this.cFrame) * 0.1);\n ease = this.eFrame < this.cFrame ? Math.floor((this.eFrame - this.cFrame) * 0.1) : deft;\n this.hidePreviousFrame();\n this.cFrame += ease;\n this.showCFrame();\n this.selectedFrame = this.getCurrFrame();\n }\n };\n\n this.hidePreviousFrame = function () {\n this.frames[this.getCurrFrame()].removeClass(currentClass).addClass(pClass);\n };\n\n this.showCFrame = function () {\n this.frames[this.getCurrFrame()].removeClass(pClass).addClass(currentClass);\n };\n\n this.getCurrFrame = function () {\n var c = -Math.ceil(this.cFrame % this.framePerGallery);\n\n if (c < 0) {\n c += this.framePerGallery - 1;\n }\n\n return c;\n };\n\n this.getPointerEvent = function (event) {\n var e = event;\n var oE = e.originalEvent;\n return oE.targetTouches ? oE.targetTouches[0] : e;\n };\n\n this.addThreesixtyDom = function () {\n var templateThreeixty = '';\n galleriesContainer.append(templateThreeixty);\n this.galleryContainer = galleriesContainer.find('.threesixty.' + this.id);\n this.imagesContainer = this.galleryContainer.find('.threesixty-images');\n this.spinner = this.galleryContainer.find('.spinner');\n this.colorsContainer = buttonsColorsContainer.find('.' + this.id);\n this.threesixtyIcon = this.galleryContainer.find('.threesixty-icon');\n }; // Adding + Loading images based on provided DATA\n\n\n this.loadImage = function (index) {\n var that;\n var li;\n var imageN;\n var image;\n\n if (this.vehicles[index]) {\n that = this;\n li = document.createElement('li');\n imageN = this.vehicles[index].baseUrl + ('0' + (this.ldImages + 1)).slice(-2) + ext;\n image = $('![]()
').attr({\n 'data-src': imageN,\n 'data-index': that.ldImages,\n alt: this.vehicles[index].colorName\n }).addClass(pClass).appendTo(li);\n this.frames.push(image);\n this.imagesContainer.append(li);\n that.imageLoaded(index);\n $(image).load(function () {\n if (parseInt($(this).attr('data-index'), 10) === that.selectedFrame) {\n that.spinner.fadeOut(500);\n }\n });\n }\n };\n\n this.setSizes = function () {\n var containerWidth;\n var newHeight;\n\n if (window.innerWidth !== this.lWinW) {\n this.lWinW = window.innerWidth;\n containerWidth = galleriesContainer.width();\n newHeight = aspectH / aspectW * containerWidth;\n this.galleryContainer.height(newHeight);\n }\n }; // Checking loaded images against total images to start 360\n\n\n this.imageLoaded = function (index) {\n var that = this;\n this.ldImages += 1;\n\n if (this.ldImages === this.framePerGallery) {\n this.frames[this.selectedFrame].removeClass(pClass).addClass(currentClass);\n this.setColorName(index);\n that.initLazyLoading360();\n that.setSizes();\n that.showThreeSixty();\n } else {\n this.loadImage(index);\n }\n }; // Updating color name text based on selection\n\n\n this.setColorName = function (i) {\n var selectedColorConfig = this.vehicles[i];\n var configurationType = this.name.toLowerCase();\n this.colorId = i;\n this.colorsContainer.find('.' + this.id + '.' + colorName + ' .text').text(selectedColorConfig.colorName);\n this.setActiveButton(i); // Updates the URL for the Build CTA\n\n if (selectedColorConfig.colorCode) {\n buildCTAs.each(function (index, item) {\n var url = $(item).attr('href');\n $(item).attr('href', Utility.updateQueryStringParameter(url, configurationType, selectedColorConfig.colorCode));\n });\n }\n }; // Updating active color button based on selection\n\n\n this.setActiveButton = function (i) {\n this.colorsContainer.find('.' + btnClass).removeClass(isActive);\n this.colorsContainer.find('[data-item=\"' + i + '\"]').addClass(isActive);\n }; // Showing 360 when all is ready\n\n\n this.showThreeSixty = function () {\n var that = this;\n this.imagesContainer.fadeIn('slow', function () {\n that.imagesContainer.find('.' + prevCur).remove();\n });\n this.ready = true;\n };\n\n this.addTabBtnChangeGallery = function () {\n var trackingData = $('.color-selector .threesixty-tabs').attr('data-tab-tracking');\n var trackingAttribute = '';\n\n if (trackingData) {\n trackingAttribute = 'data-tracking=\"' + trackingData + '\"';\n }\n\n var btn = '' + this.name + '';\n buttonsTabContainer.append(btn);\n };\n\n this.addColorBtnsAndDisclaimer = function () {\n var buttons = '
';\n buttons += '
' + '
' + '' + '
';\n\n if (this.disclaimer) {\n buttons += '' + '' + this.disclaimer + '
';\n }\n\n buttons += '