jQuery UI Change buttons based on which DIV is visible
<p>I've got a jquery dialog, with the buttons parameter.</p>

<p>In my dialog, I have a div which is twice the width with overflow hidden. The buttons are: "Cancel" or "Next". If they click cancel, it goes away. If they click next, the twice width div slides over, showing the next stage. This works fine, but I need then, the buttons, and their actions to change, to say "Go Back" which would slide back, and "Submit" which would submit a form. I have this, so far:</p>

<pre><code>    the_form.dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    width: 700,
    height: 500,
    'open': function(){
        $('#new_membership_form_content').load('/ajax', {'index': the_form.attr('data-index'), 'race_index': the_form.attr('data-index')});
    },
    'close': function(){
        $('#new_membership_form_content').html('&lt;img src="/wait.gif"/&gt;');
    },
    buttons: {
        'Cancel': function(){
            the_form.dialog('close');
        },
        'Next': function(){
            $("#join_form_container").animate({
                left: '-672px',
            }, 1500, "easeOutExpo");
        }
    }
});
</code></pre>

<p>Any help would be fantastic! :D Thanks in advance.</p>

<p>EDIT: Here is pseudo code for what I'm trying to achieve. It doesn't work, though... (Ignore the contents of the functions, they're just pasted).</p>

<pre><code>        buttons: {
        if($("#join_form_container").css("left") == "0px"){
            'No, thanks'     : function(){the_form.dialog('close')},
            'Add to basket'  : function(){$("#join_form_container").animate({left: '-672px'}, 1500, "easeOutExpo")},
        }else{
            'Go back'        : function(){$("#jasdainer").animate({left: '-672px'}, 1500, "easeOutExpo")},
            'Submit'         : function(){$("#jasdainer").animate({left: '-672px'}, 1500, "easeOutExpo")}
        }
    }
</code></pre>
