// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {

	/*
// initialize scrollable together with the autoscroll plugin
var root = $("#subfeature").scrollable({circular: true}).navigator().autoscroll({ steps:1, autoplay: false });

// provide scrollable API for the action buttons
window.api = root.data("scrollable");
*/
/*
	var size = 0;
	children = $("#thumbs").children();
	items = children.length;
	numButtons = Math.round(items/3);
	
	for (x=0; x<numButtons; x++) {
		$("#navButtons").append("<a href='#'></a>");
	}
	*/
	$('#thumbs').jcarousel({
		wrap: 'circular',
		scroll:1,
		auto:4,
	    buttonNextHTML: null,
        buttonPrevHTML: null,
        itemLoadCallback: {
			onBeforeAnimation: function() {
			},
			onAfterAnimation: function() {
			}
		},
		itemVisibleInCallback: {
			onBeforeAnimation: function(items) {
			},
			onAfterAnimation: function() {}
			}		
	});
	var carousel = jQuery('#thumbs').data('jcarousel');

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
	
	$('.next').bind('click', function() {
        carousel.next();
        carousel.startAuto(0);
        return false;
    });

    $('.prev').bind('click', function() {
        carousel.prev();
        carousel.startAuto(0);
        return false;
    });	
	
});