/********************************************************
	DOM Lib: scroll
		
	Crea un scroll a partir de un único elemento HTML
	manipulando sus valores de clip y top
	(Sugerencia de Ramón Illobre: ramon@doubleyou.com)
	
	Comentarios, dudas, sugerencias: jose@doubleyou.com
	
	Última revisión: 19/07/04
********************************************************/

/*
TO DO:
	- Configuración del layout y de otros parámetros (desplazamiento, velocidad...)
	- Implementar diferentes estados para los botones
	- Testearlo en diversos elementos 
	- Sería interesante que el tamaño del ascensor fuese proporcional a la longitud del texto
	- Si el elemento se redimensiona, el scroll debería reposicionarse. Por ahora, sólo he conseguido que se dispare el evento "onresize" en IE. Una posibilidad (sucia) sería que el elemento comprobase si tiene scroll en el momento de redimensionarse...
	- ¿Vale la pena que se escaneen automáticamente todos los elementos de la página para ver si alguno necesita scroll?
	
	- Crear una versión light sin ascensor para páginas ligeras
*/

DOM.scrollCounter = 0;

DOM.needScroll = function(el){
	return (DOM.getContentHeight(el)>DOM.getHeight(el));
}

DOM.isScroll = function(el){
	return (DOM.getElement(el)._scroll!=null);
}


DOM.addScroll = function(el,layoutObj,absolutePositionBol){
	var el = this.getElement(el);

	//Sólo se pueden modificar los valores de clip en elementos posicionados absolutamente
	var y = DOM.getAbsolutePosition(el,absolutePositionBol).y;
	el.style.position = 'absolute';	
	DOM.setY(el,y);
	el._scroll = new DOMscroll(el,layoutObj);

	var w = DOM.getWidth(el)-(DOM.getWidth(el._scroll.UP)+2);

	DOM.setWidth(el,w);

	DOM.setClip(el,0,DOM.getWidth(el),DOM.getHeight(el),0);

	el._scroll.init();

	el.style.overflow = 'visible';	

}

DOM.addScrollTrack = function(el,w,bgColor,offsetY){
	if(!DOM.isScroll(el)) return false;
	this.getElement(el)._scroll.addTrack(w,bgColor,offsetY);
}

DOM.addScrollThumb = function(el,w,h,bgColor,bgImage){
	if(!DOM.isScroll(el)) return false;
	this.getElement(el)._scroll.addThumb(w,h,bgColor,bgImage);
}

DOM.setScrollVisible = function(el,bol){
	var el = this.getElement(el);
	if (!DOM.isScroll(el)) return false;
	el._scroll.setVisible(bol);
}

DOM.updateScroll = function(el){
	var el = this.getElement(el);
	if (!DOM.isScroll(el)) return false;
	el._scroll.update();

}

DOM.forceScroll = function(el,desp){
	var el = this.getElement(el);
	if (!DOM.isScroll(el)) return false;
	el._scroll.forceScroll(desp);
}

function DOMscroll(el,layoutObj){
	
	this.elm = el;
	
	//Creamos una referencia que pueda utilizar el setInterval
	this.obj = 'DOMscroll'+DOM.scrollCounter++;
	eval(this.obj+'=this');
	
	this.SPEED = {
		low: 5,
		high: 10
	}
	
	var botWidth = (layoutObj && layoutObj.botWidth) ? layoutObj.botWidth : 15;
	var botHeight = (layoutObj && layoutObj.botHeight) ? layoutObj.botHeight : 15;

	var bgColor = (layoutObj && layoutObj.botBgColor) ? layoutObj.botBgColor : '';
	if (!layoutObj || !layoutObj.path) bgColor = (bgColor!='') ? bgColor : 'blue';
	
	var z = DOM.getStyle(el,'zIndex');
	if (isNaN(z)) z = 10;
	this.UP = DOM.createElement(
		'div',
		{
			position: 'absolute',
			left: (DOM.getX(el)+DOM.getWidth(el)-botWidth)+'px',
			top: DOM.getY(el)+'px',
			width: botWidth+'px',
			height: botHeight+'px',
			zIndex: z,
			backgroundColor: bgColor,
			backgroundImage: (layoutObj && layoutObj.path) ? 'url('+layoutObj.path+'/up.gif)' : '',
			backgroundRepeat: 'no-repeat',
			marginLeft: '50px'
		}
	);
	
	this.DOWN = DOM.createElement(
		'div',
		{
			position: 'absolute',
			left: (DOM.getX(el)+DOM.getWidth(el)-botWidth)+'px',
			top: (DOM.getY(el)+DOM.getHeight(el)-botHeight)+'px',
			width: botWidth+'px',
			height: botHeight+'px',
			zIndex: z,
			backgroundColor: bgColor,
			backgroundImage: (layoutObj && layoutObj.path) ? 'url('+layoutObj.path+'/down.gif)' : '',
			backgroundRepeat: 'no-repeat',
			marginLeft: '50px'

		}
	);

	el.parentNode.appendChild(this.UP);
	el.parentNode.appendChild(this.DOWN);	
	
	this.UP._dir = 'up';
	this.DOWN._dir = 'down';
	
	this.UP._parent = this.DOWN._parent = this;
	
	this.UP.onmouseover = this.DOWN.onmouseover = function(){
		this._parent._start(this._dir)
	}
	
	this.UP.onmouseout = this.DOWN.onmouseout = function(){
		this._parent._stop();
	}
	
	this.UP.onmousedown = this.DOWN.onmousedown = function(){
		this._parent._setSpeed('high');
	}	
	
	this.UP.onmouseup = this.DOWN.onmouseup = function(){
		this._parent._setSpeed('low');
	}		

}


