var mycarousel_itemList = [
{ url: "/produit?marque=81&id=17310", link: "http://images-web.elynes.fr/produits/LBL090.gif", alt: "Loft 90 Labrieyre", nom: "Loft 90 Labrieyre\n ", title: "Loft 90 Labrieyre-LBL090" },
{ url: "/produit?marque=81&id=18090", link: "http://images-web.elynes.fr/produits/Cottage_80.jpg", alt: "Cottage 80", nom: "Cottage 80\n ", title: "Cottage 80-COT80" },
{ url: "/produit?marque=43&id=18074", link: "http://images-web.elynes.fr/produits/AgaTotalControl5.jpg", alt: "Aga Total Control", nom: "Aga Total Control\n ", title: "Aga Total Control-AgaTotalControl" }];

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 '<a href="' + item.url + '" style="text-decoration: none; font-size: 50%;"><div style="height: 90px;"><img alt="' + item.alt + '" title="' + item.title + '" src="' + item.link + '" style="width: 90px;max-height:90px; "/></div><b>' + item.nom + '</b></a>';
};

$(document).ready(function() {
    $('#mycarousel').jcarousel({
        scroll: 2,
		visible : 2,
		wrap: 'circular',
		animation: 2000,
		auto: 10,
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});