/* Roll Functionality, uses jQuery */

$(function() {

    var msUpdate = 8000;

    var timeout = null;
    var index = 0;

    var wait = function(ms) {
        if (timeout != null)
            clearTimeout(timeout);
        timeout = ms ? setTimeout(update, ms) : null;
    }

    var next = function() {
        index = (index + 1) % $('#productmenu>li').size();
        $('#productmenu>li .productbox').hide();
        $('#productmenu>li').eq(index).addClass('active').find('.label a').addClass('active').end().find('.productbox').fadeIn();
        wait(msUpdate);
    };

    var update = function() {
        var $vis = $('#productmenu>li').removeClass('active').find('.label a').removeClass('active').end().find('.productbox:visible');
        if ($vis.size() == 0)
            next();
        else
            $vis.fadeOut('fast', next);
    };

    $('#productmenu>li').hover(function() {
        index = $('#productmenu>li').index(this);
        $('#productmenu>li .productbox').hide();
        $('#productmenu>li, #productmenu>li .label a').removeClass('active');
        $(this).addClass('active').find('.label a').addClass('active').end().find('.productbox').show();
        wait(false);
    }, function() { wait(msUpdate); });

    index = -1;
    update();
});