$(function() 
{
	$(".car_top_card").on("click", function()
	{
		let selectedBlock = $(".car_top_description_"+$(this).attr("data-id"));
		console.log(selectedBlock)
		$(".car_top_description").css("display", "none");
		$(".car_top_description_"+$(this).attr("data-id")).css("display", "flex");

		$('html, body').animate({
			scrollTop: $("#leasing_slider").offset().top - 100
		}, 500);

		// Слайдер с точками
		const setupDotBtns = (dotsArray, embla) => {
			dotsArray.forEach((dotNode, i) => {
				dotNode.addEventListener("click", () => embla.scrollTo(i), false);
			});
		};
		const generateDotBtns = (dots, embla) => {
			const template = document.getElementById("embla-dot-template").innerHTML;
			dots.innerHTML = embla.scrollSnapList().reduce(acc => acc + template, "");
			return [].slice.call(dots.querySelectorAll(".embla__dot"));
		};

		const selectDotBtn = (dotsArray, embla) => () => {
			const previous = embla.previousScrollSnap();
			const selected = embla.selectedScrollSnap();
			dotsArray[previous].classList.remove("is-selected");
			dotsArray[selected].classList.add("is-selected");
		};

		const sliderWithFade = selectedBlock[0].querySelector("#single_slider");
		if (
			typeof sliderWithFade != "undefined" &&
			sliderWithFade != null
		) {
			let sliderWithFadeOption = {
				loop: false,
				skipSnaps: false
			};
			const singleSlider = EmblaCarousel(
				sliderWithFade,
				sliderWithFadeOption
			);
			
			const dots = selectedBlock[0].querySelector(".slider_dots");
			const dotsArray = generateDotBtns(dots, singleSlider);
			const setSelectedDotBtn = selectDotBtn(dotsArray, singleSlider);
			setupDotBtns(dotsArray, singleSlider);
			singleSlider.on("select", setSelectedDotBtn);
			singleSlider.on("init", setSelectedDotBtn);
		}
	});
});