// Our app

var state = {items: ['dog', 'jumps']};

​

function render(state) {

    var span = '<span id="count">Words: ' + state.items.length + '</span>';

    var lis = state.items.map(function (item) {

        return '<li>' + item + '</li>';

    });

    return span + '<ul>' + lis.join('') + '</ul>';

}

​

function updateUI(loading) {

    if (!loading) saveState();

    $('#ui').html(render(state));

}

​

// app events

$('#ui').on('click', 'li', function () {

    state.items.splice($(this).index(), 1);

    updateUI();

});

​

$('#add').on('click', function () {

    state.items.push(getNextString());

    updateUI();

});

​

function getNextString() {

    var words = 'The quick brown fox jumps over the lazy dog'.split(' ');

    return words[Math.floor(Math.random() * words.length)];

}

​

updateUI();

​

​

// Time travel

var time;

​

function updateTimeUI() {

    $('#time-pos').html('Position ' + (time.pos + 1) + ' of ' + time.history.length);

    $('#back').prop('disabled', time.pos <= 0);

    $('#next').prop('disabled', time.pos >= time.history.length - 1);

}

​

function saveState() {

    time = time || {history: [], pos: -1};

    // delete alternate future history

    time.history.splice(time.pos+1);

    // push state to history

    time.history.push(deepcopy(state));

    time.pos++;

    updateTimeUI();

}

​

$('#back').on('click', function () {

    // Move history pointer

    time.pos--;

    updateTimeUI();

    // Load historic state

    state = deepcopy(time.history[time.pos]);

    updateUI(true);

});

$('#next').on('click', function () {

    // Move history pointer

    time.pos++;

    updateTimeUI();

    // Load historic state

    state = deepcopy(time.history[time.pos]);

    updateUI(true);

});

​

function deepcopy(obj) {

  return $.extend(true, {}, obj);

}

​