function fadeIn(divId,opacity)
{
	
	divElement = document.getElementById(divId);
	if (opacity< 100)
	{
		setOpacity(divElement , opacity);
		opacity += 10;
		var expresion = "fadeIn('"+divId+"',"+opacity+")";					
		setTimeout(expresion, 40);
	}
}

function setOpacity(obj, opacity) {
	
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
	
}


function Imagen(mini, grande, id)
{
	this.mini = mini;
	this.grande = grande;
	this.identificador=id;
	this.id = 'id_imagen_'+id;
	this.idContenedor = 'id_contenedor_'+id;

	this.getInicioContenedorMini = function()
	{
		return '<div  id="' + this.idContenedor + '" class="transOFF"  onmouseover="this.className=\'transON\'" onmouseout="this.className=\'transOFF\'" ><table class="filllayout" cellpadding="0" cellspacing="0"><tr><td class="centeredContent">';		
	}
	
	this.getInicioContenedorGrande = function()
	{
		return '<div id="' + this.idContenedor + '" class="fotoGrande">';
	}

	this.getFinContenedor = function()
	{
		return '</div>';
	}

	this.getHTMLMini = function()
	{
		var html = this.getInicioContenedorMini();
		html = html + '<a href="javascript:album.mostrarImagenGrande(\''+this.identificador+'\');">';
		html = html + '<img style="border:1px solid black;"  id="' + this.id + '" src="' + this.mini + '" onLoad="album.pintarImagenMini(\''+this.id+'\',\''+this.idContenedor+'\');"  >';
		html = html + '</a></td></tr></table>'
		
		html = html + this.getFinContenedor(); 
		return html;
		
	}

	this.getHTMLGrande = function()
	{
		var html = this.getInicioContenedorGrande();
		html = html + '<img id="' + this.id + '" src="' + this.grande + '" onLoad="album.pintarImagenGrande(\''+this.id+'\',\''+this.idContenedor+'\');"/>';
		html = html + this.getFinContenedor(); 
		return html;
	}
}

function Linea(imagenes)
{
	this.imagenes = imagenes;
	
	this.getHTML = function()
	{
		var html = '';
		for (i = 0; i < this.imagenes.length; i++)
		{
			if (this.imagenes[i] != null)
				html = html + this.imagenes[i].getHTMLMini();
			 
		}
		return html;
	}
}

function Pagina(imagenes, numLineasPagina, numImagenesLinea)
{
	this.lineas = new Array(numLineasPagina);
	
	var contadorImagenesLinea = 0;
	var contadorLineas = 0;
	var linea = new Array(numImagenesLinea);
	
	for (i = 0; i < imagenes.length; i++)
	{
		if (( i % numImagenesLinea == 0) && (i > 0))
		{
			this.lineas[contadorLineas] = new Linea(linea);
			contadorLineas++;
			linea = new Array(numImagenesLinea);
			contadorImagenesLinea = 0;		
		}
		linea[contadorImagenesLinea] = imagenes[i];
		contadorImagenesLinea++;

	}
	this.lineas[contadorLineas] = new Linea(linea);

	
	this.getHTML = function()
	{
		var html='';
		for (k = 0; k < this.lineas.length; k++)
		{
			html = html +'<div style="background-color: rgb(0, 0, 0);clear:both;" >';
			html = html + this.lineas[k].getHTML();
			html = html + '</div>';
		}
		
		return html;
	}
}

