/*
Libreria para rotar imagenes con JavaScript (incluye transicion)
Autor: Andres Ijelman
Fecha: 20 de Julio de 2007
KIP - DESARROLLANDO SOLUCIONES
Version 1
*/

/*
PARAMETROS:
images: Lista de imagenes (separadas por ,)
imagesGrandes: Lista de imagenes grandes (separadas por ,)
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.)
*/
function roller (images, imagesGrandes, imgF, w, h, t, id) {
	var objImgFront = null;
	var objDivPopUp = null;
	//Atributos
	var marco = imgF;
	var	ultimo = 0;
	var tiempo = t;
	var d = new Array();
	var d_grande = new Array();
	var ult_img = null;
	var winW = 640;
	var winH = 480;

	//ASIGNO LOS METODOS A LOS EVENTOS
	this.preloadImages = preloadImages;
	this.proxRoll = proxRoll;
	this.popUp = popUp;

	//Codigo del constructor
	preloadImages (images, imagesGrandes);
	insertRoller ();
	
	//DEFINICION DE LOS METODOS
	function preloadImages(im, imagesGrandes) {
		var i, j=d.length, jg=d_grande.length;
		
		var file = im.split(",");
		for(i=0; i<file.length; i++) {
			d[j] = new Image;
			d[j].src=file[i];
			j++;
		}
		
		file = imagesGrandes.split(",");
		for(i=0; i<file.length; i++) {
			d_grande[jg] = new Image;
			d_grande[jg].src=file[i];
			jg++;
		}
	}

	function proxRoll () {
		if (d.length > 0 && objImgFront!=null){
			//SI YA COLOQUE EL ULTIMO ELEMENTO, VUELVO A EMPEZAR
			if (ultimo == d.length) ultimo = 0;
			ult_img = d_grande[ultimo];
			//COLOCO EL BACKGROUND
			transition (objImgFront, d[ultimo]);
			ultimo = ultimo + 1;
			//REPROGRAMO EL TIMER
			window.setTimeout(proxRoll, tiempo);
		}
	}
	
	function insertRoller () {
		//document.write ('<div id="'+id+'divRollerBack" class="imageHome">');
		if (d.length > 0) {
			sr = d[d.length-1].src;
			ult_img = d_grande[d_grande.length-1];
		} else {
			sr="";
			ult_img = "";
		}
		document.write ('<div id="imagenHome"><img id="'+id+'rollerBack" width="'+w+'" height="'+h+'" src="'+sr+'"></div>');
		//document.write ('<div id="slogan"><h1>"Trabajamos con comunidades del Norte Argentino apoyando su desarrollo sustentable"</h1></div>');
		
		//document.write ('<div id="'+id+'divRollerFront" style="position:absolute; left:0px; top:0px;" >');
		//if (marco!="")
		//	document.write ('<img id="'+id+'rollerFront" width="'+w+'" height="'+h+'" src="'+marco+'">');
		//document.write ('</div>');
		
		//document.write ('</div>');
		objImgFront = document.getElementById (id+'rollerBack');
		objDivPopUp = document.getElementById (id+'divRollerFront');
		proxRoll ();
		}
	
	function popUp () {
		//OBTENGO EL ANCHO Y ALTO DE LA PANTALLA
		if (parseInt(navigator.appVersion) > 3) {
			if (navigator.appName=="Netscape") {
				winW = window.innerWidth;
				winH = window.innerHeight;
				}
			if (navigator.appName.indexOf("Microsoft")!=-1) {
				winW = document.documentElement.clientWidth;
				winH = document.documentElement.clientHeight;
				}
			}
		//objDivPopUp.style.cursor="pointer";
		//objDivPopUp.onclick=onClick;
		}
		
	function onClickGrande(){
		//PARA QUE SE OCULTE EL DIV CUANDO HAGO CLICK EN CUALQUIER LADO
		this.style.visibility="hidden";
		}
	
	function onClick() {
		var myDiv, i;
		if (!((myDiv = document.getElementById ("imgGrandeRoller")) && (i=document.getElementById ("imgObj")))) {
			//NO EXISTE EL DIV - CREO EL DIV, LA IMAGEN Y AGREGO TODO AL BODY
			myDiv = document.createElement("div")
			i = new Image ();
			document.body.insertBefore(myDiv, null);
			myDiv.insertBefore(i, null);
			//CONFIGURO EL DIV
			myDiv.setAttribute("id", "imgGrandeRoller");
			
			myDiv.setAttribute("style", "z-index:2000;");
			
			myDiv.style.position = "absolute";
			myDiv.style.backgroundColor = "#F2F2F2"; 
			myDiv.style.verticalAlign = "middle";
			myDiv.onclick = onClickGrande;
			myDiv.align = "center";
			//CONFIGURO LA IMAGEN
			i.style.cursor = "pointer";
			i.style.padding = "3px";
			i.id = "imgObj";
			i.vspace = "10";
			i.border = "2px";
			i.alt = "Haga un click para cerrar esta imagen";
			}
		//AJUSTO EL ANCHO
		myDiv.style.width = ult_img.width + 20+"px";
		myDiv.style.height = ult_img.height + 30+"px";
		//AJUSTO LA POSICION
		myDiv.style.left = ((winW/2) - (ult_img.width/2))+"px";
		var top;
		top = (winH/2) - (ult_img.height/2) + parseInt(document.documentElement.scrollTop);
		myDiv.style.top = top+"px";

		//SETEO LA IMAGEN
		i.src = ult_img.src;
		i.width = ult_img.width;
		i.height = ult_img.height;
		myDiv.style.visibility="visible"; 
		}
	}
	
//ESTA CLASE LA UTILIZO PARA LA TRANSICION
function transition (obj, img) {
	var velocidad = 1;	//MILISEGUNDOS
	var variacion = 10;	//VALOR DE VARIACION (Multiplo de 100)

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

	decrementar();

	function decrementar () {
		switch(type) {
			case 'ie' :
				obj.filters.alpha.opacity -= variacion;
				if (obj.filters.alpha.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' :
				obj.filters.alpha.opacity += variacion;
				if (obj.filters.alpha.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;
		}
	}
}