Scrollbar = function(identifier, myID) {
	this.myID = myID;
	this.identifier = identifier;
	this.upH = 6; // Height of up-arrow
	this.upW = 10; // Width of up-arrow
	this.downH = 6; // Height of down-arrow
	this.downW = 10; // Width of down-arrow
	this.dragH = 24; // Height of scrollbar
	this.dragW = 8; // Width of scrollbar
	this.scrollH = 120; // Height of scrollbar
	this.speed = 4; // Scroll this.speed
	
	// And now... go to the bottom of the page...
	
	// Browser detection
	this.dom = document.getElementById ? true:false;
	this.nn4 = document.layers ? true:false;
	this.ie4 = document.all ? true:false;
	
	this.mouseY; // Mouse Y position onclick
	this.mouseX; // Mouse X position onclick
	
	this.clickUp = false; // If click on up-arrow
	this.clickDown = false; // If click on down-arrow
	this.clickDrag = false; // If click on scrollbar
	this.clickAbove = false; // If click above scrollbar
	this.clickBelow = false; // If click below scrollbar
	
	this.timer = setTimeout("",700); // Repeat variable
	this.upL; // Up-arrow X
	this.upT; // Up-arrow Y
	this.downL; // Down-arrow X
	this.downT; // Down-arrow Y
	this.dragL; // Scrollbar X
	this.dragT; // Scrollbar Y
	this.rulerL; // Ruler X
	this.rulerT; // Ruler Y
	this.contentT; // Content layer Y;
	this.contentH; // Content height
	this.contentClipH; // Content clip height
	this.scrollLength; // Number of pixels scrollbar should move
	this.startY; // Keeps track of offset between mouse and span
	
	this.initialized; // set true if done
	
};

Scrollbar.prototype.init = function(identifier, myID) {
	this.myID = myID;
	this.identifier = identifier;
	this.upH = 6; // Height of up-arrow
	this.upW = 10; // Width of up-arrow
	this.downH = 6; // Height of down-arrow
	this.downW = 10; // Width of down-arrow
	this.dragH = 24; // Height of scrollbar
	this.dragW = 8; // Width of scrollbar
	this.scrollH = 120; // Height of scrollbar
	this.speed = 4; // Scroll this.speed
	
	// And now... go to the bottom of the page...
	
	// Browser detection
	this.dom = document.getElementById ? true:false;
	this.nn4 = document.layers ? true:false;
	this.ie4 = document.all ? true:false;
	
	this.mouseY; // Mouse Y position onclick
	this.mouseX; // Mouse X position onclick
	
	this.clickUp = false; // If click on up-arrow
	this.clickDown = false; // If click on down-arrow
	this.clickDrag = false; // If click on scrollbar
	this.clickAbove = false; // If click above scrollbar
	this.clickBelow = false; // If click below scrollbar
	
	this.timer = setTimeout("",700); // Repeat variable
	this.upL; // Up-arrow X
	this.upT; // Up-arrow Y
	this.downL; // Down-arrow X
	this.downT; // Down-arrow Y
	this.dragL; // Scrollbar X
	this.dragT; // Scrollbar Y
	this.rulerL; // Ruler X
	this.rulerT; // Ruler Y
	this.contentT; // Content layer Y;
	this.contentH; // Content height
	this.contentClipH; // Content clip height
	this.scrollLength; // Number of pixels scrollbar should move
	this.startY; // Keeps track of offset between mouse and span
	
};



Scrollbar.prototype.sayHello = function() {
	trace("hello");	
};
// Mousedown
Scrollbar.prototype.down = function(e){
	if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
	if(this.ie4){
		this.mouseY = window.event.clientY + document.body.scrollTop;
		this.mouseX = window.event.clientX + document.body.scrollLeft;
	}
	else if(this.nn4 || this.dom){
		this.mouseY = e.pageY;
		this.mouseX = e.pageX;
	}

	this.startY = (this.mouseY - this.dragT);
	
	// If click on up-arrow
	if(this.mouseX >= this.upL && (this.mouseX <= (this.upL + this.upW)) && this.mouseY >= this.upT && (this.mouseY <= (this.upT + this.upH))){
		this.clickUp = true;
		return this.scrollUp();
	}	
	// Else if click on down-arrow
	else if(this.mouseX >= this.downL && (this.mouseX <= (this.downL + this.downW)) && this.mouseY >= this.downT && (this.mouseY <= (this.downT + this.downH))){
		this.clickDown = true;
		return this.scrollDown();
	}
	// Else if click on scrollbar
	else if(this.mouseX >= this.dragL && (this.mouseX <= (this.dragL + this.dragW)) && this.mouseY >= this.dragT && (this.mouseY <= (this.dragT + this.dragH))){
		this.clickDrag = true;
		return false;
	}
	else if(this.mouseX >= this.dragL && (this.mouseX <= (this.dragL + this.dragW)) && this.mouseY >= this.rulerT && (this.mouseY <= (this.rulerT + this.scrollH))){
		// If click above drag
		if(this.mouseY < this.dragT){
			this.clickAbove = true;
			this.clickUp = true;
			return this.scrollUp();
		}
		// Else click below drag
		else{
			this.clickBelow = true;
			this.clickDown = true;
			return this.scrollDown();
		}
	}
	// If no scrolling is to take place
	else{
		return true;
	}
}

