<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Evil Dynamic Layout: The Fish Tank</title>
  <style type="text/css">
     tank { border: solid; width: 20em; height: 12em; display: block; background: aqua; color: black; position: relative; overflow: hidden; }
    .fish { border: solid; background: yellow; height: 1em; width: 3em; margin: 1em; display: block; position: absolute; }
  </style>
  <script type="text/javascript">
  <![CDATA[

    function tThing() { 
      this.mElement = 0;
      this.speedX = 1; // pixels per tick
      this.speedY = 1; // pixels per tick
      // we wouldn't need to remember the following two if DOM CSS was supported
      this.x = 0; // pixels
      this.y = 0; // pixels
      this.element = function() {
        if (!this.mElement) {
          // once proper DOM CSS is supported:
          // this.mElement = document.createElementNS('http://fishtank.example.org/', this.tagName);
          this.mElement = document.createElementNS('http://www.w3.org/1999/xhtml', 'span'); // for now...
          this.mElement.className = this.tagName(); // for now...
          this.mElement.thing = this;
          this.mElement.style.left = this.x+'px';
          this.mElement.style.top = this.y+'px';
        }
        return this.mElement;
      }
      this.animate = function() {
        if (this.mElement) {
          // once proper DOM CSS is supported:
          // x = document.getOverrideStyle(this.mElement, '').getPropertyCSSValue('left');
          // x.setFloatValue(x.getFloatValue(x.CSS_PX)+this.speedX, x.CSS_PX);
          // y = document.getOverrideStyle(this.mElement, '').getPropertyCSSValue('top');
          // y.setFloatValue(y.getFloatValue(y.CSS_PX)+this.speedY, y.CSS_PX);
          this.x += this.speedX; // for now...
          this.y += this.speedY; // for now...
          this.mElement.style.left = this.x+'px'; // for now...
          this.mElement.style.top = this.y+'px'; // for now...
          // bouncing code goes here XXX
        }
      }
    }

    function tFish() { 
      this.tagName = function() { 
        return 'fish';
        // this.__proto__.method.call(this);
      };
    }
    tFish.prototype = new tThing;


    function tEnvironment(aElement) {
      this.element = aElement;
      this.delay = 100; // milliseconds per tick
      // we wouldn't need to remember the following two if DOM CSS was supported
      this.width = 0; // pixels
      this.height = 0; // pixels
      aElement.environment = this;
      this.addThing = function(aThing) {
        this.element.appendChild(aThing.element());
      }
      this.animate = function() {
        for (var index = 0; index < this.element.childNodes.length; index++) {
          node = this.element.childNodes[index];
          if (node.nodeType == node.ELEMENT_NODE) {
            node.thing.animate();
          }
        }        
      }
    }


    var environment;

    function idle() {
      environment.animate();
      window.setTimeout(idle, environment.delay);
    }

    function init() {
      environment = new tEnvironment(document.getElementsByTagNameNS('http://fishtank.example.org/', 'tank')[0]);
      idle();
    }

  ]]>
  </script>
 </head>
 <body onload="init()">
   <h1>Work In Progress</h1>
   <tank xmlns="http://fishtank.example.org/"/>
   <p><input type="button" value="add fish" onclick="environment.addThing(new tFish);"/></p>
 </body>
</html>
