Controlbox and its toggle are now mutually exclusive.

When the one is visible, the other is hidden and vice versa.

converse.css

@@ -360,6 +360,7 @@ span.spinner.hor_centered {
     padding: 4px 8px;
     margin-right: 5px;
     color: white;
+    display: none;
 }
 
 #connecting-to-chat {
@@ -1171,6 +1172,10 @@ form#set-custom-xmpp-status {
     padding: 1px 2px 1px 1px;
 }
 
+#controlbox {
+    display: none;
+}
+
 #controlbox div.xmpp-status {
     display: inline;
 }

converse.js

@@ -100,6 +100,14 @@
         }
     };
 
+    converse.refresh = function () {
+        // TODO: only do this for webkit browsers
+        var conversejs = document.getElementById('conversejs');
+        conversejs.style.display = 'none';
+        conversejs.offsetHeight; // no need to store this anywhere, the reference is enough
+        conversejs.style.display = 'block';
+    };
+
     converse.initialize = function (settings, callback) {
         var converse = this;
 
@@ -1218,15 +1226,16 @@
                 }
             },
 
-            show: function () {
+            show: function (callback) {
                 if (this.$el.is(':visible') && this.$el.css('opacity') == "1") {
                     converse.emit('onChatBoxFocused', this);
                     return this.focus();
                 }
                 if (converse.animate) {
-                    this.$el.css({'opacity': 0, 'display': 'inline'}).animate({opacity: '1'}, 200);
+                    this.$el.css({'opacity': 0, 'display': 'inline'}).animate({opacity: '1'}, 200, null, callback);
                 } else {
                     this.$el.css({'opacity': 1, 'display': 'inline'});
+                    callback();
                 }
                 if (converse.connection) {
                     // Without a connection, we haven't yet initialized
@@ -1592,6 +1601,38 @@
                 }
             },
 
+            hide: function (callback) {
+                this.$el.hide('fast', function () {
+                    converse.controlboxtoggle.show(function () {
+                        converse.refresh();
+                        if (typeof callback === "function") {
+                            callback();
+                        }
+                    });
+                });
+            },
+
+            show: function () {
+                converse.controlboxtoggle.hide();
+                if (this.$el.is(':visible') && this.$el.css('opacity') == "1") {
+                    return;
+                }
+                if (converse.animate) {
+                    this.$el.css({'opacity': 0, 'display': 'inline'}).animate({opacity: '1'}, 200, null, function () {
+                        converse.refresh();
+                    });
+                } else {
+                    this.$el.css({'opacity': 1, 'display': 'inline'}); converse.refresh();
+                }
+                if (converse.connection) {
+                    // Without a connection, we haven't yet initialized
+                    // localstorage
+                    this.model.save();
+                }
+                converse.emit('onControlBoxOpened', this);
+                return this;
+            },
+
             featureAdded: function (feature) {
                 if ((feature.get('var') == 'http://jabber.org/protocol/muc') && (converse.allow_muc)) {
                     this.roomspanel.muc_domain = feature.get('from');
@@ -3187,6 +3228,14 @@
                 return this;
             },
 
+            hide: function (callback) {
+                this.$el.hide('fast', callback);
+            },
+
+            show: function (callback) {
+                this.$el.show('fast', callback);
+            },
+
             showControlBox: function () {
                 var controlbox = converse.chatboxes.get('controlbox');
                 if (!controlbox) {

index.html

@@ -186,7 +186,7 @@
             allow_otr: true,
             auto_list_rooms: false,
             auto_subscribe: false,
-            bosh_service_url: 'https://conversejs.org/http-bind', // Please use this connection manager only for testing purposes
+            bosh_service_url: 'http://devbox:8890/http-bind', // Please use this connection manager only for testing purposes
             debug: true ,
             hide_muc_server: false,
             i18n: locales['en'], // Refer to ./locale/locales.js to see which locales are supported

mockup.html

@@ -68,7 +68,7 @@
         <span style="display: none" id="online-count">(0)</span>
     </a>
 
-    <div id="controlbox" class="chatbox">
+    <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
         <div class="box-flyout">
             <div class="dragresize dragresize-tm"></div>
             <div class="chat-head controlbox-head">

src/templates/chatbox.html

@@ -2,6 +2,7 @@
     <div class="dragresize dragresize-tm"></div>
     <div class="chat-head chat-head-chatbox">
         <a class="close-chatbox-button icon-close"></a>
+        <a class="minimize-chatbox-button icon-minus"></a>
         <a href="{{url}}" target="_blank" class="user">
             <div class="chat-title"> {{ fullname }} </div>
         </a>

src/templates/chatroom.html

@@ -1,9 +1,11 @@
-<div class="chat-head chat-head-chatroom">
+<div class="box-flyout">
+    <div class="dragresize dragresize-tm"></div>
+    <div class="chat-head chat-head-chatroom">
         <a class="close-chatbox-button icon-close"></a>
+        <a class="minimize-chatbox-button icon-minus"></a>
         <a class="configure-chatroom-button icon-wrench" style="display:none"></a>
         <div class="chat-title"> {{ name }} </div>
         <p class="chatroom-topic"><p/>
-</div>
+    </div>
-<div class="chat-body">
+    <div class="chat-body"><span class="spinner centered"/></div>
-<span class="spinner centered"/>
 </div>