I have a slide show type feature on my webpage, and I need each 'thumbnail' to fade into and out from an alternate image when hovered, as well as each 'main pic' to fade in and out when its respective thumbnail is hovered.. Any ideas?

http://resin.webs.com/testss.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing music</title>

<script type='text/javascript' src='jquery-1.4.4.min.js'></script>

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>

<script type="text/javascript"> 
var images = ["test","test2","test3"];

captions = ["<img src=test5.jpg width=60>", "<img src=test4.jpg width=60>", "<img src=test3.jpg width=60>"];

var curPic = 0;              
function movePix(moveBy)
{
    curPic = (curPic + moveBy + images.length) % images.length;
    document.getElementById("caption").innerHTML = captions[curPic];
}
function bigpic( )
{
    document.getElementById("MAINPIX").src = 
            "http://kingjjrich.webs.com/" + images[curPic] + ".jpg";
    document.getElementById("MAINPIX").style.visibility = "visible";
}
function SETUP( )
{
    movePix(0);
}
</script>

<style type="text/css">

body
{
}

#wrap
{
    width: 900px;
    margin: 0 auto;
    }

#mainpic
{
    width: 300px;
    height: 300px;
    vertical-align: middle;
    margin: 0 auto;
    }

#leftarrow
{
    float: left;
    width: 420px;
    height: 100px;
    }

#caption
{
    float: left;
    width: 60px;
    height: 60px;
    padding: 20px 0px;
    }

#rightarrow
{
    float: left;
    width: 420px;
    height: 100px;
    }

#preloader
{
    visibility: hidden;
    width: 900px;
    margin: 0 auto;
    }

</style>

<style>

div.fadehover {
	position: relative;
	}

img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
        }

img.b {
	position: absolute;
	left: 0;
	top: 0;
	}

</style>

</head>

<body onload="SETUP();">

<div id="wrap">
<div id="mainpic">
<img id="MAINPIX" style="width: 300px; height: 300px; visibility: hidden;" />
</div>
<div id="leftarrow" class="fadehover">
<img src="testleftarrow.gif" width="100" height="100" class="a" onclick="movePix(-1);" style="left: 320px" />
<img src="testrightarrow.gif" width="100" height="100" class="b" style="left: 320px" />
</div>
<div id="caption" onmouseover="bigpic()">
</div>
<div id="rightarrow" class="fadehover">
<img src="testrightarrow.gif" width="100" height="100" class="a" onclick="movePix(1);" />
<img src="testleftarrow.gif" width="100" height="100" class="b" />
</div>
</div>

<div id="preloader">
<img src="test.jpg" width="1px" height="1px">
<img src="test2.jpg" width="1px" height="1px">
<img src="test3.jpg" width="1px" height="1px">
<img src="test4.jpg" width="1px" height="1px">
<img src="test5.jpg" width="1px" height="1px">
</div>

</body>
</html>