jQuery(document).ready(function() {
  var bigimage = jQuery("#big");
  var thumbs = jQuery("#thumbs");
  //var totalslides = 10;
  var syncedSecondary = true;

  bigimage
    .owlCarousel({
    items: 1,
    slideSpeed: 2000,
    nav: false,
    autoplay: true,
    dots: false,
    loop: false,
    responsiveRefreshRate: 200,
    navText: [
      '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
      '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
    ]
  })
    .on("changed.owl.carousel", syncPosition);

  thumbs
    .on("initialized.owl.carousel", function() {
    thumbs
      .find(".owl-item")
      .addClass("video-thumbs");

     thumbs
      .find(".owl-item")
      .eq(0)
      .addClass("current");
  })
    .owlCarousel({
    items: 5,
    dots: false,
    loop: false,
    nav: true,
    navText: [
      '<i class="fa fa-angle-left" aria-hidden="true"></i>',
      '<i class="fa fa-angle-right" aria-hidden="true"></i>'
    ],
    smartSpeed: 200,
    slideSpeed: 500,
    slideBy: 4,
    responsiveRefreshRate: 100,
     responsive:{
        0:{
            items:2
        },
        600:{
            items:4
        },
        1000:{
            items:6
        }
    }
  })
    .on("changed.owl.carousel", syncPosition2);

  function syncPosition(el) {
    //if loop is set to false, then you have to uncomment the next line
    //var current = el.item.index;

    //to disable loop, comment this block
    var count = el.item.count - 1;
    var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

    if (current < 0) {
      current = count;
    }
    if (current > count) {
      current = 0;
    }
    //to this
    thumbs
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = thumbs.find(".owl-item.active").length - 1;
    var start = thumbs
    .find(".owl-item.active")
    .first()
    .index();
    var end = thumbs
    .find(".owl-item.active")
    .last()
    .index();

    if (current > end) {
      thumbs.data("owl.carousel").to(current, 100, true);
    }
    if (current < start) {
      thumbs.data("owl.carousel").to(current - onscreen, 100, true);
    }
  }

  function syncPosition2(el) {
    if (syncedSecondary) {
      var number = el.item.index;
      bigimage.data("owl.carousel").to(number, 100, true);
    }
  }

  thumbs.on("click", ".owl-item", function(e) {
    e.preventDefault();
    var number = jQuery(this).index();
    bigimage.data("owl.carousel").to(number, 300, true);
  });




var vgsPlayer, poster;
vgsPlayer = videojs('video-src', {
  autoplay: true,
  sources: [{
      type: "application/x-mpegURL",
      src: ""
    }]
});

vgsPlayer.poster('iptv-web/iptv-assets/video-thumb.jpg');


function vsgLoadVideo(vidURL, poster) {

  vgsPlayer.src({
    "type": "application/x-mpegURL",
    "src": vidURL,
  });
  if (poster) vgsPlayer.poster(poster);
  vgsPlayer.play();

}

document.getElementById('iframe-src').onload = function() {
  jQuery('.loader').hide();//
};

jQuery('.modal-toggle').on('click', function(e) {
  e.preventDefault();

  jQuery('.loader').show();


  

  var iframe_src = this.getAttribute('iframe-src')
  var Item_thumbs = this.parentElement
  var thumbs = Item_thumbs.parentElement;

  if(!thumbs.classList.contains('video-thumbs')){
      jQuery('.modal-plugin').toggleClass('is-visible');
  }else{
      jQuery('.item').removeClass("Active");
      Item_thumbs.classList.add("Active");
  }




  vgsPlayer.pause();
  vgsPlayer.src('');
  document.getElementById("iframe-src").setAttribute("src",null);


  if (this.classList.contains('video')) {
  jQuery('.iframe-src').hide();
  jQuery('.video-src').show()
  vsgLoadVideo(iframe_src,"iptv-assets/video-thumb.jpg");
    
  }else{
  vgsPlayer.pause();
  vgsPlayer.src('');
  jQuery('.iframe-src').show()
  jQuery('.video-src').hide();
  document.getElementById("iframe-src").setAttribute("src",iframe_src);

  }
  
});

  jQuery('.videochanel').owlCarousel({
    loop:false,
    margin:20,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
  })

});