// 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 = 24;
// 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;
	     case 11: document.imagen.src = document.demo11.id; break;
		 case 12: document.imagen.src = document.demo12.id; break;
		 case 13: document.imagen.src = document.demo13.id; break;
		 case 14: document.imagen.src = document.demo14.id; break;
	     case 15: document.imagen.src = document.demo15.id; break;
		 case 16: document.imagen.src = document.demo16.id; break;
		 case 17: document.imagen.src = document.demo17.id; break;
		 case 18: document.imagen.src = document.demo18.id; break;
		 case 19: document.imagen.src = document.demo19.id; break;
		 case 20: document.imagen.src = document.demo20.id; break;
		 case 21: document.imagen.src = document.demo21.id; break;
		 case 22: document.imagen.src = document.demo22.id; break;
		 case 23: document.imagen.src = document.demo23.id; break;
		 case 24: document.imagen.src = document.demo24.id; break;
      }
   }
}

// función que carga las imágenes pequeñas
function cargarImagenPequeña(URLImagen,  nombreImagen, nombreImagenDemo, contador){
   if(depuracion){
      alert('cargarImagenPequeña(URLImagen,  nombreImagen, contador)');
   }
   switch (contador){
      case 1:   document.demo1.src = URLImagen + nombreImagenDemo;
            document.demo1.id = URLImagen + nombreImagen;
            break;
      case 2: document.demo2.src = URLImagen + nombreImagenDemo;
            document.demo2.id = URLImagen + nombreImagen;
            break;
      case 3: document.demo3.src = URLImagen + nombreImagenDemo;
            document.demo3.id = URLImagen + nombreImagen;
            break;
      case 4: document.demo4.src = URLImagen + nombreImagenDemo;
            document.demo4.id = URLImagen + nombreImagen;
            break;
      case 5: document.demo5.src = URLImagen + nombreImagenDemo;
            document.demo5.id = URLImagen + nombreImagen;
            break;
      case 6: document.demo6.src = URLImagen + nombreImagenDemo;
            document.demo6.id = URLImagen + nombreImagen;
            break;
      case 7: document.demo7.src = URLImagen + nombreImagenDemo;
            document.demo7.id = URLImagen + nombreImagen;
            break;
      case 8:   document.demo8.src = URLImagen + nombreImagenDemo;
            document.demo8.id = URLImagen + nombreImagen;
            break;
      case 9: document.demo9.src = URLImagen + nombreImagenDemo;
            document.demo9.id = URLImagen + nombreImagen;
            break;
      case 10: document.demo10.src = URLImagen + nombreImagenDemo;
             document.demo10.id = URLImagen + nombreImagen;
             break;
	  case 11: document.demo11.src = URLImagen + nombreImagenDemo;
             document.demo11.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;
            nombreImagenDemo = options[i].attributes.getNamedItem('demo').nodeValue;
            cargarImagenPequeña(URLImagen,  nombreImagen, nombreImagenDemo, contador);
            contador++;
         }
         if(contador < 10){
            while(contador < 11){
               cargarImagenPequeña('imagenes/', imagenVacio, 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';
}