/*
	options: { id: 'myContentFlipper', next_id: 'next_button', previous_id: 'previous_button' }
*/
function contentFlipper(options) {
	jQ(document).ready(function() {
		var id = options.id;
		
		jQ('#'+id).css({position:'relative'}).addClass('content_flipper').children('.content_flipper_section').each(function(i) {
			if (i > 0) jQ(this).hide();
		});
		
		var previous_id, next_id;
		if (typeof(options.next_id) != 'undefined' && typeof(options.previous_id) != 'undefined') {
			next_id = options.next_id;
			previous_id = options.previous_id;
		} else {
			jQ('#'+id).append('<span id="content_flipper_previous_'+jQ('.content_flipper').length+'">Previous Page</span> <span id="content_flipper_next_'+jQ('.content_flipper').length+'">Next Page</span>');
			next_id = 'content_flipper_next_'+jQ('.content_flipper').length;
			previous_id = 'content_flipper_previous_'+jQ('.content_flipper').length;
		}
		
		jQ('#'+previous_id).hide().unbind('click').click(function() {
			var oldSection = jQ('#'+id).children('.content_flipper_section:visible');
			
			if (!oldSection.prev()) return;
			
			oldSection.fadeOut(500, function() {
				jQ(this).prev().add('#'+next_id).fadeIn(500);
			});
			
			if (!oldSection.prev().prev().length) jQ(this).fadeOut(300);
			return false;
		}).css('cursor', 'pointer');
		
		jQ('#'+next_id).unbind('click').click(function() {
			var oldSection = jQ('#'+id).children('.content_flipper_section:visible');
			
			if (!oldSection.next()) return;
			
			oldSection.fadeOut(500, function() {
				jQ(this).next().add('#'+previous_id).fadeIn(500);
			});
			
			if (!oldSection.next().next().length) jQ(this).fadeOut(300);
			return false;
		}).css('cursor', 'pointer');
	});
}

/*
<div id="myContentFlipper" class="content_flipper" style="position: relative;">
	<div class="content_flipper_section">
		<p>Content Section 1</p>
	</div>
	<div class="content_flipper_section" style="display: none;">
		<p>Content Section 2</p>
	</div>
	<div class="content_flipper_section" style="display: none;">
		<p>Content Section 3</p>
	</div>
</div>
<script type="text/javascript"><!--
	contentFlipper({
	 id:'myContentFlipper'
	});
// --></script>
*/