jQuery(document).ready(function($) {
  doStoryOverlay();
  var autoplay = true;
  // homepage video -- pause button 
  $('.video-header').prepend(
    '<div class="video-controls"><button id="video-play-pause-1" class="player-control-btn play-pause-btn '+(autoplay===true?'playing':'')+'" aria-label="'+(autoplay===true?'Pause Video':'Play Video')+'"><span class="pause"><svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M224,435.8V76.1c0-6.7-5.4-12.1-12.2-12.1h-71.6c-6.8,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6   C218.6,448,224,442.6,224,435.8z"/><path d="M371.8,64h-71.6c-6.7,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6c6.7,0,12.2-5.4,12.2-12.2V76.1   C384,69.4,378.6,64,371.8,64z"/></g></svg></span><span class="play"><svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M405.2,232.9L126.8,67.2c-3.4-2-6.9-3.2-10.9-3.2c-10.9,0-19.8,9-19.8,20H96v344h0.1c0,11,8.9,20,19.8,20  c4.1,0,7.5-1.4,11.2-3.4l278.1-165.5c6.6-5.5,10.8-13.8,10.8-23.1C416,246.7,411.8,238.5,405.2,232.9z"/></svg></span></button></div>'
  )
  $('.video-controls').append(
    '<button id="video-transcript" class="player-control-btn video-transcript-hp transcript-btn" aria-label="Open a transcript describing the auto-playing video"><span class="transcript"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 14h14v2h-14zM8 18h14v2h-14zM8 22h14v2h-14zM8 10h14v2h-14z"></path></svg></span></button>'
  );
  $('#video-play-pause-1').on('click', function () {
    var $button = $(this);
    if ( $button.hasClass('playing') ) {
      $button.closest('.video-header').find('video').each(function (index, element) {
        element.pause();
      });
    }
    else {
      $button.closest('.video-header').find('video').each(function (index, element) {
        element.play();
      });      
    }
  });

  
  $('a[href^="http://"]').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).attr('target', '_blank');

  $('.eventlinkholder').each(function() {
    if ($(this).hasClass('partnertrue')) {
      $a = $(this).attr('rel');
      if ($a == "") {} else {
        $(this).find('.a-post-content a').attr('href', $a).attr('target', '_blank');
      }
    }
  });

  $('input[type=radio]').click(function() {
    $(this).closest("form").submit();
  });
});

$ = jQuery.noConflict();

var doStoryOverlay = function () {
  var $featureImg;
  $featureImg = $('body.single').find('.fImage.fImage-single');

  if ($('body.single-stories').length && $featureImg.length) {
    $(".overlay-general").filter(function() {
      $(this).appendTo($featureImg);
      $(this).show();
    })
  }
  if ($('body.single-publications').length && $featureImg.length) {
    $(".overlay-general").filter(function() {
      $(this).appendTo($featureImg);
      $(this).show();
    })
  }
}


// Set up our hotspots.
var hotspots = [
        { startTime: 13.5, endTime: 17.5, top: "68%", right: "6.6%", height: "8%", width: "17%", href: "https://2019.arcusfoundation.org", type: 1 , label:"Read the Arcus Foundation 2019 Annual Report", label2:"Destruction of nature exposes us to a panoply of diseases, and creates and exacerbates social injustice and political repression around the world"},
        { startTime: 29.5, endTime: 34, top: "64.5%", right: "8%", height: "7.6%", width: "13.8%", href: "/our-support/social-justice-lgbt", type: 1, label:"Learn about our support of LGBTQ communities", label2:"LGBTQ communities served by our Social Justice Program live at the intersection of this long chain of degradation—environmental and social" },
        { startTime: 50.5, endTime: 52,top: "71%", right: "44.5%", height: "7.6%", width: "14%", href: "/stories-of-impact/none/lgbtq-migrants-to-the-u-s-fight-to-stay-safe/", type: 1, label:"Stories of Impact: LGBTQ immigrants to the U.S. fight to stay safe", label2:"<figure><blockquote>There's incredible power in the trans queer migrant community. To be dehumanized so much and not lose your hope, your sense of joy—it's just astonishing.</blockquote><figcaption>—Umi Vera, Familia: Trans Queer Liberation Movement, United States</figcaption></figure>" },
        { startTime: 64.5, endTime: 67, label2:"", top: "72.5%", right: "52%", height: "7.6%", width: "13.8%", href: "/stories-of-impact/lgbt/i-know-who-i-am-but-my-country-doesnt-recognize-me/",  label:"Stories of Impact: I know who I am, but my country doesn't recognize me", type: 1 },
        { startTime: 83.5, endTime: 87, top: "47%", right: "48.6%", height: "7.6%", width: "13.8%", href: "/stories-of-impact/lgbt/supporting-cape-towns-homeless-transgender-women-during-covid-19/",  label:"Stories of Impact: Supporting Cape Town's homeless transgender women during COVID-19", type: 1 },
        { startTime: 104, endTime: 108, top: "65%", right: "3%", height: "7.6%", width: "14%", href: "https://www.stateoftheapes.com", type: 1, label:"The State of the Apes" },
        { startTime: 128, endTime: 132, top: "56%", right: "54%", height: "7.6%", width: "13.8%", href: "/our-support/great-apes/", type: 1, label:"Our Support: Great Apes & Gibbons Program"},
        { startTime: 193, endTime: 197, top: "68%", right: "54.6%", height: "7.6%", width: "13.8%", href: "/annual-reporting", type: 1, label:"Annual Reporting" },
        { startTime: 208, endTime: 211, top: "54.5%", right: "35.5%", height: "10%", width: "25.8%", href: "https://www.arcusfoundation.org/social/", label:"Connect with us on social media", type: 1 },
        { startTime: 211.1, endTime: 214, top: "72.5%", right: "6%", height: "7.6%", width: "13.8%", href: "/credits/", label:"Credits", type: 2 }
];

