function MagicScrollPane(sContent ,  tBar , tHandle){
	this.bar = tBar;
	this.handle = tHandle;
	this.scrollContent = sContent;
	this.dragger;
	this.startY = 0;
	this.cover = null;
	this.callInt = null;
	this.barHeight = null; // used for safari 3 which is incompetent at getting element heights correctly.
	
	var moveEvent;	
	var endEvent;
	var html;
	
	this.init = function(){
		var host = this;
		startY = 0;
		html = document.getElementsByTagName("html")[0];
		moveEvent = function(e)  {
			e.cancelBubble = true;
			if(e.stopPropagation){e.stopPropagation();}
			host.updatePosition(e);
			return false;
		}
		
		endEvent = function(e) {
			host.updatePosition(e);
			host.ceaseDragging();
		}
	
		// Make the 'cheat' cover
		
		this.cover = document.createElement("div");
		this.cover.display = "block";
		this.cover.style.zIndex = 100;
		this.cover.style.position = "absolute";
		this.cover.style.top = "0px";
		this.cover.style.left = "0px";
		this.cover.style.width = this.bar.clientWidth + "px";
		this.cover.style.height = (this.barHeight ? this.barHeight : this.bar.clientHeight) + "px";
		this.cover.style.backgroundColor = "#000000";
		this.cover.style.opacity = 0;
		this.cover.style.cursor = "pointer";
		this.cover.style['filter'] = "alpha(opacity = 0)";
		this.cover.onclick = function(){return false;};
		this.bar.appendChild(this.cover);
		
		
		this.addEventListeners();
	}
	
	this.addEventListeners = function(){
		var host = this;
		
		this.cover.onmousedown = function(){return false;}
		Magic.Event.addEvent(this.cover , "mousedown" , 
		function(e){
			
			if(e.stopPropagation){e.stopPropagation();}
			e.cancelBubble = true;
			host.addDraggerEvents();
			
			return false;
		} , false);
		
		
		
	}
	
	this.reset = function(){
		this.scrollContent.scrollTop = 0;
		this.handle.style.top = "0px";
	}
	
	this.remove = function(){
		if(this.cover){
			this.cover.parentNode.removeChild(this.cover);
		}
	}
	
	this.addDraggerEvents = function(){
		var host = this;
		this.ceaseDragging();
		
		// used to other items don't try and drag
		//this.cover.focus();
		Magic.Event.addEvent(html , "mouseup" , endEvent);
		Magic.Event.addEvent(html , "mousemove" , moveEvent);
		
		
	}
	
	this.getMaxY = function(){
		return parseInt(this.bar.offsetHeight) - parseInt(this.handle.offsetHeight);
	}
	
	this.validateY = function(n){
		return Math.max(0 , Math.min(n , this.getMaxY()));
	}
									 
	
	this.updatePosition = function(e){
		
		var y;
		var tTop;
		var scroll = 0
		var barCoords = Magic.Coord.elementCoords(this.bar)
		y = Magic.Coord.mouseY(e);
		y = (y - barCoords.y);

		tTop = this.validateY(y - (parseInt(this.handle.offsetHeight) / 2));
		this.handle.style.top = (tTop) + "px";
		this.scrollTo();
	}
	
	this.scrollTo = function(){
		var scrollArea = this.scrollContent.scrollHeight - parseInt(this.scrollContent.offsetHeight);
		var div = scrollArea / this.getMaxY();
		
		this.scrollContent.scrollTop = ((parseInt(this.handle.style.top) * div) - startY);
	}

	
	this.ceaseDragging = function() {
		Magic.Event.removeEvent(html , "mousemove" , moveEvent); 
		Magic.Event.removeEvent(html , "mouseup" , endEvent);
	}
	
	
}