/*
Libreria para rotar imagenes con JavaScript (incluye transicion)
Autor: Andres Ijelman
Fecha: 7 de Enero de 2009
KIP - DESARROLLANDO SOLUCIONES
Basado en Roller 2
*/

/*
PARAMETROS:
images: Array de imagnes
txts: Array de textos
links: Array de links
imgF: La imagen del frente (Marco)
w: Ancho
h: Alta 
t: tiempo entre imagenes en milisegundo (2500)
id: identificicador del roller ( si hay mas de unos en 1 pagina, este valor debe ser diferente.)
name: nombre de la instancia
*/
function roller (images, txts, links, imgF, w, h, t, id, name) {
	var objDivLink = null;
	var objObjLink = null;
	
	var objDivFondoAzul = null;
	var objImgFront = null;
	var objDivPopUp = null;
	//Atributos
	var marco = imgF;
	var	ultimo = 0;
	var tiempo = t;
	var d = new Array();
	var moviendo = null;
	
	//config
	var altoLink = 50;

	//ASIGNO LOS METODOS A LOS EVENTOS
	this.preloadImages = preloadImages;
	this.proxRoll = proxRoll;
	this.rollTo = rollTo;
	
	this.MM_swapImage = MM_swapImage;
	this.MM_swapImgRestore = MM_swapImgRestore;
	
	//Codigo del constructor
	MM_preloadImages('./js/roller/rollerPics/ptoBlancoOn.gif');
	preloadImages (images);
	insertRoller ();
	
	//DEFINICION DE LOS METODOS
	function preloadImages(im) {
		var i, j=d.length;
		for(i=0; i<im.length; i++) {
			d[j] = new Image;
			d[j].src=im[i];
			j++;
		}
	}
	
	function rollTo (n) { //n =  0 - 1 -2 (3 opciones!)
		if (d.length > 0 && objImgFront!=null && n<d.length){
			objObjLink.href = links[n];
			objObjLink.innerHTML = txts[n];
			transition (objImgFront, d[n]);
		}
	}
	
	//AL LLAMAR ESTA FUNCION, EL ROLLER COMIENZA A ROLAR - ver insertRoller()
	function proxRoll () {
		if (d.length > 0 && objImgFront!=null){
			//SI YA COLOQUE EL ULTIMO ELEMENTO, VUELVO A EMPEZAR
			if (ultimo == d.length) ultimo = 0;
	
			objObjLink.href = links[ultimo];
			objObjLink.innerHTML = txts[ultimo];
			transition (objImgFront, d[ultimo]);
			
			ultimo = ultimo + 1;
			//REPROGRAMO EL TIMER
			window.setTimeout(proxRoll, tiempo);
		}
	}
	
	function insertRoller () {
		
		if (d.length > 0) {
			sr = d[0].src;
			hr = links[0];
			tx = txts[0];
		} else {
			sr = "";
			hr = "";
			tx = "";
		}
		document.write ('<div id="'+id+'divRollerBack" style="position:relative;">');
		document.write ('<img id="'+id+'rollerBack" width="'+w+'" height="'+h+'" src="'+sr+'">');
		
		//ESTE ES EL DIV CON EL FONDO AZUL
		document.write ('<div id="'+id+'divFondoAzul" style="visibility:hidden; background: transparent url(./js/roller/rollerPics/videoModSmallTrans.png) repeat scroll 0 0; height: 0px; position:absolute; left:0; top: '+h+'px; width: '+w+'px;"></div>');
		
		//ESTE ES EL DIV CON EL FONDO PARA LOS BOTONES PARA PASAR DE NOVEDAD
		document.write ('<div id="'+id+'fondoNews" style="background-image:url(./js/roller/rollerPics/fondoNews.jpg); left:0; top:'+(h-19)+'px; position:absolute; height:18px; padding:0; margin:0; width:'+w+'px;"></div>');
		
		//ESTE ES EL DIV CON EL MARCO
		document.write ('<div id="'+id+'divRollerFront" style="position:absolute; left:0px; top:0px;" >');
		document.write ('<img id="'+id+'rollerFront" width="'+w+'" height="'+h+'" src="'+marco+'">');
		document.write ('</div>');
		
		//ESTE ES EL DIV CON EL TEXTO Y EL LINK
		document.write ('<div id="'+id+'divLink" style="visibility:hidden; padding-left:15px; left:0; top:'+(h-altoLink)+'px; position:absolute;" class="divLink">');
		document.write ('<a href="'+hr+'" id="'+id+'ObjLink">'+tx+'</a>');
		document.write ('</div>');

		//ESTE ES EL DIV CON LOS BOTONES PARA PASAR DE NOVEDAD
		document.write ('<div id="'+id+'botoNews" style="left:0; top:'+(h-18)+'px; position:absolute; text-align:right; padding-right:15px; width:'+(w-15)+'px">');
	
		document.write ('<a href="JavaScript:'+name+'.rollTo(0);" onmouseover="'+name+'.MM_swapImage(\''+id+'imgBot1\',\'\',\'./js/roller/rollerPics/ptoBlancoOn.gif\',1)" onmouseout="'+name+'.MM_swapImgRestore()"><img src="./js/roller/rollerPics/ptoBlanco.gif" width="7" height="7" border="0" id="'+id+'imgBot1"></a> ');
		document.write ('<a href="JavaScript:'+name+'.rollTo(1);" onmouseover="'+name+'.MM_swapImage(\''+id+'imgBot2\',\'\',\'./js/roller/rollerPics/ptoBlancoOn.gif\',1)" onmouseout="'+name+'.MM_swapImgRestore()"><img src="./js/roller/rollerPics/ptoBlanco.gif" width="7" height="7" border="0" id="'+id+'imgBot2"></a> ');
		document.write ('<a href="JavaScript:'+name+'.rollTo(2);" onmouseover="'+name+'.MM_swapImage(\''+id+'imgBot3\',\'\',\'./js/roller/rollerPics/ptoBlancoOn.gif\',1)" onmouseout="'+name+'.MM_swapImgRestore()"><img src="./js/roller/rollerPics/ptoBlanco.gif" width="7" height="7" border="0" id="'+id+'imgBot3"></a> ');
		document.write ('</div>');

		document.write ('</div>');
		objImgFront = document.getElementById (id+'rollerBack');
		objDivPopUp = document.getElementById (id+'divRollerFront');
		objDivPopUp.onmouseover = onMouseOver;
		objDivPopUp.onmouseout = onMouseOut;
		
		objDivFondoAzul = document.getElementById (id+'divFondoAzul');
		objDivFondoAzul.onmouseover = onMouseOver;
		objDivFondoAzul.onmouseout = onMouseOut;
		
		objDivLink = document.getElementById (id+'divLink');
		objDivLink.onmouseover = onMouseOver;
		objDivLink.onmouseout = onMouseOut;
		
		objObjLink = document.getElementById (id+'ObjLink');
		objObjLink.onmouseover = onMouseOver;
		objObjLink.onmouseout = onMouseOut;
		
		//DESCOMENTAR ESTA LINEA PARA QUE ROLEE
		//proxRoll ();
		}
		

	function onMouseOver () {
		showUp();
		}
	function onMouseOut () {
		hideDown();
		}
		
	function moverArriba() {
		maxT = h - altoLink;
		if (parseInt(objDivFondoAzul.style.top) > maxT) {
			objDivFondoAzul.style.top = (parseInt(objDivFondoAzul.style.top)-3)+'px';
			objDivFondoAzul.style.height = (parseInt(objDivFondoAzul.style.height)+3)+'px';
			/*ESTO ES PARA EXPLORER 6*/
			if (objDivFondoAzul.style.visibility == 'hidden' && parseInt(objDivFondoAzul.style.height)>17) {
				objDivFondoAzul.style.visibility = '';
				}
			/*************************/

			showUp();
			}else {
			//CUANDO TERMINO DE SUBIR, MUESTRO EL LINK
			objDivLink.style.visibility='';
			moviendo = null;
			}
		}
		
	function showUp () {
		if (moviendo == null || moviendo == 'ar') {
			moviendo = 'ar';
			setTimeout (moverArriba, 40);
			}
		}

	function moverAbajo() {
		if (parseInt(objDivFondoAzul.style.top) < h) {
			objDivFondoAzul.style.top = (parseInt(objDivFondoAzul.style.top)+3)+'px';
			objDivFondoAzul.style.height = (parseInt(objDivFondoAzul.style.height)-3)+'px';
			/*ESTO ES PARA EXPLORER 6*/
			if (objDivFondoAzul.style.visibility != 'hidden' && parseInt(objDivFondoAzul.style.height)<19) {
				objDivFondoAzul.style.visibility = 'hidden';
				}
			/*************************/
			if (parseInt(objDivFondoAzul.style.top) > (h-altoLink+5)) {//ya bajo un poco
				objDivLink.style.visibility='hidden';
				}
			hideDown();
			}
		else {
			moviendo = null;
			}
		}
		
	function hideDown () {
		if (moviendo == null || moviendo == 'ab') {
			moviend = 'ab';
			setTimeout (moverAbajo, 40);
			}
		}
		
		
	//************************************ funciones de rollover macromedia ************************************//	
	function MM_swapImgRestore() { //v3.0
		var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
		}
	function MM_preloadImages() { //v3.0
		var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
		if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
		}
	function MM_findObj(n, d) { //v4.01
		var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
		d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
		if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
		for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
		if(!x && d.getElementById) x=d.getElementById(n); return x;
		}
	
	function MM_swapImage() { //v3.0
		var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
		if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
		}		
	//**********************************************************************************************************//	
	
	
	}

