/*******

	***	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.exemp").hoverOpacityNormal()
});

jQuery.fn.hoverOpacityNormal = function(settings) {
	settings = jQuery.extend({
		speedHover:300,
		speedOut:250
	}, settings);	
	
	
	function init(caller){ // CREATE A SPAN IN THE LINK WITH 0 OPACITY 
		$(caller).css({
			position:"relative",
			backgroundPosition:"0px 0px",
			cursor:"pointer"
		})
		$(caller).find("span").css({		// ANIMATE A SPAN IN THE <A> TAG TO OVERLAP AND FADE THE HOVER BACKGROUND
			zIndex:19,
			position:"relative"
		})
		
		var spanFader = document.createElement('span');

		var myBG = $(caller).css("background-image")
	
		$(caller).append(spanFader);
			
		$(spanFader).addClass("animHover")
		myBG = $(caller).css("background-image")
		var spanWidth =  parseFloat($(caller).css("width")) + 12
		var spanHeight =   parseFloat($(caller).height()+ 12) 
	
		spanWidth = parseFloat(spanWidth)
		spanHeight = parseFloat(spanHeight)

		$(caller).find("span.animHover").css({		// ANIMATE A SPAN IN THE <A> TAG TO OVERLAP AND FADE THE HOVER BACKGROUND
			backgroundImage:myBG,
			backgroundPosition:"bottom left",
			position:"absolute",
			display:"block",
			cursor:"pointer",
			top:"0px",
			left:"0px",
			width:spanWidth,
			height:spanHeight,
			opacity:0,
			visibility:"visible"
		})
				
	}	

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