var neteditAssetImages = new Class({
	Implements: Options,
	
    options: {
    	images : [],
		durations : [],
		delays: [],
		transitions : 1.5,
		idGallery : 'gallery',
		idProgress : 'progress',
		loop : true
    },
    
    initialize: function(options){
    	this.setOptions(options);
    	this.loadedImages = [];
    	this.bar = document.getElement('#'+this.options.idProgress+' .bar'); 
		this.gallery = $(this.options.idGallery);
		this.progress = $(this.options.idProgress);
    },
    
    start: function (sequence){
    	var thisClass = this;
    	thisClass.progress.setStyle('visibility', 'visible');
    	if(this.loadedImages.length<this.options.images.length){
	    	var myImage = new Asset.images(this.options.images, {
				onProgress: function(i) {
					if(i==0) thisClass.showLoading();
					thisClass.loadedImages[i] = this;
					this.setStyles({
						'position': 'absolute',
						'opacity': 0,
						'left': (thisClass.gallery.getCoordinates().width / 2) - (this.width / 2),
						'top': (thisClass.gallery.getCoordinates().height / 2) - (this.height / 2)
					});
					this.inject(thisClass.gallery);
					var percent = ((i + 1) * thisClass.progress.getStyle('width').toInt()) / thisClass.options.images.length;
					thisClass.bar.setStyle('width', percent).set('html', i + 1 + ' / ' + thisClass.options.images.length);
				},
				onComplete: function(){
					thisClass.hideLoading();
					thisClass.progress.setStyle('visibility', 'hidden');
					if(sequence){
						thisClass.loopSequence();
					}else{
						thisClass.loop();
					}
				}
			});	
    	}
    },
    
    loop: function(){
		var thisClass = this;
		thisClass.loadedImages.each(function(image, i) {

			var fx = function() {
				var imgEffect = new Fx.Tween(image, {property: 'opacity', duration: (thisClass.options.transitions * 1000)});
				imgEffect.start(1).wait(thisClass.options.durations[i]*1000).chain(
					function(){ 
						if (i == thisClass.loadedImages.length - 1) {
							if(thisClass.options.loop){
								imgEffect.start(0);
							}
						}else{
							imgEffect.start(0);
						}
					},
					function(){
						if(thisClass.options.loop){
							if (i == thisClass.loadedImages.length - 1) {
								thisClass.loop();
							}
						}
					}
				);
			}.delay(thisClass.options.delays[i]*1000);
		});
    },
    
    loopSequence: function(){
    	var timer = 0;
		var thisClass = this;
		thisClass.loadedImages.each(function(image, i) {

			var fx = function() {
				
				var imgEffect = new Fx.Tween(image, {property: 'opacity', duration: (thisClass.options.transitions * 1000)});
				imgEffect.start(1).wait(thisClass.options.durations[i]*1000).chain(
				
					function(){ 
						if (i == thisClass.loadedImages.length - 1) {
							if(thisClass.options.loop){
								imgEffect.start(0);
							}
						}else{
							imgEffect.start(0);
						}
						
					},
					function(){
						if(thisClass.options.loop){
							if (i == thisClass.loadedImages.length - 1) {
								thisClass.loopSequence();
							}
						}
					}
					
				);			
			}.delay(timer);

			timer += (((thisClass.options.transitions) * 1000) * 2) + (thisClass.options.durations[i] * 1000);
		});
	},
	
	showLoading: function(){
		var assetLoadImg = $('assetLoadImg');
		if(assetLoadImg){
			assetLoadImg.setStyle('display', 'block');
		}else{
			var div = new Element('div',{style:'position:absolute;'});
			var img = new Element('img',{src:'libs/views/imgs/loading.gif', id:'assetLoadImg', align:'absmiddle'});
			
			div.setStyles({
				'left': (this.gallery.getCoordinates().width / 2) - (img.width / 2),
				'top': (this.gallery.getCoordinates().height / 2) - (img.height / 2)
			});
			img.inject(div);
			div.inject(this.gallery);
		}
	},
	
	hideLoading: function(){
		var assetLoadImg = $('assetLoadImg');
		if(assetLoadImg){
			assetLoadImg.setStyle('display', 'none');
		}
	}
});

/* 
-----------------------------
---------- ESEMPIO ----------
-----------------------------

<script>
window.addEvent('domready',function (){
	var myAsset = new neteditAssetImages(
		{
			images : [
				'files/images/1.jpg',
				'files/images/2.jpg'
			],
			durations : [
				2,
				2
			],
			transitions : 1.5,
			idGallery : 'gallery',
			idProgress : 'progress',
		}
	);
	myAsset.start();
});
</script>

<div id="gallery"><div id="progress"><div class="bar"></div></div></div>
*/