yet again redesigning loading icon thingy. make it modal this time

attachments/pages/index.html

@@ -41,11 +41,6 @@
   	</div>
   </div>
     
-  <div class="large-loader" id="loading-message" style="display: none; ">
-    <img src="images/large-spinner.gif"> 
-    Loading...
-  </div>
-    
   <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
   <div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; ">
   	<div class="dialog-frame" style="width: 700px; visibility: visible; ">
@@ -53,6 +48,13 @@
   	</div>
   </div>
   
+  <script type='text/mustache' class="busyTemplate">
+    <div id="loading-message">
+      <img src="images/large-spinner.gif">
+      <span> Working...</span>
+    </div>
+  </script>
+
   <script type='text/mustache' class="controlsTemplate">
     <a id="logged-in-status" href="JavaScript:void(0);" class="secondary">{{text}}</a>
   </script>

attachments/script/recline.js

@@ -190,9 +190,9 @@ var recline = function() {
   }
   
   function initializeTable(offset) {
-    $('.large-loader').show();
+    showDialog('busy');
     couch.request({url: app.baseURL + 'api/headers'}).then(function ( headers ) {
-      $('.large-loader').hide();
+      util.hide('dialog');
       getDbInfo().then(function(dbInfo) { 
         updateDocCount(dbInfo.doc_count);
       });