//ESTA CLASE LA UTILIZO PARA LA TRANSICION
function transition (obj, img) {
	var velocidad = 1;	//MILISEGUNDOS
	var variacion = 10;	//VALOR DE VARIACION (Multiplo de 100)
	
	var ie_opacity = 100;

	//correcto metodo de fade
	if(typeof obj.style.opacity != 'undefined')	type = 'w3c';
	else type='ie';

	decrementar();

	function decrementar () {
		switch(type) {
			case 'ie' :
				ie_opacity -= variacion;
				obj.style.filter = 'alpha(opacity='+ie_opacity+')';
				if (ie_opacity > 0) window.setTimeout (decrementar, velocidad);
				else cambiar ();
				break;
			case 'w3c':
				if (obj.style.opacity == "") obj.style.opacity = 1;
				obj.style.opacity -= (variacion/100);
				if (obj.style.opacity > 0) window.setTimeout(decrementar, velocidad);
				else cambiar ();
				break;
			}
	}
	
	function cambiar () {
		obj.src = img.src;
		incrementar();
	}
	
	function incrementar () {
		switch(type) {
			case 'ie' :
				ie_opacity += variacion;
				obj.style.filter = 'alpha(opacity='+ie_opacity+')';
				if (ie_opacity < 100) window.setTimeout (incrementar, velocidad);
				break;

			case 'w3c':
				if (obj.style.opacity == "") obj.style.opacity = 0;
				v = parseFloat (obj.style.opacity);
				v += (variacion/100);
				obj.style.opacity = v;
				if (obj.style.opacity < 1) window.setTimeout(incrementar, velocidad);
				break;
		}
	}
}