<!DOCTYPE html><!-- DOCTYPE is needed to make IE version detection possible. -->
<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="_(element)" />
<public:attach event="onresize" onevent="_(element)" />
<public:attach event="ondetach" onevent="detached(element)" />
<script>
/**
 * translate-polyfill.htc by brunoais
 * Polyfills translations.
 * Does NOT SUPPORT calc() due to IE's CSS parser restrictions
 * 
 * @version 
 */

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

 var FIND_TRANSLATE = /translate(x|y)?\(([^,)]+)(?:,\s+([^)]+))?\)/g;
 var PERCENT = /([\d\.]+)%/
 


function parseTranslateValue(elem, xy, value){
	if(!value){
		return value;
	}
	var widthHeight = 'client' + (xy === 'x' ? 'Width': 'Height');
	value = value.replace(PERCENT, function (match, percent){
		return elem[widthHeight] * (percent / 100);
	});
	
	return value;
} 
 

function recalc(element, margins){

	
	var transformContent = element.currentStyle.getAttribute('transform');
	
	var translatex;
	var translatey;
	var nextTranslate;
	while((nextTranslate = FIND_TRANSLATE.exec(transformContent))){
		if(nextTranslate[1] === 'x'){
			translatex = nextTranslate[2];
		} else if(nextTranslate[1] === 'y'){
			translatey = nextTranslate[2];
		} else {
			translatex = nextTranslate[2];
			translatey = nextTranslate[3];
		}
	}
	translatex = translatex && translatex.trim();
	translatey = translatey && translatey.trim();
	
	translatex = parseTranslateValue(element, 'x', translatex);
	translatey = parseTranslateValue(element, 'y', translatey);
	
	if(translatex){
		element.style.marginLeft = "";
		element.style.marginRight = "";
		var prevMarginLeft = element.currentStyle.marginLeft  || 0;
		var prevMarginRight = element.currentStyle.marginRight || 0;
		prevMarginLeft = prevMarginLeft == 'auto' ? 0 : parseInt(prevMarginLeft);
		prevMarginRight = prevMarginRight == 'auto' ? 0 : parseInt(prevMarginRight);
		if(translatex < 0){
			element.style.marginLeft = (prevMarginLeft + +translatex) + "px";
		} else {
			element.style.marginRight = (prevMarginRight + +translatex) + "px";
		}
	}
	
	if(translatey){
		element.style.marginTop = "";
		element.style.marginBottom = "";
		var prevMarginTop = element.currentStyle.marginTop
		var prevMarginBottom = element.currentStyle.marginBottom;
		prevMarginTop = prevMarginTop == 'auto' ? 0 : parseInt(prevMarginTop);
		prevMarginBottom = prevMarginBottom == 'auto' ? 0 : parseInt(prevMarginBottom);
		if(translatey < 0){
			element.style.marginTop = (prevMarginBottom + +translatey) + "px";
		} else {
			element.style.marginBottom = (prevMarginTop + +translatey) + "px";
		}
	}
	
}
 
function _(element) {
	
	var margins = {
		top: element.currentStyle.marginTop,
		right: element.currentStyle.marginRight,
		bottom: element.currentStyle.marginBottom,
		left: element.currentStyle.marginLeft
	};
	
	recalc(element, margins);
	
	
}
function detached(element){
	element.style.marginTop = "";
}
</script>
</public:component>