$(document).ready(function(){

    var time = 5;
    var $bar,
        $slick,
        isPause,
        tick,
        percentTime;    
    $slick = $('.main-slider').on('init', function(event, slick) {
    console.log("initialized");
    $(event.target).find(".slick-active").addClass("slick-animated");
    console.log(slick);

    $(".main-slider .slick-list").find(".slick-slide").find("a").attr("tabindex","-1");
    $(".main-slider .slick-list").find(".slick-slide.slick-animated").find("a").attr("tabindex","0");


  }).slick({
      draggable: true,      
      autoplay: true,      
      autoplaySpeed: 7500,      
      arrows: false,
      fade: true,
      speed: 700,
      infinite: true,
      cssEase: 'ease-in-out',
      touchThreshold: 100,
      dots: true,
      customPaging : function(slider, i) {
        return "<div class='sd-dot'><a href='#'><span class='hideTxt'>visual "+(i+1)+"</span></a></div>";
      }
    }).on('afterChange', function(event, slick, currentSlide, nextSlide){
    $(event.target).find(".slick-animated").removeClass("slick-animated");
    $(event.target).find(".slick-active").addClass("slick-animated");

    $(".main-slider .slick-list").find(".slick-slide").find("a").attr("tabindex","-1");
    $(".main-slider .slick-list").find(".slick-slide.slick-animated").find("a").attr("tabindex","0");
  }); 


    $(".main-slider .slick-dots > li").removeAttr("role");
     $bar = $('#progress-bar .bar');
     function startProgressbar() {
       resetProgressbar();
       percentTime = 0;
       isPause = false;
       tick = setInterval(interval, 15);
     }
     function stopProgressbar(){
        isPause = true; 
     }
     function interval() {
       if(isPause === false) {
         percentTime += 1 / (time+0.1);
         $bar.css({
           width: percentTime+"%"
         });
         if(percentTime >= 100)
           {
             $slick.slick('slickNext');
             startProgressbar();
           }
       }
     }  
     function resetProgressbar() {
       $bar.css({
        width: 0+'%' 
       });
       clearTimeout(tick);
     }

     startProgressbar(); 

     function btn_play(){
      $('.btn-pause').removeClass("play");
      $('.main-slider').slick('slickPlay');
      $(".main-slider .slider-bg").css("animation-play-state","running");
    }

    function btn_pause(){
      $('.btn-pause').addClass("play");
      $('.main-slider').slick('slickPause');
      $(".main-slider .slider-bg").css("animation-play-state","paused");
    }


     $(".slick-dots li").on("click",function(){
      startProgressbar();
      btn_play();
    });
     $('.main-slider').on('swipe', function(){
      startProgressbar();
      btn_play();
    });


    $('.btn-pause').on("click",function(e){
      e.preventDefault();    

      if($(this).hasClass("play")){
        btn_play();
        $(this).attr("title","main slider pause")
        isPause = false;
      }else{     
        btn_pause();
        $(this).attr("title","main slider play")
        stopProgressbar();
      }
    });   


    $(".slick-dots li").on("click",function(){
      $(this).addClass("slick-animated");
      $(this).siblings().removeClass("slick-animated");
    });


    $(".tab-btn > li a").on("click",function(e){
      $(this).parents("li").addClass("on").siblings().removeClass("on");
      var numVal = $(this).parents("li").attr("class");
      numVal = numVal.replace(/[^0-9]/g,"");
      $(this).parents().siblings().children(".tabCon"+numVal).addClass("show").siblings().removeClass("show");
      e.preventDefault();
    });
 
  $(".main-visual").append("<div class='dot-wrap'></div>");
  $(".main-slider .slick-dots").prependTo(".dot-wrap");
  $(".btn-bgcontrol").appendTo(".dot-wrap");





});