#set($id = $testbench.getVimeoVideoId($asset.fetchurl))


<div class="ratio ratio-16x9" >
		
		<iframe src="https://player.vimeo.com/video/${id}"  data-start="$!context.getRequestParameter('starttime'))" id="vimeoframe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
		
		#if($modal)
		<span class="pb-3"><strong >[[Choose Start and End]]:</strong></span> <div id="formatting-slider" class="mt-5"></div>
		
		   <form id="selectpage" class="emitmedia" action="$content.searchhome/upload/addmedia.json">
	      	<input type="hidden" name="assetid" value="$asset.id"/>	
	      	<input type="hidden" id="customurl" name="customurl" value="$testbench.domainroot$apphome/activities/asset/players/fullscreen/index.html?assetid=${asset.id}"/>	
			<small><input type="submit" value="[[Add to Question]]" class="form-control btn-small"/></small>
	      </form>
	      #end
		
		
<script src="https://player.vimeo.com/api/player.js"></script>
  <script>
  $(window).on("load", function() {
  
  var iframe = document.getElementById('vimeoframe');
  var player =  new Vimeo.Player(iframe);
 
	  var start = jQuery("#vimeoframe").data("start");
	if(start){
	  player.setCurrentTime(start);
	}
	  var duration;
	   player.getDuration().then(function(dur){
		   duration = dur;
	  
	  var formatSlider = document.getElementById('formatting-slider');

	  noUiSlider.create(formatSlider, {
	      // Values are parsed as numbers using the "from" function in "format"
	      start: ['0', duration],
	      range: {
	          'min': 0,
	          'max': duration
	      },
	      format: formatForSlider,
	      tooltips: {
	          // tooltips are output only, so only a "to" is needed
	          to: function(numericValue) {
	        	  var totalseconds = Math.round(numericValue);
	        	  var minutes = Math.floor(totalseconds / 60);
	        	  var seconds = totalseconds - (minutes * 60);
	        	  var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
	        	  
	        	  return finalTime;


	          }
	      }
	  });
	  
	  var ready = false;
	  formatSlider.noUiSlider.on('end', function (values, handle, unencoded) {
	      // "values" has the "to" function from "format" applied
	      // "unencoded" contains the raw numerical slider values
	    
	      console.log(values);
	      console.log(handle);
	      updateUrl(values[0],values[1]);
	      player.setCurrentTime(values[handle]);
	   //   formatValues[handle].innerHTML = values[handle] + 'No format: ' + unencoded[handle];
	  });  
	  
	  player.on('play', function() {
	    console.log('Played the video');
	  });

	  player.getVideoTitle().then(function(title) {
	    console.log('title:', title);
	  });
	  
	  
	  function str_pad_left(string,pad,length) {
		    return (new Array(length+1).join(pad)+string).slice(-length);
		}
	  
	  var formatForSlider = {
			    from: function (formattedValue) {
			        return Number(formattedValue);
			    },
			    to: function(numericValue) {
			        return Math.round(numericValue);
			    }
			};

	  function updateUrl(start, end) {
    	  var url = "$testbench.domainroot$apphome/activities/asset/players/fullscreen/index.html?assetid=${asset.id}&starttime=" + start + "&endtime=" + end;
		  jQuery("#customurl").val(url);
	  }
	  
	  
	   });
	  
	  
 
  
 
});
  
  
 
  
  </script>