(function($) {

  $.extend(MediaElementPlayer.prototype, {
	current_timerail_thumb: "",
    buildtimerailthumbnails : function(player, controls, layers, media) {
      if (!player.isVideo)
        return;

      // This relies on mutation observers right now, so if those aren't available just
      // abandon it.
      if (!window.MutationObserver)
        return;

      // Check for presence of WebVTT
      if (!WebVTT) {
        console.log('mep-feature-time-rail-thumbnails.js requires vtt.js');
        return;
      }

      function getVttCues(url) {
        var vtt,
        parser = new WebVTT.Parser(window, WebVTT.StringDecoder()),
        cues = [];

        // FIXME: Is there a way to do this with promises?
        $.ajax({
          url: url,
          async: false,
          success: function(data){
            vtt = data;
          },
          error:function (xhr, ajaxOptions, thrownError){
            if(xhr.status==404) {
              vtt = null;
            }
          }
        });
        if (vtt) {
          parser.oncue = function(cue) {
            cues.push(cue);
          };
          parser.parse(vtt);
          parser.flush();
        }
        return cues;
      }

      function parseMediaFragmentHash(url) {
        var hash = url.substring(url.indexOf('#')+1);
        return hash.split('=')[1].split(',');
      }

      function setThumbnailImage(url) {
        // Make sure the url is protocol/scheme relative
        var protocol_relative_url = url.substr(url.indexOf('://')+1);
        $('.mejs__plugin-time-float-thumbnail').css('background-image','url(' + protocol_relative_url.split('#')[0] + ')');
      }


      var
        mediaContainer = $(player.container).find('.mejs__mediaelement').parent(),
        element_to_observe = $(player.container).find('.mejs__time-float-current')[0],
        video_thumbnail_vtt_url,
        cues;

      if (player.tracks.length > 0) {
        video_thumbnail_vtt_url = player.tracks[0].src;
      } else {
        return;
      }
      
      if (video_thumbnail_vtt_url.indexOf(" ") != -1)
      {
	    // Sometimes, the player passes along a non-escaped URL.
	  	video_thumbnail_vtt_url = escape(video_thumbnail_vtt_url);
      }

      
      
      cues = getVttCues(video_thumbnail_vtt_url);

      // If there is only one cue then there's no need to show thumbnails at all so don't do anything.
      if (cues.length > 1) {
        // Set up the container to hold the thumbnail.
        var time_float = mediaContainer.find('.mejs__time-float');
        time_float.prepend('<div class="mejs__plugin-time-float-thumbnail"></div>');

        // Set necessary styles.
        var xywh = parseMediaFragmentHash(cues[0].text);
        var x = xywh[0];
        var y = xywh[1];
        var w = xywh[2];
        var h = xywh[3];
        var new_height = parseInt(h) + time_float.height();
        time_float.css('top', '-' + new_height + 'px');
        time_float.find('.mejs__time-float-corner').css('top', new_height - 3 + 'px');
        time_float.css('height', (parseInt(h) + 15) + "px");
        time_float.css('width', w + 'px');
        time_float.find('.mejs__time-float-current').css('position', 'static');
        time_float.find('.mejs__plugin-time-float-thumbnail').css('position', 'static');

        time_float.css('-webkit-border-radius', '0').css('border-radius', '0');
        time_float.find('span').css('-webkit-border-radius', '0').css('border-radius', '0');

		
		full_vtt_path = video_thumbnail_vtt_url
		full_vtt_path = full_vtt_path.substring(0, Math.max(full_vtt_path.lastIndexOf("/"), full_vtt_path.lastIndexOf("\\")))  + "/" + cues[0].text;
		full_vtt_path = full_vtt_path.substr(full_vtt_path.indexOf('://')+1);
		full_vtt_path = full_vtt_path.split('#')[0];

		img = new Image();
		img.src = full_vtt_path;
		$('.mejs__plugin-time-float-thumbnail').css('background-image','url(' + full_vtt_path + ')');
		$('.mejs__plugin-time-float-thumbnail').css('background-position', '-' + x + 'px -' + y + 'px' );
		$('.mejs__plugin-time-float-thumbnail').css('height', h);
		$('.mejs__plugin-time-float-thumbnail').css('width', w);

		player.current_timerail_thumb = full_vtt_path;
		
        setThumbnailImage(full_vtt_path);

        // Add an observer to the .mejs__time-float-current and change the thumbnail
        // when the observer is triggered
        var observer = new MutationObserver(function(mutations){
          var time_code_current = $('.mejs__time-float-current').text();

          var sections = time_code_current.split(':');
          if (sections.length < 3) {
            time_code_current = "00:" + time_code_current;
          }

          // If the mouse is hovering over the 0 seconds mark, then show the first frame.
          // Otherwise show something deeper into the video.
          var seconds = mejs.Utils.timeCodeToSeconds(time_code_current),
            cue;
                        
          if (seconds == 0) {
            cue = cues[0];
          } else {

			cue = cues[0];

	        for(var i = 0; i < cues.length; i++)
	        {		        
		        if (cues[i].startTime <= seconds && cues[i].endTime > seconds) {
			        cue = cues[i];
			        break;
		        }
	        }
          }

          // The text of the cue will be the background image of the thumbnail container.
          
          full_vtt_path = video_thumbnail_vtt_url
		  full_vtt_path = full_vtt_path.substring(0, Math.max(full_vtt_path.lastIndexOf("/"), full_vtt_path.lastIndexOf("\\")))  + "/" + cue.text;
		  full_vtt_path = full_vtt_path.substr(full_vtt_path.indexOf('://')+1);
		  full_vtt_path = full_vtt_path.split('#')[0];
		  

		  // Only update CSS if the file is different.

		  if (player.current_timerail_thumb != full_vtt_path)
		  {
		  	$('.mejs__plugin-time-float-thumbnail').css('background-image','url(' + full_vtt_path + ')');
			img = new Image();
			img.src = full_vtt_path;
		  	player.current_timerail_thumb = full_vtt_path;
		  }

          // Use the spatial media fragment hash of the url to determine the coordinates and size
          // of the image to be displayed.
          var xywh = parseMediaFragmentHash(cue.text);
          var x = xywh[0];
          var y = xywh[1];
          var w = xywh[2];
          var h = xywh[3];

          // Set the background position and height and width.
          $('.mejs__plugin-time-float-thumbnail').css('background-position', '-' + x + 'px -' + y + 'px' );
          $('.mejs__plugin-time-float-thumbnail').css('height', h);
          $('.mejs__plugin-time-float-thumbnail').css('width', w);

        });

        observer.observe(element_to_observe, {attributes: true, childList: true, characterData: true, subtree:true});
      }
    }
  });
})(mejs.$);