<!-- background-size-polyfill v0.2.0 | (c) 2012-2013 Louis-Rémi Babé | MIT License -->
<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="o.init()" />
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="o.init()" />
<PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="o.handlePropertychange()" />
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="o.restore()" />
<PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="o.handleResize()" />
<PUBLIC:EVENT NAME="onbackgroundupdate" ID="updateEvent" />
<script type="text/javascript">

var o; // and so it is

(function( element, window ) {

    var rsrc = /url\(["']?(.*?)["']?\)/,
        rprespace = /^\s\s*/,
        rpostspace = /\s\s*$/,
        rmidspace = /\s\s*/g,
        rpercent = /%$/,
        positions = {
            top: 0,
            left: 0,
            bottom: 1,
            right: 1,
            center: 0.5
        },
        doc = element.document,
        spacer = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
        wrapperClass = "background-size-polyfill",
        noop = function() {},
        resizeInterval = 100,
        resizeId,
        processSnapshotId,
        updateEventId,
        updateBackgroundCallbackId;

// remove the background-image and emulate it with a wrapped <img/>
    function init() {
        var wrapper = doc.createElement( "div" ),
            img = doc.createElement( "img" ),
            wrapperStyle = wrapper.style,
            elementStyle = element.style,
            elementCurrentStyle = element.currentStyle,
            expando = element.bgsExpando,
            cloneWrapper = element.firstChild;

        if ( expando ) {
            if ( expando.restore ) {
                elementStyle.backgroundImage = expando.restore.backgroundImage;
                elementStyle.position = expando.restore.position;
                elementStyle.zIndex = expando.restore.zIndex;
            }

            if ( cloneWrapper &&
                ( cloneWrapper.nodeName || "" ).toUpperCase() === "DIV" &&
                cloneWrapper.className === wrapperClass) {
                element.removeChild( cloneWrapper );
            }
        }

        setStyles( wrapper );
        wrapper.className = wrapperClass;
        wrapperStyle.top =
            wrapperStyle.right =
                wrapperStyle.bottom =
                    wrapperStyle.left = 0;
        wrapperStyle.position = "fixed"; // test value

        setStyles( img );
        img.alt = "";

        wrapper.appendChild( img );

        element.insertBefore( wrapper, element.firstChild );

        // save useful data for quick access
        element.bgsExpando = expando = {
            wrapper: wrapper,
            img: img,
            // styles to restore on detach
            restore: {
                backgroundImage: elementStyle.backgroundImage,
                position: elementStyle.position,
                zIndex: elementStyle.zIndex
            },
            current: {},       // current snapshot
            next: null,        // next snapshot to process
            processing: false, // whether we are in the middle of processing the next snapshot
            loadImg: null,     // temp img element/object from getImageDimensions
            display: false,    // element's display property
            changed: false,    // whether element's display property has changed
            ignore: false,     // whether to ignore the next property change event
            // whether we can support background-attachment: fixed for this element/browser
            canFixed: element.nodeName.toUpperCase() === "BODY" && wrapper.offsetHeight > 0
        };

        wrapperStyle.position = "absolute";

        // This is the part where we mess with the existing DOM
        // to make sure that the background image is correctly zIndexed
        if ( elementCurrentStyle.zIndex === "auto" ) {
            elementStyle.zIndex = 0;
        }
        if ( elementCurrentStyle.position === "static" ) {
            elementStyle.position = "relative";
        }

        o = {
            init: noop, // allow init() to be called only once
            handlePropertychange: handlePropertychange,
            restore: restore,
            handleResize: handleResize
        };

        handlePropertychange();
    }

    function setStyles( el ) {
        var style = el.style;

        style.position = "absolute";
        style.display = "block";
        style.zIndex = -1;
        style.overflow = "hidden";
        style.visibility = "inherit";
        style.width =
            style.height =
                style.top =
                    style.right =
                        style.bottom =
                            style.left =
                                style.cursor = "auto";
        style.margin =
            style.padding =
                style.border =
                    style.outline =
                        style.minWidth =
                            style.minHeight = 0;
        style.background =
            style.maxWidth =
                style.maxHeight = "none";
        style.fontSize =
            style.lineHeight = "1em";
    }

    function getImageDimensions( expando, src, callback ) {
        var img;

        if ( src ) {
            img = doc.createElement( "img" );
            img.onload = img.onerror = function() {
                var width = this.width,
                    height = this.height;
                if ( window.event.type === "error" ) {
                    width = height = 0;
                }
                expando.loadImg = this.onload = this.onerror = null;
                callback( width, height );
            };
            img.src = src;

        } else {
            img = {
                callbackId: window.setTimeout( function() {
                    expando.loadImg = null;
                    callback( 0, 0 );
                }, 0 )
            };
        }

        expando.loadImg = img;
        img = null;
    }

// this prevents handling propertychange events caused by this script
    function suspendPropertychange( callback ) {
        var fn = o.handlePropertychange;
        o.handlePropertychange = noop;
        callback();
        o.handlePropertychange = fn;
    }

    function refreshDisplay( element, expando ) {
        var display = element.currentStyle.display;

        if ( display !== expando.display ) {
            expando.display = display;
            expando.changed = true;
        }

        return display !== "none";
    }

    function takeSnapshot( element, expando ) {
        var elementStyle = element.style,
            elementCurrentStyle = element.currentStyle,
            expandoRestore = expando.restore,
            size = normalizeCSSValue( elementCurrentStyle["background-size"] ),
            sizeList = size.split( " " ),
            snapshot = {
                innerWidth: element.offsetWidth -
                ( parseFloat( elementCurrentStyle.borderLeftWidth ) || 0 ) -
                ( parseFloat( elementCurrentStyle.borderRightWidth ) || 0 ),
                innerHeight: element.offsetHeight -
                ( parseFloat( elementCurrentStyle.borderTopWidth ) || 0 ) -
                ( parseFloat( elementCurrentStyle.borderBottomWidth ) || 0 ),
                size: size,
                sizeIsKeyword: size === "contain" || size === "cover",
                sizeX: sizeList[0],
                sizeY: sizeList.length > 1 ? sizeList[1] : "auto",
                posX: elementCurrentStyle.backgroundPositionX,
                posY: elementCurrentStyle.backgroundPositionY,
                attachment: elementCurrentStyle.backgroundAttachment,
                src: "",
                imgWidth: 0,
                imgHeight: 0
            };

        // length / percentage size
        if ( !snapshot.sizeIsKeyword ) {
            // negative lengths or percentages are not allowed
            if ( !( ( parseFloat( snapshot.sizeX ) >= 0 || snapshot.sizeX === "auto" ) &&
                ( parseFloat( snapshot.sizeY ) >= 0 || snapshot.sizeY === "auto" ) ) ) {
                snapshot.sizeX = snapshot.sizeY = "auto";
            }

            // percentages are relative to the element, not image, width/height
            if ( rpercent.test( snapshot.sizeX ) ) {
                snapshot.sizeX = ( snapshot.innerWidth * parseFloat( snapshot.sizeX ) / 100 || 0 ) + "px";
            }
            if ( rpercent.test( snapshot.sizeY ) ) {
                snapshot.sizeY = ( snapshot.innerHeight * parseFloat( snapshot.sizeY ) / 100 || 0 ) + "px";
            }
        }

        // keyword / percentage positions
        if ( snapshot.posX in positions || rpercent.test( snapshot.posX ) ) {
            snapshot.posX = positions[ snapshot.posX ] || parseFloat( snapshot.posX ) / 100 || 0;
        }
        if ( snapshot.posY in positions || rpercent.test( snapshot.posY ) ) {
            snapshot.posY = positions[ snapshot.posY ] || parseFloat( snapshot.posY ) / 100 || 0;
        }

        // image
        if ( ( rsrc.exec( elementStyle.backgroundImage ) || [] )[1] === spacer ) {
            // inline style wasn't set, but a class change could change the background image
            // so restore the previous inline style before measuring
            suspendPropertychange( function() {
                elementStyle.backgroundImage = expandoRestore.backgroundImage;
            } );
        } else {
            // inline style was set, so save it in our restore list
            expandoRestore.backgroundImage = elementStyle.backgroundImage;
        }
        snapshot.src = ( rsrc.exec( elementCurrentStyle.backgroundImage ) || [] )[1];
        // set inline background image to the transparent spacer gif
        // this allows JavaScript to later set it to "none"
        suspendPropertychange( function() {
            elementStyle.backgroundImage = "url(" + spacer + ")";
        } );

        return snapshot;
    }

    function normalizeCSSValue( value ) {
        return String( value ).replace( rprespace, "" ).replace( rpostspace, "" ).replace( rmidspace, " " );
    }

    function processSnapshot( element, expando ) {
        var snapshot = expando.next;

        function loop() {
            processSnapshotId = window.setTimeout( function() {
                expando.processing = false;
                processSnapshot( element, expando );
            }, 0 );
        }

        if ( !expando.processing && snapshot ) {
            expando.next = null;
            expando.processing = true;

            getImageDimensions( expando, snapshot.src, function( width, height ) {
                snapshot.imgWidth = width;
                snapshot.imgHeight = height;

                if ( isChanged( expando, snapshot ) ) {
                    updateBackground( element, expando, snapshot, loop );
                } else {
                    loop();
                }
            } );
        }
    }

    function isChanged( expando, snapshot ) {
        var expandoCurrent = expando.current,
            changed = false,
            prop;

        if ( expando.changed ) {
            // display changed
            expando.changed = false;
            changed = true;

        } else {
            for ( prop in snapshot ) {
                if ( snapshot[prop] !== expandoCurrent[prop] ) {
                    changed = true;
                    break;
                }
            }
        }

        return changed;
    }

    function updateBackground( element, expando, snapshot, callback ) {
        var img = expando.img,
            imgStyle = img.style,
            size = snapshot.size,
            innerWidth = snapshot.innerWidth,
            innerHeight = snapshot.innerHeight,
            imgWidth = snapshot.imgWidth,
            imgHeight = snapshot.imgHeight,
            posX = snapshot.posX,
            posY = snapshot.posY,
            posXIsPercent = typeof posX === "number",
            posYIsPercent = typeof posY === "number",
            display = "none",
            left = 0,
            top = 0,
            width = "auto",
            height = "auto",
            px = "px",
            oneHundredPercent = "100%",
            elemRatio,
            imgRatio;

        if ( innerWidth && innerHeight && imgWidth && imgHeight ) {
            expando.wrapper.style.position =
                snapshot.attachment === "fixed" && expando.canFixed ?
                    "fixed" : "absolute";

            img.src = snapshot.src;

            // can we do Math.round() instead of flooring towards zero?

            if ( snapshot.sizeIsKeyword ) {
                elemRatio = innerWidth / innerHeight;
                imgRatio = imgWidth / imgHeight;

                if ( ( size === "contain" && imgRatio > elemRatio ) ||
                    ( size === "cover" && elemRatio > imgRatio ) ) {
                    top = floorTowardsZero( ( innerHeight - innerWidth / imgRatio ) * posY ) + px;
                    width = oneHundredPercent;

                    // size === "contain" && elemRatio > imgRatio ||
                    // size === "cover" && imgRatio > elemRatio
                } else {
                    left = floorTowardsZero( ( innerWidth - innerHeight * imgRatio ) * posX ) + px;
                    height = oneHundredPercent;
                }

                imgStyle.left = posXIsPercent ? left : posX;
                imgStyle.top = posYIsPercent ? top : posY;
                imgStyle.width = width;
                imgStyle.height = height;

                display = "block";

            } else {
                // need to set width/height then calculate left/top from the actual width/height
                imgStyle.display = "block";
                imgStyle.width = snapshot.sizeX;
                imgStyle.height = snapshot.sizeY;

                imgWidth = img.width;
                imgHeight = img.height;

                if ( imgWidth && imgHeight ) {
                    imgStyle.left = posXIsPercent ? floorTowardsZero( ( innerWidth - imgWidth ) * posX ) + px : posX;
                    imgStyle.top = posYIsPercent ? floorTowardsZero( ( innerHeight - imgHeight ) * posY ) + px : posY;

                    display = "block";
                }
            }
        }

        imgStyle.display = display;

        expando.current = snapshot;

        // img onload may be called synchronously, leading to us trying to
        // fire onbackgroundupdate within init(), causing an error
        // so wrap it with setTimeout()
        updateEventId = window.setTimeout( function() {
            updateBackgroundCallbackId = window.setTimeout( callback, 0 );

            // if any properties are changed here, processSnapshot() will process them later
            // if ondetach is triggered, updateBackgroundCallbackId will be cleared
            updateEvent.fire();
        }, 0 );
    }

    function floorTowardsZero( value ) {
        var isNegative = value < 0;
        value = Math.floor( Math.abs( value ) );
        return isNegative ? -value : value;
    }

// handle different style changes
    function handlePropertychange() {
        var expando = element.bgsExpando,
            propertyName = ( window.event || {} ).propertyName,
            backgroundImageProperty = "style.backgroundImage";

        if ( expando.ignore ) {
            expando.ignore = false;
            if ( propertyName === backgroundImageProperty ) {
                return;
            }
        }

        // if the changed property is style.backgroundImage
        // and its value is set to a non-empty string,
        // then the propertychange event will be fired twice
        // http://blog.csdn.net/hax/article/details/1346542
        if ( propertyName === backgroundImageProperty && element.style.backgroundImage ) {
            expando.ignore = true;
        }

        if ( refreshDisplay( element, expando ) ) {
            // since each snapshot includes changes all previous snapshots,
            // we can replace the old next snapshot with a new one
            expando.next = takeSnapshot( element, expando );
            processSnapshot( element, expando );
        }
    }

    function handleResize() {
        window.clearTimeout( resizeId );
        resizeId = window.setTimeout( handlePropertychange, resizeInterval );
    }

    function restore() {
        var expando = element.bgsExpando,
            loadImg,
            elementStyle,
            expandoRestore;

        o = {
            init: noop,
            handlePropertychange: noop,
            restore: noop,
            handleResize: noop
        };

        window.clearTimeout( resizeId );
        window.clearTimeout( processSnapshotId );
        window.clearTimeout( updateEventId );
        window.clearTimeout( updateBackgroundCallbackId );

        try {
            if ( expando ) {
                loadImg = expando.loadImg;
                if ( loadImg ) {
                    loadImg.onload = loadImg.onerror = null;
                    window.clearTimeout( loadImg.callbackId );
                }

                elementStyle = element.style;
                expandoRestore = expando.restore;
                if ( elementStyle ) {
                    elementStyle.backgroundImage = expandoRestore.backgroundImage;
                    elementStyle.position = expandoRestore.position;
                    elementStyle.zIndex = expandoRestore.zIndex;
                }

                element.removeChild( expando.wrapper );
            }

            element.bgsExpando = null;

        } catch ( e ) {}

        element = window = doc = noop = null;
    }

// don't allow anything until init() is called
// IE seems to think it needs to attach the behavior a second time for printing
    o = {
        init: doc.media !== "print" ? init : noop,
        handlePropertychange: noop,
        restore: noop,
        handleResize: noop
    };

    if ( element.readyState === "complete" ) {
        o.init();
    }

})( element, window );

</script>

<!--
    Work around IE sillyness, see:
http://www.pcreview.co.uk/forums/htc-components-512-bytes-javascript-slow-unload-t727396.html
    https://github.com/lojjic/PIE/blob/master/sources/htc_markup.htc
        https://code.google.com/p/svgweb/source/browse/trunk/src/svg.htc
            -->
            <script type="text/vbscript"></script>
</PUBLIC:COMPONENT>