function mycarousel_initCallback(carousel) {
    jQuery('#screenshot-control li a').bind('click', function() {
        var carouselItem = jQuery.jcarousel.intval(jQuery(this).text());		
		carousel.scroll(carouselItem);
		carousel.startAuto(0);		
		return false;
    });
};

/*jQuery(document).ready(function() {
	$('.screenshot').click(function () { 
			var carouselItem = jQuery.jcarousel.intval(jQuery(this).text());
			var selectedItem = ".image" + carouselItem;						 
									 
		  $('.screenshot').css("background-image","url(images/bubble_deselected.gif)");
		  
		  //$(selectedItem).css("background-image","url(images/bubble_selected.gif)");
		  
	});
});*/


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]));
    
    idx--;
    $("#screenshot-control li:eq("+idx+")").addClass("active");
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
    var idx = carousel.index(i, mycarousel_itemList.length);
	idx--;
    $("#screenshot-control li:eq("+idx+")").removeClass("active");
};


/* Item html creation helper. */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="346" height="231" alt="' + item.title + '" />';
};

jQuery(document).ready(function() {
    jQuery('#screenshots').jcarousel({
		auto: 3,
		scroll: 1,
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
		initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});