BBMPT1/MESWebSite/SysImages/images/backgroundsize.htc

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