function setupTimeline(){

	var updates = $('.updates');
	var updatesCopy = $('.updates-copy');
	var yearBtn = $('.year-btn');
	var month = $('.month');
	addArrows(month);
	var greyBtn = $('.grey-btn');
	var months = $('.months');
	var arrow = $('.update-arrow');
	var arrowBorder = $('.update-arrow-border');
	
	$('#fb-bar-graph').show();
	
	setWidths(greyBtn,month,months);
	setPositions(months,greyBtn,updates,month,arrow,arrowBorder);
	
	$('#graph-btn > .grey-label').click(function(event){
		$('#fb-bar-graph').slideDown();
		hideAll(updates,months,arrow,arrowBorder);
		$('#timeline-wrapper').scrollTo($(event.target),500,{offset:-($('#timeline-wrapper').width()/2)});
	});
	
	$('.grey-label', yearBtn).click(function(event){
		$('#fb-bar-graph').slideUp();
		if(event.target === this){
			viewYear($(this).parent('.year-btn'),updates,months);
			$('#timeline-wrapper').scrollTo($(event.target),500,{offset:-($('#timeline-wrapper').width()/2)});
		}
	});

	$(month).click(function(event){
		var target = event.target;
		if($(target).hasClass('month-label') && $(target).siblings('.updates').length > 0){
			viewMonth($(this),updates,arrow,arrowBorder);
			addSlider($(this));
		}
	});

	$('#timeline-wrapper').click(function(event){
		if(event.target === this){
			hideAll(updates,months,arrow,arrowBorder);
		}
	});

	$('#fb-bar-graph').click(function(event){
		if(event.target === this){
			hideAll(updates,months,arrow,arrowBorder);
		}
	});
	
	$('.grey-label').hover(
		function(){
			$(this).parent('.grey-btn').css('background-color', '#c7c8ca');
		},
		function(){
			$(this).parent('.grey-btn').css('background-color', '#636466');
		}
	);
};

function setWidths(greyBtn,month,months)
{
	/* Sets width of the year nav */
	var btnCount = $(greyBtn).length;
	var width = $(greyBtn).outerWidth() * btnCount;
	$('#timeline').width(width);
	
	/* Sets width of the month nav */
	var monthWidth = parseInt($(month).css('width')) * 12;
	$(months).width(monthWidth);
	
}

function setPositions(months,greyBtn,updates,month,arrow,arrowBorder)
{
	/* Centers the months above the years */
	var monthsWidth = $(months).outerWidth();
	var monthsHeight = $(months).outerHeight();
	var btnWidth = $(greyBtn).outerWidth();
	$(months).css('top', function(){
		return monthsHeight * -1;
	});
	$(months).css('left', function(){
		return ((monthsWidth/2) - (btnWidth/2)) * -1;
	});
	
	/* Centers the updates above the months */
	var updatesWidth = parseInt($(updates).css('width'))+parseInt(($(updates).css('padding-left')))+parseInt(($(updates).css('padding-right')))+parseInt(($(updates).css('border-left-width')))+parseInt(($(updates).css('border-right-width')));
	var updatesHeight = parseInt($(updates).css('height'))+parseInt(($(updates).css('padding-top')))+parseInt(($(updates).css('padding-bottom')))+parseInt(($(updates).css('border-top-width')))+parseInt(($(updates).css('border-bottom-width')))+25;
	var monthWidth = parseInt($(month).css('width'));
	$(updates).css('top', function(){
		return updatesHeight * -1;
	});
	$(updates).css('left', function(){
		return ((updatesWidth/2) - (monthWidth/2)) * -1;
	});
	
	/* Centers the arrows below the updates */
	var arrowWidth = parseInt($(arrow).css('border-top-width'))*2;
	var arrowBorderWidth = parseInt($(arrowBorder).css('border-top-width'))*2;
	$(arrow).css('left', function(){
		return (((monthWidth) - (arrowWidth))/2);
	});
	$(arrowBorder).css('left', function(){
		return (((monthWidth) - (arrowBorderWidth))/2);
	});
	
}

function viewYear(target,updates,months,arrow,arrowBorder)
{
	$('.update-arrow').hide();
	$('.update-arrow-border').hide();
	$(updates).hide();
	$(months).hide();
	$('.months', target).show();
	$('.content > .updates', target).first().show();
	$('.content > .update-arrow', target).first().show();
	$('.content > .update-arrow-border', target).first().show();
	addSlider($('.content').first());
}

function viewMonth(target,updates,arrow,arrowBorder)
{
	$(updates).hide();
	$(arrow).hide();
	$(arrowBorder).hide();
	$('.updates', target).show();
	$('.update-arrow', target).show();
	$('.update-arrow-border', target).show();
}

function hideAll(updates,months,arrow,arrowBorder)
{
	$(updates).hide();
	$(months).hide(); 
	$(arrow).hide();
	$(arrowBorder).hide();
}

function addArrows(month)
{
	$(month).append('<span class="update-arrow"></span><span class="update-arrow-border"></span>');
}

function addSlider(target)
{
	var updates = $('.updates', target);
	var updatesCopy = $('.updates-copy', target);
	var difference = $(updatesCopy).height() - $(updates).height();
	if(difference > 0)
	{
		if($(updates).children('.slider-wrap').length <= 0)
		{
			var proportion = difference / $(updatesCopy).height();
			var handleHeight = Math.round((1-proportion)*$(updates).height());
			handleHeight -= handleHeight%2; 
			$(updates).append('<\div class="slider-wrap"><\div class="slider-vertical"><\/div><\/div>');
			
			var sliderWrap = $('.slider-wrap', target);
			var sliderVertical = $('.slider-vertical', target);
			$(sliderWrap).height($(updates).height());
			
			$(sliderVertical).slider({
				orientation: 'vertical',
				min: 0,
				max: 100,
				value: 100,
				slide: function(event, ui) {
					var topValue = -((100-ui.value)*difference/100);
					$(updatesCopy).css({top:topValue});
				},
				change: function(event, ui) {
					var topValue = -((100-ui.value)*difference/100);
					$(updatesCopy).css({top:topValue});
				}
			});

			var uiSlider = $('.ui-slider', target);
			var uiSliderHandle = $('.ui-slider-handle', target);
			$(uiSliderHandle).css({height:handleHeight,'margin-bottom':-0.5*handleHeight});	
			var origSliderHeight = $(sliderVertical).height();
			var sliderHeight = origSliderHeight - handleHeight ;
			var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;
			$(uiSlider).css({height:sliderHeight,'margin-top':sliderMargin});
		}
	}
	
	$('.ui-slider', target).click(function(event){
		event.stopPropagation();
	});
	   
	$('.slider-wrap', target).click(function(event){
		var offsetTop = $(this).offset().top;
		var clickValue = (event.pageY-offsetTop) * 100 / $(this).height();
		$('.slider-vertical', target).slider("value", 100-clickValue);
	});
	
	$('.updates', target).mousewheel(function(event, delta){
		var speed = 5;
		var sliderVal = $('.slider-vertical', target).slider('value');
		
		sliderVal += (delta*speed);

		$('.slider-vertical', target).slider("value", sliderVal);
		
		event.preventDefault();
	});

}
