Simplify the boilerplate HTML require even more.

Use id 'conversejs' instead of 'chatpanel'. The controlbox toggle is now generated via a backbone view, you don't need to manually include it in your markup.

Simplify the boilerplate HTML require even more.
Use id 'conversejs' instead of 'chatpanel'. The controlbox toggle is now generated via a backbone view, you don't need to manually include it in your markup.
38c26013 · JC Brand · 90a5df87 · 38c26013 · 38c26013 · 38c26013
Commit 38c26013 authored Oct 20, 2013 by JC Brand
13 changed files
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -4,10 +4,15 @@ Changelog
 0.7.0 (Unreleased)
 ------------------
+.. Note ::
+    This release introduces a backward incompatible change. The boilerplate
+    HTML needed in your webpage for converse.js to work has been reduced to a
+    single div: <div id="conversejs"></div>
 * Add a toolbar for single user chat [jcbrand]
 * Add support for OTR (off-the-record) encryption [jcbrand]
 * Add support for smileys [jcbrand]
-* Simplified initial boilerplate markup [jcbrand]
+* Simplified boilerplate markup [jcbrand]
 * New configuration settings, ``xhr_custom_status_url`` and ``xhr_user_search_url`` [jcbrand]
 0.6.6 (2013-10-16)

--- a/converse.css
+++ b/converse.css
@@ -17,12 +17,12 @@
    user-select: none;
 }
-#chatpanel, #chatpanel input {
+#conversejs, #conversejs input {
  color: rgb(79, 79, 79);
 }
-#chatpanel .emoticon {
+#conversejs .emoticon {
    font-size: 14px;
 }
@@ -54,7 +54,7 @@ span.spinner.hor_centered {
    position: absolute;
 }
-#chatpanel {
+#conversejs {
    z-index: 99; /*--Keeps the panel on top of all other elements--*/
    position: fixed;
    bottom: 0; right: 0;
@@ -478,7 +478,7 @@ a.close-chatbox-button:active {
    margin-top: 0.5em;
 }
-#chatpanel dd.available-chatroom {
+#conversejs dd.available-chatroom {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -486,7 +486,7 @@ a.close-chatbox-button:active {
    width: 175px;
 }
-#chatpanel dd.available-chatroom a.open-room {
+#conversejs dd.available-chatroom a.open-room {
    width: 148px;
 }
@@ -613,7 +613,7 @@ dd.available-chatroom:hover a.room-info {
    background-color: #DCEAC5;
 }
-#chatpanel div.controlbox-panes {
+#conversejs div.controlbox-panes {
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */

--- a/converse.js
+++ b/converse.js
@@ -110,7 +110,7 @@
        // Translation machinery
        // ---------------------
        var __ = $.proxy(function (str) {
-            // Translation factory 
+            // Translation factory
            if (this.i18n === undefined) {
                this.i18n = locales.en;
            }
@@ -332,35 +332,6 @@
            this.updateMsgCounter();
        };
-        this.showControlBox = function () {
-            var controlbox = this.chatboxes.get('controlbox');
-            if (!controlbox) {
-                this.chatboxes.add({
-                    id: 'controlbox',
-                    box_id: 'controlbox',
-                    visible: true
-                });
-                if (this.connection) {
-                    this.chatboxes.get('controlbox').save();
-                }
-            } else {
-                controlbox.trigger('show');
-            }
-        };
-        this.toggleControlBox = function () {
-            if ($("div#controlbox").is(':visible')) {
-                var controlbox = this.chatboxes.get('controlbox');
-                if (this.connection) {
-                    controlbox.destroy();
-                } else {
-                    controlbox.trigger('hide');
-                }
-            } else {
-                this.showControlBox();
-            }
-        };
        this.initStatus = function (callback) {
            this.xmppstatus = new this.XMPPStatus();
            var id = hex_sha1('converse.xmppstatus-'+this.bare_jid);
@@ -455,7 +426,7 @@
                    this.set({
                        'user_id' : Strophe.getNodeFromJid(this.get('jid')),
                        'box_id' : hex_sha1(this.get('jid')),
-                        'otr_status': this.get('otr_status') || UNENCRYPTED 
+                        'otr_status': this.get('otr_status') || UNENCRYPTED
                    });
                }
            },
@@ -479,14 +450,14 @@
                            'instance_tag': instance_tag
                        };
                    }
-                } 
+                }
                // We need to generate a new key and instance tag
                result = alert(__('Your browser needs to generate a private key, which will be used in your encrypted chat session. This can take up to 30 seconds during which your browser might freeze and become unresponsive.'));
                instance_tag = otr.OTR.makeInstanceTag();
                key = new otr.DSA();
                // Encrypt the key and set in sessionStorage. Also store
                // instance tag
-                window.sessionStorage[hex_sha1(this.id+'priv_key')] = 
+                window.sessionStorage[hex_sha1(this.id+'priv_key')] =
                    cipher.encrypt(crypto.algo.AES, key.packPrivate(), pass).toString();
                window.sessionStorage[hex_sha1(this.id+'instance_tag')] = instance_tag;
@@ -1107,10 +1078,10 @@
                            this.$el.find('div.chat-event').remove();
                        }
                    }
-                } 
+                }
                if (_.has(item.changed, 'status')) {
                    this.showStatusMessage(item.get('status'));
-                } 
+                }
                if (_.has(item.changed, 'image')) {
                    this.renderAvatar();
                }
@@ -1183,7 +1154,7 @@
                    data.allow_otr = converse.allow_otr && !this.is_chatroom;
                    data.show_emoticons = converse.show_emoticons;
                    data.otr_translated_status = OTR_TRANSLATED_MAPPING[data.otr_status];
-                    data.otr_status_class = OTR_CLASS_MAPPING[data.otr_status]; 
+                    data.otr_status_class = OTR_CLASS_MAPPING[data.otr_status];
                    this.$el.find('.chat-toolbar').html(this.toolbar_template(data));
                }
                return this;
