how to use ui.position, ui.offset and ui.helper

how to use ui.position, ui.offset and ui.helper


here is my code
<html>
<head>
<title>gallery</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></
script>
<script type="text/javascript" src="jquery.json-1.3.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>
<link rel="stylesheet" href="cupertino/jquery-ui-1.7.1.custom.css"
type="text/css" media="screen" />
<script type="text/javascript">
function getparams(s){
a = s.match(/[^&?=]*=[^&?=]*/g);
r = new Array();
if(a)
{
        for (i=0; i<a.length; i++) {
            r[i] = a[i].match(/[^&?=]*/)[0]+':'+a[i].match(/=([^&?]*)/)
[0].replace('=', '');
        }
}
return(r);
}
function ManagePhotos( filename, myparams )
{
    var params = $.evalJSON('{'+myparams+'}');
    $.get(filename,
            params,
            function(returned_data)
            {
                var $rs = $('<div id="ManagePhotos" class="ui-widget-content"></
div>');
                $rs.hide(0);
                $rs.css('border','1px solid #000');
                $rs.css('width','500px');
                $rs.css('background','#666666');
                $("#List").after($rs);
                $rs.html(returned_data);
                $rs.fadeIn(1000, function(){
                    $(this).css('display','block');
                    $("#ManagePhotos").draggable({
                        opacity: 0.7,
                        helper: 'original',
                        zIndex: 2700,
                    });
                });
            });
}
$(document).ready(function() {
    $("a[rel='editLinks']").live("click", function(){
        var filename = String($(this).attr('href').split("?",1));
        var myparams = getparams($(this).attr('href'));
        ManagePhotos(filename, myparams);
        return false;
    });
});
</script>
<style>
    #List{display:block; background:red; width: 800px; height:800px;}
    </style>
</head>
<body>
<ul id="List">
<li><a rel="editLinks" href="single_file_uploader.php" >add
photographs</a></li>
<li><a rel="editLinks" href="multiple_file_uploader.php" >add a list
of photographs</a></li>
</ul>
</body>
</html>
First I want to center the #ManagePhotos in the #List or if there
other ellement, i think there is no difference
second I want center the #ManagePhotos in the page
Please help with this issue, cause I don't see proper information on
documentation page
10x