长水平菜单，显示/隐藏隐藏的菜单项（使用左/右箭头按钮）

Question

我正在尝试创建一个长水平菜单，如果菜单项（超出窗口宽度），将有箭头按钮显示隐藏的菜单项，并在单击向左/向右箭头按钮时显示。

目前几乎正常工作的演示http://jsfiddle.net/yeyene/G5eHf/1/

请帮我控制箭头按钮，隐藏所有菜单项的显示时间， （意思是点击一两次后，将没有菜单项，我想隐藏右箭头按钮）

＆安培;

在没有更多菜单项显示时（当它到达第一个菜单项时）隐藏左箭头按钮，反之亦然。

*我还希望在到达最后一个菜单项时停止菜单滑动。

Jquery的

$(document).ready(function () {
    var li_width = 0;
    $('#menu li').each(function () {
        li_width = 2+li_width + $(this).outerWidth();
    });
    $('#menu').css({'width':li_width});
    if ($(window).width() < li_width) {
        $('#arrow_r').css({'top':'-'+$('#menu li').outerHeight()+'px'}).show();
    } else {
        $('#arrow_r').hide();
    }

    $(document).on('click','#arrow_r',function () {
        var scrollWidth = ($('#menu').width()-$('#wrapper').width());
        var count = Math.floor($('#menu').width()/$('#wrapper').width());        
        //alert([scrollWidth,count]);        
        $('#menu').animate({
            left: '-='+scrollWidth
        },1000,function(){
            $('#arrow_l').css({'top':'-'+$('#menu li').outerHeight()+'px'}).show(); 
        });
    });

    $(document).on('click','#arrow_l',function () {
        $('#menu').animate({
            left: '+='+($('#menu').width()-$('#wrapper').width())
        },1000,function(){
            $('#arrow_r').show(); 
        });
    });
});