3 files changed, 76 insertions, 15 deletions

diff --git a/webclient/basic.html b/webclient/basic.html
index 528fe92..02990fb 100644
--- a/webclient/basic.html
+++ b/webclient/basic.html
@@ -19,7 +19,7 @@
     </div>
     <hr/>
    	<div id='roster'>
-   	<h2>Contacts :</h2>
+   	<h2>Contacts</h2>
    	<ul>
    	</ul>
    	</div>
diff --git a/webclient/lib/basic.js b/webclient/lib/basic.js
index 93ef884..84e6ff4 100644
--- a/webclient/lib/basic.js
+++ b/webclient/lib/basic.js
@@ -33,7 +33,7 @@ function getPresence(contact)
 }
 
 function jid_to_id(jid) {
-    return Strophe.getBareJidFromJid(jid).replace("@", "-").replace(".", "-");
+    return Strophe.getBareJidFromJid(jid).replace(/[@.]/g,'-');
 }
 
 function getJID(contact)
@@ -51,21 +51,17 @@ function insertContact(contact)
         contacts.each(function () {
             var locpres = getPresence($(this));
             var locjid = getJID($(this));
-
             if (presence > locpres)
             {
                 $(this).before(contact);
                 inserted = true;
                 return false;
             }
-            else
+            else if ( (presence == locpres) && (jid < locjid) )
             {
-                if (jid < locjid)
-                {
-                    $(this).before(contact);
-                    inserted = true;
-                    return false;
-                }
+                $(this).before(contact);
+                inserted = true;
+                return false;
             }
         });
 
@@ -76,8 +72,39 @@ function insertContact(contact)
         $('#roster ul').append(contact);
 }
 
+function onPresence(presence)
+{
+    var who = $(presence).attr('from');
+    var type = $(presence).attr('type');
+    if (type !== 'error')
+    {
+        var contact = $('#'+jid_to_id(who));
+        contact.removeClass('online away offline');
+        if (type === 'unavailable')
+        {
+            contact.addClass('offline');
+        }
+        else
+        {
+            var show = $(presence).find('show').text();
+            if (show === '' || show === '')
+            {
+                contact.addClass('online');
+            }
+            else
+            {
+                contact.addClass('away');
+            }
+        }
+        contact.remove();
+        insertContact(contact);
+    }
+    return true;
+}
+
 function onRoster(iq)
 {
+    $('#roster li').remove();
     var elems = iq.getElementsByTagName('query');
     var query = elems[0];
     Strophe.forEachChild(query, 'item', function(item)
@@ -90,6 +117,8 @@ function onRoster(iq)
                         + "<div class='roster-jid'>" + jid + "</div></li>");
         insertContact(contact);
     });
+    connection.addHandler(onPresence,null,'presence', null, null, null, null);
+    connection.send($pres());
     return true;
 }
 
@@ -114,7 +143,6 @@ function onConnect(status)
     {
         log('Strophe is connected.');
         getRoster();
-        connection.send($pres().tree());
     }
 }
 
diff --git a/webclient/style.css b/webclient/style.css
index 202a45d..e568584 100644
--- a/webclient/style.css
+++ b/webclient/style.css
@@ -11,11 +11,12 @@ div
 	padding:0px;	
 }
 
-#contacts
+#roster
 {
 	float:left;
-	width:40%;
+	width:250px;
 	height:100%;
+	font-size:0.8em;
 }
 
 #bottom
@@ -43,10 +44,42 @@ div
 	
 #log
 {
-	height:200px;
+	height:400px;
 	width:100%;
 	overflow:auto;
 	display:none;
 	border-top:1px solid black;
 }
-	
\ No newline at end of file
+
+.roster-contact
+{
+	border-bottom : 1px dotted black;
+	padding: 5px;
+}
+
+.roster-contact:hover
+{
+	background-color: #E5E9EE;
+}
+
+
+.roster-name
+{
+	font-weight:bold;
+}
+
+#roster > ul
+{
+	list-style-type: none;
+	padding: 0px;	
+}
+
+.online
+{
+	background-color: #DBFFDC;
+}
+
+.away
+{
+	background-color: #E3E3E3; 	
+}
\ No newline at end of file