// page init
$(document).ready(function() { 
	testGrayscale();
	sampleSmoothHover();
});

// open-close init
function testGrayscale() {
	$('img.grayscale').grayscale();
}


function sampleSmoothHover() {
	var delay = 100;
	var animSpeed = 200;
	$('ul.smooth-hover li').each(function(){
		var item = $(this);
		var image = item.find('img');
		//var gray = image.clone().appendTo(item).grayscale();
                var gray = image.clone().appendTo($('>.img a',this)).grayscale();
		var t;

		image.addClass('fly').hide();

		item.hover(function(){
			if(t) clearTimeout(t);
			t = setTimeout(function(){
				image.fadeIn(animSpeed);
			},delay)
		},function(){
			if(t) clearTimeout(t);
			t = setTimeout(function(){
				image.fadeOut(animSpeed);
			},delay)
		});
	});
}

// grayscale plugin
(function($){
	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)/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);

		if (bPlaceImage) {
			var myDiv=document.createElement("div");
			myDiv.appendChild(myCanvas);
			image.parentNode.appendChild(myCanvas);//, image);
		}
		return myCanvas.toDataURL();
	}

	jQuery.fn.grayscale = function(_options){
		var _options = jQuery.extend({
			temp:1
		},_options);
		return this.each(function(){
			// options
			var image = this;
			var _temp = _options.temp;
			if($.browser.msie && $.browser.version < 9) {
				image.style.filter = 'gray'
			} else {
				image.src = grayscale(image);
			}
		});
	}
})(jQuery);