slideshow thumbnails not working

[GraficRegret]

here is the slideshow styles,

<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { 
position:relative; height:361px; width:640px; margin:0 auto;
background: #000;
padding: 0px;
 }
.fadein img { position:absolute; left:0px; top:0px; }
</style>

here is the javascript

<script type="text/javascript">

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 5000);
});

</script>

and here are the phps calling the photos

$picSql = mysql_query("SELECT * FROM uploads WHERE ref_id = '$refID'");

$picSql2 = mysql_query("SELECT * FROM uploads WHERE ref_id = '$refID'");

and the codes using the photos

        <div class="fadein">
            <?php
            while($picRow = mysql_fetch_array($picSql))
            {
                ?>
                <img src="pics/<?php echo $picRow['name']; ?>" height="361" width="640">
                <?php
            }
            ?>
       </div>

        <?php
        while($picRow2 = mysql_fetch_array($picSql2))
        {
            ?>
            <img src="pics/<?php echo $picRow2['name']; ?>" width="80" height="70" border="0"> </a>
            <?php
        }
        ?>

my problem is getting the thumbnails to work right if I use the same "$picRow" to display both areas neither work and no matter what I try I cant get the thumbnails to change the larget picture, i know I am wrong about a few things, please help me fix this.