@@ -2348,7 +2319,7 @@
        });
        this.ChatBoxesView = Backbone.View.extend({
-            el: '#chatpanel',
+            el: '#conversejs',
            initialize: function () {
                // boxesviewinit
@@ -2503,7 +2474,7 @@
                } else if (ask === 'request') {
                    this.$el.addClass('requesting-xmpp-contact');
                    this.$el.html(this.request_template(item.toJSON()));
-                    converse.showControlBox();
+                    converse.controlboxtoggle.showControlBox();
                } else if (subscription === 'both' || subscription === 'to') {
                    this.$el.addClass('current-xmpp-contact');
                    this.$el.html(this.template(
@@ -3204,7 +3175,8 @@
                'submit form#converse-login': 'authenticate'
            },
            tab_template: _.template(
-                '<li><a class="current" href="#login">'+__('Sign in')+'</a></li>'),
+                '<li><a class="current" href="#login">'+__('Sign in')+'</a></li>'
+            ),
            template: _.template(
                '<form id="converse-login">' +
                '<label>'+__('XMPP/Jabber Username:')+'</label>' +
@@ -3212,11 +3184,12 @@
                '<label>'+__('Password:')+'</label>' +
                '<input type="password" name="password">' +
                '<input class="login-submit" type="submit" value="'+__('Log In')+'">' +
-                '</form">'),
+                '</form">'
+            ),
            bosh_url_input: _.template(
                '<label>'+__('BOSH Service URL:')+'</label>' +
-                '<input type="text" id="bosh_service_url">'),
+                '<input type="text" id="bosh_service_url">'
+            ),
            connect: function ($form, jid, password) {
                if ($form) {
@@ -3283,18 +3256,69 @@
            }
        });
+        this.ControlBoxToggle = Backbone.View.extend({
+            tagName: 'a',
+            className: 'toggle-online-users',
+            id: 'toggle-controlbox',
+            events: {
+                'click': 'onClick'
+            },
+            attributes: {
+                'href': "#"
+            },
+            template: _.template(
+                '<strong class="conn-feedback">Toggle chat</strong>'+
+                '<strong style="display: none" id="online-count">(0)</strong>'
+            ),
+            initialize: function () {
+                this.render();
+            },
+            render: function () {
+                $('#conversejs').append(this.$el.html(this.template()));
+                return this;
+            },
+            showControlBox: function () {
+                var controlbox = converse.chatboxes.get('controlbox');
+                if (!controlbox) {
+                    converse.chatboxes.add({
+                        id: 'controlbox',
+                        box_id: 'controlbox',
+                        visible: true
+                    });
+                    if (converse.connection) {
+                        converse.chatboxes.get('controlbox').save();
+                    }
+                } else {
+                    controlbox.trigger('show');
+                }
+            },
+            onClick: function (e) {
+                e.preventDefault();
+                if ($("div#controlbox").is(':visible')) {
+                    var controlbox = converse.chatboxes.get('controlbox');
+                    if (converse.connection) {
+                        controlbox.destroy();
+                    } else {
+                        controlbox.trigger('hide');
+                    }
+                } else {
+                    this.showControlBox();
+                }
+            }
+        });
        // Initialization
        // --------------
        // This is the end of the initialize method.
        this.chatboxes = new this.ChatBoxes();
        this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