// Drag function
Scrollbar.prototype.move = function(e){
	if(this.clickDrag && this.contentH > this.contentClipH){
		// need for mac - cause we want no selected text
		if (navigator.userAgent.indexOf("Mac") != -1) {
			document.all[this.identifier+"Form"].inner.focus();
		}

		if(this.ie4){
			this.mouseY = window.event.clientY + document.body.scrollTop;
			this.mouseX = window.event.clientX + document.body.scrollLeft;
		}
		else if(this.nn4 || this.dom){
			this.mouseY = e.pageY;
			this.mouseX = e.pageX;
		}
		this.dragT = (this.mouseY - this.startY);
		
		if(this.dragT < (this.rulerT))
			this.dragT = this.rulerT;		
		if(this.dragT > (this.rulerT + this.scrollH - this.dragH))
			this.dragT = (this.rulerT + this.scrollH - this.dragH);
		
		this.contentT = ((this.dragT - this.rulerT)*(1/this.scrollLength));
		this.contentT = eval('-' + this.contentT);

		this.moveTo();
		
		// So ie-pc doesn't select gifs
		if(this.ie4)
			return false;
	}
}

Scrollbar.prototype.up = function(){
	clearTimeout(this.timer);
	// Resetting variables
	this.clickUp = false;
	this.clickDown = false;
	this.clickDrag = false;
	this.clickAbove = false;
	this.clickBelow = false;
	return true;
}
/*
// Reads content layer top
Scrollbar.prototype.getT = function(){
	if(this.ie4) {
		this.contentT = document.all[this.identifier+"contentContainer"].style.pixelTop;
	} else if(this.nn4) {
		this.contentT = document.contentClip.document[this.identifier+"contentContainer"].top;
	} else if(this.dom) {
		this.contentT = parseInt(document.getElementById(this.identifier+"contentContainer").style.top);
	}
}
*/
// Reads mouse X and Y coordinates

/*
Scrollbar.prototype.getMouse = function(e){
	if(this.ie4){
		this.mouseY = window.event.clientY + document.body.scrollTop;
		this.mouseX = window.event.clientX + document.body.scrollLeft;
	}
	else if(this.nn4 || this.dom){
		this.mouseY = e.pageY;
		this.mouseX = e.pageX;
	}
}
*/



// Moves the layer (MTL: Keep in mind the this.subLayer)
Scrollbar.prototype.moveTo = function(){
	if(this.ie4){
		document.all[this.identifier+"contentContainer"].style.top = this.contentT; 
		document.all[this.identifier+"ruler"].style.top = this.dragT - document.all[this.identifier].style.pixelTop;
		document.all[this.identifier+"drag"].style.top = this.dragT - document.all[this.identifier].style.pixelTop;
	}
	else if(this.nn4){
		document[this.identifier+"contentClip"].document[this.identifier+"contentContainer"].top = this.contentT;
		document[this.identifier+"ruler"].top = this.dragT - document[this.identifier].top;
		document[this.identifier+"drag"].top = this.dragT - document[this.identifier].top;
	}
	else if(this.dom){
		document.getElementById(this.identifier+"contentContainer").style.top = this.contentT + "px";
		document.getElementById(this.identifier+"drag").style.top = eval(this.dragT - parseInt(document.getElementById(this.identifier).style.top)) + "px";
		document.getElementById(this.identifier+"ruler").style.top = eval(this.dragT- parseInt(document.getElementById(this.identifier).style.top)) + "px";
	}
}

// Scrolls up
Scrollbar.prototype.scrollUp = function(){
	// this.getT
	if(this.ie4) {
		this.contentT = document.all[this.identifier+"contentContainer"].style.pixelTop;
	} else if(this.nn4) {
		this.contentT = document.contentClip.document[this.identifier+"contentContainer"].top;
	} else if(this.dom) {
		this.contentT = parseInt(document.getElementById(this.identifier+"contentContainer").style.top);
	}
	
	if(this.clickAbove){
		if(this.dragT <= (this.mouseY-(this.dragH/2)))
			return this.up();
	}
	
	if(this.clickUp){
		if(this.contentT < 0){		
			this.dragT = this.dragT - (this.speed*this.scrollLength);
			
			if(this.dragT < (this.rulerT))
				this.dragT = this.rulerT;
				
			this.contentT = this.contentT + this.speed;
			if(this.contentT > 0)
				this.contentT = 0;
			
			this.moveTo();
			this.timer = setTimeout(this.scrollUp,25);
		}
	}
	return false;
}

