/**************************************
Introducir la referencia a este script dentro de la etiqueta <head>

<script language="JavaScript" TYPE="TEXT/JAVASCRIPT" src="scripts/libreria.js"></script>
****************************************/



/**********************************************************************
IMAGEN FIJA
-----------
Este script está creado para MS internet explorer. 
Permite emular el valor fixed de la propiedad position que sólo 
funciona en mozilla y netscape.
Ejemplo de Uso:
<script>imagenfija("top:25px;right:10",'img/guitar1.gif','Indice','#home')</script>
**********************************************************************/
function imagenfija(strstyle,strimagen,strtexto,strlink) {

document.write("<style type='text/css'>"+
               "#posicion_imagen {"+
		         "position: 	fixed; "+strstyle+"; z-index:5;}"+
               "</style>");
if (strimagen!=null) {
   document.write("<div id=posicion_imagen><A HREF="+strlink+"><img src="+strimagen+
                  " border='0'><br>"+strtexto+"</a></div>");
   }
}

function reposicionaMenu(){
	//IE6 in non-quirks doesnt get document.body.scrollTop:
	var pos = (document.body.scrollTop)?document.body.scrollTop:document.documentElement.scrollTop;
	document.getElementById("posicion_imagen").style.top = parseInt(pos + 25) + "px";
}

onload = function(){
if(document.getElementById && !window.getComputedStyle){// DOM but not Mozilla
	document.getElementById("posicion_imagen").style.position = "absolute";
	window.onscroll = reposicionaMenu;
	}
}




/**********************************************************************
SCROLL DE IMAGEN
----------------
Utilizar dos imagenes fijas como botones de scroll para desplazarse
por la pantalla. Para usarlo debemos insertar el script sguiente en el <body>:
   <script>scrolling("img/arriba.gif","img/abajo.gif")</script>
variables:
   retardo=retardo en milisegundos
   paso=Desplazamiento en pixels
***********************************************************************/
var retardo=1;
var paso=3;  //paso=1;
var scrolldelay;
function scrolling(strstyle,scroll_img1,scroll_img2) {
      imagenfija(strstyle);
      document.write("<div id=posicion_imagen>"+
                     "<img src='"+scroll_img1+"'"+
                     "onmousedown='javascript:upScroll()'"+
                     "onmouseup='stopScroll()'"+
                     "onmouseout='stopScroll()'><br><br>"+
                     "<img src='"+scroll_img2+"'"+
                     "onmousedown='javascript:downScroll()'"+
                     "onmouseup='stopScroll()'"+
                     "onmouseout='stopScroll()'>"+
                     "</div>")
}

function upScroll() {
      window.scrollBy(0,-paso);
    	scrolldelay = setTimeout('upScroll()',retardo);
}

function downScroll() {
      window.scrollBy(0,paso);
    	scrolldelay = setTimeout('downScroll()',retardo);
}

function stopScroll() {
    	clearTimeout(scrolldelay);
}


/***********************************************************************
Eliminar el recuadro punteado en los enlaces
--------------------------------------------
***********************************************************************/
function noblur() {
   anclas=document.getElementsByTagName("a").length;
   for (i=0;i<anclas;i++)
   document.getElementsByTagName("a").item(i).onfocus=new Function("if(this.blur)this.blur()")
} 



/************************************************************************
CrossOver
cambiar imagen al pasar el mouse sobre ella.
Uso:
   <script>
   CrossOver("nombreImagen", "imagen1.gif", "imagen2.jpg");
   </script>
 
************************************************************************/
function CrossOver(nombre_imagen,imagen1,imagen2){
   var img1= new Image();
   var img2= new Image();
   img1.src=imagen1;
   img2.src=imagen2;
         
   document.write("<img name="+nombre_imagen+
                  " src="+imagen1+
                  " onmouseover=CrossOverPush('"+nombre_imagen+"','"+imagen2+"');"+
                  " onmouseout=CrossOverPush('"+nombre_imagen+"','"+imagen1+"'); >");
}

function CrossOverPush(nombre_imagen,imagen){
   window.document[nombre_imagen].src = imagen;
}


