// Moo Browser Selector   v0.0.1
// Documentation:         
// License:               http://creativecommons.org/licenses/by/2.5/
// Author:                Judd Kussrow (http://octopusinc.com)
// Contributors:          

Element.implement({
	fix: function(){
		if(!Browser.Engine.trident) //are there other browsers that might want to be included besides IE?
			return this;
		var img;
		if(this.get('tag')=='img'){
			img = "'"+this.get('src')+"'";
			this.set('src', 'images/null.gif');
		}else{
			var bg = this.getStyle('background-image');
			if(bg && bg!='none')
				img = bg.match(/\(([^)]+)\)/)[1];
		}
		if(img){
			if(this.getStyle('display')=='inline' && !['input', 'textarea', 'button'].contains(this.get('tag')))
				this.setStyles({
					'display': 'block',
					'width': this.getStyle('width') //this causes a bug with paddings!
				});
			this.setStyles({
				'background': '',
				'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src="+img+", sizingMethod='scale')"
			});
		}
		return this;
	}
});

/*
INSTRUCTIONS:

Just add this three lines to your header:
<script type="text/javascript" language="javascript" charset="utf-8" src="js/mootools2.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="js/moopng.js"></script>
<script type="text/javascript">window.addEvent('domready', function(){ $$('.fix').fix(); });</script>

Then add null.gif to your /images folder.

Lastly add widths and heights to all IMG .png and the class "fix" to anything using a .png:
<img src="images/example.png" alt="" title="" class="fix" />
<div class="fix">Content with a png background</div>
*/