$(document).ready(function() {
  // Header
  $("header ul li a[href^='" + this.location.hash + "']").parent().addClass('active');
  $('header ul li a:not(.tel)').click(function() {
    $('header ul li').removeClass('active');
    $(this).closest('li').addClass('active');
  });
  // Top
  $("#top .slider").owlCarousel({
    items: 1,
    nav: false,
    dots: true,
    lazyLoad: true
  });
  // Features
  $("#features .slider").owlCarousel({
    items: 1,
    nav: true,
    navText: ['', ''],
    dots: false,
    lazyLoad: true,
    loop: true
  });
  // Tracks
  //$('#tracks .slide .gallery > ul').css('margin-top', '150px');
  $("#tracks .slider").owlCarousel({
    items: 1,
    nav: false,
    dots: true,
    lazyLoad: true,
    freeDrag: false,
    pullDrag: false,
    mouseDrag: false,
    touchDrag: false
  });
  if ($(window).width() >= 992)
  {
    var galleryItemSize = $('#tracks .gallery-wrap .gallery > ul > li').outerHeight();
    var galleryItemsCount = $('#tracks .gallery-wrap .gallery > ul > li').length;
    var galleryItemsVisibleCount = 3;
    var galleryCurrentItem = 0;
    $('#tracks .gallery-wrap .arrow-down').on('click', function(evt) {
      evt.preventDefault();
      galleryCurrentItem++;
      galleryCurrentItem = Math.max(Math.min(galleryItemsCount - galleryItemsVisibleCount, galleryCurrentItem), 0);
      $('#tracks .gallery-wrap .gallery > ul').css('top', -galleryCurrentItem * galleryItemSize);
    }).click();
    $('#tracks .gallery-wrap .arrow-up').on('click', function(evt) {
      evt.preventDefault();
      galleryCurrentItem--;
      galleryCurrentItem = Math.max(Math.min(galleryItemsCount - galleryItemsVisibleCount, galleryCurrentItem), 0);
      $('#tracks .gallery-wrap .gallery > ul').css('top', -galleryCurrentItem * galleryItemSize);
    });
  }
  else
  {
    $("#tracks .gallery-wrap .gallery > ul").owlCarousel({
      items: 1,
      margin: 20,
      startPosition: 1,
      nav: true,
      navContainer: '#tracks .gallery-wrap .nav',
      navText: ['', ''],
      dots: false,
      lazyLoad: true
    });
    /*var galleryItemSize = $('#tracks .gallery-wrap .gallery > ul > li').outerWidth() + 20;
    var galleryItemsCount = $('#tracks .gallery-wrap .gallery > ul > li').length;
    $('#tracks .gallery-wrap .gallery > ul').width((galleryItemSize + 20) * (galleryItemsCount * .5) - 20);
    var galleryItemsVisibleCount = 6;
    var galleryCurrentPage = 0;
    $('#tracks .gallery-wrap .arrow-down').on('click', function(evt) {
      evt.preventDefault();
      galleryCurrentPage++;
      galleryCurrentPage = Math.max(Math.min(Math.floor(galleryItemsCount / galleryItemsVisibleCount) - 1, galleryCurrentPage), 0);
      $('#tracks .gallery-wrap .gallery > ul').css('left', -galleryCurrentPage * galleryItemSize * galleryItemsVisibleCount * .5);
    });
    $('#tracks .gallery-wrap .arrow-up').on('click', function(evt) {
      evt.preventDefault();
      galleryCurrentPage--;
      galleryCurrentPage = Math.max(Math.min(Math.floor(galleryItemsCount / galleryItemsVisibleCount) - 1, galleryCurrentPage), 0);
      $('#tracks .gallery-wrap .gallery > ul').css('left', -galleryCurrentPage * galleryItemSize * galleryItemsVisibleCount * .5);
    }).click();*/
  }
  /*$('#tracks .slide .gallery').jcarousel({
    vertical: true,
    wrap: 'both'
  });
  $('#tracks .slide .gallery-wrap .arrow-up')
    .on('jcarouselcontrol:active', function() {
      $(this).removeClass('inactive');
    })
    .on('jcarouselcontrol:inactive', function() {
      $(this).addClass('inactive');
    })
    .jcarouselControl({
      target: '-=1'
    });
  $('#tracks .slide .gallery-wrap .arrow-down')
    .on('jcarouselcontrol:active', function() {
      $(this).removeClass('inactive');
    })
    .on('jcarouselcontrol:inactive', function() {
      $(this).addClass('inactive');
    })
    .jcarouselControl({
      target: '+=1'
    });*/
  // How training happens
  $(document).on('scroll', function() {
    var section = document.getElementById('how-train');
    var rect = section.getBoundingClientRect();
    var height = $(section).height();
    var ratio = 1 - (rect.top + height) / height + 0.45;
    ratio = Math.min(Math.max(ratio, 0), 1);
    var list = $('section#how-train ul.steps')[0];
    var count = Math.floor(list.children.length * ratio);
    for (var i = 0; i < list.children.length; i++) {
      var elem = $(list.children[i]);
      if (i < count) {
        if (!elem.hasClass('active')) elem.addClass('active');
      } else {
        if (elem.hasClass('active')) elem.removeClass('active');
      }
    }
  });
  // "From founder"
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  // Testimonials
  $("#testimonials .slider").owlCarousel({
    items: 1,
    nav: true,
    navText: ['', ''],
    dots: false,
    lazyLoad: true,
    loop: true
  });
  // Map
  google.maps.event.addDomListener(window, 'load', initMap);
  // Popups
  $('section button.cta:not(.no-lb), header ul li a.tel').magnificPopup({
    items: {
      type: 'inline',
      src: '#popup'
    },
    closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
  });
});


