a href NOT working with jQuery...?

a href NOT working with jQuery...?

Hello,
I'm having an odd problem that I'm not sure why it is happening.
I have a image reel that scrolls from left to right 100% width of the page. Each picture is suppose to have different URL's the direct to the correct webpages... but that is not happening.

What seems to happen is that the first <a href="http://www.img1.com/"> gets applied to ALL of the images... why is this happening?

I don't see anything wrong with my HTML or CSS and is valid.

Here is the website I'm working on:
http://www.joblesspunkdesigns.com/


Here is my HTML:
  1. <div id="scrollArea">
                        <a href="http://www.img1.com/"><img class="scrollimg" src="images/reel/img1.jpg" alt="Image #1" id="first"/></a>
                        <a href="http://www.img5.com/"><img class="scrollimg" src="images/reel/img5.jpg" alt="Image #5" /></a>
                        <a href="http://www.img4.com/"><img class="scrollimg" src="images/reel/img4.jpg" alt="Image #4"/></a>
                        <a href="http://www.img3.com/"><img class="scrollimg" src="images/reel/img3.jpg" alt="Image #3"/></a>
                        <a href="cannection.html"><img class="scrollimg" src="images/reel/cannection.jpg" alt="Image #2" id="last"/></a>
                    </div>








Here is my CSS:

  1. #scrollcontainer {
        position:relative;
        width: auto;
        height: 568px;
        margin-left: -1709px;
        margin-right: -1709px;
        overflow: hidden;
    }

    #scrollArea {
        position: relative;
        width: auto;
        height: 100%;
        cursor: pointer;
    }

    #scrollArea img {
        position: relative;
        width: 816px;
        height: 568px;
        float: left;
        margin-right: 47px;
    }























and here is the jQuery:
  1. $(function() {
        var scrollX = 0;
        var n = 0;
        var triggerID;
        var speed = 4000;  //speed in ms
        var endTime;
        var remainingTime;
        function rearrange() {
            $('.scrollimg').last().clone().insertBefore($('.scrollimg:eq(0)')).css({width: 0, marginRight: 0});
            $('.scrollimg').last().remove();
        }
        function scrollHor(time) {
            endTime = time + (new Date()).getTime();
            $('.scrollimg:eq(0)').animate({width: 816, marginRight: 47}, time);
        }
        $(window).load(function() {
            rearrange();
            scrollHor(2000);
            triggerID = setInterval(function(){rearrange(); scrollHor(2000);}, speed);
        });
           
        $("#scrollArea").hover( function(){
            remainingTime = endTime - new Date();
            clearInterval(triggerID);
            $('.scrollimg:eq(0)').stop(true, false);
        }, function() {
            scrollHor(remainingTime);
            setTimeout(function() {
                triggerID = setInterval(function(){rearrange(); scrollHor(2000);}, speed);
            }, remainingTime);
        });
     });































Can you help me figure out what is wrong and why I'm having this weird bug?

thanks,
tim