window.onload = function(){
  paddle = document.getElementById('paddle');
  paddle.style.left = "115px";
  ElementA('start').next(EventA('click'))
                   .next(ElementA('gameOver')).next(resetGameOver)
                   .next(ElementA('ball'))
                   .next(resetBall)
                   .next(moveBall.animate(30))
                   .next(ElementA('gameOver')).next(gameOver)
                   .next(Repeat).repeat()
                   .run();
  ElementA(document).next(EventA('keypress')).next(movePaddle).next(Repeat).repeat().run();
}

function movePaddle(event) {
  var offset = (event.keyCode == 37) ? -4 : (event.keyCode == 39 ? 4 : 0);
  paddle.style.left = Math.max(0, Math.min(paddleLeft() + offset, 230)) + "px";
}

var moveBall = function(ball) {
  var newLeft = parseInt(ball.style.left) + dir.x;
  var newTop  = parseInt(ball.style.top)  + dir.y;
  if(newLeft <= 0 || newLeft >= 260) dir.x = 0 - dir.x;
  if(newTop  <= 0) dir.y = 0 - dir.y;
  ball.style.left = newLeft + "px";
  ball.style.top = newTop + "px";
  if(newTop > 240) {
    if(newLeft > paddleLeft() -5 && newLeft < paddleLeft() + 45)
    { // Bounce on the paddle
      dir.y = 0 - dir.y;
      return Repeat(ball); 
    } else return Done  (ball); // Game over
  }
  else return Repeat(ball);
}

var resetBall = function(ball) {
  dir = {x: 4, y: -4}
  startPos = (100 + Math.random() * 40) + "px";
  ball.style.left = startPos; ball.style.top = "120px";
  return ball;
}

var resetGameOver = function(el) { el.innerHTML = ''; }
var gameOver      = function(el) { el.innerHTML = 'Game over. Play again?'; return el; }
var paddleLeft    = function()   { return parseInt(paddle.style.left); }