JAME.Package('JAME.Components.Preloader');
/*
Title: JAME.Components.Preloader

Script: Preloader.js
    JAME.Components.Preloader - preload images from the array given. 
	it will preload background-images on html elements and images on img elements/path string elements

Section: Dependency
    <JAME.js>

	<JAME.EventDispatcher>

	<JAME.Util.Queue>

	<Style.js>
	
About:
    Version 0.01

License:
	MIT-style license.

Credits:
       - inspired by Mootools, Jquery,Protoype and the community.

Todo:
	-Check the arguments passed to the constructor

	-Change the preloader to start on demand (in order to set the listeners before it fires)

	-Accept a nodelist too

	-give access to the elements downloaded thru an array?

	-Loose dependency to <JAME.CSS.Style> ?


constructor: JAME.Components.Preloader
        Constructor class	

Arguments:
    aElms - can be an array of HTMLElements or an array of strings defying the path to the images to downloads
	aExts - (optional) define the file extensions the preloader will handle (default: jpe*g,gif,png)

Example:
    >var preloader = new JAME.Components.Preloader(['path/to/img.jpg','path/to/img2.jpg']);
    >var preloader = new JAME.Components.Preloader(['path/to/img.jpg','path/to/img2.jpg'],['jpg']);
    >var preloader = new JAME.Components.Preloader([img1,img2]);

Returns:
    a Preloader instance


properties: loaded  
total number of images loaded so far

properties:	succeed 
number of images that loaded successfully so far

properties:	failed  
number of images that failed to load 

properties:	assets  
number of elements to load

properties:	exts    
array of extensions to handle

See Also:

      <JAME.EventDispatcher>
      <JAME.Util.Queue>

Section: Methods

See:

      <JAME.EventDispatcher>
      <JAME.Util.Queue>

Section: Events

Event: onLoadInit
        fired when the loading process start	

Arguments:
    none 

Example:
    >preloader.addListener('onLoadInit',function() { document.getElementsById('test').innerHTML='start';});

Event: onLoadProgress
        fired each time an image had finished downloaded

Arguments:
    oElm - the html element if any
	sUrl - the path of the image 

Example:
    >preloader.addListener('onLoadProgress',function() { 
	>    document.getElementsById('test').innerHTML=preloaded.loaded+'/'+preloaded.assets+'loaded'
	>});

Event: onLoadComplete
        fired once when everything is loaded

Arguments:
    none 

Example:
    >preloader.addListener('onLoadComplete',function() { document.getElementsById('test').innerHTML='done';});

Section: Exported functions
    none

*/


JAME.Components.Preloader  = function(elms,exts) {
	JAME.extend(this,new JAME.Util.Queue());
	JAME.extend(this,new JAME.Events.EventDispatcher());	

	var me = this;
	if(elms.length==0) 	{ 
		setTimeout(function() {
			me.dispatch('onLoadInit');
			me.dispatch('onLoadComplete');
		},100);
		return;
	}
	this.loaded  = this.succeed = this.failed = 0;
	this.exts    = ['jpg','jpeg','png','gif'] || exts;
	this.exts    = new RegExp(this.exts.join('|'),'i');
	this.findAssets(elms);

	this.assets  = this.q.length-1;//minus the final complete event
	this.dispatch('onLoadInit');
};

JAME.extend(JAME.Components.Preloader.prototype, {
	loadAsset: function(elm,url) {
		var me = this;
		if(!url || (elm && elm.complete)) {
			me.loaded++;
			me.dispatch('onLoadProgress',elm);
			me.next();
			return;
		}

		var img = new Image();
		img.onload = img.onerror = img.onabort= function(e) {

			e = e || window.event;
			me.loaded++;
			me[e.type=='load' ? 'succeed' : 'failed']++;
			setTimeout(function() { me.next(); },50); //ie hangs if too much images too load
			me.dispatch('onLoadProgress',elm,url);
		};
		img.src = url;
	},
    findAssets : function(elms) {
		var me = this;
		JAME.each(elms,function(elm,i) {

			if(!elm)         return;

			//assume this is a path to a file
			var src = elm;

			//if it's not, assume an html object
			if(typeof(elm)!='string'){
				if(elm.complete) return;
				//could bid a div with a background-image
				var bg  = JAME.CSS.getStyle(elm,'backgroundImage');
				//could be an img tag
				src = elm.src;
			}

			if(src && me.exts.test(src))
				me.queue(function() { me.loadAsset(elm,src);});
			if(bg &&  bg!=='none') {
				var url = bg.substring(4,bg.length-1).replace(/"/g,'');
				if(url) me.queue(function() { me.loadAsset(elm,url); });
			}
		});
		me.queue(function() { me.dispatch('onLoadComplete') });
	}
});