More work on the mockup. Add js to switch tabs

images/sprites.css

@@ -0,0 +1,299 @@
+.icon-offline,.icon-busy,.icon-home,.icon-home2,.icon-home3,.icon-pencil,.icon-image,.icon-image2,.icon-images,.icon-camera,.icon-music,.icon-headphones,.icon-play,.icon-film,.icon-camera2,.icon-phone,.icon-phone-hang-up,.icon-address-book,.icon-notebook,.icon-envelop,.icon-pushpin,.icon-online,.icon-bubbles,.icon-bubble2,.icon-bubbles2,.icon-bubbles3,.icon-user,.icon-users,.icon-quotes-left,.icon-spinner,.icon-spinner2,.icon-spinner3,.icon-search,.icon-zoom-in,.icon-zoom-out,.icon-key,.icon-key2,.icon-lock,.icon-lock2,.icon-unlocked,.icon-wrench,.icon-cog,.icon-cogs,.icon-cog2,.icon-remove,.icon-remove2,.icon-globe,.icon-attachment,.icon-eye,.icon-eye-blocked,.icon-eye2,.icon-heart,.icon-thumbs-up,.icon-happy,.icon-smiley,.icon-tongue,.icon-sad,.icon-wink,.icon-grin,.icon-cool,.icon-angry,.icon-evil,.icon-shocked,.icon-confused,.icon-wondering,.icon-warning,.icon-notification,.icon-info,.icon-info2,.icon-blocked,.icon-cancel-circle,.icon-close,.icon-spell-check,.icon-minus,.icon-plus,.icon-volume-high,.icon-volume-medium,.icon-volume-low,.icon-volume-mute,.icon-volume-mute2,.icon-volume-increase,.icon-volume-decrease,.icon-checkbox-checked,.icon-checkbox-unchecked,.icon-checkbox-partial,.icon-radio-checked,.icon-radio-unchecked,.icon-bold,.icon-underline,.icon-italic,.icon-strikethrough,.icon-new-tab,.icon-embed,.icon-code,.icon-youtube {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	background-image: url(sprites.png);
+	background-repeat: no-repeat;
+}
+.icon-offline {
+	background-position: 0 0;
+}
+.icon-busy {
+	background-position: -32px 0;
+}
+.icon-home {
+	background-position: -64px 0;
+}
+.icon-home2 {
+	background-position: -96px 0;
+}
+.icon-home3 {
+	background-position: -128px 0;
+}
+.icon-pencil {
+	background-position: -160px 0;
+}
+.icon-image {
+	background-position: -192px 0;
+}
+.icon-image2 {
+	background-position: -224px 0;
+}
+.icon-images {
+	background-position: -256px 0;
+}
+.icon-camera {
+	background-position: -288px 0;
+}
+.icon-music {
+	background-position: -320px 0;
+}
+.icon-headphones {
+	background-position: -352px 0;
+}
+.icon-play {
+	background-position: -384px 0;
+}
+.icon-film {
+	background-position: -416px 0;
+}
+.icon-camera2 {
+	background-position: -448px 0;
+}
+.icon-phone {
+	background-position: -480px 0;
+}
+.icon-phone-hang-up {
+	background-position: 0 -32px;
+}
+.icon-address-book {
+	background-position: -32px -32px;
+}
+.icon-notebook {
+	background-position: -64px -32px;
+}
+.icon-envelop {
+	background-position: -96px -32px;
+}
+.icon-pushpin {
+	background-position: -128px -32px;
+}
+.icon-online {
+	background-position: -160px -32px;
+}
+.icon-bubbles {
+	background-position: -192px -32px;
+	width: 18px;
+}
+.icon-bubble2 {
+	background-position: -224px -32px;
+}
+.icon-bubbles2 {
+	background-position: -256px -32px;
+	width: 18px;
+}
+.icon-bubbles3 {
+	background-position: -288px -32px;
+	width: 18px;
+}
+.icon-user {
+	background-position: -320px -32px;
+}
+.icon-users {
+	background-position: -352px -32px;
+}
+.icon-quotes-left {
+	background-position: -384px -32px;
+}
+.icon-spinner {
+	background-position: -416px -32px;
+}
+.icon-spinner2 {
+	background-position: -448px -32px;
+}
+.icon-spinner3 {
+	background-position: -480px -32px;
+}
+.icon-search {
+	background-position: 0 -64px;
+}
+.icon-zoom-in {
+	background-position: -32px -64px;
+}
+.icon-zoom-out {
+	background-position: -64px -64px;
+}
+.icon-key {
+	background-position: -96px -64px;
+}
+.icon-key2 {
+	background-position: -128px -64px;
+}
+.icon-lock {
+	background-position: -160px -64px;
+}
+.icon-lock2 {
+	background-position: -192px -64px;
+}
+.icon-unlocked {
+	background-position: -224px -64px;
+}
+.icon-wrench {
+	background-position: -256px -64px;
+}
+.icon-cog {
+	background-position: -288px -64px;
+}
+.icon-cogs {
+	background-position: -320px -64px;
+}
+.icon-cog2 {
+	background-position: -352px -64px;
+}
+.icon-remove {
+	background-position: -384px -64px;
+}
+.icon-remove2 {
+	background-position: -416px -64px;
+}
+.icon-globe {
+	background-position: -448px -64px;
+}
+.icon-attachment {
+	background-position: -480px -64px;
+	height: 15px;
+}
+.icon-eye {
+	background-position: 0 -96px;
+}
+.icon-eye-blocked {
+	background-position: -32px -96px;
+}
+.icon-eye2 {
+	background-position: -64px -96px;
+}
+.icon-heart {
+	background-position: -96px -96px;
+}
+.icon-thumbs-up {
+	background-position: -128px -96px;
+}
+.icon-happy {
+	background-position: -160px -96px;
+}
+.icon-smiley {
+	background-position: -192px -96px;
+}
+.icon-tongue {
+	background-position: -224px -96px;
+}
+.icon-sad {
+	background-position: -256px -96px;
+}
+.icon-wink {
+	background-position: -288px -96px;
+}
+.icon-grin {
+	background-position: -320px -96px;
+}
+.icon-cool {
+	background-position: -352px -96px;
+}
+.icon-angry {
+	background-position: -384px -96px;
+}
+.icon-evil {
+	background-position: -416px -96px;
+	height: 16px;
+}
+.icon-shocked {
+	background-position: -448px -96px;
+}
+.icon-confused {
+	background-position: -480px -96px;
+}
+.icon-wondering {
+	background-position: 0 -128px;
+}
+.icon-warning {
+	background-position: -32px -128px;
+	width: 17px;
+}
+.icon-notification {
+	background-position: -64px -128px;
+}
+.icon-info {
+	background-position: -96px -128px;
+}
+.icon-info2 {
+	background-position: -128px -128px;
+}
+.icon-blocked {
+	background-position: -160px -128px;
+}
+.icon-cancel-circle {
+	background-position: -192px -128px;
+}
+.icon-close {
+	background-position: -224px -128px;
+}
+.icon-spell-check {
+	background-position: -256px -128px;
+}
+.icon-minus {
+	background-position: -288px -128px;
+}
+.icon-plus {
+	background-position: -320px -128px;
+}
+.icon-volume-high {
+	background-position: -352px -128px;
+	width: 17px;
+}
+.icon-volume-medium {
+	background-position: -384px -128px;
+}
+.icon-volume-low {
+	background-position: -416px -128px;
+}
+.icon-volume-mute {
+	background-position: -448px -128px;
+}
+.icon-volume-mute2 {
+	background-position: -480px -128px;
+}
+.icon-volume-increase {
+	background-position: 0 -160px;
+}
+.icon-volume-decrease {
+	background-position: -32px -160px;
+}
+.icon-checkbox-checked {
+	background-position: -64px -160px;
+}
+.icon-checkbox-unchecked {
+	background-position: -96px -160px;
+}
+.icon-checkbox-partial {
+	background-position: -128px -160px;
+}
+.icon-radio-checked {
+	background-position: -160px -160px;
+}
+.icon-radio-unchecked {
+	background-position: -192px -160px;
+}
+.icon-bold {
+	background-position: -224px -160px;
+}
+.icon-underline {
+	background-position: -256px -160px;
+}
+.icon-italic {
+	background-position: -288px -160px;
+}
+.icon-strikethrough {
+	background-position: -320px -160px;
+}
+.icon-new-tab {
+	background-position: -352px -160px;
+}
+.icon-embed {
+	background-position: -384px -160px;
+}
+.icon-code {
+	background-position: -416px -160px;
+}
+.icon-youtube {
+	background-position: -448px -160px;
+}

