document.observe('dom:loaded', function() {
	
	/* Javascript enable the list */
		$("epoch-holder-static").id="epoch-holder";
		
		$$('epoch-holder h3').each(function(elm) {
			elm.remove();
		});
	
	  /* Add some extra navigation controls */
		var quickNavigation = document.createElement("ul"); quickNavigation.id="epoch-quick-navigation";
		var nextBlock = document.createElement("li"); nextBlock.className="next-epoch";
		var nextButton = document.createElement("a"); var nextSpan = document.createElement("span");
		nextButton.href="#"; nextButton.innerHTML = "Next"; nextBlock.appendChild(nextButton); nextButton.appendChild(nextSpan);
		var previousBlock = document.createElement("li"); previousBlock.className="previous-epoch";
		var previousButton = document.createElement("a"); var previousSpan = document.createElement("span");
		previousButton.href="#"; previousButton.innerHTML = "Prev."; previousBlock.appendChild(previousButton); 
		quickNavigation.appendChild(previousBlock); quickNavigation.appendChild(nextBlock); previousButton.appendChild(previousSpan);
		document.getElementById("timeline").appendChild(quickNavigation);
		
		$(previousBlock).hide();
		
	/* Create the slider nodes */
		var sliderBlock = document.createElement("div"); sliderBlock.id="epoch-slider";
		var sliderElement = document.createElement("div"); sliderElement.id="scroll-handle";
		sliderBlock.appendChild(sliderElement);
		$('epoch-holder').insert({before:sliderBlock});

	/* Turn the timeline list into a scrollable panel */
		var sliding = false;
		var index = 0;
		var slider = new Control.Slider('scroll-handle', 'epoch-slider', {
			axis:'horizontal',
			range:$R(0,4),
			onSlide:function(v) {
				var w = $('epoch-holder').getWidth();
				$('epoch-holder').scrollLeft = v*w;
			},
			onChange:function(v) {
				var w = $('epoch-holder').getWidth();
				if(v!=Math.round(v)&&!sliding){ slider.setValue(Math.round(v)); };
				if(!sliding) { 
					index = v;
					$('epoch-holder').scrollLeft = Math.round(v)*w;
					$$('ul#epoch-navigation li').each(function(e){e.removeClassName("active");});
					$$('ul#epoch-navigation li')[Math.round(v)].addClassName("active");
				} else { $('epoch-holder').scrollLeft = v*w; index = v; }
				var i = Math.round(index);
				if (i == 0) {
					previousBlock.hide();
					nextBlock.show();
				} else if (i == 4) {
					nextBlock.hide();
					previousBlock.show();
				} else {
					nextBlock.show();
					previousBlock.show();
				}
			}
		});

	/* Set epoch column styles */
		$$('div#epochs div.epoch').each(function(e){
			e.addClassName("col-"+e.getElementsByClassName("week").length);
			var odd = false;
			for(var z=0;z<e.getElementsByClassName("week").length;z++) {
				if(odd) { 
					e.getElementsByClassName("week")[z].addClassName("odd"); odd = false; 
				} else { 
					odd = true;	
				}
			}
		});
	
	/* Epoch navigation */
		$$('ul#epoch-navigation li a').each(function(e){
			e.observe("click", function(e){
				e.stop();
				var z = this.ancestors()[0]; var count = 0;
				this.ancestors()[0].ancestors()[0].immediateDescendants().each(function(e){ e.removeClassName("active"); count++; if(e == z) index = count-1;});
				this.ancestors()[0].addClassName("active");
				var offset = e.element().positionedOffset();
				new Effect.Morph('scroll-handle', {
					style: 'left:' + offset[0] + 'px;',
					duration: 0.3,
					afterFinish: function() {
						slider.setValue(index);
						if (index == 0) {
							previousBlock.hide();
							nextBlock.show();
						} else if (index == 4) {
							nextBlock.hide();
							previousBlock.show();
						} else {
							nextBlock.show();
							previousBlock.show();
						}
					}
				});
			});
		});
		
		$$('ul#epoch-quick-navigation li.previous-epoch a').each(function(e){
			e.observe("click", function(e) {
				e.stop();
				if (index - 1 >= slider.minimum) {
					index--;
					var offset = $$('#epoch-navigation li.active')[0].previous('li').down('a').positionedOffset();
					new Effect.Morph('scroll-handle', {
						style: 'left:' + offset[0] + 'px;',
						duration: 0.3,
						afterFinish: function() {
							slider.setValue(index);
							if (index == 0) {
								previousBlock.hide();
								nextBlock.show();
							} else if (index == 4) {
								nextBlock.hide();
								previousBlock.show();
							} else {
								nextBlock.show();
								previousBlock.show();
							}
						}
					});
				}
			});
		});
		
		$$('ul#epoch-quick-navigation li.next-epoch a').each(function(e){
			e.observe("click", function(e) {
				e.stop();
				if (index + 1 <= slider.maximum) {
					index++;
					var offset = $$('#epoch-navigation li.active')[0].next('li').down('a').positionedOffset();
					new Effect.Morph('scroll-handle', {
						style: 'left:' + offset[0] + 'px;',
						duration: 0.3,
						afterFinish: function() {
							slider.setValue(index);
							if (index == 0) {
								previousBlock.hide();
								nextBlock.show();
							} else if (index == 4) {
								nextBlock.hide();
								previousBlock.show();
							} else {
								nextBlock.show();
								previousBlock.show();
							}
						}
					});
				}
			});
		});
});