реализовать toggle события click

[ivanWantsToKnow]

При клике на start включается секундомер и меняется значение кнопки на pause. Как сделать, чтобы при повторном нажатии значение кнопки снова менялось на start и секундомер останавливался на текущем значении?

<h2 class='stopwatch'>0</h2>
 <button class='btn-toggle'>Start</button>

var i = 0,
    timer;
document.querySelector('.btn-toggle').addEventListener('click', start, false);

function start() {
  timer = setInterval(increment, 1);
  document.querySelector('.btn-toggle').innerHTML = 'Pause';
  
}

function increment() {
  i++;
  document.querySelector('.stopwatch').innerHTML = i/1000;
}

function stop() {
  clearInterval(timer);
}

Вот для удобства http://jsbin.com/kizavuwoxa/1/edit?html,js,output
Спасибо за ответы, напутствия, направления!

[рони]

ivanWantsToKnow,

<h2 class='stopwatch'>0</h2>
<button class='btn-toggle'>Start</button>

<script>
var i = 0,
    timer,
    n = 1;
document.querySelector('.btn-toggle').addEventListener('click', start, false);

function start() {

    document.querySelector('.btn-toggle').innerHTML = n ? (timer = setInterval(increment, 1), 'Pause') : (stop(), 'Start');
    n ^= 1;
}

function increment() {
    i++;
    document.querySelector('.stopwatch').innerHTML = i / 1000;
}

function stop() {
    clearInterval(timer);
}
</script>

[ivanWantsToKnow]

рони,
Спасибо большое! Только я не вполне понял как получается, что мы записываем timer и строку 'Pause' в innerHTML, но записывается только строка, а таймер отрабатывает так как если бы он был объявлен отдельным statement'ом... Можешь, пожалуйста, прокомментировать это и строку n ^= 1? Решение очень простое и элегантное, но мне не хватает смекалки, чтобы до конца разобраться...

[рони]

как получается, что мы записываем timer и строку 'Pause' в innerHTML, но записывается только строка,

http://learn.javascript.ru/operators#оператор-запятая

n ^= 1?

генератор 0 1 0 1 false true

[ivanWantsToKnow]

рони,
Спасибо за объяснения, это для меня много прояснило