I'm programming a site slideshow right now for a company, and I need it to rotate automatically, and also if the user pushes pause, click the arrows to continue moving through the slideshow without restarting the interval, I am having trouble doing it though. any help would be appreciated

Code:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#slideshow-container{
	width: 816px;
	outline: 1px solid black;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}
#image-container{
	width: 408px;
	height: 175px;
	
	float: left;	
	
	overflow: hidden;
}
#inner-image{
		
}
#container{
	float: right;	
	
	position: relative;
	margin-top: -50px;
	margin-right: 10px;
}
#controls{
	width: 816px;
	height: 25px;	
	outline: 1px solid purple;
}
#description{
	height: 175px;
	width: 	408px;
	float: right;
	outline: 1px solid blue;
	
}
#left{
	height: 25px;
	width: 25px;
	float: left;	
	margin-left: 250px;
}
#right{
	height: 25px;
	width: 25px;
	float: right;
	margin-right: 250px;
}
#pause{
	height: 25px;
	width: 25px;
	float: left;
	margin-left: 120px;
	
}
#description h1{
	margin-left: 20px;
}
#description h3{
		margin-left: 30px;
}
.clear{
	clear: both;	
}
</style>
<script src="jquery.js" ></script>
</head>

<body>

<div id="slideshow-container">

<div id="image-container"></div>
<div id="description">


</div>
<div class="clear"></div>
<div id="controls">

<img id="left" src="images/left_arrow.png" />
<img id="pause" src="images/pause.jpg" />
<img id="right" src="images/right_arrow.png" />

<div class="clear"></div>
</div>

<div id="container">1 of 3</div>
</div>

<script>

var slideContainer=document.getElementById('slideshow-container');
var imageContainer=document.getElementById('image-container');
var description=document.getElementById('description');

var controls=document.getElementById('controls');

var j=0;

var slideImages=[
//slide1
	[
		'images/building.jpg',
		'<h1>This is Griffin Building</h1>',
		'<h3>This is more text</h3>'
	],
//slide2
	[
		'images/nes.jpg',
		'<h1>Nintendo</h1>',
		'<h3>Entertainment System</h3>'
	],
//slide3
 	[
		'images/sms.jpg',
		'<h1>sega</h1>',
		'<h3>master system</h3>'
	]
];
var pausedStatus=0;
//var autoRotater=null;
var slideCount=document.getElementById('slide-count');


function slideshowClickerInt(){
i=0;

$('#pause').click(function(){
		if(pausedStatus==1){
			pausedStatus=0;
			alert(pausedStatus);
		}
		$('#pause').click(function(){
		if(pausedStatus==0){
			clearInterval(autoRotater);
			pausedStatus++;
			alert(pausedStatus);
		}
		});
	});


	var newImg = document.createElement('img');
	var slideImg = imageContainer.appendChild(newImg);
	newImg.src=slideImages[i][j];
	description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
	
	//interval for rotating pics if the paused status is equal to 0 which is default
	if(pausedStatus==0){
		autoRotater=setInterval(function(){
			//after the interval hits 5 seconds, the old image is faded out and the new Image is brought in with a fadeIn
			$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
			
		},5000);
		
		
		//when the right arrow is clicked, the interval is cleared and set again by the click
		$('#right').click(function(){
			clearInterval(autoRotater);
			
			//after the interval hits 5 seconds, the old image is faded out and the new Image is brought in with a fadeIn
			$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
			autoRotater=setInterval(function(){
					$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			}, 5000);
			
		});
		//now the left button 
		$('#left').click(function(){
			clearInterval(autoRotater);
			
			//after the interval hits 5 seconds, the old image is faded out and the new Image is brought in with a fadeIn
			$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i--;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i < 0){
					i=slideImages.length-1;
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
			autoRotater=setInterval(function(){
					$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			}, 5000);
			
		});
	
	}
	
	if(pausedStatus==1){
		
			//after the interval hits 5 seconds, the old image is faded out and the new Image is brought in with a fadeIn
			$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
		//when the right arrow is clicked, the interval is cleared and set again by the click
		$('#right').click(function(){
			
			
			//after the interval hits 5 seconds, the old image is faded out and the new Image is brought in with a fadeIn
			$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
					$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
			
		});
		//now the left button 
		$('#left').click(function(){
			
			
			//after the interval hits 5 seconds, the old image is faded out and the new Image is brought in with a fadeIn
			$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i--;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i < 0){
					i=slideImages.length-1;
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
					$(description).fadeOut('slow');	
			$(newImg).fadeOut('slow' ,function(){
				i++;
				//if i is greater then the length of the 2 dimensional array, i goes back to 0
				if(i >= slideImages.length){
					i=0;
					
				}
				
				$(newImg).fadeIn('slow');
				newImg.src=slideImages[i][j];
				description.innerHTML = slideImages[i][1] + '<br />' + slideImages[i][2] ;
				$(description).fadeIn('slow');
			});
			
		});
			
	}

		


}
	
slideshowClickerInt();
</script>

</body>
</html>