[jQuery] JCarousel Circular - Start Over Problem

[jQuery] JCarousel Circular - Start Over Problem


I have a page with one JCarousel on it.
I need to be able to switch between different data sources for the
single display carousel.
I have it almost working - however when I execute... it loops around
to the default start state and doesn't keep the new data on
display....it blinks past though.
I really need some help.
Here is the code;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Cirle</title>
<!-- JQUERY -->
<script type="text/javascript" src="http://jquery.com/src/jquery-
latest.js"></script>
<script type="text/javascript" src="scripts/jquery.jcarousel.js"></
script>
<link rel="stylesheet" type="text/css" href="css/
jquery.jcarousel.css">
<link type="text/css" rel="stylesheet" href="css/carousel.css" />
<script type="text/javascript">
var carousel1_itemList = [
{url: 'images/thumbs/caterpillar.jpg', title: 'The Very Hungry
Caterpillar', Auth: 'Eric Carle', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/peppers.jpg', title: 'Sgt. Peppers Lonely
Hearts Club Band', Auth: 'Beatles', formaturl:'images/formats/
musiconcd.gif', format:'CD'},
{url: 'images/thumbs/postal.jpg', title: 'Going Postal', Auth:
'Terry Pratchett', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/blank.jpg', title: 'Little Women', Auth:
'Louisa may Alcott', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/potter.jpg', title: 'Harry Potter', Auth: 'JK
Rowling', formaturl:'images/formats/DVD.gif', format:'DVD'},
{url: 'images/thumbs/rivals.jpg', title: 'Team of Rivals', Auth:
'Doris Kearns Goodwin', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/rockband.jpg', title: 'Rock Band', Auth:
'Electronic Arts', formaturl:'images/formats/videogame.gif',
format:'Video Game'},
{url: 'images/thumbs/stats.jpg', title: 'Business Stats', Auth:
'Leonard J Kazmier...', formaturl:'images/formats/book.gif',
format:'book'},
];
var carousel2_itemList = [
    {url: 'images/thumbs/blank.jpg', title: '222 Little Women', Auth:
'Louisa may Alcott', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/potter.jpg', title: '222 Harry Potter', Auth:
'JK Rowling', formaturl:'images/formats/DVD.gif', format:'DVD'},
{url: 'images/thumbs/rivals.jpg', title: '222 Team of Rivals',
Auth: 'Doris Kearns Goodwin', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/rockband.jpg', title: '222 Rock Band', Auth:
'Electronic Arts', formaturl:'images/formats/videogame.gif',
format:'Video Game'},
{url: 'images/thumbs/stats.jpg', title: '222 Business Stats',
Auth: 'Leonard J Kazmier...', formaturl:'images/formats/book.gif',
format:'book'},
    {url: 'images/thumbs/caterpillar.jpg', title: '222 The Very Hungry
Caterpillar', Auth: 'Eric Carle', formaturl:'images/formats/book.gif',
format:'book'},
{url: 'images/thumbs/peppers.jpg', title: ' 222 Sgt. Peppers
Lonely Hearts Club Band', Auth: 'Beatles', formaturl:'images/formats/
musiconcd.gif', format:'CD'},
{url: 'images/thumbs/postal.jpg', title: '222 Going Postal', Auth:
'Terry Pratchett', formaturl:'images/formats/book.gif',
format:'book'},
];
//var carousel_itemList;
function carousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
// The index() method calculates the index from a
// given index who is out of the actual item range.
var idx = carousel.index(i, carousel_itemList.length);
carousel.add(i, carousel_getItemHTML(carousel_itemList[idx - 1]));
};
function carousel_itemVisibleOutCallback(carousel, item, i, state,
evt)
{
carousel.remove(i);
};
/**
* Item html creation helper.
*/
function carousel_getItemHTML(item)
{
return '<div class="relatedWork-item"><a href=""><img src="' +
item.url + '" alt="' + item.title + '" /></a><h5 class="relatedWork-
Title"><a href="">' + item.title + '</a></h5> <h5 class="relatedWork-
Auth">by '+ item.Auth + '</h5> <h5 class="relatedWork-Form"><img
src="' + item.formaturl + '"/>'+ item.format +'</h5> </div>';
};
function drawCarousel(source){
//alert(source);
if (source == '1') {
    carousel_itemList = carousel1_itemList;
}
else
    carousel_itemList = carousel2_itemList;
    jQuery('#carousel1').jcarousel({
        visible:4,
        scroll:2,
wrap: 'circular',
itemVisibleInCallback: {onBeforeAnimation:
carousel_itemVisibleInCallback},
itemVisibleOutCallback: {onAfterAnimation:
carousel_itemVisibleOutCallback},
});
}
jQuery(document).ready(function() {
    drawCarousel('1');
    $('#carousel1-on').click(function(event) {
            drawCarousel('1');
        });
    $('#carousel2-on').click(function(event) {
            drawCarousel('2');
        });
});
</script>
</head>
<body>
<a href="" id="carousel1-on">Carousel 1</a> &nbsp;&nbsp;
<a href="" id="carousel2-on">Carousel 2</a>
<div class="jcarousel-skin-tango">
    <ul id="carousel1">
    </ul>
</div>
</body>
</html>