/**
 * Wandelt Bilder in Graustufen um. Funktioniert nur in Browsern die Canvas unterstützen. (IE hat filter:)
 * Jedes mal wenn das Bild geändert wird, wird load abgefeuert.
 *
 * @author David Habereder
 * @todo Übergangs-Effekte, optimiertes Caching (nicht pro Bild sondern pro URL), testen ob das ganze mit IECanvas funktioniert
 */
$.fn.grayScale = function(gray){
	$(this).each(function(){
		// Methode die fürs umfärben verantworklich ist. nicht direkt ausführen weil erst geprüft werden muss ob bild überhaupt schon geladen wurde.
		var fn = function(){
			$(this).unbind("load.grayScale");
			if(!$(this).data("grayScaledImage") || !$(this).data("normalImage")){
				var myCanvas = document.createElement("canvas");
				var ctx = myCanvas.getContext("2d");

				var imgWidth = $(this).width();
				var imgHeight = $(this).height();
				myCanvas.width = imgWidth;
				myCanvas.height = imgHeight;
				
				ctx.drawImage($(this)[0],0,0);

				// Base64 des normalen Bildes speichern
				$(this).data("normalImage", myCanvas.toDataURL());
				
				var imageData = ctx.getImageData(0,0, imgWidth,imgHeight);
				
				// jedes pixel durchlaufen und durchschnitt berechnen
				for (var i=0; i<imageData.height; i++){
					for (var 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;
					}
				}
				ctx.putImageData(imageData,0,0,0,0, imageData.width, imageData.height);
				
				// Base64 des grayscalten Bildes speichern
				$(this).data("grayScaledImage", myCanvas.toDataURL());
			}
			
			// Wenn gray-flag nicht übergeben wurde togglen
			var thisGray;
			if(typeof gray === 'undefined'){
				thisGray = !($(this).attr("src") == $(this).data("grayScaledImage"));
			}else{
				thisGray = gray;
			}
			// ImageData holen
			var newImageData = thisGray?$(this).data("grayScaledImage"):$(this).data("normalImage");
			// und setzen
			$(this).attr("src",newImageData);
		}
	
		// Wenn noch nicht geladen im load-Handler dann färben
		if(!$(this)[0].complete){
			$(this).bind("load.grayScale",fn);
		}else{
		// Ansonsten gleich ausführend mit this als scope
			fn.call($(this));
		};		
	});
	return this;
}