/*
 * JQuery greyscaling plugin
 * 
 * Version 1.0
 * 
 * by Christian Bruun - 2011
 *
 * Inspired (and partly stolen!) from:
 * http://webdesignerwall.com/tutorials/html5-grayscale-image-hover
 * http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
 * 
 * Like it/use it? Send me an e-mail: rockechris@rockechris.com
 * 
 * License: None. Use and abuse. Comes with no warranty, of course!
 * 
 * 
 * Options:
 * colorOnTop:		Should the colored image or the greyscaled canvas be on top				Default: true
 * removeOriginal:	Replace original image with the greyscaled								Default: false
 * addClass:		Class name(s) you want to add to the created greyscale canvases			Default: ''
? * wrap:			Element type to wrap around the greyscaled image						Default: 'div' ?
 * 
 */
(function($) {
	$.fn.canvasGreyscale = function(options) {
		var defaults = {
			colorOnTop:			true,
			removeOriginal:		false,
			addClass:			''
		}
		var opts = $.extend(defaults, options);
		
		function drawImage(imageObj, canvas){
			var context = canvas.getContext("2d");
			context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
		 
			var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
			var data = imageData.data;
		 
			for (var i = 0; i < data.length; i += 4) {
				var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
		 
				data[i] = brightness; // red
				data[i + 1] = brightness; // green
				data[i + 2] = brightness; // blue
				// i+3 is alpha (the fourth element)
			}
		 
			// overwrite original image
			context.putImageData(imageData, 0, 0);
		}

		return this.each(function() {
			if($(this).prop('tagName').toLowerCase() !== "img") return;
			// IE = Satan
			var testCanvas = document.createElement("canvas");
			var canvasCheck=(testCanvas.getContext) ? true : false;
			
			//kopier bildedata
			var theImage = $(this);
			var imageObj = new Image();
			imageObj.src = $(this).prop('src');
			if($(this).parent().css('position').toLowerCase() != 'absolute') { $(this).parent().css('position','relative'); }

			$(this).css({"position":"absolute"}).wrap('<div class="img_wrapper" style="display: inline-block"></div>');
			var newCanvas = '<canvas '+ (opts.addClass.length > 0 ? 'class="' + opts.addClass + '"' : '') + ' id="jQuery_canvasGreyscale" style="position:absolute;height:'+ $(this).height() +'px;width:'+ $(this).width() +'px;"></canvas>';
			
			if(!canvasCheck) { newCanvas = '<image '+ (opts.addClass.length > 0 ? 'class="' + opts.addClass + '"' : '') + ' src="'+ $(this).prop('src') +
				'" id="jQuery_canvasGreyscale" style="position:absolute;left:0;top:0;height:' + $(this).outerHeight() + 'px;width:' + $(this).outerWidth() +
				'px;filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);" />'; }
						
			if(opts.addClass !== '') { $(newCanvas).addClass(opts.addClass); }
			
			//sjekk om farget skal legges oppå
			if(opts.colorOnTop) { $(this).before(newCanvas); }
			else { $(this).after(newCanvas); }
			
			if(opts.removeOriginal) { $(this).remove(); }

			//lag canvas
			if(canvasCheck) { drawImage(this, document.getElementById('jQuery_canvasGreyscale')); }
			$('#jQuery_canvasGreyscale').removeAttr('id');
		});
	}
})(jQuery);