File: scrollbar2.js

// ------------------------------------------------
//      Custom DHTML scrollbar
// ------------------------------------------------
//      (c) 2000 Peter Nederlof
//      http://www.xs4all.nl/~peterned/
//      Last updated: January 26, 2001
// ------------------------------------------------

// Values below are defaults. overwrite in HTML

var barWidth  = 23;
var barHeight = 230;
var barXstart = 170;
var barXfromRight = false;
var barYstart = 0;
var scrollerHeight = 15;
var layerToScroll = "divContent";
var arrowSpeed = 3;
var clickStepSize = 40;
var extraSpace = 5;

var scrollerBG = "images/scroll_balk2.gif";
var upSRC      = "images/up2.gif";
var downSRC    = "images/down2.gif";
var scrollSRC  = "images/scroller2.gif";


var autoDisable = true;
var onDisable = "hide";

var arrowGrouping = false;


// ------------------------------------------------
//		I suggest you don't alter anything below

var ie4 = (document.all)? true:false;
var ns6 = (!ie4 && document.getElementById)? true:false;
var ns4 = (!ie4 && !ns6)? true:false;

var loaded = false;
var arrowSize;
var x, y, pageFromTop;
var upIMG, downIMG, scrollIMG;
var pageWidth, pageHeight;

if(!ie4 && navigator.appName != "Netscape")
{	alert('It seems you are using an unsupported browser');
}


// ------------------------------------------------
//		Initializes the scrollbar
//		- called by body onload()

function initScroller()
{	arrowSize  = barWidth;
	pageWidth  = (ie4)? document.body.clientWidth:window.innerWidth;
	pageHeight = (ie4)? document.body.clientHeight:window.innerHeight;
	var tempLyr = getLayer(layerToScroll);

	if(ie4)	pageFromTop = tempLyr.style.pixelTop;
	if(ns4)	pageFromTop = tempLyr.top;
	if(ns6) pageFromTop = 0; //parseInt(tempLyr.style.top);

	upIMG    = '<IMG SRC="'+upSRC     +'" WIDTH="'+barWidth+'" HEIGHT="'+barWidth+'" BORDER="0">';
	downIMG  = '<IMG SRC="'+downSRC   +'" WIDTH="'+barWidth+'" HEIGHT="'+barWidth+'" BORDER="0">';
	scrollIMG = '<IMG name="theScroller" SRC="'+scrollSRC+'" WIDTH="'+barWidth+'" HEIGHT="'+scrollerHeight+'" BORDER="0">';
	
	scrollbar = new Scrollbar(barWidth, barHeight, barXstart, barYstart);
	scrollbar.build();	
	scrollbar.setMaxScroll();
	loaded = true;
	scrollbar.monitor();
	
	scrollbar.setPage(layerToScroll);
}


// ------------------------------------------------
//		Scrollbar Object.
//		- defines values and functions

function Scrollbar(width, height, xPos, yPos)
{	
	// ------------------------------------------------
	//		Values:

	this.width  = width;
	this.height = height;
	this.xPos = xPos;
	this.yPos = yPos;
	this.enabled = true;
	
	this.barString = "";
	this.arrowSize = arrowSize;
	this.arrowUpYstart   = 0;
	this.pageToScroll = layerToScroll;
	this.toScrollHeight = 0;
	this.activePage = layerToScroll;
	this.maxScroll = this.height - this.arrowSize;
	this.scrollerHeight = scrollerHeight;
	
	// ------------------------------------------------
	//		Functions:

	this.build   = build;
	this.monitor = monitor;
	this.setPage = setPage;
	this.toTop   = toTop;	
	this.setMaxScroll = setMaxScroll;
}


// ------------------------------------------------
//		Scrollbar Build function
//		- builds Scrollbar and writes it to page

