window.addEvent('domready', function(){


Element.Events.extend({
		'wheelup': {
			type: Element.Events.mousewheel.type,
			map: function(event){
				event = new Event(event);
				if (event.wheel >= 0) this.fireEvent('wheelup', event)
			}
		},
	 
		'wheeldown': {
			type: Element.Events.mousewheel.type,
			map: function(event){
				event = new Event(event);
				if (event.wheel <= 0) this.fireEvent('wheeldown', event)
			}
		}
	});


	var capaSB = new Element('div');
	capaSB.setAttribute('id','capaScrollBar');
	capaSB.injectInside($E('body'));
	//cojemos la altura de la capaScroll para que el scroll estŽ entre los botones de subir y bajar
	var altura= $('visor').getSize().size.y - $('up').getSize().size.y - $('down').getSize().size.y;

	//cojemos el ancho de los botones, p. ej. el de subir
	var ancho = $('up').getSize().size.x;
	//cojemos las coordenadas de los botones para insertar la capa entre ellos. Le restamos la altura del bot—n
	var techo = $('up').getPosition().y+ $('up').getSize().size.y;
	var left = $('up').getPosition().x;
	//aplicamos los estilos
	capaSB.setStyles({
		position: 'absolute',
		width: ancho,
		height: altura,
		left: left,
		top: techo,
		backgroundColor:"#EEE"
		});

	//Ahora crearemos la barra del scroll
	var barra = new Element('div');
	barra.setAttribute('id','barra');
	barra.injectInside($('capaScrollBar'));
	//capturamos el tama–o total (con el overflow) de la capaScroll
	var alturaTotal=$('visor').getSize().scrollSize.y;
	
	
	
	
	var alturaBarra='40px';									//le damos el tama–o que queremos a la barra
	var offsetCapaScroll=alturaTotal-altura;				//obtenemos el primer monto
	var offsetBarra=altura-parseInt(alturaBarra);			//obtenemos el segundo monto
	var relacion= offsetCapaScroll/offsetBarra;				//obtenemos la relacion		
	var anchoBarra=ancho;
	barra.setStyles({
		position: 'absolute',
		width: anchoBarra,
		height: alturaBarra,
//		left: left+1,										//no nos hace falta, porque la barra est‡ dentro de la capaScrollBar
//		top: top,
		backgroundColor: "#5c789d"
		});

	var cur_pos=0;
	var limInf=altura-parseInt(alturaBarra)+techo;
	var limSup=$('barra').getPosition().y;	
	var myTimerUp,myTimerDown,myTimerPageUp,myTimerPageDown;
	
	var draggableOptions={
		container:	capaSB,
		onDrag: function()
			{	var alturaTotal=$('visor').getSize().scrollSize.y;
				var offsetCapaScroll=alturaTotal-altura;				//obtenemos el primer monto
				var offsetBarra=altura-parseInt(alturaBarra);			//obtenemos el segundo monto
				var relacion= offsetCapaScroll/offsetBarra;				//obtenemos la relacion	
				cur_pos=$('barra').getPosition().y;
				desplazamiento=cur_pos-limSup;
				$('visor').scrollTo('0', desplazamiento*relacion);
			}
		};
	
	barra.makeDraggable(draggableOptions);

	function ocultarbarra(){
		// Ocultamos la barra, si no hay necesidad de scroll
		var alturavisor=$('visor').getSize().size.y;
		var alturavisorconten=$('visor').getSize().scrollSize.y;
	
		if (alturavisor>=alturavisorconten) {
			var div = $('capaScrollBar').setStyles({
			display:'block',
			opacity: 1
			});
			var cambio=new Fx.Style(div, 'opacity', {duration: 500} ).start(0);
			
			var div = $('up').setStyles({
			display:'block',
			opacity: 1
			});
			var cambio=new Fx.Style(div, 'opacity', {duration: 500} ).start(0);
			
			var div = $('down').setStyles({
			display:'block',
			opacity: 1
			});
			var cambio=new Fx.Style(div, 'opacity', {duration: 500} ).start(0);
		};
	};
	
	//setTimeout(ocultarbarra(),2000);
	




	function mover(){
		var alturaTotal=$('visor').getSize().scrollSize.y;
		var offsetCapaScroll=alturaTotal-altura;				//obtenemos el primer monto
		var offsetBarra=altura-parseInt(alturaBarra);			//obtenemos el segundo monto
		var relacion= offsetCapaScroll/offsetBarra;				//obtenemos la relacion	
		
		var anchoBarra=ancho;
			
		var limInf=altura-parseInt(alturaBarra)+techo;
		var limSup=$('barra').getPosition().y;	
	
	
		param=this;
		dir=param[0];				//'up' o 'down'
		var limS=param[1];			//l’mite superior
		var limI=param[2];			//l’mite inferior
		var step=param[3].toInt();			//velocidad
		cur_pos=$('barra').getPosition().y;		
		
		if(dir=='up'){
			cur_pos-=step;
		}
		else{
			cur_pos+=step;
		}

		//calculamos el desplazamiento que realiza la barra para luego aplicarlo a la capaScroll
		desplazamiento=cur_pos-limS;	
		
		//ajustamos los excesos en los extremos de la capa o del punto donde se ha hecho click
		if(cur_pos>limI) {
			desplazamiento=cur_pos-limI;
			cur_pos=limI;
		}
		if(cur_pos<limS) {
			desplazamiento=limS-cur_pos;
			cur_pos=limS;
		}	
		
		posicion=cur_pos-techo;
		var posiciona=new Fx.Style('barra','top',{duration:1});
		posiciona.start(cur_pos,posicion);
		switch(cur_pos)
		{
			case limInf:  $clear(myTimerDown);$('visor').scrollTo('0', alturaTotal);
							break;
			case limSup: $clear(myTimerUp); $('visor').scrollTo('0', '0');
							break;
			default: $('visor').scrollTo('0', desplazamiento*relacion);
		}

		//comprobamos para anular los timer
		if(cur_pos<=limS){
			if(myTimerUp) $clear(myTimerUp);
			if(myTimerPageUp) $clear(myTimerPageUp);
		} 	
		if(cur_pos>=limI){
			if(myTimerDown) $clear(myTimerDown);
			if(myTimerPageDown) $clear(myTimerPageDown);
			
		}          	

	}
	
	
	/* Rueda del rat—n */
	$('visor').addEvents({
		'wheelup': function(e) {
			e = new Event(e).stop();
	 
			var param=['up',limSup,limInf,'40'];
			myTimerUp=mover.delay(1,param);
		},
	 
		'wheeldown': function(e) {
			e = new Event(e).stop();
	 
			var param=['down',limSup,limInf,'40'];
		myTimerDown=mover.delay(1, param);
		}
	});
	
	/* Clicks y otras cosas del rat—n */
	$('up').addEvent('mouseover', function(){
	  var param=['up',limSup,limInf,'10'];
		myTimerUp=mover.periodical(10,param);
		});
		
	$('up').addEvent('mouseleave', function(){
		$clear(myTimerUp);
		});
		
	$('down').addEvent('mouseover', function(){
	  var param=['down',limSup,limInf,'10'];
		myTimerDown=mover.periodical(10, param);
		});
		
	$('down').addEvent('mouseleave', function(){
		$clear(myTimerDown);
		});
		
	$('capaScrollBar').addEvent('click', function(event){
		event= new Event(event);
	    mouseY=event.page.y;                     //capturamos la posici—n 'y' del rat—n
	    
	    		var alturaTotal=$('visor').getSize().scrollSize.y;
				var offsetCapaScroll=alturaTotal-altura;				//obtenemos el primer monto
				var offsetBarra=altura-parseInt(alturaBarra);			//obtenemos el segundo monto
				var relacion= offsetCapaScroll/offsetBarra;				//obtenemos la relacion
				var altura= $('visor').getSize().size.y - $('up').getSize().size.y - $('down').getSize().size.y;
				
	    
	    if(mouseY < $('barra').getPosition().y){  //si hacemos click encima de la barra
    		var param=['up',mouseY,limInf,'20'];
      		myTimerPageUp=mover.periodical(10,param);
    	}
    	if(mouseY > $('barra').getPosition().y + parseInt(alturaBarra)){ //si hacemos click por debajo
      		var param=['down',limSup,mouseY-parseInt(alturaBarra),'20'];
      		myTimerPageDown=mover.periodical(10, param);  
    	}
  	});
});