-        $('.toggle-online-users').bind(
+        this.controlboxtoggle = new this.ControlBoxToggle();
-            'click',
-            $.proxy(function (e) {
-                e.preventDefault(); this.toggleControlBox();
-            }, this)
-        );
        if ((this.prebind) && (!this.connection)) {
            if ((!this.jid) || (!this.sid) || (!this.rid) || (!this.bosh_service_url)) {
                this.log('If you set prebind=true, you MUST supply JID, RID and SID values');
@@ -3305,7 +3329,7 @@
        } else if (this.connection) {
            this.onConnected();
        }
-        if (this.show_controlbox_by_default) { this.showControlBox(); }
+        if (this.show_controlbox_by_default) { this.controlboxtoggle.showControlBox(); }
    };
    return {
        'initialize': function (settings, callback) {

--- a/docs/doctrees/index.doctree
+++ b/docs/doctrees/index.doctree
--- a/docs/html/_sources/index.txt
+++ b/docs/html/_sources/index.txt
@@ -57,14 +57,7 @@ Finally, Converse.js requires a special snippet of HTML markup to be included in
 ::
-    <div id="chatpanel">
+    <div id="conversejs"></div>
-        <div id="collective-xmpp-chat-data"></div>
-        <div id="toggle-controlbox">
-            <a href="#" class="chat toggle-online-users">
-                <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
-            </a>
-        </div>
-    </div>
 The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
 Converse.js repository serves as a nice usable example of this.
@@ -89,7 +82,7 @@ Introduction
 ============
 Even though you can connect to public XMPP servers on the `conversejs.org`_
-website, *Converse.js* is not really meant to be a "Software-as-a-service" (SaaS) 
+website, *Converse.js* is not really meant to be a "Software-as-a-service" (SaaS)
 webchat.
 Instead, its goal is to provide the means for website owners to add a tightly
@@ -153,7 +146,7 @@ Overcoming cross-domain request restrictions
 --------------------------------------------
 The domain of the *Converse.js* demo is *conversejs.org*, but the domain of the connection manager is *opkode.im*.
-HTTP requests are made by *Converse.js* to the connection manager via XmlHttpRequests (XHR).  
+HTTP requests are made by *Converse.js* to the connection manager via XmlHttpRequests (XHR).
 Until recently, it was not possible to make such requests to a different domain
 than the one currently being served (to prevent XSS attacks).
@@ -202,7 +195,7 @@ Apache
 ::
    <VirtualHost *:80>
-        ServerName mysite.com 
+        ServerName mysite.com
        RewriteEngine On
        RewriteRule ^/http-bind(.*) http://someothersite.com/http-bind$1 [P,L]
    </VirtualHost>
@@ -222,7 +215,7 @@ but this will require custom code on your server.
 Jack Moffitt has a great `blogpost`_ about this and even provides an `example Django application`_ to demonstrate it.
-.. Note::
+.. Note ::
   If you want to enable single session support, make sure to pass **prebind: true**
   when you call **converse.initialize** (see ./index.html).
   Additionally you need to pass in valid **jid**, **sid**, **rid** and
@@ -240,7 +233,7 @@ XMLHttpRequest call to your server and ask it to return them for you.
 Below is one example of how this could work. An Ajax call is made to the
 relative URL **/prebind** and it expects to receive JSON data back.
-:: 
+::
    $.getJSON('/prebind', function (data) {
        converse.initialize({
@@ -255,13 +248,13 @@ relative URL **/prebind** and it expects to receive JSON data back.
 **Here's what's happening:**
 The JSON data contains the user's JID (jabber ID), RID, SID and the URL to the
-BOSH connection manager. 
+BOSH connection manager.
 Facebook integration
 ====================
-.. Note :: 
+.. Note ::
    It should be possible to integrate Converse.js with Facebook chat, and
    below I'll provide some tips and documentation on how to achieve this. That
    said, I don't have a Facebook account and therefore haven't tried to do
@@ -270,10 +263,10 @@ Facebook integration
 Converse.js uses `Strophe.js <http://strophe.im/strophejs>`_ to connect and
-communicate with the XMPP server. One nice thing about Strophe.js is that it 
+communicate with the XMPP server. One nice thing about Strophe.js is that it
 can be extended via `plugins <http://github.com/strophe/strophejs-plugins>`_.
-Here is a `plugin for authenticating with facebook 
+Here is a `plugin for authenticating with facebook
 <https://github.com/kissrobber/turedsocial/blob/master/strophe-plugins/src/facebook.js>`_.
 You will need your own BOSH connection manager to act as a proxy between
@@ -284,7 +277,7 @@ The BOSH connection manager that I make available for
 testing purposes (at https://bind.opkode.im) uses `Punjab <https://github.com/twonds/punjab>`_,
 although there are quite a few other options available as well.
-When you configure Converse.js, via its ``initialize`` method, you must specify the 
+When you configure Converse.js, via its ``initialize`` method, you must specify the
 `bosh_service_url`_ value, which is to be your BOSH connection manager.
 Please note, to enable Facebook integration, you'll have to
@@ -339,7 +332,7 @@ directory:
    npm install
 This will install all the development dependencies for Converse.js. If you are
-curious to know what these are, take a look at whats under the *devDependencies* key in 
+curious to know what these are, take a look at whats under the *devDependencies* key in
 `package.json <https://github.com/jcbrand/converse.js/blob/master/package.json>`.
 Install 3rd party dependencies
@@ -389,7 +382,7 @@ Without AMD and require.js
 ==========================
 Converse.js can also be used without require.js. If you for some reason prefer
-to use it this way, please refer to 
+to use it this way, please refer to
 `non_amd.html <https://github.com/jcbrand/converse.js/blob/master/non_amd.html>`_
 for an example of how and in what order all the Javascript files that converse.js
 depends on need to be loaded.
@@ -402,18 +395,18 @@ Add tests for your bugfix or feature
 ------------------------------------
 Add a test for any bug fixed or feature added. We use Jasmine
-for testing. 
+for testing.
 Take a look at ``tests.html`` and ``spec/MainSpec.js`` to see how
 the tests are implemented.
-If you are unsure how to write tests, please 
+If you are unsure how to write tests, please
 `contact me <http://opkode.com/contact>`_ and I'll be happy to help.
 Check that the tests pass
 -------------------------
-Check that the Jasmine tests complete sucessfully. Open 
+Check that the Jasmine tests complete sucessfully. Open
 `tests.html <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
 in your browser, and the tests will run automatically.
@@ -470,7 +463,7 @@ allow_contact_requests
 Default = ``true``
-Allow users to add one another as contacts. If this is set to false, the 
+Allow users to add one another as contacts. If this is set to false, the
 **Add a contact** widget, **Contact Requests** and **Pending Contacts** roster
 sections will all not appear. Additionally, all incoming contact requests will be
 ignored.
@@ -501,7 +494,7 @@ multi-user chat, then a list of rooms on that server will be fetched.
 Not recommended for servers with lots of chat rooms.
 For each room on the server a query is made to fetch further details (e.g.
-features, number of occupants etc.), so on servers with many rooms this 
+features, number of occupants etc.), so on servers with many rooms this
 option will create lots of extra connection traffic.
 auto_subscribe
@@ -558,7 +551,7 @@ already authenticated (usually on the backend before page load).
 This is useful when you don't want to render the login form on the chat control
 box with each page load.
-For prebinding to work, your backend server must authenticate for you, and 
+For prebinding to work, your backend server must authenticate for you, and
 then return a JID (jabber ID), SID (session ID) and RID (Request ID).
 If you set ``prebind`` to ``true``, you have to make sure to also pass in these
@@ -589,18 +582,64 @@ Default = ``false``
 If set to ``true``, only online users will be shown in the contacts roster.
 Users with any other status (e.g. away, busy etc.) will not be shown.
+xhr_custom_status
+-----------------
+Default = ``false``
+.. Note ::
+    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
+This option will let converse.js make an AJAX POST with your changed custom chat status to a
+remote server.
+xhr_custom_status_url
+---------------------
+.. Note ::
+    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
+Default = Empty string
+Used only in conjunction with ``xhr_custom_status``.
+This is the URL to which the AJAX POST request to set the user's custom status
+message will be made.
+The message itself is sent in the request under the key ``msg``.
 xhr_user_search
 ---------------
 Default = ``false``
-There are two ways to add users. 
+.. Note ::
+    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
+There are two ways to add users.
 * The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.
-* The user inputs some text (for example part of a firstname or lastname), an XHR will be made to a backend, and a list of matches are returned. The user can then choose one of the matches to add as a contact.
+* The user inputs some text (for example part of a firstname or lastname), an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned. The user can then choose one of the matches to add as a contact.
+This setting enables the second mechanism, otherwise by default the first will be used.
+*What is expected from the remote server?*
+A default JSON encoded list of objects must be returned. Each object
+corresponds to a matched user and needs the keys ``id`` and ``fullname``.
+xhr_user_search_url
+-------------------
-This setting enables the second mechanism, otherwise by default the first will
+.. Note ::
-be used.
+    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
+Default = Empty string
+Used only in conjunction with ``xhr_user_search``.
+This is the URL to which an AJAX GET request will be made to fetch user data from your remote server.
+The query string will be included in the request with ``q`` as its key.
 ============
 Minification
@@ -614,7 +653,7 @@ all development dependencies (long story short, you can run ``npm install``
 and then ``grunt fetch``).
 We  use `require.js`_ to keep track of *Converse.js* and its dependencies and to
-to bundle them together in a single minified file fit for deployment to a 
+to bundle them together in a single minified file fit for deployment to a
 production site.
 To minify the Javascript and CSS, run the following command:
@@ -635,7 +674,7 @@ CSS is minified via `cssmin <https://github.com/gruntjs/grunt-contrib-cssmin>`_.
 Translations
 ============
-.. Note :: 
+.. Note ::
   Translations take up a lot of space and will bloat your minified file.
   At the time of writing, all the translations add about 50KB of extra data to
   the minified javascript file. Therefore, make sure to only
@@ -686,9 +725,9 @@ that we're using.
    "domain: converse\n"
    "lang: de\n"
    "plural_forms: nplurals=2; plural=(n != 1);\n"
-Unfortunately `Jed <http://slexaxton.github.io/Jed>`_ cannot use the PO files directly. We have to generate from it 
+Unfortunately `Jed <http://slexaxton.github.io/Jed>`_ cannot use the PO files directly. We have to generate from it
 a file in JSON format and then put that in a .js file for the specific
 language.
@@ -698,7 +737,7 @@ following command to install it (npm being the node.js package manager):
 ::
    npm install po2json
 You can then convert the translations into JSON format:
 ::
@@ -722,13 +761,13 @@ create or update the file ./locale/LC_MESSAGES/de.js with the following code:
                }
            })
        }
-    }(this, function (i18n) { 
+    }(this, function (i18n) {
-        return i18n; 
+        return i18n;
    }));
 making sure to also paste the JSON data as value to the "locale_data" key.
-.. Note :: 
+.. Note ::
    If you are adding translations for a new language that is not already supported,
    you'll have to make one more edit in ./locale/locales.js to make sure the
    language is loaded by require.js.

--- a/docs/html/index.html
+++ b/docs/html/index.html
@@ -108,16 +108,19 @@
 <li><a class="reference internal" href="#prebind" id="id32">prebind</a></li>
 <li><a class="reference internal" href="#show-controlbox-by-default" id="id33">show_controlbox_by_default</a></li>
 <li><a class="reference internal" href="#show-only-online-users" id="id34">show_only_online_users</a></li>
-<li><a class="reference internal" href="#xhr-user-search" id="id35">xhr_user_search</a></li>
+<li><a class="reference internal" href="#xhr-custom-status" id="id35">xhr_custom_status</a></li>
+<li><a class="reference internal" href="#xhr-custom-status-url" id="id36">xhr_custom_status_url</a></li>
+<li><a class="reference internal" href="#xhr-user-search" id="id37">xhr_user_search</a></li>
+<li><a class="reference internal" href="#xhr-user-search-url" id="id38">xhr_user_search_url</a></li>
 </ul>
 </li>
 </ul>
 </li>
-<li><a class="reference internal" href="#minification" id="id36">Minification</a><ul>
+<li><a class="reference internal" href="#minification" id="id39">Minification</a><ul>
-<li><a class="reference internal" href="#minifying-javascript-and-css" id="id37">Minifying Javascript and CSS</a></li>
+<li><a class="reference internal" href="#minifying-javascript-and-css" id="id40">Minifying Javascript and CSS</a></li>
 </ul>
 </li>
-<li><a class="reference internal" href="#translations" id="id38">Translations</a></li>
+<li><a class="reference internal" href="#translations" id="id41">Translations</a></li>
 </ul>
 </div>
 <div class="section" id="quickstart-to-get-a-demo-up-and-running">
@@ -152,14 +155,7 @@ bottom of your page (after the closing <em>&lt;/body&gt;</em> element).</p>
 });</pre>
 </div>
 <p>Finally, Converse.js requires a special snippet of HTML markup to be included in your page:</p>
