// Inicializa variables
var upH = 16;      // Height de flecha-up
var upW = 15;      // Width de flecha-up
var downH = 16;    // Height de flecha-down
var downW = 15;    // Width de flecha-down
var dragH = 14;    // Height del slider
var dragW = 15;    // Width del slider
var speed = 4;     // Velocidad del scroll

var maxNumOfScrolls;

// detector de browser
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick

var clickUp = false;    // Si cliquea en flecha-up
var clickDown = false;  // Si cliquea en flecha-down
var clickDrag = false;  // Si cliquea en la scrollbar
var clickAbove = false; // Si cliquea arriba de la scrollbar
var clickBelow = false; // Si cliquea abajo de la scrollbar

var scrollH = new Array(); // Height de la barra de scroll

var scrollActual;		// índice que indica qué scroll se está dragueando en un momento

var timer = setTimeout("",500); // Timer
var upL = new Array();   // Up-arrow X
var upT = new Array();   // Up-arrow Y
var downL = new Array(); // Down-arrow X
var downT = new Array(); // Down-arrow Y
var dragL = new Array(); // Scrollbar X
var dragT = new Array(); // Scrollbar Y
var rulerL = new Array(); // Ruler X
var rulerT = new Array(); // Ruler Y
//var contentT = new Array(); // Content layer Y;
var contentT;
var contentH = new Array(); // Content height
var contentClipH = new Array(); // Content clip height
var scrollLength = new Array(); // Number of pixels scrollbar should move
var startY = new Array(); // Keeps track of offset between mouse and span

function existeLayer(layerName)
{
	if (ie4) {
		if (document.all[layerName]) return true;
		else return false;
	}
	if (nn4) {
		//TODO
		return false;
	}
	if (dom) {
		if (document.getElementById(layerName)) return true;
		else return false;
	}
}

// Mousedown
function down(e){

	if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true;
	getMouse(e);
    
	for (i = 1; i <= maxNumOfScrolls; i++) {
		if (existeLayer("up"+i)) {
         	startY = (mouseY - dragT[i]);
        	// If click on up-arrow
        	if(mouseX >= upL[i] && (mouseX <= (upL[i] + upW)) && mouseY >= upT[i] && (mouseY <= (upT[i] + upH))){
        		clickUp = true;
        		return scrollUp(i);
        	}	
        	// Else if click on down-arrow
        	else if(mouseX >= downL[i] && (mouseX <= (downL[i] + downW)) && mouseY >= downT[i] && (mouseY <= (downT[i] + downH))){
        		clickDown = true;
        		return scrollDown(i);
        	}
        	// Else if click on scrollbar
        	else if(mouseX >= dragL[i] && (mouseX <= (dragL[i] + dragW)) && mouseY >= dragT[i] && (mouseY <= (dragT[i] + dragH))) {
        		clickDrag = true;
				scrollActual = i;
        		return false;
        	}
        	else if(mouseX >= dragL[i] && (mouseX <= (dragL[i] + dragW)) && mouseY >= rulerT[i] && (mouseY <= (rulerT[i] + scrollH[i]))){
        		// If click above drag
        		if(mouseY < dragT[i]){
        			clickAbove = true;
        			clickUp = true;
        			return scrollUp(i);
        		}
        		// Else click below drag
        		else{
        			clickBelow = true;
        			clickDown = true;
        			return scrollDown(i);
        		}
        	}
		}
	}

	return true;
}

// Funcion de drageo
function move(e){
	if (clickDrag && contentH[scrollActual] > contentClipH[scrollActual]) {
		getMouse(e);
		dragT[i] = (mouseY - startY);
		
		if(dragT[scrollActual] < (rulerT[scrollActual])) {
			dragT[scrollActual] = rulerT[scrollActual];
		}	
		if(dragT[scrollActual] > (rulerT[scrollActual] + scrollH[scrollActual] - dragH)) {
			dragT[scrollActual] = (rulerT[scrollActual] + scrollH[scrollActual] - dragH);
		}
        
        contentT = -((dragT[scrollActual] - rulerT[scrollActual])*(1/scrollLength[scrollActual]));
		moveTo(scrollActual);
		
		// So ie-pc doesn't select gifs
		return false;
	}
}

function up(){
	clearTimeout(timer);
	// Resetting variables
	clickUp = false;
	clickDown = false;
	clickDrag = false;
	clickAbove = false;
	clickBelow = false;
	return true;
}

// Reads content layer top
function getT(scrollNumber){
	if(ie4) {
		contentT = document.all["content"+scrollNumber].style.pixelTop;
	}
	else if(nn4) {
		//TODO
		contentT = document.contentClip.document.content.top;
	}
	else if(dom) {
		contentT = parseInt(document.getElementById("content"+scrollNumber).style.top);
	}
}

// Lee las coordenadas X , Y del mouse
function getMouse(e){
	if(ie4){
		mouseY = event.clientY + document.body.scrollTop;
		mouseX = event.clientX + document.body.scrollLeft;
	}
	else if(nn4 || dom){
		mouseY = e.pageY;
		mouseX = e.pageX;
	}
}

// Moves the layer
function moveTo(scrollNumber){
	if(ie4){
		document.all["content"+scrollNumber].style.top = contentT;
		document.all["ruler"+scrollNumber].style.top = dragT[scrollNumber];
		document.all["drag"+scrollNumber].style.top = dragT[scrollNumber];
	}
	else if(nn4){
		document.contentClip.document.content.top = contentT;
		document.ruler.top = dragT;
		document.drag.top = dragT;
	}
	else if(dom){
		document.getElementById("content"+scrollNumber).style.top = contentT + "px";
		document.getElementById("drag"+scrollNumber).style.top = dragT[scrollNumber] + "px";
		document.getElementById("ruler"+scrollNumber).style.top = dragT[scrollNumber] + "px";
	}
}

