<public:component>
<public:attach event="onpropertychange" onevent="fixPNG()" />

<script type="text/javascript">

var blankPixel = vp.ui.imageUrl('/vp/images/s.gif');

/**
 * This runs in IE after an image loads, or when the background or source is changed.
 * In IE5.5 and IE6, it fixes the PNG display by using the IE AlphaImageLoader filter
 */
var fixPNG = function()
{
    // Quit if this is not IE5.5 or IE6
    if (!(/MSIE (5\.5|6\.)/).test(navigator.userAgent))
    {
        return;
    }

    // Quit if there was an event that did not affect background/src
    if (event && !(/(background|src)/).test(event.propertyName))
    {
        return;
    }
    
    //If the element has been removed from the DOM, short circuit
    if (!this.tagName)
    {
        return;
    }

    if (tagName == 'IMG' || tagName == 'INPUT')
    {
        // match .png and any subsequent query string (?...)
        //HACK: Support for dynamic images, though this assumes that all dynamic images with the "pngfix" class are PNGs. 
        //Probably not a bad assumption, but we should beware.
        if ((/\.png(\?.*)*$/i).test(this.src) || (/\.caspx(\?.*)*$/i).test(this.src) || (/\.aspx(\?.*)*$/i).test(this.src))
        {
            // if this is auto-sized, force size to current size
            if (this.currentStyle.width == 'auto' &&
                this.currentStyle.height == 'auto')
            {
                //if this has not yet been rendered, wait until it has.
                if (this.offsetWidth === 0)
                {
                    setTimeout(fixPNG, 100);
                    return;
                }

                this.style.width = this.offsetWidth + 'px';
                this.style.height = this.offsetHeight + 'px';
            }
            // apply!
            applyOrRemoveFilter(this.src, 'scale'); // load filter laid over IMG
            this.src = blankPixel;                  // set existing source to blank pixel
        }
        else if (this.src.indexOf(blankPixel) < 0)
        {
            applyOrRemoveFilter(); // disable filter if new source has changed
        }
    }
    else
    {
        var backgroundImg = currentStyle.backgroundImage || style.backgroundImage;
        // match .png and any subsequent query string (?...) inside "url()" tag
        if (backgroundImg &&
            backgroundImg != 'none' &&
            backgroundImg.match(/^url[("']+(.*\.png)(\?.*)*[)"']+$/i))
        {
            var s = RegExp.$1; // get path backref from CSS
            // if this is auto-sized, force size to current size
            if (this.currentStyle.width == 'auto' && this.currentStyle.height == 'auto')
            {
                this.style.width = this.offsetWidth + 'px';
                this.style.height = this.offsetHeight + 'px';
            }
            // apply!
            applyOrRemoveFilter(s, 'crop');      // load filter cropped into DIV
            this.style.backgroundImage = 'none'; // remove existing background

            // Make sure links within this DIV still work
            for (var n = 0; n < this.childNodes.length; n++)
            {
                if (this.childNodes[n].style)
                {
                    this.childNodes[n].style.position = 'relative';
                }
            }
        }
        else
        {
            applyOrRemoveFilter(); // disable filter
        }
    }
};

var ALPHA_FILTER_NAME = 'DXImageTransform.Microsoft.AlphaImageLoader';

/**
 * This actually applies or removes the filter
 */
var applyOrRemoveFilter = function(source, mode)
{
    var me = this;

    if (!source)
    {
        return;
    }

    //Decode before re-encoding to ensure that there is no double encoding.
    var sUrl = urlEncode(decodeURIComponent(source));

    //AlphaImageLoader stupidly decodes URLs. Double encode to ensure they stay encoded.
    var sUrlDoubleEncoded = source.replace(/\%/gi, "%25");

    //Ensure the image is preloaded to avoid AlphaImageLoader deadlocks
    //http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html
    var oImg = document.createElement("IMG");

    oImg.onload = function()
    {
        try
        {
            if (!filters)
            {
                return;
            }
        }
        catch (ex)
        {
            return;
        }

        if (filters[ALPHA_FILTER_NAME])
        {
            if (source)
            {
                filters[ALPHA_FILTER_NAME].enabled = true;
                filters[ALPHA_FILTER_NAME].src = sUrlDoubleEncoded;
                filters[ALPHA_FILTER_NAME].sizingMethod = mode;
            }
            else
            {
                filters[ALPHA_FILTER_NAME].enabled = false;
            }
        }
        else if (source)
        {
            me.style.filter = "progid:" + ALPHA_FILTER_NAME + "(src='" + sUrlDoubleEncoded + "',sizingMethod='" + mode + "')";
        }
    };

    oImg.src = sUrl;
};

//Handles urlEncoding quirks of the AlphaImageLoader
var urlEncode = function(sText) 
{
    var sOut = encodeURI(sText);
    sOut = sOut.replace(/\(/gi, "%28");
    sOut = sOut.replace(/\)/gi, "%29");
    return sOut.replace(/'/gi, "%27");
};

// Run this script right away when the HTC is loaded
fixPNG();
// The onpropertychange event is used when the background or source is overridden

</script>
</public:component>