//Init 'global' variables...
var mousePos;
var dragging = false;
var startMouseY;
var startMouseX;
var startScrollBarY;
var startScrollBarX;
var scrollScope;
var gblScrollBar;
var gblMask;


// Call mouseMove function on mousemouse
document.onmousemove = mouseMove;
document.onmouseup = stopDrag();

function mouseMove(ev){
	ev           = ev || window.event;
	mousePos = mouseCoords(ev);
	// If dragging
	if(dragging == true){
		switch(scrollScope){
			case 'yScroll':
				updatePosition('top');
				break;
			case 'xScroll':
				updatePosition('left');
				break;
			default:
				break; 
		}	
	}
	
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function startDrag(event, barElement,maskElement, scrollDirection){
	if (event.preventDefault) {
		event.preventDefault();
	}else {
		event.returnValue = false; // IE sucks
	}
	
	//set dragging boolean to true
	dragging = true;	
	//Update the global variables for the two key elements (gblScrollBar and gblMask)
	gblScrollBar = document.getElementById(barElement.id);
	gblMask = document.getElementById(maskElement);
	//Get position of the mouse on startDrag()
	startMouseY = mousePos.y;
	startMouseX = mousePos.x;
	//Get position of scrollbar on startDrag()
	startScrollBarY = parseInt(barElement.style.top);
	startScrollBarX = parseInt(barElement.style.left);
	//Set scrollScope
	switch(scrollDirection){
		case 'yScroll':
			// Vertical Scrolling
			scrollScope = 'yScroll';			
			break;
		case 'xScroll':
			// Horizontal Scrolling
			scrollScope = 'xScroll';
			break;
		default:
			//Default is Vertical
			scrollScope = 'yScroll';
	}
	
	/* 	DEBUG
		alert the start positions of the mouse and the scrollbar and the IDs 
		---------- 
		alert("MOUSE X: "+startMouseX + "\nMOUSE Y: " + startMouseY + "\nSCROLLBAR X: " + startScrollBarX + "\nSCROLLBAR Y:" + startScrollBarY);
		alert("SCROLLBAR: " + gblScrollBar.id + "\nMASK AREA: " + gblMask.id);
	*/
	 
}

function stopDrag(){
	//set dragging boolean to false
	dragging = false;
}

function updatePosition(styleTag){
	// Define the element to move. This will be the first <div> inside the mask. We cannot use child nodes[x] because IE anf firefox read the DOM differently, so childNodes[1] is not the same thing! 
	var childEl = getFirstChildDiv(gblMask);
	var distance = (mousePos.y - startMouseY);
	var newPos = (startScrollBarY + distance);
	var parentHeight = parseInt(gblScrollBar.parentNode.offsetHeight);
	var scrollBarHeight = parseInt(gblScrollBar.offsetHeight);
	var limit = parentHeight - scrollBarHeight;
	var percentMoved = Math.round((distance/limit) * 100);
	var scrollPos = parseInt(gblScrollBar.style[styleTag]);
	var totDistance = Math.round(parseInt(gblScrollBar.style[styleTag])/limit) * 100;	
	var scrollPercent = ((scrollPos/limit) *100);
	if(scrollPercent < 1){
		scrollPercent = 0;
		//debug('ZERO', scrollPercent);
	}else if(scrollPercent > 99){
		scrollPercent = 100;
		//debug('100', scrollPercent);
	}
	scrollPercent = Math.round(scrollPercent);
	var maskHeight = gblMask.offsetHeight;
	var maskContentHeight = (childEl.offsetHeight);
	var maskLimit = maskContentHeight - maskHeight;
	var maskPercent = Math.round((scrollPercent/100) * maskLimit);
	//var moveMask = ((percentMoved/100) * (childEl.offsetHeight));
	var currentPos = parseInt(childEl.style.top);
	if(newPos > 0){
		if(newPos < limit){
			gblScrollBar.style[styleTag] = newPos + ('px');			
			if(scrollPercent == 0){
				childEl.style.top = 0 + ('px');
				//debug('TOP', childEl.style.top);
			}else if(scrollPercent == 100){
				childEl.style.top = (maskHeight + (-maskContentHeight)) + ('px');
				//debug('BOTTOM', childEl.style.top);
			}else{			
				childEl.style.top = (-maskPercent) + ('px');
				//debug('content position', childEl.style.top);
				//childEl.style.top = ((-moveMask)) + ('px');
			}
		}
	}
}

function getFirstChildDiv(target){
	var nodeCount = target.childNodes.length; 
	for(i=0;i<nodeCount;i++){
		//alert(target.childNodes[i].tagName);
		if(found != true){
			if(target.childNodes[i].tagName == 'DIV'){
				//alert("node "+i);
				var child = target.childNodes[i];
				var found = true;
			}
		}
	}
	return(child);
}

function debug(varTag, varVal){
	//DEBUG VARIABLE

	//var debugEl = document.getElementById('debugDiv');
	//debugEl.innerHTML = varTag + ": " + varVal;
}