const slider = jQuery( '.single-vehicle-slider' );
const thumbnails = jQuery( '.single-vehicle-slider-thumbnails' );

function mobile_api_slider() {
	slider.slick({
		lazyLoad: 'ondemand',
		slidesToShow: 1,
		slidesToScroll: 1,
		asNavFor: '.single-vehicle-slider-thumbnails',

		arrows: false,
		adaptiveHeight: true
	});

	thumbnails.slick({
		lazyLoad: 'progressive',
		slidesToShow: 8,
		slidesToScroll: 1,
		asNavFor: '.single-vehicle-slider',

		focusOnSelect: true,
		responsive: [
			{
				breakpoint: 1024,
				settings: {
					slidesToShow: 6,
					// slidesToScroll: 6,
				}
			}, {
				breakpoint: 600,
				settings: {
					slidesToShow: 4,
					// slidesToScroll: 4
				}
			}, {
				breakpoint: 480,
				settings: {
					slidesToShow: 3,
					// slidesToScroll: 3
				}
			}
	    ]
	});
}

jQuery( document ).ready( function() {
	mobile_api_slider();

	jQuery( document ).on( 'click', '.vehicle-grid > .vehicle-images:not(.vehicle-lightbox) > .single-vehicle-slider .slide', function( e ) {
		e.preventDefault();
		jQuery( 'body' ).addClass( 'lightbox-open' );
		jQuery( '.vehicle-grid > .vehicle-images' ).addClass( 'vehicle-lightbox' );

		slider.slick( 'setPosition' );
		thumbnails.slick( 'setPosition' );
	});

	jQuery( document ).on( 'click', '.vehicle-grid > .vehicle-images.vehicle-lightbox > .close-button', function( e ) {
		e.preventDefault();
		jQuery( 'body' ).removeClass( 'lightbox-open' );
		jQuery( '.vehicle-grid > .vehicle-images' ).removeClass( 'vehicle-lightbox' );

		slider.slick( 'setPosition' );
		thumbnails.slick( 'setPosition' );
	});
});