﻿function setcolor(image) {
        image.className = "in";
    }
    
    function setblack(image) {
        image.className = "out";
    }

function prepareMouseOverImage(image, originalURL, height, width, multiplierx, multipliery)
{
	image.mouseOverImage=originalURL;
	image.onload=function(){return true;};
	image.normalImage=grayscale(image, false, height, width, multiplierx, multipliery);
	
	image.onmouseover=function()
	{
	//alert("a");
		this.src=this.mouseOverImage;
	}
	
	image.onmouseout=function()
	{
//	alert(this.normalImage.src);
		this.src=this.normalImage;
	}
	image.src=image.normalImage;
}


function grayscale(image, bPlaceImage, height, width, multiplierx, multipliery)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  var imgWidth=width;
  var imgHeight=height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
//  alert(imgWidth);
  myCanvasContext.scale(multiplierx, multipliery);
  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();
}