$(document).on('ready', function() {

    var slideholdtime = 8000;

    $('.stepautoplay-home').slick({
        lazyLoad: 'ondemand',
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
        autoplay: true,
        'autoplaySpeed': 5000,
        adaptiveHeight: true,
        dots: true
    });
    
    $('.stepautoplay-new').slick({
        lazyLoad: 'ondemand',
		  slidesToShow: 1,
		  slidesToScroll: 1,
		  arrows: false,
        autoplay: true,
        'autoplaySpeed': slideholdtime,
    });
    $('.stepautoplay-exist').slick({
        lazyLoad: 'ondemand',
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
        autoplay: true,
        'autoplaySpeed': slideholdtime,
    });
	
	$('.stepautoplay-new').on('init', function(event, slick){
		console.log("initialized");
	});


    $('.stepautoplay-new').on('afterChange', function(event, slick, currentSlide){
        var currentSlideNew = $('.stepautoplay-new').slick('slickCurrentSlide') ;
        $("#sub1").find(".steps li").removeClass('currentStep');
        $("#sub1").find(".steps li").eq(currentSlideNew).toggleClass('currentStep');
    });
    
    $('.stepautoplay-exist').on('afterChange', function(event, slick, currentSlide){
        var currentSlideExist = $('.stepautoplay-exist').slick('slickCurrentSlide') ;
        $("#sub2").find(".steps li").removeClass('currentStep');
        $("#sub2").find(".steps li").eq(currentSlideExist).toggleClass('currentStep');
    });

    var slickOptions = {
        autoplay: true,
    // rest of options
    },
    $slick = $('.stepautoplay-new');
    var playSlick = function() {    
        $slick.slick('slickSetOption', {
          'autoplay': true,
           'autoplaySpeed': slideholdtime,
        }, true);
    };
    
     var slickOptions2 = {
        autoplay: true,
    // rest of options
    },
    $slick2 = $('.stepautoplay-exist');
    var playSlick2 = function() {    
        $slick2.slick('slickSetOption', {
          'autoplay': true,
           'autoplaySpeed': slideholdtime,
        }, true);
    };
 
    
    $('.subtabbtn').on('click', function () {
        resetSlickCurrent();
    });
    $('#tab3entry').on('click', function () {
        resetSlickCurrent();
        console.log($(".slickshell").height());
            var slickshellheight = $(".slickshell").height();
            
            var arrowheight = $(".prevArr").height();
            var arrowtop = (slickshellheight / 2) - (arrowheight / 2);
            $(".prevArr").css('margin-top',arrowtop);
            $(".nextArr").css('margin-top',arrowtop);
    });
    
    
    $('#sub1 .steps li').on('click', function () {
        var steptarg = $(this).index();
        $(".stepautoplay-new").slick('slickGoTo',steptarg);
    });
    $('#sub2 .steps li').on('click', function () {
        var steptarg = $(this).index();
        $(".stepautoplay-exist").slick('slickGoTo',steptarg);
    });
    
    
    $('#sub1').find('.prevArr').click(function(){
      
      $('.stepautoplay-new').slick('slickPrev');
    });
    
    $('#sub1').find('.nextArr').click(function(){
      $('.stepautoplay-new').slick('slickNext');
    });
    
    $('#sub2').find('.prevArr').click(function(){
      
      $('.stepautoplay-exist').slick('slickPrev');
    });
    
    $('#sub2').find('.nextArr').click(function(){
      $('.stepautoplay-exist').slick('slickNext');
    });
    
});

function resetSlickCurrent(){
        $(".stepautoplay-new").slick('slickGoTo',0);
        $(".stepautoplay-exist").slick('slickGoTo',0);
//        playSlick();
//        playSlick2();
}