/**
 * @author William
 */
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;
  }
}