+<script language="javascript">
+
+ function getStatus(soneId) {
+ $.getJSON("ajax/getSoneStatus.ajax", {"sone": soneId}, function(data, textStatus) {
+ updateStatus(soneId, data.status, data.modified, data.lastUpdated);
+ setTimeout(function() {
+ getStatus(soneId);
+ }, 5000);
+ });
+ }
+
+ function updateStatus(soneId, status, modified, lastUpdated) {
+ $("#sone .sone#" + soneId).
+ toggleClass("unknown", status == "unknown").
+ toggleClass("idle", status == "idle").
+ toggleClass("inserting", status == "inserting").
+ toggleClass("downloading", status == "downloading").
+ toggleClass("modified", modified);
+ $("#sone .sone#" + soneId + " .last-update span.time").text(lastUpdated);
+ }
+
+ $(document).ready(function() {
+ $("#sone .sone").each(function() {
+ getStatus($(this).attr("id"));
+ });
+ });
+</script>
+
+<div id="<% sone.id|html>" class="sone <% sone.status|html><%if sone.modified> modified<%/if>">
+ <div class="unknown-marker" title="<%= View.Sone.Status.Unknown|l10n|html>">?</div>
+ <div class="modified-marker" title="<%= View.Sone.Status.Modified|l10n|html>">!</div>
+ <div class="download-marker" title="<%= View.Sone.Status.Downloading|l10n|html>">⬊</div>
+ <div class="insert-marker" title="<%= View.Sone.Status.Inserting|l10n|html>">⬈</div>
+ <div class="idle-marker" title="<%= View.Sone.Status.Idle|l10n|html>">✔</div>
+ <div class="last-update"><%= View.Sone.Label.LastUpdate|l10n|html> <span class="time"><% sone.time|date format="MMM d, yyyy, HH:mm:ss"></span></div>
+ <div class="profile-link"><a href="viewSone.html?sone=<% sone.id|html>" title="<% sone.requestUri|html>"><% sone.niceName|html></a></div>
+ <div class="short-request-uri"><% sone.requestUri|substring start=4 length=43|html></div>