How to switch the next video once the YT video is ended?

Question

I have the following code which will play different videos from youtube. I want to know how can I switch to the next video once the previews one is ended?

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '250',
    width: '436',
    videoId: 'ID HERE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': function(e) {
                if (e.data == 0) {
                }
            }
    }
  });

}
var item = document.getElementsByClassName('item');
function setLinks(){

  for (var i = 0; i < item.length; i++) {
    item[i].ind = i;
    addEvent('mouseover', item[i], itemHandler);
    addEvent('mouseout', item[i], itemHandler);
    addEvent('click', item[i], itemHandler);
        console.log('click')
  }
}


function itemHandler(e){
  var n = e.target.ind;
  switch(e.type) {

    case 'click':
        switch(n) {
          case 0:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
          case 1:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
          case 2:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
          case 3:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
        }

    break;
  }
}

function startYoutube(){
  TweenMax.to(youtubeVideo,0.5,{opacity:1, ease:Power1.easeInOut });
  setLinks();
  youtubeVideo.style.display = "block";
  player.playVideo();
  counters("play");

}

function onPlayerReady() {
  function updateTime() {
    var oldTime = videotime;
    if(player && player.getCurrentTime) {
      videotime = player.getCurrentTime();
    }
    if(videotime !== oldTime) {
      onProgress(videotime);
    }
  }
  timeupdater = setInterval(updateTime, 100);
}

// when the time changes, this will be called.
onProgressTrue = false;
function onProgress(currentTime) {
 var d = player.getDuration();
   if(Math.round(currentTime) == Math.round(d/2) && !onProgressTrue) {
    onProgressTrue = true;
    counters("midpoint"); 
     console.log("the video reached halfway!");
   }
}

So how I have the 'player.getDuration()' but after that I don't know how can I tell it to go on the next 'case'.