JQuery :: Cycle Plugin - 4 Slideshows With Each Fading In Turn

I've got 4 parallel slideshows (see below) that each contain 3 images. I would like the slideshow 1 to fade first, then slideshow 3, then 2, then 4. I have no problem with making all 4 slideshows work at the same time but I can't make them alternate. I've been trying to use "after:" as a callback to trigger the next slideshow but every time I put in some more code the whole thing stops working !!

Code :
<script type="text/javascript">
<!-- $(document).ready(
function() {
$('.slideshow')
.cycle({fx: 'fade',timeout: 5000})
.cycle('stop');});

// I was trying to call this function after starting #slide-1 but I gave up !!
function nextImage1() {
$('#slide-1').cycle({fx: 'fade',timeout: 5000,after: nextImage3 });
}
-->
</script>
<div id="diaporama">
<div id="slide-1" class="slideshow">
<img src="images/diapo_1_1.jpg" width="240" height="171" />
<img src="images/diapo_1_2.jpg" width="240" height="171" />
<img src="images/diapo_1_3.jpg" width="240" height="171" />
</div><div id="slide-2" class="slideshow">
<img src="images/diapo_2_1.jpg" width="240" height="171" />
<img src="images/diapo_2_2.jpg" width="240" height="171" />
<img src="images/diapo_2_3.jpg" width="240" height="171" />
</div><div id="slide-3" class="slideshow">
<img src="images/diapo_3_1.jpg" width="240" height="171" />
<img src="images/diapo_3_2.jpg" width="240" height="171" />
<img src="images/diapo_3_3.jpg" width="240" height="171" />
</div><div id="slide-4" class="slideshow">
<img src="images/diapo_4_1.jpg" width="240" height="171" />
<img src="images/diapo_4_2.jpg" width="240" height="171" />
<img src="images/diapo_4_3.jpg" width="240" height="171" />
</div></div><!-- end diaporama -->