Javascript-форум - Пишем слайдер. Знатоки милости просим.

Написал простенький код с целью познать азов javascript-а.
Но так как сценарий на данном языке пишу впервые, возникло масса вопросов. Ниже, привожу исходник, прошу указать на недочёты которые допустил в данном коде.

<html>
<!-- этот файл обсуждаем. -->
<script type="text/javascript" src="js/Scrolling.js"></script>

<!-- отладочный стиль. -->
<style>
.scrolling_scv
{
	background:#333;
	border-radius:5px;
	width:10px;
	height:30px;
	position:absolute;
	cursor:default;
	-webkit-user-select:none;
}

.background_scv
{
	background:#999;
	border-radius:5px;
	width:10px;
	height:100%;
	-webkit-user-select:none;
}
</style>

<!-- не обращаем внимание, на коленке писал. -->
<script>
$("debug").appendChild(new STScrolling("debug", function (i) { $("output").innerHTML = i; } ));
function $(id) { return document.getElementById(id); }
</script>

<body>
<!-- отладочные div-ы -->
<div align="center" id="debug" style="height:300px;"></div>
<div align="center" id="output">0</div>
</body>

</html>

код который обсуждаем.

var STScrolling = function(id, fun)
{
	// айди новых объектов.
	var bgId = "bg_" + id;
	var scId = "sc_" + id;
	
	// выполняет функцию при анимации элемента.
	var out = fun;
	
	// запоминаем позицию курсора на элементе.
	var lp;
	
	// новое положение элемента.
	var ep;
	
	// дистанция, в доль которой может двигаться элемент.
	var ds;
	
	// выводит положение элемента в процентах.
	var sp;
	
	// динамический элемент.
	var sc = d(scId, "scrolling_scv");
		sc.addEventListener("mousedown", onMouseDown);
	
	// бакгроунд под элементом.
	var bg = d(bgId, "background_scv");
		bg.appendChild(sc);
	
	// кликаем по элементу.
	function onMouseDown (e)
	{
		// вычисляем дистанцию.
		ds = bg.offsetHeight - sc.offsetHeight;
		
		// определяем шаг элемента в процентах.
		sp = 1 / ds;
		
		// запоминаем где кликнул курсор на элементе.
		lp = bg.offsetTop + e.layerY;
		
		// регистрируем приёмники.
		window.addEventListener("mousemove", onMouseMove);
		window.addEventListener("mouseup", onMouseUp);
	}
	
	// отжимаем кнопку мыши.
	function onMouseUp (e)
	{
		// удаляем приёмники.
		window.removeEventListener("mousemove", onMouseMove);
		window.removeEventListener("mouseup", onMouseUp);
	}
	
	// двигаем мышью.
	function onMouseMove (e)
	{
		// вычисляем новое положение элемента.
		ep = e.clientY - lp;
		
		// проверяем положение элемента.
		if (ep > ds) ep = ds;
		else if (ep < 0) ep = 0;
		
		// двигаем элемент.
		sc.style.top = bg.offsetTop + ep + "px";
		
		// если переменная не пуста, выполняем метод.
		if (out != null) out(parseInt(ep * sp * 100));
	}
	
	// создаём нужные div элементы.
	function d(id, cn)
	{
		var n = document.createElement("div");
			n.id = id;
			n.className = cn;
		return n;
	}
	
	// возвращаем объект.
	return bg;
}

Из недостатков с которыми уже столкнулся:

Если страница документа прокручивается, позиция курсора нарушается. Я так понял что "e.layerY" отсчитывает позицию не от начала документа а от начала видимой области т.е. окна браузера. Думаю что это решаемо, просто пока не знаю как.

Продолжаем критиковать и предлагаем свои варианты, решения!
Заранее благодарю за понимание.