/**
 * Initial variables
 **/
window.onload    = f_init;		// attach our function to the event
document.onkeyup = f_keys;		// attach our function to the event
var nSel = 0;					// currently selected
var nMax = 0;					// how many previews
var nImgIni = 0;				// first preview visible
var nImgFin = 2;				// last  preview visible
var hCheck  = -1;				// handler for the loading update
var aImages = new Array();		// array with instaces of classImage
/**
 * Los links de avance en el div de control,
 * tienen id para permitir que desde CSS se pueda cambiar el display y el background
 * dando así sensación de botón, por ejemplo.
 **/
var cteLinkA = "<p><a id=\"btnPrev\" accesskey=\"a\" href=\"javascript: f_setCurrent(-1)\">&lt; <strong>A</strong>nterior</a>";
var cteLinkS = "<a id=\"btnNext\" accesskey=\"s\" href=\"javascript: f_setCurrent(+1)\"><strong>S</strong>iguiente &gt;</a></p>";
/**
 * Class Image
 * constructor (Preview image path, Enlarged image path, title)
 **/
function classImage() {
	this.nImage = arguments[0];
	this.sPrev  = arguments[1];
	this.sZoom  = arguments[2];
	this.sTitle = arguments[3];
	this.objImagePrev = null;
	this.objImageZoom = null;
	this.isLoaded        = classImage_isLoaded;
	this.setPrevId	     = classImage_setPrevId;
	this.unsetPrevId     = classImage_unsetPrevId;
	this.setPrevVisible  = classImage_setPrevVisible;
	this.setZoomVisible  = classImage_setZoomVisible;
	this.setPrevSelected = classImage_setPrevSelected;
	this.objImagePrev = new Image();
	this.objImagePrev.src = this.sPrev;
	this.objImagePrev.onclick = f_set;
	this.objImagePrev.setAttribute("nImg", this.nImage);
	this.objImageZoom = new Image();
	this.objImageZoom.src = this.sZoom;
	this.objDivPrev = null;
	this.objParagraph = null;
}
function classImage_isLoaded() {
	return this.objImagePrev.complete && this.objImageZoom.complete;
}
function classImage_setPrevVisible() {
	this.objImagePrev.style.visibility = (arguments[0]?"visible":"hidden");
}
function classImage_setZoomVisible() {
	this.objImageZoom.style.visibility = (arguments[0]?"visible":"hidden");
	this.objImageZoom.setAttribute("class",     (arguments[0]?"enlargedSel":"enlargedUns"));
	this.objImageZoom.setAttribute("className", (arguments[0]?"enlargedSel":"enlargedUns"));
	if(this.objParagraph!=null) {
		var oFirstChild = this.objParagraph.firstChild;
		if(oFirstChild!=null) this.objParagraph.removeChild(oFirstChild);
		if(arguments[0]) this.objParagraph.appendChild(document.createTextNode(this.sTitle));
	}
}
function classImage_setPrevSelected() {
	this.objImagePrev.setAttribute("class",     (arguments[0]?"previewSel":"previewUns"));
	this.objImagePrev.setAttribute("className", (arguments[0]?"previewSel":"previewUns"));
}
function classImage_setPrevId() {
	if(this.objDivPrev!=null) {
		this.objDivPrev.setAttribute("id", arguments[0]);
	}
}
function classImage_unsetPrevId() {
	if(this.objDivPrev!=null) {
		this.objDivPrev.removeAttribute("id");
		this.objDivPrev.setAttribute("class",     arguments[0]);
		this.objDivPrev.setAttribute("className", arguments[0]);
	}
}
/**
 * DOM from XML file
 **/
function getXml(sFileName) {
	var sUserAgent = navigator.userAgent.toLowerCase();
	var isFireFox  = (sUserAgent.indexOf("firefox")!=-1);
	var isExplorer = (sUserAgent.indexOf("msie")!=-1);
	if(isFireFox) {
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("GET", sFileName, false);
		xmlHttp.send(null);
		return xmlHttp.responseXML;
	} else if(isExplorer) {
		var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		xmlHttp.open("GET", sFileName, false);
		xmlHttp.send(null);
		return xmlHttp.responseXML;
	}
	return null;
}
/**
 * DOM usefull functions
 **/
function getValueOfNodeText(node) {
	var retval = "";
	for(iter=0; iter<node.childNodes.length; iter++) {
		if(node.childNodes[iter].nodeName=="#text") {
			retval = node.childNodes[iter].nodeValue;
		}
	}
	return retval;
}
/**
 * key action listener
 * if a key is pressed this funcions is reised
 * event is a browser-global variable
 **/