// Scrolls up
function scrollUp(scrollNumber){

	getT(scrollNumber);

		//alert(clickAbove);
		//alert(dragT[scrollNumber]);
	if(clickAbove){

		if(dragT[scrollNumber] <= (mouseY-(dragH/2)))
			return up();
	}
	if(clickUp){
		if(contentT < 0){		
			dragT[scrollNumber] = dragT[scrollNumber] - (speed*scrollLength[scrollNumber]);
			if(dragT[scrollNumber] < (rulerT[scrollNumber]))
				dragT[scrollNumber] = rulerT[scrollNumber];
				
			contentT = contentT + speed;
			if(contentT > 0)
				contentT = 0;
			moveTo(scrollNumber);
			timer = setTimeout("scrollUp("+scrollNumber+")",25);
		}
	}
	return false;
}

// Scrolls down
function scrollDown(scrollNumber) {
	getT(scrollNumber);
	
	if(clickBelow){
		if(dragT[scrollNumber] >= (mouseY-(dragH/2)))
			return up();
	}

	if(clickDown){
		if(contentT > -(contentH[scrollNumber] - contentClipH[scrollNumber])){			
			dragT[scrollNumber] = dragT[scrollNumber] + (speed*scrollLength[scrollNumber]);
			if(dragT[scrollNumber] > (rulerT[scrollNumber] + scrollH[scrollNumber] - dragH))
				dragT[scrollNumber] = (rulerT[scrollNumber] + scrollH[scrollNumber] - dragH);
			
			contentT = contentT - speed;
			if(contentT < -(contentH[scrollNumber] - contentClipH[scrollNumber]))
				contentT = -(contentH[scrollNumber] - contentClipH[scrollNumber]);
			
			moveTo(scrollNumber);
			timer = setTimeout("scrollDown("+scrollNumber+")",25);
		}
	}
	return false;
}

// reloads page to position the layers again
function reloadPage(){
	location.reload();
}

// Preload
function eventLoader(){
	var i;
	// Primero, hay que ver la cantidad de scrolls que hay en una página
	for (i = 1; existeLayer("content"+i); i++)
		;		// i va a tener la cantidad de scrolls
	maxNumOfScrolls = i-1;
	
	
	for (i = 1; i <= maxNumOfScrolls; i++) {
    	if(ie4){
    		if (!document.all["up"+i]) continue;		// Si no está definido el scroll, no hace nada
    		// Up-arrow X and Y variables
    		upL[i] = document.all["up"+i].style.pixelLeft;
    		upT[i] = document.all["up"+i].style.pixelTop;
    		// Down-arrow X and Y variables
    		downL[i] = document.all["down"+i].style.pixelLeft;
    		downT[i] = document.all["down"+i].style.pixelTop;
    		// Scrollbar X and Y variables
    		dragL[i] = document.all["drag"+i].style.pixelLeft;
    		dragT[i] = document.all["drag"+i].style.pixelTop;
    		// Ruler Y variable
    		rulerT[i] = document.all["ruler"+i].style.pixelTop;		
    		// Height of content layer and clip layer
    		contentH[i] = parseInt(document.all["content"+i].scrollHeight);
    		scrollH[i] = parseInt(document.all["fondo"+i].style.height);
    		contentClipH[i] = parseInt(document.all["contentClip"+i].style.height);
    	}
    	else if(nn4){
    		if (!document.up) return;
    		// Up-arrow X and Y variables
    		upL = document.up.left;
    		upT = document.up.top;		
    		// Down-arrow X and Y variables
    		downL = document.down.left;
    		downT = document.down.top;		
    		// Scrollbar X and Y variables
    		dragL = document.drag.left;
    		dragT = document.drag.top;		
    		// Ruler Y variable
    		rulerT = document.ruler.top;
    		// Height of content layer and clip layer
    		contentH = document.contentClip.document.content.clip.bottom;
    		contentClipH = document.contentClip.clip.bottom;
    	}
    	else if(dom){
    		if (!document.getElementById("up"+i)) return;
    		// Up-arrow X and Y variables
    		upL[i] = parseInt(document.getElementById("up"+i).style.left);
    		upT[i] = parseInt(document.getElementById("up"+i).style.top);
    		// Down-arrow X and Y variables
    		downL[i] = parseInt(document.getElementById("down"+i).style.left);
    		downT[i] = parseInt(document.getElementById("down"+i).style.top);
    		// Scrollbar X and Y variables
    		dragL[i] = parseInt(document.getElementById("drag"+i).style.left);
    		dragT[i] = parseInt(document.getElementById("drag"+i).style.top);
    		// Ruler Y variable
    		rulerT[i] = parseInt(document.getElementById("ruler"+i).style.top);
    		// Height of content layer and clip layer
    		contentH[i] = parseInt(document.getElementById("content"+i).offsetHeight);
    		contentClipH[i] = parseInt(document.getElementById("contentClip"+i).offsetHeight);
            scrollH[i] = parseInt(document.getElementById("fondo"+i).offsetHeight);
    		document.getElementById("content"+i).style.top = 0 + "px";
    		
    	}
		
		scrollLength[i] = ((scrollH[i]-dragH)/(contentH[i]-contentClipH[i]));
	}
	// Number of pixels scrollbar should move
	// Initializes event capturing
	if(nn4){
      window.onresize = reloadPage;
      document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
	}

	document.onmousedown = down;
	document.onmousemove = move;
	document.onmouseup = up;
	
}