/* TransicionImagenes
 * Uso:

mi_div es el ID del div donde va la imagen.
ancho y alto máximos en píxeles
imgList es un array con las imágenes
trans.callBack es una función que se llama cada vez que se cambian las imágenes.

trans = new TransicionImagenes('mi_div', ancho, alto, imgList);
trans.callBack = function()
{
	clearInterval(transint);
	transint = setInterval('trans.cambiar();', 5000);
}
transint = setInterval('trans.cambiar();', 5000);
 * */

divcontent = ""; 
styleimg = "";
 
TransicionImagenesMTS = function(divName, divWidth, divHeight, imgList)
{
	this.imgIndex = 0;
	this.changeRate = 1;
	this.divName = divName;
	this.divWidth = divWidth;
	this.divHeight = divHeight;
	this.imgList = new Array();
	this.callBack = function() { };
	this.innerDiv = divName + '_internal';
	this.innerImg = divName + '_internal_img';
	this.preloadList = new Array();

	if(imgList.length == 0) {
		$(divName).innerHTML = '';
		this.cambiar = function(nextIndex) {
		}
		return;
	}

	this.URLprefix = '/includes/thumbnailer.php/crop/' + divWidth + '/' + divHeight + '/';

	$(divName).style['width'] = divWidth + '.px';
	$(divName).style['height'] = divHeight + '.px';
	$(divName).style['backgroundPosition'] = 'center center';
	$(divName).style['backgroundRepeat'] = 'no-repeat';
	$(divName).style['backgroundImage'] = 'url(' + this.URLprefix + imgList[0] + ')';

	for(i = 0; i < imgList.length; i++) {
		var img = new Image();
		img.src = this.imgList[i] = this.URLprefix + imgList[i];
		this.preloadList[i] = img;
	}
	$(divName).innerHTML = '<div id="' + this.innerDiv + '" style="z-index:5"><img style="'+styleimg+'"  id="' + this.innerImg + '" src="' + this.URLprefix + imgList[0] + '">   </div> '+divcontent+' ';
	$(this.innerDiv).setStyle({opacity:0.0});

	this.cambiar = function(nextIndex)
	{
		if(typeof nextIndex == 'undefined') {
			nextIndex = (this.imgIndex + this.changeRate) % this.imgList.length;
		}
		var old = this.imgList[this.imgIndex];
		var nou = this.imgList[nextIndex];

		/*$(this.innerDiv).style['display'] = 'none';*/
		$(this.innerDiv).setStyle({opacity:0.0});
		$(this.divName).style['backgroundImage'] = 'url(' + old + ')';
		$(this.innerImg).src = nou;
		new Effect.Opacity(this.innerDiv, {from: 0.0, to: 1.0, duration: 1.0});

		/*new Effect.Appear(this.innerDiv, 'duration: 1.0');*/
		this.imgIndex = nextIndex;
		this.callBack();
	}
}