/* NOTES:
	Custimized with the following:
	Height is now a pixel unit instead of a ratio
	Added 'reflection' class to reflection so it can be styled
	Added code to create a 'credit' from the image title
	Added css to wrapper links to prevent underlining of credit
	
	Notes:
	$.browers.msie may not work once ChromeFrame is enabled
	line 96 can be simplified for html5 (no need to specify a span inside of a link anymore)  
*/


// alert('reflection.custom.js loaded');
/*!
	reflection.js for jQuery v1.02
	(c) 2006-2008 Christophe Beyls <http://www.digitalia.be>
	MIT-style license.
*/

(function($) {
	

$.fn.extend({
	reflect: function(options) {
		options = $.extend({
			height: 75,
			opacity: 0.25
		}, options);

		return this.unreflect().each(function() {
			var img = this;
			
 			if (/^img$/i.test(img.tagName)) {
				function doReflect() {
                    
				// SET REFLECTION HEIGHT  
					// CUSTOM: changed height to pixel unit instead of ration  
					// ORIGINAL: var reflection, reflectionHeight = Math.floor(img.height * options.height), wrapper, context, gradient;
					if (img.width == '100') {
						reflectionHeight = '20';
						}
					else if (img.width == '130') {
						reflectionHeight = '30';
						}
					else if (img.width == '170') {
						reflectionHeight = '40';
						}
					else if (img.width == '290') {
						reflectionHeight = '50';
						} 
					else if (img.width == '390') {
						reflectionHeight = '65';
						}
					else if (img.width == '610') {
						reflectionHeight = '75';
						}
					else reflectionHeight = options.height
					// DEFAULT 75, set above.
					// OVER-RIDE when calling by including $(this).reflect( {height:30} )
					
					                                                                        
					var reflection, reflectionHeight, wrapper, context, gradient;  // CUSTOM: original included reflectionHeight = options.height
					
					// NOTE: this may need to be changed to accomodate google chrome frame
					if ($.browser.msie) {
						reflection = $("<img />").attr("src", img.src).css({
							width: img.width,
							height: img.height,
							marginBottom: -img.height + reflectionHeight,
							
							// CUSTOM: ajust for pixel reflection height
							// ORIGINAL: filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (options.opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (options.height * 100) + ")"
							// NOTE: finishy= 'is a percentage of element height.' by trial and error options.height/8 seems to work. for height of 75, 10 is a good value
							filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (options.opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (options.height/8) + ")"
							
						})[0];
					} else {
						reflection = $("<canvas />")[0];
						if (!reflection.getContext) return;
						context = reflection.getContext("2d");
						try {
							$(reflection).attr({width: img.width, height: reflectionHeight});
							context.save();
							context.translate(0, img.height-1);
							context.scale(1, -1);
							context.drawImage(img, 0, 0, img.width, img.height);
							context.restore();
							context.globalCompositeOperation = "destination-out";

							gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
							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, img.width, reflectionHeight);
							context.fill();
						} catch(e) {
							return;
						}
					}
					
					$(reflection).css({display: "block", border: 0}).addClass('reflection'); // CUSTOM: .addClass('reflection');
					
					
					
					
					// CUSTOM: make credit from title. Remove title
					var creditText = $(img).attr('title');
					var credit = $('<p>' + creditText + '</p>').addClass('credit').css('test-decoration','none')[0];
					$(img).removeAttr('title');
					// add 'credit' to wrapper below
					
					// CUSTOM: add css to prevent underlining of credit if wrapped in a link
					var link_wrapper = img.parentNode;
					if ( link_wrapper.tagName.toLowerCase() == 'a') {
						// alert('link');
						$(link_wrapper).css('text-decoration','none'); 
					}

					// this could be changed for html5... divs can now be inside <a>
					wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection, credit])[0];  // CUSTOM: added credit
					wrapper.className = img.className;
					$.data(img, "reflected", wrapper.style.cssText = img.style.cssText);
					$(wrapper).css({width: img.width, height: img.height + reflectionHeight, overflow: "hidden"});
					img.style.cssText = "display: block; border: 0px";
					img.className = "reflected";
   				}

				if (img.complete) doReflect();
				else $(img).load(doReflect);
			}
		});
	},

	unreflect: function() {
		return this.unbind("load").each(function() {
			var img = this, reflected = $.data(this, "reflected"), wrapper;

			if (reflected !== undefined) {
				wrapper = img.parentNode;
				img.className = wrapper.className;
				img.style.cssText = reflected;
				$.removeData(img, "reflected");
				wrapper.parentNode.replaceChild(img, wrapper);
			}
		});
	}
});

})(jQuery);