// Scroll Bar Object
//
// Usage:
// - var scrollbar = new ScrollBarObj(visivleArea, contentArea);
// - where visibleArea is a div that contains a div with the contentArea (actual content)
//

//*****************************************************************************************
// CONSTRUCTOR
//*****************************************************************************************
ScrollBarObj = function(visibleArea, contentArea)
{	
	// Object constants
	//     this should be the same as all images width
	this.SCROLLBAR_WIDTH = 15;
	this.SINGLE_SCROLL_DELTA = 18;
	
	// Current mouse state
	this.mouseButtonIsDown = false;
	this.mouseIsOverArrowUp = false;
	this.mouseIsOverArrowDown = false;
	this.mouseIsOverScrollArea = false;
	this.mouseIsOverScrollPiece = false;
	this.mouseIsOverScrollPieceArea = false;
	
	// reference to this used to set events
	var self = this;
	
	// Scrollbar variables
	this.currentScrollPieceTop = 0;
	this.currentContentAreaTop = 0;
	this.contentDisplacementPerPx = 0;
	//this.moveYOffset = 0;
	this.firstScroll = true;
	this.currentTimer = null;
	this.captureIsSet = false;
	this.scrollTimeOut = 0;
	this.currentOffsetY = 0;

	// Reference to scroll bar's parent node
	this.visibleArea = visibleArea;
	this.visibleArea.attachEvent("onmousewheel", function() {self.visibleAreaOnMouseWheel()});
	this.visibleArea.attachEvent("onresize", function() {self.refresh()});
	
	// Reference to content area
	this.contentArea = contentArea;
	this.contentArea.attachEvent("onresize", function() {self.refresh()});
	
	// Add scrollArea <div>
	this.scrollArea = document.createElement("div");
	this.scrollArea.className = "scrollArea";
	this.scrollArea.onmouseenter = function() {self.scrollAreaOnMouseEnter()};
	this.scrollArea.onmouseleave = function() {self.scrollAreaOnMouseLeave()};
	this.visibleArea.appendChild(this.scrollArea);
	
	//     1. Add scrollArrowUp <img>
	this.scrollArrowUp = document.createElement("img");
	this.scrollArrowUp.className = "scrollArrowUp";
	this.scrollArrowUp.src = "icons//scrollArrowUp-MouseLeave.png";
	this.scrollArrowUp.onmousedown = function() {self.scrollArrowUpOnMouseDown()};
	this.scrollArrowUp.ondblclick = function() {self.scrollUp()};
	this.scrollArrowUp.onmouseup = function() {self.scrollArrowUpOnMouseUp()};
	this.scrollArrowUp.onmouseenter = function() {self.scrollArrowUpOnMouseEnter()};
	this.scrollArrowUp.onmouseleave = function() {self.scrollArrowUpOnMouseLeave()};
	this.scrollArea.appendChild(this.scrollArrowUp);
	
	//     2. Add scrollPieceArea <div>
	this.scrollPieceArea = document.createElement("div");
	this.scrollPieceArea.className = "scrollPieceArea";
	this.scrollPieceArea.onmousedown = function() {self.scrollPieceAreaOnMouseDown()};
	this.scrollPieceArea.onmouseup = function() {self.scrollPieceAreaOnMouseUp()};
	this.scrollPieceArea.onmouseenter = function() {self.scrollPieceAreaOnMouseEnter()};
	this.scrollPieceArea.onmouseleave = function() {self.scrollPieceAreaOnMouseLeave()};
	this.scrollArea.appendChild(this.scrollPieceArea);
	
	//         2.1 Add scrollPiece <div>
	this.scrollPiece = document.createElement("div");
	this.scrollPiece.className = "scrollPiece";
	this.scrollPiece.onmousedown = function() {self.scrollPieceOnMouseDown()};
	this.scrollPiece.onmouseup = function() {self.scrollPieceOnMouseUp()};
	this.scrollPiece.onmouseenter = function() {self.scrollPieceOnMouseEnter()};
	this.scrollPiece.onmouseleave = function() {self.scrollPieceOnMouseLeave()};
	this.scrollPieceArea.appendChild(this.scrollPiece);
	
	//             2.1.1 Add scrollPieceTop <div>
	this.scrollPieceTop = document.createElement("div");
	this.scrollPieceTop.className = "scrollPieceTop";
	this.scrollPiece.appendChild(this.scrollPieceTop);
	
	//             2.1.2 Add scrollPieceMiddle <div>
	this.scrollPieceMiddle = document.createElement("div");
	this.scrollPieceMiddle.className = "scrollPieceMiddle";
	this.scrollPiece.appendChild(this.scrollPieceMiddle);
	
	//             2.1.3 Add scrollPieceBottom <div>
	this.scrollPieceBottom = document.createElement("div");
	this.scrollPieceBottom.className = "scrollPieceBottom";
	this.scrollPiece.appendChild(this.scrollPieceBottom);
	
	//     3. Add scrollArrowDown <img>
	this.scrollArrowDown = document.createElement("img");
	this.scrollArrowDown.className = "scrollArrowDown";
	this.scrollArrowDown.src = "icons//scrollArrowDown-MouseLeave.png";	
	this.scrollArrowDown.onmousedown = function() {self.scrollArrowDownOnMouseDown()};
	this.scrollArrowDown.ondblclick = function() {self.scrollDown()};
	this.scrollArrowDown.onmouseup = function() {self.scrollArrowDownOnMouseUp()};
	this.scrollArrowDown.onmouseenter = function() {self.scrollArrowDownOnMouseEnter()};
	this.scrollArrowDown.onmouseleave = function() {self.scrollArrowDownOnMouseLeave()};
	this.scrollArea.appendChild(this.scrollArrowDown);
}