-<div class="highlight-python"><pre>&lt;div id="chatpanel"&gt;
+<div class="highlight-python"><pre>&lt;div id="conversejs"&gt;&lt;/div&gt;</pre>
-    &lt;div id="collective-xmpp-chat-data"&gt;&lt;/div&gt;
-    &lt;div id="toggle-controlbox"&gt;
-        &lt;a href="#" class="chat toggle-online-users"&gt;
-            &lt;strong class="conn-feedback"&gt;Toggle chat&lt;/strong&gt; &lt;strong style="display: none" id="online-count"&gt;(0)&lt;/strong&gt;
-        &lt;/a&gt;
-    &lt;/div&gt;
-&lt;/div&gt;</pre>
 </div>
 <p>The <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/index.html">index.html</a> file inside the
 Converse.js repository serves as a nice usable example of this.</p>
@@ -547,23 +543,62 @@ page load.</p>
 <p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, only online users will be shown in the contacts roster.
 Users with any other status (e.g. away, busy etc.) will not be shown.</p>
 </div>
+<div class="section" id="xhr-custom-status">
+<h3><a class="toc-backref" href="#id35">xhr_custom_status</a><a class="headerlink" href="#xhr-custom-status" title="Permalink to this headline">¶</a></h3>
+<p>Default = <tt class="docutils literal"><span class="pre">false</span></tt></p>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
+</div>
+<p>This option will let converse.js make an AJAX POST with your changed custom chat status to a
+remote server.</p>
+</div>
+<div class="section" id="xhr-custom-status-url">
+<h3><a class="toc-backref" href="#id36">xhr_custom_status_url</a><a class="headerlink" href="#xhr-custom-status-url" title="Permalink to this headline">¶</a></h3>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
+</div>
+<p>Default = Empty string</p>
+<p>Used only in conjunction with <tt class="docutils literal"><span class="pre">xhr_custom_status</span></tt>.</p>
+<p>This is the URL to which the AJAX POST request to set the user&#8217;s custom status
+message will be made.</p>
+<p>The message itself is sent in the request under the key <tt class="docutils literal"><span class="pre">msg</span></tt>.</p>
+</div>
 <div class="section" id="xhr-user-search">
