jQuery.fn.dogray = function(settings){
	this.each(function (){
		
		var el = $(this);
		settings = jQuery.extend({ 
			type: 'hilite' ,
			watermark: 'images/watermark.png'

			//fadeSpeed: 'off',  //off,slow,normal,fast
			//border: 'off', //off,blur,hard
			//quickGlow: false,
			
			
		}, settings || {});
		
		switch(settings.type){
			case('hilite'):
				hiliteit(el);
			break;
			case('edges'):
				edgeit(el);
			break;
			case('border'):
				borderit(el);
			break;
			case('watermark'):
				watermarkit(el,settings.watermark);
			break;
		}

	});
	return this;
};

function watermarkit(el,wm){
	el.wrap('<div style="position:relative; height:'+el.height()+'px; width:'+el.width()+'px;"></div>');
	var pel = el.parent();
	var cel = el.clone().css({position:'absolute'});
	grayOn(cel)
	var comH = ((el.height() * 50) / 100);
	//var comW = ((el.width()  * 50) / 100);
	var comT = (el.height()/2) - (comH/2);
	var comL = (el.width()/2) - (comH/2);
	//todo: need to get size of wm so we can determine proper width and left
	pel.append('<img src="'+ wm +'" class="water_mark_" style="position:absolute;left:'+ comL +'px;top:'+ comT +'px; height:'+ comH +'px; ">');
	pel.prepend(cel);
	el.css({position:'absolute'});
	pel.hover(function(){
		//pel.find("img.water_mark_").fadeOut();
		el.fadeOut("fast");
	},function(){
		el.fadeIn("fast");
	});	
}

function borderit(el){

	el.wrap('<div style="position:relative; height:'+el.height()+'px; width:'+el.width()+'px;"></div>');
	var pel = el.parent();
	var cel = el.clone().css({position:'absolute'});
	pel.prepend('<div class="v" style="position:absolute;background:#ff4f07;width:0;height:100%;left:0;"></div> \
	             <div class="h" style="position:absolute;background:#ff4f07;height:0;width:100%;top:0;"></div> \
				 <div class="v" style="position:absolute;background:#ff4f07;width:0;height:100%;right:-10px;"></div> \
				 <div class="h" style="position:absolute;background:#ff4f07;height:0;width:100%;bottom:0;"></div> \
				 <div class="b" style="position:absolute;left:7px;right:-3px;top:7px;bottom:7px;border:2px inset #999999;display:none"></div> \
	');
	el.css({position:'absolute'});
	grayOn(cel);
	pel.prepend(cel);
	pel.hover(function(){
		el.fadeOut("slow");
		pel.find('div.v').stop().animate({ width:"7px",height:"100%" }, 350);
		pel.find('div.h').stop().animate({ width:"100%",height:"7px" }, 350, function() {
			pel.find("div.b").fadeIn("fast");
		});
	},function(){
		pel.find("div.b").fadeOut("fast",function(){
			pel.find('div.v').stop().animate({ width:0,height:"100%" }, 350);
			pel.find('div.h').stop().animate({ width:"100%",height:0 }, 350);
		});
		el.fadeIn("slow");
	});	
}

function edgeit(el){
	el.wrap('<div style="position:relative; height:'+el.height()+'px; width:'+el.width()+'px;"></div>');
	var pel = el.parent();
	var cel = el.clone().css({position:'absolute'});
	pel.prepend('<div class="edge" id="left"></div><div class="edge" id="right"></div><div class="edge" id="top"></div><div class="edge" id="bottom"></div>');
	el.css({position:'absolute'});
	grayOn(cel);
	pel.prepend(cel);
	pel.hover(function(){
		el.fadeOut("fast");
	},function(){
		el.fadeIn("fast");
	});	
}

function hiliteit(el){
	el.wrap('<div style="position:relative; height:'+el.height()+'px; width:'+el.width()+'px;"></div>');
	var pel = el.parent();
	
	var cel = el.clone().css({position:'absolute'});
	el.css({position:'absolute'});
	grayOn(cel);
	pel.prepend(cel);
	
	pel.prepend('<div class="hilite" style="position: absolute; display:none; z-index:2; width:100%; height:100%; background: url(images/whitepixel.jpg);" id="layer2"></div>');
		
	pel.hover(function(){
		pel.find('div.hilite').fadeIn("fast");
		pel.find('div.hilite').stop().animate({ opacity: 0.50 }, 50, function() {
			pel.find('div.hilite').animate({ opacity: 0 }, 250);
		}); 
		el.fadeOut();
	},function(){
		el.fadeIn();
	});	
}

function grayOn(el){
	if($.browser.msie){
		el.addClass("gray");
	} else {
		var canvas = document.createElement('canvas');
		var canvasContext = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = el.attr("src");
		canvas.width = imgObj.width;
		canvas.height = imgObj.height;
		canvasContext.drawImage(imgObj, 0, 0);
		var imgPixels = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		el.attr("src",canvas.toDataURL());
	} 
}