window.addEvent('domready', function(){
	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= $('capaScroll').getSize().size.y - $('up').getSize().size.y - $('down').getSize().size.y;
	//cojemos el ancho de los botones, p. ej. el de subir
	var ancho = '20px';
	//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:"transparent"
		});

	//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=$('capaScroll').getSize().scrollSize.y;
alturaTotal = Math.round(alturaTotal*0.85); /* ADD 調整捲軸拉長高度 */

	var alturaBarra='35px';									//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,
        backgroundImage: "url(images/bar.gif)",
		cursor: "n-resize"
		});

	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()
			{
				cur_pos=$('barra').getPosition().y;
				desplazamiento=cur_pos-limSup;
				$('capaScroll').scrollTo('0', desplazamiento*relacion);
			}
		};
	
	barra.makeDraggable(draggableOptions);

	function mover(){
		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:15});
		posiciona.start(cur_pos,posicion);
		switch(cur_pos)
		{
			case limInf:   $clear(myTimerDown);$('capaScroll').scrollTo('0', alturaTotal);
							break;
			case limSup: $clear(myTimerUp); $('capaScroll').scrollTo('0', '0');
							break;
			default: $('capaScroll').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);
		}          	

	}
	
	$('up').addEvent('mouseover', function(){
	  var param=['up',limSup,limInf,'1'];
		myTimerUp=mover.periodical(10,param);
		});
		
	$('up').addEvent('mouseleave', function(){
		$clear(myTimerUp);
		});
		
	$('down').addEvent('mouseover', function(){
	  var param=['down',limSup,limInf,'1'];
		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
	    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);  
    	}
  	});
});