var mycarousel_itemList = [
    {url: "/images/client_johnlewis.gif", title: ""},
	{url: "/images/client_loreal.gif", title: ""},
	{url: "/images/client_debenhams.gif", title: ""},
	{url: "/images/client_gucci.gif", title: ""},
	{url: "/images/client_chanel.gif", title: ""},
	{url: "/images/client_dunhill.gif", title: ""},
	{url: "/images/client_hugoboss.gif", title: ""},
	{url: "/images/client_ck.gif", title: ""},
	{url: "/images/client_gillette.gif", title: ""},
	{url: "/images/client_cartier.gif", title: ""},
	{url: "/images/client_clairol.gif", title: ""},
	{url: "/images/client_maxfactor.gif", title: ""},
	{url: "/images/client_boots.gif", title: ""},
	{url: "/images/client_pandg.gif", title: ""},
	{url: "/images/client_headshoulders.gif", title: ""},
	{url: "/images/client_pantene.gif", title: ""},
	{url: "/images/client_superdrug.gif", title: ""},
	{url: "/images/client_lacoste.gif", title: ""},
	{url: "/images/client_coty.gif", title: ""},
	{url: "/images/client_natural.gif", title: ""},
	{url: "/images/client_freeze.gif", title: ""},
	{url: "/images/client_olay.gif", title: ""}
];

function mycarousel_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, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};


/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" height="72" alt="' + item.title + '" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        auto: 3,
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});