Color Tags Script

Question

This script allows you to colour tags for whatever reason you may have, i wrote it for fun after seeing a certain question on meta. The script adds a subsection called Color Mapping in the Favorite Tags section which allows you to adjust the colours.

Note that currently this script is dependent on Greasemonkey functions to store the color mapping, if you want to fix that you are very welcome to do so, just add an answer or edit this directly (if you don't break anything).

The mapping string is a semi-colon separated list of mappings, each mapping is a comma-separated tags list separated from a colour with a colon. You can use any CSS compliant colour you want, to fine tune it use hex codes like #AAFFAA. The mappings are currently saved per-domain.

Adjust includes as needed:

// ==UserScript==
// @name           Color Tags Script
// @namespace      stackoverflow
// @include        *stackoverflow.com*
// ==/UserScript==

(function ()
{
    var cancelWaiting = false;
    jq_wait();

    var colorMappingKeyName = document.domain + "/Tags.ColorMapping";

    function jq_wait()
    {
        if (typeof unsafeWindow.jQuery == 'undefined')
        {
            window.setTimeout(jq_wait, 100);
        } else
        {
            $ = unsafeWindow.jQuery;
            window.setTimeout(function () { cancelWaiting = true; }, 5000);
            $(document).ready(setup);
        }
    }

    function setup()
    {
        //Workaround ( http://wiki.greasespot.net/Greasemonkey_access_violation )
        setTimeout(function ()
        {
            var mapping = GM_getValue(colorMappingKeyName);
            addMappingEditor(mapping);
            colorize(mapping);
        }, 0);
    }

    function addMappingEditor(/*string*/mapping)
    {
        var jTagsSection = $("#interesting-tags");
        if (jTagsSection.length == 0) return;
        jTagsSection.append($("<h4>Color Mapping</h4>"));
        var jtb = $('<input type="text" autocomplete="off"/>');
        if (typeof mapping != 'undefined')
        {
            jtb.attr("value", mapping);
        }
        jtb.change(function ()
        {
            var mapping = this.value;
            setTimeout(function ()
            {
                GM_setValue(colorMappingKeyName, mapping);
            }, 0);
            colorize(mapping);
        });
        jTagsSection.append(jtb);
    }

    function colorize(/*string*/mapping)
    {
        if (typeof mapping == 'undefined') return;

        var mappings = mapping.split(";");
        var jtags = $(".post-tag");
        jtags.each(function (ti, te) { $(te).css("background-color", ""); });
        $.each(mappings, function (mi, me)
        {
            var tagAndColor = me.split(":");
            var tags = tagAndColor[0].split(",");
            var color = tagAndColor[1];
            jtags.each(function (ti, te)
            {
                te = $(te);
                if ($.inArray(te.html(), tags) != -1)
                    te.css("background-color", color);
            });
        });
    }
})();