title: Return value from javascript function
body: <p>I have a section of code in my <code>$(document).ready(function() {}</code> that reads: 
  <code>getInitial(len);</code> 
  Where len is an integer.  </p>
  
  <pre><code>function getInitial(number){
      number--;
      if(number &lt; 0) return
      var $items = $(balls()); 
      $items.imagesLoaded(function(){
          $container
          .masonry('reloadItems')
          .append( $items ).masonry( 'appended', $items, true );
      });
      getInitial(number);
  }
  </code></pre>
  
  <p>Notice the line that reads: <code>var $items = $balls(());</code>  </p>
  
  <p>That is defined as: </p>
  
  <pre><code>function balls(){
      $iterator -= 1;
      if($iterator &lt; 0){
          var $boxes = $( '&lt;div class="box"&gt;No more games!&lt;/div&gt;' );
          $container.append( $boxes ).masonry( 'appended', $boxes, false );   
          return; 
      }
      var imgPreload = new Image();
      var ret; 
      imgPreload.src = 'scripts/php/timthumb.php?src='+$test[$iterator][2]+'&amp;q=100&amp;w=300';
      $(".imgHolder").append('&lt;img src="'+imgPreload.src+'"/&gt;');
      //console.log(imgPreload);
      $(".imgHolder").imagesLoaded(function(){
          ret = '&lt;div class="box" style="width:18%;"&gt;'
              +'&lt;p&gt;'+$test[$iterator][1][2]['name']+'&lt;/p&gt;'
              +'&lt;img src="'+imgPreload.src+'"/&gt;'//Replace this with the one below when timthumb is whitelisted
              +'&lt;div id=boxBottom&gt;'+Math.floor($test[$iterator][0]*100)+'%&lt;/div&gt;'
              +'&lt;/div&gt;';
      });
      console.log(ret);
      return ret;
  }
  </code></pre>
  
  <p>My question is how can I get <code>ret</code> from the imagesLoaded() method inside of the <code>balls()</code> function to return to the <code>$items</code> inside of <code>getInitial()</code>?  </p>
  
  <p>I hope there's no more confusion. </p>