//Scroll Script by Floris Briolas, for Studio 10.5 ver 1.3
//
//	How to use:
//
//	You need one div with content with style like :
//
//	.ScrollContainer
//	{
//		top : 19px;
//		left : 692px;
//		width:295px;
//		height:400px;
//		overflow:hidden;
//		background-color: #333333;
//		position:absolute;
//	}
//
//	You need some scroller
//
//
//	<div id="Scroller1" 	style="background-color: #444444; position: absolute; z-index: 255; margin-top: 15px; margin-left: 300px ;  width: 16px; height: 184px;">
//		<div id="up1" 	style="background-color: #00FF00; position: absolute; z-index: 4; top: 0px; left: 0px ; width: 16px; height: 16px; cursor: pointer; "></div>
//		<div id="track1" style="background-color: #FFFF00; position: absolute; z-index: 3; top: 0px; left: 8px; width: 1px; height: 184px"></div>
//		<div id="drag1" 	style="background-color: #0000FF; position: absolute; z-index: 5; top: 16px; left: 0px ; width: 16px; height: 16px;cursor: pointer; "></div>
//		<div id="down1" 	style="background-color: #00FF00; position: absolute; z-index: 4; top: 168px; left: 0px; width: 16px; height: 16px; cursor: pointer;"></div>
//	</div>
//
//	Call this in your script (script on bottom) MakeScrollable('floris','Scroller','up','drag','down');
//



function MakeScrollable(id,scroller,up,drag,down)
{
	var iex = document.all;
			
	var offset = 0;
	var scrollOffset =0;
	var divelementid = 	id;
	var dragObject  = null;

	
	var _content =  document.getElementById(id);
	var _scroller = document.getElementById(scroller);
	var _up = document.getElementById(up);
	var _drag = document.getElementById(drag);	
	var _down = document.getElementById(down);

	var _scrollHeight = _content.scrollHeight;
	var _windowHeight = _content.offsetHeight;
	

	
	var _min = parseInt(_up.style.top) + parseInt(_up.style.height);
	var _max = parseInt(_down.style.top) - parseInt(_down.style.height);
	var _dragSpace = _max-_min;
	var _dragStep =  (_scrollHeight - _windowHeight) / _dragSpace;

	makeDraggable(_drag);
	
	if (_scrollHeight<=_windowHeight)
	{
		_scroller.style.visibility="hidden";		
	}
	else
	{	
		if (!iex)
		{
			document.addEventListener('mousemove',mouseMove,false); //IE do not like
			document.addEventListener('mouseup',mouseUp,false);
			_up.addEventListener('click',clickup,false);
			_down.addEventListener('click',clickdown,false);
		} else
		{
			document.attachEvent('onmousemove',mouseMove); //IE likes more...
			document.attachEvent('onmouseup',mouseUp);
			_up.attachEvent('onmousedown',clickup);
			_down.attachEvent('onmousedown',clickdown);
		}
		
		
		hookEvent(divelementid, 'mousewheel', doScroll);//For IE and Opera
		hookEvent(divelementid, 'DOMMouseScroll', doScroll); //For FireFox
		syncBar();
	}

	function clickup(ev)
	{
		_content.scrollTop -= 40;
		syncBar();
		ev.cancelBubble = true;
	}
	
	function syncBar()
	{
		_dragStep =  (_content.scrollHeight - _windowHeight) / _dragSpace; //reinitialize _dragStep, = fix for IEX. scrollHeight bug.
		_drag.style.top = (_content.scrollTop / _dragStep) + _min  + "px";
	}
	
	function clickdown(ev)
	{
		_content.scrollTop += 40;
		syncBar();
		ev.cancelBubble = true;
	}

	function mouseMove(ev)
	{
		ev           = ev || window.event;
		var mousePos = mouseCoords(ev);
	
		if(dragObject)
		{			
			var _height = parseInt(dragObject.style.height);			
			var _top = parseInt(_scroller.style.top);
			var _moveto = mousePos.y - offset + _height - scrollOffset;
			//bounds restrictor
			if (_min>_moveto)
			{
				_moveto = _min;
			}
			
			if (_max<_moveto)
			{
				_moveto = _max;
			}
			dragObject.style.top      = _moveto + "px";
			var tmp = (parseInt(dragObject.style.top) - _min)*_dragStep;
			_content.scrollTop = parseInt(tmp);
			ev.cancelBubble = true;
			return false;
		}
	}
	
	function makeDraggable(item)
	{
		if(!item) return;
		item.onmousedown = function(ev)
			{
				dragObject  = this;
				ev = ev || window.event;
				offset = ev.clientY - parseInt(dragObject.style.top) + _min ;
				scrollOffset = (document.all)?document.body.scrollTop:window.pageYOffset;
				window.status = scrollOffset;
				return false;
			}
	}
	
	function mouseUp(ev)
	{
		dragObject = null;
		ev.cancelBubble = true;
	}
	
	function mouseCoords(ev)
	{
		var _x;
		var _y;
		
		if(ev.pageX || ev.pageY)
		{
			_y=ev.pageY;
			_x=ev.pageX;			

		} else		
		{
			_x=ev.clientX + document.body.scrollLeft - document.body.clientLeft;
			_y=ev.clientY + document.body.scrollTop  - document.body.clientTop;
		}
		return {x:_x,y:_y};
	}	
	
	function getPosition(e)
	{
		var left = 0;
		var top  = 0;

		while (e.offsetParent)
		{
			left += e.offsetLeft;
			top  += e.offsetTop;
			e = e.offsetParent;
		}

		left += e.offsetLeft;
		top  += e.offsetTop;

		return {x:left, y:top};
	}
	
	function hookEvent(element, eventName, callback)
	{
		if(typeof(element) == "string")
			element = document.getElementById(element);
		if(element == null)
		{
			alert("failed to find "+ element);
    		return;
		}
		if(element.addEventListener)
		{
			element.addEventListener(eventName, callback, false);
		}
		else 
			if(element.attachEvent)
				element.attachEvent("on" + eventName, callback);
	}
	
	function doScroll(e) 
	{		
		e = e ? e : window.event;
		var raw = e.detail ? e.detail : e.wheelDelta;
		var normal = e.detail ? e.detail *-1 : e.wheelDelta / 40;	  
		_content.scrollTop +=normal*-20;
		syncBar();	
		cancelEvent(e);
	}
	
	function cancelEvent(e)
	{
		e = e ? e : window.event;
		if(e.stopPropagation)
			e.stopPropagation();
		if(e.preventDefault)
			e.preventDefault();
		e.cancelBubble = true;
		e.cancel = true;
		e.returnValue = false;
		return false;
	}
}