// ==UserScript==
// @name           hipchat-emoticon-browser
// @namespace      http://magnificent-tears.com
// @include        https://*.hipchat.com/chat*
// @updateURL      https://raw.github.com/rwstauner/hipchat-emoticon-browser/master/hipchat-emoticon-browser.user.js
// @version        6
// ==/UserScript==

(function(){
  /*global $, document, config, emoticons*/

  // HipChat includes jQuery 1.8.3 and we're not shy about using it.

  var eb = {
    "interval": null,
    "id": '_local_emoticon_browser',
  };

  eb.prepare = function(){
    clearInterval(eb.interval);

    var
      // Set z-index between the tab "X" (10) and the change-status text box (100).
      box_style = 'width: 175px; position: absolute; left: 2px; bottom: 40px; background: #eef; z-index: 50;',
      toggle_style = 'height: 1.5em; background: #aab; border-bottom: #778;text-align: center; cursor:pointer;',
      emoticons_style = 'overflow: auto; padding: 5px 0; display: none;',
      toggle = '<div class="_toggle" style="'+ toggle_style +'">Emoticons</div>',
      emoticons_box = '<div class="_emoticons" style="'+ emoticons_style +'"></div>',
      id = eb.id;

    $('#' + id).remove(); // This may or may not already exist.
    $('body').append('<div id="' + id + '" style="'+ box_style +'">'+toggle+emoticons_box+'</div>');

    $('body').on('click', '#'+id+' ._emoticon', function(){
      var input = $('#message_input');
      input.focus();
      input.val(input.val()+' '+$(this).find('span').text());
    });

    $('body').on('click', '#'+id+' ._toggle', function(){
      // Refresh emoticons before opening.
      if( $('#'+id+' ._emoticons').css('display') === 'none' ){
        eb.refresh();
      }
      $('#'+id+' ._emoticons').toggle();
    });
  };

  eb.refresh = function () {
    // HipChat recently changed the structure of their emoticon objects,
    // so I'm using the (a || b) style to hopefully work across any transitions.
    var
      container = $('#'+eb.id+' ._emoticons'),
      emoticon_style = 'outline: 1px dotted #ccc; float: left; height: 35px; text-align: center;cursor:pointer; margin: 2px;',
      sorted_emoticons = (emoticons.emoticons || config.emoticons).sort(function(a,b){ return a.shortcut.localeCompare(b.shortcut); }),
      innerhtml = [];

    $.each(sorted_emoticons, function(i,e){
      var emote = [
        // Put shortcut text in title like the real ones (in case our font is too small).
        '<div class="_emoticon" style="' + emoticon_style + '" title="' + e.shortcut + '">',
        '<img src="' + emoticons.path_prefix + '/' + (e.image || e.file) + '"><br/>',
        // Shrink font so the items aren't too terribly large.
        '<span style="color: #555; font-size: 0.5em;">' + e.shortcut + '</span>',
        '</div>',
      ].join("\n");
      innerhtml.push(emote);
    });

    innerhtml.push('<div style="clear:both;"></div>');
    container.empty();
    container.append(innerhtml.join("\n")).height($('body').height()-80);
  };

  eb.interval = setInterval(function(){
    // Wait for Hipchat to finish loading before trying to get emoticons
    if($('#loading').css('display') === 'none') {
      $(document).ready(function(){
        eb.prepare();
      });
    }
  }, 500);

}());

@@ -290,9 +290,9 @@
     
-6
+7
 %0A// 
@@ -1763,23 +1763,32 @@
 ;%0A%0A  eb.
-refresh
+sorted_emoticons
  = funct
@@ -1790,17 +1790,16 @@
 function
- 
 () %7B%0A   
@@ -1814,16 +1814,11 @@
 hat 
-recently
+has
  cha
@@ -1865,90 +1865,520 @@
 ects
-,%0A    // so I'm using the (a %7C%7C b) style to hopefully work across any transitions.
+ a few times.%0A    var icons = (emoticons.emoticons %7C%7C config.emoticons);%0A%0A    // If it's not an array, assume it's an object and turn it into an array.%0A    if( !icons.sort )%7B%0A      icons = (function(obj)%7B%0A        var k, a = %5B%5D;%0A        for(k in obj)%7B%0A          if( obj.hasOwnProperty(k) )%7B%0A            a.push(obj%5Bk%5D);%0A          %7D%0A        %7D%0A        return a;%0A      %7D(icons));%0A    %7D%0A%0A    return icons.sort(function(a,b)%7B%0A      return a.shortcut.localeCompare(b.shortcut);%0A    %7D);%0A  %7D;%0A%0A  eb.refresh = function () %7B
 %0A   
@@ -2560,144 +2560,8 @@
 ;',%0A
-      sorted_emoticons = (emoticons.emoticons %7C%7C config.emoticons).sort(function(a,b)%7B return a.shortcut.localeCompare(b.shortcut); %7D),%0A
     
@@ -2590,16 +2590,19 @@
  $.each(
+eb.
 sorted_e
@@ -2609,16 +2609,18 @@
 moticons
+()
 , functi

Convert emoticons from object to sorted list