Newbie for Multiple image animation

I'm trying to make flys ...fly.. across a page for class and I don't know how to incorporate all my img objects together and at the same time have each image move at different speeds and directions with as little code as possible this is what i got so far...any help to understanding this is appreciated..I'm new at this stuff but luv it for life! Thanx

<!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>

    <title>BUZZ</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript">

        var widthMax = 0;

        var heightMax = 0;

        var buzzSpeed = new Array(3)

        buzzSpeed[0] = 10;

        var xPosition = new Array(3);

        xPosition = -20;

        var yPosition = new Array(3);

        yPosition[0] = 0;

        var xDirection = new Array(3);

        xDirection[0] = "right";

        var yDirection = new Array(3);

        yDirection[0] = "down";


        function setBug(newStartPoint) {

            widthMax = document.documentElement.clientWidth;

            heightMax = document.documentElement.clientHeight;

            setInterval("flyBug(0)", 30);

        }

        function flyBug(curBug) {

            var activeBug = document.getElementById("bugImage" + curBug);

            var activeElement = document.getElementById("bugElement" + curBug);

            if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))

                xDirection[curBug] = "left";

            else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)

                xDirection[curBug] = "right";

            if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))

                yDirection[curBug] = "up";

            else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)

                yDirection[curBug] = "down";

            if (xDirection[curBug] == "right")

                xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];

            else if (xDirection[curBug] == "left")

                xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];

            else

                xPosition[curBug] = xPosition[curBug];

            if (yDirection[curBug] == "down")

                yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];

            else if (yDirection[curBug] == "up")

                yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];

            else

                yPosition[curBug] = yPosition[curBug];


            activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";

            activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";

        }

        window.onresize = setBug;

    </script>

</head>

<body onload="setBug()">

<div id="bugElement0" style="position:absolute; left:20px; top:0px;">

<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>


<div id="bugElement1" style="position:absolute; left:25%; top:75%;">

<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>


<div id="bugElement2" style="position:absolute; left:40%; top:48%;">

<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>


<div id="bugElement3" style="position:absolute; left:58%; top:58%;">

<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>


<div id="bugElement4" style="position:absolute; left:90%; top:75%;">

<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>

</body>

</html>