function grayscale(src) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();

    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height; 

    ctx.drawImage(imgObj, 0, 0); 
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);         
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }

    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();    
}

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}
document.observe('dom:loaded',function(){
  if (isCanvasSupported()) {
    $$('.grayscale').each( function (ele) {
        var img=ele.down("img");
        img.wrap('div',{'class':'img_wrapper'});
        img.setStyle({"position":"absolute"});
        img.insert({before: img.clone().addClassName('img_grayscale').setStyle({"position":"absolute",zIndex:"998","opacity":"0"})});
        img.observe('load',function(e){
            img.stopObserving('load');
            img.up().setStyle({"width":img.width+'px',"height":img.height+'px'});
            img.src = grayscale(img.src);
        });

        ele.observe('mouseenter',function(e){new Effect.Opacity(ele.down('img').identify(), {from:0, to:1, duration:0.3})});
        ele.observe('mouseleave',function(e){new Effect.Opacity(ele.down('img').identify(), {from:1, to:0, duration:0.3})});
    });
  }
});