-<h3><a class="toc-backref" href="#id35">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline">¶</a></h3>
+<h3><a class="toc-backref" href="#id37">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline">¶</a></h3>
 <p>Default = <tt class="docutils literal"><span class="pre">false</span></tt></p>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
+</div>
 <p>There are two ways to add users.</p>
 <ul class="simple">
 <li>The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.</li>
-<li>The user inputs some text (for example part of a firstname or lastname), an XHR will be made to a backend, and a list of matches are returned. The user can then choose one of the matches to add as a contact.</li>
+<li>The user inputs some text (for example part of a firstname or lastname), an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned. The user can then choose one of the matches to add as a contact.</li>
 </ul>
-<p>This setting enables the second mechanism, otherwise by default the first will
+<p>This setting enables the second mechanism, otherwise by default the first will be used.</p>
-be used.</p>
+<p><em>What is expected from the remote server?</em></p>
+<p>A default JSON encoded list of objects must be returned. Each object
+corresponds to a matched user and needs the keys <tt class="docutils literal"><span class="pre">id</span></tt> and <tt class="docutils literal"><span class="pre">fullname</span></tt>.</p>
+</div>
+<div class="section" id="xhr-user-search-url">
+<h3><a class="toc-backref" href="#id38">xhr_user_search_url</a><a class="headerlink" href="#xhr-user-search-url" title="Permalink to this headline">¶</a></h3>
+<div class="admonition note">
+<p class="first admonition-title">Note</p>
+<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
+</div>
+<p>Default = Empty string</p>
+<p>Used only in conjunction with <tt class="docutils literal"><span class="pre">xhr_user_search</span></tt>.</p>
+<p>This is the URL to which an AJAX GET request will be made to fetch user data from your remote server.
+The query string will be included in the request with <tt class="docutils literal"><span class="pre">q</span></tt> as its key.</p>
 </div>
 </div>
 </div>
 <div class="section" id="minification">
-<h1><a class="toc-backref" href="#id36">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline">¶</a></h1>
+<h1><a class="toc-backref" href="#id39">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline">¶</a></h1>
 <div class="section" id="minifying-javascript-and-css">
-<h2><a class="toc-backref" href="#id37">Minifying Javascript and CSS</a><a class="headerlink" href="#minifying-javascript-and-css" title="Permalink to this headline">¶</a></h2>
+<h2><a class="toc-backref" href="#id40">Minifying Javascript and CSS</a><a class="headerlink" href="#minifying-javascript-and-css" title="Permalink to this headline">¶</a></h2>
 <p>Please make sure to read the section <a class="reference internal" href="#development">Development</a> and that you have installed
 all development dependencies (long story short, you can run <tt class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span></tt>
 and then <tt class="docutils literal"><span class="pre">grunt</span> <span class="pre">fetch</span></tt>).</p>
@@ -580,7 +615,7 @@ using <a class="reference external" href="https://github.com/jrburke/almond">alm
 </div>
 </div>
 <div class="section" id="translations">
-<h1><a class="toc-backref" href="#id38">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline">¶</a></h1>
+<h1><a class="toc-backref" href="#id41">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline">¶</a></h1>
 <div class="admonition note">
 <p class="first admonition-title">Note</p>
 <p class="last">Translations take up a lot of space and will bloat your minified file.

