use Bootstrap alerts for error/warning messages; profile messages in place

js/control/Message.js

@@ -1,27 +1,36 @@
-BR.Message = function () {
-    this.messageTimeout = null;
-};
+BR.Message = L.Class.extend({
+    options: {
+        // true to manually attach click event to close button,
+        // Bootstrap data-api's auto-initialization doesn't work in Controls because of stopPropagation
+        alert: false
+    },
+    
+    initialize: function (id, options) {
+        L.setOptions(this, options);
+        this.id = id;
+    },
 
-BR.Message.prototype = {
     _show: function (msg, type) {
-        window.clearTimeout(this.messageTimeout);
-        var ele = L.DomUtil.get('message');
-        ele.innerHTML = msg;
-        L.DomUtil.removeClass(ele, 'hidden');
-        L.DomUtil.addClass(ele, type);
-        return ele;
+        var ele = L.DomUtil.get(this.id),
+            iconClass = (type === 'warning') ? 'glyphicon-warning-sign' : 'glyphicon-remove',
+            alertClass = (type === 'warning') ? 'alert-warning' : 'alert-danger';
+
+        ele.innerHTML =
+              '<div class="alert ' + alertClass + ' alert-dismissible fade in" role="alert">'
+            + '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">'
+            + '    <span aria-hidden="true">&times;</span>'
+            + '  </button>'
+            + '  <span class="glyphicon ' + iconClass + '" aria-hidden="true"/></span>'
+            + msg
+            + '</div>';
+
+        if (this.options.alert) {
+            $('#' + this.id + ' .alert').alert();
+        }
     },
 
     _hide: function (type) {
-        window.clearTimeout(this.messageTimeout);
-        var ele = L.DomUtil.get('message');
-        if (!L.DomUtil.hasClass(ele, 'hidden')) {
-            L.DomUtil.addClass(ele, 'hidden');
-            ele.innerHTML = '';
-        }
-        if (L.DomUtil.hasClass(ele, type)) {
-            L.DomUtil.removeClass(ele, type);
-        }
+        $('#' + this.id + ' .alert').alert('close');
     },
 
     showError: function (err) {
@@ -34,11 +43,8 @@ BR.Message.prototype = {
 
     showWarning: function (msg) {
         this._show(msg, 'warning');
-        this.messageTimeout = window.setTimeout(L.bind(function () {
-            this._hide('warning');
-        }, this), 10000);
     }
-};
+});
 
-// singleton
-BR.message = new BR.Message();
+// static instance as global control
+BR.message = new BR.Message('message');