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;    
   } 
}