jquery: stopwatch
<p>I'm using the <code>stopwatch</code> code I found here:
<a href="http://www.kellishaver.com/projects/stopwatch/" rel="nofollow">http://www.kellishaver.com/projects/stopwatch/</a></p>

<pre><code>(function($) {
    $.fn.stopwatch = function() {
        var clock = this;
        var timer = 0;

        clock.addClass('stopwatch');

        //console.log(clock);

        // This is bit messy, but IE is a crybaby and must be coddled. 
        clock.html('&lt;div class="display"&gt;&lt;span class="hr"&gt;00&lt;/span&gt;:&lt;span class="min"&gt;00&lt;/span&gt;:&lt;span class="sec"&gt;00&lt;/span&gt;&lt;/div&gt;');
        clock.append('&lt;input type="button" class="start" value="Start" /&gt;');
        clock.append('&lt;input type="button" class="stop" value="Stop" /&gt;');
        clock.append('&lt;input type="button" class="reset" value="Reset" /&gt;');

        //console.log(clock.html());

        // We have to do some searching, so we'll do it here, so we only have to do it once.
        var h = clock.find('.hr');
        var m = clock.find('.min');
        var s = clock.find('.sec');
        var start = clock.find('.start');
        var stop = clock.find('.stop');
        var reset = clock.find('.reset');

        stop.hide();

        start.bind('click', function() {
            timer = setInterval(do_time, 1000);
            stop.show();
            start.hide();
        });

        stop.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            start.show();
            stop.hide();
        });

        reset.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            h.html("00");
            m.html("00");
            s.html("00");
            stop.hide();
            start.show();
        });

        function do_time() {
            // parseInt() doesn't work here...
            hour = parseFloat(h.text());
            minute = parseFloat(m.text());
            second = parseFloat(s.text());

            second++;

            if(second &gt; 59) {
                second = 0;
                minute = minute + 1;
            }
            if(minute &gt; 59) {
                minute = 0;
                hour = hour + 1;
            }

            h.html("0".substring(hour &gt;= 10) + hour);
            m.html("0".substring(minute &gt;= 10) + minute);
            s.html("0".substring(second &gt;= 10) + second);
        }
    };
})(jQuery);
</code></pre>

<p>And I use it like this: </p>

<pre><code>&lt;script type="text/javascript"&gt;
    $('#clock1').stopwatch();
&lt;/script&gt;
</code></pre>

<p>It works fine and I can stop it using the stop button. However I would like to be able to stop it programatically using javascript. Something like this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $('#clock1').stop();
&lt;/script&gt;
</code></pre>

<p>I created the <code>stop</code> function but I cannot access the <code>timer</code> var defined in <code>stopwatch()</code>. How can I do it?</p>
