$(document).ready(function(){
	///////////////////////////////////////////////////////////////////////////
	// MENU PRINCIPALE
	
	// Scorro tutti i link del menu, estraggo il nome della classe di ogni link, e aggancio un layer (che nascondo subito) che uso per l'hover. Quindi aggancio due funzioni, una per l'over ed una per out per il fadein/fadeout del layer sopra agganciato.
	// Il fondo che uso è sempre quello, lo sposto in funzione del pulsante del menù
	$('#container #menu ul > li a').each(function(i) {	
		var eleCname  =  this.className.split(' ').slice(0,1).toString(); // nome classe a
    
		$("#highlight-menu").append("<div id='highlight-menu-" + eleCname + "' class='menu' style='position: absolute; background-position: 0px -" + 60*(i+1) + "px;'></div>"); // aggancio il layer
	  $("#highlight-menu-" + eleCname).css("opacity", "0"); // nascondo il layer
		
		// aggancio la funzione onHover/onOut
		$("#menu ul li a." + eleCname).hover(
			function () {	$("#highlight-menu-" + eleCname).stop().animate({ opacity: 1}, { queue:false,duration: 100} );	},
			function () { $("#highlight-menu-" + eleCname).stop().animate({ opacity: 0}, { queue:false,duration: 1000}  ); }
		);

	});
	
	
	$(".treColAbstract").hover(
	function(){
		$(this).animate({"top":"3px"}, 300 );
		$(this).css({"cursor":"pointer"});
	},
	function(){
		$(this).animate({"top":"0px"}, 300 );
		$(this).css({"cursor":"arrow"});			
	});


});