function grayscale(image, bPlaceImage, width_real, height_real)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  var imgWidth=width_real;
  var imgHeight=height_real;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width = imgWidth;
  myCanvas.height = imgHeight;
//  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0);
  // this function cannot be called if the image is not rom the same domain.  You'll get security error
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
  for (i=0; i<imageData.height; i++)
  {
    for (j=0; j<imageData.width; j++)
    {
     var index=(i*4)*imageData.width+(j*4);
     var red=imageData.data[index];     
     var green=imageData.data[index+1];
     var blue=imageData.data[index+2];     
     var alpha=imageData.data[index+3];    
     var average=(red+green+blue)/3;      
        imageData.data[index]=average;     
        imageData.data[index+1]=average;
        imageData.data[index+2]=average;
        imageData.data[index+3]=alpha;          
   }
  }
  myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height);
 // myCanvasContext.drawIMage(imageData,0,0);//,0,0, imageData.width, imageData.height);  
  
  if (bPlaceImage)
  {  
     var myDiv=document.createElement("div");  
     myDiv.appendChild(myCanvas);
     image.parentNode.appendChild(myCanvas);//, image);
  }
  return myCanvas.toDataURL();
}


function prepareMouseOverImage(image, originalURL, width_real)
{
   var ua = navigator.userAgent.toLowerCase();
   if (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua.indexOf("webtv") == -1) {
      image.onload=function(){return true;};
      image.onmouseover=function()
      {
      //alert("a");
         image.style['-ms-filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
         image.style['filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);";
      }
      image.onmouseout=function()
      {
//   alert(this.normalImage.src);
         image.style['-ms-filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
         image.style['filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);";
      }
      
   }else{
      if(width_real){
         var height_real = (width_real * image.height)/image.width;
                        height_real = Math.floor(height_real);
      }else{
         var width_real=image.width;
         var height_real=image.height;
      }
      image.mouseOverImage=originalURL;
      image.onload=function(){return true;};
      image.normalImage=grayscale(image, false, width_real, height_real);
      
      image.onmouseover=function()
      {
      //alert("a");
         this.src=this.mouseOverImage;
      }
      
      image.onmouseout=function()
      {
//   alert(this.normalImage.src);
         this.src=this.normalImage;
      }
      image.src=image.normalImage;   
   }
}