function grayscale(image, bPlaceImage){
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");
  var imgWidth=image.width;
  var imgHeight=image.height;
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  myCanvasContext.drawImage(image,0,0);
  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)*0.3333;
			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);
  if (bPlaceImage){
	  var myDiv=document.createElement("div");
	  myDiv.appendChild(myCanvas);
	  image.parentNode.appendChild(myCanvas);//, image);
  }
  return myCanvas.toDataURL();
}

function MakeGSImage(image){
	if (typeof image.style.filter != "undefined") {
		image.style.zoom = 1;
		image.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);";
		image.onmouseover=function(){
			this.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";}
		image.onmouseout=function(){
			this.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";}
	} else {
		image.mouseOverImage=image.src;
		image.onload=function(){return true;};
		image.normalImage=grayscale(image, false);
		//image.onmouseover=function(){this.src=this.mouseOverImage;}
		image.onmouseout=function(){this.src=this.normalImage;}
		image.src=image.normalImage;
	}
}