function build()
{	
	upApos = (arrowGrouping)? (this.height - (2*this.arrowSize)):0;
	scrpos = (arrowGrouping)? 0:this.arrowSize;
		
	// ------------------------------------------------
	//		Internet Explorer 4+

	if(ie4)
	{	this.barString = '<DIV ID="scrollyr" STYLE="position:absolute; left:'+this.xPos+'; top:'+this.yPos+'; '
		+ 'z-index:20; width:'+this.width+'; height:'+this.height+';">'
		
		+ '<DIV ID="arrowUp" STYLE="position:absolute; left:0; top:'+upApos+'; width:'+this.arrowSize+'; height:'
		+ this.arrowSize+'; z-index:30; Clip:rect(0,'+this.arrowSize+','+this.arrowSize
		+ ',0); cursor:hand;">'+upIMG+'</DIV>'
			
		+ '<DIV ID="scroller" STYLE="position:absolute; left:0; top:'+scrpos+'; width:'+this.arrowSize
		+ '; height:'+scrollerHeight+';' // clip:rect(0,'+this.width+','+scrollerHeight+',0);'
		+ ' z-index:25; cursor:hand;">'+scrollIMG+'</DIV>'
		
		+ '<DIV ID="arrowDown" STYLE="position:absolute; left:0; top:'+(this.height-this.arrowSize)+'; width:'
		+ arrowSize+'; height:'+arrowSize+'; z-index:30; Clip:rect(0,'+this.arrowSize+','+this.arrowSize
		+ ',0); cursor:hand;">'+downIMG+'</DIV>'

		+ '</DIV>';
		
		document.body.insertAdjacentHTML("BeforeEnd", this.barString);			
		
		scrollyr.onmousedown = goThere;		
		if(scrollerBG != "none") 
		{	if(scrollerBG.indexOf('.') != -1) scrollyr.style.backgroundImage = "url("+scrollerBG+")";
			else scrollyr.style.backgroundColor = scrollerBG;

			scrollyr.style.height = this.height
		}
	}	
	

	// ------------------------------------------------
	//		Netscape Navigator 4.x

	if(ns4)
	{	this.barString = '<Layer name="arrowUpF" left="0" top="'+upApos+'" width="'+this.arrowSize+'" height="'
		+ this.arrowSize+'" z-index="30">'+upIMG+'</Layer>'
		+ '<Layer name="arrowUp" left="0" top="'+upApos+'" width="'+this.arrowSize+'" height="'
		+ this.arrowSize+'" z-index="31"></Layer>'
			
		+ '<Layer name="scrollerF" left="0" top="'+scrpos+'" width="'+this.arrowSize
		+ '" height="'+scrollerHeight+'" z-index="25">'+scrollIMG+'</Layer>'
		+ '<Layer name="scroller" left="0" top="'+scrpos+'" width="'+this.arrowSize
		+ '" height="'+scrollerHeight+'" z-index="26"></Layer>'
		
		+ '<Layer name="arrowDownF" left="0" top="'+(this.height-this.arrowSize)+'" width="'
		+ arrowSize+'" height="'+arrowSize+'" z-index="30">'+downIMG+'</Layer>'
		+ '<Layer name="arrowDown" left="0" top="'+(this.height-this.arrowSize)+'" width="'
		+ arrowSize+'" height="'+arrowSize+'" z-index="31"></Layer>';

		scrollyr = new Layer(this.width);
		scrollyr.document.write(this.barString);
		scrollyr.document.close();
		scrollyr.visibility = "show";
		scrollyr.moveTo(barXstart, barYstart);
		
		if(scrollerBG!="none") 
		{	if(scrollerBG.indexOf('.') != -1) scrollyr.background.src = scrollerBG;
			else scrollyr.bgColor = scrollerBG
		}

		scrollyr.document.onmousedown = goThere;
		
		this.pageToScroll = getLayer(layerToScroll);
		scroller  = getLayer('scroller');
		scrollerF = getLayer('scrollerF');
		arrowUp   = getLayer('arrowUp');
		arrowDown = getLayer('arrowDown');
		
		scroller.style = scroller;
		scrollyr.style = scrollyr;
	}


	// ------------------------------------------------
	//		Mozilla - Netscape 5 or 6

	if(ns6)
	{	scrollbarElement = new ns6layer("scrollyr",  this.xPos, this.yPos, this.width, this.height, 20);
		arrowUpElement   = new ns6layer("arrowUp",   0, 0, this.arrowSize, this.arrowSize, 30);
			arrowUpElement.addImage(upSRC);
		arrowDownElement = new ns6layer("arrowDown", 0, (this.height-this.arrowSize), this.arrowSize, this.arrowSize, 30);
			arrowDownElement.addImage(downSRC);
		scrollerElement   = new ns6layer("scroller", 0, this.arrowSize, this.arrowSize, scrollerHeight, 25);
			scrollerElement.addImage(scrollSRC, "theScroller");
			
		scroller  = getLayer('scroller');
		scrollyr  = getLayer('scrollyr');
		arrowUp   = getLayer('arrowUp');
		arrowDown = getLayer('arrowDown');
		
		scrollyr.onmousedown = goThere;
	}
}


