Создание отражения рисунка с помощью JavaScript

    document.myGetElementsByClassName = function(className) {
        var children = document.getElementsByTagName('img');
        var elements = [];
     
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if(child.getAttribute('alt')=='reflect')
                    elements.push(child);
        }
        return elements;
    }

function addReflections(){
    var rimages = document.myGetElementsByClassName('reflect');
    for (i=0;i<rimages.length;i++) {
        reflect_image(rimages[i])
    }
}


function reflect_image(image)
{
        if(!image.complete)
            return;

    var k       = 3;  // aka ratio
        var opacity_start = 0.31;
        var opacity_end   = 0.001;
        var mode          = 1;  //0 = vertical, 1 = horizontal  

        var container  = image.parentNode, replace;
        if(replace = container.childNodes.length!=1){
            container  = document.createElement('div');
        }
        container.style.display='inline-block';
         
        var
            ref_height = image.offsetHeight,
            ref_width  = image.offsetWidth;

       
        var reflection;
       
         if (!window.opera && document.all){
            reflection = document.createElement('img');
        }else{
            reflection  = document.createElement('canvas');
            var context = reflection.getContext('2d');
        }
       
       /* reflection.height       = ref_height;
        reflection.width        = ref_width;*/

        if(0 == mode){
            reflection.style.display = 'block';
            reflection.style.marginTop  = '1px';
            reflection.style.height = ref_height/k + 'px';
            reflection.style.width  = ref_width + 'px';
        }else{
            reflection.style.cssFloat  = 'left';
            reflection.style.marginRight  = '1px';
            reflection.style.height = ref_height + 'px';
            reflection.style.width  = ref_width/k + 'px';
        }

        /*container.style.width  = div_width + 'px';
        container.style.height = div_height + 'px';*/
           
        if (!window.opera && document.all) {
            reflection.src = image.src;
           
            if (0 == mode) {
                reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx=0, finishy='+(100)+')';
            }
            else {
                reflection.style.filter = 'fliph progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_end*100)+', style=1, finishOpacity='+(opacity_start*100)+', startx=0, starty=0, finishx='+(100)+', finishy=0)';
            }
        }
        else
        {
            context.save();
            var gradient;
            reflection.src = image.src;//только для того чтоб знать размеры…
            var z1=reflection.width, z2=reflection.height;
           
            if (0 == mode) {
                context.translate(0, z2);
                context.scale(1, -1);
                gradient = context.createLinearGradient(0, 0, 0, ref_width);
            }
            else {
                context.translate(z1, 0);
                context.scale(-1, 1);
                gradient = context.createLinearGradient(0, 0, ref_height, 0);
            }
           
            context.drawImage(image, 0, 0, z1, z2);
            context.restore();
           
            context.globalCompositeOperation = "destination-out";
            gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
            gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
            context.fillStyle = gradient;
            if (-1 != navigator.appVersion.indexOf('WebKit')) {
                context.fill();
            }
            else {
                context.fillRect(0, 0, z1, z2);
            }
        }

       
        if(replace){
            image.parentNode.replaceChild(container, image);
            container.appendChild(image);
        }
        container.appendChild(reflection);
}