/* =========================================================


// jquery.monochromer.js


// Date: 2010-12-24
// Author: Hidetaro7 (Hideki Akiba)
// Mail: hidetaro7@gmail.com
// Web: http://akibahideki.com/blog
// Belong: ECOLONIQ Design Label


// for <canvas>element supported browser.
// It confirmed browser Safari5, Chrome6, Firefox3.6, Opera11, InternetExploler9Beta on Opening to the public day.

 *
 *	<ul id="photoNavigation">
 *		<li><a href="#"><img src="sample01.jpg" alt=""></a></li>
 *		<li><a href="#"><img src="sample02.jpg" alt=""></a></li>
 *		<li><a href="#"><img src="sample03.jpg" alt=""></a></li>
 *		<li><a href="#"><img src="sample04.jpg" alt=""></a></li>
 *		<li><a href="#"><img src="sample05.jpg" alt=""></a></li>
 *	</ul>
 *  
 *
 *$("ul#photoNavigation li").canvasimage({
 *	speed: Fading-Speed in milliseconds (Default: 300),
 *	color: ColorType selectable, value is StringKeywords and CSS Colorcode (Default: "gray")
 *	       "gray","lightgray","sepia","blue","green" or CSS color (example: "#ff0000")
 *	type: which select firstview ProcessedImage or OriginalImage (Default: false)
 *});


// ========================================================= */

jQuery.fn.monochromer = function (option) {
	var settings = {
		"speed": 300,
		"color": "gray",
		"type" : true
	};
	if(option) jQuery.extend(settings, option);
	return this.each (function () {
		$(this).css("position","relative");
		var canvas;
		var img = $(this).find("img");
			if(settings.type || settings.type == null) {
				$(this).find("a").append("<canvas></canvas>");
				canvas = $(this).find("canvas");
				canvas.css({"position":"absolute","top":"0","left":"0"});
				canvas.hover(function(){canvas.fadeTo(settings.speed,0)},function(){canvas.fadeTo(settings.speed,1)});
			}else if(!settings.type){
				$(this).find("a").prepend("<canvas></canvas>");
				canvas = $(this).find("canvas");
				img.css({"position":"absolute","top":"0","left":"0"});
				img.hover(function(){img.fadeTo(settings.speed,0)},function(){img.fadeTo(settings.speed,1)});
			}
		var ctx = canvas[0].getContext("2d");
		var imageWidth, imageHeight;
		$(this).find("img").load(function (){
			imageWidth = $(this).width();
			imageHeight = $(this).height();
			canvas[0].width = img[0].width;
			canvas[0].height = img[0].height;
			ctx.drawImage(img[0], 0, 0);
			var idata = ctx.getImageData(0, 0, imageWidth, imageHeight);
			var pixels = idata.data.length;
			for(var i=0; i<pixels; i+=4) {
				colorCodeParse(idata.data,i);
			}
			ctx.putImageData(idata, 0, 0);
		});
		function colorCodeParse(imgD, i) {
			var t = (imgD[i]+imgD[i+1]+imgD[i+2])/3;
			switch(settings.color) {
				case "gray":
					imgD[i] = imgD[i+1] = imgD[i+2] = t;
				break;
				
				case "lightgray":
					imgD[i] = imgD[i+1] = imgD[i+2] = (t+t/1.2<=255)?t+t/1.2:255;
				break;
				
				case "sepia":
					imgD[i] =t/.5;
					imgD[i+1] = imgD[i+2] = (t/1.2+30 <= 255)?t/1.2+30:255;
				break;
				
				case "blue":
					imgD[i+2] =t/0.6;
					imgD[i+1] = imgD[i] = (t/1.2+30 <= 255)?t/1.2+30:255;
				break;
				
				case "green":
					imgD[i+1] =t/0.7;
					imgD[i+2] = imgD[i] = (t/1.4+40 <= 255)?t/1.4+40:255;
				break;
				
				default:
				//from Hex Number
				if(settings.color.indexOf("#") != -1) {settings.color=settings.color.replace("#","");};
				var r,g,b;
				if(settings.color.length != 3) {
				r = parseInt(settings.color.substr(0,2), 16);
				g = parseInt(settings.color.substr(2,2), 16);
				b = parseInt(settings.color.substr(4,2), 16);
				}else{
					r = parseInt(String(settings.color.substr(0,1)+settings.color.substr(0,1)), 16);
					g = parseInt(String(settings.color.substr(1,1)+settings.color.substr(1,1)), 16);
					b = parseInt(String(settings.color.substr(2,1)+settings.color.substr(2,1)), 16);
				}
				imgD[i] = imgD[i]*(r/255);
				imgD[i+1] = imgD[i+1]*(g/255);
				imgD[i+2] = imgD[i+2]*(b/255);
				break;
			}
		}
	})
}