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

	/* The number of event sections / years with events */
	var tot=$('.event').length;
	
	$('.eventList li').click(function(e){
			showWindow('<div>'+$(this).find('div.content').html()+'</div>');
	});
	
	/* Each event section is 320 px wide */
	var timelineWidth = 270*tot;
	var screenWidth = 980;
	
	$('#timelineScroll').width(timelineWidth);
	
	/* If the timeline is wider than the screen show the slider: */
	if(timelineWidth > screenWidth)
	{
		$('#scroll,#slider').show();
		$('#centered,#slider').width(80*tot);
		
		/* Making the scrollbar draggable: */
		$('#bar').width((85/350)*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 = $('#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 = $('#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)
			}
		});
		
		$('#highlight').width((85/350)*screenWidth-3);
	}
	
});

function showWindow(data)
{
	/* Each event contains a set of hidden divs that hold
	   additional information about the event: */
	
	var title = $('.title',data).text();
	var date = $('.date',data).text();
	var content = $('.body',data).html();
	
	if (title != null && content != null)
	{
		$('<div id="mask">').css({
									
			width:$(document).width(),
			height:$(document).height(),
			opacity:0.4
			
		}).appendTo('body').click(function(){
			
			$(this).remove();
			$('#windowBox').remove();
			
		});
		
		$('body').append('<div id="windowBox"><div id="titleDiv">'+title+'</div>'+content+'<div id="date">'+date+'</div></div>');
	
		$('#windowBox').css({
			width:500,
			height:350,
			left: ($(window).width() - 500)/2,
			top: ($(window).height() - 350)/2,
			position: 'fixed'
		});
	}
}