var PreloadImages = {
	delay: null,
	onProgress: function(conunter, index){},
	onComplete: function(){},
	loadTypes: {small: 0, large: 1, incremental: 2},
	imageTypes: {small: 0, large: 1},
	dimensionTypes: {natural: 0, fixed: 1},
	imgWidth: null,
   	imgHeight: null,
   	loadType: null,
   	dimensionType: null,
	init: function() {
		if(!$chk(this.loadType))this.loadType = this.loadTypes.large;
		//if(!$chk(this.loadType))this.loadType = this.loadTypes.small;
		if(!$chk(this.dimensionType))this.dimensionType = this.dimensionTypes.fixed;
		if(!$chk(this.imgWidth))this.imgWidth = 220;
		if(!$chk(this.imgHeight))this.imgHeight = 180;

        switch(this.loadType) {
            case this.loadTypes.small:
            	this.loadImages(this.imageTypes.small);
				break;
			case this.loadTypes.large:
				this.loadImages(this.imageTypes.large);
				break;
			case this.loadTypes.incremental:
				this.loadImages(this.imageTypes.small, function() {
					PreloadImages.loadImages(PreloadImages.imageTypes.large);
				});
				break;
		}
	},
	loadImages: function(imageType, onComplete) {
		var images = $$('.preload');
		var imgs = new Array();
		images.each(function(image, index){
			if(imageType == PreloadImages.imageTypes.small) {
				imgs.push(image.foto1);
				//imgs.push('/public/img/productos/CATESPNAC/es004006.jpg');
			} else if(imageType == PreloadImages.imageTypes.large) {
				imgs.push(image.foto2);
				//imgs.push('/public/img/productos/CATESPNAC/frontal/es004006.jpg');
			}
		});
		
		var myImages = new Asset.images(imgs, {
		    onComplete: function(){

		    	/*
		    	JGM: Este código no es necesario, en teoría se ejecuta correctamente desde el evento onProgress.
		    	Lo dejo para probarlo cuando volvamos a tener problemas ya que aveces no se cargan las imágenes aun cuando han terminado
		    	de descargarse desde el servidor.
		    	Tengo la sospecha de que el evento onProgress no se ejecuta siempre y esto debería solucionarlo.
		    	images.each(function(image){
					var src = imageType == PreloadImages.imageTypes.small? image.foto1: image.foto2;
					image.set('src', src);
					image.relation = image.get('width') / image.get('height');
					if($chk(PreloadImages.imgWidth)) {
						if(PreloadImages.dimensionType == PreloadImages.dimensionTypes.fixed || image.get('width') < PreloadImages.imgWidth) {
							image.set('width', PreloadImages.imgWidth);
							image.set('height', PreloadImages.imgWidth / image.relation);
						}
					} else {
						image.set('width', image.get('width'));
						if($chk(PreloadImages.imgHeight)) {
							if(image.get('height') < PreloadImages.imgHeight) {
								image.set('height', PreloadImages.imgHeight);
								image.set('width', PreloadImages.imgHeight * image.relation);
							}
						} else {
							image.set('height', image.get('height'));
						}
					}
				});
                */
		        PreloadImages.onComplete();
		        if($chk(onComplete)) {
		        	onComplete();
		        }
		    },
			onProgress: function (counter, index) {
				PreloadImages.onProgress(counter, index);
				/*
				  Realizamos la acción para cada una de las imágenes y la condicionamos a que sea la que queremos cargar.
				  Esto es necesario en el caso de querer cargar una imagen más de una vez, Asset llama al método onProgress
				  tantas veces como la hayamos incluido, pero siempre con el índice de la primera imagen.
				*/
				images.each(function(image, index){
					if(
						(imageType == PreloadImages.imageTypes.small && this.get('src').test(image.foto1)) ||
						(imageType == PreloadImages.imageTypes.large && this.get('src').test(image.foto2))
						//|| true
					) {



						images[index].set('src', this.get('src'));
						/*
						JGM: Comento este bloque ya que las imágenes previas están dimensionadas por el atributo class
						que solo define el ancho, el alto se amantiene automáticamente en proporción.
						this.relation = this.get('width') / this.get('height');
						if($chk(PreloadImages.imgWidth)) {
							if(PreloadImages.dimensionType == PreloadImages.dimensionTypes.fixed || this.get('width') < PreloadImages.imgWidth) {
								images[index].set('width', PreloadImages.imgWidth);
								images[index].set('height', PreloadImages.imgWidth / this.relation);
							}
						} else {
							images[index].set('width', this.get('width'));

							if($chk(PreloadImages.imgHeight)) {
								if(this.get('height') < PreloadImages.imgHeight) {
									images[index].set('height', PreloadImages.imgHeight);
									images[index].set('width', PreloadImages.imgHeight * this.relation);
								}
							} else {
								images[index].set('height', this.get('height'));
							}
						}
                        */
					}
				}, this);
			}
		});
	}
};

//window.addEvent('domready', function() {
window.addEvent('load', function() {
	if($chk(PreloadImages.delay)) {
		PreloadImages.init.delay(PreloadImages.delay, PreloadImages);
	} else PreloadImages.init();	
});