/*
 * Paginador de la Galeria de Imagenes
 * 2 de Febrero de 2009
 */

(function(){
	
	
	Paginador = {
		//Framework
		jQuery: $,
		
		// Propiedades
		
		pag: 1, // Pagina inicial
		regPag: 9, // Registros a mostrar por pagina
		pagMax: 0, // Maximos de paginas
		registros: [], // Registros obtenidos
		url: "ajaxAux/cargarGaleria.php", // URL donde busca la consulta 
		contenedor: "",
		
		
		// Funciones
		init: function(categoria, contenedor){
			this.pag = 1;
			this.contenedor = contenedor;
			this.obtenerRegistros(categoria);
			this.vaciarContenedor(contenedor);
			this.pintarRegistros(this.contenedor);
		},
		
		
		obtenerRegistros: function(categoria){
			var $ = this.jQuery;
			var registros = this.registros;
			var cat = categoria;
			var pagMax = this.pagMax;
			var regPag = this.regPag;
			var url = this.url;
			var global = this;
			
			// Obtenemos los registros
			$.ajax({
				async: false,
				url: url + "?categoria=" + cat,
				dataType: 'GET',
				success: function(datos){
					if (datos != 0) {
						global.registros = eval(datos);
					}
					else {
						alert('No se recibieron los registros');
					}
				}
				
			});
			
			// Miramos el numero total de paginas
			this.pagMax = Math.ceil(global.registros.length / global.regPag);
			
			
		},
		
		vaciarContenedor: function(contenedor){
			$(contenedor).empty();
		},
		
		pintarRegistros: function(contenedor){
		
		var paginador = this;
			// Pintamos los valores
			var inicio = (this.pag - 1) * this.regPag;
			for (var i = inicio; i < (this.regPag * this.pag); i++) {
				if (this.registros[i]) {
					/* Sistema Tradicional
					var html = '<img src="imgUploads/' + this.registros[i].src + '" title="' +
					this.registros[i].title +
					'" alt="' +
					this.registros[i].alt +
					'" onclick="cargaImagen(' +
					this.registros[i].id +
					',this)" />';
					
					$(html).appendTo(contenedor);*/
					
					/*Prova
					var img = new Image();
  
					  // wrap our new image in jQuery, then:
					  $(img)
					    // once the image has loaded, execute this code
					    .load(function () {
					      // set the image hidden by default    
					      $(this).hide();
					    
					      // with the holding div #loader, apply:
					      $('#loader')
					        // remove the loading class (so no background spinner), 
					        .removeClass('loading')
					        // then insert our image
					        .append(this);
					    
					      // fade our image in to create a nice effect
					      $(this).fadeIn();
					    })
					    
					    // if there was an error loading the image, react accordingly
					    .error(function () {
					      // notify the user that the image could not be loaded
					    })
					    
					    // *finally*, set the src attribute of the new image to our image
					    .attr('src', 'imgUploads/' + this.registros[i].src);
						
						$(img).appendTo(contenedor);
						*/
						///////////////////////////////////////////////
						
						$('<div id="contImg'+i+'" class="cargando" ></div>').appendTo(contenedor);
						
						
						var img = new Image();
						$(img).attr('id',i)
						.load(function(){
							
							$(this).hide();
							
							if(this.height>this.width){
								$(this).attr("class","miniV");
							}
							else{
								$(this).attr("class","miniH");
							}
							
							$('#contImg'+this.id).removeClass('cargando');
							$(this).appendTo('#contImg'+this.id)
							$(this).fadeIn();					
							
						})
						.attr({
							'src': 'imgUploads/' + paginador.registros[i].src,
							'title': this.registros[i].title,
							'alt': this.registros[i].alt
							
						})
						.click(function(){
							cargaImagen(' +this.registros[i].id +',this)
						})
						//alert(paginador.registros[i].src);
				}
				else {
					break;
				}
				
			}
			
		},
		
		siguiente: function(){
		
			if (this.pag < this.pagMax) {
				this.pag++;
				this.vaciarContenedor(this.contenedor);
				this.pintarRegistros(this.contenedor);
			}
			(this.pag == this.pagMax) ? $('#flechaDer').fadeOut() : $('#flechaDer').fadeIn();
			(this.pag == 1) ? $('#flechaIzq').fadeOut() : $('#flechaIzq').fadeIn();
		},
		
		anterior: function(){
			if (this.pag > 1) {
				this.pag--;
				this.vaciarContenedor(this.contenedor);
				this.pintarRegistros(this.contenedor);
			}
			(this.pag == 1) ? $('#flechaIzq').fadeOut() : $('#flechaIzq').fadeIn();
			(this.pag == this.pagMax) ? $('#flechaDer').fadeOut() : $('#flechaDer').fadeIn();
			
		}
	
	
	
	}
	})()