Basic tab system and design :

* clicking on a contact creates a tab containing chat layout

1 files changed, 29 insertions, 1 deletions

diff --git a/webclient/lib/basic.js b/webclient/lib/basic.js
index 52a494a..610afd1 100644
--- a/webclient/lib/basic.js
+++ b/webclient/lib/basic.js
@@ -62,6 +62,13 @@ var Alias = {
     },
     
     /**
+     * Return the name of a contact 
+     */
+    getName : function(contact) {
+        return contact.find('.roster-name').text();
+    },
+    
+    /**
      * Get the home node of a contact
      * @param contact jquery object
      */
@@ -233,6 +240,13 @@ $(document).ready(function(){
        $(this).next().slideToggle();
    });
    
+   $('#tabs').tabs();
+
+   $('#tabs').bind('tabsshow',function(event,ui){
+       $(ui.panel).find('input').focus();
+       $(ui.tab).parent().removeClass('ui-state-focus');
+   });
+   
    $('#rosterfilter').keyup(function() {
        var filter = $(this).val();
        $('#roster ul li div.roster-name:not(:Contains("' + filter + '"))').parent().hide();
@@ -240,7 +254,21 @@ $(document).ready(function(){
    });
    
    $('.roster-contact').live('click', function(){
-       Alias.getHome($(this));
+       log('test');
+       var jid = Alias.getID($(this));
+       var name = Alias.getName($(this));
+       var id = Alias.jid_to_id(jid);
+
+       if ($('#chat-' + id).length === 0) {
+           $('#tabs').tabs('add', '#chat-' + id, name);
+           $('#chat-' + id).append(
+               "<div class='chat-messages'></div>" +
+               "<input type='text' class='chat-input'/>");
+           $('#chat-' + id).data('jid', jid);
+       }
+       $('#tabs').tabs('select', '#chat-' + id);
+
+       $('#chat-' + id + ' input').focus();
    });
 });