timeline.js

$(document).ready(function() {
    var paused = true;
    var interval;
    var currentTime = 0;
    var duration = 100;
    var pButton = document.getElementById('pButton'); // play button
    var playhead = document.getElementById('playhead'); // playhead
    var timeline = document.getElementById('timeline'); // timeline

    // timeline width adjusted for playhead
    var timelineWidth = 200;

    // play button event listenter
    pButton.addEventListener("click", play);


    // makes timeline clickable
    timeline.addEventListener("click", function(event) {
        moveplayhead(event);
    }, false);

    // returns click as decimal (.77) of the total timelineWidth
    function clickPercent(event) {
        return (event.clientX - getPosition(timeline)) / timelineWidth;
    }

    // makes playhead draggable
    playhead.addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

    // Boolean value so that audio position is updated only when the playhead is released
    var onplayhead = false;

    // mouseDown EventListener
    function mouseDown() {
        onplayhead = true;
        window.addEventListener('mousemove', moveplayhead, true);
    }

    // mouseUp EventListener
    // getting input from all mouse clicks
    function mouseUp(event) {
        if (onplayhead == true) {
            moveplayhead(event);
            window.removeEventListener('mousemove', moveplayhead, true);
            // change current time
        }
        onplayhead = false;
    }
    // mousemove EventListener
    // Moves playhead as user drags
    function moveplayhead(event) {
        var newMargLeft = event.clientX - getPosition(timeline);

        if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
            playhead.style.marginLeft = newMargLeft + "px";
            currentTime = (timelineWidth * (newMargLeft / duration));
        }
        if (newMargLeft < 0) {
            playhead.style.marginLeft = "0px";
            currentTime = 0;
        }
        if (newMargLeft > timelineWidth) {
            playhead.style.marginLeft = timelineWidth + "px";
            currentTime = duration;
        }
    }

    // timeUpdate
    // Synchronizes playhead position with current point in audio
    function timeUpdate() {
        var playPercent = timelineWidth * (currentTime / duration);
        playhead.style.marginLeft = playPercent + "px";
        $.post("/ticktock", {
            javascript_data: currentTime
        });

        $.ajax({
            url: "/eval_network",
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json',
            mimeType: 'application/json',
            success: function(data) {
                // source.addFeatures(featuresLive);
                var feat = source.getFeatures();
                for (var i = 0; i < feat.length; i++) {
                    var id = feat[i].O.id;

                    for (var j = 0; j < data[1].length; j++) {
                        if (id == data[1][j].id) {
                            feat[i].flow = data[1][j].flow;
                        }
                    }

                }
                console.log(feat);
            },
            error: function(data, status, er) {
                console.log(er);
            }
        });

    }

    //Play and Pause
    function play() {
        if (paused) {
            paused = false;
            // remove play, add pause
            pButton.className = "";
            pButton.className = "pause";
            interval = setInterval(function() {
                currentTime += 5;
                timeUpdate();
            }, 2000);

        } else { // pause music
            // remove pause, add play
            paused = true;
            pButton.className = "";
            pButton.className = "play";
            clearInterval(interval);
            interval = 0;
        }
    }

    // Returns elements left position relative to top-left of viewport
    function getPosition(el) {
        return el.getBoundingClientRect().left;
    }
});