Code is working fine in Firefox but causes an error in Internet Explorer 8. It says that there is an invalid argument on line 116 of the jquery.js file. I am pasting part of the code that I think is causing the problem below.

$("div#carousel").mouseover(function(event){
      speed = event;
    }).mouseout(function(){
    speed = 0.2;
    });

This is probably pretty basic. I am new to javascript and jquery. Any help would be greatly appreciated. I'm thinking that there is something wrong with the syntax of the code, but let me know if you need to see more of the js and html.

More code below, Please help:

1. var count = 0;
   var baseSpeed = 0.05;
   var radiusX = 136;
   var radiusY = 136;
   var centerX = 136;
   var centerY = 136;
   var speed = 0.2;
   var imageDivs = '';
   var numberOfElements = 0;
   var carousel = '';
   var speedTest = '';
   
   $(document).ready(function(){
    
    carousel = $('#carousel');
    imageDivs = $('#carousel div');
    numberOfElements = imageDivs.length;
   
    setInterval('startCarousel()', 40);
   
       
       $("div#carousel").mouseover(function(event){
         speed = event;
       }).mouseout(function(){
       speed = 0.2;
       });
   
    
   });
   
   function startCarousel(){
    
    for(i=0; i < numberOfElements; i++){
   
     angle = i * ( Math.PI * 2 ) / numberOfElements;
    
     posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
     posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
    
     imageDivWidth = 109;
     imageDivZIndex = Math.round(imageDivWidth)+100;
    
     $('#carousel div').eq(i).css({'position': 'absolute', 'left': posX + 'px', 'top': posY + 'px', 'width': imageDivWidth + 'px', 'zIndex': imageDivZIndex});
   
     angle += speed;
    }
    count++;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

HTML

1. <div id="carousel">
           <div><a href="#"><img src="images/carleads.png" /></a></div>
           <div><a href="#"><img src="images/moreleads.png" /></a></div>
           <div><a href="#"><img src="images/abco.png" /></a></div>
           <div><a href="#"><img src="images/bestnumbers.png" /></a></div>
           <div><a href="#"><img src="images/domaincontractors.png" /></a></div>
       </div>
   
   
   
   
   
   

Five buttons rotate on a circle. I want them to stop on mouseover into the carousel container. On mouseout I want them to keep rotating from the point at which they stopped from the mouseover. any help is greatly appreciated.