Working with event Models - issues with grabIt, moveIt functions

I have a practice assignment that I coded from start to finish.  The page has a scroll bar on the bottom that is supposed to scroll when you click and drag on it using the mouse.  I have it working using the left and right direction buttons but it should work with both.  My tutor is of no use to me.  I have been staring at this since last night and I can't figure out what is wrong.  I fixed all of my typos and made sure everything is as it should be.

I need an extra set of eyes to proof what I have done.  Is there anything I missed?

[code]
 
<title>Badger Aviation</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">  // #2 added embedded script element
 
if (document.images) {
var slide=new Array();  // #a created image array and added images 0-9
slide[0]=new Image();
slide[1]=new Image();
slide[2]=new Image();
slide[3]=new Image();
slide[4]=new Image();
slide[5]=new Image();
slide[6]=new Image();
slide[7]=new Image();
slide[8]=new Image();
slide[9]=new Image();
 
slide[0].src="images/image0.jpg";
slide[1].src="images/image1.jpg";
slide[2].src="images/image2.jpg";
slide[3].src="images/image3.jpg";
slide[4].src="images/image4.jpg";
slide[5].src="images/image5.jpg";
slide[6].src="images/image6.jpg";
slide[7].src="images/image7.jpg";
slide[9].src="images/image9.jpg";
}
var IE = document.attachEvent ? true:false  // #b global variable to indicate if IE event model is supported
var DOM = document.addEventListener ? true:false  // b global variable to indicate if DOM event model is supported
 
function applyEventF(obj, ename, fname, capture) {  // #3a adds function to an object as the event occurs
		 if (IE) obj.attachEvent("on" + ename, fname);
		 else if (DOM) obj.addEventListener(ename, fname, capture);
}
 
function removeEventF(obj, ename, fname, capture) {  // #b removes attached function from an object
		 if (IE) obj.detachEvent("on" + ename, fname);
		 else if (DOM) obj.removeEventListener(ename, fname, capture);
}
 
function eventPositionX(e) {  // #c returns the x coordinate of an event
		 if (IE) return event.clientX;
		 else if (DOM) return e.clientX;
}
 
function getKeyCode(e) {  // #d returns keycode value of a keyboard event
		 if (IE) return event.keyCode;
		 else if (DOM) return e.keyCode;
}
 
function setup() {  // #4 sets up the page for the operation of the horizontal scrollbar
		 var button=document.getElementById("button"); // #a references the element with the id "button"
		 button.onmousedown=grabIt;  // #b document object that runs the grabIt() function
		 document.onselectstart=stopSelect;  // #c document object that runs the stopSelect() function
		 document.onkeydown=keyShow;  // #d document object that runs the keyShow() function
} 
 
 
 
function stopSelect() {  // #5 returns the value false
		 return false;
}
 
function grabIt(e) {  // #6 created function to grab the scroll bar button
		 //dragItem = eventSource(e);
		 //mouseX = eventPositionX(e);
		 //mouseY = eventPositionY(e);
		 //diffX = mouseX - getXCoord(dragItem);
		// diffY = mouseY - getYCoord(dragItem);
		 
		 applyEventF(bar,"mousemove",moveIt,false);
    	 applyEventF(bar,"mouseup",dropIt,false);
}
 
function moveIt(e) {  // #7 created function and added parameter "e"
		 var mouseX=eventPostionX(e);  // #a current position of the X postion of the event 
		 var diffX=mouseX-200;  // #b current position of the scrollbar button
		 var buttonposX=diffX;  // #c makes sure the scroll button is not dragged off of the scroll bar
	     if (buttonposX < 20) buttonposX=20;     
		 if (buttonposX > 299) buttonposX=299;      
		 placeIt(button, buttonposX, 6);  // #d function to place the scroll button object
		 showImage(buttonposX);  // #e calls the showImage() function
}
 
function dropIt() {  // #8 created function to detach moveIt() from the mousemove event occuring in the scrollbutton object
		 removeEventF(bar,"mousemove",moveIt,false);
}
		 	 
function keyShow(e){  // #9 function is to move the scroll bar button using the left and right arrows on the keyboard.
    	 key=getKeyCode(e);  // #a stores the keycode value
    	 buttonPosX=getXCoord(button);  // #b stores the x coordinate of the scrollbar
    	 if (key==37) buttonPosX -= 31;  // #c left arrow key is pressed, decrease the value by 31
    	 if (key==39) buttonPosX += 31;  // #c right arrow key is pressed, increase the value by 31
    	 if (buttonPosX < 20) buttonPosX =20;  // #d setting values on the buttons  
    	 if (buttonPosX > 299) buttonPosX = 299;  // #d setting values on the buttons
    	 placeIt(button, buttonPosX,6);  // #e places the scroll bar at the coordinates
    	 showImage(buttonPosX);  // #f calls the showImages() function
    	 return false;  // #g returns value as false so that Safari treats the arrow keys as single buttons
}
 
function showImage(x) {  // #10 determines which image to display based on the postion of the scrollbar button
		  var i = Math.floor((x-20)/31);  // #a coverts x coordinate range into an index number
      	  document.photo.src = slide[i].src;  // #b changes the source of the slide[i] image
}
 
 
</script>
</head>
 
<body onload="setup()">  <!-- #11 added event handler to the body element that runs the setup() function-->
 
<div id="logo"><img src="images/logo.jpg" alt="Badger Aviation" /></div>
<div id="corner"><img src="images/corner.jpg" alt="" /></div>
<div id="links"><img src="images/links.jpg" alt="" /></div>
<div id="title"><h1>Flight Photos</h1></div>
<div id="photos"><img id="photo" name="photo" src="images/image0.jpg" alt="" /></div>
 
<div id="bar" style="position:absolute; top: 450px; left:180px; width: 368px; height: 41px">
<div id="button" style="position: absolute; top: 6px; left: 20px; width: 50px; height:22px">
   &nbsp;
</div>
</div>
 
<div id="message">See photos from one of our popular
                  Dane County tours. Scroll through the slideshow 
                  using your mouse or the right and left arrows on 
                  your keyboard.
</div>
</body>
</html>
 
[/code]

Select allOpen in new window