function updatePosMarker(car, state) {
    if (state != 'init') {
        var link = $('#more-detail');
        var pos = parseInt(link.data('carpos'));

        if (state == 'next') { pos++; } else { pos--; }
        var item = car.get(pos);
        item.children('a').each(function(e) { link.attr('href', $(this).attr('href')); });

        if (pos == car.options.size && car.timer != null) {
            pos = 0;
        }

        link.data('carpos', pos);
    }
}

function initCar(car, state) {

    car.buttonNext.bind('click', function() {
        car.startAuto(0);
    });

    car.buttonPrev.bind('click', function() {
        car.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    car.clip.hover(function() {
        car.stopAuto();
    }, function() {
        car.startAuto();
    });


    $('.jc-skin-mini .jc-container-horizontal').after('<a id="more-detail">Click for More Detail</a>');
    $('#more-detail').data('carpos', 1);

    $('#more-detail').hover(function() {
        car.stopAuto();
    }, function() {
        car.startAuto();
    });
}

$(document).ready(function() {
    $('#mini-carousel').jcarousel({ scroll: 1, auto: 5, wrap: 'last', initCallback: initCar, itemLoadCallback: updatePosMarker });
    $('#more-detail').attr('href', $('#mini-carousel li:first a').attr('href'));
    $('#work-curtain').fadeOut();
});