JQuery: Movendo um objeto por todos os lados da tela

<script type="text/javascript">
    $(function() {
        $("#btnStart").click(function(){
            // largura da tela
            var larguraTela = $(window).width();
            // altura da tela
            var alturaTela  = $(document).height();
            // largura do quadrado + borda direita e esquerda
            var larguraElem = 180+2; // 2 refere-se a borda
            // altura do quadrado + borda superior e inferior
            var alturaElem  = 80+2; // 2 refere-se a borda
 
            $("#elemento").html("para esquerda...").animate({
                // move para direita
                marginLeft: (larguraTela - larguraElem)+"px"
            },
            2000,
            function() {
                $(this).html("descendo...").animate({
                    // move para baixo
                    marginTop: (alturaTela - alturaElem)+"px"
                },
                2000,
                function(){
                    $(this).html("direita vou ver...").animate({
                        // move para esquerda
                        marginLeft: "0px"
                    },
                    2000,
                    function(){
                        $(this).html("subindo...").animate({
                            // move para cima
                            marginTop: "0px"
                        },
                        2000,
                        function(){
                            $(this).html("CHEGAMOS!!!");
                        });
                    });
                });
            });
        });
    });
</script>

<style>
    body{ font-family: arial; }
    #elemento{ position: absolute; top: 0; left: 0; background-color: #FF0000; color: #FFF; }
    #btnStart{ margin-top: 80px; }
</style>

<input type="button" id="btnStart" value="START">
<div id="elemento" style="border:1px solid #000; width:180px; height:80px;"></div>