/******************************************************************
Objetivo:	Cargar en un div 8 imágenes aleatorias obtenidas desde
			un abanico de posibilidades obtenido de php, cambiándolas
			cada un determinado intervalo de tiempo, por medio de una
			transición.
******************************************************************/
/////////////////////////////////////////////////
// Variables ////////////////////////////////////
/////////////////////////////////////////////////
var CANTIDAD_IMAGENES 		= 8;			// Cantidad de imágenes que se van a mostrar en el div.
var ultimasImagenes 		= new Array();	// Arrays con las imágenes que no quiero repetir en el siguiente div.
var imagenesDivAnterior 	= new Array();


window.addEvent('load', function() {
	// Vacío el html.
	$('divClientesLateral').innerHTML = "";
	
	// Inserto el primer div de imágenes.
	cambiarDivs();
	
	// Seteo la función que se ejecute periódicamente.
	cambiarDivs.periodical(5000);
});


/////////////////////////////////////////////////
// Funciones ////////////////////////////////////
/////////////////////////////////////////////////
/***********************************************************************
Objetivo:	Cambiar el div actual, creando uno nuevo, y reemplazando el
			existente por medio de una transición.
***********************************************************************/
function cambiarDivs()
{
	// Tomo el div que existe actualmente en el contenedor.
	var losDivs = $('divClientesLateral').getChildren('div');
	
	// Creo un nuevo div con imágenes
	var nuevoDiv = crearDivClientes();
	
	// Verifico si existe algún div ya creado
	if(losDivs.length > 0)
	{
		// Tomo el div actual
		divActual = losDivs[0];
		
		// Inserto mi nuevo div justo abajo del actual
		nuevoDiv.inject(divActual, 'after');
		
		// Creo las transiciones para ambos, haciéndolas exactamente igual.
		var efectoDiv = new Fx.Tween(divActual, {
				'transition'	:	'bounce:out',
				'duration'		:	'1500'
		});
		
		var efectoDiv2 = new Fx.Tween(nuevoDiv, {
				'transition'	:	'bounce:out',
				'duration'		:	'1500'
		});
		
		//  Seteo a qué posición de "top" tienen que moverse
		var moverA = -642;
		
		// Inicio las transiciones
		efectoDiv.start('top', '0', moverA);
		
		efectoDiv2.start('top', '0', moverA - 26).chain(
			function() {
				// Una vez acabe esta, destruyo el div anterior para liberar recursos
				divActual.destroy();
				// Pongo el nuevo div en la posición relativa "top" 0.
				nuevoDiv.setStyle('top', '0');
			}
		);
	}
	else
		// Agrego el nuevo div
		$('divClientesLateral').adopt(nuevoDiv);
}


/***********************************************************************
Objetivo:	Devolver un div cargado con la CANTIDAD_IMAGENES seteada.
***********************************************************************/
function crearDivClientes()
{	
	// Creo el div
	var elDiv = new Element('div', {
			'class'		:	'texto divClientes2 margen3'
	});
	
	for(var i=0; i < CANTIDAD_IMAGENES; i++)
	{
		// Obtendo una imagen al azar
		var srcImagen = randomImg();
		
		// Voy guardando las imágenes que fui agregando para que no se repitan en el mismo div o el siguiente.
		imagenesDivAnterior[i] = ultimasImagenes[i];
		ultimasImagenes[i] = srcImagen;
		
		// Creo mi img.
		var unaImagen = new Element('img', {
				'alt'		:	'',
				'border'	:	0,
				'src'		:	srcImagen,
				'width'		:	'120',
				'height'	:	'47',
				'class'		:	'imagenesClientes'
		});
		
		// Agrego la imagen al div.
		elDiv.adopt(unaImagen);
	}
	
	// Retorno el div
	return elDiv;
}

/***********************************************************************
Objetivo:	Devolver una imagen al azar de las precargadas por php.
***********************************************************************/
function randomImg()
{
	do {
		var unaImagen = imagenes[parseInt(Math.random()*(imagenes.length - 1))];
	} while(ultimasImagenes.contains(unaImagen) || imagenesDivAnterior.contains(unaImagen));
	
	return unaImagen;
}