/**
 * Blogun hover slider
 *
 * @since 1.0.0
 */
var blogunHoverSlider = function( el ) {

	var current = 0,
		spinner = el.querySelector( '.blogun-spinner' );

	// Hide spinner
	var hideSpinner = function() {

		spinner.classList.remove( 'visible' );

		setTimeout( function() {
			spinner.style.display = 'none';
		}, 300 );

		el.querySelector( '.hover-slider-backgrounds' ).classList.add( 'loaded' );
	};

	el.querySelector( '.hover-slide-bg' ).classList.add( 'active' );

	// Set background images from data-background
	el.querySelectorAll( '.hover-slider-backgrounds .hover-slide-bg' ).forEach( ( item, i ) => {
		item.style.backgroundImage = 'url(' + item.getAttribute( 'data-background' ) + ')';

		el.querySelector( '.hover-slider-items > div:nth-child(' + ( i + 1 ) + ')' ).style.setProperty( '--bg-image', 'url("' + item.getAttribute( 'data-background' ) + '")' );

		item.removeAttribute( 'data-background' );
	});

	// Wait for images to load
	imagesLoaded( el.querySelectorAll( '.hover-slider-backgrounds' ), { background: '.hover-slide-bg' }, function() {

		var preloader = document.getElementById( 'blogun-preloader' );

		// Wait for preloader to finish before we show fade in animation
		if ( null !== preloader && ! document.body.classList.contains( 'blogun-loaded' ) ) {
			document.body.addEventListener( 'blogun-preloader-done', function() {
				setTimeout( function() {
					hideSpinner();
				}, 300 );
			});
		} else {
			setTimeout( function() {
				hideSpinner();
			}, 300 );
		}
	});

	// Change backgrounds on hover
	el.querySelectorAll( '.hover-slider-item-wrapper' ).forEach( ( item ) => {
		item.addEventListener( 'mouseenter', function() {

			if ( current !== blogunGetIndex( item ) ) {
				current = blogunGetIndex( item );

				el.querySelectorAll( '.hover-slide-bg' ).forEach( ( item, i ) => {
					item.classList.remove( 'active' );

					if ( i === current ) {
						item.classList.add( 'active' );
					}
				});
			}
		});
	});

	return el;
};

/**
 * Blogun horizontal/vertical slider
 *
 * @since 1.0.0
 */
var blogunHorizontalSlider = function( el ) {

	var current = 0,
		spinner = el.querySelector( '.blogun-spinner' );

	// Hide spinner
	var hideSpinner = function() {

		spinner.classList.remove( 'visible' );

		setTimeout( function() {
			spinner.style.display = 'none';
		}, 300 );

	};

	// Wait for images to load
	imagesLoaded( el.querySelectorAll( '.hover-slider-backgrounds' ), function() {

		var preloader = document.getElementById( 'blogun-preloader' );

		// Wait for preloader to finish before we show fade in animation
		if ( null !== preloader && ! document.body.classList.contains( 'blogun-loaded' ) ) {
			document.body.addEventListener( 'blogun-preloader-done', function() {
				setTimeout( function() {
					hideSpinner();
				}, 300 );
			});
		} else {
			setTimeout( function() {
				hideSpinner();
			}, 300 );
		}
	});

	return el;
};

// Main
( function() {

	// On ready event
	document.addEventListener( 'DOMContentLoaded', function() {

		// Init sliders
		document.querySelectorAll( '.blogun-hover-slider' ).forEach( ( item ) => {
			blogunHoverSlider( item );
		});

		document.querySelectorAll( '.blogun-horizontal-slider' ).forEach( ( item ) => {
			blogunHorizontalSlider( item );
		});
		
		document.querySelectorAll( '.blogun-vertical-slider' ).forEach( ( item ) => {
			blogunHorizontalSlider( item );
		});

        // horizontal-slider-items
        if ( document.querySelector( '.blogun-horizontal-slider' ) ) {
            let blogunHorizontalSwiper = document.querySelector( '.horizontal-slider-items' );
            let swiperOptions = {
                slidesPerView: 1,
                spaceBetween: 40,
                centeredSlides: true,
                loop: true,
                autoHeight: true,
                autoplay: {
                    delay: 8000,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            };
            let blogunHorizontalSwiperSlider = new Swiper( blogunHorizontalSwiper, swiperOptions );
        }
        
		// vertical-slider-items
        if ( document.querySelector( '.blogun-vertical-slider' ) ) {
            let blogunVerticalSwiper = document.querySelector( '.vertical-slider-items' );
			let swiperOptions = JSON.parse( blogunVerticalSwiper.dataset.swiperOptions );
            let blogunVerticalSwiperSlider = new Swiper( blogunVerticalSwiper, swiperOptions );			
        }

	});
}() );