/**
 * An alpha transparent png support library for Internet Explore (other browsers
 * support this functionality natively) now compatible with Mootools.
 *
 * @author Toby Miller <tmiller@tobymiller.com>
 * @author Keith Baker <kbaker@resource.com>
 * @copyright Copyright (C) 2008, Toby Miller
 * @license MIT
 *
 * to remove flash of unstyled content for images (not background):
 * add to header:
 *	<!--[if lt IE 7]>
 *		<style type="text/css" media="all">
 *			img{filter:alpha(opacity=0);}
 *		</style>
 *	<![endif]-->
 * add to footer:
 *	<!--[if lt IE 7]>
 *       <script type="text/javascript">
 *           var ap = new AlphaPng();
 *      </script>
 *  <![endif]-->
 *
 * TODO:
 * * override 	setOpacity and getStyle to apply effects to parent
 *   element to allow for fade effects.
 * * Work on the reapplying styles to the IMG span container
*/
var AlphaPng = new Class({
	Implements: [Events, Options],
	/**
	 * defaultOptions
	 * Options used in typical implementations
	 *
	 * debug:			0 = production, 1 = development
	 * clearImage:		url location of a transparent image
	 * backgroundTags:	allowable html tags for alpha transparent backgrounds
	 */
	defaultOptions: {
		'debug':			0,
		'clearImage':		'/ri/img/global/spacer.gif',
		'backgroundTags':	['div', 'table', 'td', 'a'] // an array is used for performance reasons
	},

	/**
	 * initialize
	 * Initialize an instance of the AlphaPng object
	 *
	 * @param mixed array or object representation of options
	 * @return void
	 */
	initialize: function(options) {
		if (Browser.Engine.trident4){
			// Merges the default options with the ones given as parameters
			this.setOptions($merge(this.defaultOptions, options));

			// Execute
			this.fixElements();
		}
	},

	fixElements: function(){
		/**
		 * fixBackgrounds
		 * Fixes background images that are using alpha transparent pngs
		 *
		 * @param void
		 * @return void
		**/

		// Background Images (inline css styles)
		$$(this.options.backgroundTags).each(function(tag){
			var rpng = new RegExp('url\\(([a-zA-Z0-9_/:-]+\.png)\\)');
			var bgimage = tag.getStyle('background-image').replace(rpng, '$1');
			var position = tag.getStyle('position');
			var bgPos = tag.getStyle('background-position');
			if (bgimage && bgimage.match(/\.png/i)){
				if(bgPos !== null && bgPos !== undefined){
					// container needs to be relative for absolute placement
					tag.setStyle('position','relative');

					// grab the background style, split it to the X,Y values
					var bgPosX = bgPos.split(' ')[0];
					var bgPosY = bgPos.split(' ')[1];

					// generate new image so we can grab its height/width
					var bgImgContainer = new Element('img',{
						'src': bgimage,
						'styles':{
							'bottom': 0,
							'left': 0,
							'position': 'absolute',
							'visibility': 'hidden'
						}
					}).inject(document.body);

					// generate the new span
					var bgImgSpan = new Element('span',{
						'styles':{
							'background-image': 'url(\'' + this.options.clearImage + '\')',
							'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=\'true\', src=\'' + bgimage + '\', sizingMethod=\'scale\')',
							'height': bgImgContainer.getSize().y,
//							'left': (!isNaN(bgPosX)) ? bgPosX : 0,
							'position': 'absolute',
//							'top': (!isNaN(bgPosY)) ? bgPosY : 0,
							'width': bgImgContainer.getSize().x
						}
					}).inject(tag, 'top');

					// destory that image
					bgImgContainer.destroy();

					// if the background positioning isn't numeric, we adjust it
					if (isNaN(bgPosX)){
						if (bgPosX == 'top') {
							bgImgSpan.setStyle('top',0);
						} else if (bgPosX == 'right') {
							bgImgSpan.setStyle('right',0);
						} else if (bgPosX == 'left') {
							bgImgSpan.setStyle('left',0);
						} else if (bgPosX == 'bottom') {
							bgImgSpan.setStyle('bottom',0);
						} else {
							bgImgSpan.setStyle('left', bgPosX);
						}
					} else {
						// if it is, use it
						bgImgSpan.setStyle('left',bgPosX);
					}
					if (isNaN(bgPosY)){
						if (bgPosY == 'top') {
							bgImgSpan.setStyle('top',0);
						} else if (bgPosY == 'right') {
							bgImgSpan.setStyle('right',0);
						} else if (bgPosY == 'left') {
							bgImgSpan.setStyle('left',0);
						} else if (bgPosY == 'bottom') {
							bgImgSpan.setStyle('bottom',0);
						} else {
							bgImgSpan.setStyle('top', bgPosY);
						}
					} else {
						bgImgSpan.setStyle('top',bgPosY);
					}

					// the former background can be a spacer. Nice to have for debugging.
					tag.setStyle('background-image','url(\'' + this.options.clearImage + '\')');
				} else {
					tag.setStyles({
						'background-image': 'url(\'' + this.options.clearImage + '\')',
						'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=\'true\', src=\'' + bgimage + '\', sizingMethod=\'scale\')'
					});
				}
			}
		}.bind(this));

		var rpng = new RegExp('url\\(([a-zA-Z0-9_/:-]+\.png)\\)');
		var rgif = new RegExp('url\\((/spacer\.gif$/i)\\)');
		// Background Images (found in Stylesheets)
		for (var i = 0; i < document.styleSheets.length; i++){
			for (var j = 0; j < document.styleSheets[i].rules.length; j++){
				var cssstyle = document.styleSheets[i].rules[j].style;
				var bgimage = cssstyle.backgroundImage.replace(rpng, '$1');
				var spacer = cssstyle.backgroundImage.replace(rgif, '$1');
				var position = cssstyle.position;
				if (bgimage && bgimage.match(/\.png/i)){
					if (bgimage.match(/\.\./)){
						var a = bgimage.substring(bgimage.lastIndexOf(/^.*\//),bgimage.match(/\.png/i).length + 2);
						var bgimage = bgimage.substring(bgimage.indexOf(a) + 3,bgimage.length);
					}
					cssstyle.position = (position == 'static') ? 'relative' : position;
					cssstyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=\'true\', src=\'' + bgimage + '\', sizingMethod=\'crop\')';
					cssstyle.backgroundImage = 'url(\'' + this.options.clearImage + '\')';
				} else if(!spacer){
					cssstyle.filter = 'filter:alpha(opacity=1)';
				}
			}
		}

		/**
		 * fixImages
		 * Fixes foreground images that are using alpha transparent pngs
		 * Inputs need height/width as a style to keep validation
		 * if src$=png, src==spacer.gif && filter src==img src.png
		 *
		 */
		$$('img[src$=.png]','input[src$=.png]').each(function(img){
			// is the height and width set like it should be?
			if(img.getProperty('height') !== null){
				var imgHeight = img.getProperty('height');
			} else {
				// if not, grab the height/width of the image
				//this includes padding!!!
				var imgPaddingTop = (img.getStyle('padding-top')) ? img.getStyle('padding-top').toInt() : '';
				var imgPaddingBottom = (img.getStyle('padding-bottom')) ? img.getStyle('padding-bottom').toInt() : '';
				var imgHeight = img.getSize().y - imgPaddingTop - imgPaddingBottom;
			}
			if(img.getProperty('width') !== null){
				var imgWidth = img.getProperty('width');
			} else {
				var imgPaddingLeft = (img.getStyle('padding-left')) ? img.getStyle('padding-left').toInt() : '';
				var imgPaddingRight = (img.getStyle('padding-right')) ? img.getStyle('padding-right').toInt() : '';
				var imgWidth = img.getSize().x - imgPaddingLeft - imgPaddingRight;
			}

			// does the image have styles applied to it?
			if (img.get('style') == '') {
				img.setStyles({
					'filter':	"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=\'true\', src=\'" + img.getProperty('src') + "\', sizingMethod=\'scale\')",
					'width':	imgWidth,
					'height':	imgHeight
				});
				//var span = new Element('span',{'class': 'ie6opacity', 'styles': {'background': 'none', 'display': 'inline', 'margin': 0, 'padding': 0, 'position': 'static'}}).injectBefore(img);
				//img.setProperty('src', this.options.clearImage).injectInside(span);
				img.setProperty('src', this.options.clearImage);
			} else {
/*					var imgP = img.getProperties('align', 'alt', 'class', 'height', 'id', 'title', 'width'); // notice it's an alphabetical order
				$each(imgP, function(prop, keyz){
					//alert(keyz + '="' + prop + '"');
				});
				imgP.each
				var imgHand = (img.getParents('a[href]')) ? 'cursor:hand;' : '';
				var imgAlign = (imgP['align']) ? 'float:' + imgP['align'] + ';' : '';
				var imgWidth = imgP['width'];
				var imgHeight = imgP['height'];
				var strNewHTML = '';
				var prevStyle = '';
				if (img.getStyle('border')) {
					prevStyle += 'border:' + img.getStyle('border') + ';';
					img.setStyle('border', '');
				}
				if (img.getStyle('padding')) {
					prevStyle += 'padding:' + img.getStyle('padding') + ';';
					img.setStyle('padding', '');
				}
				if (img.getStyle('margin')) {
					prevStyle += 'margin:' + img.getStyle('margin') + ';';
					img.setStyle('margin', '');
				}
				var imgStyle = (img.style.cssText);
				var imgPropArray = $A(imgP).each(function(prop, keyz){
				})
				var imgPropz = imgPropArray;
				strNewHTML = '<span ' + imgPropz;  // image properties applied to main span
				strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;' + imgAlign + imgHand; // image styling is next
				strNewHTML += 'width:' + imgWidth + 'px;' + 'height:' + imgHeight + 'px;'; // image height and width
				strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + img.getProperty('src') + '\', sizingMethod=\'scale\');'; // the magic
				strNewHTML += imgStyle +'"></span>';
				if (prevStyle != ''){
					strNewHTML = '<span style="position:relative;display:inline-block;'+ imgStyle + imgHand + 'width:' + imgWidth + 'px;' + 'height:' + imgHeight + 'px;'+'">' + strNewHTML + '</span>';
				}
				strNewHTML.injectAfter(img);
				img.setStyles({'display': 'none', 'visibilie': 'none'});*/
				var imgW = imgWidth;
				var imgH = imgHeight;
				var prevStyle = '';
				var strNewHTML = '';
				var imgAlign = (img.getProperty('align')) ? img.getProperty('align') : '';
				var imgAlt = (img.getProperty('alt')) ? img.getProperty('alt') : '';
				var imgClass = (img.getProperty('class')) ? img.getProperty('class') : '';
				var imgHand = (img.getParent('[href]')) ? 'hand' : '';
				var imgId = (img.getProperty('id')) ? img.getProperty('id') : '';
				var imgPosition = (img.getStyle('position')) ? img.getStyle('position') : 'relative'
				var imgPositionTop = (img.getStyle('top')) ? img.getStyle('top') : ''
				var imgPositionRight = (img.getStyle('right')) ? img.getStyle('right') : ''
				var imgPositionBottom = (img.getStyle('bottom')) ? img.getStyle('bottom') : ''
				var imgPositionLeft = (img.getStyle('left')) ? img.getStyle('left') : ''
				var imgTitle = (img.getProperty('title')) ? img.getProperty('title') : '';
				if (img.getStyle('border')) {
					prevStyle += 'border:'+img.getStyle('border')+';';
					img.setStyle('border', '');
				}
				if (img.getStyle('padding')) {
					prevStyle += 'padding:'+img.getStyle('padding')+';';
					img.setStyle('padding', '');
				}
				if (img.getStyle('margin')) {
					prevStyle += 'margin:'+img.getStyle('margin')+';';
					img.setStyle('margin', '');
				}

				var imgStyle = img.get('style');

				var strNewHTML = new Element('span', {
						'alt': imgAlt,
						'class': imgClass,
						'id': imgId,
						'styles': {
							'background': 'transparent',
							'cursor': imgHand,
							'display': 'inline-block',
							'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.getProperty('src') + '\', sizingMethod=\'scale\');',
							'float': imgAlign,
							'height': imgH,
							'position': imgPosition,
							'top': (img.getStyle('top')) ? img.getStyle('top') : '',
							'right': (img.getStyle('right')) ? img.getStyle('right') : '',
							'bottom': (img.getStyle('bottom')) ? img.getStyle('bottom') : '',
							'left': (img.getStyle('left')) ? img.getStyle('left') : '',
							'width': imgW
							//'white-space': 'pre-line', // invalid argument?
						},
						'title': imgTitle
				});
				/*strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
				strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;
				strNewHTML += 'width:' + imgW + 'px;' + 'height:' + imgH + 'px;';
				strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + img.getProperty('src') + '\', sizingMethod=\'scale\');';
				strNewHTML += imgStyle+'"></span>';
				if (prevStyle != ''){
					strNewHTML = '<span style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:' + imgW + 'px;' + 'height:' + imgH + 'px;'+'">' + strNewHTML + '</span>';
				}*/
				if (prevStyle != ''){
					strNewrHTML = new Element('span', {
							'styles': {
								'position': 'relative',
								'display': 'inline-block',
								'cursor': imgHand,
								'width': imgW,
								'height': imgH
							}
					});
					strNewHTML.inject(strNewrHTML);
				}
				strNewHTML.inject(img, 'before');
				img.destroy();
			}
		}.bind(this));

		//if you set the images to opacity=0 to stop the FUC you need to set it back again
		//if src is not spacer, set opacity to 1
/*			$$('[src]').each(function(el){
			if(!el.getAttribute('src').match(/spacer\.gif$/i)) el.setStyles({'filter': 'alpha(opacity=100)'});
		}.bind(this));*/
	}
});