function mycarousel_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.get(
        'http://ronald.local/blaauwhof.nl/HTML/js/jsor-jcarousel-9f65793/examples/dynamic_ajax_php.php',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
   return '<h4>Amsterdam</h4><h5>Amsterdam West </h5><a href="http://ronald.local/blaauwhof.nl/HTML/detail/id/D0124EEF46164A2992043C9D8D8A8436.html"><img src="http://storage.propertynl.com/storage/A5F448D135774DB5AC4BE58A0608C033/D0124EEF46164A2992043C9D8D8A8436/Web/2D49DE6305644CC986A3AF8B4C988DB9.jpg" height="102" /></a> <a class="float"> Kantoor </a> <a class="float"> Bedrijfsruimte </a>';
   
    //return '<img src="' + url + '" width="75" height="75" alt="" />';
};

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

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

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

$(function() {
	
	/* ajax called */
	/*
    $('#slidebox')
    .jcarousel({
    	//rtl:		true,
    	//size:		5,
    	//visible:	5,
    	//scroll:		5,
		itemVisibleOutCallback: {
			onAfterAnimation: function(carousel, item, i, state, evt) {
				
				carousel.remove(i); 
				
		}},
        itemLoadCallback: mycarousel_itemLoadCallback
    });
    */
    
	$('#slidebox')
    .jcarousel({
    	auto: 3,
    	animation: 'slow',
    	scroll:	5,
		wrap:	'circular',
		initCallback: mycarousel_initCallback
	});
    
});