var allowanimationinterupt = true;
var totalwidth = 0;
var nbritems = 0;
var collapsedwidth = 0;
var $currentli;

$(function () {
    totalwidth = $('ul#sm').width();
    nbritems = $('ul#sm > li').length;
    if (nbritems > 1) collapsedwidth = Math.round((totalwidth - expandedMenuWidth) / (nbritems - 1));

    $('ul#sm > li:last div.col').css('visibility', 'hidden');

    $('ul#sm > li').mouseover(function () {
        if (allowanimationinterupt) openMenu(this, true);
        return false;
    });

    $('ul#sm > li').focusin(function () {
        var alreadyAnimated = false;
        var $li = $(this);
        if ($currentli && ($li.attr('id') == $currentli.attr('id'))) {
            alreadyAnimated = true
        };      
        $currentli = $li;
        if (allowanimationinterupt && !alreadyAnimated) openMenu(this, false);
        return false;
    });
});

function openMenuByIndex(index) {
    if (index > 0) {
        allowanimationinterupt = false;
        openMenu($('ul#sm > li:nth-child(' + index + ')'), false);
    };
};

function openMenu(li, animate) {
var siblings = $(li).siblings();
    $(li).stop(true,false);
    siblings.stop(true,false);

    var animationtime = 250;
    if (!allowanimationinterupt) animationtime = 0;

    $('ul#sm > li:last div.col').css('visibility', 'visible');

    if (animationtime > 0 && animate) {
        siblings.animate({ 'width': collapsedwidth + 'px' }, animationtime, 'swing', null);
        $(li).animate({ 'width': expandedMenuWidth + 'px' }, animationtime, 'swing', function () { allowanimationinterupt = true; });
    } else {
        siblings.css({'overflow': 'hidden', 'width': collapsedwidth + 'px'});
        $(li).css({'overflow': 'visible','width': expandedMenuWidth + 'px'});
        allowanimationinterupt = true;
    };
   
};