<!-- Original:  Mike Hall (MHall75819@aol.com) -->
<!-- Web Site:  http://members.aol.com/MHall75819 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var dir = "http://blackdog4kids.com/holiday/summer/go/picnic/";

// get the ant images in a single zip file from
// http://javascript.internet.com/img/ants/ants.zip

// Extract the images then upload them to your server and
// change the 'dir' variable to their location (end with a '/')

// script modified for firefox 3; compatibility with ns4 ignored

var images = new Array(
dir+"antdl.gif",
dir+"antdn.gif",
dir+"antdr.gif",
dir+"antlt.gif",
dir+"antrt.gif",
dir+"antul.gif",
dir+"antup.gif",
dir+"antur.gif"
);

//var isMinNS4 = (document.layers) ? 1 : 0;
var isMinNS4 = (document.getElementById&&!document.all) ? 1 : 0;
var isMinIE4 = (document.all)    ? 1 : 0;

var _LBimgList;
var _LBimgCount;
var _LBbase = "LBbase";
var _LBlow  = "LBlow";
var _LBhigh = "LBhigh";
var _LBwidth;
var _LBheight;
var _LBbaseLayer;
var _LBlowLayer;
var _LBhighLayer;


function createLoadBar(width, height, bdSize, bdColor, bgColor, fgColor, fontFace, fontSize, text) {
        var txtLow, txtHigh, tblStart, tblEnd;
        var str;
        txtLow  = '<font color="' + fgColor + '" face="' + fontFace + '" size=' + fontSize + '>' + text + '</font>';
        txtHigh = '<font color="' + bgColor  + '" face="' + fontFace + '" size=' + fontSize + '>' + text + '</font>';
        tblStart = '<table border=0 cellpadding=0 cellspacing=0 height=100% width=100%><tr valign="center"><td align="center">';
        tblEnd = '</td></tr></table>';
        if (isMinNS4){
                //str = '<layer name="' + _LBbase + '" bgcolor="' + bdColor + '" width=' + width + ' height=' + height + ' visibility="hide">\n'
                //+ '  <layer name="' + _LBlow  + '" bgcolor="' + bgColor + '" left=' + bdSize + ' top=' + bdSize + ' width=' + (width - 2 * bdSize) + ' height=' + (height - 2 * bdSize) + '>' + tblStart + txtLow + tblEnd + '</layer>\n'
                //+ '  <layer name="' + _LBhigh + '" bgcolor="' + fgColor + '" left=' + bdSize + ' top=' + bdSize + ' width=' + (width - 2 * bdSize) + ' height=' + (height - 2 * bdSize) + '>' + tblStart + txtHigh + tblEnd + '</layer>\n' + '</layer>';

                str = '<div id="' + _LBbase + '" style="position:absolute; background-color:' + bdColor + '; width:' + width + 'px; height:' + height + 'px; visibility:hidden;">\n'
                + '  <div id="' + _LBlow  + '" style="position:absolute; background-color=' + bgColor + '; left:' + bdSize + 'px; top:' + bdSize + 'px; width:' + (width - 2 * bdSize) + 'px; height:' + (height - 2 * bdSize) + 'px;">' + tblStart + txtLow + tblEnd + '</div>\n'
                + '  <div id="' + _LBhigh  + '" style="position:absolute; background-color=' + fgColor + '; left:' + bdSize + 'px; top:' + bdSize + 'px; width:' + (width - 2 * bdSize) + 'px; height:' + (height - 2 * bdSize) + 'px;">' + tblStart + txtHigh + tblEnd + '</div>\n' + '</div>';
        }
        if (isMinIE4){
                str = '<div id="' + _LBbase + '" style="position:absolute; background-color:' + bdColor + '; width:' + width + 'px; height:' + height + 'px; visibility:hidden;">\n'
                + '  <div id="' + _LBlow  + '" style="position:absolute; background-color=' + bgColor + '; left:' + bdSize + 'px; top:' + bdSize + 'px; width:' + (width - 2 * bdSize) + 'px; height:' + (height - 2 * bdSize) + 'px;">' + tblStart + txtLow + tblEnd + '</div>\n'
                + '  <div id="' + _LBhigh  + '" style="position:absolute; background-color=' + fgColor + '; left:' + bdSize + 'px; top:' + bdSize + 'px; width:' + (width - 2 * bdSize) + 'px; height:' + (height - 2 * bdSize) + 'px;">' + tblStart + txtHigh + tblEnd + '</div>\n' + '</div>';
        }
        document.writeln(str);
        _LBwidth = width - 2 * bdSize;
        _LBheight = height - 2 * bdSize;
}