--- a/docs/html/searchindex.js
+++ b/docs/html/searchindex.js
-Search.setIndex({objects:{},terms:{all:0,code:0,partial:0,queri:0,global:0,webchat:0,follow:0,middl:0,depend:0,sensit:0,punjab:0,present:0,under:0,spec:0,string:0,fals:0,account:0,facebook:0,jack:0,veri:0,tri:0,chatpanel:0,list:0,sane:0,div:0,pleas:0,prevent:0,almond:0,past:0,second:0,pass:0,download:0,further:0,fullnam:0,click:0,even:0,index:0,what:0,hide:0,appear:0,section:0,access:0,"public":0,version:0,"new":0,net:0,method:0,widget:0,themselv:0,gener:0,here:0,bodi:0,let:0,path:0,strong:0,modifi:0,valu:0,box:0,great:0,convers:0,mysit:0,ajax:0,fetch:0,implement:0,sorri:0,via:0,repositori:0,extra:0,solut:0,prefer:0,put:0,href:0,org:0,auto_list_room:0,instal:0,should:0,getsess:0,from:0,zip:0,commun:0,doubl:0,two:0,websit:0,few:0,stylesheet:0,call:0,recommend:0,type:0,until:0,toggl:0,more:0,peopl:0,notic:0,site:0,particular:0,vcard:0,must:0,none:0,room:0,work:0,xhr:0,can:0,lc_messag:0,purpos:0,root:0,blogpost:0,control:0,quickstart:0,give:0,share:0,templat:0,tag:0,proprietari:0,explor:0,onlin:0,occup:0,end:0,goal:0,thing:0,anoth:0,write:0,how:0,sid:0,roster:0,instead:0,css:0,updat:0,npm:0,regener:0,product:0,resourc:0,after:0,usabl:0,befor:0,allow_contact_request:0,underscor:0,data:0,demonstr:0,man:0,"short":0,practic:0,bind:0,show_controlbox_by_default:0,element:0,caus:0,inform:0,show_only_online_us:0,allow:0,parti:0,mechan:0,order:0,feedback:0,chatbox:0,xmpp:0,over:0,becaus:0,through:0,streamlin:0,snippet:0,jid:0,"8147a27e4a7f9b55ffc85c2683f9529a":0,directli:0,fit:0,fix:0,"static":0,pend:0,hidden:0,therefor:0,might:0,them:0,anim:0,"return":0,thei:0,initi:0,rewriterul:0,front:0,now:0,introduct:0,edit:0,revers:0,authent:0,token:0,ejabberd:0,each:0,debug:0,side:0,mean:0,domain:0,individu:0,realli:0,legwork:0,connect:0,happen:0,extract:0,special:0,variabl:0,shown:0,"3rd":0,space:0,miss:0,proxy_pass:0,content:0,rel:0,internet:0,plural:0,factori:0,po2json:0,proxi:0,insid:0,standard:0,standalon:0,reason:0,releas:0,succesfulli:0,afterward:0,rewriteengin:0,could:0,ask:0,keep:0,turn:0,first:0,origin:0,softwar:0,render:0,onc:0,hoop:0,lastnam:0,number:0,yourself:0,restrict:0,instruct:0,alreadi:0,done:0,submit:0,owner:0,custom:0,jabber:0,differ:0,script:0,top:0,attack:0,messag:0,attach:0,stori:0,master:0,jed:0,jcbrand:0,"final":0,listen:0,luckili:0,consol:0,option:0,tool:0,specifi:0,github:0,pars:0,grunt:0,haven:0,serv:0,jump:0,kind:0,bloat:0,provid:0,remov:0,exampl:0,bridg:0,someothersit:0,browser:0,pre:0,"function":0,saa:0,modern:0,ani:0,packag:0,have:0,tabl:0,need:0,moffitt:0,django:0,bosh_service_url:0,prebind:0,min:0,latter:0,port:0,note:0,also:0,contact:0,take:0,which:0,singl:0,sure:0,though:0,unsur:0,who:0,most:0,deploi:0,homepag:0,"class":0,don:0,url:0,request:0,doe:0,part:0,runtim:0,bower:0,usual:0,xdomainrequest:0,devdepend:0,show:0,german:0,text:0,server_nam:0,session:0,fine:0,find:0,help:0,current:0,onli:0,exactli:0,locat:0,just:0,configur:0,apach:0,than:0,busi:0,folder:0,local:0,meant:0,count:0,get:0,soon:0,opkod:0,nativ:0,cannot:0,requir:0,enabl:0,emb:0,mainspec:0,patch:0,reload:0,bad:0,integr:0,contain:0,where:0,set:0,habit:0,stroph:0,see:0,result:0,close:0,page:0,statu:0,said:0,extend:0,state:0,muc:0,between:0,awai:0,experi:0,jasmin:0,screen:0,attribut:0,appreci:0,kei:0,hide_muc_serv:0,javascript:0,style:0,job:0,bosh:0,"5e64a30272af065bd72258c565a03f2f":0,both:0,cor:0,instant:0,shortliv:0,conversej:0,myself:0,etc:0,grain:0,mani:0,login:0,com:0,load:0,node_modul:0,pot:0,assum:0,backend:0,quit:0,sucessfulli:0,addition:0,rebuild:0,compon:0,json:0,much:0,subscrib:0,blob:0,session_kei:0,convert:0,minifi:0,togeth:0,i18n:0,those:0,multi:0,main:0,look:0,servic:0,plugin:0,defin:0,abov:0,error:0,hightlight:0,chat:0,helper:0,demo:0,auto_subscrib:0,non:0,incom:0,rid:0,conn:0,develop:0,open:0,receiv:0,media:0,make:0,minif:0,cross:0,same:0,read:0,onconnectfacebook:0,html:0,chatroom:0,document:0,medit:0,complet:0,signon:0,http:0,webserv:0,optim:0,upon:0,someon:0,hand:0,"50kb":0,user:0,xhr_user_search:0,cssmin:0,recent:0,stateless:0,markup:0,well:0,without:0,command:0,wherebi:0,thi:0,choos:0,latest:0,plural_form:0,protocol:0,firstnam:0,when:0,jshint:0,languag:0,web:0,xmlhttprequest:0,had:0,add:0,other:0,non_amd:0,input:0,match:0,bin:0,applic:0,format:0,webpag:0,amd:0,nginx:0,traffic:0,know:0,background:0,like:0,xss:0,backbon:0,specif:0,server:0,collect:0,benefit:0,either:0,output:0,manag:0,facebookconnect:0,deal:0,nplural:0,some:0,back:0,librari:0,bottom:0,deploy:0,achiev:0,track:0,overcom:0,localhost:0,refer:0,object:0,run:0,host:0,although:0,panel:0,src:0,about:0,controlbox:0,unfortun:0,act:0,own:0,curiou:0,encod:0,automat:0,wrap:0,your:0,merg:0,log:0,wai:0,transfer:0,support:0,"long":0,happi:0,avail:0,includ:0,lot:0,suit:0,analysi:0,head:0,properli:0,form:0,bundl:0,link:0,translat:0,synonym:0,line:0,inlin:0,"true":0,bug:0,congratul:0,longer:0,info:0,pull:0,made:0,dirti:0,tab:0,possibl:0,"default":0,bugfix:0,displai:0,asynchron:0,below:0,tightli:0,otherwis:0,problem:0,expect:0,featur:0,creat:0,doesn:0,msgmerg:0,exist:0,file:0,face:0,check:0,want:0,tip:0,detail:0,gettext:0,field:0,valid:0,rememb:0,test:0,you:0,servernam:0,nice:0,node:0,intend:0,stai:0,lang:0,requirej:0,directori:0,virtualhost:0,getjson:0,allow_muc:0,ignor:0,locale_data:0,potenti:0,time:0},objtypes:{},titles:["Quickstart (to get a demo up and running)"],objnames:{},filenames:["index"]})
+Search.setIndex({objects:{},terms:{all:0,code:0,partial:0,queri:0,global:0,webchat:0,follow:0,middl:0,depend:0,sensit:0,punjab:0,those:0,under:0,sens:0,spec:0,sent:0,string:0,fals:0,account:0,facebook:0,jack:0,veri:0,tri:0,chatpanel:[],list:0,sane:0,div:0,pleas:0,prevent:0,xhr_user_search_url:0,almond:0,past:0,second:0,pass:0,download:0,further:0,fullnam:0,click:0,even:0,index:0,what:0,hide:0,appear:0,section:0,access:0,version:0,"new":0,net:0,"public":0,manag:0,widget:0,themselv:0,gener:0,here:0,bodi:0,let:0,path:0,strong:[],modifi:0,valu:0,box:0,great:0,convers:0,mysit:0,reason:0,fetch:0,implement:0,sorri:0,via:0,although:0,extra:0,apach:0,prefer:0,ask:0,href:0,succesfulli:0,auto_list_room:0,instal:0,getsess:0,from:0,zip:0,commun:0,doubl:0,two:0,websit:0,few:0,stylesheet:0,call:0,recommend:0,msg:0,type:0,until:0,toggl:0,more:0,peopl:0,notic:0,particular:0,vcard:0,must:0,none:[],room:0,work:0,xhr:0,can:0,lc_messag:0,purpos:0,root:0,blogpost:0,control:0,quickstart:0,give:0,share:0,templat:0,tag:0,proprietari:0,explor:0,onlin:0,occup:0,end:0,goal:0,turn:0,anoth:0,snippet:0,how:0,sid:0,instead:0,css:0,updat:0,npm:0,regener:0,product:0,resourc:0,haven:0,after:0,usabl:0,befor:0,allow_contact_request:0,underscor:0,data:0,demonstr:0,man:0,github:0,practic:0,bind:0,show_controlbox_by_default:0,correspond:0,django:0,caus:0,inform:0,show_only_online_us:0,allow:0,media:0,mechan:0,order:0,feedback:0,chatbox:0,xmpp:0,over:0,becaus:0,through:0,streamlin:0,write:0,conjunct:0,"8147a27e4a7f9b55ffc85c2683f9529a":0,directli:0,fit:0,fix:0,pend:0,hidden:0,therefor:0,might:0,them:0,anim:0,"return":0,thei:0,initi:0,rewriterul:0,front:0,now:0,introduct:0,edit:0,revers:0,authent:0,token:0,ejabberd:0,each:0,debug:0,side:0,mean:0,domain:0,"short":0,individu:0,realli:0,legwork:0,connect:0,happen:0,patch:0,extract:0,special:0,variabl:0,shown:0,"3rd":0,space:0,miss:0,proxy_pass:0,content:0,rel:0,internet:0,plural:0,factori:0,po2json:0,proxi:0,insid:0,standard:0,standalon:0,ajax:0,put:0,org:0,afterward:0,xhr_custom_status_url:0,could:0,keep:0,thing:0,xhr_custom_statu:0,first:0,origin:0,softwar:0,render:0,onc:0,hoop:0,lastnam:0,number:0,yourself:0,restrict:0,instruct:0,alreadi:0,done:0,"long":0,owner:0,happi:0,jabber:0,differ:0,script:0,top:0,attack:0,messag:0,attach:0,stori:0,master:0,jed:0,jcbrand:0,"final":0,listen:0,luckili:0,consol:0,option:0,tool:0,specifi:0,part:0,pars:0,grunt:0,than:0,serv:0,jump:0,kind:0,bloat:0,provid:0,remov:0,bridg:0,someothersit:0,browser:0,pre:0,analysi:0,saa:0,modern:0,ani:0,packag:0,style:[],have:0,tabl:0,need:0,moffitt:0,element:0,bosh_service_url:0,prebind:0,min:0,latter:0,port:0,note:0,also:0,exampl:0,take:0,which:0,singl:0,sure:0,deploy:0,unsur:0,who:0,most:0,deploi:0,homepag:0,"class":0,don:0,url:0,request:0,doe:0,runtim:0,bower:0,latest:0,xdomainrequest:0,devdepend:0,show:0,german:0,text:0,server_nam:0,session:0,fine:0,find:0,help:0,xml:0,current:0,onli:0,exactli:0,locat:0,firstnam:0,configur:0,solut:0,should:0,busi:0,folder:0,local:0,meant:0,info:0,get:0,soon:0,opkod:0,nativ:0,cannot:0,requir:0,enabl:0,emb:0,mainspec:0,multi:0,achiev:0,method:0,reload:0,bad:0,integr:0,though:0,contain:0,where:0,set:0,habit:0,stroph:0,see:0,result:0,close:0,statu:0,said:0,kei:0,state:0,muc:0,between:0,awai:0,experi:0,jasmin:0,hide_muc_serv:0,attribut:0,appreci:0,extend:0,screen:0,javascript:0,jid:0,job:0,bosh:0,otherwis:0,"5e64a30272af065bd72258c565a03f2f":0,both:0,cor:0,instant:0,shortliv:0,conversej:0,etc:0,grain:0,mani:0,login:0,com:0,load:0,node_modul:0,pot:0,non:0,assum:0,backend:0,quit:0,sucessfulli:0,addition:0,rebuild:0,empti:0,compon:0,json:0,much:0,subscrib:0,non_amd:0,session_kei:0,convert:0,minifi:0,togeth:0,i18n:0,present:0,myself:0,main:0,look:0,servic:0,plugin:0,defin:0,abov:0,error:0,hightlight:0,file:0,helper:0,demo:0,auto_subscrib:0,site:0,itself:0,incom:0,rid:0,conn:[],develop:0,open:0,receiv:0,parti:0,make:0,minif:0,cross:0,same:0,webpag:0,onconnectfacebook:0,html:0,chatroom:0,document:0,medit:0,complet:0,signon:0,http:0,webserv:0,optim:0,upon:0,someon:0,hand:0,remot:0,"50kb":0,user:0,xhr_user_search:0,cssmin:0,recent:0,stateless:0,markup:0,well:0,without:0,command:0,wherebi:0,thi:0,choos:0,usual:0,plural_form:0,protocol:0,just:0,tip:0,jshint:0,languag:0,web:0,xmlhttprequest:0,had:0,add:0,valid:0,blob:0,input:0,match:0,bin:0,applic:0,format:0,read:0,amd:0,nginx:0,traffic:0,know:0,background:0,backbon:0,xss:0,like:0,specif:0,server:0,collect:[],benefit:0,either:0,output:0,page:0,facebookconnect:0,deal:0,nplural:0,some:0,back:0,librari:0,bottom:0,roster:0,rewriteengin:0,track:0,contact:0,overcom:0,localhost:0,refer:0,object:0,run:0,host:0,repositori:0,post:0,panel:0,src:0,about:0,controlbox:0,unfortun:0,stand:0,act:0,own:0,curiou:0,encod:0,automat:0,wrap:0,chang:0,your:0,merg:0,log:0,wai:0,transfer:0,support:0,submit:0,custom:0,avail:0,includ:0,lot:0,suit:0,"function":0,head:0,properli:0,form:0,bundl:0,link:0,translat:0,synonym:0,line:0,inlin:0,"true":0,bug:0,congratul:0,requirej:0,count:[],pull:0,made:0,dirti:0,tab:0,possibl:0,"default":0,bugfix:0,displai:[],asynchron:0,below:0,tightli:0,"static":0,problem:0,expect:0,featur:0,creat:0,doesn:0,msgmerg:0,exist:0,chat:0,face:0,check:0,want:0,when:0,detail:0,gettext:0,field:0,other:0,rememb:0,test:0,you:0,servernam:0,nice:0,node:0,intend:0,releas:0,stai:0,lang:0,longer:0,directori:0,virtualhost:0,getjson:0,allow_muc:0,ignor:0,locale_data:0,potenti:0,time:0},objtypes:{},titles:["Quickstart (to get a demo up and running)"],objnames:{},filenames:["index"]})
\ No newline at end of file
--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -57,14 +57,7 @@ Finally, Converse.js requires a special snippet of HTML markup to be included in
 ::
