$(document).ready(function() {
    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]));
        $("#mycarousel img").click(function() {
            $(".fullImage img").attr("src", $(this).attr("src"));
        })
    };

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

    /**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
        if (item.url != null) {
            return '<a><img src="' + item.url + '" width="73" height="55"/></a>';
        }
    };

    if (window.mycarousel_itemList && mycarousel_itemList.length > 0) {
        jQuery('#mycarousel').jcarousel({
            wrap: 'circular',
            itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallback },
            itemVisibleOutCallback: { onAfterAnimation: mycarousel_itemVisibleOutCallback }
        });

        $("#mycarousel img").click(function() {
            $(".fullImage img").attr("src", $(this).attr("src"));
        })

        if (mycarousel_itemList.length > 0) {
            $(".fullImage img").attr("src", mycarousel_itemList[0].url);
        }
    }
});