function f_keys(key) {
	if (!key) {
		key = event;
		key.which = key.keyCode;
	}
 	switch (key.which) {
		case 65:
		case 97:
			f_setCurrent(-1); break;	// "a" or "A"
		case 83:
		case 115:
			f_setCurrent(+1); break;	// "s" or "S"
	}
}
/**
 * This funcion is attached to the onload event of the document
 * to initialize the basic variables
 **/
function f_init() {
	/** Procesado del fichero XML **/
	var xmlDoc = getXml(sFileName);
	var elmRoot = xmlDoc.documentElement;
	for(iterA=0; iterA<elmRoot.childNodes.length; iterA++) {
		if(elmRoot.childNodes[iterA].nodeName=="image") {
			var elmImage = elmRoot.childNodes[iterA];
			var sPrev  = "";
			var sZoom  = "";
			var sTitle = "";
			for(iterB=0; iterB<elmImage.childNodes.length; iterB++) {
				if(elmImage.childNodes[iterB].nodeName=="preview") {
					sPrev  = getValueOfNodeText(elmImage.childNodes[iterB]);
				}
				if(elmImage.childNodes[iterB].nodeName=="zoom") {
					sZoom  = getValueOfNodeText(elmImage.childNodes[iterB]);
				}
				if(elmImage.childNodes[iterB].nodeName=="title") {
					sTitle = getValueOfNodeText(elmImage.childNodes[iterB]);
				}
			}
			aImages[aImages.length] = new classImage(aImages.length, sPrev, sZoom, sTitle);
		}
	}
	nMax   = aImages.length;
	hCheck = setInterval("f_checkLoad()", 100);
	/** Adaptación del UI **/
	var oCtrls = document.getElementById("ctrls");
	oCtrls.innerHTML = cteLinkA+" | <span id=\"locator\"></span> | "+cteLinkS;
	oLoc   = document.getElementById("locator");
	f_redraw();
}
function f_checkLoad() {
	var oGallery = document.getElementById("gallery");
	var oPreload = document.getElementById("preload");
	var oLoading = document.getElementById("loading");
	var nImages = aImages.length;
	var nLoaded = 0;
	for(iter=0; iter<nImages; iter++) {
		if(aImages[iter].isLoaded()) nLoaded++;
	}
	oLoading.innerHTML = "Cargando ... "+parseInt((nLoaded/nImages*100),10)+"%";
	if(nLoaded==nImages) {
		clearInterval(hCheck);
		oPreload.style.display = "none";
		oGallery.style.display = "block";
		var oPrevs = document.getElementById("previews");
		var oZooms = document.getElementById("zoom");
		var oTexts = document.getElementById("texts");
		for(iter=0; iter<nImages; iter++) {
			var oImg = aImages[iter];
			var oDiv = document.createElement("div");
			var oPar = document.createElement("p");
			oImg.objDivPrev = oDiv;
			oImg.objImagePrev.setAttribute("class",     "previewUns");
			oImg.objImagePrev.setAttribute("className", "previewUns");
			oDiv.appendChild(oImg.objImagePrev);
			oPrevs.appendChild(oDiv);
			oImg.objImageZoom.setAttribute("class",     "enlargedUns");
			oImg.objImageZoom.setAttribute("className", "enlargedUns");
			oZooms.appendChild(oImg.objImageZoom);
			oPar.appendChild(document.createTextNode(oImg.sTitle));
			oTexts.appendChild(oPar);
			oImg.objParagraph = oPar;
		}
	}
	f_redraw();
}
/**
 * Two links point to this function to go previous or next view
 **/
function f_setCurrent(nInc) {
	nMax--;
	if(nInc>0 && nSel<nMax) nSel++;
	if(nInc<0 && nSel>0   ) nSel--;
	nMax++;
	f_redraw();
}
/**
 * This function is attached to the onclick event of the views images,
 * and sets selected the image that reises the event
 **/
function f_set() {
	nSel = parseInt(this.getAttribute("nImg"));
	f_redraw();
}
/**
 * Internal function that reasignate class to elements to set visibles the corrects
 **/
function f_redraw() {
	oLoc.innerHTML = (nSel+1)+" de "+nMax;
	for(iter=0; iter<nMax; iter++) {
		if(nSel<nImgIni) { nImgIni=nSel; nImgFin=nImgIni+2; }
		if(nSel>nImgFin) { nImgFin=nSel; nImgIni=nImgFin-2; }
		var bVisible = !(iter<nImgIni || iter>nImgFin);
		aImages[iter].setZoomVisible(iter==nSel);
		aImages[iter].setPrevSelected(iter==nSel);
		aImages[iter].setPrevVisible(bVisible);
		if(bVisible) {
			aImages[iter].setPrevId("prev"+(iter-nImgIni));
		} else {
			aImages[iter].unsetPrevId("prevHidden");
		}
	}
}