box.dom(document).ready(function() {
    
    box.ui('mask').create({
        id: 'steps',
        html: '<div id="stepsMask"></div>',
        insertTarget: '#steps',
        insertStyles: {height: '#steps:padding-box', opacity: 0},
        insertAnimStyles: {opacity: 0.8},
        insertAnimDuration: 100
    });
    
    var currentStep, timerStep;
    
    function showExpand() {
        if(currentStep && currentStep.length) {
            hideExpand();
        }
        currentStep = box.dom(this);
        timerStep = window.setTimeout(function() {
            box.ui('mask.steps').show();
            box.ui('mask.steps').element.mouseover(hideExpand);
            currentStep.addClass('on').find('div.expand').width(424).slideDown(500);
            isShowing = false;
        }, 500);
    }
    
    function hideExpand() {
        window.clearTimeout(timerStep);
        if(currentStep && currentStep.length) {
            currentStep.removeClass('on').find('div.expand').stop().hide().css('height', 'auto');
            currentStep = null;
            box.ui('mask.steps').hide();
        }
    }
    
    function hideExpandWithoutMask() {
        window.clearTimeout(timerStep);
    }
    
    /* patch pour corriger le bug du mask qui ne disparait pas sous FF. A améliorer. */
    box.dom('#steps').mouseleave(function() {
        box.ui('mask.steps').hide();
    });
    
    box.dom('#steps li').hover(showExpand, hideExpandWithoutMask);
    
    function goToAgeGroup() {
        location.href = box.dom(this).find('a').attr('href');
    }
    
    box.dom('#steps div.expand').click(goToAgeGroup);
    
});