text: // FileProgressBarHandler.js
  
  var FileProgressBarHandler = (function() {
      function handle(connection) {
          var progressHelper = {};
  
          // www.RTCMultiConnection.org/docs/onFileStart/
          connection.onFileStart = function(file) {
              var div = document.createElement('div');
              div.title = file.name;
              div.innerHTML = '<label>0%</label> <progress></progress>';
  
              if (file.remoteUserId) {
                  div.innerHTML += ' (Sharing with:' + file.remoteUserId + ')';
              }
  
              if (!connection.filesContainer) {
                  connection.filesContainer = document.body || document.documentElement;
              }
  
              connection.filesContainer.insertBefore(div, connection.filesContainer.firstChild);
  
              if (!file.remoteUserId) {
                  progressHelper[file.uuid] = {
                      div: div,
                      progress: div.querySelector('progress'),
                      label: div.querySelector('label')
                  };
                  progressHelper[file.uuid].progress.max = file.maxChunks;
                  return;
              }
  
              if (!progressHelper[file.uuid]) {
                  progressHelper[file.uuid] = {};
              }
  
              progressHelper[file.uuid][file.remoteUserId] = {
                  div: div,
                  progress: div.querySelector('progress'),
                  label: div.querySelector('label')
              };
              progressHelper[file.uuid][file.remoteUserId].progress.max = file.maxChunks;
          };
  
          // www.RTCMultiConnection.org/docs/onFileProgress/
          connection.onFileProgress = function(chunk) {
              var helper = progressHelper[chunk.uuid];
              if (!helper) {
                  return;
              }
              if (chunk.remoteUserId) {
                  helper = progressHelper[chunk.uuid][chunk.remoteUserId];
                  if (!helper) {
                      return;
                  }
              }
  
              helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
              updateLabel(helper.progress, helper.label);
          };
  
          // www.RTCMultiConnection.org/docs/onFileEnd/
          connection.onFileEnd = function(file) {
              var helper = progressHelper[file.uuid];
              if (!helper) {
                  console.error('No such progress-helper element exist.', file);
                  return;
              }
  
              if (file.remoteUserId) {
                  helper = progressHelper[file.uuid][file.remoteUserId];
                  if (!helper) {
                      return;
                  }
              }
  
              var div = helper.div;
              if (file.type.indexOf('image') != -1) {
                  div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><img src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;">';
              } else {
                  div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><iframe src="' + file.url + '" title="' + file.name + '" style="width: 80%;border: 0;height: inherit;margin-top:1em;"></iframe>';
              }
          };
  
          function updateLabel(progress, label) {
              if (progress.position === -1) {
                  return;
              }
  
              var position = +progress.position.toFixed(2).split('.')[1] || 100;
              label.innerHTML = position + '%';
          }
      }
  
      return {
          handle: handle
      };
  })();
  