$('document').ready(function() {

        // Frontpage: carousel
        $("#juin-carousel").jcarousel({
            scroll: 1,
            //auto: 10,
            visible: 1,
            wrap: 'both',
            animation: 'slow',
            buttonNextHTML: null,
            buttonPrevHTML: null,
            itemFirstInCallback: function (carousel, item, index, state) {
                var $spans = $('.carousel-navbar').find('a');
                $spans.removeClass('active');
                $spans.eq(index -1).addClass('active');
            },
            initCallback: function (carousel) {
                var i,
                    active,
                    navbar,
                    $navbar,
                    $pausebar,
                    $startbar;

               carousel.pause = function() {
                  //alert('pause');
                  carousel.paused = true;
                  carousel.stopAuto();
                  $('div.carousel-startbar').show();
                  $('div.carousel-pausebar').hide();
                };  
                carousel.play = function() {
                  //alert('play');
                  carousel.paused = false;
                  carousel.startAuto(); 
                  $('div.carousel-startbar').hide();
                  $('div.carousel-pausebar').show();
                };  
  
                  
                // build controlbar 
                pausebar = '<div class="carousel-pausebar">';  
                pausebar += '<a href="javascript:void(0)" id="car_pause">Stop</a>';  
                pausebar += '</div>';  
                //$(pausebar).appendTo('#juin-carousel').click(function (event) {
                //        carousel.pause();
                //});
                startbar = '<div class="carousel-startbar">';  
                startbar += '<a href="javascript:void(0)" id="car_play"><span lang="en">Play</span></a>';  
                startbar += '</div>';  
                $(startbar).appendTo('#juin-carousel').click(function (event) {
                        carousel.play();
                });
                
                $('div.carousel-startbar').hide();
                 
              
                 
                // build navigation
                navbar = '<div class="carousel-navbar">';
                for (i = 0; i < carousel.size();) {
                    navbar += '<a href="javascript:void(0)">' + ++i + '</a>';
                }
                
                //bei einem bild keine navbar
                if (carousel.size() > 1) {      
	                $(navbar + '</div>').appendTo('#juin-carousel').click(function (event) {
	                    var $tgt = $(event.target);
	                    if ($tgt.is('a')) {
	                        // jump
	                        carousel.scroll($(this).children().index($tgt.get(0)) + 1);
	                      
	                    }
	                });
        	}
           }
        });

});