Why won't my images scroll?

[Peapie]

Here's my site:violetoeuvre.comI'd like to program the home image to change when it's scrolled over.Here's my javascript:\[code\]<!-- Photo __________________________________________--> <div id="home_photo"> <img id="home_photo" src="http://stackoverflow.com/questions/15688447/images/photo/1.jpg" /> <script type="text/javascript"> var myimages=[ "images/photo/1.jpg", "images/photo/2.jpg", "images/photo/3.jpg", "images/photo/4.jpg", "images/photo/5.jpg", "images/photo/6.jpg", "images/photo/7.jpg", "images/photo/8.jpg", "images/photo/9.jpg", "images/photo/10.jpg", "images/photo/12.jpg", "images/photo/13.jpg", "images/photo/14.jpg", "images/photo/15.jpg", "images/photo/16.jpg", "images/photo/18.jpg", "images/photo/19.jpg", "images/photo/20.jpg", "images/photo/21.jpg", "images/photo/22.jpg", "images/photo/23.jpg", ] var slideshow=document.getElementById("slideshow") var nextslideindex=0 function rotateimage(e){ var evt=window.event || e var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1 nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex slideshow.src=http://stackoverflow.com/questions/15688447/myimages[nextslideindex] if (evt.preventDefault) evt.preventDefault() else return false } var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll" : "mousewheel" if (slideshow.attachEvent) slideshow.attachEvent("on"+mousewheelevt, rotateimage) else if (slideshow.addEventListener) slideshow.addEventListener(mousewheelevt, rotateimage, false) </script> </div>\[/code\]As you see, I've got 23 images that should change when scrolled over. I can't find what's wrong. Maybe something in my divs is messed up? Or I'm misusing the id elements?Thank you!