(function($){
	
	$.fn.insetOverImg = function(options)
	{
		options = $.extend({
			speed : 250,
			bgURL : '',
			width : null,
			height : null,
			outerClass : "outerOverImg",
			innerClass : "innerOverImg"
		}, options);
		
		return this.each(function(i){
		
		var	$el = $(this),
			el_Height = options.height || $el.outerHeight(),
			el_Width = options.width || $el.outerWidth();	
			
  		var wrapper = $("<div />",{
			  "class": options.outerClass,
			  "css"  : {
					"width": el_Width,
					"height": el_Height,
					"overflow": "hidden",
					"top": 0,
					"left": 0,
					"position": "relative",
					"cursor": "pointer"
				},
				"mouseleave": function()
				{
					$el.next()
					.animate({
						"opacity": 0
					}, {
						"duration": options.speed, 
						"queue": false
					});
				},
				"mouseenter": function()
				{
					$el.next()
					.animate({
						"opacity": 0.15
					}, {
						"duration": options.speed, 
						"queue": false
					});
				}
			}),
			
			after = $("<div />",{
				"class": options.innerClass,
				"css"  : {
					"background": 'transparent url(' + options.bgURL +') repeat left top',
					"width": el_Width,
					"height": el_Height,
					"position": "absolute",
					"top": 0, 
					"left": 0,
					"opacity": 0
				}
			});
			
			$el.wrap(wrapper).after(after);
			
		});		
	};
	
})(jQuery);
