//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;
}
}