(function () {
    $.fn.infiniteCarousel = function (nbrImg) {
        function repeat(str, n) {
            return new Array( n ).join(str);
        }

        return this.each(function () {
            // magic!
            var wrapper = $('> div', this).css('overflow', 'hidden');
			slider = wrapper.find('> ul').width(9999);
			items = slider.find('> li');
			single = items.filter(':first');
			singleWidth = single.outerWidth();
			singleHeight = single.outerHeight();
			visible = Math.ceil(wrapper.innerWidth() / singleWidth);
			currentPage = 1;
			pagesAll = items.length
			
            /* TASKS */
            // 1. pad the pages with empty element if required
            if (items.length % visible != 0) {
                slider.append(repeat('<li class="empty" />', visible - (items.length % visible)));
                items = slider.find('> li');
            }

            // 2. create the carousel padding on left and right (cloned)
			
			var visibleNeg = -visible;
			items.filter(':first').before(items.slice(visibleNeg).clone());
			items.filter(':last').after(items.slice(0, visible).clone());
			items = slider.find('> li');
			
            // 3. reset scroll
            wrapper.scrollLeft(singleWidth * visible);
            // 4. paging function
            function gotoPage(page) {
				$('.carouselActive').removeClass('carouselActive');
                activeBouton.addClass('carouselActive');
				var actual = activeBouton; 
				var deb=new Array();
				for(k=1;k<=(visible-1);k++){
					deb[k-1] = k;
					
				}
				var lenDeb = deb.length
				for(k=0;k<lenDeb;k++){
					var elNext = actual.next('a');
					if(!elNext.attr('class')){
						var nB = deb.shift(); 
						var elId = '#'+nB;
						elNext = $(elId)
					}
					elNext.addClass('carouselActive');	
					actual = elNext
				}
                items.children('p').css('margin-top', singleHeight);
				var hText = items.children('p').outerHeight();
                var dir = page < currentPage ? -1 : 1,
				n = Math.abs(currentPage - page),
				left = singleWidth * dir  * n;
				
				items.children('p').animate({
					marginTop: (singleHeight-hText)
					}, 1000);
					
                wrapper.filter(':not(:animated)').animate({
						scrollLeft : '+=' + left
					}, 1000, function () {
                    // if page == last page - then reset position
                    if (page > pagesAll) {wrapper.scrollLeft(singleWidth * visible);
                        page = 1;
                    } 
					currentPage = page;
                });
            }

            $('a.tryg').click(function () {
				$().stop();
                activeBouton = $(this)
				autoscrolling = false;
                var p = $(this).attr('id');
                //currentPage -= page;
                gotoPage(p);
                return false;
            });

            $(this).bind('goto', function (event, page) {
                gotoPage(page);
            });

            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next', function () {
				//alert(currentPage)
			    var tmp = parseInt(currentPage);
				var activePageId = '#'+(tmp+1);
				
                activeBouton = $(activePageId);
				//alert($(activePageId))
				//$('#pagenr').html(activePageId + '-'+ typeof $(activePageId).attr('class'))
				if(!$(activePageId).attr('class')){
					//alert(typeof activeBouton)
					activeBouton = $('#1');
					//tmp = 0
				}
                gotoPage(tmp + 1);
            });
        });
    };
})(jQuery);

$(document).ready(function () {

	//bouttons
	var items = $('.wrapper ul').children('li');
	var nbrImg = items.length;
	var wrapper = $('.wrapper');
	var single = wrapper.find('> ul').find('> li').filter(':first');
	var singleWidth = single.outerWidth();
	var visibleImg = Math.ceil(wrapper.innerWidth() / singleWidth);
	var lien = '';
	for(i=1;i<=nbrImg;i++){
		if(i<=visibleImg)
			lien = '<a href="#" class="tryg carouselActive" id="'+i+'">'+i+'</a>';
		else
			lien = '<a href="#" class="tryg" id="'+i+'">'+i+'</a>';
		$('.barre_carousel').append(lien);
	}
    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
    var autoscrolling = true;
	var activeBouton = null;
    $('.infiniteCarousel').infiniteCarousel(nbrImg).mouseover(function () {
        autoscrolling = false;
    }).mouseout(function () {
        autoscrolling = true;
    });
    setInterval(function () {
        if (autoscrolling) {
            $('.infiniteCarousel').trigger('next');
        }
    }, 6500);
});