function initMap() {
  var mapOptions = {
    zoom: 14,
    disableDefaultUI: true,
    scrollwheel: false,
    center: new google.maps.LatLng(55.763624, 37.437477),
    styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
  };

  // Get the HTML DOM element that will contain your map
  // We are using a div with id="map" seen below in the <body>
  var mapElement = $('#map .map')[0];

  // Create the Google Map using our element and options defined above
  var map = new google.maps.Map(mapElement, mapOptions);

  google.maps.event.addDomListener($('#map .zoom-in')[0], 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener($('#map .zoom-out')[0], 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });

  // Let's also add a marker while we're at it
  /*var marker = new google.maps.Marker({
    position: new google.maps.LatLng(40.6700, -73.9400),
    map: map,
    title: 'Snazzy!'
  });*/
}


var playerWidthRatio = 16;
var playerHeightRatio = 9;
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('background-video', {
    height: '100%',
    width: '100%',
    playerVars: {
      autoplay: 1,
      loop: 1,
      rel: 0,
      playlist: 'FxkW6EFt2FA',
      controls: 0,
      showinfo: 0,
      autohide: 1,
      modestbranding: 1,
      vq: 'hd720'
    },
    videoId: 'FxkW6EFt2FA',
    events: {
      'onReady': onPlayerReady
    }
  });
}
//
function onPlayerReady(event) {
  player.mute();
  event.target.playVideo();
}
function vidRescale() {
  var container = $('#from-founder .cols .col.left');
  var w = container.width(),
    h = container.height();

  if (w/h > playerWidthRatio/playerHeightRatio){
    player.setSize(w, w/playerWidthRatio*playerHeightRatio);
    container.find('.video-wrap').css({'left': '0px'});
  } else {
    var newW = h/playerHeightRatio*playerWidthRatio;
    player.setSize(newW, h);
    container.find('.video-wrap').css({
      'left': (w-newW)/2,
      'width': newW + 'px',
      'height': h + 'px'
    });
  }
}
$(window).on('load resize', vidRescale);