var Preloader = {
  callbacks: [],
  images: [],
  loadedImages: [],
  imagesLoaded: 0,
  image_index: [],
  extra: [],
  
  add: function(image, src, index, extra){

    this.images.push(image);
    this.image_index.push(index);
    this.extra.push(extra);
    
    new_image = new Image();
    //new_image.onload = function(){ Preloader.markFinished.apply(Preloader,[i]) }
    new_image.src = src;
    this.loadedImages.push(new_image);
    
    //this.loadedImages[i] = new Image();
	//this.loadedImages[i].onload = function(){ Preloader.markFinished.apply(Preloader,[i]) }
	//this.loadedImages[i].src = this.images[i];
    callback_preview_cached(image, index);
  },
  onFinish: function(func){
    if (typeof func == 'function') this.callbacks.push(func);
    if (typeof func == 'array' || typeof func == 'object'){
      for (var i=0; i< func.length; i++){
        this.callbacks.push(func[i]);
      }
    }
  },
  load: function(){
    for(var i=0; i<this.images.length; i++){
      this.loadedImages[i] = new Image();
      this.loadedImages[i].onload = function(){ Preloader.markFinished.apply(Preloader,[i]) }
      this.loadedImages[i].src = this.images[i];
    }
  },
  
  loadImage: function(target, index){
    var index;
    //alert(this.image_index);
    //alert(index);
    var found = 0;
    for(i=0;i<this.image_index.length && !found;i++){
        if(this.image_index[i]==index){
            index = i;
            found = 1;
        }
    }
    
    //$(target).src = this.images[index]+ size + "/";
    
    // Global... yuck.
	//image_width =  this.extra[index]['width'];
	//image_height = this.extra[index]['height'];
    //alert(this.image_index);
    //shown_image_id = this.image_index[index]
    
    //alert(shown_image_id);
    //alert(image_width);
    //$(target).setStyle('width', this.extra[index]['width'] + 'px');
    //$(target).setStyle('height', this.extra[index]['height']+'px');
    if(found){
    	data = {'result':1, 'image': this.images[index], 'width': this.extra[index]['width'], 'height':this.extra[index]['height'], 'index':this.image_index[index]};
    }else{
    	data = {'result':0};
    }
    return data
  },
  loadImageByValue: function(target, value){
	    var index;
	    //alert(this.image_index);
	    //alert(index);
	    var found = 0;
	    for(i=0;i<this.image_index.length && !found;i++){
	        if(this.images[i]==value){
	            index = i;
	            found = 1;
	        }
	    }
	    
	    //$(target).src = this.images[index]+ size + "/";
	    
	    // Global... yuck.
		//image_width =  this.extra[index]['width'];
		//image_height = this.extra[index]['height'];
	    //alert(this.image_index);
	    //shown_image_id = this.image_index[index]
	    
	    //alert(shown_image_id);
	    //alert(image_width);
	    //$(target).setStyle('width', this.extra[index]['width'] + 'px');
	    //$(target).setStyle('height', this.extra[index]['height']+'px');
	    if(found)
	    	data = {'result':1, 'image': this.images[index], 'width': this.extra[index]['width'], 'height':this.extra[index]['height'], 'index':this.image_index[index]};
	    else
	    	data = {'result':0};
	    return data
  },
  markFinished: function(index){
    this.imagesLoaded++;
    //this.isLoaded[index]=1;
    //alert(index);
    //if (this.imagesLoaded == this.images.length) this.fireFinish();
  },
  fireFinish: function(){
    for (var i=0; i<this.callbacks.length; i++){
      this.callbacks[i]();
    }
    this.images = [];
    this.loadedImages = [];
    this.imagesLoaded = 0;
    this.callbacks = [];
  }
}