<!DOCTYPE html>
<html i18n-values="dir:textdirection;">
<head>
<meta charset=UTF-8">
<title i18n-content="title"></title>
<style>
body {
  -webkit-user-select: none;
}

h1 {
  border-bottom: 1px solid #7289E2;
  padding: 8px;
  height: 32px;
  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
  border: 1px solid #999;
  border-top: 0;
  color: black;
}

html[dir='rtl'] h1 {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
}

.rowlink {
  height: 100%;
  -webkit-margin-end: 2px;
}

.devicerow div.icon {
  -webkit-margin-start: 5px;
  margin-top: -3px;
  float: left;
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background: url('shared/images/icon_folder.png');
}

html[dir='rtl'] .devicerow div.icon {
  float: right;
}

.burnicon {
  background:  url('shared/images/filebrowse_menu.png');
  position: absolute;
  right: 4px;
  top: 5px;
  height: 15px;
  width: 15px;
  margin-top: 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.3;
  -webkit-transition: opacity 0.15s ease-out;
  border: 0;
}

html[dir='rtl'].burnicon {
  right: auto;
  left: 4px;
}

.devicerow:hover .burnicon {
  opacity: 0.75;
  -webkit-transition: none;
}

.devicerow:hover .burnicon:hover {
  opacity: 1;
  -webkit-transition: none;
}

.devicerow {
  border-bottom: 1px solid #f7f7f7;
  padding: 8px 5px 5px 8px;
  font-size: .8em;
  position: relative;
  background-color: #fff;
}

html[dir='rtl'] .devicerow {
  padding: 8px 8px 5px 5px;
}

.devicerow:hover {
  background-color: #ebeff9;
  cursor: pointer;
}

.devicerow span.name {
  margin-top: 10px;
  -webkit-margin-start: 10px;
}

.selected {
  background-color: #b1c8f2;
}

h1.title {
  margin-top: 5px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
}

.columnlist {
  width: 100%;
  bottom: 0;
}

.fullcontainer {
  top: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 600px;
  -webkit-border-end: 1px solid #7289E2;
}

html[dir='rtl'] .fullcontainer {
  left: 600px;
  right: 0;
}

progress {
  -webkit-margin-start: 15px;
  width: 700px;
}

.progressText {
  -webkit-padding-start: 20px;
  font-size: .6em;
  font: "Helvetica";
}

.statusText {
  padding-top: 5px;
  -webkit-padding-start: 15px;
  font-size: 1em;
}

.statusDiv{
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 2px;
  background-color: #fff;
}

#rootsColumn:not(.burningColumn) {
  height: 50%;
}

#statusColumn:not(.burningColumn) {
  height: 50%;
  border-top: 1px solid #7289E2;
}
</style>

<script src="shared/js/local_strings.js"></script>
<script>
function $(o) {
  return document.getElementById(o);
}

var currentlySelectedItem;
var currentlySelectedPath;
var localStrings;
var statusMessages;
var burnStarted;

function promptUserDownloadFinished() {
  // This could be done nicer.
  var answer = confirm(localStrings.getString('burnConfirmText1') +
      currentlySelectedPath + localStrings.getString('burnConfirmText2'));
  chrome.send(answer ? 'burnImage' : 'cancelBurnImage', []);
}

function alertUserDownloadAborted(){
  alert(localStrings.getString('downloadAbortedMessage'));
}

function burnSuccessful() {
  alert(localStrings.getString('burnSuccessfulMessage'));
}

function burnUnsuccessful(){
  alert(localStrings.getString('burnUnsuccessfulMessage'));
}

function rootsChanged(){
  chrome.send('getRoots', []);
}

function browseFileResult(info, results) {
  var path = info.path;
  var list = $('rootsList');
  list.innerHTML = '';
  var selectedRemoved = true;
  var addedRoots=[];
  for (var x = 0; x < results.length; x++) {
    if (!(results[x].title in addedRoots)) {
      addedRoots[results[x].title] = true;
      var element = createNewItem(results[x].title, results[x].path);
      if (results[x].path == currentlySelectedPath) {
        selectItem(element.id, results[x].path);
        selectedRemoved = false;
      }
      list.appendChild(element);
    }
  }
  if (selectedRemoved) {
    currentlySelectedItem = null;
    currentlySelectedPath = null;
  }
}

function selectItem(elementId, path) {
  var element = $(elementId);
  var index;
  if (currentlySelectedItem)
    currentlySelectedItem.className = 'devicerow';
  if (element) {
    element.className = 'selected devicerow';
    currentlySelectedItem = element;
    currentlySelectedPath = path;
  }
}

function createProgressElement(id) {
  var statusDiv = document.createElement('div');
  statusDiv.id = id;
  statusDiv.className = 'statusDiv';

  var statusText = document.createElement('div');
  statusText.id = id + 'StatusText';
  statusText.className = 'statusText';
  statusDiv.appendChild(statusText);

  var progressBar = document.createElement('progress');
  progressBar.id = id + 'ProgressBar';
  progressBar.className = 'progressBar';
  statusDiv.appendChild(progressBar);

  var progressText = document.createElement('div');
  progressText.id = id + 'ProgressText';
  progressText.className = 'progressText'
  statusDiv.appendChild(progressText);

  return statusDiv;
}

