function setupTimeline() {
    // Exit on error
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById("history")) return false;

    // Get the history div
    var history = document.getElementById("history");

    // Hide the instructions for clicking on the link
    var instructions = document.getElementById("hist-instr");
    instructions.style.display = "none";

    // Replace the image with the image of the full timeline
    var timelineImg = history.getElementsByTagName("img")[0];
    timelineImg.setAttribute("src", "images/RevisedTimeline.jpg");

    // Remove the link around the image since the back and forward buttons
    // will be available
    var timelineLink = history.getElementsByTagName("a")[0];
    history.appendChild(timelineImg);
    history.removeChild(timelineLink);

    // assign an ID to the image so we can move it later
    timelineImg.setAttribute("id", "timeline-img");

    // create the left and right arrows for the timeline
    var leftArrow  = document.createElement("a");
    leftArrow.setAttribute("href", ".");
    leftArrow.className = "timeline-left";
    var leftArrowText = document.createTextNode("Back");
    leftArrow.appendChild(leftArrowText);
    history.appendChild(leftArrow);

    var rightArrow = document.createElement("a");
    rightArrow.setAttribute("href", ".");
    rightArrow.className = "timeline-right";
    var rightArrowText = document.createTextNode("Forward");
    rightArrow.appendChild(rightArrowText);
    history.appendChild(rightArrow);

    // assign onmouseover functions to links
    leftArrow.onclick = function() {
        moveElement("timeline-img", 705, 0, 25, 'start', 'start', 16, -1394);
        return false;
    }

    rightArrow.onclick = function() {
        moveElement("timeline-img", -705, 0, 25, 'start', 'start', 16, -1394);
        return false;
    }

}

function moveElement(elementID, x_increment, y_increment, interval, final_x, final_y, max_left, max_right) {
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);

    if (elem.movement) {
        clearTimeout(elem.movement);
    }

    if (!elem.style.left) {
        elem.style.left = "16px";
    }

    if (!elem.style.top) {
        elem.style.top = "0px";
    }

    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);

    if (final_x == 'start') {
        var final_x = xpos + x_increment;
    }

    // set the maximums for the left and right panning
    if (final_x < max_right) {
        final_x = max_right;
    } else if (final_x > max_left) {
        final_x = max_left;
    }

    if (final_y == 'start') {
        var final_y = ypos + y_increment;
    }

    if (xpos == final_x && ypos == final_y) {
        return true;
    }

    if (xpos < final_x) {
        var dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }

    if (xpos > final_x) {
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }

    if (ypos < final_y) {
        var dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
    }

    if (ypos > final_y) {
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }

    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+x_increment+","+y_increment+","+interval+","+final_x+","+final_y+")";
    elem.movement = setTimeout(repeat,interval);
}

// Load the stuff on the page!
addLoadEvent(setupTimeline);