<style type="text/css">
  #display_updates {
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 13px;
  }
  #display_updates p {
    margin: 0px;
  }
  #display_updates .error-message {
    color: red;
  }
  #display_updates .error-message .error-word {
    font-weight: bold;
  }
  #display_updates .critical-yes {
    font-weight: bold;
    color: red;
  }
  #display_updates .recommended-yes {
    font-weight: bold;
    color: blue;
  }
  #display_updates .optional-yes {
    font-weight: bold;
  }
  #display_updates .version-yes {
    font-weight: bold;
    color: green;
  }
</style>

<p id="display_updates">Checking for available program updates<span id="dots">...</span></p>

<iframe width="0" height="0" style="visibility: hidden" src="admin.cgi?page=update_available.html" id="available_updates"></iframe>

<script type="text/javascript">
//<![CDATA[

var available = document.getElementById('available_updates');
var display = document.getElementById('display_updates');
var dots = document.getElementById('dots');
var started = new Date();
setTimeout(readUpdateDetails, 1000);

function readUpdateDetails () {
  var doc = available.contentWindow.document;
  var now = new Date();
  if (dots.childNodes[0].data.length < 5)
    dots.childNodes[0].data += ".";
  else
    dots.childNodes[0].data = ".";

  if (doc.getElementById('error')) {
    while (display.childNodes.length > 0)
      display.removeChild(display.childNodes[0]);

    var error_message = document.createElement("div");
    error_message.className = "error-message";

    var word = document.createElement("span");
    word.className = 'error-word';
    word.appendChild(document.createTextNode('Error: '));
    error_message.appendChild(word);

    error_message.appendChild(doc.getElementById('error'));
    display.appendChild(error_message);

    return;
  }
  else if (doc.getElementById('total_count')) {
    // The page loaded.
    var crit = parseInt(doc.getElementById('critical_count').childNodes[0].data);
    var rec = parseInt(doc.getElementById('recommended_count').childNodes[0].data);
    var opt = parseInt(doc.getElementById('optional_count').childNodes[0].data);
    var ver = parseInt(doc.getElementById('version_available').childNodes[0].data);

    while (display.childNodes.length > 0)
      display.removeChild(display.childNodes[0]);

    var critical = document.createElement("p");
    critical.className = crit > 0 ? "critical-yes" : "critical";
    critical.appendChild(document.createTextNode(crit > 0 ? crit + " critical update" + (crit == 1 ? " is" : "s are") + " available." : "No critical updates available."));

    var recommended = document.createElement("p");
    recommended.className = rec > 0 ? "recommended-yes" : "recommended";
    recommended.appendChild(document.createTextNode(rec > 0 ? rec + " recommended update" + (rec == 1 ? " is" : "s are") + " available." : "No recommended updates available."));

    var optional = document.createElement("p");
    optional.className = opt > 0 ? "optional-yes" : "optional";
    optional.appendChild(document.createTextNode(opt > 0 ? opt + " optional update" + (opt == 1 ? " is" :  "s are") + " available." : "No optional updates available."));

    var version = document.createElement("p");
    version.className = ver > 0 ? "version-yes" : "version";
    version.appendChild(document.createTextNode(ver > 0 ? "A new version is available for upgrade." : "No new version is available."));

    display.appendChild(critical);
    display.appendChild(recommended);
    display.appendChild(optional);
    display.appendChild(version);

    if (crit + rec + opt + ver > 0) {
      var link = document.createElement("p");
      link.className = "update-link";
      var a = document.createElement("a");
      a.href = "admin.cgi?page=update.html";
      a.target = "body";
      a.appendChild(document.createTextNode("Click here"));
      link.appendChild(a);
      link.appendChild(document.createTextNode(" to go to view more details and install these updates."));
      display.appendChild(link);
    }

    return;
  }

  if (now.getTime() - started.getTime() > 30000) {
    available.parentNode.removeChild(available);
    dots.childNodes[0].data = ".....";
    var status = document.createElement('span');
    status.style.color = 'red';
    status.style.fontWeight = 'bold';
    status.appendChild(document.createTextNode(" Connection timed out!"));
    display.appendChild(status);
    return;
  }

  setTimeout(readUpdateDetails, 333);
}

//]]>
</script>
