Solved: Fading background images in and out

Re: www.dijitalrealm.com/JCMusic/BGSlideShow.html
I have a simple code (the easiest one for me to understand and implement among the resources I found online) that toggles between 2 background images. How do I modify the code so that the images fade in over each other for about 1 second? Also how do i eliminate the 5 sec pause before the first image appears? If there's an altogether different code that accomplished my goal, that of course would be fine as well.

body{
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
</style>

<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="images/RitaHayworthCameo.jpg"
bgimages[1]="images/GirlWithHeart.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",5000)')

</script>

</head>

<body>
</body>

Open in new window

Thanks!
John