$(function() {
  
    var Q = window.Q = Quintus()
                       .include('Input,Sprites,Scenes')
                       .setup('quintus');
    var socket = io.connect();
  
    Q.input.keyboardControls()
    Q.input.touchControls({ 
              controls:  [ ['left','<' ],[],[],[],['right','>' ]]
            });
  
    var gameType = null, delay = 0;
  
    Q.Paddle = Q.Sprite.extend({
      init: function(props) {
        this._super(_(props).defaults({
          w: 60, h: 20,
          speed: 200,
          direction: null
        }));
      },
  
      step: function(dt) {
        dt += this.p.paddleDelay / 1000;
        this.p.paddleDelay = 0;
  
        if(this.p.direction == 'left') {
          this.p.x -= this.p.speed * dt;
        } else if(this.p.direction == 'right') {
          this.p.x += this.p.speed * dt;
        } 
  
        if(this.p.x < 0) { this.p.x = 0; }
        if(this.p.x > Q.width - this.p.w) { this.p.x = Q.width - this.p.w; }
      },
  
      draw: function(ctx) {
        ctx.fillStyle = "black";
        ctx.fillRect(Math.floor(this.p.x),
                     Math.floor(this.p.y),
                     this.p.w,this.p.h);
  
      }
    });
  
    Q.PlayerPaddle = Q.Paddle.extend({
      step: function(dt) {
        var lastDirection = this.p.direction;
  
        this.p.direction = null;
        if(Q.inputs['left']) {
          this.p.direction = 'left';
        } else if(Q.inputs['right']) {
          this.p.direction = 'right';
        }
  
        this._super(dt);
  
        if(lastDirection != this.p.direction) {
          socket.emit("move",[this.p.direction,this.p.x]);
        }
      }
    });
  
    Q.EnemyPaddle = Q.Paddle.extend({ 
      init: function(props) {
        this._super(props);
  
        var self = this, p = this.p;
        socket.on("move",function(data) {
          p.direction = data[0];
          p.x = data[1];
          self.step(delay/1000);
        });
      }
    });
  
    Q.Ball = Q.Sprite.extend({
      init: function(props) {
        this._super(_(props||{}).defaults({
          x: 200, y: 100,
          w: 10,  h: 10,
          dx: -1, dy: -1,
          speed: 100,
          ballRate: 0.5,
          ballSend: 0.5
        }));
  
        var self = this, p = this.p;
        if(gameType == 'slave') {
          socket.on("ball",function(pos) {
            p.x = pos.x;
            p.y = pos.y;
            p.dx = pos.dx;
            p.dy = pos.dy;
            self.step(delay/1000);
          });
        }
  
      },
  
      step: function(dt) {
        var p = this.p;
  
        var hit = Q.stage().collide(this);
        if(hit) {
          p.dy = hit.p.y < 100 ? 1 : -1;
        }
  
        p.x += p.dx * p.speed * dt;
        p.y += p.dy * p.speed * dt;
  
        var maxX = Q.width - p.w;
  
        if(p.x < 0) { p.x = 0; p.dx = 1; } 
        else if(p.x > maxX) { p.dx = -1; p.x = maxX; }
        
        if(p.y < 0 || p.y > Q.height) { 
          p.x = 200; p.y = 100;
          p.dy *= -1;
        } 
  
        if(gameType == 'master') {
          p.ballSend -= dt;
          if(p.ballSend < 0) {
            socket.emit("ball", { x: p.x, y: p.y, dx: p.dx, dy: p.dy });
            p.ballSend += p.ballRate;
          }
        }
      },
  
      draw: function(ctx) {
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(this.p.x + this.p.w/2,
                this.p.y + this.p.h/2,
                this.p.w/2,0,Math.PI*2); 
        ctx.fill();
      }
  
    });
  
    Q.scene('game',new Q.Scene(function(stage) {
  
      if(gameType == 'master') {
        stage.insert(new Q.PlayerPaddle({ x:0, y: 40}));
        stage.insert(new Q.EnemyPaddle({ x:0, y: Q.height - 100}));
      } else if(gameType == 'slave') {
        stage.insert(new Q.EnemyPaddle({ x:0, y: 40}));
        stage.insert(new Q.PlayerPaddle({ x:0, y: Q.height - 100}));
      }
      stage.insert(new Q.Ball());
  
    }));
  
    socket.on("master",function() {
      gameType = 'master';
      Q.stageScene("game");
    });
  
    socket.on("slave",function() {
      gameType = 'slave';
      Q.stageScene("game");
    });
  
    socket.on("end",function() {
      Q.clearStage(0);
    });
    
    socket.on('delay',function(data) {
      if(data.steps == 3) {
        // delay 1/2 of the round trip time
        delay = (new Date().getTime() - data.timer)/2;
        if(delay > 50) {
          delay = 50;
        }
      } else {
        data.steps += 1;
        socket.emit('delay',data);
      }
    });
  
    setInterval(function() {
      socket.emit('delay',{ steps: 0, timer: new Date().getTime() });
    },2000);
  
  });