/*
Class: ImageLoader
	Image preloader with progress reporting
*/
var ImageLoader = new Class({
	version:'.5',
	
	options: {
		progressColor : '#333',
		loadingDiv    : false,
		loadingPrefix : 'loading images: ',
		loadingSuffix : ''
	},
	
	initialize: function(sources, options){
		this.setOptions(options);
		this.loadingDiv = $(this.options.loadingDiv);
		this.images     = [];
		this.index      = 0;
		this.total      = 0;
		
		if(this.loadingDiv) {
			this.loadingText = new Element('div').injectInside(this.loadingDiv);
			this.progressBar = new Element('div', {
				'styles' : {
					'width'   : '100px',
					'padding' : '1px',
					'margin'  : '5px auto',
					'text-align' : 'left',
					'overflow' : 'hidden',
					'border'  : 'solid 1px #333'
					}
			}).adopt(new Element('div', {
				'styles' : {
					'width'  : '0%',
					'height' : '10px',
					'background-color' : '#333'
					}
			}) ).injectInside(this.loadingDiv);
		}
		
		this.loadImages(sources);
	},
	
	reset: function() {
		this.index = 0;
		this.loadingDiv.setStyle('display', '');
		this.progressBar.getFirst().setStyle('width', '0%');
		this.loadingText.setHTML(this.options.loadingPrefix);
	},
	
	loadImages: function(sources) {
		this.reset();
		this.images  = [];
		this.sources = sources;
		this.total   = sources.length;
		
		this.timer = setInterval(this.loadProgress.bind(this), 100);

		for(var i = 0; i < this.total; i++) {
			this.images[i] = new Asset.image(this.sources[i], {
				'onload'  : function(){ this.index++; }.bind(this),
				'onerror' : function(){ this.index++; this.images.splice(i,1); }.bind(this),
				'onabort' : function(){ this.index++; this.images.splice(i,1); }.bind(this)
			});
		}
	},
	
	loadProgress: function() {
		if(this.loadingDiv) {
			this.loadingText.setHTML(this.options.loadingPrefix + this.index + '/' + this.total + this.options.loadingSuffix);
			this.progressBar.getFirst().setStyle('width', parseInt(this.index * 100) / this.total + '%');
		}
		if(this.index >= this.total) this.loadComplete();
	},
	
	loadComplete: function(){
		$clear(this.timer);
		this.loadingDiv.setStyle('display', 'none');
		this.loadingText.setHTML('Loading Complete');
		this.fireEvent('onComplete', this.images);
	},
	
	cancel: function(){
		$clear(this.timer);
	}
	
});

ImageLoader.implement(new Events);
ImageLoader.implement(new Options);