/**
 * reflection.js v2.0
 * http://cow.neondragon.net/stuff/reflection/
 * Freely distributable under MIT-style license.
 */

var Reflection = Class.create();
Reflection.prototype = {
    options: {
        height : 0.3,
        opacity: 0.5
    },
    
    initialize: function(container, elements){
        $(container).select(elements).each(this.add.bind(this));
    },
    
    add: function(image){
        this.remove(image);
        
        try {
            var d = document.createElement('div');
            var p = image;
            
            var reflectionWidth = p.width;
            var reflectionHeight = Math.floor(p.height*this.options.height);
            var divHeight = Math.floor(p.height*(1+this.options.height));
            
            if (document.all && !window.opera) {
                if(p.parentElement.tagName == 'A') {
                    var d = document.createElement('a');
                    d.href = p.parentElement.href;
                }
                p.addClassName('reflected');
                p.setStyle({
                    'verticalAlign': 'bottom'
                })
                var reflection = document.createElement('img');
                reflection.src = p.src;
                reflection.style.width = reflectionWidth+'px';
                reflection.style.display = 'block';
                reflection.style.height = p.height+"px";
                
                reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
                reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(this.options.opacity*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(this.options.height*100)+')';
                
                p.wrap(d);
                d.appendChild(reflection);
            } else { 
                var canvas = document.createElement('canvas');
                if (canvas.getContext) {
                    p.addClassName('reflected');
                    
                    d.setStyle({
                        verticalAlign: 'bottom',
                        width: reflectionWidth+'px',
                        height: divHeight+'px'
                    });
                    p.setStyle({
                        verticalAlign: 'bottom'
                    })
            
                    var context = canvas.getContext("2d");

                    canvas.style.height = reflectionHeight+'px';
                    canvas.style.width = reflectionWidth+'px';
                    canvas.height = reflectionHeight;
                    canvas.width = reflectionWidth;
                    
                    p.wrap(d);
                    d.appendChild(canvas);
                    
                    context.save();
                    context.translate(0, image.height-1);
                    context.scale(1, -1);
                    context.drawImage(image, 0, 0, reflectionWidth, image.height);
                    context.restore();
                    context.globalCompositeOperation = "destination-out";
                    var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
                    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-this.options.opacity)+")");
                    context.fillStyle = gradient;
                    context.rect(0, 0, reflectionWidth, reflectionHeight*2);
                    context.fill();
                }
            }
        } catch (e) {}
    },
    
    remove : function(image) {
        if (image.hasClassName("reflected")){
            image.removeClassName("reflected");
            image.parentNode.replace(image);
        }
    }
}