/*******

	***	Link Fader by Cedric Dugas   ***
	*** Http://www.position-absolute.com ***
	
	Licenced under the MIT LICENCE
	You can use and modify this script for any project you want, 
	but please leave this comment as credit.
	
	With this script you can have beautiful fade in and fade out hover link.
	
	Just add the class linkFader at your <a> tag and it will fade, 
	user with javascript disable will still have the css hover.

	This script only work if you use a CSS image replacement technique 
	
*****/

$(document).ready(function() {
	$("a.linkFader").hoverOpacity()
});

jQuery.fn.hoverOpacity = function(settings) {
	
	function init(caller){ // CREATE A SPAN IN THE LINK WITH 0 OPACITY 
		$(caller).css({
			position:"relative",
			backgroundPosition:"0px 0px",
			cursor:"pointer"
		})
		spanFader = document.createElement('span');
		myBG = $(caller).css("background-image")
		
		$(caller).append(spanFader);
	
		myBG = $(caller).css("background-image")
		spanWidth =  $(caller).css("width")
		spanHeight =  $(caller).css("height")
			
		$(caller).find("span").css({
			backgroundImage:myBG,
			backgroundPosition:"bottom left",
			position:"absolute",
			display:"block",
			cursor:"pointer",
			top:"0px",
			left:"0px",dPosition:"bottom right",
			width:spanWidth,
			height:spanHeight,
			opacity:0,
			visibility:"visible"
		})
	}	

	return this.each(function(){
		caller = this
		init(caller)
		
		$(this).hover(function () { // ON HOVER THIS ANOMATE THE SPAN IN THE LINK
			$(this).find("span").stop()
			$(this).find("span:not(:animated)").animate({opacity: 1}, 240)
		},
		function () {
			$(this).find("span").animate({opacity: 0},220)
		});	
	})
	
}