var speed = 5; // 5 - 20 please, no more, no less. this controls how the speed of the animation
var yearsPassed = 4; // 1 - 4 please, no more, no less. this controls how many years are hidden with each click
var dist = 5 * yearsPassed; // do not change the dist equation

// do not change anything below this line unless you modify the css
var index = 0;
var timer;
var direction;
var h1s;
var widget;
var container;
var timeline;
var firstDiv;
var margin;
var leftDiv;
var leftImage;
var rightDiv;
var rightImage;
var inMotion = false;

function fillVars() { // instantiates all empty variables
    container = document.getElementById("container");
    h1s = container.getElementsByTagName("h1");
    timeline = container.getElementsByTagName("div")[0];
    firstDiv = container.getElementsByTagName("div")[1];
    margin = parseFloat(timeline.style.marginLeft.replace("px", ""));
    rightDiv = document.getElementById("right");
    rightImage = document.getElementById("rightImage");
    leftDiv = document.getElementById("left");
    leftImage = document.getElementById("leftImage");
    widget = document.getElementById("widget");
}

function adjustControls() {
    fillVars();
    container = document.getElementById("container");
    widget.style.display = "block";
    leftDiv.style.height = rightDiv.style.height = container.offsetHeight + "px";
    leftImage.style.height = rightImage.style.height = container.offsetHeight - 25 + "px"
}

function leftClick(element) {
    document.getElementById("hideSelect").select();
    if (inMotion == false && margin < 0 && margin < firstDiv.offsetWidth * h1s.length - 4) {
        rightDiv.className = "right";
        direction = "left";
        index = index + yearsPassed;
        moveContainer();
        inMotion = true;
    }
    margin = parseFloat(timeline.style.marginLeft.replace("px", ""));
    _gaq.push(['_trackEvent', 'Timeline', 'clickleft', '']);
}

function rightClick(element) {
    document.getElementById("hideSelect").select();
    if (inMotion == false && margin <= 0 && margin > -firstDiv.offsetWidth * (h1s.length - 4)) {
        leftDiv.className = "left";
        direction = "right";
        index = index - yearsPassed;
        moveContainer();
        inMotion = true;
    }
    margin = parseFloat(timeline.style.marginLeft.replace("px", ""));
    _gaq.push(['_trackEvent', 'Timeline', 'clickright', '']);
}

function moveContainer() {
    window.clearInterval(timer);
    margin = parseFloat(timeline.style.marginLeft.replace("px", ""));
    var distance = direction == "left" ? dist : -dist;
    if ((margin != index * firstDiv.offsetWidth) && (direction == "right" && margin > (-firstDiv.offsetWidth * (h1s.length - 3)) + (container.offsetWidth - (firstDiv.offsetWidth * 3)))) {
        timeline.style.marginLeft = margin + distance + "px";
        timer = window.setInterval(moveContainer, speed);

    } else if (direction == "left" && margin != index * firstDiv.offsetWidth) {
        timeline.style.marginLeft = margin + distance + "px";
        timer = window.setInterval(moveContainer, speed);
    }
    else {
        if (margin == 0) {
            leftDiv.className = "leftOff";
        }
        if ((margin == (-firstDiv.offsetWidth * (h1s.length - 4)) - 5)) {
            rightDiv.className = "rightOff";
        }
        inMotion = false;
    }
}

function finishTimer() {
    window.clearInterval(timer); // memory management
    timer = null;
}

window.onunload = finishTimer;