/* http://css-tricks.com/long-dropdowns-solution/ */
var maxHeight = 170;
$(function(){
    $(".dropdown").hover(function() {   
         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller        
        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());        
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");        
        // make sure dropdown appears directly below parent list item    
        $list
            .fadeIn(500)
            .css({paddingTop: $container.data("origHeight")});        
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({height: maxHeight,overflow: "hidden"})
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }        
    }, function() {    
        var $el = $(this);        
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({top:5})
            .fadeOut(500)
            .end()
            .find("a")
            .removeClass("hover");    
    });    
});