/*
	vigilante.js
	adaptacion del banner de king kong hecho para audi por doubleyou.
	2003-feb-27 edu luis
	
	Instrucciones de uso:

	paso 1.
	
		en el codigo de la pagina incluir :
	
	  	<script src="vigilante.js"></script>
	  	
	  	<script>
	  		vigilar(200, 50, 20, 21, 40, 21, "face2.gif", "ojo.gif");
	  	</script>
	
		y modificar los argumentos a conveniencia
		
		los argumentos son:
			1,2 posicion en pixels para la imagen
			3,4 posicion relativa del ojo izquierdo
			5,6 posicion relativa del ojo derecho
			7. Imagen de la cara (los ojos deben ser transparentes).
			8. Imagen de la pupila.
			 
	paso 2.
	
		en el directorio de la pagina copiar:
			
			* este fichero (vigilante.js)
			* los ficheros con las imagenes.
			
*/
	
function SetDynLayer(id, ax, ay ) 
{
	var obj ;
	
	if (ns4) 
	{

		this.x = ax ;
		this.y = ay ;
	}
	else // if (ie4) 
	{
		obj = jseyesobj(id) ;
		
		this.style = obj.style ;
		this.x = ax ;
		this.y = ay ;
	}
	
	this.moveTo = DynLayerMoveTo ;
	this.moveBy = DynLayerMoveBy ;
	this.show = DynLayerShow ;
	this.hide = DynLayerHide ;
}


function DynLayer(id,nestref) 
{
	var obj ;
	
	if (ns4) 
	{
		this.style = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id] ;
		this.x = this.style.left ;
		this.y = this.style.top ;
	}
	else // if (ie4) 
	{
		obj = jseyesobj(id) ;
		
		this.style = obj.style ;
		this.x = obj.offsetLeft ;
		this.y = obj.offsetTop ;
	}
	
	this.moveTo = DynLayerMoveTo ;
	this.moveBy = DynLayerMoveBy ;
	this.show = DynLayerShow ;
	this.hide = DynLayerHide ;
}

function DynLayerMoveTo(x,y) 
{
	if (x!=null  && !isNaN(x))  
	{
		this.x = x ;
		this.style.left = String(x) + "px" ;
	}
	if (y!=null  && !isNaN(y)) 
	{
		this.y = y ;
		this.style.top = String(y) + "px" ;
	}
}

function DynLayerMoveBy(x,y) 
{
	this.moveTo(this.x+x,this.y+y) ;
}

function DynLayerShow() 
{
	this.style.visibility = (ns4)? "show" : "visible" ;
}

function DynLayerHide() 
{
	this.style.visibility = (ns4)? "hide" : "hidden" ;
}


// averiguar que navegador nos esta viendo

ns4 = (document.layers)? true:false ;
ie4 = (document.all)? true:false ;

function init(x, y, xoi, yoi, xod, yod, imagen_cara, imagen_ojo) 
{

	  	situar_vigilante_en(x, y, xoi, yoi, xod, yod, imagen_cara, imagen_ojo) ; 

		allt 		= new DynLayer("alltDiv");
		mascara 	= new DynLayer("mascaraDiv","alltDiv");
		ojo1 		= new DynLayer("ojo1Div","alltDiv");
		ojo2 		= new DynLayer("ojo2Div","alltDiv");
		pestania1 	= new DynLayer("pestania1Div","alltDiv");
		left  		= new eye(xoi, yoi, 4, 3, ojo1, allt);
		right 		= new eye(xod, yod, 4, 3, ojo2, allt);
				
				
		allt.show(); 
		mascara.show(); 
		
		//ojo1.moveTo(xoi, yoi) ;
		//ojo2.moveTo(xod, yod) ;
		
		ojo1.show(); 
		ojo2.show(); 

		blinka();
		
		document.onmousemove = mouseMove ;
		if (ns4) document.captureEvents(Event.MOUSEMOVE) ;

}


function mouseMove(e) 
{
		var x=0;
		var y=0;
		var xx=0;
		var yy=0;

		var abajo=0;
	
		if (ns4) 
		{ 
			x=e.pageX;  y=e.pageY; 
		}
		else
		{
			if (ie4) 
			{ 
				x=event.x;  
				y=event.y;
			} 				//+document.body.scrollTop}
			else
			{
				x=e.clientX;  
				y=e.clientY;
			}
		}
		
		if (left) mirar (x,y,left) ;
		if (right) mirar (x,y,right) ;
		
		//if (y>yy) abajo=1; else abajo=0;
		
		yy=y; xx=x;
}

function eye (cx, cy, radioh, radiov, layer, layerRel) 
{
	  this.cx = cx;
	  this.cy = cy;
	
	  
	  this.centrox = cx + layerRel.x; 
	  this.centroy = cy + layerRel.y;
	  
	  this.lrel = layerRel;
	  this.radioh = radioh;
	  this.radiov = radiov;
	  this.layer = layer;
	  
	  return (this) ;
}

function obtenerAngulo (x,y) 
{
	  var deg ;
	  deg = Math.atan(y/x) ;
	  if (x<0)   deg +=Math.PI;
	  if (deg<0) deg+=2*Math.PI;
	  if (x==0 && y==0) return 0;
	  return (deg);
}

function atoi(num) 
{
	  var nums = num+'' ;
	  if (nums.indexOf('e-')>=0) return 0 ;
	  if (nums.substring(0,1)=='.') ;
	  {
	    if (num<=0.5) return 0 ;
	        else return 1 ;
	  }
	  if (nums.substring(0,2)=='-.') 
	  { 
	    if (num<=-0.5) return -1 ;
	        else return 0 ;
	  }
	  return parseInt(nums) ;
}

