Javascript - Prototype/Scriptaculous Pause on MouseOver

Question

I'm using this simple slideshow and wondered if anyone knew how to make it pause when I moved my mouse over it and then start again if I move my mouse off the image?

There is a demo of the slideshow here: http://script.aculo.us/stuff/simplest_slideshow/

This is the main code:

<script>
setInterval(function(){
  var imgs = $$('.fadein img'), 
   visible = imgs.findAll(function(img){ return img.visible(); });
  if(visible.length>1) visible.last().fade({ duration: 1 });
    else imgs.last().appear({ duration: 1, 
      afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
}, 2000);
</script>

Thanks!

Answer 1

Figured out the answer:

 <ul class="fadein" onmouseover="stop_slideshow()" onmouseout="start_slideshow()">
      <li><a href="http://google.com"&gt;&lt;img src='{{skin url="images/slider.jpg"}}' alt="" /></a></li>
      <li><a href="http://example.com"&gt;&lt;img src='{{skin url="images/slider1.jpg"}}' alt="" /></a></li>
 </ul>

<script type="text/javascript">
var duration = 4000;
var showNextImage = true;
        function stop_slideshow() {
            showNextImage = false; 
        }  
        function start_slideshow() {
            showNextImage = true; 
        }
setInterval(function(){
    if(!showNextImage){ return; }
    var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); });
    if(visible.length > 1) {
        visible.last().fade({ duration: 1 });
    } else {
        imgs.last().appear({ duration: 1, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
    }
}, duration);
</script>