$(document).ready(function(){


	//GET THE SLIDER AS AN OBJECT
	var carousel  = $('#carousel-main');

	//CLONE FIRST SLIDE AND APPEND
	var c = $('.carousel-slide:first').clone();
	$('#carousel-main').append(c);	

	//COUNT NUMBER OF SLIDES
	var slideCount = $('.carousel-slide').length;

	//SET WIDTH OF SLIDER DEPENDING ON NUMBER OF SLIDES	
	$(carousel).css('width',slideCount*968 + 'px');

	//ADD THE DOTS
	for (i=0;i<slideCount;i++){
		$('#carousel-controls-main').append('<a href="#slide" class="counter count-'+i+'">'+i+'</a>');
	}

	//SLIDE IT
	$('a.count-0').addClass('active');
	var t;
	i=0;
	t=setInterval(function(){
		var carouselPos = $(carousel).position();
		var leftPos = carouselPos.left;
		
		$(carousel).animate({
			left: leftPos - 968 + 'px',
			duration: 100000
		});
		i++;
//		console.log(i);
		$('a.counter').removeClass('active');
		$('a.count-'+i).addClass('active');
		
		var a = $('.counter:last');
		
		
		if($(a).hasClass('active')){
			setTimeout(function(){
				$(carousel).css('left','0');
				$('a.counter:first').addClass('active');
				i=0;
			},500);
		}	
	},20000);

	//CLICK COUNTERS 
	$('a.counter').click(function(){
		clearInterval(t);
		var a = $(this).text();
		$('a.counter').removeClass('active');
		$(this).addClass('active');
		$('#carousel-main').animate({
			left:  - a * 968 + 'px'
		});
	});
	

});