/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {

    var allElements = $(".jcarousel-control a").length;
	
	$('.image_over.vol').hover(function(){
		$(".cover", this).stop().animate({top:'395px'},{queue:false,duration:500});
	}, function() {
		$(".cover", this).stop().animate({top:'495px'},{queue:false,duration:500});
	});

	jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        carousel.startAuto(0);
    	return false;
    });

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


    jQuery('.jcarousel-next').bind('click', function() {
        carousel.next()
		
        // Disable autoscrolling if the user clicks the prev or next button.
		carousel.startAuto(0);       
		return false;
    });

    jQuery('.jcarousel-prev').bind('click', function() {
        carousel.prev();
   
        // Disable autoscrolling if the user clicks the prev or next button.
		carousel.startAuto(0);		
        return false;
    });
	
	// Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};



function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
};

function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
	var id = $(item).children('.image_over').attr('id');
	
	$('a#numb_' + id).css({
		'background-position' : '0 0px',
		'color' : '#000000'
	});
};




function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
	if (state == 'init')
        return;

	var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-horizontal';
    $('.jcarousel-next').attr('disabled', 'true').addClass(next_class);
	
	var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-horizontal';
    $('.jcarousel-prev').attr('disabled', 'true').addClass(prev_class);
   	
};


function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
	var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-horizontal';
	$('.jcarousel-next').attr('disabled', 'false').removeClass(next_class);
	
	var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-horizontal';
    $('.jcarousel-prev').attr('disabled', 'false').removeClass(prev_class);
	
    var id = $(item).children('.image_over').attr('id');

	$('a#numb_' + id).css({
		'background-position' : '0 -34px',
		'color' : '#ffffff'
	});
};



// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
		scroll: 1,
		wrap: 'circular',
		easing:'linear',
		auto:'4',
        initCallback: mycarousel_initCallback,
		itemVisibleInCallback: {
            onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        },
		itemVisibleOutCallback: {
            onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleOutCallbackAfterAnimation
        }
    });
	
    
});