-    <div id="chatpanel">
+    <div id="conversejs"></div>
-        <div id="collective-xmpp-chat-data"></div>
-        <div id="toggle-controlbox">
-            <a href="#" class="chat toggle-online-users">
-                <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
-            </a>
-        </div>
-    </div>
 The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
 Converse.js repository serves as a nice usable example of this.
@@ -222,7 +215,7 @@ but this will require custom code on your server.
 Jack Moffitt has a great `blogpost`_ about this and even provides an `example Django application`_ to demonstrate it.
-.. Note::
+.. Note ::
   If you want to enable single session support, make sure to pass **prebind: true**
   when you call **converse.initialize** (see ./index.html).
   Additionally you need to pass in valid **jid**, **sid**, **rid** and
@@ -594,7 +587,7 @@ xhr_custom_status
 Default = ``false``
-Note::
+.. Note ::
    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
 This option will let converse.js make an AJAX POST with your changed custom chat status to a
@@ -603,7 +596,7 @@ remote server.
 xhr_custom_status_url
 ---------------------
-Note::
+.. Note ::
    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
 Default = Empty string
@@ -620,7 +613,7 @@ xhr_user_search
 Default = ``false``
-Note::
+.. Note ::
    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
 There are two ways to add users.
@@ -638,7 +631,7 @@ corresponds to a matched user and needs the keys ``id`` and ``fullname``.
 xhr_user_search_url
 -------------------
