* Window manager stuff. Multiple windows can be opened now. Still resolving bugs.

code/boot.js

@@ -339,27 +339,6 @@ window.setupTooltips = function(element) {
   }
 }
 
-window.setupDialogs = function() {
-  window.dialogID = 0;
-  window.alert = function(text, isHTML, closeCallback) {
-    var id = 'dialog-' + window.dialogID++;
-    $('body').append('<div id="' + id + '"></div>');
-    $('#' + id).dialog({
-      autoOpen: false,
-      modal: false,
-      data: {closeCallback: closeCallback},
-      buttons: {
-	'OK': function() {
-	  if($(this).data("closeCallback")) {
-	    $(this).data("closeCallback")();
-	  }
-	  $(this).dialog('close');
-	}
-      }
-    }).html(isHTML ? text : window.convertTextToTableMagic(text)).dialog('open');
-  }
-}
-
 window.setupTaphold = function() {
   @@INCLUDERAW:external/taphold.js@@
 }

code/dialog.js

@@ -0,0 +1,77 @@
+// DIALOGS /////////////////////////////////////////////////////////
+
+/* The ID of onscreen dialogs.
+ * Starts at 0.
+ */
+window.DIALOG_ID = 0;
+
+/* All onscreen dialogs, keyed by their ID.
+ */
+window.DIALOGS = {};
+
+/* Creates a dialog and puts it onscreen. Takes one parameter: options.
+ * (text|html): The text or HTML to display in the dialog. Text is auto-converted to HTML.
+ * title: The dialog's title
+ */
+window.dialog = function(options) {
+  var id = 'dialog-' + window.DIALOG_ID++;
+  var jqID = '#' + id;
+
+  var html = '';
+  if(options.text) {
+    html = window.convertTextToTableMagic(options.text);
+  } else if(options.html) {
+    html = options.html;
+  } else {
+    console.log('window.dialog: warning: no text in dialog');
+    html = window.convertTextToTableMagic('');
+  }
+
+  $('body').append('<div id="' + id + '"></div>');
+  window.DIALOGS[id] = $(jqID).dialog($.extend(true, {
+    autoOpen: false,
+    modal: false,
+    title: '#<Dialog: ' + id + '>',
+    buttons: {
+      'OK': function() {
+	$(this).dialog('close');
+      }
+    },
+    close: function(event, ui) {
+      console.log('window.dialog: dialog ' + $(this).dialog('option', 'title') + ' closed.');
+      if($(this).data('closeCallback')) {
+	$(this).data('closeCallback')();
+      }
+
+      $($(this).data('jqID')).remove();
+      delete window.DIALOGS[$(this).data('id')];
+    }
+  }, options));
+
+  $(jqID).html(html);
+  $(jqID).data('closeCallback', options.closeCallback);
+  $(jqID).data('id', id);
+  $(jqID).data('jqID', jqID);
+
+  $(jqID).dialog('open');
+}
+
+/* Deprecated. Creates a dialog with default settings.
+ * Use window.dialog instead.
+ */
+window.alert = function(text, isHTML, closeCallback) {
+  var obj = {closeCallback: closeCallback};
+  if(isHTML) {
+    obj.html = text;
+  } else {
+    obj.text = text;
+  }
+  console.log('window.alert: this function is deprecated, please use window.dialog instead');
+
+  window.dialog(obj);
+}
+
+window.setupDialogs = function() {
+  window.DIALOG_ID = 0;
+  window.DIALOGS   = {};
+}

code/redeeming.js

