ImgLoader = {}
ImgLoader.queue = {};
ImgLoader.interval = null;

ImgLoader.add = function(opt) {
	if (opt.wrapper == null) return;
	
	var evalCode = opt.evalCode != null ? opt.evalCode : null;
	var w = opt.wrapper.getSize().x - opt.wrapper.getStyle('border-width').toInt() * 2 - opt.wrapper.getStyle('padding').toInt() * 2;
	var h = opt.wrapper.getSize().y - opt.wrapper.getStyle('border-width').toInt() * 2 - opt.wrapper.getStyle('padding').toInt() * 2;
	var img = new Element('img', { src: '/images/ajax-loader.gif' });
	img.setStyles({ margin: Math.floor(h / 2 - 12) + 'px ' + Math.floor(w / 2 - 12) + 'px' });
	opt.wrapper.set('html', '');
	opt.wrapper.grab(img);
		
	var image = new Image();
	image.src = opt.src;
	this.queue[opt.wrapper.id] = { img: image, evalCode: evalCode };
	
	if (this.interval == null)
		this.interval = setInterval(this.update.bind(this), 100);
}
	
ImgLoader.update = function() {
	var count = 0;
	for (var wrapper in this.queue) {
		count++;
		if (this.queue[wrapper].img.complete) {
			$(wrapper).set('html', '');
			var img = new Element('img', { src: this.queue[wrapper].img.src });
			img.setStyle('display', 'none');
			$(wrapper).grab(img);
			if ($(wrapper).getSize().y - $(wrapper).getStyle('border-width').toInt() * 2 - $(wrapper).getStyle('padding').toInt() * 2 != this.queue[wrapper].img.height) {
				$(wrapper).set('morph', {
					onComplete: function(elem) {
						elem.getElement('img').setStyle('display', 'block');
					}
				});
				$(wrapper).morph({ height: this.queue[wrapper].img.height });
			}
			else
				img.setStyle('display', 'block');
			
			if (this.queue[wrapper].evalCode != null)
				this.queue[wrapper].evalCode();
			delete this.queue[wrapper];
		}
	}
	
	if (!count) {
		clearInterval(this.interval);
		this.interval = null;
	}
}