Z-Index change on click

Z-Index change on click

I am having a problem getting my photoviewer to change photos when a link is clicked (live site http://ericnaff.com/web2/index-FILL-IN.html). I've looked everywhere for a solution and got nothing. Here's my HTML, then CSS, then my jQuery. I got the links to work but when you re-click, it won't change the image. Example- I click on a link and the photo changes to the right photo. If I try to go back to a photo by clicking, it doesn't work.

     <body>

<div id="imageWindow">
<div class="imagePane firstPic"></div><!-- ends first -->
        <div class="imagePane secondPic"></div><!-- ends second -->
        <div class="imagePane thirdPic"></div><!-- ends third -->
        <div class="imagePane fourthPic"></div><!-- ends fourth -->
        
        <ul>
        <li class="firstPic">first-pic</li>
            <li class="secondPic">second-pic</li>
            <li class="thirdPic">third-pic</li>
            <li class="fourthPic">fourth-pic</li>
</ul>
        
</div>

     THE CSS
        #imageWindow {/* 1 CSS attribute */position:absolute 0px 0px;}
/* common image container and stacking */
.imagePane {
/* 4 CSS attributes */
position:absolute;
background-image: url( http://www.ericnaff.com/web2/images/park-    
                        sprite.jpg);
width:450px;
height:400px;
}
        
/* these classes are used to determine the stacking order of the image container divs */
.front {/* 1 CSS attribute */ z-index:1}
.behind {/* 1 CSS attribute */ z-index:-1}
 
/* used to display a different picture in each container */      
.firstPic {/* 1 CSS attribute */ background-position:0px 0;}
.secondPic {/* 1 CSS attribute */background-position:450px 0;}
.thirdPic {/* 1 CSS attribute */background-position:900px 0;}
.fourthPic {/* 1 CSS attribute */background-position:1350px 0;}
/* used to style the list */
ul {
/* 2 CSS attributes */
width:75px;
margin-left:450px;
}
li {
/* 1 CSS attribute */
list-style-type:none;
}
li:hover {
/* 2 CSS attributes */
background-color:#999999;
cursor:pointer;
}

     MY JQUERY-
        $(document).ready(function(){
        $('li.firstPic').click(function() {
$('.firstPic').fadeIn().addClass('front');
});
$('li.secondPic').click(function() { 
$('.secondPic').fadeIn().addClass('front');
});
$('li.thirdPic').click(function() {
$('.thirdPic').fadeIn().addClass('front');
});
$('li.fourthPic').click(function() {
$('.fourthPic').fadeIn().addClass('front');
});
});


  Any ideas? I can't change the HTML and have to use the amount of CSS shown. I'm new to this and really confused. I was trying this solution-

     $('.targetX').functionA('targetS').functionB('targetT');
  
$('tag.targetY').functionA('targetT').functionB('targetS');

I don't know how to get it to work though. Like I said, got the first part working, just can't get a link to work more than once.
Thanks for any help/suggestions.

Eric