Updated the chatbox views to position and order boxes.

chat.js

@@ -207,8 +207,22 @@ xmppchat.ChatBox = Backbone.Model.extend({
 
 xmppchat.ChatBoxView = Backbone.View.extend({
 
+    tagName: 'div',
+    className: 'chatbox',
+
+    events: {
+        'click .close-chatbox-button': 'closeChatBox'
+    },
+
+    closeChatBox: function () {
+        var that = this;
+        $('#'+this.model.get('chat_id')).hide('fast', function () {
+            // TODO: that.removeChatFromCookie(jid);
+            xmppchat.chatboxesview.reorderChatBoxes();
+        });
+    },
+
     initialize: function (){
-        this.el = this.make('div', {'class': 'chatbox'});
         $('body').append($(this.el).hide());
     },
 
@@ -230,8 +244,21 @@ xmppchat.ChatBoxView = Backbone.View.extend({
         return this;
     },
 
-    show: function () {
-        $(this.el).show('fast');
+    isVisible: function () {
+        return $(this.el).is(':visible');
+    },
+
+    focus: function () {
+        $(this.el).find('.chat-textarea').focus();
+        return this;
+    },
+
+    show: function (callback) {
+        var that = this;
+        $(this.el).show('fast', function () {
+            that.focus();
+        });
+        return this;
     }
 });
 
@@ -240,42 +267,128 @@ xmppchat.ChatBoxes = Backbone.Collection.extend({
 
 xmppchat.ChatBoxesView = Backbone.View.extend({
     
-    positionNewChat: function () {
-        // TODO:
+    chatbox_width: 205,
+
+    positionNewChatBox: function (view) {
+        var open_chats = 0,
+            offset;
+        if ($('#online-users-container').is(':visible')) {
+            open_chats++;
+        }
+        for (var i=0; i<this.model.models.length; i++) {
+            if ($("#"+this.model.models[i].get('chat_id')).is(':visible')) {
+                open_chats++;
+            }
+        }
+        offset = (open_chats)*(this.chatbox_width+7)+15;
+        $(view.el).css({'right': (offset+'px')});
     },
 
-    initialize: function (){
+    reorderChatBoxes: function () {
+        var index = 0,
+            offset,
+            $chat;
+
+        if ($('#online-users-container').is(':visible')) {
+            index = 1;
+        }
+        for (var i=0; i<this.model.models.length; i++) {
+            $chat = $("#"+this.model.models[i].get('chat_id'));
+            if ($chat.is(':visible')) {
+                if (index === 0) {
+                    $chat.animate({'right': '15px'});
+                } 
+                else {
+                    offset = (index)*(this.chatbox_width+7)+15;
+                    $chat.animate({'right': offset +'px'});
+                }
+                index++;
+            }
+        }
+    },
+
+    initialize: function () {
+        this.views = {};
+
         this.options.model.on("add", function (item, x, y) {
             var view = new xmppchat.ChatBoxView({
                 model: item
             });
-            view.render();
-            this.positionNewChat();
-            view.show(); 
+            this.positionNewChatBox(view.render());
+            this.views[item.get('jid')] = view.show();
         }, this);
     }
 });
 
 
 xmppchat.RosterItem = Backbone.Model.extend({
-    /*
-     *  RosterItem: {
-     *      'status': String, 
-     *      'subscription': String, 
-     *      'resources': Array,
-     *      'fullname': String 
-     *   }
-     */
+
     initialize: function (jid, subscription) {
-        this.id = jid;
-        this.subscription = subscription;
+        // FIXME: the fullname is set to user_id for now...
+        var user_id = Strophe.getNodeFromJid(jid);
 
-        this.fullname = '';
-        this.resources = [];
-        this.status = 'offline';
+        this.set({
+            'id': jid,
+            'jid': jid,
+            'bare_jid': Strophe.getBareJidFromJid(jid),
+            'user_id': user_id,
+            'subscription': subscription,
+            'fullname': user_id, 
+            'resources': [],
+            'status': 'offline'
+        }, {'silent': true});
     }
 });
 
+
+xmppchat.RosterItemView = Backbone.View.extend({
+
+    tagName: 'li',
+    events: {
+        'click': 'toggleChatBox'
+    },
+
+    toggleChatBox: function (e) {
+        e.preventDefault();
+        var jid = this.model.get('jid');
+        if (!xmppchat.chatboxes.get(jid)) {
+            chatbox = new xmppchat.ChatBox({'id': jid, 'jid': jid});
+            xmppchat.chatboxes.add(chatbox);
+        } else {
+            var view = xmppchat.chatboxesview.views[jid];
+            if (view) {
+                if (view.isVisible()) {
+                    view.focus();
+                } else {
+                    view.show();
+                    xmppchat.chatboxesview.reorderChatBoxes();
+                }
+            }
+        }
+    },
+
+    initialize: function () {
+        var that = this;
+        this.options.model.on('change', function (item, changed) {
+            if (_.has(changed.changes, 'status')) {
+                $(this.el).attr('class', item.changed.status);
+            }
+        }, this);
+    },
+
+    template:   _.template(
+                    '<a title="Click to chat with this contact"><%= fullname %></a>' +
+                    '<a title="Click to remove this contact" class="remove-xmpp-contact" href="#"></a>'),
+
+    render: function () {
+        var item = this.model;
+        $(this.el).addClass(item.get('status')).attr('id', 'online-users-'+item.get('user_id'));
+        $(this.el).html(this.template(item.toJSON()));
+        return this;
+    }
+});
+
+
 xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
     var ob = _.clone(stropheRoster),
         Collection = Backbone.Collection.extend({
@@ -321,30 +434,36 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
                 return Backbone.Collection.prototype.get.call(this, id);
             },
 
-            addRosterItem: function (item) {
-                var user_id = Strophe.getNodeFromJid(item.jid),
-                    model = new xmppchat.RosterItem(item.jid, item.subscription);
+            addRosterItem: function (jid, subscription) {
+                var model = new xmppchat.RosterItem(jid, subscription);
                 this.add(model);
             },
                 
             addResource: function (bare_jid, resource) {
                 var item = this.getItem(bare_jid);
+                    resources;
                 if (item) {
-                    if (_.indexOf(item.resources, resource) == -1) {
-                        item.resources.push(resource);
+                    resources = item.get('resources');
+                    if (_.indexOf(resources, resource) == -1) {
+                        resources.push(resource);
+                        item.set({'resources': resources});
                     }
                 } else  {
-                    item.resources = [resource];
+                    item.set({'resources': [resource]});
                 }
             },
 
             removeResource: function (bare_jid, resource) {
-                var item = this.getItem(bare_jid);
+                var item = this.getItem(bare_jid),
+                    resources,
+                    idx;
                 if (item) {
-                    var idx = _.indexOf(item.resources, resource);
+                    resources = item.get('resources');
+                    idx = _.indexOf(resources, resource);
                     if (idx !== -1) {
-                        item.resources.splice(idx, 1);
-                        return item.resources.length;
+                        resources.splice(idx, 1);
+                        item.set({'resources': resources});
+                        return resources.length;
                     }
                 }
                 return 0;
@@ -353,14 +472,14 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
             clearResources: function (bare_jid) {
                 var item = this.getItem(bare_jid);
                 if (item) {
-                    item.resources = [];
+                    item.set({'resources': []});
                 }
             },
 
             getTotalResources: function (bare_jid) {
                 var item = this.getItem(bare_jid);
                 if (item) {
-                    return _.size(item.resources);
+                    return _.size(item.get('resources'));
                 }
             }
         });
@@ -381,7 +500,7 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
                     model = ob.getItem(jid);
                     model.subscription = item.subscription;
                 } else {
-                    ob.addRosterItem(items[i]);
+                    ob.addRosterItem(items[i].jid, items[i].subscription);
                 }
             }
         }
@@ -434,58 +553,15 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
 });
 
 
-xmppchat.RosterItemView = Backbone.View.extend({
-    tagName: 'li',
-
-    initialize: function () {
-        var that = this;
-        this.el = this.make('li');
-
-        $(this.el).bind('click', function (e) {
-            e.preventDefault();
-            var jid = $(this).attr('data-recipient');
-            if (!xmppchat.chatboxes.get(jid)) {
-                var chatbox = new xmppchat.ChatBox({
-                    'id': jid, 
-                    'jid': jid 
-                });
-                xmppchat.chatboxes.add(chatbox);
-            }
-        });
-
-        this.options.model.on('change', function (item, changed) {
-            if (_.has(changed.changes, 'status')) {
-                $(this.el).attr('class', item.changed.status);
-            }
-        }, this);
-    },
-
-    render: function () {
-        var item = this.model,
-            jid = item.id,
-            bare_jid = Strophe.getBareJidFromJid(jid),
-            user_id = Strophe.getNodeFromJid(jid),
-            fullname = (item.fullname) ? item.fullname : user_id;
-        $(this.el).addClass(item.status).attr('id', 'online-users-'+user_id).attr('data-recipient', bare_jid);
-        $(this.el).append($('<a title="Click to chat with this contact"></a>').text(fullname));
-        $(this.el).append($('<a title="Click to remove this contact" href="#"></a>').addClass('remove-xmpp-contact'));
-        return this;
-    }
-});
-
-
-xmppchat.RosterViewClass = (function (roster, _, $, console) {
+xmppchat.RosterView= (function (roster, _, $, console) {
     var View = Backbone.View.extend({
-        tagName: 'ul',
         el: $('#xmpp-contacts'),
         model: roster,
+        rosteritemviews: [],
 
         initialize: function () {
             this.model.on("add", function (item) {
-                var view = new xmppchat.RosterItemView({
-                    model: item
-                });
-                $(this.el).append(view.render().el);
+                $(this.el).append((new xmppchat.RosterItemView({model: item})).render().el);
             }, this);
 
             this.model.on('change', function (item) {
@@ -525,7 +601,7 @@ $(document).ready(function () {
         xmppchat.UI.restoreOpenChats();
 
         xmppchat.Roster = xmppchat.RosterClass(Strophe._connectionPlugins.roster, _, $, console);
-        xmppchat.RosterView = Backbone.View.extend(xmppchat.RosterViewClass(xmppchat.Roster, _, $, console));
+        xmppchat.rosterview = Backbone.View.extend(xmppchat.RosterView(xmppchat.Roster, _, $, console));
 
         xmppchat.connection.addHandler(xmppchat.Roster.presenceHandler, null, 'presence', null);
         

chatui.js

@@ -264,36 +264,6 @@ xmppchat.UI = (function (xmppUI, $, console) {
     };
 
     ob.reorderChats =  function () {
-        var index = 0,
-            chat_id,
-            offset,
-            $chat;
-
-        if ('online-users-container' in helpers.oc(this.chats)) {
-            index = 1;
-            $chat = $("#"+helpers.hash(helpers.oc(this.chats)['online-users-container']));
-            if ($chat.is(':visible')) {
-                $chat.animate({'right': '15px'});
-            }
-        }
-
-        for (var i=0; i < this.chats.length; i++) {
-            chat_id = this.chats[i];
-            if (chat_id === 'online-users-container') {
-                continue;
-            }
-            $chat = $("#"+helpers.hash(this.chats[i]));
-            if ($chat.is(':visible')) {
-                if (index === 0) {
-                    $chat.animate({'right': '15px'});
-                } 
-                else {
-                    offset = (index)*(this.chatbox_width+7)+15;
-                    $chat.animate({'right': offset +'px'});
-                }
-                index++;
-            }
-        }
     };
 
     ob.addChatToCookie = function (jid) {
@@ -548,11 +518,6 @@ $(document).ready(function () {
         xmppchat.UI.keyPressed(ev, this);
     });
 
-    $('a.close-chatbox-button').live('click', function (ev) {
-        var jid = $(ev.target).attr('data-recipient');
-        xmppchat.UI.closeChat(jid);
-    }); 
-
     $('a.close-controlbox-button').live('click', function (ev) {
         xmppchat.UI.closeChat('online-users-container');
     });