$(function(){
	var cur_index=0;
	var $containers = $('.cr-contentarea');
	var total_boxes = $containers.length;
	var openedBox = $containers[0];
	var timer;
	
	$containers.not(':first').hide();
	$('.outof').html('1/' + total_boxes);
	
	var next = function(){ 
		if(cur_index < total_boxes-1) cur_index++;
		else cur_index=0;
	}
	
	var prev = function(){ 
		if(cur_index > 0) cur_index--;
		else cur_index = 0;
	}
	
	var animation = function(){
		var curBox = $containers[cur_index];
		if(openedBox != curBox){
			$(openedBox).fadeOut(500); $(curBox).fadeIn(500);
			openedBox=curBox;
			
			$('.outof').html((cur_index+1) + '/' + total_boxes);
		}
	}
	
	timer = window.setInterval(function(){ next(); animation(); },4000)
	
	$('.prevcr').click(function(){prev(); animation(); });
	$('.nextcr').click(function(){next(); animation(); });
	$('.stopcr').toggle(function(){
			$(this).toggleClass('playcr')
			window.clearTimeout(timer)
		},
		function(){
		    $(this).toggleClass('playcr')
			timer = window.setInterval(function(){ next(); animation(); },4000)
		}
	);
});