// ------------------------------------------------
//		Mozilla layer function (as Object)
//		- creates and writes layer to page
//		- addImage() writes an image to the layer

	function ns6layer(name, left, top, width, height, z)
	{	this.nameSRC = document.createElement("Div");
		this.nameSRC.id = name;

		if(name == "scrollyr") document.body.appendChild(this.nameSRC);
		else scrollbarElement.nameSRC.appendChild(this.nameSRC);

		this.lyr = document.getElementById(this.nameSRC.id);
		this.lyr.setAttribute("style","position:absolute; left:"+left
					+"; top:"+top+"; width:"+width+"; height:"+height+";");
		this.lyr.style.zIndex = z;
		
		if(name == "scrollyr" && scrollerBG != "none")
		{	if(scrollerBG.indexOf('.') != -1) this.lyr.style.backgroundImage = "url("+scrollerBG+")";
			else this.lyr.style.backgroundColor = scrollerBG;
		}

		this.addImage = addImage;
	}

		function addImage(path, imgName)
		{	this.imgElement = document.createElement("Img");
			this.imgElement.src = path
			this.imgElement.width = barWidth;
			if (imgName != null)
			{	this.imgElement.id = imgName;
				this.imgElement.height = scrollerHeight;
			}
			this.imgElement.border = 0;

			this.lyr.appendChild(this.imgElement);
		}


// ------------------------------------------------
//		Built in option to enable page flipping in
//		one document.
//
//		- scrollbar.setPage(arg) with arg as String
//		  representing a layername with content,
//		  nested in the clipped top level layer

function setPage(toWhat)
{	var hideThis = getLayer(this.activePage);
	if(ns4) hideThis.style = hideThis;
	hideThis.style.visibility = "hidden";

	var showThis = toWhat;
	showThis = getLayer(showThis);
	if(ns4) showThis.style = showThis;
	showThis.style.visibility = "visible";	

	this.pageToScroll = toWhat;
	if(ns4 || ns6) this.pageToScroll = getLayer(this.pageToScroll);
	this.activePage = toWhat;

	if(ie4) this.toScrollHeight = document.all[this.pageToScroll].clientHeight;
	if(ns4) this.toScrollHeight = this.pageToScroll.document.height;
	if(ns6) this.toScrollHeight = this.pageToScroll.offsetHeight;

		if(autoDisable && this.toScrollHeight <= this.height)
		{	scrollbar.enabled = false;
			if(onDisable == "hide") 
			{	scrollyr.style.visibility = "hidden";
			}
		}

		else 
		{	scrollbar.enabled = true;
			scrollyr.style.visibility = "visible";
		}	
		
	scroller.style.top = (arrowGrouping)? 0:this.arrowSize;
	scroller.checkPos();	
}

function toTop()
{	with(this)
	{	setPage(activePage);
	}
}


// ------------------------------------------------
//		Defines the range of the scroll-element,
//		how far you can drag it up and down.

function setMaxScroll()
{	this.maxScroll = this.height - this.arrowSize - this.scrollerHeight;
	scroller.range = this.maxScroll - this.arrowSize;
}


// ------------------------------------------------
//		Sets up mouse event listeners for the
//		elements of the scrollbar.

function monitor()
{	scroller.scrolling = false;
	scroller.moving = false;
	scroller.yStart = this.yPos;
	scroller.difY = 0;
	scroller.checkPos = checkPos;

	if(ns4)
	{	arrowUp.onmouseout   = stopScroll;
		arrowDown.onmouseout  = stopScroll;
		arrowUp = arrowUp.document;
		arrowDown = arrowDown.document;
		scroller.document.onmousedown = setDrag;
		scroller.document.onmouseup   = stopDrag;
	}
	
	else
	{	scroller.onmousedown = setDrag;
		scroller.onmouseup   = stopDrag;
		arrowUp.onmouseout   = stopScroll;
		arrowDown.onmouseout  = stopScroll;
	}

	arrowUp.onmouseout    = stopScroll;
	arrowDown.onmouseout   = stopScroll;	
	
	arrowUp.onmouseover  = scrollUp;
	arrowDown.onmouseover = scrollDown;			
}


// ------------------------------------------------
//		Maps scroll-element position to the content
//		layer, the heart of the script.

function checkPos()
{	if(arrowGrouping)
	{	scrollbar.maxScroll -= scrollbar.arrowSize;
		scrollbar.arrowSize = 0;		
	}

	if(ns4)
	{	if(this.top < scrollbar.arrowSize) this.top = scrollbar.arrowSize;
		if(this.top > scrollbar.maxScroll) this.top = scrollbar.maxScroll;
		scrollerF.top = scroller.top;
	}

	else
	{	if(parseInt(this.style.top) < scrollbar.arrowSize) this.style.top = scrollbar.arrowSize;
		if(parseInt(this.style.top) > scrollbar.maxScroll) this.style.top = scrollbar.maxScroll;
	}
	
	var position = 0 - scrollbar.arrowSize;

	if(ns4) position += this.top
	else    position += parseInt(this.style.top);

	var amountToDo = (scrollbar.toScrollHeight - scrollbar.height) + pageFromTop + extraSpace;
	if(amountToDo < 0) amountToDo = 0;
	var stepSize = amountToDo/this.range;

	var newPosition = pageFromTop - (position * stepSize);

	if(ie4) document.all[scrollbar.pageToScroll].style.pixelTop = newPosition;
	if(ns4) scrollbar.pageToScroll.top = newPosition;
	if(ns6) scrollbar.pageToScroll.style.top = newPosition;
}