function Album(imagenes)
{
	this.imagenes=imagenes;
	if (imagenes != null)
	{
		var numImagenesPagina = 10;
		var numImagenesLinea = 5;
		var numLineasPagina = numImagenesPagina / numImagenesLinea;
	
		var numeroPaginas = Math.floor(imagenes.length / numImagenesPagina);
		if (imagenes.length % numImagenesPagina != 0)
			numeroPaginas++;	
		
		this.paginas = new Array(numeroPaginas);
		this.ultimaPaginaPintada = -1;	
		
		var contadorPaginas = 0;
		var contadorImagenesPagina = 0;
		var imagenesPagina = new Array(numImagenesPagina);
		for (indice = 0; indice < imagenes.length; indice++)
		{
			
			if (( indice % numImagenesPagina == 0) && (indice > 0))
			{
				this.paginas[contadorPaginas] = new Pagina(imagenesPagina, numLineasPagina, numImagenesLinea);
				contadorPaginas++;
				contadorImagenesPagina = 0;
				imagenesPagina = new Array(numImagenesPagina);
			}
			imagenesPagina[contadorImagenesPagina] = imagenes[indice];
			contadorImagenesPagina++;
		}  
		
		this.paginas[contadorPaginas] = new Pagina(imagenesPagina, numLineasPagina, numImagenesLinea);
	}
	else
		this.paginas = null;
			
	this.getHTMLNavegador = function(pagina)
	{
		var html='<table cellpadding="0" cellspacing="0" width="100%"><tr><td width="5%" align="left">';
		if (pagina==0){
			html=html+'</td><td class="textoImagen" width="20%"></td>';
		}
		else
		{
			html=html+'<a  href="#" class="enlaceMapa"  title="Primera" onclick="javascript:album.pintarPagina(0);"> << </a></td>';
			html=html + '<td width="20%" ><a  href="#" class="enlaceMapa" onclick="javascript:album.pintarPagina('+(pagina-1)+');">Página anterior </a></td>';
		}
		var fotosfin=0;
		fotosfin=((pagina*5)+5);
		if (fotosfin > album.imagenes.length)
			fotosfin=album.imagenes.length;
		html=html +  '<td class="textoImagen"  align="center" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Página '+ (pagina+1) + ' de '+ this.paginas.length + '&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;' + ' Fotos de '+ ((pagina*5)+1)+' a '+fotosfin + '&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;Total de '+this.imagenes.length+'</td>';
		
		if (pagina == this.paginas.length-1){
			html=html+'<td class="textoImagen" width="20%"></td><td  width="5%" align="right"></td>';
		}
		else
		{
			html=html + '<td width="20%" align="right"><a  href="#" class="enlaceMapa"  onclick="javascript:album.pintarPagina('+(pagina+1)+');">Página siguiente </a></td>';
			html=html + '<td  width="5%" align="right"><a  href="#" class="enlaceMapa"  title="Ultima" onclick="javascript:album.pintarPagina('+(this.paginas.length-1)+');">>> </a></td>';
			
		}
		html=html+'</tr></table>';
		return html;
	}
	
	this.restaurarPagina = function()
	{
		document.getElementById('greatImageContainer').innerHTML = '';
		document.getElementById('greatImageContainer').className = 'oculto';		
		document.getElementById('bottomFooter').style.height = 0;
		album.pintarPagina(album.ultimaPaginaPintada);
	}

	this.pintarPagina = function(pagina)
	{
		if (this.paginas != null)
		{
			var html='';
			html= this.getHTMLNavegador(pagina);
			html=	html + this.paginas[pagina].getHTML();
			document.getElementById('canvas').innerHTML = html;
	
			this.ultimaPaginaPintada = pagina;
		}
		else
			alert('no hay imagenes');
	}

	
	this.mostrarImagenGrande = function(identificador)
	{
		var greatImageContanier = document.getElementById('greatImageContainer');		
		var innerHTML = '<table width="100%" height="100%" cellpadding="0" cellspacing="0">';
		innerHTML = innerHTML + '<tr height="10px"><td class="disabledCell">&nbsp;</td><td class="disabledCell">';
		innerHTML = innerHTML + '<a  href="#" class="enlaceCerrarFoto" onclick="javascript:album.restaurarPagina(album.ultimaPaginaPintada);">Cerrar</a></td>';
		innerHTML = innerHTML + '<td class="disabledCell">&nbsp;</td></tr><tr><td class="disabledCell">&nbsp;</td><td class="imageCell" id="centro">';
		innerHTML = innerHTML + album.imagenes[identificador].getHTMLGrande();
		innerHTML = innerHTML + '</td><td class="disabledCell">&nbsp;</td></tr><tr><td colspan="3" id="disabledDownCell" class="disabledDownCell"></td></tr></table>';
		greatImageContanier.innerHTML = innerHTML;		

		var width = document.getElementById(album.imagenes[identificador].id).width;
		var height = document.getElementById(album.imagenes[identificador].id).height;
		
		greatImageContanier.className = 'greatImage';
		
		document.getElementById('centro').style.height = height;
		document.getElementById('centro').style.width = width;

		if (height > 600)
		{
			document.getElementById('bottomFooter').style.height = height - 580 + 20
			document.getElementById('disabledDownCell').style.height = 20;
		}				
		else if (height > 580)
		{
			document.getElementById('bottomFooter').style.height = 640 - height;
			document.getElementById('disabledDownCell').style.height = 620 - height;
		}
	}
	
	this.pintarImagenGrande = function (idImagen,idContenedor)
	{
		divElement = document.getElementById(idContenedor);
		divElement.style.background = 'black';
		image = document.getElementById(idImagen);
		setOpacity(image , 0);		
		image.style.visibility = 'visible';
		fadeIn(idImagen,0);
	}

	this.pintarImagenMini = function (idImagen,idContenedor)
	{
		divElement = document.getElementById(idContenedor);
		divElement.style.background = 'black';
		image = document.getElementById(idImagen);
		this.redimensionMini(idImagen);
		setOpacity(image , 0);
		image.style.visibility = 'visible';
		fadeIn(idImagen,0);

	}
	
	this.redimensionMini = function (position)
	{
		image = document.images[position];
		if (image.width > 110)
			image.width = 110;

		if(i.height > 110)
			image.height = 110;
	}	
}