$(function(){
  $('.video-block').click(function(){
    if($("video")[0].paused){
        $('.video-block').addClass("fullsize");
        $("video")[0].play();
        $(".mtz-vlc-klfbf").prop("muted", false);
        $(".btn-play").css("opacity", "0");
        setTimeout(function() {
          $(".chart").css("opacity", "1");
        }, 275);
        $(".chart").css("transition", "all .5s");
        
    }
    
    else if($("video")[0].played){
      $('.video-block').removeClass("fullsize");
      $("video")[0].pause();
      $(".btn-play").css("opacity", "1");
      $(".chart").css("opacity", "0");
      $(".chart").css("transition", "all 0s");
    }
  });
  
  $("video").on("ended", function(){
    $('.video-block').removeClass("fullsize");
      $("video")[0].pause();
      $(".btn-play").css("opacity", "1");
      $(".chart").css("opacity", "0");
      $(".chart").css("transition", "all 0s");
  })
  
  $(document).ready(function(){
    $("video").on("timeupdate", function(event){
        onTrackedVideoFrame(this.currentTime, this.duration);
    });
  });
  
  function onTrackedVideoFrame(currentTime, duration){
    $(".chart").attr("stroke-dashoffset", 123-currentTime*(123/duration));
    $(".chart").attr("stroke-dasharray", 123)
  } 
})