#if (!$cell)
	#set ($cell = $asset)
#end

#if (!$cell)
	#set ($cell = $data)
#end


#set ($mime = $mediaarchive.getMimeTypeIcon($hit.fileformat))
#set( $thumbpath =  "$themeprefix/images/mimetypes/${mime}.png" )

#if (!$pages.doesExist($thumbpath))
	#set ($thumbpath =  "$themeprefix/images/mimetypes/missing.png")
#end
#if($asset.fetchurl)
		#set($id = $testbench.extractYoutubeId($asset.fetchurl))

	
		<div class="ratio ratio-16x9 mt-3 mb-3">
		
		
		  <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player" data-start="$!context.getRequestParameter("starttime"))"></div>
</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 m-2" 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 btn-primary"/></small>
	      </form>
	      #end
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	 
	   // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '768',
          width: '1024',
          videoId: '$id',
          playerVars: {
            'playsinline': 1,
            'start': false,
            'autoplay':0
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
    	  var start = jQuery("#player").data("start");
    	  if(start){
    		  
    		  player.seekTo(start);
    		//  player.playVideo();
    	  }
    	  
    	  var formatSlider = document.getElementById('formatting-slider');
          var duration = player.getDuration();
    	  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;


    	          }
    	      }
    	  });

    	  // Values are parsed as numbers using the "from" function in "format"
    	 // formatSlider.noUiSlider.set(['25.666', '57.66']);

    	  var formatValues = [
    	      document.getElementById('formatting-start'),
    	      document.getElementById('formatting-end')
    	  ];

    	  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.seekTo(values[handle]);
    	   //   formatValues[handle].innerHTML = values[handle] + 'No format: ' + unencoded[handle];
    	  });  
    	  
    	  
      //  event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
       
      }
      function stopVideo() {
        player.stopVideo();
      }
      
      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>
    
    #end