jQuery(function() {
    
    var $ = jQuery;
    // retarder
    $.fn.retarder = function(delay, method){
        var node = this;
        if (node.length){
            if (node[0]._timer_) clearTimeout(node[0]._timer_);
            node[0]._timer_ = setTimeout(function(){ method(node); }, delay);
        }
        return this;
    };
    
    // base rules
    $('ul ul', '#menu').css({display: 'none', left: -2});
    $('li', '#menu').hover(
        function(){
            var ul = $('ul:first', this);
            $('span', ul).css('color', 'rgb(169,169,169)');
            if (ul.length){
                if (!ul[0].wid){
                    ul[0].wid = ul.width();
                    ul[0].hei = ul.height();
                }
                ul.css({width: 0, height: 0, overflow: 'hidden', display: 'block'}).retarder(100, function(i){
                    i.animate({width: ul[0].wid, height: ul[0].hei}, {duration: 300, complete : function(){ ul.css('overflow', 'visible'); }});
                });
            }
        },
        function(){
            var ul  = $('ul:first', this);
            if (ul.length){
                var css = {display: 'none', width: ul[0].wid, height: ul[0].hei};
                ul.retarder(50, function(i){
                    i.animate({width: 0, height: 0}, {duration: 100, complete : function(){  $(this).css(css); }});
                });
            }
        }
    );
    // lava lamp
    $('#menu ul.menu').lavaLamp({
        fx: 'backout',
        speed: 800
    });
    // color animation
    if (!($.browser.msie && $.browser.version.substr(0, 1) == '6')){
        $('ul ul a span', '#menu').css('color', 'rgb(169,169,169)').hover(
            function(){ $(this).animate({color: 'rgb(255,255,255)'}, 500); },
            function(){ $(this).animate({color: 'rgb(169,169,169)'}, 200); }
        );
    }
});