DOMscroll.prototype.addTrack = function(w,bgColor,offsetY){
	var left = DOM.getX(this.UP)+((DOM.getWidth(this.UP))/2);

	this.TRACK = DOM.createElement(
		'div',
		{
			position: 'absolute',
			left: left+'px',
			top: (offsetY!=null) ? (DOM.getY(this.UP)+DOM.getHeight(this.UP)+offsetY)+'px' : (DOM.getY(this.UP)+DOM.getHeight(this.UP))+'px',
			width: w+'px',
			height: (offsetY!=null) ? (DOM.getY(this.DOWN)-(DOM.getY(this.UP)+DOM.getHeight(this.UP)+(offsetY*2)))+'px' : (DOM.getY(this.DOWN)-DOM.getY(this.UP))+'px',
			backgroundColor: (bgColor!=null) ? bgColor : DOM.getStyle(this.UP,'backgroundColor'),
			zIndex: DOM.getStyle(this.UP,'zIndex')-2
		}
	);

	
	this.UP.parentNode.appendChild(this.TRACK);

}

DOMscroll.prototype.addThumb = function(w,h,bgColor,bgImage){
	var left = DOM.getX(this.UP)+((DOM.getWidth(this.UP)-w)/2)+2;
	
	this.THUMB = DOM.createElement(
		'div',
		{
			position: 'absolute',
			left: left+'px',
			top: (this.TRACK) ? DOM.getY(this.TRACK)+'px' : (DOM.getY(this.UP)+DOM.getHeight(this.UP))+'px',
			width: w+'px',
			height: (h!=null) ? h+'px' : 'auto',
			backgroundColor: (bgColor!=null) ? bgColor : DOM.getStyle(this.UP,'backgroundColor'),
			backgroundImage: (bgImage!=null) ? 'url('+bgImage+')' : '',
			backgroundRepeat: 'no-repeat',
			zIndex: DOM.getStyle(this.UP,'zIndex')-2
		}
	);
	
	this.UP.parentNode.appendChild(this.THUMB);
	
	this.THUMB._parent = this;
	
	DOM.dragObject.addElement(this.THUMB);

	var bottom = (this.TRACK) ? DOM.getY(this.TRACK)+DOM.getHeight(this.TRACK) : DOM.getY(this.DOWN);
	DOM.dragObject.setDragBoundary(
		this.THUMB,
		DOM.getY(this.THUMB),
		DOM.getX(this.THUMB)+DOM.getWidth(this.THUMB),
		bottom,
		DOM.getX(this.THUMB)
	);
	
	this.THUMB.ondrag = function(){
		this._parent.onThumbDrag();
	}
	
	this.orgThumbY = DOM.getY(this.THUMB);
	
	this.getThumbParameters();
}

DOMscroll.prototype.init = function(){
	this.maxH = DOM.getContentHeight(this.elm);

	//Almacenamos el valor top original
	this.orgY = DOM.getY(this.elm);
	//Almacenamos el valor height original
	this.orgH = DOM.getHeight(this.elm);

}

