Start/Stop Slideshow

JavaScript
1

I have the below Prototype/Scriptaculous codes which creates a slideshow from images in a list. I would like to make it so that when I hover over the image the slideshow will stop and then start again when I Move off the image. Does anyone know how this could be done? Thanks!

var delay = 2000;
var start_frame = 0;

function start_slideshow(delay) {
  setTimeout(fadeInOut(delay), delay);
}

function fadeInOut(delay) {
  return(function() {
    lis = $$('#slide-images>li');
    new Effect.Appear(lis[1], { duration: 2, afterFinish: function(obj) {
      lisFade = lis[0].remove();
      lisFade.hide();
      $('slide-images').appendChild(lisFade);
      start_slideshow(delay);
    }});
  })
}

Event.observe(document, 'dom:loaded', function() {
  var lis = $$('#slide-images>li');
  if(lis.length > 1) for(i = 1; i < lis.length; i++) lis[i].hide();
});

Event.observe(window, 'load', function() {
  if($$('#slide-images>li').length > 1) start_slideshow(delay);
});

#slide-images{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:400px;
	height:300px;
	overflow:hidden;
}

#slide-images li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}

#slide-images li img{
	display:block;
	background-color:#FFFFFF;
}

<div id="slide-show">
<ul id="slide-images">
	<li><img src="http://www.istockphoto.com/file_thumbview_approve/14198113/2/istockphoto_14198113-flower-light.jpg" alt="One" title="One" /></li>
	<li><img src="http://www.istockphoto.com/file_thumbview_approve/14136979/2/istockphoto_14136979-dawn-stag.jpg" alt="Two" title="Two" /></li>
	<li><img src="http://www.istockphoto.com/file_thumbview_approve/14135833/2/istockphoto_14135833-feeling-the-nature.jpg" alt="One" title="One" /></li>
	<li><img src="http://www.istockphoto.com/file_thumbview_approve/14136979/2/istockphoto_14136979-dawn-stag.jpg" alt="Two" title="Two" /></li></ul>
</div>