<!-- 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>