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]));
	carousel.startAuto();
};

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

function mycarousel_initCallback(carousel)
{
    // Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.mousemove(function(e) {
		var os = $(this).offset();
		var x = e.pageX - os.left;
		var y = e.pageY - os.top;
		if (x < 250) {
			carousel.prev();
			carousel.animating=true;
			carousel.options.direction='backward';
			carousel.startAuto();
			carousel.unlock();
		}
		else if (x > 698 - 250) {
			carousel.next();
			carousel.animating=true;
			carousel.options.direction='forward';
			carousel.startAuto();
			carousel.unlock();
		}
		else {
			carousel.lock();
			carousel.animating=false;
			carousel.stopAuto();
			carousel.list.stop();
			carousel.unlock();
		}
    });
    carousel.clip.hover(function(e) {
		var os = $(this).offset();
		var x = e.pageX - os.left;
		var y = e.pageY - os.top;
		carousel.lock();
		carousel.animating=false;
		carousel.stopAuto();
		carousel.list.stop();
		carousel.unlock();
		if (x < 250) {
			carousel.prev();
			carousel.animating=true;
			carousel.options.direction='backward';
			carousel.startAuto();
			carousel.unlock();
		}
		else if (x > 698 - 250) {
			carousel.next();
			carousel.animating=true;
			carousel.options.direction='forward';
			carousel.startAuto();
			carousel.unlock();
		}
		else {
		}
    }, function() {
    	carousel.lock();
        carousel.startAuto();
    	carousel.unlock();
    });
};


/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<a href="' + item.href +'"><img src="' + item.src + '" width="235" height="100" border="0" alt="' + item.title + '" /></a>';
};

jQuery(document).ready(function() {
	for (i=0; i<mycarousel_itemList.length; i++) {
		jQuery('#mycarousel').append('<li>'+mycarousel_getItemHTML(mycarousel_itemList[i])+'</li>');	
	}
    jQuery('#mycarousel').jcarousel({
        auto: 1,
		size: 3,
        wrap: 'circular',
		scroll: 1,
		animation: 5000,
		easing: 'linear',
		buttonNextHTML: null, //'<div></div>',
		buttonPrevHTML: null, //'<div></div>',
		//buttonNextEvent: 'mouseover',
		//buttonPrevEvent: 'mouseover',
		initCallback: mycarousel_initCallback,
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});