diff --git a/converse.js b/converse.js
index 8a92da85c..4839ae3a3 100644
--- a/converse.js
+++ b/converse.js
@@ -43,6 +43,7 @@
         define([
             "Libraries/burry.js/burry",
             "Libraries/underscore.string",
+            "Libraries/jquery-ui-1.9.1.custom",
             "Libraries/sjcl",
             "Libraries/backbone",
             "Libraries/strophe.muc",
@@ -1693,14 +1694,18 @@
                 }, this));
 
             // Controlbox toggler
-            $toggle.bind('click', $.proxy(function (e) {
-                e.preventDefault();
-                if ($("div#controlbox").is(':visible')) {
-                    this.chatboxesview.closeChat('controlbox');
-                } else {
-                    this.chatboxesview.openChat('controlbox');
-                }
-            }, this));
+            if ($toggle.length) {
+                $toggle.bind('click', $.proxy(function (e) {
+                    e.preventDefault();
+                    if ($("div#controlbox").is(':visible')) {
+                        this.chatboxesview.closeChat('controlbox');
+                    } else {
+                        this.chatboxesview.openChat('controlbox');
+                    }
+                }, this));
+            } else {
+                this.chatboxesview.openChat('controlbox');
+            }
         }, this));
     }, xmppchat));
 }));
diff --git a/index.html b/index.html
index b527914e4..54ebd4d65 100644
--- a/index.html
+++ b/index.html
@@ -3,22 +3,22 @@
     <head>
         <title>Converse.js Demo Page</title>
         <!-- This is a special version of jQuery with RequireJS built-in -->
-        <link rel="stylesheet" href="css/smoothness/jquery-ui-1.9.0.custom.css" type="text/css" media="all">
+        <link rel="stylesheet" href="Libraries/css/jquery-ui-1.9.1.custom/ui-lightness/jquery-ui-1.9.1.custom.css" type="text/css" media="all">
         <link rel="stylesheet" href="converse.css" type="text/css" media="all">
         <script data-main="main" src="Libraries/require-jquery.js"></script>
     </head>
     <body>
         <h1>Converse.js Demo Page</h1>
-
-        Log in with your Jabber/XMPP ID and password. If you don't have an XMPP
-        account, you can create one for free on <a href="http://register.jabber.org">jabber.org</a>.
-
+        Log in with your Jabber/XMPP ID and password. 
         <!-- login dialog -->
         <div id='login_dialog' class='hidden'>
-            <label>Login ID:</label><input type='text' id='jid'>
-            <label>Password:</label><input type='password' id='password'>
+            <label>Login ID:</label>
+            <input type='text' id='jid'>
+            <label>Password:</label>
+            <input type='password' id='password'>
+            <label>BOSH Service URL:</label>
+            <input type='text' id='bosh_service_url'>
         </div>
-
         <div id="collective-xmpp-chat-data"></div>
     </body>
 </html>
diff --git a/main.js b/main.js
index 6fb2992bc..43a9c7319 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,50 @@
 require(["jquery", "converse"], function($) {
     $(function() {
-        alert('success!');
+        $('#login_dialog').dialog({
+            autoOpen: true,
+            draggable: false,
+            modal: true,
+            title: 'Connect to XMPP',
+            buttons: {
+                "Connect": function () {
+                    $(document).trigger('connect', {
+                        jid: $('#jid').val(),
+                        password: $('#password').val(),
+                        bosh_service_url: $('#bosh_service_url').val()
+                    });
+                    $('#password').val('');
+                    $(this).dialog('close');
+                }
+            }
+        });
+
+        $(document).bind('connect', function (ev, data) {
+            var connection = new Strophe.Connection(data.bosh_service_url);
+
+            connection.connect(data.jid, data.password, function (status) {
+                if (status === Strophe.Status.CONNECTED) {
+                    console.log('Connected');
+                    $(document).trigger('jarnxmpp.connected', connection);
+                } else if (status === Strophe.Status.DISCONNECTED) {
+                    console.log('Disconnected');
+                    $(document).trigger('jarnxmpp.disconnected');
+                } else if (status === Strophe.Status.Error) {
+                    console.log('Error');
+                } else if (status === Strophe.Status.CONNECTING) {
+                    console.log('Connecting');
+                } else if (status === Strophe.Status.CONNFAIL) {
+                    console.log('Connection Failed');
+                } else if (status === Strophe.Status.AUTHENTICATING) {
+                    console.log('Authenticating');
+                } else if (status === Strophe.Status.AUTHFAIL) {
+                    console.log('Authenticating Failed');
+                } else if (status === Strophe.Status.DISCONNECTING) {
+                    console.log('Disconnecting');
+                } else if (status === Strophe.Status.ATTACHED) {
+                    console.log('Attached');
+                }
+            });
+        });
+
     });
 });
