Variable scope issue with javascript function
<p>I am trying to create a function with spin.js. The function loads the spinner, then if it is called again with it argument, then it stops the spinner. I can't get the variable scope right. So when I call the function to stop, I get an undefined on the <code>submitSpinner</code>.</p>

<p><a href="http://jsfiddle.net/atlchris/tQdZB/1/" rel="nofollow">http://jsfiddle.net/atlchris/tQdZB/1/</a></p>

<pre><code>function submitSpinner(stopSpinner) {
    var theSubmitSpinner;

    if (stopSpinner === true) {
        theSubmitSpinner.stop();

        $('#overlay').remove();
    }
    else {
        $('body').append('&lt;div id="overlay"&gt;&lt;div id="spinner"&gt;&lt;/div&gt;&lt;/div&gt;');

        theSubmitSpinner = new Spinner({
            lines: 13,
            length: 15,
            width: 5,
            radius: 20,
            color: '#ffffff',
            speed: 1,
            trail: 60,
            shadow: false
        }).spin(document.getElementById("spinner"));
    }
}

submitSpinner();

$(function() {
    $('#overlay').on('click', function() {
        alert('click');
        submitSpinner(true);
    });
});​
</code></pre>
