Dynamic image preloaders problem

[ancide]

Alright. I've searched the forum and google but I haven't gotten an answer to my problem.

I'll break it down for you.

I have a gallery, loading images via xml and then using a for loop to add them inside a movieclip.

Now, I need a preloader which shows the progress for each images individually. I haven't figured out how to do this since my urlloader only shows the progress of all images (I think).

Here's what my xml function looks like:

public function renderXML(event:Event):void
        {
            var gallery:XML = new XML(event.target.data);
            numberPictures = gallery.picture.length();
            for (i=0; i <gallery.picture.length(); i++)
            {
            
                xmlObject = new MovieClip();
                xmlObject.x = (i * Step) + 20;
                xmlObject.y = 30;
                galleryRender.galleryItems.addChild(xmlObject);
            
                var thumbLoader:Loader = new Loader();
                xmlObject.addChild (thumbLoader);
                thumbLoader.load (new URLRequest(gallery.picture[i].imagepath));
                thumbLoader.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, thumbLoadProgress);
                
                loaderText = new TextField();
                xmlObject.addChild(loaderText);            
            }
            
            function thumbLoadProgress (event:ProgressEvent):void
                {
                    var pcent:Number=Math.ceil((event.currentTarget.bytesLoaded / event.currentTarget.bytesTotal) * 100);
                    if (pcent != 100)
                    {
                        event.currentTarget.loaderText.text = ("Loading images: " + pcent + "%");
                        event.currentTarget.loaderText.visible = true;
                    }
                    else
                    {
                        event.currentTarget.loaderText.visible = false;
                    }
                }
        } 

Thanks in advance!