I have this code:

$(function() {
    var mainButtons = [
        {text: "Invite"
        , 'class': 'invite-button'
        , click: function() {
            // get list of members
            alert('Invite was clicked...');
            }
        } // end Invite button
        , {text: "Options"
        , 'class': 'options-button'
        , click: function() { 
            alert('Options...'); 
            }
        } // end Options button
    ] // end mainButtons
    , commentButtons = [
        {text: "Clear"
        , 'class': 'clear-button'
        , click: function() { 
            $('#comment').val('').focus().select();
            }
        } // end Clear button
        , {text: "Post comment"
        , 'class': 'post-comment-button'
        , click: function() { 
            alert('send comment...');
        }
        } // end Post comment
    ] // end commentButtons

    $( "#form" ).dialog({
        autoOpen: false
        , height: 465
        , width: 700
        , modal: true
        , position: ['center', 35]
        , buttons: mainButtons
    });    
    $( "#user-form" )
        .button()
        .click(function() {
            $(this).effect("transfer",{ to: $("#form") }, 1500);
            $( "#form" ).dialog( "open" );
            $( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
            $( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
        });

    // Add comment...
    $("#comment, .comment").click(function(){
        $('#comment').focus().select();
        $("#form").dialog({buttons: commentButtons});
        $( ".post-comment-button" ).button({ icons: {primary:'ui-icon-comment'} });
        $( ".clear-button" ).button({ icons: {primary:'ui-icon-refresh'} });
    }); //Add comment

    // Bind back the Invite, Options buttons
    $(".files, .email, .event, .map").click(function(){
        $("#form").dialog({buttons: mainButtons});
        $( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
        $( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
    });

    // Tabs
    $( "#tabs" ).tabs();
    $( ".tabs-bottom .ui-tabs-nav, .ui-tabs-nav > *" )
        .removeClass( "ui-widget-header" )
        .addClass( "ui-corner-bottom" );

});

? What is the right way to add the button icons? As in my code I had to add it two times, once:

$( "#user-form" )
        .button()
        .click(function() {
            $(this).effect("transfer",{ to: $("#form") }, 1500);
            $( "#form" ).dialog( "open" );
...

and

$(".files, .email, .event, .map").click(function(){ ...

Could this code be improved further? I don't seem to be able to get the "transfer" effect to work correctly in a modal. I added:

, close: function() { $(this).effect("transfer",{ to: $("#user-form") }, 1500); }

to the $( "#form" ).dialog({

How would you go about in getting the "transfer" to work nicely when you open and close the dialog box?