function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
	var myElement = '';
	myElement += '<div class="recommBoxInner" style="background-image: url('+item.img+'); background-position: left top; background-repeat: no-repeat;">';
	myElement += '<a title="'+item.title+'" href="'+item.url+'">';
	if(item.newLogo=='') {
		myElement += '<img alt="'+item.title+'" width="120" height="120" border="0" title="" src="'+item.host+'/t.gif" />';
	}
	if(item.newLogo=='neu_ambi_mini.gif') {
		myElement += '<img src="'+item.host+'/neu_ambi_mini.gif" width="24" height="16" alt="Neu f&uuml;r Sie entdeckt" /><br />';
		myElement += '<img alt="'+item.title+'" width="120" height="104" border="0" title="" src="'+item.host+'/t.gif" />';
	}
	if(item.newLogo=='new_img_articlelist_gp_klein.gif') {
		myElement += '<img src="'+item.host+'/new_img_articlelist_gp_klein.gif" width="25" height="29" alt="Neu bei mir" /><br />';
		myElement += '<img alt="'+item.title+'" width="120" height="91" border="0" title="" src="'+item.host+'/t.gif" />';
	}
	myElement += '</a>';
	myElement += '</div>';
	myElement += '<p class="recommBoxLink"><a href="'+item.url+'">'+item.name+'</a></p>';
	myElement += '<p class="recommBoxPrice">';
	var priceClass = 'normal';
	if (item.priceOld) {
		priceClass = 'discount';
		myElement += '<span class="priceOld">'+item.cur+'&nbsp;'+item.priceOld+'</span>&nbsp;&nbsp;';
	}
	myElement += '<span>nur</span>&nbsp;<span class='+priceClass+'>'+item.cur+'&nbsp;'+item.price+'</span></p>';
			
    return myElement;
};

jQuery(document).ready(function() {
    jQuery('#recomm').jcarousel({
		scroll: 3,
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});

