Problem with reloading images in a grid

programming flash
1

Hi guys, I have good knowledge in AS2, but now I am considering it is time to learn some AS3 and make the switch. I faced a problem with a code and I ask you for some help.
I want to load a number of images into a grid and have the possibility to remove them and reload them at any time by pressing a button. The code is not working as I want… if I’m not waiting the loading to complete and I press the button which calls the loadGrid function then the loading process is stopped or is messed up. The compiler trows the error TypeError: Error #2007: Parameter child must be non-null. at flash.display::DisplayObjectContainer/addChild()

I’ve put an online example here: http://www.juliandima.com/labs/gridGallery/index.html

And bellow is the whole code that I’m using except the xml loading part which is working properly



////////FUNCTIONS DECLARATION


// create function to load grid
function loadGrid():void {
    // close loading stream
    try{
        imageLoader.close();
    }
    catch(error:Error){
        //trace(error);
    }        
    // declare some local variables
    var productY:uint = 0;
    var productX:uint = 0;
    var product:MovieClip;
    var path:String;
    var productCounter:uint = 0;
    //
    var totalProductsPerRow:uint = Math.floor(stage.stageWidth/(productWidth+horizontalSpace));
    var totalProductsPerColumn:uint = Math.floor((stage.stageHeight)/(productHeight+verticalSpace));
    // restore queue
    imagesArray.length = 0;
    loadingCounter = 0;
    // remove all products from grid
    while(grid.numChildren){
        grid.removeChildAt(0);
    }
    // add products
    for(var i:uint=0; i<totalProducts; i++){
        product = new SmallProduct();
        product.name = String("smallProduct"+i);
        product.preloader.visible = true;
        product.x = productX;
        product.y = productY;
        grid.addChild(product);
        // get path
        path = XMLData.products.product*.photos.photoSmall;
        // push path and container in array
        imagesArray.push(path);        
        // increment counter
        productCounter++;
        // 
        if(productCounter%totalProductsPerRow == 0){
            productX=0;
            productY+=(productHeight+verticalSpace);
        }else{
            productX+=(productWidth+horizontalSpace);
        }
    }
    // load first product from queue
    if(imagesArray.length){
        loadProductImage(imagesArray[loadingCounter]);
    }
}

function loadProductImage(str:String):void{
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded, false, 0, true);
    imageLoader.load(new URLRequest(str));
}


function imageLoaded(e:Event):void {
    //remove event listeners
    imageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, imageLoaded);
    // get bitmap from loader
    var bitmap:DisplayObject  = imageLoader.content;
    // unload loader
    imageLoader.unload();
    // add bitmap to its container
    var product:MovieClip = MovieClip(grid.getChildAt(loadingCounter));
    product.container.addChild(bitmap);    
    // hide preloader
    product.preloader.visible = false;
    // increment loading counter
    loadingCounter++;
    if(loadingCounter < imagesArray.length){
        loadProductImage(imagesArray[loadingCounter]);
    }
}

// create function to respond on reloadBtn click
function onReloadBtnClick(e:MouseEvent){
    loadGrid();
}
    

// add event listener
reloadBtn.addEventListener(MouseEvent.CLICK, onReloadBtnClick, false, 0, true);
reloadBtn.mouseChildren = false;
reloadBtn.buttonMode = true;
reloadBtn.useHandCursor = true;
/////////////////////////////////


////////VARIABLES DECLARATION


var totalProducts:uint;
var verticalSpace:uint = 10;
var horizontalSpace:uint = 10;
var productHeight:uint = 140;
var productWidth:uint = 160;

// an array for loading small images one by one
var imagesArray:Array = new Array();
var imageLoader:Loader = new Loader();
var loadingCounter:uint = 0;