Buttons in the dialog box

Can someone tell me how to connect the buttons to the dialog box. Infa hence. A piece of my non-working code

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript"> 
    $(document).ready(function(){
        $(".panel:even").addClass("alt");
        $(".panel .btn-delete").click(function(){
            $(function() {
                $( "#del" ).dialog();
            });

            $(this).parents(".panel").animate({ backgroundColor: "#fbc7c7" }, "fast")
                .animate({ opacity: "hide" }, "slow")
            return false;
        });

        $(".panel .edit").click(function(){
            $(function() {
                $( "#dialog" ).dialog();
            });
            $( "#dialog" ).dialog({ buttons: [
                {
                    text: "Ok",
                    click: function() { $(this).dialog("close"); }
                }
            ]})
        });
    });
</script> 

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

The window shows with a button.
1 Home
Delete / Edit
2 Left
Delete / Edit
3 Right
Delete / Edit
4 Average
Delete / Edit
I'm in a dialog
For some reason, the label is always at the bottom of the text, although it should be in the window.
And with the buttons I did not understand how to do it.