// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
		$(document).ready(function() {

			/* 	1st example	*/

			/// wrap inner content of each anchor with first layer and append background layer
			$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

			// loop each anchor and add copy of text content
			$("#menu li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu li a").hover(function() {
				// this function is fired when the mouse is moved over
				$(".out",	this).stop().animate({'top':	'40px'},	250).hide(); // move down - hide
				$(".over",	this).stop().animate({'top':	'12px'},		250).show(); // move down - show
				$(".bg",	this).stop().animate({'top':	'-1px'},	120); // move down - show
				
				

			}, function() {
				// this function is fired when the mouse is moved off
				$(".out",	this).stop().animate({'top':	'12px'},		250).show(); // move up - show
				$(".over",	this).stop().animate({'top':	'44px'},	500).hide(); // move up - hide
				$(".bg",	this).stop().animate({'top':	'44px'},	120); // move up - hide
			});
			
			
			
		});