window.onload   = f_initGallery;

var sCoords  = "0,0;130,0;260,0;0,100;130,100;260,100;0,200;130,200;260,200"
var aCoords  = new Array();
var oPager   = null;
var oThumbs  = null;
var oLoading = null;
var oZoom    = null;
var aImages  = new Array();
var nImages  = 0;
var nImgIni  = 0;
var imgLoading = null;
var hChecking  = 0;

function f_initGallery() {
	var nlImages = null;
	oPager   = document.getElementById("galPager");
	oThumbs  = document.getElementById("galThumbs");
	oLoading = document.getElementById("galLoading");
	oZoom    = document.getElementById("galZoom");
	if(oThumbs==null) return;
	nlImages = document.getElementsByTagName("img");
	for(iter=0; iter<nlImages.length; iter++) {
		var nImage = nlImages[iter];
		if(nImage.parentNode.id=="galThumbs") {
			var nPos = aImages.length;
			aImages[nPos] = nImage;
			aImages[nPos].setAttribute("order", nPos);
		}
	}
	oLoading.onclick = f_hideLoading;
	oZoom.onclick    = f_hideZoom;
	nImages  = aImages.length;
	for(iter=0; iter<nImages; iter++) {
		aImages[iter].onclick = f_showLoading;
	}
	aTemp = sCoords.split(";");
	for(iter=0; iter<aTemp.length; iter++) {
		aCoords[aCoords.length] = aTemp[iter].split(",");
	}
	f_render();
}

function f_move(n) {
	if(n<0 && nImgIni>0        ) nImgIni--;
	if(n>0 && nImgIni<nImages-9) nImgIni++;
	f_render();
}

function f_render() {
	oPager.innerHTML = "<a href=\"javascript: f_move(-1)\">&lt;</a> Imágenes de "+(nImgIni+1)+" a "+Math.min(nImages, nImgIni+10)+" de "+nImages+" <a href=\"javascript: f_move(+1)\">&gt;</a>";
	for(iter=0; iter<aImages.length; iter++) {
		aImages[iter].style.display = (iter>=nImgIni && iter<=nImgIni+8 ? "inline":"none");
		if(aImages[iter].style.display=="inline") {
			var nPos = iter-nImgIni;
			var nCoordX = aCoords[nPos][0];
			var nCoordY = aCoords[nPos][1];
			aImages[iter].style.top  = nCoordY+"px";
			aImages[iter].style.left = nCoordX+"px";
		}
	}
	var nHeight = oThumbs.offsetHeight;
	if(nHeight<291) oThumbs.style.height = 291+"px";
}

function f_showLoading() {
	oThumbs.style.display  = "none";
	oLoading.style.display = "block";
	imgLoading = new Image();
	imgLoading.src = aZooms[this.getAttribute("order")];
	hChecking  = setInterval("f_check()", 200);
}

function f_hideLoading() {
	oThumbs.style.display  = "block";
	oLoading.style.display = "none";
	clearInterval(hChecking);
}

function f_hideZoom() {
	oThumbs.style.display  = "block";
	oZoom.style.display = "none";
}

function f_check() {
	if(imgLoading.complete) {
		f_hideLoading();
		oThumbs.style.display = "none";
		oZoom.style.display   = "block";
		if(oZoom.hasChildNodes()) 
		oZoom.removeChild(oZoom.firstChild);
		oZoom.appendChild(imgLoading);
	}
}