mockup.html

@@ -6,7 +6,7 @@
     <meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
     <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
     <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
-    <script data-main="main" src="components/requirejs/require.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <title>Converse.js Mockup</title>
 </head>
 
@@ -19,18 +19,7 @@
     </header>
     </div>
 
-<!--
-<div id="chatpanel">
-    <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>
--->
-
-<div id="chatpanel">
+<div id="chatpanel" style="width: 100%;">
     <div id="collective-xmpp-chat-data">
         <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
             <div class="chat-head oc-chat-head">
@@ -45,6 +34,7 @@
                 </div>
             </div>
         </div>
+
         <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
             <div class="chat-head oc-chat-head">
                 <ul id="controlbox-tabs">
@@ -124,17 +114,38 @@
                 </dl>
             </div>
             <div id="chatrooms" style="display: none;">
-                <form class="add-chatroom" action="" method="post">
-                    <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
-                    <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
-                    <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
-                    <input type="submit" name="join" value="Join">
-                    <input type="button" name="show" id="show-rooms" value="Show rooms">
-                </form>
-                <dl id="available-chatrooms"></dl>
+            <form class="add-chatroom" action="" method="post">
+                <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
+                <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
+                <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
+                <input type="submit" name="join" value="Join">
+                <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
+            </form>
+            <dl id="available-chatrooms">
+                <dt>Rooms on conference.opkode.im</dt>
+                <dd class="available-chatroom">
+                    <a class="open-room" 
+                    data-room-jid="converse.js@conference.opkode.im"
+                    title="Click to open this room" href="#">converse.js (2)</a>
+                    <a class="room-info" data-room-jid="converse.js@conference.opkode.im" 
+                    title="Show more information on this room" href="#">&nbsp;</a>
+                    <div class="room-info">
+                        <p class="room-info"><strong>Description:</strong></p>
+                        <p class="room-info"><strong>Occupants:</strong> 2</p>
+                        <p class="room-info"><strong>Features:</strong> </p>
+                        <ul>
+                            <li class="room-info">Moderated</li><li class="room-info">Open room</li>
+                            <li class="room-info">Permanent room</li><li class="room-info">Public</li>
+                            <li class="room-info">Semi-anonymous</li>
+                            <p></p>
+                        </ul>
+                    </div>
+                </dd>
+            </dl>
             </div>
         </div>
     </div>
