/*
THANKS YOU TO :

SCREEN STYLESHEET FOR JQUERY REALISTIC HOVER EFFECT
CREATED BY ADRIAN PELLETIER
HTTP://WWW.ADRIANPELLETIER.COM

*/

/*--B ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
	NAVIGATION ON SELECTION ICON BUTTON ANIMATE
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* INFO = STARTING OF THE JS SCRIPTS CODE */


	// BEGIN JQUERY
	
		$(document).ready(function() {

				
/* =SHADOW NAV
	-------------------------------------------------------------------------- */
/*FOR LINK THE ICON SHADOW PNG IMAGE HERE UNDER src*/
	
	// APPEND SHADOW IMAGE TO EACH LI

		$("#nav-shadow li").append('<img class="shadow" src="images/selection-button-shadow.png"  width="36" height="16" alt="" />');
	
	
	// ANIMATE BUTTONS, SHRINK AND FADE SHADOW
		
		$("#nav-shadow li").hover(function() {
			var e = this;
		    $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
		    	$(e).find("a").animate({ marginTop: "-10px" }, 250 /* THIS IS TO CONTROL THE ANIMATION SPEED*/);
		    });
		    $(e).find("img.shadow").stop().animate({ width: "80%", height: "36px", marginLeft: "10px", opacity: 0.25 }, 250);
		},function(){
			var e = this;
		    $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
		    	$(e).find("a").animate({ marginTop: "0px" }, 250);
		    });
		    $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
		});
						
	// END JQUERY
	
		});