Javascript-форум - scroll bar (wheel)

не робит следующий код =\
он даже innerHTML не пишет - совсем (

// указываем, что обработчиком колесика будет функция wheel
// для  Mozill`ы
if ($('content').addEventListener) {
	$('content').addEventListener('DOMMouseScroll', wheel, false);
}
//для всех остальных
$('content').onmousewheel = wheel;



function wheel(event) 
{
$('otladka').innerHTML = 'KOLECO MAT EGO';
var wDelta = 0; // значение на сколько покрутилось колесо
   // опять забота о кроссбраузерности
   if (event.wheelDelta)  {
        wDelta = event.wheelDelta/120;
    }   else if (event.detail)   {     
        wDelta = -event.detail/3;
    }
    // тут обрабатываем результат, например:
   alert(wDelta);
   // и заботимся о том, чтобы прокручивание колесика над элементом, не прокручивала скроллы страницы или еще что
    if (event.preventDefault)
    {
        event.preventDefault();
    }
    event.returnValue = false;
}

вот целиковый код . Еще один вопросик. как сделать так чтобы, когда начал тащить slider этот, то чтобы он тащился даже если мышка выше или ниже него..
----------
решено: onMouseMove="scrollDo(event);" в тег body
----------

<script>
var delta = 0;
function setWidth(what)
	{
	$('content').style.width = what * 98 + 'px';
	}
function setWidthSlider()
	{
	delta = parseFloat($('content').style.width) /  parseFloat($('wrapper').offsetWidth);
	$('slider').style.width = parseFloat($('wrapper').offsetWidth) / delta;
	alert(delta);
	}

var scroll = 0;
var posLeft = 0;
var posWidth = 0;
function scrollOff()
	{
	scroll = 0;
	posLeft =0;
	$('otladka').innerHTML = 'scroll = 0 now';
	}
function scrollOn(ev)
	{
	scroll = 1;
	ev = ev || window.event;
	posLeft = ev.clientX - parseFloat($('slider').offsetLeft);
	$('otladka').innerHTML = 'scroll = 1 now ..<br>clientX:'+ev.clientX +'<br>offsetLeft'+$('slider').offsetLeft+'<br> posLeft = ' + posLeft;
	}
function scrollDo(ev)
	{
	$('otladka').innerHTML = 'mouseMove 1';
	if(scroll == 1)
		{
		ev = ev || window.event;
		var moveLeftPx = ev.clientX  - posLeft - parseFloat($('container').offsetLeft) -2;
		if(moveLeftPx >=0 && moveLeftPx + $('slider').offsetWidth < $('container').offsetWidth-3)
			{
			$('slider').style.left = moveLeftPx + 'px';
			$('content').style.marginLeft = -moveLeftPx * delta + 'px';
			}
		$('otladka').innerHTML = 'clientX = '+ev.clientX + ' scroll = ' + scroll + '<br>posleft:' + posLeft;
		}
	}
//KOLECO

// указываем, что обработчиком колесика будет функция wheel
// для  Mozill`ы
if ($('content').addEventListener) {
	$('content').addEventListener('DOMMouseScroll', wheel, false);
}
//для всех остальных
$('content').onmousewheel = wheel;



function wheel(event) 
{
$('otladka').innerHTML = 'KOLECO MAT EGO';
var wDelta = 0; // значение на сколько покрутилось колесо
   // опять забота о кроссбраузерности
   if (event.wheelDelta)  {
        wDelta = event.wheelDelta/120;
    }   else if (event.detail)   {     
        wDelta = -event.detail/3;
    }
    // тут обрабатываем результат, например:
   alert(wDelta);
   // и заботимся о том, чтобы прокручивание колесика над элементом, не прокручивала скроллы страницы или еще что
    if (event.preventDefault)
    {
        event.preventDefault();
    }
    event.returnValue = false;
}





function $( el )
	{
	return  typeof el == 'string' ? document.getElementById(el) : el;
	}
</script>
<style>
body {margin:0px; padding:0px;}
#container
	{
	width:500px;
	height:8px;
	border:2px solid black;
	}
#slider
	{
	height:8px;
	background:red;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	position:relative;
	}
#content {height:130px;}

#wrapper {width:504px;overflow:hidden;margin:50px; border:1px darkgrey solid;height:142px;}

.img {float:left;width:98px; height:130px;}
.ClearBoth {clear:both;}
</style>
<body onMouseUp="scrollOff();" onLoad="setWidthSlider();" onMouseMove="scrollDo(event);">
<div id="wrapper" >
	<div id="content">
		<div class="img"><img src="img/1.jpg"></div>
		<div class="img"><img src="img/2.jpg"></div>
		<div class="img"><img src="img/3.jpg"></div>
		<div class="img"><img src="img/4.jpg"></div>
		<div class="img"><img src="img/5.jpg"></div>
		<div class="img"><img src="img/6.jpg"></div>
		<div class="img"><img src="img/7.jpg"></div>
		<div class="img"><img src="img/8.jpg"></div>
		<div class="img"><img src="img/1.jpg"></div>
		<div class="img"><img src="img/2.jpg"></div>
		<div class="img"><img src="img/3.jpg"></div>
		<div class="img"><img src="img/4.jpg"></div>
		<div class="img"><img src="img/5.jpg"></div>
		<div class="img"><img src="img/6.jpg"></div>
		<div class="img"><img src="img/7.jpg"></div>
		<div class="img"><img src="img/8.jpg"></div>
	<script>setWidth(16);</script>
	</div>

	<div id="container">
		<div id="slider" onMouseDown="scrollOn(event);"  onMouseMove="scrollDo(event);"> </div>
	</div>

</div>
<div id="otladka"></div>
</body>