I've got this custom slider and I can't get the section cycle to work. The idea is that when the the page loads, several slide shows will load and the user will navigate through them with prev/next buttons. When they get to the end of one section, whey will select the next section that they want to view. The slider works great, but the next section selector is not.

Here is a JSfiddle. And below is my javascript. I'm new to all of this, so any suggestions to improve the code in any way will be greatly appreciated. Thanks

Code:
$(document).ready(function() {
	var sec = 'introduction',
		secCount = $('#'+sec+'').length,
		slideCount = 0,
		centSlide = 0,
		prevSlide = centSlide - 1,
		nextSlide = centSlide + 1;
	
	function init (x) {
		centSlide = 0;
		prevSlide = centSlide - 1;
		nextSlide = centSlide + 1;
		$('#'+x+' > .slide').first().addClass('liveslide').next().addClass('next');
		slideCount = $('#'+x+' > .slide').length;
		return centSlide, prevSlide, nextSlide, slideCount;
	};
	
	//initialize
	init(sec);
	
	// cycle code
	$('#'+sec+' > .slide').click(function() {
		var index = $('#'+sec+' > .slide').index(this);
		if (index > centSlide) nextcycle(centSlide, slideCount);
		if (index < centSlide) prevcycle(centSlide, slideCount);
		return false;        
    });
	
	// section cycle code
	$('.slide li').click(function() {
		$('.liveslide').removeClass('liveslide');
		$('.prev').removeClass('prev');
		sec = $(this).attr('name');
		slideCount = $('#'+sec+' > .slide').length;
		
		init(sec);
	});
	
	// construct cycle functions
	function nextcycle(x, y) {
		centSlide = x + 1;
		prevSlide = centSlide - 1;
		nextSlide = centSlide + 1;
		n = x - 1;
	
		$('#'+sec+' > .slide:eq('+n+')').removeClass('prev');
		$('#'+sec+' > .slide:eq('+centSlide+')').animate({
			left: 0,
			height: '90%',
			top: 0	
		}, 1000).removeClass('next').addClass('liveslide');
		if (prevSlide >= 0 && prevSlide < y) {
			$('#'+sec+' > .slide:eq('+prevSlide+')').animate({
			left: '-79%', 
        	height: '80%',
			top: '5%',
		}, 1000).removeClass('liveslide').addClass('prev');	
		};
		if (nextSlide < y) {
			$('#'+sec+' > .slide:eq('+nextSlide+')').css('left','100%').animate({
			left: '79%'
			}, 1000).addClass('next')
		};
	};
		
	function prevcycle(x, y) {
		centSlide = x - 1;
		prevSlide = centSlide - 1;
		nextSlide = centSlide + 1;
		n = x + 1;
	
		$('#'+sec+' > .slide:eq('+n+')').removeClass('next');
		$('#'+sec+' > .slide:eq('+centSlide+')').animate({
			left: 0,
			height: '90%',
			top: 0	
		}, 1000).removeClass('prev').addClass('liveslide');
		if (prevSlide >= 0 && prevSlide < y) {
			$('#'+sec+' > .slide:eq('+prevSlide+')').css('left','-100%').animate({
			left: '-79%'
			}, 1000).addClass('prev');	
		};
		if (nextSlide < y) {
			$('#'+sec+' > .slide:eq('+nextSlide+')').animate({
			left: '79%', 
        	height: '80%',
			top: '5%',
		}, 1000).removeClass('liveslide').addClass('next');	
		};
	};
	
}); // end ready