I am trying to create a background slideshow with JavaScript, but I am having trouble with 2 things: 1) making the images automatically re-size to the browser window dimension and 2) creating a crossfade between the slideshow images. Does anyone have advice for me?

This is the code I have now:

<head>
<title>TITLE</title>
<script language="JavaScript">
<!--

// For the background slideshow. Can't figure out how to make images crossfade or size automatically to browser window size.

// (C) 2003 CodeLifter.com
// Free for all users, but leave in this header

// =======================================
// set the following variables
// =======================================


// Set speed (milliseconds)
var speed = 3500;
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/slides_01.jpg'
Pic[1] = 'images/slides_02.jpg'
Pic[2] = 'images/slides_03.jpg'
Pic[3] = 'images/slides_04.jpg'
Pic[4] = 'images/slides_05.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}

// For the fading text box

fadeTime = 1000.0;

fadeMin = 0.0;
fadeMax = 0.6;

function fade(id, lastTick) {
var tick = new Date().getTime();
var element = document.getElementById(id);
if (element.fadeState) {
if (lastTick)
element.fadeTime += tick-lastTick;
else {
element.fadeState = element.fadeState == 1 ? -1 : 1;
element.fadeTime = fadeTime-element.fadeTime;
return;
}
}
else {
element.fadeState = element.style.opacity == fadeMax ? -1 : 1;
element.fadeTime = 0.0;
}
var opacity = element.fadeTime/fadeTime;
if (element.fadeTime >= fadeTime)
opacity = 1.0;
if (element.fadeState == -1)
opacity = 1.0-opacity;
opacity = (fadeMax-fadeMin)*opacity+fadeMin;
element.style.opacity = opacity;
element.style.filter = 'alpha(opacity='+opacity*100+')';// IE
if (element.fadeTime >= fadeTime)
element.fadeState = null;
else
setTimeout("fade('"+id+"',"+tick+")", 33);
}



//-->
</script>
<style type="text/css">
<!--
.style2 {
font-family: "Helvetica Neue Light", "Helvetica", "Helvetica Neue UltraLight", "Helvetica Neue Black Condensed";
color: #FFFFFF;
font-size: 56px;
}
.style3 {
font-family: "Helvetica Neue Light", "Helvetica", "Helvetica Neue UltraLight", "Helvetica Neue Black Condensed";
color: #999999;
}


-->
</style>
</head>

<body>


<body onload="runBGSlideShow()">





<div align="center"><BR>

<BR>
<BR>
<BR><BR>
<span class="style2">TITLE</span></div>

<table width="50" border="0" align="center" valign="bottom">
<tr>
<td></td>
</tr>
<tr>
<td> <div id="fadeBlock" style="background-color:white;opacity:0;width:500px;
height:450px;text-align:center;">
<br />
I'm Some Text <br><br>
</div></td>
</tr>
<tr>
<td align="center" valign="baseline" class="style3"><input type="button" onclick="fade('fadeBlock');" value="INFO" /></td>
</tr>
</table>
</body>
</html>