function timelineEvents(event) {

	var navigation = $('#timeline li');
	var items = $('#timeline-items .timeline-item');
	
	var current_index = 0;
	var moving = false;

	if ( navigation.length != items.length ) {
		return false;
	}
	
	// Hide all contents items, except for the 1st
	items.hide();
	$(items[0]).show();
	
	// The event handles an animation between content elements
	function clickEvent(event) {
		
		if (!moving) {
			
			var next_index = navigation.index(this);
			
			if ( next_index == current_index ) {
				return false;
			}
			
			moving = true;
		    
			// Comparison returns true if the clicked value is greater then the current
			var comparison 	= next_index > current_index;
			
			// Determine what the actual directions of the to hide and to show elements are			
			// For direction we want to set the direction it'll be sliding in from
			var direction_hide = comparison ? 'left' : 'right'
			var direction_show = comparison ? 'right' : 'left'
			
			// First we want to deactive our active link in the timeline
			// Followed by sliding out our current item to its desired direction
			$(navigation[current_index]).removeClass('active');
			$(items[current_index]).hide('slide', { 
				direction: direction_hide
			}, 1000);
			
			// Activate our new navigation link in the timeline
			// Slide in our new item to its desired direction
			$(navigation[next_index]).addClass('active');
			
			$(items[next_index]).show('slide', { 
				direction: direction_show
			}, 1000, function() {
				current_index = next_index;
				moving = false;
		    });
		   

		}
		

    };
	
	// Attach the click event to our timeline navigation items
	
	navigation.click(clickEvent);
	
}

$(document).ready(timelineEvents);