// This is the one used in the preview and frontend

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />

<script>

var regEx = new RegExp("(MSIE 5\.5)|(MSIE 6)","gi");
var browserOK = regEx.test(navigator.userAgent);
var regEx = new RegExp("(MSIE 7)|(MSIE 8)|(MSIE 9)","gi");
var IE7 = regEx.test(navigator.userAgent);
var isSettingFilter = false;

setBackground(element);

/*
* Fires when a property changes on the object.
*/
function propertyChanged()
{	
	// We have to perform this check to avoid getting caught in a loop
	// when element.style.background is changed in setBackground().
	if(!isSettingFilter)
	{
		setBackground(element);
	}
	else
	{
		return;
	}
}

/**
* Setting the background
*/
function setBackground(elementToSetBgOn)
{	
	var bgImgUrl = currentStyle.backgroundImage || style.backgroundImage;
	var bgRegEx = new RegExp("^url[(\"']+(.*\.png\?.*)[)\"']+$", "i");
	var bgColor = currentStyle.backgroundColor || style.backgroundColor;
	
	if(bgRegEx.test(bgImgUrl)) {
	
		var imgSrc = RegExp.$1;
		
		if(browserOK && !isSettingFilter) 
		{	
			// By setting this to true, we avoid getting caught in a loop
			// when propertyChanged() is triggered by the element.style.background-change.
			isSettingFilter = true;
			
			// Set filter
			elementToSetBgOn.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
						"AlphaImageLoader(src='" + imgSrc + "',sizingMethod='scale')";
						
			// Remove the background		
			elementToSetBgOn.style.background = "";	
			
			// Set the backgroundcolor to the elements original
			elementToSetBgOn.style.backgroundColor = bgColor;
				
			isSettingFilter = false;
			
		} else if(!IE7) {
			
			elementToSetBgOn.style.background = "";	
			
			// Set the backgroundcolor to the elements original
			elementToSetBgOn.style.backgroundColor = bgColor;			
		
			return;
			
		}
		
	} else {
		return 
	}
}

</script>
</public:component>