$(document).ready(function() 
{
	$('body').addClass('hasJS');
	
	$('#box1').carousel();
	$('#box2').carousel();
});

$.fn.carousel = function () { 
	
	var place = $(this)
	var total = $(this).find('dt').length;
	var codePagination = $('<a href="#" class="prev">Previous</a><div class="pagination"><ul></ul><strong><em class="currPage">1</em> / <em class="totalNr">' + total + '</em></strong></div><a href="#" class="next">Next</a>');
	var code = '';
	
	$(this).find('dt:not(:first), dd:not(:first)').hide();
	var index = 0;
	
	for (i=0; i<total; i++)
	{
		
		code += '<li><a href="#">' + (i+1) +'</a></li>'; 
	}

	$(codePagination).find('ul').append(code).find('a:first').addClass('active').end().end().prependTo(this);
	
	$('.prev', this).click(function(){
		index--;
		if (index == -1) { index = total-1 };
		console.log(index);
		changeSlide(index);
		return false;
	})
	
	$('.next', this).click(function(){
		index++;
		if (index == total) { index = 0 };
		changeSlide(index);
		return false;
	})
	
	$('.pagination a', this).click(function(){
		var Index = $('a',place).index(this) -1 ;
		if (Index == index ) return false;
		index = Index
		changeSlide(index);
		return false;
	})
	
	
	
	 function changeSlide(index) {
		$('dt', place).fadeOut();
		$('.pagination a', place).removeClass('active');
		
		$('dt', place).fadeOut();
		$(place).find('dt').eq(index).fadeIn();
		
		if ($('dd', place).length > 1 ) {
			$('dd', place).fadeOut();
			$(place).find('dd').eq(index).fadeIn();
		}
		$(place).find('.pagination a').eq(index).addClass('active');
		$('.currPage').text(index+1);
		
		
	}

}