var player = document.getElementById('player');

function formatQuality(quality) {
  var res = '';
  if (quality.width && quality.height) {
    res += quality.width + 'x' + quality.height + ' ';
  }
  res += quality.bandwidth + 'bps';
  return res;
}

function changeQuality(control, channel) {
  var selectedQuality = control.value;
  if (selectedQuality === "auto") {
    player.viblast.abr = true;
  } else {
    player.viblast[channel].quality = player.viblast[channel].qualities[parseInt(selectedQuality)];
  }
}

function onUpdatedMetadata() {
  refreshAvailableQualities('video');
  refreshAvailableQualities('audio');
  
  refreshQuality('video');
  refreshQuality('audio');
}

function refreshAvailableQualities(channel) {
  var qualitiesControl = document.getElementById(channel + '-qualities');
  qualitiesControl.innerHTML = '';
  qualitiesControl.innerHTML += '<option value="auto">Auto</option>'
  for (var i = 0; i<player.viblast[channel].qualities.length; i++) {
    var quality = player.viblast[channel].qualities[i];
    qualitiesControl.innerHTML += '<option value="' + i + '">'  + formatQuality(quality) + '</option>';
  }
}

function refreshQuality(channel) {
  if (!player.viblast[channel] || !player.viblast[channel].quality) return;
  var currQualityControl = document.getElementById('current-' + channel + '-quality');
  currQualityControl.innerHTML = formatQuality(player.viblast[channel].quality);
};

function load(src) {
  // clean up any old instances
  viblast(player).stop();
  
  // start playing the new stream
  viblast(player).setup({
    stream: src,
    key: 'N8FjNTQ3NDdhZqZhNGI5NWU5ZTI='
  });
  player.play();
  
  // register the updatedmetadata each time because after src change event hanlers are cleared
  player.viblast.addEventListener('updatedmetadata', onUpdatedMetadata);
  // check if metadata has already been loaded
  // if yes then updatedmetadata will not be fired so just call the callback manually
  if (player.viblast.video) onUpdatedMetadata();
  
  player.viblast.addEventListener('videoqualitychange', refreshQuality.bind(null, 'video'));
  player.viblast.addEventListener('audioqualitychange', refreshQuality.bind(null, 'audio'));
}

window.setInterval(function() {
  var control = document.getElementById('cdn-bandwidth');
  if (player.viblast) {
    control.innerHTML = player.viblast.cdnBandwidth + 'kbps';
  } else {
    control.innerHTML = 'NA';
  }
}, 1000);