/*
	reflection.js for mootools v1.1
	by Christophe Beyls (http://www.digitalia.be) - MIT-style license
	
	COZ: Updated with framework independence, micro formats, and specific pixel height
	
	Example:
	
	<img src="images/cat.png" class="cozReflection height:0.33 opacity:0.5"/>
*/

coz.reflection = {

	init: function(node){
		coz.query("img.cozReflection",node,function(img){
			coz.reflection.add(img,coz.uFormats(img));
		});
	},

	add: function(img, options){
		if (img.tagName != "IMG") return;
		//options = {arguments: [img, options]};
		//if (window.ie) options.delay = 50;
		img.preload = document.createElement("img");
		img.preload.onload = function() { coz.reflection.reflect(img,options); };
		img.preload.src = img.src;
	},

	remove: function(img){
		if (img.preload) img.preload.onload = null;
		if ((img.tagName == "IMG") && (img.className == "reflected")){
			img.className = img.parentNode.className;
			img.style.cssText = img.backupStyle;
			img.parentNode.replaceWith(img);
		}
	},

	reflect: function(img, options){
		options = coz.mixin({
			height: 0.33,
			opacity: 0.5,
			margin: true
		}, options || {});

		coz.reflection.remove(img);
		var size = coz.size(img);
		var canvas, canvasHeight = options.height > 1 ? +options.height : Math.floor(size.height*options.height);

		if (coz.ie){
			canvas = document.createElement("img");
			canvas.src = img.src;
			coz.setStyles(canvas,{
				width: size.width+"px",
				"margin-bottom": "-"+(size.height-canvasHeight)+"px",
				filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity="+(options.opacity*100)+", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy="+(Math.floor(100*(canvasHeight/size.height)))+")"
			});
		} else {
			canvas = document.createElement("canvas");
			coz.setStyles(canvas,{width: size.width+"px", height: canvasHeight+"px"});
			if (!canvas.getContext) return;
		}

		var div = document.createElement("div");
			img.parentNode.insertBefore(div,img);
			div.appendChild(img);
			div.appendChild(canvas);
			div.className = img.className;
			div.style.cssText = img.backupStyle = img.style.cssText;
			coz.removeClass(div,"reflect");
			coz.setStyles(div,{width: size.width+"px", height: (canvasHeight+size.height)+"px", "margin-bottom": (options.margin ? "0px" : "-"+canvasHeight+"px")});
			coz.setStyles(img,{"vertical-align": "bottom"});
			img.className = "reflected";
		if (coz.ie) return;

		canvas = coz.mixin(canvas,{width: size.width, height: canvasHeight});
		var context = canvas.getContext("2d");
			context.save();
			context.translate(0, size.height-1);
			context.scale(1, -1);
			context.drawImage(img, 0, 0, size.width, size.height);
			context.restore();
			context.globalCompositeOperation = "destination-out";
		var gradient = context.createLinearGradient(0, 0, 0, canvasHeight);
			gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options.opacity)+")");
			gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
			context.fillStyle = gradient;
			context.rect(0, 0, size.width, canvasHeight);
			context.fill();
	}
};

coz.addOnLoad(function() {
	coz.reflection.init();
});