function startLoadBar(srcList, x, y) {
//alert("before");
        var i, w, h;
        if (isMinNS4) {
        //      document.onmousemove = get

        }
        if (isMinNS4) {
                //_LBbaseLayer = document.layers[_LBbase];
                //_LBlowLayer  = _LBbaseLayer.document.layers[_LBlow];
                //_LBhighLayer = _LBbaseLayer.document.layers[_LBhigh];
                _LBbaseLayer = document.getElementById(_LBbase);
//alert("LBase is " +  _LBbaseLayer.id);
                _LBlowLayer  = document.getElementById(_LBlow);
                _LBhighLayer = document.getElementById(_LBhigh);

//alert("LBlowLayer is " + _LBlowLayer.id);
//alert("LBhighLayer is " + _LBhighLayer.id);
        }
        if (isMinIE4) {
                _LBbaseLayer = eval('document.all.' + _LBbase);
//alert("LBase is " + document.getElementById(_LBbase).id);
                _LBlowLayer  = eval('document.all.' + _LBlow);
                _LBhighLayer = eval('document.all.' + _LBhigh);
        }
        if (isMinNS4) {
                w = window.innerWidth;
                h = window.innerHeight;
        }
        if (isMinIE4) {
                w = document.body.clientWidth;
                h = document.body.clientHeight;
        }
        if (x == null)
                x = Math.round((w  - _LBwidth)  / 2);
        if (y == null)
                y = Math.round((h - _LBheight) / 2);
//alert("y is " + y);
//alert("pause 5 ...");
        moveLayerTo(_LBbaseLayer, x, y);
//alert("pause 6 ...");
        clipLayer(_LBhighLayer, 0, 0, 0, _LBheight);
//alert("pause 7 ...");
//alert("bgcolor is " + _LBbaseLayer.style.backgroundColor);
        showLayer(_LBbaseLayer); // displays Loading message
//alert("pause 8 ...");
        _LBimgCount = 0;
        _LBimgList = new Array();
//alert("pause 9 ...");
        for (i = 0; i < srcList.length; i++) {
                _LBimgList[i] = new Image();
                _LBimgList[i].onabort = _LBupdate;
                _LBimgList[i].onerror = _LBupdate;
                _LBimgList[i].onload  = _LBupdate;
        }
//alert("pause 10 ...");
        for (i = 0; i < srcList.length; i++){
                _LBimgList[i].src = srcList[i];
        }
//alert("after");
}

// this function used elsewhere in this script
//function endLoadBar() { // empty (can be changed) function called when finished
//}

function _LBupdate() {
//alert("start _LBupdate");
        // creates progress bar effect
        var pct;
        _LBimgCount++;
        pct = _LBimgCount / _LBimgList.length;
//alert("pct is " + pct);
        clipLayer(_LBhighLayer, 0, 0, Math.round(pct * _LBwidth), _LBheight);
//alert ("_LBimgCount is " + _LBimgCount);
//alert("_LBimgList.length is " + _LBimgList.length);
        if (_LBimgCount == _LBimgList.length) {
//alert(" ready to setTimeout");
                setTimeout('hideLayer(_LBbaseLayer)', 500); // hide progressbar after completion
//alert(" end _LBupdate");
                endLoadBar();
        }
}

