var agent = {
	IE:     !!(window.attachEvent && !window.opera),
	FF:			 (navigator.userAgent.toLowerCase().indexOf('firefox')!=-1)
}

var templet = {
	create : function(opts){
		var rv=(agent.IE)? '' : document.createElement(opts.tagname);
		for(var i in opts){
			if(i!='tagname'){
				if(agent.IE) rv+=' '+((i=='classname')? 'class' : i)+'="'+opts[i]+'"';
				else rv.setAttribute((i=='classname')? 'class' : i,opts[i]);
			}
		}
		return (agent.IE)? document.createElement('<'+opts.tagname+rv+'>') : rv;
	},
	other : function(obj,dir,ms,me,pORm,percent,time){ //( ������Ʈ , �̵�property:style.left_or_scrollLeft�� , ������ġ , �̵�����ġ , +(1)����-(0)�������� )
		clearTimeout(obj.rollingact);
		ms = parseInt(ms);
		me = parseInt(me);
		var pos = Math.ceil((me-ms)*percent);
		var _me = eval("parseInt(obj."+dir+")");
		var unit = (dir.indexOf("style.")>-1) ? "px" : "";
		if((pORm==1&&_me>me)||(pORm==0&&_me<me)||pos==0){
			eval("obj."+dir+" = me+unit");
		}else{
			eval("obj."+dir+" = (parseInt(obj."+dir+")+pos)+unit");
			ms = eval("obj."+dir);

			if((pORm==1&&_me<me)||(pORm==0&&_me>me)) obj.rollingact=setTimeout(function(){templet.other(obj,dir,parseInt(ms),me,pORm,percent,time)},time);
		}
	}
}

