function loadItemHandler( carousel, start, last, available ) {
	if( available ) {
		// Trigger loaded
		carousel.loaded();
		return;
	}
    
	
	$('.lin').click(function(){   // change #lin to .lin and use classes
	    loadItems( $(this).attr('cid') );
	});
	loadItems() ;
	
	
    function loadItems( cid2 ) {
        var url2 = 'components/com_creme/creme.ajax.php';

		cid=cid2;
        
        if( cid ) {
           url2 = url2 + '?cid=' + cid2;		   
        }

		//alert(cid)
    
        jQuery.get(url2, function(data) {
            appendItemCallback( carousel, start, last, data );
			carousel.init();
        });
    }
}



function appendItemCallback(carousel, start, last, data)
{
    var items = data.split("|");	

    for (i = start; i <= last; i++) {
        if (items[i-1] == undefined) {
            break;
        }

        var item = carousel.add(i, getItemHTML(items[i-1]));

        item.each(function() {
            // Urgh...ThickBox should provide a function for that
            jQuery("a.thickbox", this).bind("click", function() {
                var t = this.title || this.name || null;
                var g = this.rel || false;
                TB_show(t,this.href,g);
                this.blur();
                return false;
            });
        });
    }

    // Trigger loaded
    carousel.loaded();
};

function getItemHTML(data)
{
    var split = data.split(";");
    var url   = jQuery.trim(split[0]);
    var title = jQuery.trim(split[1]);
	var desc = jQuery.trim(split[2]);
    var url_m = url.replace(/_s.jpg/g, '_m.jpg');

    return '<a href="' + url_m + '" title="' + title + '" class="thickbox"><img src="' + url + '" alt="' + title + '" /></a>'+title+'<br />'+desc;
};

// Next-Button handling...
var nextOver = function() {
    jQuery(this).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/next-over.gif");
};

var nextOut = function() {
    jQuery(this).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/next.gif");
};

var nextDown = function() {
    jQuery(this).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/next-down.gif");
};

function nextButtonStateHandler(carousel, button, enabling)
{
    if (enabling) {
        jQuery(button).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/next.gif")
                      .bind("mouseover", nextOver)
                      .bind("mouseout", nextOut)
                      .bind("mousedown", nextDown);
    } else {
        jQuery(button).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/next-disabled.gif")
                      .unbind("unmouseover", nextOver)
                      .unbind("unmouseout", nextOut)
                      .unbind("unmousedown", nextDown);
    }
}

// Prev-Button handling
var prevOver = function() {
    jQuery(this).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/prev-over.gif");
};

var prevOut = function() {
    jQuery(this).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/prev.gif");
};

var prevDown = function() {
    jQuery(this).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/prev-down.gif");
};

function prevButtonStateHandler(carousel, button, enabling)
{
    if (enabling) {
        jQuery(button).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/prev.gif")
                      .bind("mouseover", prevOver)
                      .bind("mouseout", prevOut)
                      .bind("mousedown", prevDown);
    } else {
        jQuery(button).attr("src", "components/com_creme/images/jcarousel/horizontal-ie7/prev-disabled.gif")
                      .unbind("unmouseover", prevOver)
                      .unbind("unmouseout", prevOut)
                      .unbind("unmousedown", prevDown);
    }
}

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered before animation.
 */
function itemVisibleInHandlerBeforeAnimation(carousel, li, idx, state) {
    // No animation on first load of the carousel
    if (state == "init")
        return;

    jQuery("img", li).hide();
    jQuery("img", li).show("slow");
}

// Ride the carousel...
jQuery(document).ready(function() {
    /**
     * We show a simple loading indicator
     * using the jQuery ajax events
     */



    jQuery().ajaxStart(function() {
        jQuery(".loading").show();
    });

    jQuery().ajaxStop(function() {
        jQuery(".loading").hide();
    });

	/*jQuery("#mycarousel").jcarousel({
        itemScroll: 1,
scrollAnimation: "slow",

itemVisibleInHandler: {onBeforeAnimation: itemVisibleInHandlerBeforeAnimation, onAfterAnimation: itemVisibleInHandlerAfterAnimation},
itemVisibleOutHandler: {onBeforeAnimation: itemVisibleOutHandlerBeforeAnimation, onAfterAnimation: itemVisibleOutHandlerAfterAnimation},
    });*/

	

	
/**/

    jQuery("#mycarousel").jcarousel({
        itemVisible: 2,
        itemScroll: 2,
        wrap: true,
        loadItemHandler: loadItemHandler,
        nextButtonStateHandler: nextButtonStateHandler,
        prevButtonStateHandler: prevButtonStateHandler
    });


});