/*!
	reflection.js for jQuery v1.1
	(c) 2006-2011 Christophe Beyls <http://www.digitalia.be>
	MIT-style license.
*/

(function ($) {

    $.fn.extend({
        reflect: function (options) {
            options = $.extend({
                height: 1 / 4,
                opacity: 0.3,
                useLayoutSize: true
            }, options);

            return this.unreflect().each(function () {
                var img = this;
                if (/^img$/i.test(img.tagName)) {
                    function doReflect() {
                        var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;

                        //alert('2');
                        //alert(options.opacity);
                        if (options.useLayoutSize) {
                            imageWidth = $(img).innerWidth();
                            imageHeight = $(img).innerHeight();
                        }

                        reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);

                        reflection = $("<canvas />")[0];
                        if (reflection.getContext) {
                            context = reflection.getContext("2d");
                            try {
                                $(reflection).attr({ width: imageWidth, height: reflectionHeight });
                                context.save();
                                context.translate(0, imageHeight - 1);
                                context.scale(1, -1);
                                context.drawImage(img, 0, 0, imageWidth, imageHeight);
                                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, imageWidth, reflectionHeight);
                                context.fill();
                            } catch (e) {
                                return;
                            }
                        } else {
                            if (!$.browser.msie) return;
                            reflection = $("<img />").attr("src", img.src).css({
                                width: imageWidth,
                                height: imageHeight,
                                marginBottom: reflectionHeight - imageHeight,
                                filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
                            })[0];
                        }
                        $(reflection).css({ display: "block", border: 0 });

                        wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
                        wrapper.className = img.className;
                        $.data(img, "reflected", wrapper.style.cssText = img.style.cssText);
                        $(wrapper).css({ width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden" });
                        img.style.cssText = "display: block; border: 0px";
                        img.className = "reflected";
                        img.width = imageWidth;
                        img.height = imageHeight;
                    }

                    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);

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function ($) {
    $("img.reflect").reflect({/* Put custom options here */
});
});