$(function(){
	
	buildHistoryTimeline();

});

 
var history_slide_offset = 940;
var history_slide_position = 0;
var history_user_changed;
var panel_heights = new Array();
var decade_width;

function buildHistoryTimeline() {

	var canvas = $('#timeline_panels');
	var panels = $('#timeline_panels .panel');
	
	panels.each(function() {
		
		panel_heights.push($(this).outerHeight());
		
		var xpos = (history_slide_position*history_slide_offset);
		
		$(this).css({
			'position' : 'absolute',
			'top' : 0,
			'left' : xpos
		})
		history_slide_position++;
		
	});
	
	canvas.css({ 'height' : panel_heights[0] + 'px' })	
	
	/********* timeline slider ********/
	
	var timeline_decades = $('#timeline_nav li').length; 
	
	decade_width = (history_slide_offset/timeline_decades);
	decade_width = (Math.round(decade_width / 1) * 1);

	$('#timeline_nav li').each(function(index) {
		var orig_html = $(this).text();
		$(this).html('<span onclick="slide_timeline(' + (index) + ');">' + orig_html + '</span>');

		$(this).css({ 'padding' : 0, 'text-align' : 'center', 'width' : decade_width + 'px' });
		
		if(index == 0){
			slide_timeline(index);
		}
		
  	});
  	
  	$('#timeline_nav li').hover(function(){
  		$(this).css({'cursor' : 'pointer'});
  	},function(){
  		
  	})

}

function slide_timeline(num){

	$('#timeline_nav li').removeClass('active');
	$('#timeline_nav li').eq(num).addClass('active');

	history_slide_position = num;
	history_slide_show(num);
	history_user_changed = true;
}
 
 
function history_slide_show(num){

	var slide_xpos = ((decade_width*num) + (decade_width/2)) - ($('#timeline_marker').width()/2);
	var canvas = $('#timeline_panels');
	
	canvas.animate({
		height: panel_heights[num] + 'px'
	}, 400, 'easeInOutQuart', function(){
		$(this).animate({
			marginLeft: ("-" + (history_slide_offset * num) + 'px')
		}, 900, 'easeInOutQuart')
		slide_timeline_marker(num);
	})

}

function slide_timeline_marker(num){

	var slide_xpos = ((decade_width*num) + (decade_width/2)) - ($('#timeline_marker').width()/2);
	
	$('#timeline_marker').animate({
		left: slide_xpos + 'px'
	}, 500, 'easeInOutQuart')

}