[jQuery] I need JQuery Cycle and Scrollable Plugins to work together.

[Wil]

I am new to JQuery and I am using JQuery Cycle plugin (http://
www.malsup.com/jquery/cycle/) and Jquery Scrollable (http://
flowplayer.org/tools/scrollable.html) to create an animated slideshow
on the homepage of my website. JQuery Cycle plugin works fine and
Scrollable works also but they don't work together.

What I need is for the Scrollable plugin to start scrolling the div
that the pager is in to the left  when the automated animation for the
pager reaches last number before the right margin of the div that the
pager is in, so as to reveal the next pager number and then continue
to scroll left revealing the next pager number until the pager
animation reaches the last number.  I need the scrollable plugin to
then automatically scroll right to the first pager number when it
reaches the last pager number ready to start again.

Please take a look at http://www.sessomsphotographics.com to see a
working sample .

Right now if you click on the last number that is shown in the pager
the div will scroll left and the pager animation continues without a
problem and when the pager reaches the last pager number it
automaticall wraps to the first number. Its the scrolling and the
pager animtion working together that i can't figure out.

I can't figure out how to have JQuery detect that it needs to start
scroll and  go back to the first pager number when it reaches the last
pager number.

JQuery Code:
---------------------
<script type="text/javascript">
$(document).ready(function() {

$('#slideshow').cycle({
        fx: 'fade',
        timeout: 4000,
        speed: 500,
        delay: -2000,
        pager: '#pager',
        next: '#next',
        prev: '#prev',
        fit: 1
});

$('#playControl').toggle(
                function() {
                        $('#slideshow').cycle('pause');
                        $(this).text('Play');
                },
                function() {
                        $('#slideshow').cycle('resume');
                        $(this).text('Pause');
                });

        $(function() {
        // initialize scrollable
        $("div.scrollable").scrollable({
        size:  13,
        loop: "true"
        });
    });
});
</script>

HTML Code:
---------------------
<div id="slideshow" style="height:auto; min-height:150px; border-top:
1px solid #000; padding-bottom: 20px;" align="center">
<table>
<tr id="controls">
<td align="left" nowrap="nowrap">
<span id="prev" class="control" style="color:#000; ;
cursor:pointer;">Previous</span>  </td>
<td nowrap="nowrap">
<div class="scrollable">
<div class="items" id="pager" style="overflow:hidden; width:600px;
text-align:left"></div>
</div>
</td>
<td nowrap="nowrap">
<span id="next" class="control" style="color:#000; ;
cursor:pointer;">  Next  </span>
<span id="playControl" class="control" style="color:#000;
cursor:pointer;">  Pause</span>
</td>
</tr>
</table>
</div>