// ------------------------------------------------
//		Mouse event function, enables dragging

function setDrag()
{	scroller.scrolling = true;
	scroller.difY = (y - scroller.yStart);
	
	if(ie4) scroller.difY -= scroller.style.pixelTop;
	if(ns4) scroller.difY -= scroller.top;
	if(ns6) scroller.difY -= parseInt(scroller.style.top);

	scroller.difY += scroller.yStart;
	
}


// ------------------------------------------------
//		Mouse event functions, disables dragging

function stopDrag()
{	if(!loaded) return;
	scroller.scrolling = false;
}

function mouseUp(e)
{	if(!loaded) return;
	scroller.scrolling = false;	
}


// ------------------------------------------------
//		Mouse event function, mouse positions

function mouseMove(e)
{	if(!loaded) return;
	if (ns4) {x=e.pageX; y=e.pageY;}
	if (ns6) {x=e.clientX; y=e.clientY;}
	if (ie4) {x=event.x; y=event.y;}

	if(ie4 && loaded) 
	{	if(event.button == 0) stopDrag();		
	}
	
	if(loaded && scroller.scrolling && scrollbar.enabled)
	{	if(ie4 || ns6) scroller.style.top = (y - scroller.yStart) - (scroller.difY - scroller.yStart);
		if(ns4) scroller.top = (y - scroller.yStart) - (scroller.difY - scroller.yStart);
		
		scroller.checkPos();		
		return false;
	}	
}

function fixNSresize()
{	if(pageWidth != window.innerWidth || pageHeight != window.innerHeight)
	history.go(0);
}

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
if(ns4) 
{	document.captureEvents(Event.MOUSEMOVE||Event.MOUSEUP||Event.MOUSEDOWN);
	window.onresize = fixNSresize;
}

// ------------------------------------------------
//		Arrow Buttons events, up and down functions

var SCmove = null;

function scrollUp()
{	keyLock = true;
	scroller.moving = true;
	if(ns6)  SCmove = setInterval(moveScroller, 25, (0-arrowSpeed));
	else SCmove = setInterval("moveScroller(0-arrowSpeed)",25);
}

function scrollDown()
{	keyLock = true;
	scroller.moving = true;
	if(ns6)  SCmove = setInterval(moveScroller, 25, arrowSpeed);
	else SCmove = setInterval("moveScroller(arrowSpeed)",25);
}

function stopScroll()
{	scroller.moving = false;
	if(SCmove != null) clearInterval(SCmove);
}

function moveScroller(how)
{	if(scroller.moving && scrollbar.enabled)
	{	if(ie4) scroller.style.pixelTop += how;
		if(ns4) scroller.top += how;
		if(ns6) scroller.style.top = parseInt(scroller.style.top) + how;

		scroller.checkPos();		
	}	
}

// ------------------------------------------------
//		Clicking in the bar causes the scroll
//		element to take a step towards the mouse

function goThere()
{	var where = y - scrollbar.yPos;
	if(!scroller.scrolling && !scroller.moving)
	{	if(where < ((ie4)? scroller.style.pixelTop:((ns6)? parseInt(scroller.style.top):scroller.top)))
		{	if(ie4) scroller.style.pixelTop -= clickStepSize;
			if(ns4) scroller.top -= clickStepSize;
			if(ns6) scroller.style.top = parseInt(scroller.style.top) - clickStepSize;
		}

		else
		{	if(ie4) scroller.style.pixelTop += clickStepSize;
			if(ns4) scroller.top += clickStepSize;
			if(ns6) scroller.style.top = parseInt(scroller.style.top) + clickStepSize;
		}

		scroller.checkPos();
	}
}

// ------------------------------------------------
//		finds layers within document. Brainjar.
//		-  http://www.brainjar.com. 

function getLayer(name) 
{	if (ns4) return findLayer(name, document);
	if (ie4) return eval('document.all.' + name);
	if (ns6) return document.getElementById(name);	
	return null;
}

function findLayer(name, doc) 
{	var i, layer;

	for (i = 0; i < doc.layers.length; i++) 
	{	layer = doc.layers[i];
		if (layer.name == name)	return layer;
		if (layer.document.layers.length > 0) 
		{	layer = findLayer(name, layer.document);
			if (layer != null) return layer;
		}
	}
	return null;
}