(function($){
    $.fn.navBar = function(options) {
    
        var defaults = {
            height: 5,
            background: '#000',
            speed: 300,
            activeID: "current",
            zIndex: 1
            
        };
        options = $.extend(defaults, options);
        
        return this.each(function() {
           var e = $(this);
            
            var active_li = ($('#'+options.activeID, e).size() > 0) ? $('#'+options.activeID, e) : $(e).find('li:first');
            
            $(e)
                .append("<div class='nav-bar'/>")
                .css({
                    position: 'absolute'   
                })
                    .find('.nav-bar')
                        .css({
                              height: options.height,
                              background: options.background,
                              width: active_li.outerWidth()+'px',
                              position: 'absolute',
                              clear: 'both',
                              'z-index': options.zIndex,
                              bottom: 0,
                              left: (active_li.position().left)+'px'
                        });
            
            $('li', e).hover(function(){
                $('.nav-bar', $(this).parent().parent()).stop().animate({
                   left: ($(this).position().left)+'px',
                   width: $(this).outerWidth()+'px'
                }, options.speed);
            } , function(){
                 $('.nav-bar', $(this).parent().parent()).stop().animate({
                   left: (active_li.position().left)+'px',
                   width: active_li.outerWidth()+'px'
                }, options.speed);
            });                            

        });
    };
})(jQuery);