/************************************************************************
CrossDown
Intercambiar dos images al pulsar el mouse sobre la imagen.
Uso:
   <script>
   CrossDown("nombreImagen", "imagen1.gif", "imagen2.jpg");
   </script>
 
************************************************************************/
function CrossDown(nombre_imagen,imagen1,imagen2){
   document.write("<img name="+nombre_imagen+
                  " src = "+imagen1+
                  " onmousedown=CrossDownPush('"+nombre_imagen+"','"+imagen1+"','"+imagen2+"'); >");
}
function CrossDownPush(nombre_imagen,imagen1,imagen2){
   var img1= new Image();
   var img2= new Image();
   if (imagen2=="") imagen2=imagen1; 
   img1.src=imagen1;
   img2.src=imagen2;

   window.document[nombre_imagen].src == img1.src? window.document[nombre_imagen].src = img2.src:
                                                   window.document[nombre_imagen].src = img1.src;
}                                



/********************************************************
Crear listas con images rollover.
Uso: 
   lista_imagenes("imagen1","imagen2");
   lista("enlace 1","texto");
   lista("enlace 2","texto");
   .....
   lista("enlace n","texto");
*********************************************************/
var lista_imagen1="";
var lista_imagen2="";
function lista_imagenes(i1,i2){
   if(i2=="") i2=i1;
   lista_imagen1="'"+i1+"'";
   lista_imagen2="'"+i2+"'";
}
     
function lista(enlace,texto){
   var i=document.images.length;
   document.write("<a href="+enlace+
                  " onmouseover=document.images["+i+"].src="+lista_imagen2+
                  " onmouseout=document.images["+i+"].src="+lista_imagen1+">"+
                  "<img src="+lista_imagen1+" align='middle' border='0'>"+
                  "&nbsp;&nbsp; "+
                  texto+"</a><br><br>");
}




/*******************************************************
Caja de texto flotante que se mueve junto con el cursor.

Uso: Conviene colocar la etiqueta script al principio del <body>
      <body>
      <script>tipper(["estiloCSS"]);</script>
      .......
      
      <a href="" onmouseover="tip_it('Texto contenido en la caja')" onmouseout ="tip_it()">      
      enlace
      </a>
      </body>
      
      Tambien asi:
      <script>tipper(["estiloCSS"]);</script>
      <P onmouseover="tip_it('Link opens in a new window')" onmouseout ="tip_it()">
      Esto es un texto de muestra
      </p>
      
      Podemos asignar estilos como parametro de la funcion.
      tipper("border:2px solid Black; width:150px; color:white; background-color:#7e93aa")
*******************************************************/
function tipper(strestilo){  
   document.write("<style type='text/css'><!--"+
            "#tipper{position:absolute;width:150px;top:200px;left:50px;z-index:7;"+
            "visibility:hidden;border-width:2px;border-style:solid;border-color:black;"+
            "background-color:#7e93aa;color:white;font-size:8pt;font-family:verdana,arial,sans-serif;"+
            "font-weight:none;line-height:12px;text-decoration:none;display:block;padding:4px;"+
            strestilo+"}--></style>");
   
   document.write("<div id='tipper'></div>");   
}

var mouse_X;
var mouse_Y;
var tip_active = 0;
function update_position(){
		document.getElementById('tipper').style.left = mouse_X + 20;
		document.getElementById('tipper').style.top  = mouse_Y;
}

var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;

function getMouseXY(e) {
   if (ie){ // grab the x-y pos.s if browser is IE
      mouse_X = event.clientX + document.body.scrollLeft;
      mouse_Y = event.clientY + document.body.scrollTop;
   }
   else{ // grab the x-y pos.s if browser is NS
      mouse_X = e.pageX;
      mouse_Y = e.pageY;
   }
   if (mouse_X < 0) mouse_X = 0;
   if (mouse_Y < 0) mouse_Y = 0;
   if(tip_active) update_position();
}

function tip_it(content){
	if(content){
      update_position()
		tip_active = 1;
		document.getElementById('tipper').style.visibility = "visible";
      document.getElementById('tipper').innerHTML="<div>"+content+"</div>"
	}else{
		tip_active = 0;
		document.getElementById('tipper').style.visibility = "hidden";
	}
}

