From 18584e8c9fe8302ded0b307afa166fa3a34f696c Mon Sep 17 00:00:00 2001
From: Ezequiel Bergamaschi <ezequielbergamaschi@gmail.com>
Date: Sun, 9 Mar 2014 20:50:41 -0300
Subject: [PATCH] using bootstrap for modal loading dialog

---
 wise-editor/src/main/webapp/html/editor.html | 16 ++++-----
 wise-editor/src/main/webapp/js/editor.js     | 36 ++++----------------
 2 files changed, 13 insertions(+), 39 deletions(-)
diff --git a/wise-editor/src/main/webapp/html/editor.html b/wise-editor/src/main/webapp/html/editor.html
index 2a3f302f..6691af97 100644
--- a/wise-editor/src/main/webapp/html/editor.html
+++ b/wise-editor/src/main/webapp/html/editor.html
@@ -36,18 +36,16 @@
         });
 
     </script>
-    <style>
-        #mask {
-            position:absolute;
-            z-index:9000;
-            background-color:#000;
-            display:none;
-        }
-    </style>
 </head>
 <body>
 
-<div id="mask"></div>
+<div id='load' class="modal fade">
+    <div class="modal-dialog">
+        <div style="height: 120px; text-align: center; border: 2px solid orange" class="modal-content">
+            <img style='margin-top:25px; text-align: center' src="images/ajax-loader.gif">
+        </div>
+    </div>
+</div>
 
 <div id="header">
 
diff --git a/wise-editor/src/main/webapp/js/editor.js b/wise-editor/src/main/webapp/js/editor.js
index 907af456..41f734a6 100644
--- a/wise-editor/src/main/webapp/js/editor.js
+++ b/wise-editor/src/main/webapp/js/editor.js
@@ -145,7 +145,6 @@ editor = {};
 editor.WaitDialog = new Class({
     initialize:function () {
         this.panel = this._buildPanel();
-        this.mask = $('#mask');
 //        this.parent({
 //                closeButton:false,
 //                destroyOnClose:true,
@@ -192,43 +191,20 @@ editor.WaitDialog = new Class({
     },
 
     _buildPanel:function () {
-        var image = $('<img src="images/ajax-loader.gif">');
-        image.css('margin-top', '25px');
-        var result = $('<div></div>')
-            .css({
-                'text-align': 'center',
-                'width': '400px',
-                'height': '120px',
-                'z-index': '9999',
-                'position': 'absolute',
-                'background-color': 'white',
-                'border-radius': '4px',
-                'border': '1px solid rgb(255, 163, 0)'
-            });
-
-        result.append(image);
-
-        var winH = $(document).height();
-        var winW = $(document).width();
-
+        var result = $('#load');
+        var content = result.find('.modal-content');
+        var winH = $(window).height();
         //Set the popup window to center
-        result.css('top',  winH/2 - result.height()/2);
-        result.css('left', winW/2 - result.width()/2);
+        content.css('margin-top',  winH/2 - content.height()/2);
         return result;
     },
 
     show:function () {
-        //Set height and width to mask to fill up the whole screen
-        this.mask.css({'width': $(window).width(), 'height': $(window).height()});
-        this.mask.fadeIn('slow');
-        this.mask.fadeTo("slow",0.8);
-        $(document.body).append(this.panel);
-        this.panel.fadeIn('slow');
+        this.panel.modal();
     },
 
     close: function() {
-        this.panel.fadeOut('slow');
-        this.mask.hide();
+        this.panel.hide();
     }
 });
 
