jQuery infinite thumbnail scroll loop
<p>I am developing an image thumbnail scroll with infinite loop. I got the the scrolling part to work but not the loop.</p>

<p>here is a live demo of what I have done <a href="http://jsfiddle.net/tVbkM/1/" rel="nofollow">http://jsfiddle.net/tVbkM/1/</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="a_top"&gt;Top&lt;/div&gt;
  &lt;div id="s_area"&gt;
   &lt;div id="s_container"&gt;
    &lt;div id="s_cont"&gt;
      &lt;img class="img_none" src="http://tinyurl.com/buev4y2" width="175" height="175" /&gt;
      &lt;img class="img_none" src="http://tinyurl.com/buev4y2" width="175" height="175" /&gt;
      &lt;img class="img_none" src="http://tinyurl.com/buev4y2" width="175" height="175" /&gt;
      //// 18 images in total.

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="a_down"&gt;Down&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code> img {width:175px; height:175px; background-color:#ccc; text-align:center; vertical-align:middle;}
 #a_top { width:73px; height:22px; margin:0px auto; cursor:pointer; background-color:#ccc; text-align:center; magin:10px; }
 #s_cont { height:auto; width:auto; margin:0px; padding:0px;}
 #s_area { width:185px; margin:0px auto;  height:555px; overflow:hidden;}
 #a_down { width:73px; height:22px; margin:0px auto; cursor:pointer;  background-color:#ccc; text-align:center; magin:10px;}
 .img_none { border:#000 solid 1px; margin:4px; cursor:pointer;}
 .img_select { border:#642d8a solid 4px;  margin:1px;}
 #s_container { height:auto; width:100%;}
</code></pre>

<p>Script:</p>

<pre><code>$("#s_area img").click(function() {
    $("#s_area img.img_select").removeClass("img_select");
    $("#s_area img").addClass("img_none");
    $(this).removeClass("img_none");
    $(this).addClass("img_select");
    var bagName = $(this).attr("link");
    $("#nxt_stp a").attr("href", bagName + ".html");
    return false;
});
var h = $("#s_container").height();


function setIt() {
   ///alert($("#s_container").offset().top);
   ///alert($("#s_container img").outerHeight());
    var offset = Math.abs((($("#s_container").offset().top) - 22) / 185);
    var roundoff = (Math.round(offset)) * 185;
    $("#s_area").stop().animate({
        scrollTop: roundoff
    }, 800);
}

$("#a_top").mousedown(function() {
    $("#s_area").stop().animate({
        scrollTop: 0
    }, 5000, function() {
        $("#s_cont img:last").before("#s_cont img:first");
    });
}).mouseup(function() {
    setIt();
});

$("#a_down").mousedown(function() {
    $("#s_area").stop().animate({
        scrollTop: h
    }, 5000, function() {
        $("#s_cont img:first").after("#s_cont img:last");
    });
}).mouseup(function() {
    setIt();
});  
</code></pre>
