jQuery(document).ready(function($){
    if (!$('#animate1').length) return;

    LottieInteractivity.create({
        player: '#animate1',
        mode:"cursor",
        actions: [
            {
                type: "click",
                forceFlag: false
            }
        ]
    });
    LottieInteractivity.create({
        player: '#animate2',
        mode:"cursor",
        actions: [
            {
                type: "click",
                forceFlag: false
            }
        ]
    });
    LottieInteractivity.create({
        player: '#animate3',
        mode:"cursor",
        actions: [
            {
                type: "click",
                forceFlag: false
            }
        ]
    });
    LottieInteractivity.create({
        player: '#animate1m',
        mode: "scroll",
        actions: [
            {
                visibility: [0, 1.0],
                type: "play"
            }
        ]
    });
    LottieInteractivity.create({
        player: '#animate2m',
        mode: "scroll",
        actions: [
            {
                visibility: [0, 1.0],
                type: "play"
            }
        ]
    });
    LottieInteractivity.create({
        player: '#animate3m',
        mode: "scroll",
        actions: [
            {
                visibility: [0, 1.0],
                type: "play"
            }
        ]
    });

    function animateSlider(){
        let Pos = $('.unique-slider-item.active').attr("class").match(/\d+/);
        var position = parseInt(Pos[0]);
        var prevpos = position - 1;
        var nextpos = position + 1;
        if(prevpos < 1){
            prevpos = $('.unique-slider-item').length;
        }
        if(nextpos > $('.unique-slider-item').length){
            nextpos = 1;
        }
        let player = document.querySelector("#animate"+position);
        let prevplayer = document.querySelector("#animate"+prevpos);
        let posplayer = document.querySelector("#animate"+nextpos);
        
        
        setTimeout(function(){
            prevplayer.stop();
            posplayer.stop();
        },500);
        
        setTimeout(function(){
            player.play();
        },500);
        setTimeout(function(){
            player.pause();
        },1750);
    }
    
    var interval;
    var timer = function(){
        interval = setInterval(function(){
            $('.next.unique').click();
        },6010);
    };

    function setSlider(){

        var num = 1;
        $(".unique-slider-item").each( function(){
            $(this).addClass('slider-num'+num);
            num++
        });

        let player1 = document.querySelector("#animate1");
        setTimeout(function(){
            player1.stop();
        },6500);

        $(".unique-slider").each( function(){

            var $slider = $(this),
                $itemscontainer = $slider.find(".unique-slider-items-container");

            if ($itemscontainer.find(".unique-slider-item.active").length == 0){
                $itemscontainer.find(".unique-slider-item").first().addClass("active");
                $itemscontainer.find(".unique-slider-item").first().addClass("animated");
                $itemscontainer.find(".unique-slider-item").first().addClass("block-animated");
                
                animateSlider();
                timer();

            }

            function setWidth(){
                var totalWidth = 0

                $($itemscontainer).find(".unique-slider-item").each( function(){
                    totalWidth += $(this).outerWidth();
                });

                $itemscontainer.width(totalWidth);

            }
            function setTransform(){

                var $activeItem = $itemscontainer.find(".unique-slider-item.active"),
                    activeItemOffset = $activeItem.offset().left,
                    itemsContainerOffset = $itemscontainer.offset().left,
                    totalOffset = activeItemOffset - itemsContainerOffset

                $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"})

            }
            function nextSlide(){
                var activeItem = $itemscontainer.find(".unique-slider-item.active"),
                    activeItemIndex = activeItem.index(),
                    sliderItemTotal = $itemscontainer.find(".unique-slider-item").length,
                    nextSlide = 0;

                if (activeItemIndex + 1 > sliderItemTotal - 1){
                    nextSlide = 0;
                }else{
                    nextSlide = activeItemIndex + 1
                }

                $(".unique-slider-item").fadeOut(200);

                setTimeout(function(){
                    var nextSlideSelect = $itemscontainer.find(".unique-slider-item").eq(nextSlide),
                    itemContainerOffset = $itemscontainer.offset().left,
                    totalOffset = nextSlideSelect.offset().left - itemContainerOffset

                    $itemscontainer.find(".unique-slider-item.active").removeClass("active");
                    nextSlideSelect.addClass("active");

                    nextSlideSelect.fadeIn(200);

                    animateSlider();

                    $slider.find(".dots-unique").find(".dot").removeClass("active")
                    $slider.find(".dots-unique").find(".dot").eq(nextSlide).addClass("active");
                    $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"})

                }, 220);

                

            }
            function prevSlide(){
                var activeItem = $itemscontainer.find(".unique-slider-item.active"),
                    activeItemIndex = activeItem.index(),
                    sliderItemTotal = $itemscontainer.find(".unique-slider-item").length,
                    nextSlide = 0;

                if (activeItemIndex - 1 < 0){
                    nextSlide = sliderItemTotal - 1;
                }else{
                    nextSlide = activeItemIndex - 1;
                }

                var nextSlideSelect = $itemscontainer.find(".unique-slider-item").eq(nextSlide),
                    itemContainerOffset = $itemscontainer.offset().left,
                    totalOffset = nextSlideSelect.offset().left - itemContainerOffset

                $itemscontainer.find(".unique-slider-item.active").removeClass("active");
                nextSlideSelect.addClass("active");
                
                $itemscontainer.find(".unique-slider-item").find('.unique-block').children().css('opacity', 0);
                $itemscontainer.find(".unique-slider-item").find('.unique-block').children().css('margin-left', '-165px');
                nextSlideSelect.addClass("block-animated");
                nextSlideSelect.find('.big-title').animate({
                    opacity: 1, // animate slideUp
                    marginLeft: '0px'
                }, 'slow', 'linear', function() {
                    $(this).show();
                });
                setTimeout(function(){
                    nextSlideSelect.find('.power-subtitle').animate({
                        opacity: 1, // animate slideUp
                        marginLeft: '0px'
                    }, 'slow', 'linear', function() {
                        $(this).show();
                    });
                }, 300);
                setTimeout(function(){
                    nextSlideSelect.find('.power-desc').animate({
                        opacity: 1, // animate slideUp
                        marginLeft: '0px'
                    }, 'slow', 'linear', function() {
                        $(this).show();
                    });
                }, 600);
                setTimeout(function(){
                    nextSlideSelect.find('.power-about').animate({
                        opacity: 1, // animate slideUp
                        marginLeft: '0px'
                    }, 'slow', 'linear', function() {
                        $(this).show();
                    });
                }, 900);

                animateSlider();

                
                $slider.find(".dots-unique").find(".dot").removeClass("active")
			    $slider.find(".dots-unique").find(".dot").eq(nextSlide).addClass("active");
                $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"})

            }
            
            function makeDots(){
    			var activeItem = $itemscontainer.find(".unique-slider-item.active"),
    					activeItemIndex = activeItem.index(),
    					sliderItemTotal = $itemscontainer.find(".unique-slider-item").length;
                var countSlides = activeItemIndex + 1;
    			
    			for (i = 0; i < sliderItemTotal; i++){
    				$slider.find(".dots-unique").append("<div class='dot' aria-label='Slide "+countSlides+" of "+sliderItemTotal+"'></div>");
                    countSlides++;
    			}
    			
    			$slider.find(".dots-unique").find(".dot").eq(activeItemIndex).addClass("active")
    			
    		}

            setWidth();
            setTransform();
            makeDots();

            $(window).on("load resize scroll",function(e){
                setWidth();
                setTransform();
            });

            var nextBtn = $slider.find(".next.unique"),
                prevBtn = $slider.find(".prev.unique");

            nextBtn.on('click', function(e){
                e.preventDefault();
                nextSlide();
            });

            prevBtn.on('click', function(e){
                e.preventDefault();
                prevSlide();
            });
            
            $slider.find(".dots-unique").find(".dot").on('click', function(e){
			
			    clearInterval(interval);
                timer();
			
    			var dotIndex = $(this).index(),
    					totalOffset = $itemscontainer.find(".unique-slider-item").eq(dotIndex).offset().left - $itemscontainer.offset().left;
    					
    			$itemscontainer.find(".unique-slider-item.active").removeClass("active");
    			$itemscontainer.find(".unique-slider-item").eq(dotIndex).addClass("active");
    			$slider.find(".dots-unique").find(".dot").removeClass("active");
    			$(this).addClass("active");
 
    			animateSlider();
    			
    			$itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"})
    			
    		});


        });

    }

    setSlider();
    //Set aria label
    //If lottie animation is loaded then do below code
    setTimeout(function() {
        if ($('.sempra_block-unique-block .get-lottie_title').length) {
            var getLottieEl = $('.sempra_block-unique-block .get-lottie_title');
            var getLottieTitle = $('.sempra_block-unique-block .get-lottie_title').attr('data-lottietitle');

            $(getLottieEl).each(function(index) {
                getLottieTitle = $(this).attr('data-lottietitle');
                $(this).find('.lottie').attr('aria-label', getLottieTitle);
            });
        }
    }, 800);

});