window.addEvent('domready', function()
{
	var drop = $('large');
	var dropFx = drop.effect('background-color', {wait: false}); // wait is needed to toggle the effect,
	 
	$$('.readmore').each(function(item)
	{
		item.addEvent('click', function(e)
		{
			drop.removeEvents();
			drop.empty();
//			var a = item.clone();
			var a = item.getParent('li').clone();
			a.inject(drop);
			dropFx.start('ccd5e3').chain(dropFx.start.pass('ffffff', dropFx));
			
		});
	 
	});
	
	$$('#timeline .thumbnail').each(function(item)
	{
		item.addEvent('click', function(e)
		{
			drop.removeEvents();
			drop.empty();
//			var a = item.clone();
			var a = item.getParent('li').clone();
			a.inject(drop);
			dropFx.start('ccd5e3').chain(dropFx.start.pass('ffffff', dropFx));
			
		});
	 
	});
	
	

	var count;
	//Alternates class names for the li elements in the timeline
	$$('#timeline li li').each(function(el,i){
		var _class = i % 2 ? 'even' : 'odd' ;
		el.addClass(_class);
		count=i+1;
	})
	
	//Sets the width of the div inside the scrollable one (fixed width is needed there). This depends on the number of elements in the timeline
	count=count*197+190;
	width=count+'px';
	$('main-content').setStyle('width', width );




	//Auto-scroller
	var scroll2 = new Scroller('container', {area: 100, velocity: 0.2});
					
					// container
					$('container').addEvent('mouseenter', scroll2.start.bind(scroll2));
					$('container').addEvent('mouseleave', scroll2.stop.bind(scroll2));

});