function nomas(num) 
{
	  var tope = 2.0;
	  
	  if (num < 0)
	  {
		if (num < ( tope * (-1) ) )
			num = tope * (-1);
	  }
	  else
	  {
		if (num > ( tope ) )
			num = tope;
	  }

	  return num ;
}


function mirar (x, y, elojo) 
{
  
	  var xrel = (x-elojo.centrox) ;
	  var yrel = (y-elojo.centroy) ;
	  
	  yrel *= -1 ;
	  
	  var ang = obtenerAngulo(xrel, yrel) ;
	  
	  var posx =  nomas(elojo.radioh*Math.cos(ang));
	  var posy =  nomas(elojo.radiov*Math.sin(ang));
	  
	  xrel = elojo.cx+posx ;
	  yrel = elojo.cy-posy ;
	  elojo.layer.moveTo(xrel,yrel) ;
}

function blinka()
{
		setTimeout('pestania1.show()',2000);
		setTimeout('pestania1.hide()',2100);
		setTimeout('blinka()',8000);
}


function vigilar() 
{
	  var i;
	  
	  // valores por defecto
      // xoi, yoi es la posicion relativa con respecto a x, y del ojo izquierdo.
      
	  var x   = 500, y   = 100;
	  var xoi =  20, yoi =  21;
	  var xod =  40, yod =  21;
	    
	  var imagen_cara="face2.gif";
	  var imagen_ojo="ojo.gif";
	
	  if (arguments.length >= 1)   	x = arguments[0];
	  if (arguments.length >= 2)   	y = arguments[1];
	  if (arguments.length >= 3)   	xoi = arguments[2];
	  if (arguments.length >= 4)   	yoi = arguments[3];
	  if (arguments.length >= 5)   	xod = arguments[4];
	  if (arguments.length >= 6)   	yod = arguments[5];
	  if (arguments.length >= 7)   	imagen_cara = arguments[6];
	  if (arguments.length >= 8)   	imagen_ojo = arguments[7];
	  
	
	  for (i=0; i<document.images.length; i++) 
	  {
	    	if (document.images[i].name.substring(0,3)=='k-k' && ! document.images[i].complete) 
	    		break;
	  }
	  if (i==document.images.length)
	  {
	  	init(x, y, xoi, yoi, xod, yod, imagen_cara, imagen_ojo);
	  }
	  else 
	  {
	  	setTimeout('vigilar()', 100);
	  }
}


function jseyesobj(id) 
{ 
		// no se usa
	  var i, x;
	  x= document[id];
	  if (!x && document.all) x= document.all[id];
	  for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
	  if (!x && document.getElementById) x= document.getElementById(id);
	  return(x);
}



function situar_vigilante_en(x, y, xoi, yoi, xod, yod, imagen_cara, imagen_ojo)
{
	  // crear codigo html de estilos. (NOTA: el write No funciona en netscape 4.7).
      // x, y corresponden a las posiciones left, top de la esquina superior derecha
      // en pixels.
    		

	  // averiguar posicion de la pestaņa
	  
	  var vtop = (yod < yoi ) ? yod - 4 : yoi - 4 ; 
	  var vleft = (xod < xoi) ? xod - 4 : xoi - 4 ;
	  var vwidth = Math.abs(xod - xoi) + 6 ;
	  var vheight = Math.abs(yod - yoi) + 6 ;
	  
	  // cuidado! sin el WIDTH en mascara y ojos en el primer pestaņazo en explorer el dibujo se va al centro de la hoja
	  document.write( 
		"<div id='alltDiv' style='Z-INDEX: 60; LEFT: " + x + "px; TOP: " + y + "px; VISIBILITY: hidden; POSITION: absolute;  BACKGROUND-COLOR: #ffffff; '>" +
		"<div id='mascaraDiv' style='Z-INDEX: 60; WIDTH: 55px; VISIBILITY: hidden;  POSITION: absolute'><IMG   src='" + imagen_cara + "' border=0 name=k-k1></div>" +
		"<div id='ojo1Div' style='Z-INDEX: 50; VISIBILITY: hidden; WIDTH:7px; LEFT: " + ( xoi ) + "px; TOP: " + ( yoi ) + "px;  POSITION: absolute; '><IMG style='display:block;' height=7 width=7  src='" + imagen_ojo + "' border=0 name=k-k2></div>" +
		"<div id='ojo2Div' style='Z-INDEX: 50; VISIBILITY: hidden; WIDTH:7px; LEFT: " + ( xod  ) + "px; TOP: " + ( yod  ) + "px; POSITION: absolute; '><IMG style='display:block;' height=7 width=7  src='" + imagen_ojo + "' border=0 name=k-k3></div>" +
		"<div id='pestania1Div' style='Z-INDEX: 55; VISIBILITY: hidden; LEFT: " + vleft + "px; TOP: " + vtop + "px; WIDTH: " + vwidth + "px; HEIGHT: " + vheight + "px; CLIP: rect(0px " + vwidth + "px " + vheight + "px 0px); POSITION: absolute; BACKGROUND-COLOR: #494900; '></div></div>" 
		);
//		"<div id='pestania1Div' style='Z-INDEX: 55; VISIBILITY: hidden; LEFT: " + ( xoi - 5 ) + "px; TOP: " + ( yoi - 5 ) + "px; WIDTH: " + (xod + 10 - xoi + 10) + "px; HEIGHT: " + (yod + 10 - yoi + 10) + "px; CLIP: rect(0px " + (xod + 10 - xoi + 10) + "px " + (yod + 10 - yoi + 10) + "px 0px); POSITION: absolute; BACKGROUND-COLOR: #494900; '></div></div>" 
}