// JavaScript Document

/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
 
function mycarousel_initCallback(carousel) {
	 // Disable autoscrolling if the user clicks the prev or next button.
     $('.jcarousel-control a').bind('click', function() {
        carousel.startAuto(0);
    });
	

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });


    $('.jcarousel-control a').bind('click', function() {
        carousel.scroll($.jcarousel.intval($(this).text()));
		$("[class^=jcarousel-button]").removeClass("selected");
		return false;
    });

    $('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = $.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });

   
};
function highlight_box(carousel,html,int){
	$("[class^=jcarousel-button]").removeClass("selected");
	$(".jcarousel-button-"+int).addClass("selected");
}

// Ride the carousel...
$(document).ready(function() {

    $("#mycarousel").jcarousel({
        scroll: 1,
		auto: 4,
		wrap: 'last',
        initCallback: mycarousel_initCallback,
		itemVisibleInCallback:highlight_box,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	
});