function oxe_GetLayer(id)
{
  if (document.getElementById)
    layer   = document.getElementById(id);
  else if (document.all)
    layer   = document.all[id];

  return layer;
}


function oxe_MakeLayer(id)
{
  document.write("<div style='visibility:visible;position:absolute;' id='"+id+"'>");
  document.write("</div>");
  return oxe_GetLayer(id);
}


document.write("<span style='color:white'>");

var gravSim = new GravSim();
var body;

body = gravSim.addBody();
body.pos.set(20, 17);
body.vel.set(0.8, 0);
body.layer = oxe_MakeLayer("body"+gravSim.getNum());

body = gravSim.addBody();
body.pos.set(20, 13);
body.vel.set(-0.5, 0);
body.layer = oxe_MakeLayer("body"+gravSim.getNum());

body = gravSim.addBody();
body.pos.set(20, 10);
body.vel.set(0.1, 0);
body.layer = oxe_MakeLayer("body"+gravSim.getNum());

/*
body = gravSim.addBody();
body.pos.set(10, 10);
body.layer = oxe_MakeLayer("body"+gravSim.getNum());

body = gravSim.addBody();
body.pos.set(20, 5);
body.layer = oxe_MakeLayer("body"+gravSim.getNum());

body = gravSim.addBody();
body.pos.set(40, 5);
body.vel.set(-0.1, 0);
body.layer = oxe_MakeLayer("body"+gravSim.getNum());

*/

document.write("</span>");

var num = gravSim.getNum();
for (var n = 0; n < num; n++)
{
  body                        = gravSim.getBody(n);
  body.pos.scaleEq(18);
  body.mass                   = 0.2 * (2*n+1);
  body.layer.innerHTML        = n;
//  body.layer.style.marginLeft = body.pos.x;
//  body.layer.style.marginTop  = body.pos.y;
}

var frame = 0;

function doTickAndRender()
{
  gravSim.tick();
  gravSim.backToFront();
  var num = gravSim.getNum();
  for (var n = 0; n < num; n++)
  {
    body                        = gravSim.getBody(n);
    body.layer.style.marginLeft = body.pos.x;
    body.layer.style.marginTop  = body.pos.y;
//  document.f1.i1.value        = body.pos.x;
  }

  if (frame % 10 == 0)
  {
    keSq = 0;
    for (var n = 0; n < num; n++)
    {
      body  = gravSim.getBody(n);
      keSq += body.vel.lengthSquared() * body.mass;
      document.f1.ke.value = Math.floor(keSq*100)*0.01;
    }
  }

  frame++;
  return false;
}

function goodOldTicker()
{
  doTickAndRender();
  setTimeout("goodOldTicker()", 0);
}

document.write("<form name=f1>kinetic energy^2 : <input type=text name=ke></form>");

goodOldTicker();