Create models, views and collections for the chat boxes.

chat.js

@@ -190,14 +190,73 @@ var xmppchat = (function (jarnxmpp, $, console) {
 
 
 xmppchat.ChatBox = Backbone.Model.extend({
+
+    hash: function (str) {
+        var shaobj = new jsSHA(str);
+        return shaobj.getHash("HEX");
+    },
+
+    initialize: function () {
+        this.set({
+            'user_id' : Strophe.getNodeFromJid(this.get('jid')),
+            'chat_id' : this.hash(this.get('jid'))
+        });
+    }
+
+});
+
+xmppchat.ChatBoxView = Backbone.View.extend({
+
+    initialize: function (){
+        this.el = this.make('div', {'class': 'chatbox'});
+        $('body').append($(this.el).hide());
+    },
+
+    template:   _.template('<div class="chat-head chat-head-chatbox">' +
+                    '<div class="chat-title"> <%= user_id %> </div>' +
+                    '<a href="javascript:void(0)" class="chatbox-button close-chatbox-button">X</a>' +
+                    '<br clear="all"/>' +
+                '</div>' +
+                '<div class="chat-content"></div>' + 
+                '<form class="sendXMPPMessage" action="" method="post">' +
+                '<textarea ' +
+                    'type="text" ' +
+                    'class="chat-textarea" ' +
+                    'placeholder="Personal message"/>'),
+
+    render: function () {
+        $(this.el).attr('id', this.model.get('chat_id'));
+        $(this.el).html(this.template(this.model.toJSON()));
+        return this;
+    },
+
+    show: function () {
+        $(this.el).show('fast');
+    }
 });
 
 xmppchat.ChatBoxes = Backbone.Collection.extend({
 });
 
-xmppchat.ChatBoxView = Backbone.View.extend({
+xmppchat.ChatBoxesView = Backbone.View.extend({
+
+    positionNewChat: function () {
+        // TODO:
+    },
+
+    initialize: function (){
+        this.options.model.on("add", function (item, x, y) {
+            var view = new xmppchat.ChatBoxView({
+                model: item
+            });
+            view.render();
+            this.positionNewChat();
+            view.show(); 
+        }, this);
+    }
 });
 
+
 xmppchat.RosterItem = Backbone.Model.extend({
     /*
      *  RosterItem: {
@@ -220,14 +279,14 @@ xmppchat.RosterItem = Backbone.Model.extend({
 xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
     var ob = _.clone(stropheRoster),
         Collection = Backbone.Collection.extend({
-        model: xmppchat.RosterItem
-    });
-    var collection = new Collection();
-    _.extend(ob, collection);
-    _.extend(ob, Backbone.Events);
-    stropheRoster._connection = xmppchat.connection;
+            model: xmppchat.RosterItem,
+            stropheRoster: stropheRoster,
 
-    ob.comparator = function (rosteritem) {
+            initialize: function () {
+                this.stropheRoster._connection = xmppchat.connection;
+            },
+
+            comparator : function (rosteritem) {
                 var status = rosteritem.get('status'),
                     rank = 4;
                 switch(status) {
@@ -248,28 +307,28 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
                         break;
                 }
                 return rank;
-    };
+            },
 
-    ob.isSelf = function (jid) {
+            isSelf: function (jid) {
                 return (Strophe.getBareJidFromJid(jid) === Strophe.getBareJidFromJid(xmppchat.connection.jid));
-    };
+            },
 
-    ob.getRoster = function () {
+            getRoster: function () {
                 return stropheRoster.get();
-    };
+            },
 
-    ob.getItem = function (id) {
+            getItem: function (id) {
                 return Backbone.Collection.prototype.get.call(this, id);
-    };
+            },
 
-    ob.addRosterItem = function (item) {
+            addRosterItem: function (item) {
                 var user_id = Strophe.getNodeFromJid(item.jid),
                     model = new xmppchat.RosterItem(item.jid, item.subscription);
-        ob.add(model);
-    };
+                this.add(model);
+            },
                 
-    ob.addResource = function (bare_jid, resource) {
-        var item = ob.getItem(bare_jid);
+            addResource: function (bare_jid, resource) {
+                var item = this.getItem(bare_jid);
                 if (item) {
                     if (_.indexOf(item.resources, resource) == -1) {
                         item.resources.push(resource);
@@ -277,10 +336,10 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
                 } else  {
                     item.resources = [resource];
                 }
-    };
+            },
 
-    ob.removeResource = function (bare_jid, resource) {
-        var item = ob.getItem(bare_jid);
+            removeResource: function (bare_jid, resource) {
+                var item = this.getItem(bare_jid);
                 if (item) {
                     var idx = _.indexOf(item.resources, resource);
                     if (idx !== -1) {
@@ -289,21 +348,26 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
                     }
                 }
                 return 0;
-    };
+            },
 
-    ob.clearResources = function (bare_jid) {
-        var item = ob.getItem(bare_jid);
+            clearResources: function (bare_jid) {
+                var item = this.getItem(bare_jid);
                 if (item) {
                     item.resources = [];
                 }
-    };
+            },
 
-    ob.getTotalResources = function (bare_jid) {
-        var item = ob.getItem(bare_jid);
+            getTotalResources: function (bare_jid) {
+                var item = this.getItem(bare_jid);
                 if (item) {
                     return _.size(item.resources);
                 }
-    };
+            }
+        });
+
+    var collection = new Collection();
+    _.extend(ob, collection);
+    _.extend(ob, Backbone.Events);
 
     ob.updateHandler = function (items) {
         var model;
@@ -366,7 +430,6 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
         }
         return true;
     };
-
     return ob;
 });
 
@@ -375,11 +438,19 @@ 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();
-            xmppchat.UI.getChatbox($(this).attr('data-recipient'));
+            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) {
@@ -461,5 +532,11 @@ $(document).ready(function () {
         xmppchat.Roster.registerCallback(xmppchat.Roster.updateHandler);
         xmppchat.Roster.getRoster();
         xmppchat.Presence.sendPresence();
+
+        xmppchat.chatboxes = new xmppchat.ChatBoxes();
+        
+        xmppchat.chatboxesview = new xmppchat.ChatBoxesView({
+            'model': xmppchat.chatboxes
+        });
     });
 });