title: Callback executing before being called
body: <p>Am trying to implement a confirm dialog with fancy box. My javascript code is arranged into modules.</p>
  
  <p>I've set up the confirm dialog function inside a module called "Utility"</p>
  
  <pre><code>var Utility = (function() {
      function confirm_dialog(title,msg,callback)
          {
              var html = '&lt;div class="confirm-box"&gt;'+
                         '&lt;div class="confirm-title"&gt;'+title+'&lt;/div&gt;'+
                         '&lt;div class="confirm-msg"&gt;'+msg+'&lt;/div&gt;'+
                         '&lt;div class="confirm-buttons"&gt;'+
                         '&lt;button class="okBtn"&gt;Ok&lt;/button&gt;'+
                         '&lt;button class="cancelBtn"&gt;Cancel&lt;/button&gt;'+
                         '&lt;/div&gt;'+
                         '&lt;/div&gt;';
              var ret;
              $.fancybox('&lt;div class="confirm-dialog"&gt;&lt;/div&gt;',
              {
                  'width':400,
                  'height':250,
                  'content':html,
                  'modal' : true,
                  'transitionIn' : 'none',
                  'transitionOut': 'none',
                  'speedIn' : 300,
                  'speedOut' : 300,
                  'autoScale' : false,
                  'scrolling' : 'no',
                  'overlayShow' : true,
                  'overlayOpacity' : 0.3,
                  'overlayColor' : '#666',
                  'padding':10,
                  'onComplete':function() {
                      $('.okBtn').click(function(){
                              ret = true;
                              $.fancybox.close();
                          })
                      $('.cancelBtn').click(function() {
                          ret = false;
                          $.fancybox.close();
                      })
                  },
                  onClosed : function() {
                       if (typeof callback == 'function'){ callback.call(this, ret); } }
              });
          }
          return { dialog : confirm_dialog }
  })();
  </code></pre>
  
  <p>This is event handler that triggers the dialog</p>
  
  <pre><code>$('a.deletePheed').click(function(e) {
                              var id = $(this).parent('div.pheed-holder').attr('data-id');
                          Utility.dialog('Delete Pheed','Are sure you want to delete this pheed ?',
                          PheedModule.delete_pheed());
                              e.preventDefault();
                          });
  </code></pre>
  
  <p>Once the event handler is clicked the callback is immediately fired before the dialog is even displayed,and those not execute when ok is click in the confirm dialog.
  What i am not doing correctly?</p>