Ox.load('UI', {debug: true}, function() {

    var paused = false,
        width = 384,
        $progressbar = Ox.Progressbar({
                showCancelButton: true,
                showPauseButton: true,
                showPercent: true,
                showTime: true,
                width: width
            })
            .css({margin: '16px'})
            .appendTo(Ox.UI.$body)
            .bindEvent({
                pause: function() {
                    paused = true;
                },
                resume: function() {
                    paused = false;
                },
                cancel: function() {
                    clearInterval(interval);
                }
            }),
        $status = Ox.Label({
                width: width
            })
            .css({marginLeft: '16px'})
            .appendTo(Ox.UI.$body);
        $percent = $('<div>')
            .css({float: 'left', width: '64px', fontWeight: 'bold'})
            .appendTo($status);
        $remaining = $('<div>')
            .css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
            .appendTo($status);
        progress = 0,
        i = 0,
        interval = setInterval(function() {
            if (!paused) {
                if (Math.random() < 0.25) {
                    progress += 0.01;
                    $progressbar.options({progress: progress});
                }
                if (i % 10 == 0 || progress >= 1) {
                    var status = $progressbar.status();
                    $percent.html(Math.round(progress * 100) + '%');
                    $remaining.html('Remaining: ' + status.remaining == Infinity
                        ? 'unknown' : Ox.formatDuration(status.remaining, 'long'));
                }
                if (progress >= 1) {
                    clearInterval(interval);
                }
                i++;
            }
        }, 25);

});