+
     <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f" style="opacity: 1; display: inline;">
         <div class="chat-head chat-head-chatbox">
             <a class="close-chatbox-button">X</a>
@@ -157,9 +168,69 @@
             <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
         </a>
     </div>
+
+    <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392" style="opacity: 1; display: inline;">
+        <div class="chat-head chat-head-chatroom">
+            <a class="close-chatbox-button">X</a>
+            <a class="configure-chatroom-button" style="">&nbsp;</a>
+            <div class="chat-title"> converse.js </div>
+            <p class="chatroom-topic"></p>
+            <p></p>
+        </div>
+        <div class="chat-body">
+            <div class="chat-area">
+                <div class="chat-content">
+                    <time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                    <div class="chat-message ">
+                        <span class="chat-message-room">18:50 fires:&nbsp;</span>
+                        <span class="chat-message-content">explodingcoder: hi :)</span>
+                    </div>
+                    <div class="chat-message ">
+                        <span class="chat-message-me">19:40 me:&nbsp;</span>
+                        <span class="chat-message-content">
+                            I'll be gone for a while, will be back in about an hour</span>
+                    </div>
+                </div>
+                <form class="sendXMPPMessage" action="" method="post">
+                    <textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
+                </form>
+            </div>
+            <div class="participants">
+                <ul class="participant-list">
+                    <li class="participant" title="This user can send messages in this room">jabberthehut</li>
+                    <li class="participant" title="This user can send messages in this room">explodingcoder</li>
+                    <li class="moderator" title="This user is a moderator">jcbrand</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
 </div>
 
 </body>
 <script>
+$(document).ready(function () {
+    $('a[href=#chatrooms]').click(function (ev) { 
+        switchTab(ev);
+    });
+    $('a[href=#users]').click(function (ev) {
+        switchTab(ev); 
+    });
+
+    var switchTab = function (ev) {
+        ev.preventDefault();
+        var $tab = $(ev.target),
+            $sibling = $tab.parent().siblings('li').children('a'),
+            $tab_panel = $($tab.attr('href')),
+            $sibling_panel = $($sibling.attr('href'));
+
+        $sibling_panel.fadeOut('fast', function () {
+            $sibling.removeClass('current');
+            $tab.addClass('current');
+            $tab_panel.fadeIn('fast', function () {
+            });
+        });
+    }
+});
 </script>
 </html>