function moveLayerTo(layer, x, y) {
        if (isMinNS4){
//alert("moveLayerTo: " + layer.id);
                //layer.moveTo(x, y);
                layer.style.left = x;
                layer.style.top  = y;
//alert("x y are " + layer.style.left + " " + layer.style.top);
//alert(" layer " + layer.id + " top is " + y);
        }
        if (isMinIE4) {
                layer.style.left = x;
//alert(" layer " + layer.id + " top is " + y);
                layer.style.top  = y;
        }
}

function hideLayer(layer) {
//alert("start hideLayer");
        if (isMinNS4)
                layer.style.visibility = "hidden";
        if (isMinIE4)
                layer.style.visibility = "hidden";
}

function getWindowWidth() {
//alert("start getWindowWidth");
        if (isMinNS4)
                return(window.innerWidth);
        if (isMinIE4)
                return(document.body.offsetWidth);
        return(-1);
}

function getWindowHeight() {
//alert("start getWindowHeight");
        if (isMinNS4)
                return(window.innerHeight);
        if (isMinIE4)
                return(document.body.offsetHeight);
        return(-1);
}

function getPageScrollX() {
        if (isMinNS4){
//alert("pageXOffset is " + window.pageXOffset);
                return(window.pageXOffset);
        }
        if (isMinIE4)
                return(document.body.scrollLeft);
        return(-1);
}

function getPageScrollY() {
        if (isMinNS4){
//              alert("pageYOffset is " + window.pageYOffset);
                return(window.pageYOffset);
        }
        if (isMinIE4)
                return(document.body.scrollTop);
        return(-1);
}

function getHeight(layer) {
        if (isMinNS4) {
// ff undefined alert("clip bottom pixel height is " + layer.style.pixelHeight);
//alert("clip bottom clientheight is " + layer.clientHeight);
//alert("clip bottom is " + layer.style.clip(bottom));
//alert("layer " + layer.id + " height is " + layer.style.height);
//alert("layer " + layer.id + " clip height is " + (layer.style.clip(bottom) - layer.style.clip(top)));
                if (layer.clientHeight){
                        return (layer.clientHeight);
                }else if (layer.document.height){
                        return(layer.document.height);
                }else{
                        return(layer.clip.bottom - layer.clip.top);
                }
        }
        if (isMinIE4) {
                if (false && layer.style.pixelHeight)
                return(layer.style.pixelHeight);
        else
                return(layer.clientHeight);
        }
        return(-1);
}

function getWidth(layer) {
        if (isMinNS4) {
//alert("clip bottom pixel width is " + layer.style.pixelWidth);
//alert("clip bottom clientwidth is " + layer.clientWidth);
//alert("clip right is " + layer.style.clip(right));
//alert("layer " + layer.id + " width is " + layer.style.width);
//alert("layer " + layer.id + " clip width is " + (layer.style.clip(right) - layer.style.clip(left)));
                if (layer.clientWidth){
                        return(layer.clientWidth);
                }else if (layer.document.width){
                        return(layer.document.width);
                }else{
                        return(layer.clip.right - layer.clip.left);
                }
        }
        if (isMinIE4) {
//alert("layer " + layer + " pixelwidth is " + layer.style.pixelWidth);
                if (layer.style.pixelWidth)
                        return(layer.style.pixelWidth);
        else
//alert("layer " + layer + " clientwidth is " + layer.clientWidth);
                return(layer.clientWidth);
        }
        return(-1);
}

function getLeft(layer) {
        if (isMinNS4){
                //return(layer.left);
//alert("getLeft for " + layer.id + " is " + layer.style.left);
                return parseInt(layer.style.left);
        }
        if (isMinIE4)
                return(layer.style.pixelLeft);
        return(-1);
}
function getTop(layer) {
        if (isMinNS4){
                //return(layer.top);
                return parseInt(layer.style.top);
//alert("getTop for " + layer.id + " is " + layer.style.top);
        }
        if (isMinIE4)
                return(layer.style.pixelTop);
        return(-1);
}
function getRight(layer) {
        if (isMinNS4){
                //return(layer.left + getWidth(layer));
                return(parseInt(layer.style.left) + getWidth(layer));
        }
        if (isMinIE4)
                return(layer.style.pixelLeft + getWidth(layer));
        return(-1);
}
function getBottom(layer) {
        if (isMinNS4){
                //return(layer.top + getHeight(layer));
                return(parseInt(layer.style.top) + getHeight(layer));
        }
        else if (isMinIE4)
                return(layer.style.pixelTop + getHeight(layer));
        return(-1);
}

