(function($, undefined) {
	$.widget('ms.photohover', {		
		options: {
			method: 'avg',
			speedIn: 1200,
			speedOut:550
		},
		
		_create: function () {
			var self = this;
			
			this.images = this.element.find('img');
			
			$.each(this.images, function () {
				$(this).load(function () {
					version=10;
					if (document.filters){
						version = parseFloat(navigator.appVersion.split('MSIE')[1]);
					}
					if (version >= 9) { 
						var grayscaleImage = self.grayscale($(this).context);
						$(this).after(grayscaleImage.addClass('grayscale'));
					}
				});
			});
			
			this.element.find('a').hover(function () {
				self.images.not($('img:first', this)).each(function () {
   					$(this).addClass('IEgray');
					$(this).next().stop(true).fadeTo(self.options.speedIn, 1);									
				});					
				
			}, function () {
				self.images.each(function () {
   					$(this).removeClass('IEgray');					
					$(this).next().stop(true).fadeTo(self.options.speedOut, 0);			
				});
			});
		},
		
		grayscale: function (image) {
			var canvas = document.createElement('canvas');
			var	ctx = canvas.getContext('2d');
			var	imageObj = new Image();
			
			//canvas.width = image.width;
			//canvas.height = image.height;
			canvas.width  = $(image).attr("width");
			canvas.height = $(image).attr("height");
			ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
			
			var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			
			for (var y = 0; y < imageData.height; y++) {
				for (var x = 0; x < imageData.width; x++) {
					var i = (y * (imageData.width * 4)) + (x * 4),
						grayscale = this.calculate(imageData, i);
				    
				    imageData.data[i] = grayscale;
				    imageData.data[i + 1] = grayscale;
				    imageData.data[i + 2] = grayscale;
				}
			}
			
			ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
			imageObj.src = canvas.toDataURL();
			
			return $(imageObj);
		},
		
		calculate: function (imageData, i) {
			var grayscale;
			
			switch (this.options.method) {
				case 'avg':
					grayscale = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
					break;
				
				case 'luminosity':
					grayscale = 0.2126 * imageData.data[i] + 0.7152 * imageData.data[i + 1] + 0.0722 * imageData.data[i + 2];
					break;
			}
			
			return grayscale;
		}		
	});
})(jQuery);