// Scrolls down
Scrollbar.prototype.scrollDown = function(){
	// this.getT
	if(this.ie4) {
		this.contentT = document.all[this.identifier+"contentContainer"].style.pixelTop;
	} else if(this.nn4) {
		this.contentT = document.contentClip.document[this.identifier+"contentContainer"].top;
	} else if(this.dom) {
		this.contentT = parseInt(document.getElementById(this.identifier+"contentContainer").style.top);
	}
	
	if(this.clickBelow){
		if(this.dragT >= (this.mouseY-(this.dragH/2)))
			return this.up();
	}

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

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

// Preload
Scrollbar.prototype.eventLoader = function(){
	if (this.initialized == null) {
		if(this.ie4){
			// MTL: Align to this.subLayer 
			this.subL = document.all[this.identifier].style.pixelLeft;
			this.subT = document.all[this.identifier].style.pixelTop;
			// Up-arrow X and Y variables
			this.upL = document.all[this.identifier+"up"].style.pixelLeft+this.subL;
			this.upT = document.all[this.identifier+"up"].style.pixelTop+this.subT;		
			// Down-arrow X and Y variables
			this.downL = document.all[this.identifier+"down"].style.pixelLeft+this.subL;
			this.downT = document.all[this.identifier+"down"].style.pixelTop+this.subT;
			// Scrollbar X and Y variables
			this.dragL = document.all[this.identifier+"drag"].style.pixelLeft+this.subL;
			this.dragT = document.all[this.identifier+"drag"].style.pixelTop+this.subT;		
			// Ruler Y variable
			this.rulerT = document.all[this.identifier+"ruler"].style.pixelTop+this.subT;		
			// Height of content layer and clip layer
			this.contentH = parseInt(document.all[this.identifier+"contentContainer"].scrollHeight);
			this.contentClipH = parseInt(document.all[this.identifier+"contentClip"].style.height);
		}
		else if(this.nn4){
			// MTL: Align to this.subLayer
			this.subL = document[this.identifier].left;
			this.subT = document[this.identifier].top;
			// Up-arrow X and Y variables
			this.upL = document[this.identifier+"up"].left+this.subL;
			this.upT = document[this.identifier+"up"].top+this.subT;		
			// Down-arrow X and Y variables
			this.downL = document[this.identifier+"down"].left+this.subL;
			this.downT = document[this.identifier+"down"].top+this.subT;		
			// Scrollbar X and Y variables
			this.dragL = document[this.identifier+"drag"].left+this.subL;
			this.dragT = document[this.identifier+"drag"].top+this.subT;		
			// Ruler Y variable
			this.rulerT = document[this.identifier+"ruler"].top+this.subT;
			// Height of content layer and clip layer
			this.contentH = document[this.identifier+"contentClip"].document[this.identifier+"contentContainer"].clip.bottom;
			this.contentClipH = document[this.identifier+"contentClip"].clip.bottom;
		}
		else if(this.dom){
			// MTL: Align to this.subLayer
			this.subL = parseInt(document.getElementById(this.identifier).style.left);
			this.subT = parseInt(document.getElementById(this.identifier).style.top);
			// Up-arrow X and Y variables
			this.upL = parseInt(document.getElementById(this.identifier+"up").style.left)+this.subL;
			this.upT = parseInt(document.getElementById(this.identifier+"up").style.top)+this.subT;
			// Down-arrow X and Y variables
			this.downL = parseInt(document.getElementById(this.identifier+"down").style.left)+this.subL;
			this.downT = parseInt(document.getElementById(this.identifier+"down").style.top)+this.subT;
			// Scrollbar X and Y variables
			this.dragL = parseInt(document.getElementById(this.identifier+"drag").style.left)+this.subL;
			this.dragT = parseInt(document.getElementById(this.identifier+"drag").style.top)+this.subT;
			// Ruler Y variable
			this.rulerT = parseInt(document.getElementById(this.identifier+"ruler").style.top)+this.subT;
			// Height of content layer and clip layer
			this.contentH = parseInt(document.getElementById(this.identifier+"contentContainer").offsetHeight);
			this.contentClipH = parseInt(document.getElementById(this.identifier+"contentClip").offsetHeight);
			document.getElementById(this.identifier+"contentContainer").style.top = 0 + "px";
			
		}
		// Number of pixels scrollbar should move
		this.scrollLength = ((this.scrollH-this.dragH)/(this.contentH-this.contentClipH));
		this.initialized = true;
	}
}