function moveLayerBy(layer, dx, dy) {
        if (isMinNS4){
                if (layer.moveBy){
                        layer.moveBy(dx, dy);
                }else{
//alert("pixelLeft pixelTop for " + layer.id + " are " + layer.style.left + " " + layer.style.top);
                //      layer.style.left += dx;  //  doesn't work because .left expressed as '10px' rather than '10'
                //      layer.style.top+= dy;

                        layer.style.left = parseInt(layer.style.left) + dx;
                        layer.style.top = parseInt(layer.style.top) + dy;
//alert("pixelLeft pixelTop for " + layer.id + " are " + layer.style.left + " " + layer.style.top);
                }
        }
        if (isMinIE4) {
                layer.style.pixelLeft += dx;
                layer.style.pixelTop+= dy;
//alert("dx dy are " + dx + " " + dy);
//alert("pixelLeft pixelTop are " + layer.style.left + " " + layer.style.top);
        }
}

function showLayer(layer) {
        if (isMinNS4){
                //layer.visibility = "show";
                layer.style.visibility = "visible";
        }
        if (isMinIE4)
                layer.style.visibility = "visible";
}

function showLayer(layer) {
        if (isMinNS4){
                //layer.visibility = "show";
                layer.style.visibility = "visible";
        }
        if (isMinIE4)
                layer.style.visibility = "visible";
}

function clipLayer(layer, clipleft, cliptop, clipright, clipbottom) {
        if (isMinNS4) {
        //      layer.clip.left = clipleft;
        //      layer.clip.top= cliptop;
        //      layer.clip.right= clipright;
        //      layer.clip.bottom = clipbottom;
//alert("clipLayer is " + layer.id);
                layer.style.clip = 'rect(' + cliptop + ' ' +clipright + ' ' + clipbottom + ' ' + clipleft +')';
        }
        if (isMinIE4){
                layer.style.clip = 'rect(' + cliptop + ' ' +clipright + ' ' + clipbottom + ' ' + clipleft +')';
        }
}

var mouseX = 500;
var mouseY = 500;