ScrollBarObj.prototype = 
{
	//*****************************************************************************************
	// EVENTS
	//*****************************************************************************************
	updateMouseEnteredState:function(event, entered)
	{
		switch (event.srcElement.className)
		{
			case "scrollArea":
				this.mouseIsOverScrollArea = entered;
				break;
			case "scrollArrowUp":
				this.mouseIsOverArrowUp = entered;
				break;
			case "scrollPiece":
				this.mouseIsOverScrollPiece = entered;
				break;
			case "scrollArrowDown":
				this.mouseIsOverArrowDown = entered;
				break;
		}
	},
	
	updateScrollLook:function()
	{
		if (this.mouseIsOverScrollArea)
		{
			if (this.mouseIsOverArrowUp)
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnter.png";
			}
			else
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnterScrollArea.png";
			}
			
			if (this.mouseIsOverScrollPiece)
			{
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnter.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnter.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnter.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnter.png')";
			}
			else
			{
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnterScrollArea.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnterScrollArea.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnterScrollArea.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnterScrollArea.png')";
			}
			
			if (this.mouseIsOverArrowDown)
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnter.png";
			}
			else
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnterScrollArea.png";
			}
			
		}
		else
		{
			this.scrollArrowUp.src = "icons//scrollArrowUp-MouseLeave.png";
			this.scrollArrowDown.src = "icons//scrollArrowDown-MouseLeave.png";
			this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseLeave.png')";
			this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseLeave.png')";
			this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseLeave.png')";
			this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseLeave.png')";
		}
	},
	
	loseCapture:function()
	{
		clearTimeout(this.currentTimer);
		this.captureIsSet = false;
		
		sElem = document.elementFromPoint(event.clientX, event.clientY);

		if (sElem.className == "scrollArrowUp")
		{			
			this.mouseIsOverArrowUp = true;
			this.mouseIsOverArrowDown = false;
			this.mouseIsOverScrollArea = true;
			this.mouseIsOverScrollPiece = false;
			this.mouseIsOverScrollPieceArea = false;
		}
		else if (sElem.className == "scrollPiece" || sElem.className == "scrollPieceMiddle" || sElem.className == "scrollPieceTop" || sElem.className == "scrollPieceBottom")
		{
			this.mouseIsOverArrowUp = false;
			this.mouseIsOverArrowDown = false;
			this.mouseIsOverScrollArea = true;
			this.mouseIsOverScrollPiece = true;
			this.mouseIsOverScrollPieceArea = true;
		}
		else if (sElem.className == "scrollArrowDown")
		{
			this.mouseIsOverArrowUp = false;
			this.mouseIsOverArrowDown = true;
			this.mouseIsOverScrollArea = true;
			this.mouseIsOverScrollPiece = false;
			this.mouseIsOverScrollPieceArea = false;
		}
		else if (sElem.className == "scrollPieceArea")
		{
			this.mouseIsOverArrowUp = false;
			this.mouseIsOverArrowDown = false;
			this.mouseIsOverScrollArea = true;
			this.mouseIsOverScrollPiece = false;
			this.mouseIsOverScrollPieceArea = true;
		}
		else
		{
			this.mouseIsOverArrowUp = false;
			this.mouseIsOverArrowDown = false;
			this.mouseIsOverScrollArea = false;
			this.mouseIsOverScrollPiece = false;
			this.mouseIsOverScrollPieceArea = false;
		}
		
		this.updateScrollLook();
	},
	
	
	
	//*****************************************************************************************
	// EVENTS
	//*****************************************************************************************
	
	// <VISIBLEAREA> Events
	visibleAreaOnMouseWheel:function()
	{
		//
		if (event.wheelDelta > 0)
		{
			this.scrollUp();
		}
		else
		{
			this.scrollDown();
		}
	},
	
	// <SCROLLAREA> Events
	scrollAreaOnMouseEnter:function()
	{
		//
		if (!this.captureIsSet)
		{
			this.mouseIsOverScrollArea = true;
			if (!this.mouseIsOverArrowUp)
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnterScrollArea.png";
			}
			if (!this.mouseIsOverArrowDown)
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnterScrollArea.png";
			}
			if (!this.mouseIsOverScrollPiece)
			{
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnterScrollArea.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnterScrollArea.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnterScrollArea.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnterScrollArea.png')";
			}
		}
	},
	
	scrollAreaOnMouseLeave:function()
	{
		if (!this.captureIsSet)
		{
			this.mouseIsOverScrollArea = false;
			this.scrollArrowUp.src = "icons//scrollArrowUp-MouseLeave.png";
			this.scrollArrowDown.src = "icons//scrollArrowDown-MouseLeave.png";
			this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseLeave.png')";
			this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseLeave.png')";
			this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseLeave.png')";
			this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseLeave.png')";
		}
	},
	
	
	// <SCROLLPIECEAREA> Events
	scrollPieceAreaOnMouseEnter:function()
	{
		if (event.srcElement.className == "scrollPieceArea")
		{
			this.mouseIsOverScrollPieceArea = true;
		}
		else
		{
			this.updateMouseEnteredState(event, true);
		}
	},
	
	scrollPieceAreaOnMouseLeave:function()
	{
		if (event.srcElement.className == "scrollPieceArea")
		{
			this.mouseIsOverScrollPieceArea = false;
		}
		else
		{
			this.updateMouseEnteredState(event, false);
		}
	},

	scrollPieceAreaOnMouseDown:function()
	{
		if (event.srcElement.className == "scrollPieceArea")
		{
			this.mouseButtonIsDown = true;
			this.firstScroll = true;
			this.currentOffsetY = event.offsetY;
			this.scrollPieceArea.setCapture(false);
			this.captureIsSet = true;

			// Add onmousemove event
			var self = this;
			this.scrollPieceArea.onmousemove = function() {self.scrollPieceAreaOnMouseMove()};
			this.scrollPieceArea.onlosecapture = function() {self.loseCapture()};
			
			this.firstScroll = true;
		
			if ((event.offsetY + this.scrollPieceArea.offsetTop) < this.scrollPiece.offsetTop)//mouse is above the scrollpiece
			{
				this.movePageUp();
			}
			else
			{
				this.movePageDown();
			}
		}
	},
	
	scrollPieceAreaOnMouseUp:function()
	{
		this.scrollPieceArea.releaseCapture();
		this.mouseButtonIsDown = false;
		
		// Remove onmousemove event
		this.scrollPieceArea.onmousemove = null;
		
	},
	
	scrollPieceAreaOnMouseMove:function()
	{
		if (event.srcElement.className == "scrollPieceArea")
		{
			this.currentOffsetY = event.offsetY;
		}
	},

	// <SCROLLPIECE> Events
	scrollPieceOnMouseEnter:function()
	{
		if (event.srcElement.className == "scrollPiece")
		{
			this.mouseIsOverScrollPiece = true;
			
			if (this.captureIsSet)
			{
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseDown.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseDown.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseDown.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseDown.png')";
			}
			else
			{
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnter.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnter.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnter.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnter.png')";
			}
		}
		else
		{
			this.updateMouseEnteredState(event, true);
		}
	},
	
	scrollPieceOnMouseLeave:function()
	{
		//
		if (event.srcElement.className == "scrollPiece")
		{
			this.mouseIsOverScrollPiece = false;
			
			if (this.captureIsSet)
			{
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnter.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnter.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnter.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnter.png')";
			}
			else
			{
				this.mouseIsOverScrollPiece = false;
				this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnterScrollArea.png')";
				this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnterScrollArea.png')";
				this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnterScrollArea.png')";
				this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnterScrollArea.png')";
			}
		}
		else
		{
			this.updateMouseEnteredState(event, false);
		}
	},
	
	scrollPieceOnMouseDown:function()
	{
		this.scrollPiece.setCapture(false);
		this.captureIsSet = true;
		this.currentOffsetY = event.clientY - this.scrollPiece.style.pixelTop;
		
		// Add onmousemove event
		var self = this;
		this.scrollPiece.onmousemove = function() {self.scrollPieceOnMouseMove()};
		this.scrollPiece.onlosecapture = function() {self.loseCapture()};
		
		this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseDown.png')";
		this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseDown.png')";
		this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseDown.png')";
		this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseDown.png')";
	},
	
	scrollPieceOnMouseUp:function()
	{
		this.scrollPiece.style.backgroundImage = "url('icons//scrollPieceSpacer-MouseEnter.png')";
		this.scrollPieceTop.style.backgroundImage = "url('icons//scrollPieceTop-MouseEnter.png')";
		this.scrollPieceMiddle.style.backgroundImage = "url('icons//scrollPieceMiddle-MouseEnter.png')";
		this.scrollPieceBottom.style.backgroundImage = "url('icons//scrollPieceBottom-MouseEnter.png')";

		this.scrollPiece.releaseCapture();
		
		// Remove onmousemove event
		this.scrollPiece.onmousemove = null;
	},
	
	scrollPieceOnMouseMove:function()
	{
		if (event.clientY - this.currentOffsetY >= this.scrollPieceArea.offsetTop && event.clientY - this.currentOffsetY < (this.scrollPieceArea.offsetTop + this.scrollPieceArea.offsetHeight - this.scrollPiece.offsetHeight - 1))
		{
			// Y coordinate of the mouse is inside the range of the scroll piece
			this.currentScrollPieceTop = event.clientY - this.currentOffsetY;
			this.currentContentAreaTop = this.contentDisplacementPerPx * (this.currentScrollPieceTop - this.scrollArrowUp.offsetHeight) * -1;
		}
		else if (event.clientY - this.currentOffsetY < this.scrollPieceArea.offsetTop)
		{
			// Y coordinate of the mouse is above the scroll piece area
			this.currentScrollPieceTop = this.scrollArrowUp.offsetHeight;
			this.currentContentAreaTop = 0;
		}
		else if (event.clientY - this.currentOffsetY >= (this.scrollPieceArea.offsetTop + this.scrollPieceArea.offsetHeight - this.scrollPiece.offsetHeight))
		{
			// Y coordinate of the mouse is below the scroll piece area
			this.currentScrollPieceTop = this.scrollPieceArea.offsetTop + this.scrollPieceArea.offsetHeight - this.scrollPiece.offsetHeight;
			this.currentContentAreaTop = this.currentContentAreaTop = this.visibleArea.offsetHeight - this.contentArea.offsetHeight;
		}
		
		this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
		this.contentArea.style.pixelTop = this.currentContentAreaTop;
		
        return false;
	},
	
	// <SCROLLARROWUP> Events
	scrollArrowUpOnMouseEnter:function()
	{
		if (event.srcElement.className == "scrollArrowUp")
		{
			this.mouseIsOverArrowUp = true;

			if (this.captureIsSet)
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseDown.png";
				this.scrollUp();
			}
			else
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnter.png";
			}
		}
		else
		{
			this.updateMouseEnteredState(event, true);
		}
	},
	
	scrollArrowUpOnMouseLeave:function()
	{
		if (event.srcElement.className == "scrollArrowUp")
		{
			// stop scheduled scrolls
			clearTimeout(this.currentTimer);
			this.mouseIsOverArrowUp = false;
			
			if (this.captureIsSet)
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnter.png";
			}
			else
			{
				this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnterScrollArea.png";
			}
		}
		else
		{
			this.updateMouseEnteredState(event, false);
		}
	},
	
	scrollArrowUpOnMouseDown:function()
	{
		this.mouseButtonIsDown = true;
		// Add onmousemove event
		var self = this;
		this.scrollArrowUp.src = "icons//scrollArrowUp-MouseDown.png";
		this.scrollArrowUp.onlosecapture = function() {self.loseCapture()};
		this.scrollArrowUp.setCapture(false);
		this.captureIsSet = true;
		this.firstScroll = true;
		this.scrollUp();
	},
	
	scrollArrowUpOnMouseUp:function()
	{
		//
		clearTimeout(this.currentTimer);
		
		this.mouseButtonIsDown = false;
		this.scrollArrowUp.src = "icons//scrollArrowUp-MouseEnter.png";
		this.scrollArrowUp.releaseCapture();
	},
	

	// <SCROLLARROWDOWN> Events
	scrollArrowDownOnMouseEnter:function()
	{
		if (event.srcElement.className == "scrollArrowDown")
		{
			this.mouseIsOverArrowDown = true;

			if (this.captureIsSet)
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseDown.png";
				this.scrollDown();
			}
			else
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnter.png";
			}
		}
		else
		{
			this.updateMouseEnteredState(event, true);
		}
	},
	
	scrollArrowDownOnMouseLeave:function()
	{
		if (event.srcElement.className == "scrollArrowDown")
		{
			// stop scheduled scrolls
			clearTimeout(this.currentTimer);
			this.mouseIsOverArrowDown = false;
			
			if (this.captureIsSet)
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnter.png";
			}
			else
			{
				this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnterScrollArea.png";
			}
		}
		else
		{
			this.updateMouseEnteredState(event, false);
		}
	},
	
	scrollArrowDownOnMouseDown:function()
	{
		this.mouseButtonIsDown = true;
		// Add onmousemove event
		var self = this;
		this.scrollArrowDown.src = "icons//scrollArrowDown-MouseDown.png";
		this.scrollArrowDown.onlosecapture = function() {self.loseCapture()};
		this.scrollArrowDown.setCapture(false);
		this.captureIsSet = true;
		this.firstScroll = true;
		this.scrollDown();
	},
	
	scrollArrowDownOnMouseUp:function()
	{
		//
		clearTimeout(this.currentTimer);
		
		this.mouseButtonIsDown = false;
		this.scrollArrowDown.src = "icons//scrollArrowDown-MouseEnter.png";
		
		this.scrollArrowDown.releaseCapture();
	},
	
	isScrollAtTheBottomEnd:function()
	{
		return (this.visibleArea.offsetHeight - this.contentArea.offsetTop > this.contentArea.offsetHeight);
	},

	isScrollAtTheTopEnd:function()
	{
		return (this.contentArea.offsetTop >= 0);
	},
	
	isLastScrollDown:function()
	{
		return (this.contentArea.offsetHeight - this.visibleArea.offsetHeight + this.contentArea.offsetTop < this.SINGLE_SCROLL_DELTA);
	},
	
	isLastScrollUp:function()
	{
		return ((Math.abs(this.contentArea.offsetTop) - this.SINGLE_SCROLL_DELTA) < this.SINGLE_SCROLL_DELTA);
	},
	
	isLastMovePageDown:function()
	{
		return (this.contentArea.offsetHeight - this.visibleArea.offsetHeight + this.contentArea.offsetTop < (this.contentDisplacementPerPx * this.scrollPiece.offsetHeight));
	},
	
	isLastMovePageUp:function()
	{
		return ((Math.abs(this.contentArea.offsetTop)) < (this.contentDisplacementPerPx * this.scrollPiece.offsetHeight));
	},
	
	
	scrollDown:function()
	{
		// scroll only if not at the end
		if (!this.isScrollAtTheBottomEnd())
		{
			if (this.isLastScrollDown()) // do this if it is the last scroll
			{
				this.currentScrollPieceTop = this.scrollArea.offsetHeight - this.scrollPiece.offsetHeight - this.scrollArrowDown.offsetHeight;
				this.currentContentAreaTop = this.visibleArea.offsetHeight - this.contentArea.offsetHeight;
				this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
				this.contentArea.style.pixelTop = this.currentContentAreaTop;
			}
			else // do this if not last scroll
			{
				this.currentScrollPieceTop += this.scrollPieceDisplacement;
				this.currentContentAreaTop -= this.SINGLE_SCROLL_DELTA; 
				this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
				this.contentArea.style.pixelTop = this.currentContentAreaTop;
			
				if (this.mouseButtonIsDown)
				{
					if (this.firstScroll)
					{
						this.scrollTimeOut = 500;
						this.firstScroll = false;
					}
					else
					{
						this.scrollTimeOut = 50;
					}
					var self = this;
					this.currentTimer = setTimeout(function() {self.scrollDown()}, this.scrollTimeOut);
				}
			}
		}
	},
	
	scrollUp:function()
	{
		if (!this.isScrollAtTheTopEnd())
		{
			if (this.isLastScrollUp()) // do this if it is the last scroll
			{
				this.currentScrollPieceTop = this.scrollArrowUp.offsetHeight;
				this.currentContentAreaTop = 0;
				this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
				this.contentArea.style.pixelTop = this.currentContentAreaTop;
			}
			else // do this if not last scroll
			{
				this.currentScrollPieceTop -= this.scrollPieceDisplacement;
				this.currentContentAreaTop += this.SINGLE_SCROLL_DELTA;
				this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
				this.contentArea.style.pixelTop = this.currentContentAreaTop;
			
				if (this.mouseButtonIsDown && this.mouseIsOverArrowUp)
				{
					if (this.firstScroll)
					{
						this.scrollTimeOut = 500;
						this.firstScroll = false;
					}
					else
					{
						this.scrollTimeOut = 100;
					}
					
					var self = this;
					this.currentTimer = setTimeout(function() {self.scrollUp()}, this.scrollTimeOut);
				}
			}
		}
	},
	
	// return true if moved or false if already at the end
	movePageDown:function()
	{			
		if (!this.isScrollAtTheBottomEnd())
		{
			// move if the mouse is below the scroll piece
			if ((this.currentOffsetY + this.scrollPieceArea.offsetTop - this.scrollPiece.offsetHeight) > (this.scrollPiece.offsetTop) && this.mouseButtonIsDown && this.mouseIsOverScrollPieceArea)
			{
				// check if this is the last move to align to end
				if (this.isLastMovePageDown())
				{
					this.currentScrollPieceTop = this.scrollArea.offsetHeight - this.scrollPiece.offsetHeight - this.scrollArrowDown.offsetHeight;
					this.currentContentAreaTop = this.visibleArea.offsetHeight - this.contentArea.offsetHeight;
					this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
					this.contentArea.style.pixelTop = this.currentContentAreaTop;
				}
				else // move content one page down
				{
					this.currentScrollPieceTop += this.scrollPiece.offsetHeight;
					this.currentContentAreaTop -= (this.contentDisplacementPerPx * this.scrollPiece.offsetHeight);
					this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
					this.contentArea.style.pixelTop = this.currentContentAreaTop;
				}
			}
			
			// set timer to keep moving in case the mouse button remains pressed
			if (this.firstScroll)
			{
				this.scrollTimeOut = 500;
				this.firstScroll = false;
			}
			else
			{
				this.scrollTimeOut = 50;
			}
			
			var self = this;
			this.currentTimer = setTimeout(function() {self.movePageDown()}, this.scrollTimeOut);
		}
	},
	
	movePageUp:function()
	{
		if (!this.isScrollAtTheTopEnd())
		{
			// move if the mouse is below the scroll piece
			if ((this.currentOffsetY + this.scrollPieceArea.offsetTop) < this.scrollPiece.offsetTop && this.mouseButtonIsDown && this.mouseIsOverScrollPieceArea)
			{
				if (this.isLastMovePageUp()) // do this if it is the last scroll
				{
					this.currentScrollPieceTop = this.scrollArrowUp.offsetHeight;
					this.currentContentAreaTop = 0;
					this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
					this.contentArea.style.pixelTop = this.currentContentAreaTop;
				}
				else // do this if not last scroll
				{
					this.currentScrollPieceTop -= this.scrollPiece.offsetHeight;
					this.currentContentAreaTop += (this.contentDisplacementPerPx * this.scrollPiece.offsetHeight);
					this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
					this.contentArea.style.pixelTop = this.currentContentAreaTop;
				}
			}
			
			// set timer to keep moving in case the mouse button remains pressed
			if (this.firstScroll)
			{
				this.scrollTimeOut = 500;
				this.firstScroll = false;
			}
			else
			{
				this.scrollTimeOut = 50;
			}
			
			var self = this;
			this.currentTimer = setTimeout(function() {self.movePageUp()}, this.scrollTimeOut);
		}
	},

	refresh:function()
	{
		if (this.visibleArea.offsetHeight >= this.contentArea.offsetHeight)
		{
			// hide scrollbar
			this.scrollArea.style.display = "none";
			this.scrollPiece.style.display = "none";
			this.scrollArrowDown.style.display = "none";
			this.currentContentAreaTop = 0;
			this.contentArea.style.pixelTop = this.currentContentAreaTop;
		}
		else
		{
			// get the current position of the content
			this.currentContentAreaTop = this.contentArea.offsetTop;
			
			// show scrollbar
			this.scrollArea.style.display = "block";
			this.scrollPiece.style.display = "block";
			this.scrollArrowDown.style.display = "block";
			
			// determine the size of the scrollArea
			this.scrollArea.style.pixelWidth = this.SCROLLBAR_WIDTH;
			this.scrollArea.style.pixelHeight = this.visibleArea.offsetHeight;
			//this.scrollArea.style.pixelTop = this.visibleArea.offsetTop;
			this.scrollArea.style.pixelLeft = this.visibleArea.offsetWidth - this.SCROLLBAR_WIDTH - 1;
			
			// determine the size of scrollPieceArea
			this.scrollPieceArea.style.pixelHeight = this.scrollArea.style.pixelHeight - this.scrollArrowUp.offsetHeight - this.scrollArrowDown.offsetHeight;
			
			// determine the position of scrollArrowDowns
			this.scrollArrowDown.style.pixelTop = this.visibleArea.offsetHeight - this.scrollArrowDown.offsetHeight;
			
			// determine the size of the scrollPiece
			this.scrollPiece.style.pixelHeight = (this.visibleArea.offsetHeight / this.contentArea.offsetHeight) * this.scrollPieceArea.offsetHeight;
			
			// determine the scrollPiece displacement due to a single scroll
			this.scrollPieceDisplacement = (this.scrollPieceArea.offsetHeight - this.scrollPiece.offsetHeight) * (this.SINGLE_SCROLL_DELTA /(this.contentArea.offsetHeight - this.visibleArea.offsetHeight));
			
			// calculate displacement of content for each 1px scroll piece move
			this.contentDisplacementPerPx = (this.contentArea.offsetHeight - this.visibleArea.offsetHeight) / (this.scrollPieceArea.offsetHeight - this.scrollPiece.offsetHeight);
			
			// reposition if empty space is showing at the end
			if (this.contentArea.offsetHeight <  this.visibleArea.offsetHeight - this.currentContentAreaTop)
			{
				this.currentContentAreaTop = this.visibleArea.offsetHeight - this.contentArea.offsetHeight;
				this.contentArea.style.pixelTop = this.currentContentAreaTop;
			}
			//this.currentScrollPieceTop = this.scrollArrowUp.offsetHeight;
			this.currentScrollPieceTop = this.scrollArrowUp.offsetHeight - (this.currentContentAreaTop / this.contentDisplacementPerPx);
			
			this.scrollPiece.style.pixelTop = this.currentScrollPieceTop;
			
			// determine the position of scrollPieceMiddle
			this.scrollPieceMiddle.style.pixelTop = (this.scrollPiece.offsetHeight - this.scrollPieceMiddle.offsetHeight) / 2;
			
			// determine the position of scrollPieceBottom
			this.scrollPieceBottom.style.pixelTop = this.scrollPiece.offsetHeight - this.scrollPieceTop.offsetHeight - this.scrollPieceMiddle.offsetHeight - this.scrollPieceBottom.offsetHeight;
		}	
	}
}