function scroll(obj,autoSize) {
	var oneStep = 70; //up,down ��ư �̵�����
	var motion = true; //�̵� �ε巴�� �Ұ��� ����
	var percent = 0.35; //motion�� �Ͼ��� percenter
	var time = 30; //motion�� �Ͼ��� time
	var mR = 5; //�������� ��ũ�� ���̰���

	var obj = obj; //��ũ�� �� ������Ʈ
	var scrW = 0; //��ũ�� width
	var btnh = 0; //up,down ��ư height
	var mh = 0; //��ũ�� �̵����ɱ���
	var barauto = autoSize; //��ũ�� ����
	var scauto = true; //��ũ�� ����
	var objCont = null;
	var trackObj = null;
	var trackH = 0;
	var trackMh = 0; //��ũ�� �̵����ɱ���

	var faceObj = null;
	var faceMp = 0; //���콺 ������ �̵����� ����� ����
	var faceNv = 0; //���콺 ������ �̵����� ����� ����

	var btnUpObj = null;
	var btnUpRp = true;
	var btnUpTime = 50;
	var btnUpAct = null;

	var btnDownObj = null;
	var btnDownObj = null;
	var btnDownRp = true;
	var btnDownTime = 50;
	var btnDownAct = null;


	function init(){
		with (obj.style){
			position = "relative";
			overflow = "hidden";
		}

		var objHTML = obj.innerHTML;
		obj.innerHTML = "";
		objCont=templet.create({tagname:'div',classname:'scrollcont'});
		trackObj=templet.create({tagname:'div',classname:'scrolltrack'});
		faceObj=templet.create({tagname:'div',classname:'scrollface'});
		btnUpObj=templet.create({tagname:'div',classname:'scrollup'});
		btnDownObj=templet.create({tagname:'div',classname:'scrolldown'});
		obj.appendChild(objCont);
		obj.appendChild(btnUpObj);
		obj.appendChild(btnDownObj);
		obj.appendChild(trackObj);
		trackObj.appendChild(faceObj);
		objCont.innerHTML = objHTML;

		scrW = btnDownObj.offsetWidth;
		btnh = btnDownObj.offsetHeight;
		objCont.style.marginRight = scrW + mR + "px";

		reset();
		window.onresize=reset;
	}
	init();



	function reset(){
		scauto = (objCont.scrollHeight>obj.offsetHeight);
		mh = objCont.scrollHeight-obj.offsetHeight; //������ ��ũ�� �̵�����
		faceNv=0;
		trackH = (!barauto)? faceObj.offsetHeight : Math.round(obj.offsetHeight*(obj.offsetHeight-(btnh*2))/objCont.scrollHeight); //Ʈ�� ����
		trackMh = (obj.offsetHeight-(btnh*2))-trackH; //���� �̵� ���ɱ���

		with (objCont.style){
			height = obj.offsetHeight+"px";
			overflow = "hidden";
		}
		with (trackObj.style){
			position = "absolute";
			right = 0;
			top = btnh + "px";
			width = scrW + "px";
			height = (obj.offsetHeight-(btnh*2)) + "px";
			overflow = "hidden";
		}
		with (faceObj.style){
			position = "absolute";
			left = 0;
			top = 0;
			width = scrW + "px";
			height = trackH + "px"; //�����ϰ�� ����
			display = (scauto||mh>0) ? "block" : "none";
		}

		with (btnUpObj.style){
			position = "absolute";
			right = 0;
			top = 0;
			width = scrW + "px";
			height = btnh + "px";
			overflow = "hidden";
		}
		with (btnDownObj.style){
			position = "absolute";
			right = 0;
			bottom = 0;
			width = scrW + "px";
			height = btnh + "px";
			overflow = "hidden";
		}
		if(mh!=0){
			if(agent.IE) obj.onmousewheel=wheel;
			else obj.addEventListener((agent.FF)? 'DOMMouseScroll' : 'mousewheel',wheel,false);
			faceObj.onmousedown=faceDown;
			trackObj.onmousedown=trackDown;
			btnUpObj.onmousedown=btnUpDown;
			btnDownObj.onmousedown=btnDownDown;
		}
	}

	function faceDown(e){
		if(!scauto) return false;
		e = e || window.event;
		faceMp=e.screenY;
		faceNv=parseInt(faceObj.style.top);
		document.documentElement.style.cursor='pointer';

		document.onmousemove=function(e){
			e = e || window.event;
			var _target=faceNv-(faceMp-e.screenY);
			_target=Math.ceil((0>_target)? 0 : (_target>trackMh)? trackMh : _target);
			faceObj.style.top = _target+"px";
			objCont.scrollTop = (_target*mh)/trackMh;
			return false;
		}

		document.onmouseup=function(){
			document.documentElement.style.cursor='default';
			document.onmousemove=null;
			document.onmouseup=null;
			faceNv=parseInt(faceObj.style.top);
		}
		return false;
	}

	function trackDown(e){
		if(!scauto) return false;
		e = e || window.event;
		var _target=(e.target)? e.target : e.srcElement;

		if(_target!=faceObj){
			var cp=(e.offsetY)? e.offsetY : e.layerY;
			var _target = (cp >= trackMh) ? trackMh : cp;
			_target = (_target < 0) ? 0 : _target;

			var pORm = (parseInt(faceObj.style.top)<_target) ? 1 : 0;
			if(motion) templet.other(faceObj,"style.top",faceObj.style.top,_target,pORm,percent,time) //�ε巴�� �����ϰ��
			else faceObj.style.top = _target+"px"; //�֍� �����ϰ��

			_target = (_target*mh)/trackMh;
			if(motion) templet.other(objCont,"scrollTop",obj.scrollTop,_target,pORm,percent,time) //�ε巴�� �����ϰ��
			else objCont.scrollTop = _target; //�֍� �����ϰ��
		}
	}

	function wheel(e){ //���콺 ���۵�
		if(!scauto) return false;
		e = e || window.event;
		var _target = (e.wheelDelta)? e.wheelDelta : e.detail;
		if(agent.FF) _target = (_target>0)? -_target : _target-(_target*2); // for firefox's reverse wheel data
		var pORm = (_target<0) ? 1 : 0;
		_target = (pORm) ? trackMh*(objCont.scrollTop+oneStep)/mh : trackMh*(objCont.scrollTop-oneStep)/mh;
		_target = (_target < 0) ? 0 : (_target > trackMh)? trackMh : _target;
		faceObj.style.top = _target+"px";
		_target = (pORm) ? objCont.scrollTop+oneStep : objCont.scrollTop-oneStep;
		objCont.scrollTop = _target;
		return false;
	}

	function btnUpDown(){
		function action(){
			if(parseInt(faceObj.style.top)==0) return false;
			btnUpRp = true;
			var _target = trackMh*(objCont.scrollTop-oneStep)/mh;
			_target = (_target < 0) ? 0 : _target;

			var pORm = 0; //�ε巴�� �����ϰ��
			if(motion) templet.other(faceObj,"style.top",faceObj.style.top,_target,pORm,percent,time) //�ε巴�� �����ϰ��
			else faceObj.style.top = _target+"px"; //�֍� �����ϰ��

			_target = (_target*mh)/trackMh;
			if(motion) templet.other(objCont,"scrollTop",obj.scrollTop,_target,pORm,percent,time) //�ε巴�� �����ϰ��
			else objCont.scrollTop = _target; //�֍� �����ϰ��
		}
		if(parseInt(faceObj.style.top)>0) action();
	}

	function btnDownDown(){
		function action(){
			if(parseInt(faceObj.style.top)==trackMh) return false;
			btnDownRp = true;
			var _target = trackMh*(objCont.scrollTop+oneStep)/mh;
			_target = (_target > trackMh)? trackMh : _target;

			var pORm = 1; //�ε巴�� �����ϰ��
			if(motion) templet.other(faceObj,"style.top",faceObj.style.top,_target,pORm,percent,time) //�ε巴�� �����ϰ��
			else faceObj.style.top = _target+"px"; //�֍� �����ϰ��

			_target = (_target*mh)/trackMh;
			if(motion) templet.other(objCont,"scrollTop",obj.scrollTop,_target,pORm,percent,time) //�ε巴�� �����ϰ��
			else objCont.scrollTop = _target; //�֍� �����ϰ��
		}
		if(parseInt(faceObj.style.top)<trackMh) action();
	}

}