function CargarProductosAjax(numPag,familia,subfamilia) {
/*	var opciones = {
		// función a llamar cuando reciba la respuesta
		onSuccess: function(jsonObj) {
        datos = eval(jsonObj.responseText);
		procesar(datos);
		},
        parameters : "name=productos"
	}

	new Ajax.Request('datos2.php?pagina='+ numPag, opciones);
*/
    var request = new Request.JSON({
			url: '/datos_galeria2.php?pagina='+ numPag +'&fam='+familia+'&subfam='+subfamilia,
			onComplete: function(jsonObj) {
				//Asignamos el objeto productos del
				datos= jsonObj.productos;
                procesar(datos,numPag,familia,subfamilia);
			}
		}).send();

}

function procesar(datos,numPag,familia,subfamilia) {
	///alert(numPag)
   var imagenes_path = '/archivos/productos/140/';

   contenedor = document.getElementById("contenedor_productos");
   capa_paginar = document.getElementById("paginar_productos");
   
    function MostrarDato(dato) {
           
           /* txtDato = '';
            cabecera= '<div class="preview">';
            nombre='';
            foto ='';
            familia='';
            id='';
            fin='</div>';
            id='<h3>' + dato.idPro+ '</h3>';
            nombre='<span>'+ dato.nombre+ '</span>';
            foto= '<img src="' + imagenes_path + dato.ruta1 + '">';
            familia='<span class="popular">' + dato.idFam + '</span>';

            txtDato= cabecera + id+ nombre + foto + familia + fin;*/
			
			//txtDato = '<div class="capa_producto"><table border="0" cellpadding="0" cellspacing="0"><tr><td align="left" valign="top" width="140"><table border="0" cellpadding="0" cellspacing="0" width="140"><tr><td align="left" valign="top"><img src="' + imagenes_path + dato.ruta1 + '" width="140" height="140" border="0"></td></tr><tr><td align="left" valign="top"><font class="referenciaazul">' + dato.codReferencia + ' | </font><font class="referenciaazul">'+ dato.idSubFam +'</font></td></tr><tr><td align="left" valign="top"><font class="cabeceraNotPortada"> '+dato.nombre+'</font></td></tr><tr><td align="left" valign="top"><img src="/nueva/elementos/ico_comment_azul.jpg" style="vertical-align:middle" border="0">&nbsp;<font class="comentalo">Coméntalo</font></a></td></tr><tr><td><img src="/nueva/elementos/cuadrotransparente.gif" width="1" height="2"></td></tr><tr><td><img src="/nueva/elementos/cuadrotransparente.gif" width="1" height="2"></td></tr></table></td><td width="40"><img src="/nueva/elementos/cuadrotransparente.gif" width="40" height="1"></td></tr></table></div>';
			
			if(dato.indice=='5')
			{
				txtDato = '<div class="capa_producto_limpiar"><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><img src="' + imagenes_path + dato.ruta1 + '" width="140" height="140" border="0" alt="'+dato.nombre+'"></a></div><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><font class="'+dato.estiloSub+'">' + dato.codReferencia + ' | </font><font class="'+dato.estiloSub+'">'+ dato.nombreSubFamilia +'</font></a></div><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><font class="cabeceraNotPortada"> '+dato.nombre+'</font></a></div><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><img src="'+dato.icocoment+'" style="vertical-align:middle" border="0">&nbsp;<font class="comentalo">'+dato.com+'</font></a></div></div>';
			}	
			else
			{
				txtDato = '<div class="capa_producto"><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><img src="' + imagenes_path + dato.ruta1 + '" width="140" height="140" border="0" alt="'+dato.nombre+'"></a></div><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><font class="'+dato.estiloSub+'">' + dato.codReferencia + ' | </font><font class="'+dato.estiloSub+'">'+ dato.nombreSubFamilia +'</font></a></div><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><font class="cabeceraNotPortada"> '+dato.nombre+'</font></a></div><div class="capa_foto_producto"><a href="/index.php?sec=7&id='+dato.idProd+'&fam='+dato.idFam+'" title="'+dato.nombre+'"><img src="'+dato.icocoment+'" style="vertical-align:middle" border="0">&nbsp;<font class="comentalo">'+dato.com+'</font></a></div></div>';
			}
			
            return txtDato;

	}

    texto = "";

    var numReg=datos.length;
	
	var totalPag = 0;
	var colorpag;
	var flechaizq;
	var flechadcha;
    for (var i=0; i < numReg ; i++) {
		dato = datos[i];
		
		//Damos valor a la variable totalPag para poder hacer el paginar
		totalPag = dato.totalPag;
		colorpag = dato.colorpag;
		flechaizq = dato.flechaizq;
		flechadcha = dato.flechadcha;
        
        //Obtenemos el codigo html del registro actual
        txtDato= MostrarDato(dato);

        //Añadimos la la lista
        texto+=txtDato;
    }
	
	//alert(totalPag);

    //Asignamos los objectos a la capa de galeria
    contenedor.innerHTML = texto;
	
	var paginaAnt = numPag-1;
	var paginaSig = numPag+1;
	//alert(paginaAnt);
	
		
	//texto_paginar = '<font class="cabeceraNotPortada" onclick="CargarProductosAjax('+paginaAnt+','+familia+')" style="cursor:pointer"><< Anterior&nbsp;&nbsp;&nbsp;</font><font class="cabeceraNotPortada" onclick="CargarProductosAjax('+paginaSig+','+familia+')" style="cursor:pointer">&nbsp;&nbsp;&nbsp;Siguiente >></font>';
	texto_paginar = ''+totalPag+'';
	if(paginaAnt != 0)
	{
		texto_paginar = '<div class="pagina_anterior"><font class="cabeceraNotPortada" onclick="CargarProductosAjax('+paginaAnt+','+familia+','+subfamilia+')" onmouseover="document.images[\'anterior\'].src=\''+flechaizq+'\'" onmouseout="document.images[\'anterior\'].src=\'/nueva/elementos/flecha_gris_izq.png\'" style="cursor:pointer"><img src="/nueva/elementos/flecha_gris_izq.png" style="vertical-align:middle" name="anterior">&nbsp;&nbsp;&nbsp;</font></div>';
	}
	else
	{
		texto_paginar = '<div class="pagina_anterior"><font class="cabeceraNotPortada" onmouseover="document.images[\'anterior\'].src=\''+flechaizq+'\'" onmouseout="document.images[\'anterior\'].src=\'/nueva/elementos/flecha_gris_izq.png\'"><img src="/nueva/elementos/flecha_gris_izq.png" style="vertical-align:middle" name="anterior">&nbsp;&nbsp;&nbsp;</font></div>';
	}
	///alert(totalPag)
	
	
	
	for (var f=1; f <= totalPag ; f++) 
	{
		
		
		if(f<10)
		{
			if(f==totalPag)
			{
				texto_paginar += '<div class="pagina_intermedia"><font onclick="CargarProductosAjax('+f+','+familia+','+subfamilia+')" style="cursor:pointer;font-family:Tahoma,Geneva,sans-serif;font-size:11px;color:'+colorpag+';">0'+f+'</font></div>';
			}
			else
			{
				texto_paginar += '<div class="pagina_intermedia"><font onclick="CargarProductosAjax('+f+','+familia+','+subfamilia+')" style="cursor:pointer;font-family:Tahoma,Geneva,sans-serif;font-size:11px;color:'+colorpag+';">0'+f+'|</font></div>';
			}
		}
		else
		{
			if(f==totalPag)
			{
				texto_paginar += '<div class="pagina_intermedia"><font onclick="CargarProductosAjax('+f+','+familia+','+subfamilia+')" style="cursor:pointer;font-family:Tahoma,Geneva,sans-serif;font-size:11px;color:'+colorpag+';">'+f+'</font></div>';
			}
			else
			{
				texto_paginar += '<div class="pagina_intermedia"><font onclick="CargarProductosAjax('+f+','+familia+','+subfamilia+')" style="cursor:pointer;font-family:Tahoma,Geneva,sans-serif;font-size:11px;color:'+colorpag+';">'+f+'|</font></div>';
			}
		}
	}
	
	if(paginaSig <= totalPag)
	{
		texto_paginar += '<div class="pagina_siguiente"><font class="cabeceraNotPortada" onclick="CargarProductosAjax('+paginaSig+','+familia+','+subfamilia+')" onmouseover="document.images[\'siguiente\'].src=\''+flechadcha+'\'" onmouseout="document.images[\'siguiente\'].src=\'/nueva/elementos/flecha_gris_der.png\'" style="cursor:pointer">&nbsp;&nbsp;&nbsp;<img src="/nueva/elementos/flecha_gris_der.png" style="vertical-align:middle" name="siguiente"></font></div>';
	}
	else
	{
		texto_paginar += '<div class="pagina_siguiente"><font class="cabeceraNotPortada" onmouseover="document.images[\'siguiente\'].src=\''+flechadcha+'\'" onmouseout="document.images[\'siguiente\'].src=\'/nueva/elementos/flecha_gris_der.png\'">&nbsp;&nbsp;&nbsp;<img src="/nueva/elementos/flecha_gris_der.png"  style="vertical-align:middle" name="siguiente"></font></div>';
	}
	
	//introducimos el html que queremos mostrar en capa_paginar
	capa_paginar.innerHTML = texto_paginar;

}