/**
 * Reflect.js v0.5
 *
 * Script by Adam Yanalunas http://adam.yanalunas.com/
 *
 * Inspiration from Cow http://cow.neondragon.net
 *
 * Freely distributable under MIT-style license.
 */
Reflection = Class.create();
Reflection.prototype = {
	initialize: function(collection, options){
		this.collection = $(collection);
		this._falloff = options.falloff || 50;
		this._opacity = options.opacity || 50;
		this._wrapper = options.wrapper || 'div';
		//this.affectImages = options.affectImages || false;
		this.images = options.images || this.gatherImgess();
		this.applyReflection();
	},
	
	gatherImgess: function()
	{
		return document.getElementsByClassName('reflect', this.collection);
	},
	
	applyReflection: function()
	{
		for (i=0; i<this.images.length; i++) {
			try {
				var canvas = document.createElement('canvas');
				var context = canvas.getContext("2d");
				
				var canvasHeight = this.images[i].height * (this._falloff/100);
				var divHeight = this.images[i].height * (1 + (this._falloff/100));
				
				var d = document.createElement(this._wrapper);
				
				/* Copy original image's classes & styles to div */
				d.className = this.images[i].className;
				Element.removeClassName(d, 'reflect');
				
				d.setAttribute('style', this.images[i].getAttribute('style'));
				this.images[i].setAttribute('style', ' ');
			
				var canvasWidth = this.images[i].width;
				p = this.images[i];
				canvas.style.height = canvasHeight+'px';
				canvas.style.width = canvasWidth+'px';
				canvas.height = canvasHeight;
				canvas.width = canvasWidth;
				
				d.style.width = canvasWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, this.images[i]);
				
				d.appendChild(p);
				d.appendChild(canvas);

				
				context.save();
				
				// Move the copy to the bottom of the current image, nudge it in -1px
				context.translate(0,canvasHeight*2-1);
				context.scale(1,-1);
				
				context.drawImage(this.images[i], 0, this.images[i].height-canvasHeight, canvasWidth, canvasHeight, 0, canvasHeight, canvasWidth, canvasHeight);
				
				context.globalCompositeOperation = "destination-out";
				
				var gradient = context.createLinearGradient(0, canvasHeight, 0, divHeight);
				var beginningOpacity = (100 - this._opacity) / 100;
				var finalOpacity = 1 - beginningOpacity*2;
				
				// This stop is actually at the bottom, due to the scaling
				gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
				
				gradient.addColorStop(0.5, "rgba(255, 255, 255, " + finalOpacity + ")");
				
				// This stop is at the top of the reflection/the base of the image
				gradient.addColorStop(1, "rgba(255, 255, 255, " + beginningOpacity +")");
	
				context.fillStyle = gradient;
				if (navigator.appVersion.indexOf('WebKit') != -1) {
					context.fill();
				} else {
					context.fillRect(0, 0, canvasWidth, canvasHeight * 2);
				}
				
				context.restore();
			} catch (e) {
			}
		}
	},
	
	clearReflection: function()
	{
		var hr = this.collection.getElementsByTagName('hr');
		hr = hr[0];
		
		for(var i=0; i<this.images.length; i++)
		{
			var img = this.images[i].cloneNode(false);
			var container = this.images[i].parentNode;
			var parent = container.parentNode;
			var oldContainer = parent.removeChild(container);
			parent.insertBefore(img, hr);
			this.images[i] = img;
		}
	},
	
	reloadReflection: function()
	{
		this.clearReflection();
		this.applyReflection();
	}
};