var selectedDot;

FastInit.addOnLoad(
	function(){
	
		if(!$('timeline')){
			return;
		}
		
		var padding = Math.floor((document.viewport.getWidth() - 980) / 2);
		var timelineWidth = $('timeline').getWidth();
		$('timeline').style.width = (timelineWidth - 5) + 'px';

		$('speculations').style.paddingRight = padding + 'px';
		
		$('header').style.left = (timelineWidth - 980 - 5) + 'px';
		
		$('present').style.left = (timelineWidth - $('present').getWidth()/2 - 5) + 'px';
		
		window.scrollTo(timelineWidth, 0);
		updateSpeculationImagePosition();
		
		selectedDot = $(selectedDotId);
		
		Event.observe(
			'timeline',
			'mouseover',
			function(event){

				var dot = getDot(event);
				if(!dot){
					return;
				} 

				if($$('.highest').length == 1 && $$('.highest')[0] != dot){
					$$('.highest')[0].removeClassName('highest');
				}
				dot.addClassName('highest');

				if(dot != selectedDot){
					setDotMarker(dot, true);
				}			
				
			}
		);
		
		Event.observe(
			'timeline',
			'mouseout',
			function(event){

				var dot = getDot(event);
				if(!dot || dot == selectedDot){
					return;
				} 

				setDotMarker(dot, false);			
				
			}
		);
		
		Event.observe(
			'timeline',
			'click',
			function(event){
			
				var element = Event.element(event);
				
				Event.stop(event);

				var thumb;
				if(element.hasClassName('thumb')){
					thumb = element;
				} else {
					var dot = element.up('.dot');
					if(!dot){
						return;
					} 
					thumb = dot.down('.thumb');
				}
				
				updateSpeculationImagePosition();
	
				var dot = element.up('.dot');
				var year = dot.id.substr(4);
				showImage(year, 0);
				
				if(selectedDot){
					setDotMarker(selectedDot, false);			
				}
				selectedDot = getDot(event);
				setDotMarker(selectedDot, true);			

			}
		);
		
		Event.observe(
			'pager',
			'click',
			function(event){
			
				var element = Event.element(event);
				
				Event.stop(event);
				
				if(element.hasClassName('prev') || element.hasClassName('next')){

					var speculationImageIndex = 0;
					if(selectedDot.readAttribute('speculationImageIndex')){
						speculationImageIndex = parseInt(selectedDot.readAttribute('speculationImageIndex'));
					}

					var thumbSpeculationImage;
					if(element.hasClassName('prev')){
						speculationImageIndex --;
					} else if(element.hasClassName('next')){
						speculationImageIndex ++;
					}
					
					var year = selectedDot.id.substr(4);
					showImage(year, speculationImageIndex);

				}
				
			}
			
		);
		
	}
);

function showImage(year, speculationImageIndex){

	var speculationImages = years[year];
	var filename = speculationImages[speculationImageIndex].SpeculationImage.image_filename;
	
	var url = SPECULATION_IMAGE_TEMPLATE_URL.replace(/dummy.jpg/, filename);
	$('image').innerHTML = '<img src="' + url + '" />';

	var pager = $('pager');
	var pagerHtml = '';
	var numSpeculationImages = speculationImages.length;
	if(numSpeculationImages > 1){
		if(speculationImageIndex > 0){
			pagerHtml += '<a href="#" class="prev">&lt;&lt;</a>'; 
		} else {
			pagerHtml += '&lt;&lt;'; 
		}
		pagerHtml += ' ' + (speculationImageIndex + 1) + ' of ' + numSpeculationImages + ' ';
		if(speculationImageIndex < (numSpeculationImages - 1)){
			pagerHtml += '<a href="#" class="next">&gt;&gt;</a>'; 
		} else {
			pagerHtml += '&gt;&gt;'; 
		}
	}
	pager.innerHTML = pagerHtml;

	selectedDot.writeAttribute('speculationImageIndex', speculationImageIndex);

}

function updateSpeculationImagePosition(){

	var padding = Math.floor((document.viewport.getWidth() - 980) / 2);
	var scrollOffsets = document.viewport.getScrollOffsets();
	var leftScrollOffset = scrollOffsets.left;
	var left = leftScrollOffset + padding - 5 + 'px';
	$('image').style.left = left;
	$('pager').style.left = left;
	$('header').style.left = left;

}

function getDot(event){

	var dot;
	var element = Event.element(event);
	if(element.hasClassName('dot')){
		dot = element;
	} else {
		var dot = element.up('.dot');
		if(!dot){
			return;
		} 
	}
	
	return dot;
		
}

function setDotMarker(dot, isSelected){
	
	var markerImage;
	if(isSelected){
		markerImage = 'marker_over.gif';
	} else {
		markerImage = 'marker.gif';
	}
	
	var marker = dot.down('img.marker');
	marker.src = SITE_ROOT_DIR + 'img/' + markerImage;

}