pausing jquery countdown timer button

I've looked up many ways to pause and resume a jQuery countdown but for the life of me can't get it to work with what I have here.

Can anyone point me in the right direction on what I need to attach to the pause button to pause/resume?

Also I'd like to have the timer NOT go past 0 when clicking remove 10 seconds or cut time in half, it its more than 0 just stop at 0 and play the sound. It currently goes to a negative number then bounces back to positive numbers and continues to count down, this isn't what I expected it to do :-/

Currently have: jsFiddle

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="timercontainer">
<div id="timerdiv">
</div>
<div class="section">
<input id="ten" type="submit" value="start 10 seconds">
<input id="twenty" type="submit" value="start 20 seconds">
<input id="thirty" type="submit" value="start 30 seconds">
<input id="one-min" type="submit" value="start 1 min">
<input id="five-min" type="submit" value="start 5 min">
</div>
<div class="section">
<input id="add" type="submit" value="add 10 seconds">
<input id="remove" type="submit" value="remove 10 seconds"></div>
<div class="section">
<input id="half" type="submit" value="cut time in half">
<input id="double" type="submit" value="double time"><br />
<input id="pause" type="submit" value="pause">
</div>
</body>

javascript

pingSound = new Audio("https://www.sounddogs.com/previews/2176/mp3/115553_SOUNDDOGS__ca.mp3");
pingSoundNear = new Audio("https://www.sounddogs.com/previews/25/mp3/234977_SOUNDDOGS__cl.mp3");
pingSound.preload = "auto";
pingSoundNear.preload = "auto";
timeout = null;
time = null;

$('#ten').on('click', function(){
        startCountdown(10, 1000, end);
});
$('#twenty').on('click', function(){
        startCountdown(20, 1000, end);
});
$('#thirty').on('click', function(){
        startCountdown(30, 1000, end);
});
$('#one-min').on('click', function(){
        startCountdown(60, 1000, end);
});
$('#five-min').on('click', function(){
        startCountdown(300, 1000, end);
});

$('#pause').on('click', function(){
        time = clearInterval(time);
    });
$('#add').on('click', function(){
    time = time+10;
    startCountdown(time, 1000, end);
});
$('#remove').on('click', function(){
    time = time-10;
    startCountdown(time, 1000, end);
});
$('#half').on('click', function(){
    time = time *.5;
            roundedTime = Math.round(time);
    startCountdown(roundedTime, 1000, end);
});
$('#double').on('click', function(){
    time = time *2;
            roundedTime = Math.round(time);
    startCountdown(roundedTime, 1000, end);
});

$('#pause').click(function () {
    if (clicked) {
        counter = setInterval(function () {
            var m = $('.min', timer),
                s = $('.sec', timer);
            if (seconds === 0) {
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }
            m.text(minutes);
            s.text(leadingZero(seconds));
        }, 1000);
    } else {
        clearInterval(counter);
    }
    clicked = !clicked;
});

function startCountdown(timen, pause, callback) {
    time = timen;
    $('#timerdiv').html(timen);
            if (timen < 10) {
                pingSoundNear.play();
            }
            if (timen > 10) {
                pingSoundNear.pause();
            }
            if (timen <= 0) {
                pingSound.play();
                pingSoundNear.pause();
            }
            else
            {
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            startCountdown(timen-1, pause, callback)
        }, pause);
    }
}
function end() {
 /*      alert(); */
                    pingSound.play();
}

Solution

Theres a solution here i thought was pretty cool. Let the interval continue going on and only update the display when the paused variable is set to false.

You can add an if statement to the top of the function that runs in setInterval that checks to see if the timer is paused, if it isnt then continue normally if it is then dont do anything.