/** Aguarda até que o documento esteja pronto. **/
$(document).ready(function(){

    /** Recupera todos os "li"'s dentro de "ul"'s
     *  com a classe "menu". A função "each" irá passar
     *  por cada um dos elementos encontrados e executará a
     *  função anônima passando como parâmetros:
     *  i - contador
     *  obj - referência para o li atual. **/
    $('div.menu ul li').each(function(i, obj){

        /** Vamos esconder os submenus. A função children
         *  funciona como o seletor "$" mas procura por elementos
         *  dentro do objeto, neste caso o "ul" dentro do nosso "li"
         *  referenciado pela variável "obj". **/
        $(obj).children('ul').css({
            'display'   : 'none',
            'position'  : 'absolute',
            'opacity'   : 0,
            'left'      : '-1000px' // Removemos o objeto da área visível
                                    // para evitar eventos disparados enquanto
                                    // ele está escondido.
        });

        /** Evento disparado ao posicionar o cursor
         *  sobre o elemento. **/
        $(obj).mouseenter(function(event){
            /** Vamos posicionar o submenu em relação ao menu. **/
            var menu_position = $(obj).position();
            $(obj).children('ul').css({
                'top'   :   menu_position.top+44,
                'left'  :   menu_position.left-15
            });
			

            /** Tornamos o submenu visivel com o efeito "fade in".
             *  O segundo parâmetro indica o tempo em milisegundos
             *  da animação. **/
            $(obj).children('ul').stop();
			$(obj).children('ul').css('display', 'block').animate({
			
			'opacity' : 1
			}, 500, function(){
			// Para resolver um bug do ie removemos o filtro quando nao
			// precisamos mais dele.
			$(this).css('filter', '');
			});
        });

        /** Evento disparado ao posicionar o cursor
         *  fora do elemento. **/
        $(obj).mouseleave(function(event){
            /** Escondemos o menu com o efeito "fade out" e retiramos da tela
             *  para evitar eventos de hover. O segundo parâmetro indica o tempo
             *  em milisegundos da animação. **/
            $(obj).children('ul').stop();
            $(obj).children('ul').animate({
                'opacity'   : 0
            }, 500, function(){$(this).css({
                    'left'      : '-1000px',
                    'display'   : 'none'
            })});
        });

    });
	


    /** Inicia o lava lamp que irá cuidar do efeito
     *  hover do menu. A função "not" filtra a lista impedindo que
     *  os "ul"'s dos submenus recebam o mesmo efeito.
     *  Este item deve ficar depois do submenu para evitar problemas de
     *  tamanho do efeito "hover". **/
    $("div.menu > ul").lavaLamp({ fx: "backout", speed: 700 });

});