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

    jQuery.get(
        '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('slide', xml).each(function(i) {
		carousel.add(first + i, mycarousel_getItemHTML(jQuery(this)));
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(slide)
{
    var string_span = '<p class="img-description">' + slide.find('description').text();
	//http://www.thoughtden.co.uk/a/img/glamour-banner/
    var string_img = '<img class="carousel-image" src="a/img/glamour-banner/' + slide.find('large_image_url').text() + '" width="790" height="420" alt="" />';
     var string = null;
    if(slide.find('source_url').text()){
    	string_span += '<br /><span><a class="view_more" href="' + slide.find('source_url').text() + '">Read more</a></span>';
    }
    string_span += '</p>';
   	string = string_span+string_img;
    return string;
    //return '<img src="http://www.thoughtden.co.uk/a/img/glamour-banner/' + $(slide).find('large_image_url').text() + '" width="790" height="420" alt="" />';
};

jQuery(document).ready(function() {
	//$('#mycarousel .jcarousel-clip .jcarousel-list .jcarousel-item span.img-description').hide();
	//$('div.jcarousel-skin-ie7 div#mycarousel ul.jcarousel-list li.jcarousel-item span.img-description').css('background-color', '#ff0000');
	$('#mycarousel').append($('<ul></ul>'));
    jQuery('#mycarousel').jcarousel({
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.

        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
        scroll: 1,
		auto: 10,
        visible:1,
		animation: 800,
		wrap: 'last',
        itemLoadCallback: mycarousel_itemLoadCallback,
		initCallBack: function(carousel, state){
			$('.img-description').hide();
			//$('.img-description').fadeIn('slow');
				/*if(action != 'init')
				{
					$('.img-description').fadeIn('fast');
				}*/
			},
		itemVisibleInCallback: {
			onBeforeAnimation: function(carousel, li, index, action) {
				//alert('action: ' + action)
				//var i = carousel.index(2);
				//alert(i)
				//if action is next or previous
				//the current index should have a fadeout for the  image description 
				$('.img-description').hide();
				if(action == 'init')
				{
					//$('.img-description').fadeIn('fast');
				}
				 else {
					//alert(carousel + ' ' + li + ' ' + index + ' ' + action);
					$('.img-description').fadeOut(800);
				}
				
			},
			onAfterAnimation: function(carousel, li, index, action) {
				//if previous and index != 0
				//the previous one as a fadeIn event for the image description
				
				if ((action == 'prev') && (index != 0)){
					$('.img-description').fadeIn('fast');
				}
				else if((action == 'next') && (index != carousel.size)){
					$('.img-description').fadeIn('fast');
				}
			}
		}
    });
	$('<canvas id="btn-left" width="50" height="30"><img id="btn-prev" src="a/img/jcarousel/btn-prev.png" /></canvas>').appendTo('.jcarousel-prev-horizontal');
	$('<canvas id="btn-right" width="50" height="30"><img id="btn-next" src="a/img/jcarousel/btn-next.png" /></canvas>').appendTo('.jcarousel-next-horizontal');
});