-Note::
+.. Note ::
    XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
 Default = Empty string

--- a/index.html
+++ b/index.html
@@ -178,11 +178,7 @@
    </footer>
 </div>
-<div id="chatpanel">
+<div id="conversejs"></div>
-    <a id="toggle-controlbox" href="#" class="chat toggle-online-users">
-        <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
-    </a>
-</div>
 <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

--- a/mockup.html
+++ b/mockup.html
@@ -19,7 +19,7 @@
    </header>
 </div>
-<div id="chatpanel" style="width: 100%;">
+<div id="conversejs" style="width: 100%;">
    <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
        <div class="chat-head oc-chat-head">
            <ul id="controlbox-tabs">

--- a/non_amd.html
+++ b/non_amd.html
@@ -163,7 +163,7 @@
    </footer>
 </div>
-<div id="chatpanel">
+<div id="conversejs">
    <div id="collective-xmpp-chat-data"></div>
    <div id="toggle-controlbox">
        <a href="#" class="chat toggle-online-users">

--- a/spec/MainSpec.js
+++ b/spec/MainSpec.js
@@ -46,11 +46,13 @@
                // This spec will only pass if the controlbox is not currently
                // open yet.
                expect($("div#controlbox").is(':visible')).toBe(false);
-                spyOn(this, 'toggleControlBox').andCallThrough();
+                spyOn(this.controlboxtoggle, 'onClick').andCallThrough();
-                spyOn(this, 'showControlBox').andCallThrough();
+                spyOn(this.controlboxtoggle, 'showControlBox').andCallThrough();
+                // Redelegate so that the spies are now registered as the event handlers (specifically for 'onClick')
+                this.controlboxtoggle.delegateEvents();
                $('.toggle-online-users').click();
-                expect(this.toggleControlBox).toHaveBeenCalled();
+                expect(this.controlboxtoggle.onClick).toHaveBeenCalled();
-                expect(this.showControlBox).toHaveBeenCalled();
+                expect(this.controlboxtoggle.showControlBox).toHaveBeenCalled();
                expect($("div#controlbox").is(':visible')).toBe(true);
            }, converse);
            it("can be opened by clicking a DOM element with class 'toggle-online-users'", open_controlbox);
@@ -345,7 +347,7 @@
                it("can be added to the roster and they will be sorted alphabetically", $.proxy(function () {
                    var i, t;
                    spyOn(this.rosterview, 'render').andCallThrough();
-                    spyOn(this, 'showControlBox').andCallThrough();
+                    spyOn(this.controlboxtoggle, 'showControlBox').andCallThrough();
                    for (i=0; i<req_names.length; i++) {
                        this.roster.create({
                            jid: req_names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
@@ -360,7 +362,7 @@
                        expect(t).toEqual(req_names.slice(0,i+1).sort().join(''));
                        // When a requesting contact is added, the controlbox must
                        // be opened.
-                        expect(this.showControlBox).toHaveBeenCalled();
+                        expect(this.controlboxtoggle.showControlBox).toHaveBeenCalled();
                    }
                }, converse));

--- a/tests.html
+++ b/tests.html
@@ -19,7 +19,7 @@
        </header>
    </div>
-    <div id="chatpanel">
+    <div id="conversejs">
        <div id="collective-xmpp-chat-data"></div>
        <div id="toggle-controlbox">
            <a href="#" class="chat toggle-online-users">