// Box
var dir = 1

function init(){
  Frustum = 2.0
  xSlider = 0.0
  ySlider = 0.0
  zSlider = -500.0

  xScale = 1.0
  yScale = 1.0
  zScale = 1.0

  rotation = 0
  s = 200
  ss = s/2.0


 lastFrustum = Frustum



  var sprite1 = new Array (-ss,-ss,-ss, 1)
  var sprite2 = new Array (-ss,-ss, ss, 1)
  var sprite3 = new Array (-ss, ss,-ss, 1)
  var sprite4 = new Array (-ss, ss, ss, 1)
  var sprite5 = new Array ( ss,-ss,-ss, 1)
  var sprite6 = new Array ( ss,-ss, ss, 1)
  var sprite7 = new Array ( ss, ss,-ss, 1)
  var sprite8 = new Array ( ss, ss, ss, 1)
  var mittelp = new Array (  0,  0,  0, 1)    // mittelpunkt

sprites = new Array (sprite1,sprite2,sprite3,sprite4,sprite5,sprite6,sprite7,sprite8,mittelp)



//   initialize 3DEngine

    mSelectMatrix("Projection")
    mLoadIdentity()

    pFrustum(-2, 2, 1.3, -1.3, Frustum, 200.0)

    pViewPort(0, 0, 1024, 800)

    mSelectMatrix("ModelView")
    mLoadIdentity()


 xTranslate(xSlider,ySlider,zSlider)
stepFrame()
}


function stepFrame(){

  mLoadIdentity()
  DoxScale(xScale, yScale, zScale)


  rotation = rotation + 0.01
  xRotateX(rotation/2.0)
  xRotateY(rotation)
  xRotateZ(rotation/3.0)

  xTranslate(xSlider,ySlider,zSlider)

 SpritePosList3d = new Array ()

  for (i = 0; i < sprites.length; i++){
    myVPos = xFormPoint(sprites[i])
    SpritePosList3d[SpritePosList3d.length] = myVPos
  }

  for (i = 0; i < sprites.length-1; i++){
    var mySprite = document.getElementById("sprite" + (i+1));
    /* HACK: Margin nutzen, um Zentrierung des Inhalts zu ermöglichen */
    mySprite.style.marginLeft = -(SpritePosList3d[i][0] - 600) + "px";
  }

  setTimeout("restart()",1)
}

function restart(){stepFrame();}

init();