<component lightWeight="true">
<attach event="onresize" for="window" onevent="setDimensions()" />
<script type="text/javascript">

	var xPos;
	var yPos;
	var safezoneWidthHalfNoUnit;
	var safezoneHeightHalfNoUnit;

	var initialTimer;

// pull relevant values out of the css.
	function getCssProperties() {
		xPosDecimal              = parseFloat(element.currentStyle.width.match(/\d+/)[0])/100;
		yPosDecimal              = parseFloat(element.currentStyle.height.match(/\d+/)[0])/100;
		safezoneWidthHalfNoUnit  = parseInt(element.currentStyle.minWidth.match(/\d+/)[0]);
		safezoneHeightHalfNoUnit = parseInt(element.currentStyle.minHeight.match(/\d+/)[0]);		
	}

// set dimensions, as though we had support for css-calc.
	function setDimensions() {
	// handle width
		var offWidth = element.parentNode.offsetWidth;
		element.style.width = Math.min(
			Math.max(
				offWidth * xPosDecimal,
				safezoneWidthHalfNoUnit
			), offWidth - safezoneWidthHalfNoUnit
		) + "px";
	// handle height
		var offHeight = element.parentNode.offsetHeight;
		element.style.height = Math.min(
			Math.max(
				element.parentNode.offsetHeight * yPosDecimal,
				safezoneHeightHalfNoUnit
			), element.parentNode.offsetHeight - safezoneHeightHalfNoUnit
		) + "px";
	}

	function setDimensionsInitial() {
		if (element.parentNode.offsetWidth && element.parentNode.offsetHeight) {
			setDimensions();
		} else {
			initialTimer = setTimeout(
				setDimensionsInitial,
				250
			);
		}
	}

// initialize.
	getCssProperties();
	setDimensionsInitial();

</script>