function initTimeline() {
var i,j,k
var id = 'silas_timeline'
var timeline = getElem(id)

var events = timeline.getElementsByTagName('dl')
var ul = document.createElement('ul');
for (i=1; i<events.length; i++) {
    var li = document.createElement('li')
    li._silas_eventID = events[i].id
    li._silas_idx = i;
    li.id = 'timeidx-'+events[i].id
    li.onclick = timeline_gotoEvent
    li.onmouseover = timeline_gotoEvent
    li.innerHTML = "<span>"+events[i].title+"</span>"
    ul.appendChild(li)
}
timeline.appendChild(ul)
}

function timeline_gotoEvent () {
    var datesDiv = getElem('dates');
    var eventDiv = getElem(this._silas_eventID)
    if (datesDiv._silas_timeout) {
        clearTimeout(datesDiv._silas_timeout)
    }
    if (datesDiv._silas_lastEvent) datesDiv._silas_lastEvent.className = ''
    datesDiv._silas_lastEvent = this
    this.className = 'hover'

    var timeline = getElem('silas_timeline')
    timeline.className = 'event'+this._silas_idx
//    timeline.style.backgroundPosition='0px -30px'
    timeline_scrollTo(-1 * eventDiv.offsetLeft, 25)
    return false
}

function timeline_scrollTo(dest, offset) {
    offset = parseInt(offset)
    dest = parseInt(dest)
    if (offset < 25) offset = 25
    var datesDiv = getElem('dates');
    var origin
    if (!datesDiv._silas_lastPosition) origin = 0
    else origin = datesDiv._silas_lastPosition
    

    if (dest == origin || (Math.abs(dest - origin) <= offset)) {
        datesDiv._silas_lastPosition = dest
        setLeft(datesDiv, dest)
    } else {
        if (dest > origin) {
            datesDiv._silas_lastPosition = origin + offset
            setLeft(datesDiv, origin + offset);
        } else if (dest < origin) {
            datesDiv._silas_lastPosition = origin - offset
            setLeft(datesDiv, origin - offset)
        }
        datesDiv._silas_timeout = setTimeout("timeline_scrollTo('"+dest+"', '"+(offset * 1.1)+"')", 1);
    }
}

if (typeof SilasPage == "function") SilasPage.addOnLoad(initTimeline)