$( function() {

	$('.slider li:last ').addClass('last');
	$('.slider li:first').addClass('first');
	$('.slider li:first').show();
	$('#stop').hide();
	play();
	showPause();
	var current = $('.slider li:first');
	var timeout;
	$('#forward').click( function() {
		current.hide();
		if (current.attr('class') == 'last')
			current = $('.slider li:first');
		else
			current = current.next();
		current.show();
	});
	$('#backImg').click( function() {
		current.hide();
		if (current.attr('class') == 'first')
			current = $('.slider li:last');
		else
			current = current.prev();
		current.show();
	});
	

	$('#stop').click( function() {
		pause();
		showPlay();
	});

	$('#play').click( function() {
		play();
		showPause();
	});
	function showPause() {
		$('#play').hide();
		$('#stop').show();
	}
	function showPlay() {
		$('#stop').hide();
		$('#play').show();
	}
	function play() {
		timeout = setInterval(function(){
			current.hide();
			if (current.attr('class') == 'last')
				current = $('.slider li:first');
			else
				current = current.next();
			current.show();
		}, 5000);
	}
	function pause() {
		clearInterval(timeout);
	}
});