var altoTot = 165; // Alto de las ventanas 
   var altoVtn = 20; // Alto de la ventanita que  
   // indica que es lo que se muestra 
   var anchoTot = 340; // Ancho de la ventana del texto 
   var anchoVtn = 7; // Ancho de la ventanita que  
   // indica que es lo que se muestra 
   var movimiento = false; // Si se debe mover 
   var desp = 0; // Desplazamiento que hay que  
   // tener en cuenta cuando se  
   // pincha dentro de la ventanita 
   var topInicial = 15;

   // Devuelve el valor numerico de una  
   // propiedad de los estilos (elimina el px) 
   function valorCSS(obj, tipo) { 
	 var aux = eval("parseFloat(obj.style." + tipo +  
	   ".substring(0,obj.style." + tipo + ".length-2))"); 
	 return aux; 
   } 

   // Crea la miniatura segun el texto 
   // del contenedor 
   function creaMiniatura() { 
	 // Contenedor del texto 
	 var orig = document.getElementById("contenedor"); 
	 // Contenedor de la miniatura 
	 var mini = document.getElementById("miniatura"); 
	  
	 // Inicializo la posición del scroll para cuando se haga refresh 
	 orig.scrollTop = "0px";  
	 // Se oculta la miniatura hasta que acabe 
	 mini.style.display = "none"; 
	  
	 // La miniatura está formada por 3 capas:  
	 // 1. la ventanita que indica que se está mostrando 
	 // 2. el texto 
	 // 3. una tapadera para evitar que se seleccione el texto 
	 mini.innerHTML = '<div id="ventana"></div><div id="contenedor-texto"></div><div id="tapa"></div>'; 
	  
	 // Inicialización de valores 
	 mini.style.height = altoTot+"px"; 
	 document.getElementById("contenedor-texto").style.height = altoTot+"px"; 
	 document.getElementById("ventana").style.height = altoVtn+"px"; 
	 document.getElementById("ventana").style.top = topInicial+"px"; 
	  
	 // Se cogen todas las imagenes (que deben tener su  
	 // alto y ancho fijados) y se redimensionan para que 
	 // tengan un tamaño proporcional 
	 var imgs = mini.getElementsByTagName("IMG"); 
	  
	 var alto = orig.scrollHeight; 
	 var porc = anchoVtn/anchoTot; 
	  
	 for (var i=0; i<imgs.length; i++) { 
	   imgs[i].style.width = (porc*valorCSS(imgs[i], "width"))+"px"; 
	   imgs[i].style.height = (porc*valorCSS(imgs[i], "height"))+"px"; 
	 } 
  
	 // Se muestra la miniatura 
	 mini.style.display = "block"; 
   } 
   
   
   
   // Empieza o finaliza el movimiento 
   // de la ventanita 
   function estadoScrolling(evt, obj, ok) { 
	 movimiento = ok; 
  
	 // Si hay movimiento, hay que tener 
	 // en cuenta si se ha pinchado dentro 
	 // de la ventanita, si es así, se toma 
	 // la distancia desde el ratón hasta el "top" 
	 // de la ventanita, para luego sumar esa distancia 
	 if (ok) { 
	   var y = evt.layerY? evt.layerY : evt.offsetY; // Diferencias entre IE y Firefox; 
	   var vtn = document.getElementById("ventana"); 
		
	   if (y < valorCSS(vtn, "top") ||  
		 y > valorCSS(vtn, "top")+altoVtn) { 
		 // si se ha pulsado fuera se  
		 // desplaza a la posición y se 
		 // toma como desplazamiento = 0 
		 scrollingCapa(evt, obj); 
		 desp = 0; 
	   } else { 
		 // si se ha pulsado dentro se 
		 // toma la longitud del desplazamiento 
		 desp = y - valorCSS(vtn, "top"); 
	   } 
	 } 
   }    

 // Mueve la ventanita según la posición del ratón 
   // y desplaza (scrolling) el texto 
   function scrollingCapa(evt, obj) { 
	 if (movimiento) { 
	   var y = evt.layerY? evt.layerY : evt.offsetY; // Diferencias entre IE y Firefox; 
		
	   // Ventana que contiene el texto 
	   var orig = document.getElementById("contenedor"); 
	   // Alto total del contenedor del texto 
	   var alto = orig.scrollHeight; 
		
	   // Scrolling del texto 
	   orig.scrollTop = (alto*(y-desp)/obj.offsetHeight)-10; 
	  
	   // Movimiento de la ventana 
	   var vtn = document.getElementById("ventana"); 
	   var pos = parseInt(y-desp) > altoTot-altoVtn? altoTot-altoVtn : y-desp-2; 
	   pos = (pos < 0? 0: pos ) + topInicial; 
	   vtn.style.top = pos+"px"; 
	 } 
   }