//this is my new preloading method
preloadImages =
{
count: 0 /* keep track of the number of images */
,loaded: 0 /* keeps track of how many images have loaded */
,onComplete: function(){} /* fires when all images have finished loadng */
,onLoaded: function(){} /* fires when an image finishes loading */
,loaded_image: "" /* access what has just been loaded */
,images: [] /* keeps an array of images that are loaded */
,incoming:[] /* this is for the process queue. */
/* this will pass the list of images to the loader */
,queue_images: function(images)
{
// make sure to reset the counters
this.loaded = 0;

// reset the images array also
this.images = [];

// record the number of images
this.count = images.length;

// store the image names
this.incoming = images;

// start processing the images one by one
this.process_queue();
}
,process_queue: function()
{
// pull the next image off the top and load it
this.load_image(this.incoming.shift());
}
/* this will load the images through the browser */
,load_image: function(image)
{
var this_ref = this;
var preload_image = new Image;

preload_image.onload = function()
{
// store the loaded image so we can access the new info
this_ref.loaded_image = preload_image;

// push images onto the stack
this_ref.images.push(preload_image);

// note that the image loaded
this_ref.loaded +=1;

// fire the onloaded
(this_ref.onLoaded)();

// if all images have been loaded launch the call back
if(this_ref.count == this_ref.loaded)
{
(this_ref.onComplete)();
}
// load the next image
else
{
this_ref.process_queue();
}
}
preload_image.src = image;
}
}