jQuery UI not firing callback function properly

jQuery UI not firing callback function properly


Maybe it's my programming error, or maybe not, but either way i could
use some help.
I have an app: http://www.toolwebshop.com/_calorie_tracker/website/mynumber.php
that updates multiple elements using the jquery UI slider. The
function is nested within the slider with this code (works btw):
<code>
<script type="text/javascript">
    /* <![CDATA[ */
        $(document).ready(function() {
            $("#slider").slider({
                value: <?php if($_POST['lose']) { echo $_POST['lose']; } else
{ echo "0"; }; ?>,
                min: -15,
                max: 15,
                step: .25,
                slide:
                function calculate(event, ui){
                    profile        = new Object();
                    profile.n     = $("#name").val();
                    profile.w    = $("#weight").val();
                    profile.h    = $("#height").val();
                    profile.a    = $("#age").val();
                    profile.s    = $("#sex").val();
                    profile.m    = $("#activity").val();
                    $("#lose").val(ui.value);
                    if( profile.s == "M" )    { profile.bmr = (66 + (6.23 * (profile.w -
ui.value)) + (12.7 * profile.h) - (6.8 * profile.a)) * profile.m; }
                    if( profile.s == "F" )    { profile.bmr = (655 + (4.35 * (profile.w
- ui.value)) + (4.7 * profile.h) - (4.7 * profile.a)) * profile.m; }
                    if( profile.s == "P" )    { profile.bmr = (1155 + (4.35 * (profile.w
- ui.value)) + (4.7 * profile.h) - (4.7 * profile.a)) * profile.m; }
                    $("#bmr").val(Math.round(profile.bmr));
                    $(".calper").each(function(){
                        calper = parseInt($(this).children(".percent").text())/100;
                        $(this).children(".number").text(Math.round(profile.bmr *
calper));
                    });
                    if( ui.value < -10 && $(".warning:hidden")){
                        $(".warning").fadeIn("slow");
                    }
                    if( ui.value > -10 && $(".warning:visible")){
                        $(".warning").fadeOut("slow");
                    }
                    if( ui.value == 0 )    { $(".lose label").text("Maintain
Weight:"); }
                    if( ui.value < 0 )    { $(".lose label").text("Lose LBS:"); }
                    if( ui.value > 0 )    { $(".lose label").text("Gain LBS:"); }
                }
            });
        });
    /* ]]> */
    </script>
</code>
However, when i try to remove the function to make it accessible
outside of the slider() the callback does not fire on mouse event:
<code>
function calculate(event, ui){
                profile        = new Object();
                profile.n     = $("#name").val();
                profile.w    = $("#weight").val();
                profile.h    = $("#height").val();
                profile.a    = $("#age").val();
                profile.s    = $("#sex").val();
                profile.m    = $("#activity").val();
                $("#lose").val(ui.value);
                if( profile.s == "M" )    { profile.bmr = (66 + (6.23 * (profile.w -
ui.value)) + (12.7 * profile.h) - (6.8 * profile.a)) * profile.m; }
                if( profile.s == "F" )    { profile.bmr = (655 + (4.35 * (profile.w -
ui.value)) + (4.7 * profile.h) - (4.7 * profile.a)) * profile.m; }
                if( profile.s == "P" )    { profile.bmr = (1155 + (4.35 * (profile.w
- ui.value)) + (4.7 * profile.h) - (4.7 * profile.a)) * profile.m; }
                $("#bmr").val(Math.round(profile.bmr));
                $(".calper").each(function(){
                    calper = parseInt($(this).children(".percent").text())/100;
                    $(this).children(".number").text(Math.round(profile.bmr *
calper));
                });
                if( ui.value < -10 && $(".warning:hidden")){
                    $(".warning").fadeIn("slow");
                }
                if( ui.value > -10 && $(".warning:visible")){
                    $(".warning").fadeOut("slow");
                }
                if( ui.value == 0 )    { $(".lose label").text("Maintain Weight:"); }
                if( ui.value < 0 )    { $(".lose label").text("Lose LBS:"); }
                if( ui.value > 0 )    { $(".lose label").text("Gain LBS:"); }
            }
            $("#slider").slider({
                value: <?php if($_POST['lose']) { echo $_POST['lose']; } else
{ echo "0"; }; ?>,
                min: -15,
                max: 15,
                step: .25,
                slide: calculate(event, ui)
            });
</code>
I did a test with a basic function giving an alert, and when the page
would first load the function would be called, however, after i
started moving the slider, it wouldn't fire. Any ideas? Any other
suggestions to clean up my code?
THANKS!