Javascript-форум - Самозаполняющийся statusbar

и в результате сложно понять, что там происходит, не понятно, зачем используются глобальные переменные

<script type="text/javascript">
function start( wrapper, bar, start, end, speed ){
    var cur = start;
    runPeriodically(function(){
        $(wrapper).title = cur+'/'+end;
        $(bar).style.width = cur/end*100+'%';
        if( cur == end )
            return false;

        cur += speed;
        if( cur > end )
            cur = end;
    }, 100)
}

function runPeriodically( f, interval ){ 
    var i = 0; 
    var id = setInterval(function(){ 
        var r = f( i );
        if( r == false )
            clearInterval( id ); 
        i++; 
    }, interval); 
}

function $( el ){
    return   typeof el == 'string' ? document.getElementById(el) : el;
}
</script>
<body onLoad="start('myhp2_full', 'myhp2', 11, 37, 3);">
<div id="myhp2_full"  style="width:500px;height:4px;border:2px solid black;">
<div id="myhp2" style="width:50%;height:4px;background:green;"></div>
</div>
</body>

а еще лучше так (причем css/javascript лучше вынести в отдельные файлы)

<style type="text/css">
.progress-bar {
    width: 500px;
    height: 4px;
    border: 2px solid black;
}
.progress-bar-bar {
    width: 50%;
    height: 4px;
    background: green;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript">
Function.implement({
    runPeriodically: function( interval ){ 
        var i = 0;
        var id = function(){
            var r = this( i );
            if( r == false )
                $clear( id ); 
            i++; 
        }.periodical(interval, this);
    }
});
</script>
<script type="text/javascript">
var ProgressBar = new Class({
    initialize: function( el ){
        this._el = $(el);
        this._el.addClass('progress-bar');
        this._bar = new Element('div', {'class': 'progress-bar-bar'});
        this._bar.inject(this._el);
    },

    start: function( start, end, speed ){
        var cur = start;
        f.bind(this).runPeriodically(300);

        function f(){
            this._el.title = cur+'/'+end;
            this._bar.style.width = cur/end*100+'%';
            if( cur == end )
                return false;

            cur += speed;
            if( cur > end )
                cur = end;
        }
    }
});
</script>
<body>
<div id="progress-bar-1"></div>
<script type="text/javascript">new ProgressBar('progress-bar-1').start(11, 37, 3);</script>
<div id="progress-bar-2"></div>
<script type="text/javascript">new ProgressBar('progress-bar-2').start(1, 37, 1);</script>
</body>