From af5301d2e7669a0cefd1edd7836d102f0a9efd48 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sun, 1 Jul 2012 21:12:51 +0200
Subject: [PATCH] Add a nicer custom select box for choosing one's status

---
 chat.js   |  6 +++++-
 chatui.js | 42 ++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/chat.js b/chat.js
index 2f263a7e4..aa8a822d3 100644
--- a/chat.js
+++ b/chat.js
@@ -203,13 +203,17 @@ var xmppchat = (function (jarnxmpp, $, console) {
         });
     };
 
+    ob.Presence.getOwnStatus = function () {
+        return xmppchat.Storage.get(xmppchat.username+'-xmpp-status');
+    };
+
     ob.Presence.onlineCount = function () {
         return xmppchat.ChatPartners.getTotal();
     };
 
     ob.Presence.sendPresence = function (type) {
         if (type === undefined) {
-            type = xmppchat.Storage.get(xmppchat.username+'-xmpp-status') || 'online';
+            type = this.getOwnStatus() || 'online';
         }
         xmppchat.connection.send($pres({'type':type}));
     };
diff --git a/chatui.js b/chatui.js
index f501b6c05..ad7f23c86 100644
--- a/chatui.js
+++ b/chatui.js
@@ -530,11 +530,49 @@ $(document).ready(function () {
     }); 
 
     $('ul.tabs').tabs('div.panes > div');
-    $('select#select-xmpp-status').bind('change', function (ev) {
+
+    var select = $('select#select-xmpp-status'),
+        selected = select.find('option[selected]'),
+        chat_status = selected.val() || xmppchat.Presence.getOwnStatus() || 'online';
+        options = $('option', select);
+
+        // create <dl> and <dt> with selected value inside it
+        select.parent().append('<dl id="target" class="dropdown"></dl>');
+
+        $("#target").append('<dt id="fancy-xmpp-status-select"><a href="#" class="'+chat_status+'">I am '+chat_status + 
+            '<span class="value">' + chat_status + '</span></a></dt>');
+
+        $("#target").append('<dd><ul></ul></dd>');
+        // iterate through all the <option> elements and create UL
+        options.each(function(){
+            $("#target dd ul").append('<li><a href="#" class="'+$(this).val()+'">' + 
+                $(this).text() + '<span class="value">' + 
+                $(this).val() + '</span></a></li>').hide();
+        });
+        select.remove();
+
+    $('#fancy-xmpp-status-select').click(function (ev) {
+        ev.preventDefault();
+        $(this).siblings('dd').find('ul').toggle('fast');
+    });
+
+    $(".dropdown dd ul li a").click(function() {
         var jid = xmppchat.connection.jid,
-            value = ev.target.value;
+            value = $(this).find('span').text();
+
+        $(".dropdown dt a").html('I am ' + value);
+        $(".dropdown dt a").attr('class', value);
+        $(".dropdown dd ul").hide();
+        $("#source").val($(this).find("span.value").html());
 
         xmppchat.Presence.sendPresence(value);
         xmppchat.Storage.set(xmppchat.username+'-xmpp-status', value);
     });
+
+    $('select#select-xmpp-status').bind('change', function (ev) {
+        var jid = xmppchat.connection.jid,
+            value = ev.target.value;
+        xmppchat.Presence.sendPresence(value);
+        xmppchat.Storage.set(xmppchat.username+'-xmpp-status', value);
+    });
 });