jQuery(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* The number of event sections / years with events */
	var tot=jQuery('.event').length;

	/* Each event section is 320 px wide */
	var timelineWidth = 190*tot;
	var screenWidth = 700;
	
	jQuery('#timelineScroll').width(timelineWidth);
	
	/* If the timeline is wider than the screen show the slider: */
	if(timelineWidth > screenWidth)
	{
		jQuery('#scroll,#slider').show();
		jQuery('#centered,#slider').width(95*tot);
		
		/* Making the scrollbar draggable: */
		jQuery('#bar').width((95/190)*screenWidth).draggable({

			containment: 'parent',
			drag: function(e, ui) {
	
				if(!this.elem)
				{
					/* This section is executed only the first time the function is run for performance */
					
					this.elem = jQuery('#timelineScroll');
					
					/* The difference between the slider's width and its container: */
					this.maxSlide = ui.helper.parent().width()-ui.helper.width();

					/* The difference between the timeline's width and its container */
					this.cWidth = this.elem.width()-this.elem.parent().width();
					this.highlight = jQuery('#highlight');
				}
				
				/* Translating each movement of the slider to the timeline: */
				this.elem.css({marginLeft:'-'+((ui.position.left/this.maxSlide)*this.cWidth)+'px'});
				
				/* Moving the highlight: */
				this.highlight.css('left',ui.position.left)
			}
		});
		
		jQuery('#highlight').width((95/190)*screenWidth-3);
	}
	
});