function init() {
  var video = document.getElementById('sampleVideo');


  if ( video ) {
    var $holder = $(video).closest('.video-header').find('#holder');
    var hotspotData;
    // create ACCESSIBLE hotspots for the video that can be navigated via keyboard
    $holder.empty();
    for (var i = 0; i < hotspots.length; i++) {
      var hotspotData = hotspots[i];
      hotspotData.href = hotspotData.href || '';
      hotspotData.label = hotspotData.label || '';
      var $hotspot = $('<div class="hotspot" id="'+video.getAttribute('id')+'-hotspot-'+i+'"></div>');
      // var $labelHolder = $('#rotator2').find('a[href^="'+hotspotData.href+'"]').find('.sr-only');
      // if ($labelHolder.length) {
      //   hotspotData.label = $labelHolder.html();
      // }
      var $link = $('<a tabindex="-1" aria-hidden="true" data-starttime="'+hotspotData.startTime+'" href="'+hotspotData.href+'" target="_blank"></a>');
      $hotspot.css({
        // top: hotspotData.top,
        top:0,
        // right: hotspotData.right,
        left: 0,
        // height: hotspotData.height,
        height:'100%',
        // width: hotspotData.width
        width:'100%'
      });

      // fast forward to hotspot range
      // $link.on('focus', function () {
      //   var time = Number($(this).data('starttime'));
      //   video.currentTime = time+1.3;
      //   video.pause();
      // })

      $hotspot.append($link);
      $holder.append($hotspot);
    }
    video.addEventListener( 'pause', function () {
      video.classList.add('paused');
      $(video).closest('.video-header').find('.play-pause-btn').removeClass('playing');
    });
    video.addEventListener( 'play', function () {
      video.classList.remove('paused');
      $(video).closest('.video-header').find('.play-pause-btn').addClass('playing');
    })    
    // Disable clicking on hotspots when the video is not within their start/end time (still allow tabbing to focus) 
    video.addEventListener( 'timeupdate', function () {
      // Grab the current video pointer time mark.
      var currentTime = video.currentTime;
      for ( var i = 0; i < hotspots.length; i++ ) {
        var hotspot = hotspots[i];
        var $hotspot = $holder.find('.hotspot').eq(i);
        if ( currentTime >= hotspots[i].startTime && currentTime < hotspots[i].endTime ) {
          $hotspot.css('pointer-events','all');
        } else {  // clear:
          $hotspot.css('pointer-events', 'none');
        }
      }

    }, false );

    // mute the video so it'll autoplay:
    video.muted = true;
    if ( video.readyState >= video.HAVE_FUTURE_DATA ) {
      video.play();
    } else {
      video.addEventListener( 'canplay', function () {
        this.play();
      }, false );
    }
  }

  twoItemSlider();
}

function twoItemSlider () {
  var autoplay = false;
  var $slider = $('.two-item-slider');
  var timer;
  var $indicators = $slider.append(
    '<div class="carousel-indicators carousel-number"></div>'
  ).find('.carousel-indicators');
  $slider.each(function () {
    var $slider = $(this);
    $slider.find('.slider-inner').find('a,button,input').on('focus', function () {
      var index = $(this).closest('.slide').index();
      clearInterval(timer);
      goToSlide(index);
    })
  });
  $slider.find('.slide').each(function () {
    var $slide = $(this);
    var active = $slide.hasClass('active');
    var index = $slide.index();
    var $indicator = $(
      '<button class="indicator '+(active?'active':'')+'" data-slide-to="'+index+'" ><span class="sr-only">Go to Slide '+(index+1)+'</span></button>'
    )
    $indicator.on('click', function (event) {
      event.stopPropagation();
      event.stopImmediatePropagation();
      var index = $(this).index();
      goToSlide(index);
    })
    $indicators.append($indicator);
  })

  if (autoplay) {
    timer = setInterval(sliderMoveRight, 7000);
  }
  function goToSlide(index) {
    var $slide = $slider.find('.slide').eq(index);
    $slider.find('.slide').removeClass('active');
    $slide.addClass('active');
    $indicators.find('.active').removeClass('active');
    $indicators.find('.indicator').eq(index).addClass('active');
  }
  function sliderMoveRight() {
    var $currentSlide = $slider.find('.slide.active');
    var nextIndex = $currentSlide.index()+1;
    var $nextSlide = $slider.find('.slide').eq(nextIndex);
    if ($nextSlide.length === 0) {
      $nextSlide = $slider.find('.slide').first();
    }
   $currentSlide.removeClass('active');
   $nextSlide.addClass('active');
   $indicators.find('.active').removeClass('active');
   $indicators.find('.indicator').eq(nextIndex).addClass('active');
  }
}
window.addEventListener('load', init);