var myPlayer,
      ePlayer,
      options = {},
      thumbs = [],
      myModal,
      showOverlay,
      hideOverlay,
      newElement = document.createElement('div');

newElement.setAttribute("id","row");

videojs.getPlayer('myPlayerID').ready(function() {
  myPlayer = this;
  // +++ Get the player DOM element +++
  ePlayer = myPlayer.el();

  // +++ Get the thumbnail array +++
  myPlayer.on('loadstart',function(){
    // a JSON array of thumbnail URLs is stored in the videos long description field
    var arr = JSON.parse(myPlayer.mediainfo.longDescription);
    buildModal(arr);

    showOverlay = function(){
      // show the overlay
      if (myModal) {
        myModal.open();
      }
    }
   
   // +++ Show the thumbnails +++
   // show the thumbnail images when the user hovers over the player
   ePlayer.addEventListener("mouseover",showOverlay);

    hideOverlay = function(){
      // hide the overlay
      if (myModal) {
        myModal.close();
      }
    }
    
    // +++ Hide the thumbnails +++
    // hide the thumbnail images when the user mouses away from the player
    ePlayer.addEventListener("mouseout", hideOverlay);

    // +++ Play the video +++
    // when the thumbnail modal is clicked, remove the event listeners, close and dispose of the modal and start video playback
    myModal.on("click", function(){
      ePlayer.removeEventListener('mouseover',showOverlay);
      ePlayer.removeEventListener('mouseout',hideOverlay);
      myModal.close();
      myModal.dispose();
      myPlayer.play();
    });
  })
});

// +++ Format the overlay content +++
/**
  * create the modal dialog
  */
function buildModal(array) {
  // get the thumbnail URLs from the video Long Description field and add to modal dialog content
  newElement.innerHTML = '<div id="item"><img src="' + array.thumbs[0].image + '"></div><div id="item"><img src="' + array.thumbs[1].image + '"></div><div id="item"><img src="'+ array.thumbs[2].image + '"></div><div id="item"><img src="' + array.thumbs[3].image + '"></div>';
  options.content = newElement;
  // add a label text
  options.label = 'thumbnail images';
  // configure modal dialog settings
  options.temporary = false;
  options.uncloseable = true;

  // create the modal dialog and add it to the player
  var ModalDialog = videojs.getComponent('ModalDialog');
  myModal = new ModalDialog(myPlayer, options);
  myModal.addClass('vjs-my-custom-modal');
  myPlayer.addChild(myModal);
}