function dropReflection(el, height, opacity, distance) {
	
		var img = el;
		
		// create new container SPAN, and make the image we're dealing with it's child.
		var container = document.createElement('span');
		img.parentNode.insertBefore(container, img);
//		img.style.cssText = 'vertical-align: bottom;';
		container.appendChild(img.parentNode.removeChild(img));
	
		// copy the classnames and inline styles
		container.className = img.className;	
		container.setAttribute("style", img.getAttribute("style"));
		img.setAttribute("style", "");
		container.style.display = "inline";
		container.style.width = img.width;
		var refheight = img.height*height;
		// make the distance from the image to the reflection
		img.style.marginBottom = (distance + "px");
		var newline = document.createElement('br');
		container.appendChild(newline);
                if (document.all && !window.opera) {
		  var reflection = document.createElement('img');
                  reflection.src = img.src;
                  reflection.style.width = img.width+'px';
                  reflection.style.height = refheight+'px';
 
                  reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+100+')';
                  container.appendChild(reflection);
                } else {
                  var canvas = document.createElement('canvas');
                  if (canvas.getContext) {
                    var context = canvas.getContext("2d");
 
                    canvas.height = img.height;
                    canvas.width = img.width;
		    canvas.style.cssText = 'position:relative;padding:0;margin:0; left: 0px; top:'+(img.height-newline.height)+'px;';
		
                    container.appendChild(canvas);
                    context.translate(0,refheight);
                    context.scale(1,-1);
                    context.drawImage(img, 0, 0, img.width, refheight);
                
                    var gradient = context.createLinearGradient(0, refheight, 0, 0);
                    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-opacity)+")");
                    context.fillStyle = gradient;
                    context.fillRect(0, 0, img.width, refheight);
                    
                  }
                }	
	}

document.getElementsByClassName = function(className) {
  var children = document.getElementsByTagName('*') || document.all;
  var elements = new Array();

  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
      if (classNames[j] == className) {
        elements.push(child);
        break;
      }
    }
  }
  return elements;
}


function addReflections() {
  var rimages = document.getElementsByClassName('reflectimage');
  for (i=0;i<rimages.length;i++) {
    var rsize = null;
    var rspace = null;
    var ropacity = null;
    var classes = rimages[i].className.split(' ');
 
    for (j=0;j<classes.length;j++) {
      if (classes[j].indexOf("refsize") == 0) {
        var rsize = classes[j].substring(7);
      } else if (classes[j].indexOf("refopacity") == 0) {
        var ropacity = classes[j].substring(10);
      } else if (classes[j].indexOf("refspace") == 0) {
        var rspace = classes[j].substring(8);
      }
    }
    dropReflection(rimages[i], rsize, ropacity, rspace);
  }
}

var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }