/*=======================================================================
FUNCION:	Objeto oEstela(puntos, xder, xizq, yarr, yabj)
ARGS:		puntos: array con ids de los bloques DIV forman la estela
			xder, xizq: números, separación horizontal de los bloques respecto del raton. 
			yarr, yabj: números, separación vertical de los bloques respecto del raton

DEVUELVE:	Nada
DESCRIP:	Es el objeto que representa la estela que acompaña al ratón. Esta estela está
			formada en cuando al HTML, por bloques DIV con posicionamiento absoluto,
			pudiendo contener una imagen. Si el primer valor de separación (XDer o 
			YArr) es negativo, los bloques siempre están al mismo lado del ratón 
			separados la distancia que indique el otro argumento (XIzq, YAbj)
PROPIEDADES:
tempor:			Temporiador para estelas animadas
puntos:			Lista de bloques DIV
referX, referY:		Posición del punto de referencia para colocar los bloques
XDer:			Separación horizontal de los bloques respecto al ratón (lado derecho)
XIzq:			Separación horizontal de los bloques respecto al ratón (lado izquierdo)		
YArr:			Separación vertical de los bloques respecto al ratón (por arriba)
YAbj:			Separación vertical de los bloques respecto al ratón (por abajo)
METODOS:
seguir:			Calcula las posición de los bloques en función de la posición del ratón
desplPuntos:		Recoloca los puntos respecto del punto de referencia 
animarPuntos:		Animación por defecto.
detener:		Desactiva la estela.
=========================================================================*/
function oEstela(puntos, xder, xizq, yarr, yabj)
{
 this.tempor = null;			
 this.puntos = new Array();		
 this.referX = 0;				
 this.referY = 0;				
 this.XDer = xder
 this.XIzq = xizq;
 this.YArr = yarr;
 this.YAbj = yabj;
 this.seguir = seguir;			
 this.desplPuntos = desplPuntos;	
 this.animar = animarPuntos;		
 this.detener = detener;
 //Busca los elementos HTML para rellenar la propiedad puntos
 var ind;
 for (ind in puntos)
	{
	this.puntos[ind] = objHtml(puntos[ind]);
	this.puntos[ind].style.left = 0;
	this.puntos[ind].style.top = 0;
	this.puntos[ind].style.visibility = 'hidden';
	}

 function seguir()
 {
 var sentXAct=0, xant;
 var sentYAct=0, yant;
 //Posición actual del punto de referencia de los bloques
 xant = this.referX;
 yant = this.referY;	
 //Movimiento horizontal
 if (this.XDer < 0)    //No considerar el sentido
	this.referX = event.clientX + this.XIzq;
 else
	{
	//Si hay un cambio de sentido no se modifica referX hasta que el ratón esté al otro lado
	sentXAct = event.clientX - this.referX; 
	if (sentXAct > 0)
		{
		if(sentXAct >= this.XDer )
			this.referX = event.clientX - this.XDer;
		}
	 else		
		{
		if(sentXAct <= -this.XIzq )
			this.referX = event.clientX + this.XIzq;
		}
	}	
 //Movimiento Vertical
 if (this.YArr < 0)
	this.referY = event.clientY + this.YAbj;
 else
	{
	//Si hay un cambio de sentido no se modifica referX hasta que el ratón esté al otro lado
	sentYAct = event.clientY - this.referY; 
	if (sentYAct > 0)
		{
		if(sentYAct >= this.YAbj)
			this.referY = event.clientY - this.YAbj;
		}
	 else		
		{
		if(sentYAct <= -this.YArr)
			this.referY = event.clientY + this.YArr;
		}
	}
 //Correcciones para el scroll de la página
 this.referY += document.body.scrollTop;
 this.referX += document.body.scrollLeft;				
 this.desplPuntos(this.referX-xant, this.referY-yant)
 }	

 //Cambiar posición actual de los puntos: si la referenica se ha desplazado los bloques se
 //desplazan la misma distancia: dx, dy son los desplazamientos
 function desplPuntos(dx, dy )
 {
 objest = this;
 for (ind in objest.puntos)
	{
	blqAct = objest.puntos[ind];
    blqAct.style.visibility="visible";  //al inicio están ocultos
	blqAct.style.left = parseInt(blqAct.style.left)+dx ;
	blqAct.style.top =  parseInt(blqAct.style.top)+dy;
	}
 }

//Calcula aleatoriamente nuevas coordeandas para los bloques, lo hace mediante un valor 
//aleatorio que suma al punto de referencia.
function animarPuntos()
{
 var ind;
 for (ind in this.puntos)
	{
	blqAct = this.puntos[ind];
	blqAct.style.left = this.referX + Math.round(Math.random()*25);
	blqAct.style.top =  this.referY + Math.round(Math.random()*25);
	}
 }
//Desactiva la animación si existe y oculta los bloques
 function detener()
 {
 var ind;
 if (this.tempor) clearInterval(this.tempor);
 document.onmousemove = null;
 for (ind in this.puntos)
	{
	this.puntos[ind].style.left = 0;
	this.puntos[ind].style.top = 0;
	this.puntos[ind].style.visibility = 'hidden';
	}
 }
}
/*===================Hasta aquí el objeto estela================================
Lo que sigue es ya un ejemplo de uso
================================================================================*/
//Función definida por el usuario que puede usarse para animar la estela.
function mianimacion(objest)
{
 var ind, x, y, blqAct, rad, angind;
 if (!window.angulo)
	angulo = 0;
 angulo+=10;
 if(angulo>360) angulo = 0;
 rad = 20*Math.sin(angulo*3.1415/180);
 angind=angulo;
 for (ind in objest.puntos)
	{
	angind+=90;
	x = objest.referX + Math.round(rad*Math.sin(angind*3.1415/180))
	y = objest.referY + Math.round(rad*Math.cos(angind*3.1415/180))
   	blqAct = objest.puntos[ind];
	blqAct.style.left = x;
	blqAct.style.top =  y;
	}
 }

function mianimacion2(objest)
{
 var ind, x, y, blqAct, rad, angind;
 if (!window.angulo)
	angulo = 0;
 angulo+=10;
 if(angulo>360) angulo = 0;
 rad = 10*Math.sin(angulo*3.1415/180);
 angind=angulo;
 for (ind in objest.puntos)
	{
	angind+=30;
	x = objest.referX + 4*Math.round(rad*Math.sin(angind*Math.PI/180));
	y = objest.referY + 4*Math.round(rad*Math.cos(angind*Math.PI/180));
	blqAct = objest.puntos[ind];
	blqAct.style.left = x;
	blqAct.style.top =  y;
	}
 }

//El evento temporizador sólo entiende de variables globales
//por eso se declara aquí la variable estela
var estela;
function modo1()
{
var puntos = new Array('punto1','punto2','punto3','punto4');
if (estela != null)
	estela.detener()
estela = new oEstela(puntos, -1,20, -1, 20);
document.onmousemove = new Function("estela.seguir()");
estela.tempor = setInterval('estela.animar()',100);
}

function modo2()
{
var puntos = new Array('punto4','punto3','punto2','punto1');
if (estela != null)
	estela.detener()
estela = new oEstela( puntos, 40,10, 10, 20);
document.onmousemove = new Function("estela.seguir()");
estela.tempor=setInterval('mianimacion(estela)',10);
}	

function modo3()
{
var puntos = new Array('punto4','punto3','punto2','punto1');
if (estela != null)
	estela.detener()
estela = new oEstela( puntos, -200,50, 50, -50);
document.onmousemove = new Function("estela.seguir()");
estela.tempor=setInterval('mianimacion2(estela)',100);
}	

function estelaimage1()
{
var puntos = new Array('imagen1');
if (estela != null)
	estela.detener();
estela = new oEstela(puntos, -1, 10, -1, 10);
document.onmousemove = new Function("estela.seguir()");
}		

function estelaimage2()
{
var puntos = new Array('imagen2');
if (estela != null)
	estela.detener();
estela = new oEstela(puntos, -1, 10, -1, 10);
document.onmousemove = new Function("estela.seguir()");
}		

function sinimage()
{
	estela.detener();
}		

function estelaimage3()
{
var puntos = new Array('imagen3');
if (estela != null)
	estela.detener();
estela = new oEstela(puntos, 0, 0, 0, 0);
document.onmousemove = new Function("estela.seguir()");
}		

function sinimage()
{
	estela.detener();
}