Ragazzi!!! (sono mezzo orgoglione di me )

Senza saper ne legere e ne scrivere sono arrivato a questo punto: Clicca quì.

Ora mi rimane da risolvere 2 punti...
il primo (e il più importante) è quello di "bloccare" lo script quando si arriva alla fine delle immagini, sia all'inizio sia alla fine.

Per intenderci, la freccia di sinistra, appena aperta la pagina, non deve spostare le immagini a destra (altrimenti crea il vuoto).
Così come quando si arriva alla visualizzazione dell'immagine 6 la freccia di destra deve smettere di funzionare.

Il secondo problema è quello di dare l'effetto di movimento fluido.

Riporto il codice che ho creato fino ad ora:

Codice PHP:
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .masterBox{
            margin: 0 auto;
            width: 802px;
        }
    
        .firstBox{
            width: 740px;
            height: 200px;
            border: 1px solid #000;
            overflow: hidden;
            float: left;
        }
        
        .secondBox{
            width: 1200px;
            height: 300px;
            padding: 20px 0 20px 20px;
        }
        
        .secondBox img{
            float: left;
            margin-right: 20px;
        }
        
        .arrowLeft{
            width: 30px;
            height: 200px;
            line-height: 200px;
            float: left;
            text-align: center;
        }
        
        .arrowRight{
            width: 30px;
            height: 200px;
            line-height: 200px;
            float: left;
            text-align: center;
        }
    </style>
    
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


    <script>
        mrg=0;
        function righrarrow () {
            mrg=mrg-180;
            $("#secondB").css("margin-left",mrg);
        }
        function leftrarrow () {
            mrg=mrg+180;
            $("#secondB").css("margin-left",mrg);
        }
    </script>
    
    
</head>

<body>
    
    <div class="masterBox">
        <div class="arrowLeft">
            <a href="javascript:leftrarrow();">
                <<
            </a>
        </div>
        <div class="firstBox">
            <div id="secondB" class="secondBox">
                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/1.jpg[/img]
                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/2.jpg[/img]
                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/3.jpg[/img]
                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/4.jpg[/img]
                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/5.jpg[/img]
                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/6.jpg[/img]
            </div>
        </div>
        <div class="arrowRight">
            <a href="javascript:righrarrow();">
                >>
            </a>
        </div>
    </div>



</body>
</html>