news.ycombinator.com.js

// No, this isn't the most elegant, or optimized, or whatever thing in the world, but it was a fun diversion

var tagged_users = localStorage.pro_muppet ? JSON.parse(localStorage.pro_muppet) : {};
var icons = {
  plus: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFq6urAAAASyFoYQAAAAJ0Uk5T/wDltzBKAAAAH0lEQVR42mJgRAMM5AswMJAmwAAFuAXIMJRCvwAEGAB6MADlfRTQuAAAAABJRU5ErkJggg==",
  minus: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFq6urAAAASyFoYQAAAAJ0Uk5T/wDltzBKAAAAGUlEQVR42mJgRAMM9BNggALcAvR3GECAAQCAkADx2Yt6pwAAAABJRU5ErkJggg==",
  pluswhite: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAJ0Uk5T/wDltzBKAAAAH0lEQVR42mJgRAMM5AswMJAmwAAFuAXIMJRCvwAEGAB6MADlfRTQuAAAAABJRU5ErkJggg==",
  minuswhite: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAJ0Uk5T/wDltzBKAAAAGUlEQVR42mJgRAMM9BNggALcAvR3GECAAQCAkADx2Yt6pwAAAABJRU5ErkJggg==",
}
var css = [
"<style>",
  ".muppet, .pro {",
    "display: block;",
    "float: left;",
    "width: 16px;",
    "height: 16px;",
    "vertical-align: middle;",
    "background-color: #fefefe;",
    "margin: 0 2px;",
    "-webkit-border-radius: 3px;",
    "-moz-border-radius: 3px;",
    "border-radius: 3px;",
  "}",
  ".pro {",
    "background-image: url(data:image/png;base64," + icons.plus + ");",
  "}",
  ".muppet {",
    "background-image: url(data:image/png;base64," + icons.minus + ");",
  "}",
  ".pro:hover, .pro.picked {",
    "background-color: rgb(180, 217, 180);",
    "background-image: url(data:image/png;base64," + icons.pluswhite + ");",
  "}",
  ".muppet:hover, .muppet.picked {",
    "background-color: rgb(217, 180, 180);",
    "background-image: url(data:image/png;base64," + icons.minuswhite + ");",
  "}",
  ".highlight {",
    "background-color: rgb(240, 222, 169);",
  "}",
"</style>"].join('\n');

$('head').append(css);

function toggleComment(el) {
  $(el).closest('div').siblings().toggle();
}

function toggleHighlightComment(el) {
  $(el).closest('td').toggleClass('highlight');
}

function updateDB() {
  localStorage.pro_muppet = JSON.stringify(tagged_users);
}

function toggleStatus(name, which) {
  var current_status = tagged_users[name];
  var el_name = name + "_" + which;

  if (current_status != which && current_status != undefined) {
    toggleStatus(name, current_status);
    current_status = tagged_users[name];
  }

  $('span').filter(function() { return $(this).attr('name') == el_name }).each(function() {
    if ( which == 'pro' ) {
      toggleHighlightComment(this);
    } else {
      toggleComment(this);
    }
    $(this).toggleClass('picked');
  });

  if ( current_status == undefined ) {
    tagged_users[name] = which;
  } else {
    tagged_users[name] = undefined;
  }
  
  updateDB();
}

$('span.comhead:not(:first)').each(function() {
  var pro_class = "pro";
  var muppet_class = "muppet";
  var name = $(this).find("a:first").text();
  var category = tagged_users[name];

  switch (category) {
    case undefined:
      break;
    case "pro":
      pro_class = "pro picked";
      toggleHighlightComment(this);
      break;
    case "muppet":
      muppet_class = "muppet picked";
      toggleComment(this);
      break;
  }
  $(this)
    .prepend('<span name="'+ name + '_pro" class="' + pro_class + '">&nbsp;</span><span name="' + name + '_muppet" class="' + muppet_class + '">&nbsp;</span>')
    .delegate('span', 'click', function() {
      var name_attr = $(this).attr('name'); 
      var name = name_attr.split("_")[0];
      var request = name_attr.split("_")[1];
      toggleStatus(name, request);
    });
});