window.addEvent('domready', function(){

	new Asset.css('css/timeline.css', {id: 'timelinestyle', title: 'timelinestyle'});
	
	// this defines the transition that we use to change the margin
	var marginChange=new Fx.Style($('timelineInnerWrap'),'margin-left',{duration:400,transition:Fx.Transitions.Quad.easeInOut})
	
	// the function that checks if we're at the ends.
	function switchback(newmargin){
		var width=$('timelineInnerWrap').getStyle('width').toInt();
		var adjustedwidth=width-768;
		var marginChange=new Fx.Style($('timelineInnerWrap'),'margin-left',{duration:2000,transition:Fx.Transitions.Elastic.easeOut});
		if(newmargin>0){
			(function(){marginChange.start(0)}).delay(440);
		}else if(newmargin+adjustedwidth<0){
			(function(){marginChange.start(-adjustedwidth)}).delay(440);
		}
	}
	
	$('next').addEvent('click',function(){
		var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
		newmargin=margin-384;
		marginChange.start(newmargin);
		switchback(newmargin);
	});

	$('prev').addEvent('click',function(){
		var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
		newmargin=margin+384;
		marginChange.start(newmargin);
		switchback(newmargin);
	});
	$('next4').addEvent('click',function(){
		var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
		newmargin=margin-768;
		marginChange.start(newmargin);
		switchback(newmargin);
	});

	$('prev4').addEvent('click',function(){
		var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
		newmargin=margin+768;
		marginChange.start(newmargin);
		switchback(newmargin);
	});

});

window.addEvent('load',function(){ //slide stuff has to be done onload so that all the widths and stuff are present

	// slider
	
	var width=$('timelineInnerWrap').getStyle('width').toInt();
	var numsteps=(width/384)-2;
	
	var slide=new Slider('timelineNavCenter','slider',{steps:numsteps,
					onChange: function(step){
						var marginChange=new Fx.Style($('timelineInnerWrap'),'margin-left',{duration:400,transition:Fx.Transitions.linear})
						var newmargin=step*(-384);
						marginChange.start(newmargin);
					}
				});
	slide.set(0);
	
	
	$('next').addEvent('click',function(){
		(function(){
			var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
			var step=-margin/384;
			slide.set(step);
		}).delay(440);
	});
	$('prev').addEvent('click',function(){
		(function(){
			var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
			var step=-margin/384;
			slide.set(step);
		}).delay(440);
	});
	$('next4').addEvent('click',function(){
		(function(){
			var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
			var step=-margin/384;
			slide.set(step);
		}).delay(440);
	});
	$('prev4').addEvent('click',function(){
		(function(){
			var margin=$('timelineInnerWrap').getStyle('margin-left').toInt();
			var step=-margin/384;
			slide.set(step);
		}).delay(440);
	});

});