jQuery(document).ready(function(){
	jQuery( '#site-buttons ul li' )
		.bind( 'mouseenter', function(){
			var more = jQuery( '.site-button-more', this )
			if( !more[0] ) return;
			
			var img = jQuery( 'img:first', this )
			
			var overlay = jQuery( '.overlay', this )
			if( !overlay[0] ) overlay = jQuery( '<div class="overlay"></div>' ).appendTo( this )
			
			overlay
				.css({
					position: 'absolute',
					left: 0,
					top: jQuery( 'a:first', this ).outerHeight( true ),
					height: img.outerHeight(),
					height: img.outerHeight(),
					width: img.outerWidth(),
					opacity: 0.0,
					background: '#000'
				})
				.animate(
					{opacity: 0.6 },
					{duration: 200, queue: false}
				); 
			
			more
				.css( {top: jQuery( 'a:first', this ).outerHeight( true ) } )
				.show(); 
		} )
		.bind( 'mouseleave', function(){ 
			jQuery( '.site-button-more', this ).hide(); 
			jQuery( '.overlay', this )
			.animate(
				{opacity: 0},
				{duration: 250, queue: false}
			); 
		} )
})