function mycarousel_initCallback(carousel, state)
{
    // Lock until all items are loaded. That prevents jCarousel from
    // setup correctly and we have to do that in the ajax callback
    // function with carousel.setup().
    // We're doing that because we don't know the exact height of each
    // items until they are added to the list.
    carousel.lock();

    $(".jcarousel-clip-vertical").addClass('loading');

    $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=provu_uk&count=4&include_entities=true&callback=?', function(data){
        $.each(data, function(index, item) {
            carousel.add(index+1, twitter_getItemHTML(item));
        });

        carousel.size(data.length);

        // Unlock and setup.
        carousel.unlock();
        carousel.setup();

        $(".jcarousel-clip-vertical").removeClass('loading');
    });
}

function twitter_getItemHTML(item)
{
    created_at = new Date(item.created_at);
    months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    for (i in item.entities.urls) {
        u = item.entities.urls[i];
        item.text = item.text.replace(u.url, '<a href="' + u.url + '">' + u.display_url + '</a>');
    }

    return '<p><strong class="at">' + created_at.getDate() + ' ' + months[created_at.getMonth()] + ':</strong>&nbsp;' + item.text + '</p>';
}


$(document).ready(function() {
    $(".nojs").remove();

    $('#twitter ul').jcarousel({
        vertical: true,
        auto: 4,
        scroll: 1,
        wrap: 'circular',
        animation: 'normal',
        easing: 'linear',
        initCallback: mycarousel_initCallback,
        itemVisibleOutCallback: {
            onAfterAnimation: function (carousel, item, i, state) {
                carousel.add(parseInt($("#twitter li:last").attr('jcarouselindex'))+1, carousel.get(i).html());
                carousel.remove(i);
            }
        },
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

});