function mycarousel_itemLoadCallback(carousel, state){
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }
    $.ajax({
        type: "GET",
        /**
        * You must reference the relevant XML file
        */
        url: "/broughttolife/settings/techniques/carousel.aspx",
        dataType:"xml",
        success: function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        error: function(error) { alert("error"); }
    });
};
function mycarousel_itemAddCallback(carousel, first, last, xml){
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));
	
	$(xml).find("item").each(function(i) {
		var item = $(this);
		var imageUrl = item.children("image").text();
		var title = item.children("title").text();
		var link = item.children("link").text();
		var theId = 'item-image-'+i;
		var width = item.children("width").text();
		var height = item.children("height").text();		
		
		carousel.add(first + i, mycarousel_getItemHTML(imageUrl, title, theId, link, width, height));

		$('#'+theId).hide().load(function() {
			$('#item-image-'+i).fadeIn('fast');
		});
	});
};
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url, title, id, link, width, height){
	return '<div class="tandt-img-holder"><img src="' + url + '" width="'+width+'" height="'+height+'"  alt="'+title+'"  id="'+id+'" /></div><h3>'+title+'</h3><p><a href="'+link+'" title="Find out more about '+title+'">Find out more</a></p>';
};

jQuery(document).ready(function() {

    jQuery('#tandt-carousel').jcarousel({
		scroll: 4,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});