Fargrond Experience Bar - Dynamic Color

   //==UserScript==+------------------------------------------------------------------------+
   //           _  |          _  __                                                         |
   //          | | |_  _ _  _| |/ /                                                         |
   //  @author:| |_| || | || | ' <                                                          |
   //          |___|\_, |\_, |_|\_\                                                         |
   //              ||_ / |__/       <LyyK@protonmail.ch>                                    |
   //--------------+------------------------------------------------------------------------+
   //  @name       |    Fargrond Experience Bar - Dynamic Color                             |
   //  @version    |    0.1                                                                 |
   //  @namespace  |    http://tampermonkey.net/                                            |
   //  @description|    A simple script that changes the blue color of the experience       |
   //              |    bar to a red-to-green color dynamically based on your current       |
   //              |    experience percentage and initialized parameters.                   |
   //--------------+------------------------------------------------------------------------+
   //  @match           https://fargrond.se/*
   //  @grant           GM_xmlhttpRequest
   //  @require         http://code.jquery.com/jquery-1.12.4.min.js
   //  @require         https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
   //==/UserScript==

(function() {
    'use strict';

    var rgb_container = {
        "start": {
            "r": 250,
            "g": 0,
            "b": 0
        },"mult": {
            "r": -15.625,
            "g": 31.25,
            "b": 0
        },"limit": {
            "r": 16,
            "g": 8,
            "b": 0
        }
    };

    waitForKeyElements("div.experience-progress", rainbowify);

    function rainbowify(XPBarNL) {
    /*=========================================================================
    | Function rainbowify
    |
    |   Purpose: Callback for the waitForKeyElements() utility function that
    |       detects and handles AJAXed content. Called when an element
    |       matching div.experience-progress loads content by GET or POST.
    |       Uses RGB CSS values, pre-determined multipliers, and the
    |       Object.style.width to generate the Object.style.backgroundColor
    |       for the given Object.
    |
    |   Pre-condition: Object.style.backgroundColor of div.experience-progress
    |       is #6c9ad2.
    |
    |   Post-condition: Object.style.backgroundColor of div.experience-progress
    |       is a rgb in the range [rgb(0,250,0), rgb(250,0,0)].
    |
    |   Parameters:
    |       XPBarNL         -- NodeList of all div.experience-progress
    |
    |   Returns:
    |       void
    \*========================================================================*/
        $.each(XPBarNL, function(index, XPBarN) {
            var XPPercentage = parseFloat(XPBarN.style.width);
            var RGB_int = [
                Math.round( rgb_container.start.r + (rgb_container.mult.r * XPPercentage) ),
                Math.round( rgb_container.start.g + (rgb_container.mult.g * XPPercentage) ),
                Math.round( rgb_container.start.b )
            ];
            var CSSRGB_int = "rgb(" + [RGB_int].join(',') + ')';
            document.querySelectorAll("div.experience-progress")[0].style.backgroundColor = CSSRGB_int;
        });
    }

    function waitForKeyElements( selectorTxt, actionFunction, bWaitOnce, iframeSelector ) {
    /*=========================================================================
    | Function waitForKeyElements
    |
    |   Purpose: Utility function that detects and handles AJAXed content.
    |
    |   Parameters:
    |       selectorTxt     -- Required: The jQuery selector string that specifies the desired element(s).
    |       actionFunction  -- Required: The code to run when elements are found. It is passed a jNode to the matched element.
    |       bWaitOnce       -- Optional: If false, will continue to scan for new elements even after the first match is found.
    |       iframeSelector  -- Optional: If set, identifies the iframe to search.
    |
    |   Returns:
    |       void
    \*========================================================================*/
        var targetNodes, btargetsFound;

        if(typeof iframeSelector == "undefined")
            targetNodes = $(selectorTxt);
        else
            targetNodes = $(iframeSelector).contents().find (selectorTxt);

        if (targetNodes && targetNodes.length > 0) {
            //Found target node(s). Go through each and act if they are new.
            btargetsFound = true;

            targetNodes.each(function() {
                var jThis        = $(this);
                var alreadyFound = jThis.data('alreadyFound') || false;

                if(! alreadyFound ) {
                    //--- Call the payload function.
                    var cancelFound = actionFunction(jThis);
                    if(cancelFound)
                        btargetsFound = false;
                    else
                        jThis.data('alreadyFound', true);
                }
            });
        } else {
            btargetsFound = false;
        }

        //--- Get the timer-control variable for this selector.
        var controlObj  = waitForKeyElements.controlObj || {};
        var controlKey  = selectorTxt.replace(/[^\w]/g, "_");
        var timeControl = controlObj[controlKey];

        //--- Now set or clear the timer as appropriate.
        if(btargetsFound && bWaitOnce && timeControl) {
            //--- The only condition where we need to clear the timer.
            clearInterval(timeControl);
            delete controlObj[controlKey];
        } else {
            //--- Set a timer, if needed.
            if(! timeControl ) {
                timeControl = setInterval(function() {
                    waitForKeyElements(
                        selectorTxt,
                        actionFunction,
                        bWaitOnce,
                        iframeSelector
                    );
                },300);
                controlObj[controlKey] = timeControl;
            }
        }
        waitForKeyElements.controlObj = controlObj;
    }
})();