(function(){
var dragobj; var scrollcontent;
var dragx; var dragy;
var mposx; var mposy;
var salt;
var _scrollbar = {
	init: function(){
		dragobj = null; dragx = 0; dragy = 0; mposx = 0; mposy = 0; salt = 1; scrollcontent = null;
		document.onmousemove = scrollbar.drag;
		document.onmouseup = scrollbar.dragstop;
	},
	
	addTo: function(id){
		if(!document.getElementById(id)) throw('no such id');
		/* get scrollbar container */
		var scrollbarContainer = document.getElementById(id);
		scrollbarContainer.style.overflow = 'hidden';
		
		
		/* create new scrollbar elements */
		var newScrollableContentContainer = document.createElement('div');
		newScrollableContentContainer.className = 'scrollableContentContainer';
		newScrollableContentContainer.innerHTML = scrollbarContainer.innerHTML;
		
		var newScrollbarContainer = document.createElement('div');
		newScrollbarContainer.className = 'scrollbarContainer';
		
		var newScroller = document.createElement('div');
		newScroller.className = 'scroller';
		newScroller.id = 'test';
		
		/* prepare container */
		scrollbarContainer.innerHTML = '';
		
		/* append childs */
		scrollbarContainer.appendChild(newScrollableContentContainer);
//		newScrollableContentContainer.style.width = (scrollbarContainer.offsetWidth) + 'px';
		
		
		if(document.getElementById(id).getElementsByTagName('div')[0].offsetHeight + 120<= document.getElementById(id).parentNode.offsetHeight) {
			return false;
		}
		
		
		scrollbarContainer.appendChild(newScrollbarContainer);
		newScrollbarContainer.appendChild(newScroller);
		
		/* setup scroller - BETA */
//		mysalt = (scrollbarContainer.offsetHeight/scrollbarContainer.offsetHeight)+1;
		mysalt = (newScrollableContentContainer.offsetHeight / scrollbarContainer.offsetHeight);
		newScroller.mousedown = scrollbar.initDrag(newScroller,mysalt);
		
		/* ajust size */
		
		newScroller.style.height = ((scrollbarContainer.offsetHeight/newScrollableContentContainer.offsetHeight)*scrollbarContainer.offsetHeight) + 'px';
		
		
	},
	
	initDrag: function(element,mysalt){
		salt = mysalt;
		element.onmousedown = new Function('scrollbar.dragstart(this,'+mysalt+');scrollbar.setScrollContent(this.parentNode.parentNode);return false;');
	},
	
	dragstart: function(element){
		dragobj = element;
		dragy = mposy - dragobj.offsetTop;
	},
	
	drag: function(e){
		mposy = document.all ? window.event.clientY : e.pageY;
		if(dragobj == null) return false;
		if((mposy - dragy)>1){
			if((mposy - dragy) < dragobj.parentNode.offsetHeight-dragobj.offsetHeight-2){
				dragobj.style.top = (mposy - dragy) + 'px';
				scrollbar.contentScrollTo(mposy - dragy);
			} else {
				dragobj.style.top = dragobj.parentNode.offsetHeight-dragobj.offsetHeight-2 + 'px';
				scrollbar.contentScrollTo((dragobj.parentNode.offsetHeight-dragobj.offsetHeight-2));
//-->				dragobj = null; return false;
				dragelement = dragobj;
				scrollbar.dragstop(); scrollbar.dragstart(dragelement);
			}
		} else {
			dragobj.style.top = '1px'
			scrollbar.contentScrollTo(0);
//-->			dragobj = null; return false;
			dragelement = dragobj;
			scrollbar.dragstop(); scrollbar.dragstart(dragelement);
		};
	},
	
	setScrollContent: function(element){
		scrollcontent = element.getElementsByTagName('div')[0];
	},
	
	contentScrollTo: function(px){
		scrollcontent.style.marginTop = (px+1)*salt*-1 + 'px';
	},
	
	contentScrollDown: function(e){
		
	},
	
	dragstop: function(){
		dragobj = null;
	}
};
window.scrollbar = _scrollbar;
scrollbar.init();
})();