// http://www.javascriptkit.com/jsref/

var hide_time  = 200;
var img_width  = 910;
var img_height = 671;
var nsteps = 100;

var x = img_width*0.5*Math.random();
var y = img_height;
var dstep = 30;
var dx = dstep*0.5;

var images = new Object();
images['feet/foot-l-0.gif']   = [14,27];
images['feet/foot-l-45.gif']  = [24,22];
images['feet/foot-l-90.gif']  = [28,15];
images['feet/foot-l-135.gif'] = [23,23];
images['feet/foot-l-180.gif'] = [16,27];
images['feet/foot-l-225.gif'] = [24,22];
images['feet/foot-l-270.gif'] = [28,15];
images['feet/foot-l-315.gif'] = [23,23];
images['feet/foot-r-0.gif']   = [14,27];
images['feet/foot-r-45.gif']  = [22,24];
images['feet/foot-r-90.gif']  = [28,15];
images['feet/foot-r-135.gif'] = [23,23];
images['feet/foot-r-180.gif'] = [16,27];
images['feet/foot-r-225.gif'] = [22,24];
images['feet/foot-r-270.gif'] = [28,15];
images['feet/foot-r-315.gif'] = [23,23];

var trail  = new Array();

function write_img_to_page(id)
{
    if ( !document.getElementById && !document.all ) return;

    document.write(
        '<div id="step_div_'+id+'" style="position:absolute;visibility:hidden;left:0px;top:0px;width:1px;height:1px">' +
        '<img id="step_img_'+id+'" src="feet/foot-l-0.gif" border="0" width="14" height="27"></div>'
        );
}
    
function get_div(id)
{
    if ( document.getElementById )
        return document.getElementById('step_div_'+id).style;
    else if (document.all)
        return document.all['step_div_'+id].style
}

function get_img(id)
{
    if ( document[id] )
        return document[id];
    else if ( document.images[id] )
        return document.images[id];
}

function truebody()
{
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}


function show_div(id)
{
    obj = get_div(id);
    obj.visibility = 'visible';
}

function hide_div(id)
{
    obj = get_div(id);
    obj.visibility = 'hidden';
}

function hide_last_step()
{
    if ( last_x==x && last_y==y )
    {
        n = trail.length;
        for (i=0; i<n; i++)
        {
            obj = get_div(trail[i].id);
            if ( obj.visibility!='hidden' ) 
            {
                obj.visibility='hidden';
                break;
            }
        }
    }

    last_x = x;
    last_y = y;
}


function create_new_step(x,y,dx,dy)
{
    if ( trail.length>=nsteps )
    {
        img = trail.shift();
        trail.push(img);
        img.x = x;
        img.y = y;
    }
    else
    {
        img = new Object();
        img.id   = trail.length;
        img.side = trail.length%2 ? 'r' : 'l';
        trail.push(img);
    }

    angle = get_direction(dx,dy);
    if ( img.side=='l' )
    {
        x -= 4 * Math.sin((90-angle)*3.14/180);
        y -= 4 * Math.cos((90-angle)*3.14/180);
    }
    else
    {
        x += 4 * Math.sin((90-angle)*3.14/180);
        y += 4 * Math.cos((90-angle)*3.14/180);
    }
    img.file   = 'feet/foot-' + img.side + '-' + angle + '.gif';
    img.x      = x;
    img.y      = y;
    img.width  = images[img.file][0];
    img.height = images[img.file][1];

    return img;
}


function get_direction(dx,dy)
{
    angle = Math.atan2(dx,-dy) * 180/3.14;
    if ( angle<0 ) angle += 360;

    if ( angle<22.5 ) angle = 0;
    else if ( angle<67.5 ) angle = 45;
    else if ( angle<112.5 ) angle = 90;
    else if ( angle<157.5 ) angle = 135;
    else if ( angle<202.5 ) angle = 180;
    else if ( angle<247.5 ) angle = 225;
    else if ( angle<292.5 ) angle = 270;
    else if ( angle<337.5 ) angle = 315;
    else angle = 0;

    return angle;
}


function random_walk()
{
    if ( document.all )
    {
        img_width  = truebody().scrollLeft+truebody().clientWidth;
        img_height = Math.max(truebody().scrollHeight, truebody().clientHeight);
    }
    else
    {
        img_width  = pageXOffset+window.innerWidth;
        img_height = Math.max(document.body.offsetHeight, window.innerHeight);
    }
    if ( trail.length==0 )
    {
        x = img_width*0.5*Math.random();
        y = img_height;
    }
    
    dx -= dx*(0.1-0.25*Math.random());
    if ( dx>dstep ) dx=dstep;
    dy = -Math.sqrt(dstep*dstep-dx*dx);
    x += dx;
    y += dy;


    if ( x>0 && x<(img_width-dstep) && y>0 && y<img_height )
    {
        img = create_new_step(x,y,dx,dy);
        hide_div(img.id);

        get_img(img.id).src = img.file;
        get_img(img.id).width  = images[img.file][0];
        get_img(img.id).height = images[img.file][1];

        obj = get_div(img.id);
        obj.left = img.x;
        obj.top  = img.y;

        show_div(trail[trail.length-1].id);
        if ( trail.length==nsteps )
            hide_div(trail[0].id);
        setTimeout("random_walk()", hide_time);
    }
    else
    {
        for (i=0; i<trail.length; i++)
        {
            obj = get_div(trail[i].id);
            if ( obj.visibility!='hidden' ) 
            {
                obj.visibility='hidden';
                setTimeout("random_walk()", hide_time);
                break;
            }
        }
    }
}

for (i=0; i<nsteps; i++)
    write_img_to_page(i);

setTimeout("random_walk()", hide_time);