jQuery image slider - restart from beginning when images run out
===

So I have this very simple (and probably not built the recommended way) image slider at my wordpress page that I built myself. My problem is that when the images run out, it will just slide whitespace, and so on. I want it to start sliding from the beginning, or just stop sliding at the last image. Here's my code:
HTML:

    <div id="gallery-wrap">
    <div id="gallery">
        <img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
        <img class="galleryimage2"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
        <img class="galleryimage3"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
        <img class="galleryimage4"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    </div>
    <div id="gallery-controls">
    <a id="gallery-prev" href="#"><img alt="" /> </a>
    <a id="gallery-next" href="#"><img alt="" /></a></div>
    </div>
CSS:

    #gallery-wrap{margin: 0 auto; overflow: hidden; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
    #gallery{position: relative; left: 0; top: 0; width:100%;}
    .galleryimage{position:absolute; width:100%; height:300px; top:0px;}
    .galleryimage2{position:absolute; width:100%; height:300px; left:100%;top:0px;}
    .galleryimage3{position:absolute; width:100%; height:300px; left:200%;top:0px;}
    .galleryimage4{position:absolute; width:100%; height:300px; left:300%;top:0px;}
    
    #gallery-controls{width: 100%; z-index:4;}
    #gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; }
    #gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px;}

And the js/jquery

    var hasImagesLeft = "";
    
    $(document).ready(function(){ 
        if(hasImagesLeft = true){
        $("#gallery-prev").click(function(){
      $("#gallery").animate({"left": "+=100%"}, "slow");
    });
    
    $("#gallery-next").click(function(){
      $("#gallery").animate({"left": "-=100%"}, "slow");
    });
    	}
    	if(hasImagesLeft = false){
    		$("#gallery-prev").click(function(){
      $("#gallery").animate({"left": "-=400%"}, "slow");
    });
    
    $("#gallery-next").click(function(){
      $("#gallery").animate({"left": "+=400%"}, "slow");
    });
    	}
    });

So as you can probably see, I'm thinking what to put in the variables. How does the script know when the images run out? And as you can see, the images are absolutely positioned, that was the easiest way to get them all to the same horizontal line. 
If anyone wants to see this in action:
http://wordpress.kotisivut.name/