@@ -1,4 +1,3 @@
-
 // REDEEMING /////////////////////////////////////////////////////////
 
 /* Resource type names mapped to actual names and abbreviations.
@@ -93,11 +92,12 @@ window.REDEEM_HINTS = {
 };
 
 window.handleRedeemResponse = function(data, textStatus, jqXHR) {
-  var passcode = this.passcode, to_alert, to_log;
+  var passcode = this.passcode, to_dialog, to_log, buttons;
 
   if(data.error) {
-    to_alert = '<strong>' + data.error + '</strong><br />' + (window.REDEEM_ERRORS[data.error] || 'There was a problem redeeming the passcode. Try again?');
+    to_dialog = '<strong>' + data.error + '</strong><br />' + (window.REDEEM_ERRORS[data.error] || 'There was a problem redeeming the passcode. Try again?');
-    to_log   = '[ERROR] ' + data.error;
+    to_log    = '[ERROR] ' + data.error;
+    buttons   = {};
   } else if(data.result) {
     var encouragement = window.REDEEM_ENCOURAGEMENT[Math.floor(Math.random() * window.REDEEM_ENCOURAGEMENT.length)];
     var payload = {};
@@ -190,7 +190,7 @@ window.handleRedeemResponse = function(data, textStatus, jqXHR) {
 
     // Let the user know if we had to guess
     if (inferred.length > 0) {
-      results.table.push('<td style="font-family: monospace;">*</td><td style="font-family: monospace;">Guessed (check console)</td>');
+      results.table.push('<td>*</td><td>Guessed (check console)</td>');
       $.each(inferred, function (idx, val) {
         console.log(passcode +
                     ' => [INFERRED] ' + val.type + ':' + val.key + ' :: ' +
@@ -198,17 +198,27 @@ window.handleRedeemResponse = function(data, textStatus, jqXHR) {
       });
     }
 
-    // Add table footers
-    results.table.push('<td style="font-family: monospace;">&gt;</td><td><a href="javascript:alert(\'' +
-                       escape('<span style="font-family: monospace;"><strong>' + encouragement + '</strong><br />' + results.html.join('/') + '</span>') +
-                       '\', true);" style="font-family: monospace;">[plaintext]</a>');
-
     // Display formatted versions in a table, plaintext, and the console log
-    to_alert = '<table class="redeem-result">' + results.table.map(function(a) {return '<tr>' + a + '</tr>';}).join("\n") + '</table>';
+    to_dialog = '<table class="redeem-result">' +
-    to_log = '[SUCCESS] ' + results.plain.join('/');
+                results.table.map(function(a) {return '<tr>' + a + '</tr>';}).join("\n") +
+                '</table>';
+    to_log    = '[SUCCESS] ' + results.plain.join('/');
+    buttons   = {
+      'PLAINTEXT' : function() {
+        dialog({
+          title: 'Passcode: ' + passcode,
+          html: '<span style="font-family: monospace;"><strong>' + encouragement + '</strong>' +
+                '<br />' + results.html.join('/') + '</span>'
+        });
+      }
+    }
   }
 
-  alert(to_alert, true);
+  dialog({
+    title: 'Passcode: ' + passcode,
+    html: to_dialog,
+    buttons: buttons
+  });
   console.log(passcode + ' => ' + to_log);
 }
 
@@ -225,7 +235,9 @@ window.setupRedeem = function() {
         } else {
           extra = 'No status code was returned.';
         }
-        alert('<strong>The HTTP request failed.</strong> ' + extra);
+        dialog({
+          html: '<strong>The HTTP request failed.</strong> ' + extra
+        });
       });
   });
 }

main.js

@@ -61,7 +61,8 @@ document.getElementsByTagName('head')[0].innerHTML = ''
   + '<style>@@INCLUDESTRING:style.css@@</style>'
   + '<style>@@INCLUDESTRING:external/leaflet.css@@</style>'
 //note: smartphone.css injection moved into code/smartphone.js
-  + '<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Coda"/>';
+  + '<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Coda"/>'
+  + '<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto"/>';
 
 document.getElementsByTagName('body')[0].innerHTML = ''
   + '<div id="map">Loading, please wait</div>'

style.css

@@ -708,7 +708,7 @@ h3 {
   background-color: rgba(8, 48, 78, 0.9);
   border: 1px solid #20A8B1;
   color: #eee;
-  font: 13px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font: 13px/15px Roboto, Arial, Helvetica, sans-serif;
   padding: 2px 4px;
 }
 
@@ -732,9 +732,22 @@ h3 {
   opacity: 0.6;
 }
 
-/*.ui-dialog-titlebar {
+.ui-dialog-titlebar {
-  display: none;
+  text-align: center;
-}*/
+  padding: 4px;
+  background-color: rgba(8, 60, 78, 0.9);
+}
+
+.ui-dialog-title {
+  padding: 2px;
+  font-weight: bold;
+}
+
+.ui-dialog-titlebar-close {
+  position: absolute;
+  right: .2em;
+  top: 0;
+}
 
 .ui-dialog-content {
   padding: 12px;
@@ -756,7 +769,7 @@ h3 {
 .ui-dialog-buttonset button,
 .ui-dialog-content button {
   padding: 2px;
-  min-width: 80px;
+  min-width: 40px;
   color: #FFCE00;
   border: 1px solid #FFCE00;
   background-color: rgba(8, 48, 78, 0.9);
@@ -787,7 +800,7 @@ td + td {
 /* redeem results *****************************************************/
 .redeem-result {
   font-size: 14px;
-  font-family: arial,helvetica,sans-serif;
+  font-family: Roboto, Arial, Helvetica, sans-serif;
   table-layout: fixed;
 }