var d = document;
var month = ['','january','february','march','april','may','june','july','august','september','october','november','december'];
function g(o) {return document.getElementById(o);}
function constrain(o, min, max) {return (o > max) ? max : ((o < min) ? min : o);}

function createLine() {
	var output = '';

	output += '<div class="tlBackground" style="height:'+OFFSETY+'px;"></div>';
	output += '<img src="i/sb.gif" class="tlSep" style="top:'+(OFFSETY-1)+'px;" />';

	// Create static line
	for(var i = YEARFROM; i <= YEARTO; i++) {
		var ypos = (OFFSETY-14);
		var xpos = (OFFSETX+((i-YEARFROM)*YEARSIZE));
		output += '<div class="tlYear" style="top:'+ypos+'px; left:'+xpos+'px;">';
		output += '<img src="i/yearsep.gif" width="3" height="11" />';
		output += i;
		output += '</div>';
	}

	// Create events
	for(var i = 0; i < events.length; i++) {
		var title = events[i][0];
		var url = events[i][1];
		var day = events[i][2];
		var month = events[i][3];
		var year = events[i][4];

		var partYear = constrain(  ((day>0)?((day-1)/365):0) + (month-1)/12 ,0,1); // from day/month, judge where in a year (out of 1) the event sits.

		var ypos = OFFSETY-7;
		var xpos = parseInt(OFFSETX+(year+partYear-YEARFROM)*YEARSIZE-4);

		output += '<a href="#" onclick="goTime('+i+'); return false;">';
		var img = (i != 0) ? 'event' : 'sb';
		output += '<img id="event'+i+'" class="tlEvent" alt="" style="top:'+ypos+'px; left:'+xpos+'px;" src="i/'+img+'.gif" />';
		output += '</a>';
	}

	output += '<div class="tlForeground" style="top:'+OFFSETY+'px;"></div>';

	output += '<div id="picker" class="tlPicker" style="top:'+(OFFSETY+6)+'px; left:'+(OFFSETX)+'px;" >';
	output += '<img src="i/picker.gif" width="7" height="7" /><span id="pickerText"><br />click to the left/right of this to move<br />click on open lumps to jump.</span>';
	output += '</div>';

	output += '<div class="tlNavbar" onclick="navbar(); return false;" style="position:absolute; top:'+(OFFSETY)+'px; height:50px; width:100%;">';
	output += '</div>';

	document.write(output);
}

var maxPicked = -1;
var pickerAt = -1;
var pickerTarg = 0;
function movePicker(targ) {
	if(pickerTarg) {
		pickerTarg = targ;
		return;
	}
	pickerTarg = targ;
	cyclePicker();
}

function hump(o) {
	var ypos = parseInt(g('event'+o).style.top);
	if(ypos > OFFSETY-12) {
		g('event'+o).style.top = (ypos-1)+'px';
		setTimeout('hump('+o+')',20);
	}
	else if(o < events.length-2) {
		setTimeout("g('event"+(o+1)+"').style.top = '"+(OFFSETY-8)+"px';",20);
	}
}

function cyclePicker() {
	// move picker towards target

	var xpos = parseInt(g('picker').style.left);
	var dist = pickerTarg - xpos;
	xpos += dist/4;

	if(xpos < pickerTarg+3 && xpos > pickerTarg-3) {
		g('picker').style.left = pickerTarg+'px';
		pickerTarg = 0;
		return;
	}
	g('picker').style.left = parseInt(xpos)+'px';
	setTimeout('cyclePicker()',10);
}

function goTime(o) {
	if(o > maxPicked + 1) {
		navbar();
		return;
	}
	if(typeof(events[o][1]) != 'undefined' && events[o][1]) parent.frames.main.location.href = events[o][1];
	if(o > maxPicked) {
		hump(o);
		maxPicked = o;
	}
	pickerAt = o;
	movePicker(parseInt(g('event'+o).style.left)+4);
	if(o != 0)
		g('pickerText').innerHTML = '<br /><b>'+events[o][0]+'</b><br />'+((events[o][2] > 0)?events[o][2]:'')+' '+month[events[o][3]]+' '+events[o][4];
	else
		g('pickerText').innerHTML = '<br />click to the left/right of this to move<br />click on open lumps to jump.';
}

function navbar() {
	var dir = (mousex > parseInt(g('picker').style.left)) ? 1:-1;
	if( (pickerAt > 0 && dir < 0) || (pickerAt < events.length-1 && dir > 0) ) {
		goTime(pickerAt+dir);
	}
}

var mousex;
var mousey;

function mousemoved(evt) {
	if(d.all) {
		mousex = window.event.clientX+document.body.scrollLeft;
		mousey = window.event.clientY+document.body.scrollTop;
	}
	else {
		mousex = evt.pageX;
		mousey = evt.pageY;
	}
}
document.onmousemove = mousemoved;