var scrollbar = {
	frames : new Array(),
	id     : null,
	offset : 0,
	dir    : 0,
	count : 0,
	add : function(id)
	{
		
		var id = id;
		if(typeof(id) == 'object')
		{
			var e = id;
			this.count++;
			id = this.count;
		}else{
			var e = document.getElementById(id);
		}
		this.frames[id] = new Array();
		this.frames[id]['element'] = e;
		this.frames[id]['height']  = parseInt(this.frames[id]['element'].offsetHeight);
		this.frames[id]['html']    = this.frames[id]['element'].innerHTML;
		this.frames[id]['element'].style.height   = 'auto';
		this.frames[id]['element'].style.overflow = 'hidden';
		this.frames[id]['offset']  = this.frames[id]['element'].offsetHeight;
		this.frames[id]['element'].style.height   = this.frames[id]['height']+'px';
		this.render(id);
	},
	init : function()
	{
		var elems = document.getElementsByTagName('div');
		for (var i = 0; i < elems.length; i++) {
			if (elems[i].className)
			{
				var arr = elems[i].className.split(' ');
				for(var j = 0; j<arr.length; j++)
				{
					if(arr[j] == 'scroll') this.add(elems[i]);
				}
			}
		}
		
	},
	render : function(id)
	{
		if(this.frames[id]['height'] < this.frames[id]['offset'])
		{
			var content = this.div('scroll_content');
			content.innerHTML = this.frames[id]['html'];
			content.style.position = 'absolute';
			content.style.top     = '0px';
			this.frames[id]['element'].innerHTML = '';
			this.frames[id]['element'].appendChild(content);
			this.frames[id]['offset'] = content.offsetHeight;
			this.frames[id]['content'] = content;
			var bar     = this.div('scroll_bar');
			var up      = this.div('scroll_up');
			var down    = this.div('scroll_down');
			var shuttle = this.div('scroll_shuttle');
			var line    = this.div('scroll_line');
			line.appendChild(shuttle);
			bar.appendChild(up);
			bar.appendChild(line);
			bar.appendChild(down);
			this.frames[id]['element'].appendChild(bar);
			shuttle.style.position = 'absolute';
			shuttle.style.top      = '0px';
			this.frames[id]['shuttle'] = shuttle;
			this.frames[id]['line']    = line.offsetHeight;
			this.frames[id]['pos']     = 0;
			up.onmousedown      = function(){scrollbar.up(id);};
			down.onmousedown    = function(){scrollbar.down(id);};
			up.onmouseup        = function(){scrollbar.end();};
			up.onmouseout       = function(){scrollbar.end();};
			down.onmouseup      = function(){scrollbar.end();};
			down.onmouseout     = function(){scrollbar.end();};
			shuttle.onmousedown = function(e){scrollbar.shuttle(id, e);};
			if(window.addEventListener) content.addEventListener('DOMMouseScroll', function(e){scrollbar.wheel(id,e);}, false);
			content.onmousewheel = function(e){scrollbar.wheel(id, e);};
		}
	},
	div : function(klasse)
	{
		var e = document.createElement('div');
		e.setAttribute('class',klasse);
		return e;
	},
	up : function(id)
	{
		this.id = id;
		this.dir = -0.05;
		this.loop();
	},
	down: function(id)
	{
		this.id = id;
		this.dir = 0.05;
		this.loop();
	},
	end: function()
	{
		this.id = null;
		document.onmousemove = function(){};
	},
	shuttle: function(id, e)
	{
		var e = e ? e : event;
		if (e.preventDefault)
		{
			e.preventDefault();
		}else{
			e.returnValue = false;
		}
		if(this.id != id)
		{
			this.end(this.id);
			this.id = id;
		}
		this.offset = e.clientY;
		document.onmousemove = function(e){scrollbar.shuttlemove(e);};
		document.onmouseup   = function(){scrollbar.end();};
	},
	shuttlemove : function(e)
	{
		var e = e ? e : event;
		if (e.preventDefault)
		{
			e.preventDefault();
		}else{
			e.returnValue = false;
		}
		if(this.id != null)
		{
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] + ((e.clientY - this.offset) / (this.frames[this.id]['line'] - this.frames[this.id]['shuttle'].offsetHeight));
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] > 1 ? 1 : this.frames[this.id]['pos'];
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] < 0 ? 0 : this.frames[this.id]['pos'];
			this.offset = e.clientY;
			this.update();
		}
	},
	update : function()
	{
		if(this.id != null)
		{
			 this.frames[this.id]['shuttle'].style.top = Math.round((this.frames[this.id]['line'] - this.frames[this.id]['shuttle'].offsetHeight) * this.frames[this.id]['pos'])+'px';
			 this.frames[this.id]['content'].style.top = Math.round((this.frames[this.id]['offset'] - this.frames[this.id]['height']) * (-1) * this.frames[this.id]['pos'])+'px';
		}
	},
	loop  : function()
	{
		if(this.id != null && this.dir != 0)
		{
			
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] + this.dir;
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] > 1 ? 1 : this.frames[this.id]['pos'];
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] < 0 ? 0 : this.frames[this.id]['pos'];
			this.update();
			window.setTimeout(function(){scrollbar.loop();},50);
		}
	},
	wheel : function(id, e)
	{
		this.end();
		if(id)
		{
			this.end();
			this.id = id;
			var delta = 0;
			var e = e ? e : event;
			if (e.wheelDelta)
			{
			 delta = e.wheelDelta / 120;
			}
			else if (e.detail)
			{
			  delta = -e.detail / 3;
			}
			delta = delta / (-10);
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] + delta;
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] > 1 ? 1 : this.frames[this.id]['pos'];
			this.frames[this.id]['pos'] = this.frames[this.id]['pos'] < 0 ? 0 : this.frames[this.id]['pos'];
			this.update();
		}
	}
}