DOMscroll.prototype.update = function(){
	
	this.maxH = DOM.getContentHeight(this.elm);
	var clip = DOM.getClip(this.elm);
	if (clip[2]>this.maxH){
			var y = this.orgY-(this.maxH-this.orgH);
			DOM.setY(this.elm,y);
			DOM.setClip(this.elm,this.maxH-this.orgH,null,this.maxH,null);
			if (this.THUMB) DOM.setY(this.THUMB,this.thumbBottom);
	}	
	
	if (this.THUMB){
		this.getThumbParameters();

		var y = this.orgThumbY+((this.orgY-DOM.getY(this.elm))*this.thumbRatio);
		DOM.setY(this.THUMB,y);	
	}
	
}

DOMscroll.prototype.setThumbSize = function(){

}

DOMscroll.prototype.getThumbParameters = function(){
	
//	this.scrollBottom = DOM.getContentHeight(this.elm)-DOM.getClip(this.elm)[2];
	this.scrollBottom = DOM.getContentHeight(this.elm)-this.orgH;

	var thumbDesp = (this.TRACK) ? DOM.getHeight(this.TRACK)-DOM.getHeight(this.THUMB) : DOM.getY(this.DOWN)-(DOM.getY(this.THUMB)+DOM.getHeight(this.THUMB));
	this.thumbTop = (this.TRACK) ? DOM.getY(this.TRACK) : DOM.getY(this.DOWN);
	
	this.thumbBottom = this.thumbTop+thumbDesp;
	
	this.thumbRatio = thumbDesp/this.scrollBottom;

	this.scrollRatio = this.scrollBottom/thumbDesp;

}

DOMscroll.prototype.setVisible = function(bol){
	DOM.setVisible(this.UP,bol);
	DOM.setVisible(this.DOWN,bol);
	if (this.TRACK) DOM.setVisible(this.TRACK,bol);
	if (this.THUMB) DOM.setVisible(this.THUMB,bol);
}

DOMscroll.prototype._start = function(dir){
	this._dir = dir;
	this._speed = this.SPEED.low;
	this.timer = setInterval(this.obj+'.doScroll()',25);
}

DOMscroll.prototype._stop = function(){
	clearInterval(this.timer);
}

DOMscroll.prototype._setSpeed = function(value){
	this._speed = this.SPEED[value];
}

DOMscroll.prototype.doScroll = function(){
	var clip = DOM.getClip(this.elm);
	
	if (this._dir=='down'){
		if (clip[2]+this._speed>this.maxH){
			var y = this.orgY-(this.maxH-this.orgH);
			DOM.setY(this.elm,y);
			DOM.setClip(this.elm,this.maxH-this.orgH,null,this.maxH,null);
			if (this.THUMB) DOM.setY(this.THUMB,this.thumbBottom);
		}
		else{
			DOM.setY(this.elm,DOM.getY(this.elm)-this._speed);
			DOM.setClip(this.elm,clip[0]+this._speed,null,clip[2]+this._speed,0);
			
			if (this.THUMB) {
				var y = this.orgThumbY+((this.orgY-DOM.getY(this.elm))*this.thumbRatio);
				DOM.setY(this.THUMB,y);
			}
		}
	}
	else{
		if (clip[0]-this._speed>0){
			DOM.setY(this.elm,DOM.getY(this.elm)+this._speed);
			DOM.setClip(this.elm,clip[0]-this._speed,null,clip[2]-this._speed,null);	
			if (this.THUMB) {
				var y = this.orgThumbY+((this.orgY-DOM.getY(this.elm))*this.thumbRatio);
				DOM.setY(this.THUMB,y);
			}			
		}
		else{
			DOM.setY(this.elm,this.orgY);
			DOM.setClip(this.elm,0,null,this.orgH,null);
			if (this.THUMB) DOM.setY(this.THUMB,this.thumbTop)
		}
	}
}

DOMscroll.prototype.onThumbDrag = function(){
	var desp = DOM.getY(this.THUMB)-this.thumbTop;
	
	var mov = desp*this.scrollRatio;
	
	var y = this.orgY-mov;
	
	DOM.setY(this.elm,y);
	DOM.setClip(this.elm,mov,null,mov+this.orgH,null)
}



DOMscroll.prototype.forceScroll = function(desp){
	if (desp>this.maxH) desp = this.maxH;
	DOM.setClip(this.elm,desp,null,this.orgH+desp,0);
	var y = this.orgY-desp;
	DOM.setY(this.elm,y);		
	
	if (this.THUMB) {
		y = this.orgThumbY+((this.orgY-DOM.getY(this.elm))*this.thumbRatio);
		
		DOM.setY(this.THUMB,y);
	}	
}