function setProgressElementFinalValues(element, statuses, event) {
  var statusTextDiv;
  var progressBarDiv;
  var progressTextDiv;
  for (var i = 0; i < element.children.length; i++ ) {
    switch(element.children[i].className) {
      case 'statusText':
        statusTextDiv = element.children[i];
        break;
      case 'progressBar':
        progressBarDiv = element.children[i];
        break;
      case 'progressText':
        progressTextDiv = element.children[i];
        break;
    }
  }
  if (event == 'COMPLETE')
    statusTextDiv.textContent = statuses['finished'];
  else
      statusTextDiv.textContent = statuses['canceled'];

  var progressBarParent = progressBarDiv.parentNode;
  progressBarParent.removeChild(progressBarDiv);

  var progressTextParent = progressTextDiv.parentNode;
  progressTextParent.removeChild(progressTextDiv);
  return element;
}

function setProgressElementValues(element, statuses, amountFinished,
                                  amountTotal, progressText){
  var statusTextDiv;
  var progressBarDiv;
  var progressTextDiv;
  for (var i = 0; i < element.children.length; i++ ) {
    switch(element.children[i].className) {
      case 'statusText':
        statusTextDiv = element.children[i];
        break;
      case 'progressBar':
        progressBarDiv = element.children[i];
        break;
      case 'progressText':
        progressTextDiv = element.children[i];
        break;
    }
  }

  if (!(amountFinished > 0)) {
    amountFinished = 0;
    statusTextDiv.textContent = statuses["start"];
    progressTextDiv.textContent = "";
  } else {
    statusTextDiv.textContent = statuses["inProgress"];
    progressTextDiv.textContent = progressText;
  }
  if(amountFinished > amountTotal)
    amountFinished = amountTotal;
  progressBarDiv.value = amountFinished;
  if (amountTotal)
    progressBarDiv.max = amountTotal;
  return element;
}

function updateProgressElement(progressType, progressInfo) {
  var element = $(progressType + 'ProgressElement');
  if (!element) {
    element = createProgressElement(progressType + 'ProgressElement');
    var column  = $('statusList');
    column.appendChild(element);
  }
  var errorOccurred = (progressInfo.state == 'CANCELLED');
  if (progressInfo.state == 'IN_PROGRESS') {
    setProgressElementValues(element, statusMessages[progressType],
        progressInfo.received, progressInfo.total,
        progressInfo.progress_status_text);
  } else {
    setProgressElementFinalValues(element, statusMessages[progressType],
                                  progressInfo.state);
  }
}

function downloadUpdated(result) {
  updateProgressElement('download', result);
}

function burnProgressUpdated(result) {
  if (!burnStarted) {
    $('rootsList').style.display = 'none';
    $('rootsListTitle').textContent = result.path;
    $('rootsColumn').className = 'burningColumn columnList';
    $('statusColumn').className = 'burningColumn columnList';
    burnStarted = true;
  }
  updateProgressElement('burn', result);
}

var elementIdCounter = 0;

function createNewItem(title, path) {
  var element = document.createElement('div');
  element.className = 'devicerow';
  element.id = path + elementIdCounter;
  elementIdCounter++;
  var link;
  link = document.createElement('div');
  link.onclick = function() { burnImage(element.id, path); };
  link.className = 'rowlink';

  var icon = document.createElement('div');
  icon.className = 'icon';
  link.appendChild(icon);

  var span = document.createElement('span');
  span.className = 'name';
  span.textContent = title;
  link.appendChild(span);

  element.appendChild(link);

  var burnicon = document.createElement('button');
  burnicon.className = 'burnicon';
  burnicon.onclick = function() { burnImage(element.id, path); };
  element.appendChild(burnicon);

  return element;
}

function burnImage(elementId, path) {
  selectItem(elementId, path);
  chrome.send('downloadImage', [path]);
}

function clearList(list) {
  while (list.childNodes.length >= 1) {
    list.removeChild(list.firstChild);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  localStrings = new LocalStrings();
  burnStarted = false;
  chrome.send("getRoots", []);

  // Initialize messages that will be displayed as download
  // or burn progress is updated.
  statusMessages = [];

  var downloadStatuses = [];
  downloadStatuses['start'] = localStrings.getString('downloadStatusStart');
  downloadStatuses['inProgress'] =
      localStrings.getString('downloadStatusInProgress');
  downloadStatuses['finished'] =
      localStrings.getString('downloadStatusComplete');
  downloadStatuses['canceled'] =
      localStrings.getString('downloadStatusCanceled');
  statusMessages['download'] = downloadStatuses;

  var burnStatuses = [];
  burnStatuses['start'] = localStrings.getString('burnStatusStart');
  burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress');
  burnStatuses['finished'] = localStrings.getString('burnStatusComplete');
  burnStatuses['canceled'] = localStrings.getString('burnStatusCanceled');
  statusMessages['burn'] = burnStatuses;
});
</script>
</head>
<body>
  <div id="main" class="fullcontainer">
    <div id="rootsColumn" class="columnlist">
      <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>
      <div id="rootsList"></div>
    </div>
    <div id="statusColumn" class="columnlist">
      <div id="statusList"></div>
    </div>
  </div>
</body>
</html>