diff --git a/main/.classpath b/main/.classpath
index 259b0c5eb..ae1ef41af 100644
--- a/main/.classpath
+++ b/main/.classpath
@@ -38,6 +38,6 @@
 	<classpathentry kind="lib" path="tests/server/lib/mockito-all-1.8.4.jar" sourcepath="tests/server/lib-src/mockito-all-1.8.4-sources.jar"/>
 	<classpathentry kind="lib" path="tests/server/lib/testng-5.12.1.jar" sourcepath="tests/server/lib-src/testng-5.12.1-sources.jar"/>
 	<classpathentry kind="lib" path="/gridworks-server/lib/servlet-api-2.5.jar" sourcepath="/gridworks-server/lib-src/servlet-api-2.5-sources.jar"/>
-	<classpathentry kind="lib" path="webapp/WEB-INF/lib/butterfly-trunk-r25.jar"/>
+	<classpathentry kind="lib" path="webapp/WEB-INF/lib/butterfly-trunk-r26.jar"/>
 	<classpathentry kind="output" path="webapp/WEB-INF/classes"/>
 </classpath>
diff --git a/main/webapp/WEB-INF/lib-src/butterfly-trunk-r25-sources.jar b/main/webapp/WEB-INF/lib-src/butterfly-trunk-r26-sources.jar
similarity index 66%
rename from main/webapp/WEB-INF/lib-src/butterfly-trunk-r25-sources.jar
rename to main/webapp/WEB-INF/lib-src/butterfly-trunk-r26-sources.jar
index 03c8386de..e0e354092 100644
Binary files a/main/webapp/WEB-INF/lib-src/butterfly-trunk-r25-sources.jar and b/main/webapp/WEB-INF/lib-src/butterfly-trunk-r26-sources.jar differ
diff --git a/main/webapp/WEB-INF/lib/butterfly-trunk-r25.jar b/main/webapp/WEB-INF/lib/butterfly-trunk-r26.jar
similarity index 61%
rename from main/webapp/WEB-INF/lib/butterfly-trunk-r25.jar
rename to main/webapp/WEB-INF/lib/butterfly-trunk-r26.jar
index 55d149609..399fa017b 100644
Binary files a/main/webapp/WEB-INF/lib/butterfly-trunk-r25.jar and b/main/webapp/WEB-INF/lib/butterfly-trunk-r26.jar differ
diff --git a/main/webapp/modules/core/MOD-INF/controller.js b/main/webapp/modules/core/MOD-INF/controller.js
index b6f876bfa..f2ab6558f 100644
--- a/main/webapp/modules/core/MOD-INF/controller.js
+++ b/main/webapp/modules/core/MOD-INF/controller.js
@@ -18,6 +18,8 @@ function init() {
         "project/scripts",
         module,
         [
+            "wirings.js",
+            
             "externals/jquery-1.4.2.min.js",
             "externals/jquery.cookie.js",
             "externals/suggest/suggest-1.2.min.js",
@@ -111,18 +113,29 @@ function init() {
  * This is the function that is invoked by Butterfly
  */
 function process(path, request, response) {
-    if (path.endsWith("/")) {
-        path = path.substring(0, path.length - 1);
-    }
+    if (path == "wirings.js") {
+        var wirings = butterfly.getWirings(request);
+        butterfly.sendString(
+            request, 
+            response, 
+            "var ModuleWirings = " + butterfly.toJSONString(wirings) + ";", 
+            encoding, 
+            "text/javascript"
+        );
+    } else {
+        if (path.endsWith("/")) {
+            path = path.substring(0, path.length - 1);
+        }
     
-    var slash = path.lastIndexOf("/");
-    var lastSegment = slash >= 0 ? path.substring(slash + 1) : path;
-    if (lastSegment in templatedFiles) {
-        var context = {};
-        context.scripts = ClientSideResourceManager.getPaths(lastSegment + "/scripts");
-        context.styles = ClientSideResourceManager.getPaths(lastSegment + "/styles");
+        var slash = path.lastIndexOf("/");
+        var lastSegment = slash >= 0 ? path.substring(slash + 1) : path;
+        if (lastSegment in templatedFiles) {
+            var context = {};
+            context.scripts = ClientSideResourceManager.getPaths(lastSegment + "/scripts");
+            context.styles = ClientSideResourceManager.getPaths(lastSegment + "/styles");
         
-        send(request, response, path + ".vt", context);
+            send(request, response, path + ".vt", context);
+        }
     }
 }
 
diff --git a/main/webapp/modules/core/scripts/dialogs/clustering-dialog.html b/main/webapp/modules/core/scripts/dialogs/clustering-dialog.html
new file mode 100644
index 000000000..533d3d242
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/clustering-dialog.html
@@ -0,0 +1,57 @@
+<div class="dialog-frame" style="width: 900px;">
+  <div class="dialog-header" bind="dialogHeader"></div>
+  <div class="dialog-body" bind="dialogBody">
+    <div class="grid-layout layout-normal layout-full"><table>
+      <tr>
+        <td>
+            Method:
+            <select bind="methodSelector">
+              <option selected="true">key collision</option>
+              <option>nearest neighbor</option>
+            </select>
+        </td>
+        <td>
+          <div class="binning-controls">Keying Function: <select bind="keyingFunctionSelector">
+            <option selected="true">fingerprint</option>
+            <option>ngram-fingerprint</option>
+            <option>double-metaphone</option>
+          </select></div>
+          <div class="knn-controls hidden">Distance Function: <select bind="distanceFunctionSelector">
+            <option selected="true">levenshtein</option>
+            <option>PPM</option>
+          </select></div>
+        </td>
+        <td>
+          <div id="ngram-fingerprint-params" class="function-params hidden">
+            'Ngram Size: <input type="text" value="2" bind="ngramSize" name="ngram-size" size="3" class="param" datatype="int">
+          </div> 
+          <div class="knn-controls hidden">
+            <span style="margin-right: 1em">Radius: <input type="text" value="1.0" bind="radius" name="radius" size="3" class="param" datatype="float"></span>
+            <span>Block Chars: <input type="text" value="6" bind="ngramBlock" name="blocking-ngram-size" size="3" class="param" datatype="int"></span>
+          </div> 
+        </td>
+        <td bind="resultSummary" align="right">
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <div bind="tableContainer" class="clustering-dialog-table-container"></div>
+        </td>
+        <td bind="facetContainer" width="200"></td>
+      </tr>
+    </table></div>
+  </div>
+  <div class="dialog-footer" bind="dialogFooter">
+    <table width="100%"><tr>
+      <td class="left" style="text-align: left">
+        <button bind="selectAllButton">Select All</button>
+        <button bind="deselectAllButton">Deselect All</button>
+      </td> 
+      <td class="right" style="text-align: right">
+        <button bind="applyReClusterButton">Apply &amp; Re-Cluster</button>
+        <button bind="applyCloseButton">Apply &amp; Close</button>
+        <button bind="closeButton">Close</button>
+      </td>
+    </tr></table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/clustering-dialog.js b/main/webapp/modules/core/scripts/dialogs/clustering-dialog.js
index d43e492b3..1742fc611 100644
--- a/main/webapp/modules/core/scripts/dialogs/clustering-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/clustering-dialog.js
@@ -13,62 +13,10 @@ function ClusteringDialog(columnName, expression) {
 
 ClusteringDialog.prototype._createDialog = function() {
     var self = this;
-    var frame = DialogSystem.createDialog();
-    frame.width("900px");
-    
-    var header = $('<div></div>').addClass("dialog-header").text('Cluster & Edit column "' + this._columnName + '"').appendTo(frame);
-    var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
-    var footer = $(
-        '<div class="dialog-footer">' +
-           '<table width="100%"><tr>' +
-             '<td class="left" style="text-align: left"></td>' + 
-             '<td class="right" style="text-align: right"></td>' +
-           '</tr></table>' +
-        '</div>'
-    ).appendTo(frame);
-    
-    var html = $(
-        '<div class="grid-layout layout-normal layout-full"><table>' +
-            '<tr>' +
-                '<td>' +
-                    'Method: <select bind="methodSelector">' +
-                        '<option selected="true">key collision</option>' +
-                        '<option>nearest neighbor</option>' +
-                    '</select>' +
-                '</td>' +
-                '<td>' +
-                    '<div class="binning-controls">Keying Function: <select bind="keyingFunctionSelector">' +
-                        '<option selected="true">fingerprint</option>' +
-                        '<option>ngram-fingerprint</option>' +
-                        '<option>double-metaphone</option>' +
-                    '</select></div>' +
-                    '<div class="knn-controls hidden">Distance Function: <select bind="distanceFunctionSelector">' +
-                        '<option selected="true">levenshtein</option>' +
-                        '<option>PPM</option>' +
-                    '</select></div>' +
-                '</td>' +
-                '<td>' +
-                    '<div id="ngram-fingerprint-params" class="function-params hidden">' +
-                      'Ngram Size: <input type="text" value="2" bind="ngramSize" name="ngram-size" size="3" class="param" datatype="int">' +
-                    '</div>' + 
-                    '<div class="knn-controls hidden">' +
-                        '<span style="margin-right: 1em">Radius: <input type="text" value="1.0" bind="radius" name="radius" size="3" class="param" datatype="float"></span>' +
-                        '<span>Block Chars: <input type="text" value="6" bind="ngramBlock" name="blocking-ngram-size" size="3" class="param" datatype="int"></span>' +
-                    '</div>' + 
-                '</td>' +
-                '<td bind="resultSummary" align="right">' +
-                '</td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td colspan="3">' +
-                    '<div bind="tableContainer" class="clustering-dialog-table-container"></div>' +
-                '</td>' +
-                '<td bind="facetContainer" width="200"></td>' +
-            '</tr>' +
-        '</table></div>'
-    ).appendTo(body);
-    
-    this._elmts = DOM.bind(html);
+    var dialog = $(DOM.loadHTML("core", "scripts/dialogs/clustering-dialog.html"));
+
+    this._elmts = DOM.bind(dialog);
+    this._elmts.dialogHeader.text('Cluster & Edit column "' + this._columnName + '"');
 
     this._elmts.methodSelector.change(function() {
         var selection = $(this).find("option:selected").text();
@@ -116,19 +64,13 @@ ClusteringDialog.prototype._createDialog = function() {
     this._elmts.radius.change(params_changer);
     this._elmts.ngramBlock.change(params_changer);
     
-    var left_footer = footer.find(".left");    
-    $('<button></button>').text("Select All").click(function() { self._selectAll(); }).appendTo(left_footer);
-    $('<button></button>').text("Deselect All").click(function() { self._deselectAll(); }).appendTo(left_footer);
+    this._elmts.selectAllButton.click(function() { self._selectAll(); });
+    this._elmts.deselectAllButton.click(function() { self._deselectAll(); });
+    this._elmts.applyReClusterButton.click(function() { self._onApplyReCluster(); });
+    this._elmts.applyCloseButton.click(function() { self._onApplyClose(); });
+    this._elmts.closeButton.click(function() { self._dismiss(); });
     
-    var right_footer = footer.find(".right");    
-    $('<button></button>').text("Apply & Re-Cluster").click(function() { self._onApplyReCluster(); }).appendTo(right_footer);
-    $('<button></button>').text("Apply & Close").click(function() { self._onApplyClose(); }).appendTo(right_footer);
-    $('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(right_footer);
-    
-    this._level = DialogSystem.showDialog(frame);
-    
-    $("#recon-dialog-tabs").tabs();
-    $("#recon-dialog-tabs-strict").css("display", "");
+    this._level = DialogSystem.showDialog(dialog);
 };
 
 ClusteringDialog.prototype._renderTable = function(clusters) {
@@ -248,7 +190,6 @@ ClusteringDialog.prototype._renderTable = function(clusters) {
             '<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">No clusters were found with the selected method</div><div style="padding-top: 1em; font-size: 110%; color: #888;">Try selecting another method above or changing its parameters</div></div>'
         );
     }
-    
 };
 
 ClusteringDialog.prototype._cluster = function() {
diff --git a/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.html b/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.html
new file mode 100644
index 000000000..ecbb39ed9
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.html
@@ -0,0 +1,35 @@
+<div class="grid-layout layout-tight layout-full"><table rows="4" cols="2">
+  <tr>
+    <td>Expression</td>
+    <td>Language</td>
+  </tr>
+  <tr>
+    <td rowspan="2"><div class="input-container"><textarea class="expression-preview-code" bind="expressionPreviewTextarea" /></div></td>
+    <td width="150" height="1">
+      <select bind="expressionPreviewLanguageSelect">$LANGUAGE_OPTIONS$</select>
+    </td>
+  </tr>
+  <tr>
+    <td class="expression-preview-error-container" bind="expressionPreviewErrorContainer" width="150" style="vertical-align: top;"></td>
+  </tr>
+  <tr>
+    <td colspan="2">
+      <div id="expression-preview-tabs" class="gridworks-tabs">
+        <ul>
+          <li><a href="#expression-preview-tabs-preview">Preview</a></li>
+          <li><a href="#expression-preview-tabs-history">History</a></li>
+          <li><a href="#expression-preview-tabs-help">Help</a></li>
+        </ul>
+        <div id="expression-preview-tabs-preview">
+          <div class="expression-preview-container" bind="expressionPreviewPreviewContainer"></div>
+        </div>
+        <div id="expression-preview-tabs-history" style="display: none;">
+          <div class="expression-preview-container" bind="expressionPreviewHistoryContainer"></div>
+        </div>
+        <div id="expression-preview-tabs-help" style="display: none;">
+          <div class="expression-preview-help-container" bind="expressionPreviewHelpTabBody"></div>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table></div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.js b/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.js
index 6c3f79c16..7f33e04cf 100644
--- a/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.js
@@ -32,6 +32,8 @@ function ExpressionPreviewDialog(title, cellIndex, rowIndices, values, expressio
 }
 
 ExpressionPreviewDialog.generateWidgetHtml = function() {
+    var html = DOM.loadHTML("core", "scripts/dialogs/expression-preview-dialog.html");
+    
     var languageOptions = [];
     for (var prefix in theProject.scripting) {
         if (theProject.scripting.hasOwnProperty(prefix)) {
@@ -40,43 +42,7 @@ ExpressionPreviewDialog.generateWidgetHtml = function() {
         }
     }
     
-    return '<div class="grid-layout layout-tight layout-full"><table rows="4" cols="2">' +
-            '<tr>' +
-                '<td>Expression</td>' +
-                '<td>Language</td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td rowspan="2"><div class="input-container"><textarea class="expression-preview-code" bind="expressionPreviewTextarea" /></div></td>' +
-                '<td width="150" height="1">' +
-                    '<select bind="expressionPreviewLanguageSelect">' +
-                        languageOptions.join("") +
-                    '</select>' +
-                '</td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td class="expression-preview-error-container" bind="expressionPreviewErrorContainer" width="150" style="vertical-align: top;"></td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td colspan="2">' +
-                    '<div id="expression-preview-tabs" class="gridworks-tabs">' +
-                        '<ul>' +
-                            '<li><a href="#expression-preview-tabs-preview">Preview</a></li>' +
-                            '<li><a href="#expression-preview-tabs-history">History</a></li>' +
-                            '<li><a href="#expression-preview-tabs-help">Help</a></li>' +
-                        '</ul>' +
-                        '<div id="expression-preview-tabs-preview">' +
-                            '<div class="expression-preview-container" bind="expressionPreviewPreviewContainer"></div>' +
-                        '</div>' +
-                        '<div id="expression-preview-tabs-history" style="display: none;">' +
-                            '<div class="expression-preview-container" bind="expressionPreviewHistoryContainer"></div>' +
-                        '</div>' +
-                        '<div id="expression-preview-tabs-help" style="display: none;">' +
-                            '<div class="expression-preview-help-container" bind="expressionPreviewHelpTabBody"></div>' +
-                        '</div>' +
-                    '</div>' +
-                '</td>' +
-            '</tr>' +
-        '</table></div>';
+    return html.replace("$LANGUAGE_OPTIONS$", languageOptions.join(""));
 };
 
 ExpressionPreviewDialog.Widget = function(
diff --git a/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.html b/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.html
new file mode 100644
index 000000000..c303e5eb1
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.html
@@ -0,0 +1,26 @@
+<div class="dialog-frame extend-data-preview-dialog" style="width: 1000px;">
+  <div class="dialog-header" bind="dialogHeader"></div>
+  <div class="dialog-body" bind="dialogBody">
+    <div class="grid-layout layout-normal layout-full"><table rows="4">
+      <tr>
+        <td width="300" height="1">Add Property</td>
+        <td height="1">Preview</td>
+        <td height="1" width="1%"><button bind="resetButton">Reset</button></td>
+      </tr>
+      <tr>
+        <td style="vertical-align: top;" height="1"><div class="input-container"><input bind="addPropertyInput" /></div></td>
+        <td style="vertical-align: top;" rowspan="3" colspan="2"><div class="preview-container" bind="previewContainer"></div></td>
+      </tr>
+      <tr>
+        <td height="1">Suggested Properties</td>
+      </tr>
+      <tr>
+        <td><div class="suggested-property-container" bind="suggestedPropertyContainer"></div></td>
+      </tr>
+    </table></div>
+  </div>
+  <div class="dialog-footer" bind="dialogFooter">
+    <button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
+    <button bind="cancelButton">Cancel</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.js b/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.js
index f813c045b..a5a8323fd 100644
--- a/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.js
@@ -6,51 +6,25 @@ function ExtendDataPreviewDialog(column, columnIndex, rowIndices, onDone) {
     this._extension = { properties: [] };
 
     var self = this;
-    var frame = this._frame = DialogSystem.createDialog();
-    frame.width("1000px").addClass("extend-data-preview-dialog");
-    
-    var header = $('<div></div>').addClass("dialog-header").text("Add Columns from Freebase Based on Column " + column.name).appendTo(frame);
-    var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
-    var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
-    var html = $(
-        '<div class="grid-layout layout-normal layout-full"><table rows="4">' +
-            '<tr>' +
-                '<td width="300" height="1">Add Property</td>' +
-                '<td height="1">Preview</td>' +
-                '<td height="1" width="1%"><button bind="resetButton">Reset</button></td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td style="vertical-align: top;" height="1"><div class="input-container"><input bind="addPropertyInput" /></div></td>' +
-                '<td style="vertical-align: top;" rowspan="3" colspan="2"><div class="preview-container" bind="previewContainer"></div></td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td height="1">Suggested Properties</td>' +
-            '</tr>' +
-            '<tr>' +
-                '<td><div class="suggested-property-container" bind="suggestedPropertyContainer"></div></td>' +
-            '</tr>' +
-        '</table></div>'
-    ).appendTo(body);
-    
-    this._elmts = DOM.bind(html);
-    
+    this._dialog = $(DOM.loadHTML("core", "scripts/dialogs/extend-data-preview-dialog.html"));
+    this._elmts = DOM.bind(this._dialog);
+    this._elmts.dialogHeader.text("Add Columns from Freebase Based on Column " + column.name);
     this._elmts.resetButton.click(function() {
         self._extension.properties = [];
         self._update();
     });
     
-    $('<button></button>').html("&nbsp;&nbsp;OK&nbsp;&nbsp;").click(function() {
+    this._elmts.okButton.click(function() {
         if (self._extension.properties.length === 0) {
             alert("Please add some properties first.");
         } else {
             DialogSystem.dismissUntil(self._level - 1);
             self._onDone(self._extension);
         }
-    }).appendTo(footer);
-    
-    $('<button></button>').text("Cancel").click(function() {
+    });
+    this._elmts.cancelButton.click(function() {
         DialogSystem.dismissUntil(self._level - 1);
-    }).appendTo(footer);
+    });
     
     var dismissBusy = DialogSystem.showBusy();
     var type = "reconConfig" in column && "type" in column.reconConfig ? column.reconConfig.type.id : "/common/topic";
@@ -105,7 +79,7 @@ ExtendDataPreviewDialog.getAllProperties = function(typeID, onDone) {
 };
 
 ExtendDataPreviewDialog.prototype._show = function(properties) {
-    this._level = DialogSystem.showDialog(this._frame);
+    this._level = DialogSystem.showDialog(this._dialog);
     
     var n = this._elmts.suggestedPropertyContainer.offset().top +
         this._elmts.suggestedPropertyContainer.outerHeight(true) -
diff --git a/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.html b/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.html
new file mode 100644
index 000000000..a1433649f
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.html
@@ -0,0 +1,24 @@
+<div class="dialog-frame" style="width: 800px;">
+  <div class="dialog-header" bind="dialogHeader">Load Data into Freebase</div>
+  <div class="dialog-body" bind="dialogBody">
+  </div>
+  <div class="dialog-footer" bind="dialogFooter">
+    <table width="100%"><tr>
+      <td bind="left" style="text-align: left" width="40%" nowrap="true">
+        <button bind="cancelButton" id="freebase-loading-cancel">Cancel</button>
+      </td>
+      <td bind="center" style="text-align: center" width="20%" nowrap="true">
+        <div bind="authorization" class="freebase-loading-authorization"></div>
+      </td>
+      <td bind="right" style="text-align: right" width="40%" nowrap="true">
+        <span bind="selector" class="freebase-loading-graph-selector">
+          Load this data into
+          <input type="radio" bind="sandbox" id="freebase-loading-graph-selector-sandbox" name="graph-selector" checked="checked" value="sandbox"/><label class="sandbox" for="freebase-loading-graph-selector-sandbox" title="Load into the sandbox">sandbox</label>
+          <input type="radio" bind="freebase" id="freebase-loading-graph-selector-freebase" name="graph-selector" value="freebase" disabled="disabled"/><label class="freebase" for="freebase-loading-graph-selector-freebase" title="Load into Freebase">freebase</label>
+        </span>
+        
+        <button bind="loadButton" id="freebase-loading-load" disabled="disabled">Load</button>
+      </td>
+    </tr></table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.js b/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.js
index 1e1fead74..690ccee52 100644
--- a/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/freebase-loading-dialog.js
@@ -5,53 +5,26 @@ function FreebaseLoadingDialog() {
 
 FreebaseLoadingDialog.prototype._createDialog = function() {
     var self = this;
-    var frame = DialogSystem.createDialog();
-    frame.width("800px");
-    
-    var header = $('<div></div>').addClass("dialog-header").text('Load Data into Freebase').appendTo(frame);
-    var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
-    var footer = $(
-        '<div class="dialog-footer">' +
-           '<table width="100%"><tr>' +
-             '<td bind="left" style="text-align: left" width="40%" nowrap="true"></td>' + 
-             '<td bind="center" style="text-align: center" width="20%" nowrap="true"></td>' +
-             '<td bind="right" style="text-align: right" width="40%" nowrap="true"></td>' +
-           '</tr></table>' +
-        '</div>'
-    ).appendTo(frame);
-            
-    this._elmts = DOM.bind(frame);
-    
-    var left_footer = this._elmts.left;  
-    var center_footer = this._elmts.center;  
-    var right_footer = this._elmts.right;  
-    
-    var cancel_button = $('<button bind="cancel" id="freebase-loading-cancel"></button>').text("Cancel").click(function() { 
-        self._dismiss(); 
-    }).appendTo(left_footer);
-        
-    var authorization = $('<div bind="authorization">').addClass("freebase-loading-authorization").hide().appendTo(center_footer);
+    var dialog = $(DOM.loadHTML("core", "scripts/dialogs/freebase-loading-dialog.html"));
+    this._elmts = DOM.bind(dialog);
+    this._elmts.cancelButton.click(function() { self._dismiss(); });
+    this._elmts.selector.buttonset();
 
-    var selector = $('<span bind="selector">').addClass("freebase-loading-graph-selector").html("Load this data into " +
-        '<input type="radio" bind="sandbox" id="freebase-loading-graph-selector-sandbox" name="graph-selector" checked="checked" value="sandbox"/><label class="sandbox" for="freebase-loading-graph-selector-sandbox" title="Load into the sandbox">sandbox</label>' +
-        '<input type="radio" bind="freebase" id="freebase-loading-graph-selector-freebase" name="graph-selector" value="freebase" disabled="disabled"/><label class="freebase" for="freebase-loading-graph-selector-freebase" title="Load into Freebase">freebase</label>'
-    ).buttonset().appendTo(right_footer);
-
-    var load_button = $('<button bind="load" id="freebase-loading-load" disabled="disabled"></button>').text("Load").appendTo(right_footer);
-    
     var provider = "www.freebase.com";
-
+    var authorization = this._elmts.authorization;
+    var loadButton = this._elmts.loadButton;
+    
     var check_authorization = function(cont) {
         $.get("/command/check-authorization/" + provider, function(data) {
             if ("status" in data && data.code == "/api/status/ok") {
                 authorization.html('Signed in as: <a target="_new" href="http://www.freebase.com/view/user/' + data.username + '">' + data.username + '</a> | <a href="javascript:{}" bind="signout">Sign Out</a>').show();
                 DOM.bind(authorization).signout.click(function() {
                     self._signedin = false;
-                    load_button.attr("disabled","disabled");
+                    loadButton.attr("disabled","disabled");
                     $("#freebase-loading-graph-selector-freebase").attr("disabled","disabled").button("refresh");
                     Sign.signout(check_authorization,provider);
                 });
-                load_button.unbind().click(function() {
+                loadButton.unbind().click(function() {
                     self._load();
                 });
                 self._signedin = true;
@@ -121,6 +94,7 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
             { protograph: JSON.stringify(theProject.protograph), engine: JSON.stringify(ui.browsingEngine.getJSON()) },
             function(data) {
                 if ("tripleloader" in data) {
+                    var body = self._elmts.dialogBody;
                     body.html(
                         '<div class="freebase-loading-tripleloader-info"><table><tr>' +
                           '<td><div>Name this data load &not; <sup style="color: red">required</sup></div>' +
@@ -130,13 +104,13 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
                         '</tr></table></div>' +
                         '<div class="freebase-loading-tripleloader-data">' + data.tripleloader + '</div>'
                     );
-                    self._elmts = DOM.bind(frame);
+                    self._elmts = DOM.bind(dialog);
                     
                     self._elmts.source_name.keyup(function() {
                         if (self._signedin && $(this).val() != "") {
-                            load_button.removeAttr("disabled");
+                            loadButton.removeAttr("disabled");
                         } else {
-                            load_button.attr("disabled","disabled");
+                            loadButton.attr("disabled","disabled");
                         }
                     });
                     
@@ -157,10 +131,10 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
                             '<p>Have you aligned it with the Freebase schemas yet?</p>' +
                         '</div>'
                     );
-                    self._elmts = DOM.bind(frame);
+                    self._elmts = DOM.bind(dialog);
                     self._end();
                 }
-                self._level = DialogSystem.showDialog(frame);
+                self._level = DialogSystem.showDialog(dialog);
             },
             "json"
         );
@@ -199,7 +173,7 @@ FreebaseLoadingDialog.prototype._load = function() {
             function(data) {
                 dismissBusy();
                 
-                var body = $(".dialog-body");
+                var body = self._elmts.dialogBody;
                 if ("status" in data && typeof data.status == "object" && "code" in data.status && data.status.code == 200) {
                     body.html(
                         '<div class="freebase-loading-tripleloader-message">' +
@@ -246,7 +220,7 @@ FreebaseLoadingDialog.prototype._dismiss = function() {
 };
 
 FreebaseLoadingDialog.prototype._show_error = function(msg, error) {
-    var body = $(".dialog-body");
+    var body = self._elmts.dialogBody;
     body.html(
         '<div class="freebase-loading-tripleloader-message">' +
             '<h2>' + msg + '</h2>' + 
@@ -259,10 +233,10 @@ FreebaseLoadingDialog.prototype._show_error = function(msg, error) {
 
 FreebaseLoadingDialog.prototype._end = function() {
     var self = this;
-    self._elmts.load.text("Close").removeAttr("disabled").unbind().click(function() {
+    self._elmts.loadButton.text("Close").removeAttr("disabled").unbind().click(function() {
         self._dismiss();
     });
-    self._elmts.cancel.hide();
+    self._elmts.cancelButton.hide();
     self._elmts.authorization.hide();
     self._elmts.selector.hide();
 };
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/recon-dialog.html b/main/webapp/modules/core/scripts/dialogs/recon-dialog.html
new file mode 100644
index 000000000..ef8cf8f90
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/recon-dialog.html
@@ -0,0 +1,71 @@
+<div class="dialog-frame" style="width: 800px;">
+  <div class="dialog-header" bind="dialogHeader"></div>
+  <div class="dialog-body" bind="dialogBody">
+    <div id="recon-dialog-tabs" class="gridworks-tabs">
+      <ul>
+        <li><a href="#recon-dialog-tabs-heuristic">Heuristic</a></li>
+        <li><a href="#recon-dialog-tabs-strict">Strict</a></li>
+      </ul>
+      <div id="recon-dialog-tabs-heuristic">
+        <div class="grid-layout layout-normal layout-full"><table>
+          <tr>
+            <td>Reconcile each cell to a Freebase topic of type:</td>
+            <td>Also use relevant details from other columns:</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="recon-dialog-heuristic-types-container" bind="heuristicTypeContainer">
+              </div>
+              <table class="recon-dialog-heuristic-other-type-container recon-dialog-inner-layout">
+                <tr>
+                  <td width="1"><input type="radio" name="recon-dialog-type-choice" value=""></td>
+                  <td>Search for type: <input size="20" bind="heuristicTypeInput" /></td>
+                <tr>
+              </table>
+            </td>
+            <td width="50%">
+              <div class="recon-dialog-heuristic-details-container" bind="heuristicDetailContainer"></div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="checkbox" checked bind="heuristicAutomatchCheck" /> Auto-match candidates with high confidence
+            </td>
+            <td>
+              Use
+              <input type="radio" name="recon-dialog-heuristic-service" value="relevance" checked="" /> relevance service
+              <input type="radio" name="recon-dialog-heuristic-service" value="recon" /> recon service
+            </td>
+          </tr>
+        </table></div>
+      </div>
+      <div id="recon-dialog-tabs-strict" style="display: none;">
+        <p>Each cell contains:</p>
+        <div class="grid-layout layout-normal layout-full"><table>
+          <tr><td width="1%"><input type="radio" name="recon-dialog-strict-choice" value="id" checked /></td><td>a Freebase ID, e.g., /en/solar_system</td></tr>
+          <tr><td><input type="radio" name="recon-dialog-strict-choice" value="guid" /></td><td>a Freebase GUID, e.g., #9202a8c04000641f80000000000354ae</td></tr>
+          <tr>
+            <td width="1%"><input type="radio" name="recon-dialog-strict-choice" value="key" /></td>
+            <td>
+              <div class="grid-layout layout-tighter layout-full"><table>
+                <tr><td colspan="2">a Freebase key in</td></tr>
+                <tr>
+                  <td width="1%"><input type="radio" name="recon-dialog-strict-namespace-choice" value="/wikipedia/en" nsName="Wikipedia EN" checked /></td>
+                  <td>the Wikipedia English namespace</td>
+                </tr>
+                <tr>
+                  <td width="1%"><input type="radio" name="recon-dialog-strict-namespace-choice" value="other" /></td>
+                  <td>this namespace: <input bind="strictNamespaceInput" /></td>
+                </tr>
+              </table></div>
+            </td>
+          </tr>
+        </table></div>
+      </div>
+    </div>
+  </div>
+  <div class="dialog-footer" bind="dialogFooter">
+    <button bind="reconcileButton">Start Reconciling</button>
+    <button bind="cancelButton">Cancel</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/recon-dialog.js b/main/webapp/modules/core/scripts/dialogs/recon-dialog.js
index 4d0c838d9..e7765d83c 100644
--- a/main/webapp/modules/core/scripts/dialogs/recon-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/recon-dialog.js
@@ -27,85 +27,16 @@ function ReconDialog(column, types) {
 
 ReconDialog.prototype._createDialog = function() {
     var self = this;
-    var frame = DialogSystem.createDialog();
-    frame.width("800px");
+    var dialog = $(DOM.loadHTML("core", "scripts/dialogs/recon-dialog.html"));
+
+    this._elmts = DOM.bind(dialog);
+    this._elmts.dialogHeader.text("Reconcile column " + this._column.name);
+    this._elmts.reconcileButton.click(function() { self._onOK(); });
+    this._elmts.cancelButton.click(function() { self._dismiss(); });
     
-    var header = $('<div></div>').addClass("dialog-header").text("Reconcile column " + this._column.name).appendTo(frame);
-    var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
-    var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
-    
-    var html = $(
-        '<div id="recon-dialog-tabs" class="gridworks-tabs">' +
-            '<ul>' +
-                '<li><a href="#recon-dialog-tabs-heuristic">Heuristic</a></li>' +
-                '<li><a href="#recon-dialog-tabs-strict">Strict</a></li>' +
-            '</ul>' +
-            '<div id="recon-dialog-tabs-heuristic">' +
-                '<div class="grid-layout layout-normal layout-full"><table>' +
-                    '<tr>' +
-                        '<td>Reconcile each cell to a Freebase topic of type:</td>' +
-                        '<td>Also use relevant details from other columns:</td>' +
-                    '</tr>' +
-                    '<tr>' +
-                        '<td>' +
-                            '<div class="recon-dialog-heuristic-types-container" bind="heuristicTypeContainer">' +
-                            '</div>' +
-                            '<table class="recon-dialog-heuristic-other-type-container recon-dialog-inner-layout">' +
-                                '<tr>' +
-                                    '<td width="1"><input type="radio" name="recon-dialog-type-choice" value=""></td>' +
-                                    '<td>Search for type: <input size="20" bind="heuristicTypeInput" /></td>' +
-                                '<tr>' +
-                            '</table>' +
-                        '</td>' +
-                        '<td width="50%">' +
-                            '<div class="recon-dialog-heuristic-details-container" bind="heuristicDetailContainer"></div>' +
-                        '</td>' +
-                    '</tr>' +
-                    '<tr>' +
-                        '<td>' +
-                            '<input type="checkbox" checked bind="heuristicAutomatchCheck" /> Auto-match candidates with high confidence' +
-                        '</td>' +
-                        '<td>' +
-                            'Use ' +
-                            '<input type="radio" name="recon-dialog-heuristic-service" value="relevance" checked="" /> relevance service ' +
-                            '<input type="radio" name="recon-dialog-heuristic-service" value="recon" /> recon service ' +
-                        '</td>' +
-                    '</tr>' +
-                '</table></div>' +
-            '</div>' +
-            '<div id="recon-dialog-tabs-strict" style="display: none;">' +
-                '<p>Each cell contains:</p>' +
-                '<div class="grid-layout layout-normal layout-full"><table>' +
-                    '<tr><td width="1%"><input type="radio" name="recon-dialog-strict-choice" value="id" checked /></td><td>a Freebase ID, e.g., /en/solar_system</td></tr>' +
-                    '<tr><td><input type="radio" name="recon-dialog-strict-choice" value="guid" /></td><td>a Freebase GUID, e.g., #9202a8c04000641f80000000000354ae</td></tr>' +
-                    '<tr>' +
-                        '<td width="1%"><input type="radio" name="recon-dialog-strict-choice" value="key" /></td>' +
-                        '<td>' +
-                            '<div class="grid-layout layout-tighter layout-full"><table>' +
-                                '<tr><td colspan="2">a Freebase key in</td></tr>' +
-                                '<tr>' +
-                                    '<td width="1%"><input type="radio" name="recon-dialog-strict-namespace-choice" value="/wikipedia/en" nsName="Wikipedia EN" checked /></td>' +
-                                    '<td>the Wikipedia English namespace</td>' +
-                                '</tr>' +
-                                '<tr>' +
-                                    '<td width="1%"><input type="radio" name="recon-dialog-strict-namespace-choice" value="other" /></td>' +
-                                    '<td>this namespace: <input bind="strictNamespaceInput" /></td>' +
-                                '</tr>' +
-                            '</table></div>' +
-                        '</td>' +
-                    '</tr>' +
-                '</table></div>' +
-            '</div>' +
-        '</div>'
-    ).appendTo(body);
-    
-    this._elmts = DOM.bind(html);
     this._populateDialog();
     
-    $('<button></button>').text("Start Reconciling").click(function() { self._onOK(); }).appendTo(footer);
-    $('<button></button>').text("Cancel").click(function() { self._dismiss(); }).appendTo(footer);
-    
-    this._level = DialogSystem.showDialog(frame);
+    this._level = DialogSystem.showDialog(dialog);
     
     $("#recon-dialog-tabs").tabs();
     $("#recon-dialog-tabs-strict").css("display", "");
diff --git a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html
new file mode 100644
index 000000000..3b12e2e14
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html
@@ -0,0 +1,41 @@
+<div class="dialog-frame" style="width: 1100px;">
+  <div class="dialog-header" bind="dialogHeader"></div>
+  <div class="dialog-body" bind="dialogBody">
+    <div class="grid-layout layout-normal">
+      <div bind="tableContainer" class="scatterplot-dialog-table-container"></div>
+    </div>
+  </div>
+  <div class="dialog-footer" bind="dialogFooter">
+    <table width="100%"><tr>
+      <td class="left" style="text-align: left">
+        <div class="scatterplot-dialog-selectors-container">
+          <table class="scatterplot-selectors"><tr>
+            <td nowrap>
+              <div class="buttonset scatterplot-dim-selector" bind="plotSelector">
+                <input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>
+                <input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>
+              </div> 
+            </td>
+            <td nowrap>
+              <div class="buttonset scatterplot-rot-selector" bind="rotationSelector">
+                <input type="radio" id="clustering-dialog-rot-ccw"  name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise">&nbsp;</label>
+                <input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation">&nbsp;</label>
+                <input type="radio" id="clustering-dialog-rot-cw"   name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise">&nbsp;</label>
+              </div>
+            </td>
+            <td nowrap>
+              <div class="buttonset scatterplot-dot-selector" bind="dotSelector">
+                <input type="radio" id="clustering-dialog-dot-small"   name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size">&nbsp;</label>
+                <input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size">&nbsp;</label>
+                <input type="radio" id="clustering-dialog-dot-big"     name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size">&nbsp;</label>
+              </div>
+            </td>
+          </tr></table>
+        </div>
+      </td> 
+      <td class="right" style="text-align: right">
+        <button bind="closeButton">Close</button>
+      </td>
+    </tr></table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
index a9b9c6996..91964dd52 100644
--- a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
@@ -7,56 +7,14 @@ function ScatterplotDialog(column) {
 
 ScatterplotDialog.prototype._createDialog = function() {
     var self = this;
-    var frame = DialogSystem.createDialog();
-    frame.width("1100px");
-    
-    var header = $('<div></div>').addClass("dialog-header").text('Scatterplot Matrix' + ((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')")).appendTo(frame);
-    var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
-    var footer = $(
-        '<div>' +
-           '<table width="100%"><tr>' +
-             '<td class="left" style="text-align: left"></td>' + 
-             '<td class="right" style="text-align: right"></td>' +
-           '</tr></table>' +
-        '</div>'
-    ).appendTo(frame);
+    var dialog = $(DOM.loadHTML("core", "scripts/dialogs/scatterplot-dialog.html"));
+    this._elmts = DOM.bind(dialog);
+    this._elmts.dialogHeader.text(
+        'Scatterplot Matrix' + 
+            ((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')"));
 
-    $('<div class="grid-layout layout-normal">' +
-         '<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
-      '</div>').appendTo(body);
+    this._elmts.closeButton.click(function() { self._dismiss(); });
     
-    var left_footer = footer.find(".left");    
-    var right_footer = footer.find(".right");    
-    
-    $('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(right_footer);
-    
-    $('<div class="scatterplot-dialog-selectors-container">' +
-        '<table class="scatterplot-selectors"><tr>' +
-            '<td nowrap>' +
-                '<div class="buttonset scatterplot-dim-selector" bind="plotSelector">' +
-                    '<input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>' +
-                    '<input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>' +
-                '</div>' + 
-            '</td>' +
-            '<td nowrap>' +
-                '<div class="buttonset scatterplot-rot-selector" bind="rotationSelector">' +
-                    '<input type="radio" id="clustering-dialog-rot-ccw"  name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise">&nbsp;</label>' +
-                    '<input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation">&nbsp;</label>' +
-                    '<input type="radio" id="clustering-dialog-rot-cw"   name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise">&nbsp;</label>' +
-                '</div>' +
-            '</td>' +
-            '<td nowrap>' +
-                '<div class="buttonset scatterplot-dot-selector" bind="dotSelector">' +
-                    '<input type="radio" id="clustering-dialog-dot-small"   name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size">&nbsp;</label>' +
-                    '<input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size">&nbsp;</label>' +
-                    '<input type="radio" id="clustering-dialog-dot-big"     name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size">&nbsp;</label>' +
-                '</div>' +
-            '</td>' +
-        '</tr></table>' +
-    '</div>').appendTo(left_footer);
-    
-    this._elmts = DOM.bind(frame);
-        
     this._elmts.plotSelector.buttonset().change(function() {
         self._plot_method = $(this).find("input:checked").val();
         self._renderMatrix();
@@ -79,7 +37,7 @@ ScatterplotDialog.prototype._createDialog = function() {
         self._renderMatrix();
     });
     
-    this._level = DialogSystem.showDialog(frame);
+    this._level = DialogSystem.showDialog(dialog);
     this._renderMatrix();
 };
 
diff --git a/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.html b/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.html
new file mode 100644
index 000000000..70ec17bea
--- /dev/null
+++ b/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.html
@@ -0,0 +1,26 @@
+<div class="dialog-frame" style="width: 900px;">
+  <div class="dialog-header" bind="dialogHeader">Templating Export</div>
+  <div class="dialog-body" bind="dialogBody">
+    <div class="grid-layout layout-normal layout-full"><table>
+      <tr>
+        <td style="vertical-align: top"><div class="grid-layout layout-tighter layout-full" bind="controls"><table>
+          <tr><td>Prefix</td></tr>
+          <tr><td><div class="input-container"><textarea bind="prefixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>
+          <tr><td>Row Template</td></tr>
+          <tr><td><div class="input-container"><textarea bind="templateTextarea" class="code" wrap="off" style="height:20em;"></textarea></div></td></tr>
+          <tr><td>Row Separator</td></tr>
+          <tr><td><div class="input-container"><textarea bind="separatorTextarea" class="code" wrap="off" style="height:3em;"></textarea></div></td></tr>
+          <tr><td>Suffix</td></tr>
+          <tr><td><div class="input-container"><textarea bind="suffixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>
+        </table></div></td>
+        <td width="50%" style="vertical-align: top">
+          <div class="input-container"><textarea bind="previewTextarea" class="code" wrap="off" style="height: 40em;"></textarea></div>
+        </td>
+      </tr>
+    </table></div>'
+  </div>
+  <div class="dialog-footer" bind="dialogFooter">
+    <button bind="exportButton">Export</button>
+    <button bind="cancelButton">Cancel</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.js b/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.js
index 6e26a9401..2c3187efc 100644
--- a/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.js
@@ -6,34 +6,8 @@ function TemplatingExporterDialog() {
 
 TemplatingExporterDialog.prototype._createDialog = function() {
     var self = this;
-    var frame = DialogSystem.createDialog();
-    frame.width("900px");
-    
-    var header = $('<div></div>').addClass("dialog-header").text('Templating Export').appendTo(frame);
-    var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
-    var footer = $('<div>').addClass("dialog-footer").appendTo(frame);
-    
-    body.html(
-        '<div class="grid-layout layout-normal layout-full"><table>' +
-            '<tr>' +
-                '<td style="vertical-align: top"><div class="grid-layout layout-tighter layout-full" bind="controls"><table>' +
-                    '<tr><td>Prefix</td></tr>' +
-                    '<tr><td><div class="input-container"><textarea bind="prefixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>' +
-                    '<tr><td>Row Template</td></tr>' +
-                    '<tr><td><div class="input-container"><textarea bind="templateTextarea" class="code" wrap="off" style="height:20em;"></textarea></div></td></tr>' +
-                    '<tr><td>Row Separator</td></tr>' +
-                    '<tr><td><div class="input-container"><textarea bind="separatorTextarea" class="code" wrap="off" style="height:3em;"></textarea></div></td></tr>' +
-                    '<tr><td>Suffix</td></tr>' +
-                    '<tr><td><div class="input-container"><textarea bind="suffixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>' +
-                '</table></div></td>' +
-                '<td width="50%" style="vertical-align: top">' +
-                    '<div class="input-container"><textarea bind="previewTextarea" class="code" wrap="off" style="height: 40em;"></textarea></div>' +
-                '</td>' +
-            '</tr>' +
-        '</table></div>'
-    );
-    
-    this._elmts = DOM.bind(body);
+    var dialog = $(DOM.loadHTML("core", "scripts/dialogs/templating-exporter-dialog.html"));
+    this._elmts = DOM.bind(dialog);
     this._elmts.controls.find("textarea").keyup(function() { self._scheduleUpdate(); });
     
     this._elmts.prefixTextarea[0].value = '{\n  "rows" : [\n';
@@ -44,10 +18,10 @@ TemplatingExporterDialog.prototype._createDialog = function() {
             return '\n      "' + column.name + '" : {{jsonize(cells["' + column.name + '"].value)}}';
         }).join(',') + '\n    }';
     
-    $('<button></button>').text("Export").click(function() { self._export(); self._dismiss(); }).appendTo(footer);
-    $('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(footer);
-
-    this._level = DialogSystem.showDialog(frame);
+    this._elmts.exportButton.click(function() { self._export(); self._dismiss(); });
+    this._elmts.cancelButton.click(function() { self._dismiss(); });
+    
+    this._level = DialogSystem.showDialog(dialog);
 };
 
 TemplatingExporterDialog.prototype._scheduleUpdate = function() {
diff --git a/main/webapp/modules/core/scripts/util/dom.js b/main/webapp/modules/core/scripts/util/dom.js
index a3fc6c224..99a5c3371 100644
--- a/main/webapp/modules/core/scripts/util/dom.js
+++ b/main/webapp/modules/core/scripts/util/dom.js
@@ -14,7 +14,6 @@ DOM._bindDOMElement = function(elmt, map) {
     var bind = elmt.getAttribute("bind");
     if (bind !== null && bind.length > 0) {
         map[bind] = $(elmt);
-        elmt.removeAttribute("bind");
     }
     
     if (elmt.hasChildNodes()) {
@@ -31,4 +30,20 @@ DOM._bindDOMChildren = function(elmt, map) {
         }
         node = node2;
     }
-};
\ No newline at end of file
+};
+
+DOM._loadedHTML = {};
+DOM.loadHTML = function(module, path) {
+    var fullPath = ModuleWirings[module] + path;
+    if (!(fullPath in DOM._loadedHTML)) {
+        $.ajax({
+            async: false,
+            url: fullPath,
+            dataType: "html",
+            success: function(html) {
+                DOM._loadedHTML[fullPath] = html;
+            }
+        })
+    }
+    return DOM._loadedHTML[fullPath];
+};