How to call a variable or function inside of another JavaScript function
<p>I am using this JavaScript Spinner/loader project <a href="http://fgnass.github.io/spin.js/" rel="nofollow">http://fgnass.github.io/spin.js/</a></p>

<p>I have some code on a JSFiddle here <a href="http://jsfiddle.net/jasondavis/9pBsr/" rel="nofollow">http://jsfiddle.net/jasondavis/9pBsr/</a> that shows my progress, it may look like overkill with all the functions I have but I have stripped out all the non-relevent stuff for this post.  So if you can help me, please leave all the structure the same way as it is.</p>

<p>Now my Problem.  The library I am using has this code to show the spinner </p>

<pre><code>var spinner = new Spinner(opts).spin(target);
</code></pre>

<p>The documentation says to kill and hide the spinner to run a <code>stop</code> function on the <code>Spinner</code> but the way my code is structured, I am not sure how to access it because I keep getting errors like </p>

<p><code>TypeError: Cannot call method 'stop' of undefined</code></p>

<p>My end result is to be able to call this and have it stop/kill the spinner...</p>

<pre><code>zPanel.loader.hideLoader()
</code></pre>

<p>Here is my JavaScript but all the JS and HTML is on this JSFiddle <a href="http://jsfiddle.net/jasondavis/9pBsr/" rel="nofollow">http://jsfiddle.net/jasondavis/9pBsr/</a></p>

<p>Please help me to get the <code>zPanel.loader.hideLoader()</code> function to call the <code>zPanel.loader.buildSpinner()</code> functions <code>Spinner.stop()</code></p>

<pre><code>var zPanel = {

    init: function() {
        $(document).ready(function() {
            zPanel.loader.init();
        });
    },



    loader: {

        init: function() {
            //Bind zloader to button click
            $('#button').click(function() {
                zPanel.loader.showLoader();
            });

            $('#hidebutton').click(function() {
                zPanel.loader.hideLoader();
            });
        },

        showLoader: function() {
            //Show Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").show();
                zPanel.loader.buildSpinner();
            });
        },

        hideLoader: function() {
            //Hide  Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").hide();

                // This is the function that is not working yet
                //zPanel.loader.spinner('stop');
                zPanel.loader.buildSpinner.spinner.stop();
            });
        },

        buildSpinner: function() {

            var opts = {
              lines: 9, // The number of lines to draw
              length: 11, // The length of each line
              width: 13, // The line thickness
              radius: 40, // The radius of the inner circle
              corners: 0.4, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              color: '#000', // #rgb or #rrggbb
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: 200, // Top position relative to parent in px
              left: 'auto' // Left position relative to parent in px
            };

            var target = document.getElementById('zloader_content');
            var spinner = new Spinner(opts).spin(target);

            // I need to call spinner.stop() some how from my function above name hideLoader()

        },

    }

};

zPanel.init();
</code></pre>
