// credit: http://johndyer.name/post/2008/04/23/dynamic-text-replacement-with-javascript-csharp-asp-net.aspx
var dtr = {

    _url: 'dtr/[font]/[size]/-1/-1/[color]/[bcolor]/[text].fx',
    _enableTransparency: true,
    _forceHeight: true,
    _forceWidth: false,

    replace: function(tag, className, font) {
        this.replaceIn(document, tag, className, font);
    },

    replaceIn: function(root, tag, className, font) {
        var elements = this.getElementsByClassName(root, tag, className);
        this.replaceElements(elements, font);
    },

    replaceElements: function(elements, font) {
        //return;

        for (var i = 0; i < elements.length; i++) {
            var el = elements[i];

            // only handle text nodes
            if (el.firstChild.nodeType != 3)
                continue;

            // get attributes of elements                    
            var text = el.firstChild.nodeValue;
            var color = this.getStyle(el, 'color');
            var bcolor = this.getStyle(el, 'backgroundColor');
            var height = this.getStyle(el, 'height');
            var width = this.getStyle(el, 'width');
            var size = this.getStyle(el, 'fontSize');

            if (color.indexOf('rgb') != -1)
                color = this.cssRgb2Hex(color);

            if (bcolor == 'transparent' && !this._enableTransparency)
                bcolor = '';

            if (bcolor.indexOf('rgb') != -1)
                bcolor = this.cssRgb2Hex(bcolor);

            color = color.replace('#', '');
            bcolor = bcolor.replace('#', '');
            size = size.replace('px', '');

            // create image for replacement
            var url = this._url.replace('[text]', text).replace('[font]', font).replace('[bcolor]', bcolor).replace('[color]', color).replace('[size]', size);
            if (this._forceWidth)
                url = url.replace('[width]', width);
            if (this._forceHeight)
                url = url.replace('[height]', height);

            var img = new Image();
            img.target = el;
            img.loadHandler = function() {
                this.target.replaceChild(this, this.target.firstChild);
            };
            img.onload = img.loadHandler;
            img.src = url;
            img.alt = text;

            // test code by passing the event handler
            el.replaceChild(img, el.firstChild);
        }
    },

    // this doesn't always work for font sizes, so we're using it for colors mostly
    getStyle: function(el, prop) {
        if (document.defaultView && document.defaultView.getComputedStyle) {
            return document.defaultView.getComputedStyle(el, null)[prop];
        } else if (el.currentStyle) {
            return el.currentStyle[prop];
        } else {
            return el.style[prop];
        }
    },

    cssRgb2Hex: function(color) {
        var c = color.replace('rgb(', '').replace(')', '').split(',');
        return this.rbg2hex(parseInt(c[0]), parseInt(c[1]), parseInt(c[2]));
    },

    rbg2hex: function(red, green, blue) {
        var r = red.toString(16);
        var g = green.toString(16);
        var b = blue.toString(16);

        var c =
		((r.toString().length == 1) ? '0' : '') + r +
		((g.toString().length == 1) ? '0' : '') + g +
		((b.toString().length == 1) ? '0' : '') + b;

        return c;
    },

    // credit: http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/
    getElementsByClassName: function(oElm, strTagName, strClassName) {
        var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);
        var arrReturnElements = new Array();
        strClassName = strClassName.replace(/\-/g, "\\-");
        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
        var oElement;
        for (var i = 0; i < arrElements.length; i++) {
            oElement = arrElements[i];
            if (oRegExp.test(oElement.className)) {
                arrReturnElements.push(oElement);
            }
        }
        return (arrReturnElements)
    }
};