$(function()
{
   var cal;
   var $this;

   var checkForMouseout = function(event)
   {
      var el = event.target;

      while (true){
         if (el == cal) {
            return true;
         } else if (el == document) {
            $this.dpClose();
            return false;
         } else {
            el = $(el).parent()[0];
         }
      }
   };

   $('.date-pick')
      .datePicker()
      .bind(
         'dpDisplayed',
         function(event, datePickerDiv)
         {
            cal = datePickerDiv;
            $this = $(this);
            $(document).bind(
               'mouseover',
               checkForMouseout
            );
         }
      ).bind(
         'dpClosed',
         function(event, selected)
         {
            $(document).unbind(
               'mouseover',
               checkForMouseout
            );
         }
      );

});

//el is set above or below, call is set globally in the document.ready
while (true){ //this will loop forever until a return
     if (el == cal) { //is the receiving element the calender
        return true; //we return true (no ideo why true and not null or 'yaadada'
     } else if (el == document) { //we check if the target el is the document
        $this.dpClose();  //close the element
        return false; //return to leave loop
     } else { //el is neither the call or the document
        el = $(el).parent()[0]; //set el to the imidiate parent of the current el and reloop
     }
}

$('.date-pick')
  .datePicker()
  .bind(
     'dpDisplayed',
     function(event, datePickerDiv)
     {
        cal = datePickerDiv; //datepickerdiv should somehow hold the the datpicker div , something like: $('.date-pick')[0];
        $this = $(this);
        $(cal).mouseleave( function() { $(this).dpClose(); });
     }
}