if (isMinNS4){
        document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getMousePosition;
//if (isMinNS4){
//      document.onmousemove(); // fire movemove event to get ff to detect initial mouse position
//      fireEvent();
//}

//function fireEvent(){
//              document.onclick = getMousePosition;
//              x = 500;
//              y = 100;
//              var el = document.elementFromPoint(x, y);

//              var evt = document.createEvent("MouseEvents");
//              evt.initMouseEvent("click", true, true, window, 0, 500,500, 500, 500, false, false, false, false, 0, null);
//              el.dispatchEvent(evt);
//              document.onclick = null;
//}


function init() {
        startLoadBar(images);
}

function getMousePosition(e) {
        if (isMinNS4) {
                mouseX = e.pageX + window.pageXOffset;
                mouseY = e.pageY + + window.pageYOffset;
//              mouseX = e.clientX + document.body.scrollLeft;
//              mouseY = e.clientY +  document.body.scrollTop;
//alert("pageX pageXoffset clientX scrollLeft are " + e.pageX + "  " + window.pageXOffset + "  " + e.clientX + "  " + document.body.scrollLeft);
        }
        if (isMinIE4) {
//alert("mouse event ");
                mouseX = event.clientX + document.body.scrollLeft;
                mouseY = event.clientY + document.body.scrollTop;
        }
        return true;
}

var ants = new Array(8);
function endLoadBar() {
//alert("start endLoadBar");
        var i;
        for (i = 0; i < ants.length; i++) {
                if (isMinNS4) {
//                      ants[i] = document.layers["ant" + (i + 1)];
//                      ants[i].image = ants[i].document.images["antimg" + (i + 1)];
//alert(document.images);
                        ants[i] = document.getElementById("ant" + (i + 1));
//alert("ants" + i + " is " + ants[i].id);
                        ants[i].image = document.images["antimg" + (i + 1)];
//alert("ants" + i + ".image name is " + ants[i].image.name);
                }
                if (isMinIE4) {
                        ants[i] = eval('document.all.ant' + (i + 1));
                        ants[i].image = document.images["antimg" + (i + 1)];
//alert("ants" + i + " is " + ants[i].image.name);
                }
                initAnt(i);
                showLayer(ants[i]);
        }

        updateAnts();
}

function initAnt(n) {
        var s, x, y;
        x = Math.floor(Math.random() * getWindowWidth());
        y = Math.floor(Math.random() * getWindowHeight());
//alert("n is " + n);
//alert(" y0 is " + y);
        s = Math.floor(Math.random() * 4);
//alert("s is " + s);
        if (s == 0)
                x = -getWidth(ants[n]);
        if (s == 1)
                x = getWindowWidth();
        if (s == 2){
                y = -getHeight(ants[n]);
//alert( "y1 is " + y);
        }
        if (s == 3){
                y = getWindowHeight();
//alert("y2 is " + y);
        }
        x += getPageScrollX();
        y += getPageScrollY();
//alert("getpagescrolly is " + y);
//alert("y is " + y);
        moveLayerTo(ants[n], x, y);
}

function updateAnts() {
//alert ("start updateants");
//alert("ants image src is " + ants[0].image.src);
        var i, dx, dy, theta, d;
        d = 3;
//alert("1st mousex mouse y are " + mouseX + " " + mouseY);
//return;
        for (i = 0; i < ants.length; i++) {
//alert("getLeft gettop are " + getLeft(ants[i]) + " " + getTop(ants[i]));
                dx = mouseX - getLeft(ants[i]);
                dy = mouseY - getTop(ants[i]);
//alert("mouseX mouseY are " + mouseX + "  " + mouseY);
//alert("getLeft getTop are " + getLeft(ants[i]) + "  " + getTop(ants[i]));
//alert("dx dy are " + dx + " " +dy);
//alert("math is " + Math.atan2(-dy, dx));
//return;
                theta = Math.round(Math.atan2(-dy, dx) * 180 / Math.PI);
                if (theta < 0)
                        theta += 360;
//alert("theta is " + theta);
//return;
                if (Math.abs(dx) < d && Math.abs(dy) < d)
                        initAnt(i);
                else if (theta > 22.5 && theta <= 67.5) {
                        moveLayerBy(ants[i], d, -d);
//alert("ants image src is " + ants[i].image.src);
                        ants[i].image.src = dir+"antur.gif";
                }
                else if (theta > 67.5 && theta <= 112.5) {
                        moveLayerBy(ants[i], 0, -d);
                        ants[i].image.src = dir+"antup.gif";
                }
                else if (theta > 112.5 && theta <= 157.5) {
                        moveLayerBy(ants[i], -d, -d);
                        ants[i].image.src = dir+"antul.gif";
                }
                else if (theta > 157.5 && theta <= 202.5) {
                        moveLayerBy(ants[i], -d, 0);
                        ants[i].image.src = dir+"antlt.gif";
                }
                else if (theta > 202.5 && theta <= 247.5) {
                        moveLayerBy(ants[i], -d, d);
                        ants[i].image.src = dir+"antdl.gif";
                }
                else if (theta > 247.5 && theta <= 292.5) {
                        moveLayerBy(ants[i], 0, d);
                        ants[i].image.src = dir+"antdn.gif";
                }
                else if (theta > 292.5 && theta <= 337.5) {
                        moveLayerBy(ants[i], d, d);
                        ants[i].image.src = dir+"antdr.gif";
                }
                else {
                        moveLayerBy(ants[i], d, 0);
                        ants[i].image.src = dir+"antrt.gif";

                }
        }
        setTimeout('updateAnts()', 50);
//alert ("end updateants");
//alert("mousex mouse y are " + mouseX + " " + mouseY);
        return;
}
//  End -->

