// variable que contendrá al objeto XMLHttpRequest
var ObjectoXMLHttpRequest = false;
// variable en donde se almacenaran las imágenes que serán leídas desde el XML
var options;
// máximo de imágenes pequeñas a mostrar
var maxImagenesMostar = 10;
// variable que contiene el número de páginas a mostrar, están divididas en este caso de 10 en 10
var pagina = 0;
// variable de control que contiene el máximo de paginas
var totalPaginas = 0;
// imagen a patir de la cual se comenzara a cargar las imágenes al momento de cargar la página por primera vez
var comenzar = 0;
// variable que indica si esta en depuración
var depuracion = false;
// URL del servidor en donde se llamaran las imágenes
var URLservidor = 'http://localhost/AJAX/Gallery/';
// archivo XML que contiene las propiedades de las imágenes
var archivoXML = 'imagenes.xml';
// imagen por defecto a mostrarse cuando no se carga ninguna imagen del servidor
var imagenVacio = 'vacio.gif';

// Creación del ObjectoXMLHttpRequest
try{
	ObjectoXMLHttpRequest = new ActiveXObject("MSXML2.XMLHTTP");
}catch(exception1){
	try{
		ObjectoXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}catch(exception2){
		ObjectoXMLHttpRequest = false;
	}
}
if(!ObjectoXMLHttpRequest && window.XMLHttpRequest){
	ObjectoXMLHttpRequest = new XMLHttpRequest();
}

// función que muestra la imagen seleccionada de la las imágenes pequeñas
function mostrarImagen(idDemo){ // recibe el id que referencia a la imagen pequeña que contiene la imagen a mostrar
	if(depuracion){
		alert('mostrarImagen()');
	}
	mostarCargador();
	if(idDemo != imagenVacio){
		switch (idDemo){
			case 1: document.imagen.src = document.demo1.id;
					break;
			case 2: document.imagen.src = document.demo2.id;
					break;
			case 3: document.imagen.src = document.demo3.id;
					break;
			case 4: document.imagen.src = document.demo4.id;
					break;
			case 5: document.imagen.src = document.demo5.id;
					break;
			case 6: document.imagen.src = document.demo6.id;
					break;
			case 7: document.imagen.src = document.demo7.id;
					break;
			case 8: document.imagen.src = document.demo8.id;
					break;
			case 9: document.imagen.src = document.demo9.id;
					break;
			case 10: document.imagen.src = document.demo10.id;
					break;
		}
	}
}

// función que carga las imágenes pequeñas
function cargarImagenPequeña(URLImagen,  nombreImagen, contador){
	if(depuracion){
		alert('cargarImagenPequeña(URLImagen,  nombreImagen, contador)');
	}
	switch (contador){
		case 1:	document.demo1.src = URLImagen + nombreImagen;
				document.demo1.id = URLImagen + nombreImagen;
				break;
		case 2: document.demo2.src = URLImagen + nombreImagen;
				document.demo2.id = URLImagen + nombreImagen;
				break;
		case 3: document.demo3.src = URLImagen + nombreImagen;
				document.demo3.id = URLImagen + nombreImagen;
				break;
		case 4: document.demo4.src = URLImagen + nombreImagen;
				document.demo4.id = URLImagen + nombreImagen;
				break;
		case 5: document.demo5.src = URLImagen + nombreImagen;
				document.demo5.id = URLImagen + nombreImagen;
				break;
		case 6: document.demo6.src = URLImagen + nombreImagen;
				document.demo6.id = URLImagen + nombreImagen;
				break;
		case 7: document.demo7.src = URLImagen + nombreImagen;
				document.demo7.id = URLImagen + nombreImagen;
				break;
		case 8:	document.demo8.src = URLImagen + nombreImagen;
				document.demo8.id = URLImagen + nombreImagen;
				break;
		case 9: document.demo9.src = URLImagen + nombreImagen;
				document.demo9.id = URLImagen + nombreImagen;
				break;
		case 10: document.demo10.src = URLImagen + nombreImagen;
				 document.demo10.id = URLImagen + nombreImagen;
				 break;
	}
}

// función que carga las imágenes del documento XML
function cargarImagenesXML(comenzar){
	if(depuracion){
		alert('cargarImagenesXML()');
	}
	if(ObjectoXMLHttpRequest){
		// llamada del documento XML
		ObjectoXMLHttpRequest.open('GET',URLservidor + archivoXML, true);
	}
	ObjectoXMLHttpRequest.onreadystatechange = function(){
		if(ObjectoXMLHttpRequest.readyState == 4 && ObjectoXMLHttpRequest.status == 200){
			var documentoXML = ObjectoXMLHttpRequest.responseXML;
			options = documentoXML.getElementsByTagName('imagen');
			contador = 1;
			vaciarImagenesPequeñas();
			calcularpaginas(options.length);
			// recorrido del documento XML
			for (i = comenzar; i < options.length; i++){
				if(depuracion){
					alert('URLImagen ' + URLImagen);
					alert('nombreImagen ', + nombreImagen);
				}
				URLImagen =  options[i].attributes.getNamedItem('carpeta').nodeValue;
				nombreImagen =  options[i].attributes.getNamedItem('nombre').nodeValue;
				cargarImagenPequeña(URLImagen,  nombreImagen, contador);
				contador++;
			}
			if(contador < 10){
				while(contador < 11){
					cargarImagenPequeña('imagenes/', imagenVacio, contador);
					contador += 1;
				}
			}
		}
	}
	ObjectoXMLHttpRequest.send(null);
	return false;
}

// buscas 10 imagenes pequeñas previas si las hay
function imagenesPrevias(){
	if(depuracion){
		alert('imagenesPrevias()');
	}
	vaciarImagenesPequeñas();
	if(pagina > 0){
		pagina -= 1;
		comenzar -= 10;
		cargarImagenesXML(comenzar);
	}
}

// buscas 10 imagenes pequeñas siguientes si las hay
function imagenesSiguientes(){
	if(depuracion){
		alert('imagenesSiguientes()');
	}
	vaciarImagenesPequeñas();
	if(pagina < totalPaginas){
		pagina += 1;
		comenzar += 10;
		cargarImagenesXML(comenzar);
	}
}

// función para vaciar las imágenes pequeñas cuando se llama alguna de las funciones imagenesPrevias() o imagenesSiguientes()
function vaciarImagenesPequeñas(){
	if(depuracion){
		alert('vaciarImagenesPequeñas()');
	}	
	document.demo1.src = 'imagenes/indicator_arrows.gif';
	document.demo2.src = 'imagenes/indicator_arrows.gif';
	document.demo3.src = 'imagenes/indicator_arrows.gif';
	document.demo4.src = 'imagenes/indicator_arrows.gif';
	document.demo5.src = 'imagenes/indicator_arrows.gif';
	document.demo6.src = 'imagenes/indicator_arrows.gif';
	document.demo7.src = 'imagenes/indicator_arrows.gif';
	document.demo8.src = 'imagenes/indicator_arrows.gif';
	document.demo9.src = 'imagenes/indicator_arrows.gif';
	document.demo10.src = 'imagenes/indicator_arrows.gif';
}

// función para calcular el número de páginas
function calcularpaginas(totalImagenes){
	totalPaginas = Number(totalImagenes/maxImagenesMostar)-1;
}

// funcion que muestra las imagen del cargador
function mostarCargador(){
	if(depuracion){
		alert('mostarCargador()');
	}
	document.imagen.src = 'imagenes/indicator_arrows.gif';
}