/*
MODO DE USO:
En el encabezado del HTML, luego de incluir este JS, agregar las lineas que definen los scrolls a usar, siguiendo el siguiente ejemplo:
    var Scroll = new Array(4);      //el 4 indica la cantidad de scrolls. Se accede a cada uno usando indices desde 0 hasta 3 en este ejemplo
    Scroll[0] = new objScroll(cuadro1,cuadro1c,"flecha_ar.gif","flecha_ab.gif","flecha_ar_p.gif","flecha_ab_p.gif",16,16);
    Scroll[1] = new objScroll(cuadro2,cuadro2c,"flecha_ar.gif","flecha_ab.gif","flecha_ar_p.gif","flecha_ab_p.gif",16,16);
    ...
cuadro1 : id del div externo
cuadro1c : id del div interno
    
Definir en codigo HTML el texto a escrolificar mediante la estructura:
    <div id="cuadro" style="position: absolute; left:100px; top:100px; width: 300px; height: 300px;">
    <div id="cuadroi" style="position: absolute;">
    TEXTO
    </div>
    </div>
En el DIV externo, definir como minimo: posicionamiento absoluto con todas las coordenasdas top, left, height y width. El id
puede ser cualquier nombre.
En el DIV interno SOLO debe estar position absolute y el id puede ser cualquiera
*/
/*
objeto objScroll:
id_parent          :
id_child           :
i_botonarriba      :
i_botonabajo       :
i_botonarriba_pres :
i_botonabajo_pres  :
ancho              :
alto               :
*/
function objScroll(id_parent , id_child , i_botonarriba , i_botonabajo , i_botonarriba_pres , i_botonabajo_pres , _ancho , _alto){
	//VARIABLES PRIVADAS
	var este = this;		//referencia a este objeto para los event handlers y funciones internas
	var posv = 0;			//posicion vertical actual. Usada por scrollup/scrolldown

	var pasomin = 1;
	var pasomax = 15;
	var paso = pasomin;
	var varriba = 0;
	var vabajo = 0;

	var scroll_timer;		//variable tipo timer para scroll sostenido (cuando se deja apretado boton de mouse)
	var id_p = id_parent;	//id de los DIVS que conforman scroll
	var id_c = id_child;	//id de los DIVS que conforman scroll
	var alto;				//alto en pixeles visible de los divs
	var altototal;			//alto en pixeles total del div contenedor
	var b_alto = _alto;		//alto de botones en pixeles
	var b_ancho = _ancho;	//ancho de botones en pixeles
	var obj_id_p;
	var obj_id_c;
	//objetos tipo imagenes para precargar botones. El tamaņo de las imagenes en estos objetos son los originales.
	var obj_barr = new Image();
	var obj_baba = new Image();
	var obj_barr_pres = new Image();
	var obj_baba_pres = new Image();
	//especifico la url de cada imagen
	obj_barr.src = i_botonarriba; obj_barr.width = b_ancho; obj_barr.height = b_alto;
	obj_baba.src = i_botonabajo; obj_baba.width = b_ancho; obj_baba.height = b_alto;
	obj_barr_pres.src = i_botonarriba_pres; obj_barr_pres.width = b_ancho; obj_barr_pres.height = b_alto;
	obj_baba_pres.src = i_botonabajo_pres; obj_baba_pres.width = b_ancho; obj_baba_pres.height = b_alto;
	//creo botones con los tamaņos adecuados pero sin imagen asignada aun
	this.botonarriba = new Image(b_ancho,b_alto);
	this.botonabajo  = new Image(b_ancho,b_alto);
	//establezco sus propiedades
	this.botonarriba.style.position   = "absolute";
	this.botonarriba.style.visibility = "visible";
	this.botonarriba.style.display    = "block";
	this.botonarriba.style.border     = "0";
	this.botonarriba.style.margin     = "0";
	this.botonarriba.style.padding    = "0";
	this.botonarriba.style.cursor     = "pointer";
	this.botonarriba.style.right      = "0";
	this.botonabajo.style.position    = "absolute";
	this.botonabajo.style.visibility  = "visible";
	this.botonabajo.style.display     = "block";
	this.botonabajo.style.border      = "0";
	this.botonabajo.style.margin      = "0";
	this.botonabajo.style.padding     = "0";
	this.botonabajo.style.cursor      = "pointer";
	this.botonabajo.style.right       = "0";
	//establezco id
	this.botonarriba.id = "scr_barr" + id_p;
	this.botonabajo.id  = "scr_baba" + id_p;
	//especifico las imagenes iniciales
	this.botonarriba.src = obj_barr.src;
	this.botonabajo.src  = obj_baba.src;
	//eventos de los botones
	//this.botonarriba.onmousedown = moverarriba_on;
	//this.botonarriba.onmouseup   = moverarriba_off;
	this.botonarriba.onmouseover = moverarriba_on;
	this.botonarriba.onmouseout  = moverarriba_off;
	//this.botonabajo.onmousedown  = moverabajo_on;
	//this.botonabajo.onmouseup    = moverabajo_off;
	this.botonabajo.onmouseover  = moverabajo_on;
	this.botonabajo.onmouseout   = moverabajo_off;
	//METODOS DEL OBJETO
	//metodo para escrolificar
	this.escrolificar = function(){
		obj_id_p = document.getElementById(id_p);
		obj_id_c = document.getElementById(id_c);

		//estilos generales de los divs
        obj_id_p.style.position = "absolute";
		obj_id_c.style.position = "absolute";
		obj_id_p.style.overflow = "hidden";
		obj_id_c.style.overflow = "visible";
		alto = obj_id_p.clientHeight;
		altototal = obj_id_p.scrollHeight;

		//posiciono los botones a los bordes sup e inf del parent
		this.botonarriba.style.top   = "0px";
		this.botonabajo.style.top    = (alto - b_alto) + "px";

		//posicion DIV interno
		obj_id_c.style.left   = "0";
		obj_id_c.style.top    = "0";
		obj_id_c.style.height = "100%";
		obj_id_c.style.width  = (parseInt(obj_id_p.clientWidth) - b_ancho - 5) + "px";

		//muestro divs
		obj_id_p.style.visibility = "visible";
		obj_id_c.style.visibility = "visible";

		//agrego imagenes como child de id_parent
		obj_id_p.appendChild(this.botonarriba);
		obj_id_p.appendChild(this.botonabajo);

		//eventos del div padre para rueda del mouse
		//obj_id_p.onmousewheel = ruedademouse;
		if (obj_id_p.addEventListener){
			obj_id_p.addEventListener('DOMMouseScroll', ruedademouse, false);
			obj_id_p.addEventListener('mousewheel', ruedademouse, false);
		} else {
			if (obj_id_p.attachEvent) obj_id_p.attachEvent('onmousewheel', ruedademouse);
			else obj_id_p.onmousewheel = ruedademouse;
		}
		//obj_id_p.onkeypress = teclado;
	}

	//FUNCIONES PRIVADAS
	function scrollup(){
		if (posv >= 0){
			posv = posv - paso;
			if (posv < 0) posv=0;
			//area = "rect(" + posv + "px auto " + posv + alto + "px auto)";
			obj_id_c.style.top  = (-posv)+"px";
			//obj_id_c.style.clip = area;
		}
	}
	function scrolldown(){
		if (posv <= (altototal - alto + pasomax)){
			posv = posv + paso;
			//if (posv < 0) posv=0;
			//area = "rect(" + posv + "px auto " + posv + alto + "px auto)";
			obj_id_c.style.top  = (-posv)+"px";
			//obj_id_c.style.clip = area;
		}
	}
	function ruedademouse(e){
		e = e ? e : window.event;
		var delta = e.detail ? e.detail : e.wheelDelta;
		var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;
		if (normal>0){
			delta = paso;
			paso = paso*3;
			scrollup();
			paso = delta;
		} else {
			delta = paso;
			paso = paso*3;
			scrolldown();
			paso = delta;
		}
	}
	function teclado(e){
		var Tecla = (window.event) ? event.keyCode : e.keyCode;
		alert(Tecla);
	}
	function moverarriba_on(){
		varriba++;
		if (varriba>5){
			varriba = 0;
			paso++;
			if (paso>pasomax) paso = pasomax;
		}
		clearInterval(scroll_timer);
		este.botonarriba.src = obj_barr_pres.src;
		scrollup();
		scroll_timer = setInterval(function(){moverarriba_on();},20);
	}
	function moverarriba_off(){
		varriba = 0;
		paso = pasomin;
		este.botonarriba.src = obj_barr.src;
		clearInterval(scroll_timer);
	}
	function moverabajo_on(){
		vabajo++;
		if (vabajo>5){
			vabajo = 0;
			paso++;
			if (paso>pasomax) paso = pasomax;
		}
		clearInterval(scroll_timer);
		este.botonabajo.src = obj_baba_pres.src;
		scrolldown();
		scroll_timer = setInterval(function(){moverabajo_on();},20);
	}
	function moverabajo_off(){
		vabajo = 0;
		paso = pasomin;
		este.botonabajo.src = obj_baba.src;
		clearInterval(scroll_timer);
	}
}