var slash = '<span class=slash> / </span>';

function clip_info(i) {

  if (data == null){return true}
  var clip = data[i];
  if (clip == null){return true}

  // update the clip information

  var clipInfo1 = document.getElementById('clipInfo1');
  var clipInfo2 = document.getElementById('clipInfo2');

  clipInfo1.innerHTML = clip.artist;
  clipInfo2.innerHTML = 'TITLE ' + slash + clip.product + ' "' + clip.title + '"';
}

function hover_info(i) {

  if (data == null){return true}

  // get heading elements to set
  var hoverInfo1 = document.getElementById('hoverInfo1');
  if (i == -1 ) {
    hoverInfo1.innerHTML = '';
  }
  else {
    var clip = data[i];
    hoverInfo1.innerHTML = 'TITLE ' + slash + clip.product + ' "' + clip.title + '"';
  }
}