Hello,

I am trying to write a class that dynamically loads scripts and css files, but ran into a problem I just can't seem to solve. Below is a simplified version of the class:

Code:
function DynamicResources(baseUrl)
{
    this.baseUrl = baseUrl;
}

DynamicResources.prototype.loadScript = function(file, onLoad)
{
    var headNode = document.getElementsByTagName('head')[0];
    
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = this.baseUrl + file;
    headNode.appendChild(script);

    script.onload = function() { onLoad(script, file); };
}

DynamicResources.prototype.loadScripts = function(files, onLoad)
{
    loadingFiles = files.slice();
    
    var fileLoaded = function(newNode, file) {
        // Remove from loadingFiles
        var i = 0;
        while(loadingFiles[i] !== file &&  i < loadingFiles.length) i++;
        if(i < loadingFiles.length) loadingFiles.splice(i, 1);
        // Call onLoad if done
        if(onLoad && loadingFiles.length == 0) onLoad(); 
    }  
    
    for(i in files) 
        this.loadScript(files[i], fileLoaded);
}
The loadScripts function should keep track of the scripts that have finished loading by removing them from the loadingFiles array. The problem is, that the changes made to the array in one call to the local function fileLoaded won't show up in the next call (no elements are ever deleted). I suspect this has something to do with scoping rules, but I can't quit get a grip on it.

I would really appreciate any help.