Show popup with breakdown of usercount on hover

www/assets/js/ui.js

@@ -68,6 +68,38 @@ $("#logout").click(function() {
 });
 
 /* chatbox */
+
+$("#usercountwrap").mouseenter(function (ev) {
+    var breakdown = calcUserBreakdown();
+    // re-using profile-box class for convenience
+    var popup = $("<div/>")
+        .addClass("profile-box")
+        .css("top", (ev.pageY + 5) + "px")
+        .css("left", (ev.pageX) + "px")
+        .appendTo($("#usercountwrap"));
+
+    var contents = "";
+    for(var key in breakdown) {
+        contents += "<strong>" + key + ":&nbsp;</strong>" + breakdown[key];
+        contents += "<br>"
+    }
+
+    popup.html(contents);
+});
+
+$("#usercountwrap").mousemove(function (ev) {
+    var popup = $("#usercountwrap").find(".profile-box");
+    if(popup.length == 0)
+        return;
+
+    popup.css("top", (ev.pageY + 5) + "px");
+    popup.css("left", (ev.pageX) + "px");
+});
+
+$("#usercountwrap").mouseleave(function () {
+    $("#usercountwrap").find(".profile-box").remove();
+});
+
 $("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
 $("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; });
 

www/assets/js/util.js

@@ -243,6 +243,35 @@ function addUserDropdown(entry, data) {
     });
 }
 
+function calcUserBreakdown() {
+    var breakdown = {
+        "Site Admins": 0,
+        "Channel Admins": 0,
+        "Moderators": 0,
+        "Regular Users": 0,
+        "Guests": 0,
+        "AFK": 0
+    };
+    $("#userlist .userlist_item").each(function (index, item) {
+        var data = $(item).data("dropdown-info");
+        if(data.rank >= 255)
+            breakdown["Site Admins"]++;
+        else if(data.rank >= 3)
+            breakdown["Channel Admins"]++;
+        else if(data.rank == 2)
+            breakdown["Moderators"]++;
+        else if(data.rank >= 1)
+            breakdown["Regular Users"]++;
+        else
+            breakdown["Guests"]++;
+
+        if($(item).find(".icon-time").length > 0)
+            breakdown["AFK"]++;
+    });
+    
+    return breakdown;
+}
+
 /* queue stuff */
 
 function scrollQueue() {