var canvas =  {

    _robots: [
    ],

    _ctx: null,

    init: function() {
      var canvas = document.getElementById("canvas");
      this._ctx = canvas.getContext("2d");
    },

    hit: function(id, hp) {
      var robot = null;
      for(var i = 0; i < this._robots.length;i++) {
        if(this._robots[i].id == id) {
          robot = this._robots[i];
        }
      }
      if(robot) {
        robot.hp = hp;

        this._redraw();
      }
    },

    move: function(id, x, y) {
      x = x*10;
      y = y*5;
      var robot = null;
      for(var i = 0; i < this._robots.length;i++) {
        if(this._robots[i].id == id) {
          robot = this._robots[i];
        }
      }
      if(robot) {
        var old_pos = robot.pos;
        var that = this;
        (function _s(current_x, current_y) {
          robot.pos = {
            x: (current_x+1),
            y: (current_y)
          };
          that._redraw.call(that);
          var new_x = current_x;
          var new_y = current_y;
          if(current_x < x) {
            new_x = new_x+1;
          } else if(current_x > x) {
            new_x = new_x-1;
          }
          if(current_y < y) {
            new_y = new_y+1;
          } else if(current_y > y) {
            new_y = new_y-1;
          }

          if(new_y != current_y || new_x != current_x) {
            setTimeout(function() { _s(new_x, new_y) }, 10);
          }
        })(old_pos.x, old_pos.y);
      } else {
        this._robots.push({
          id: id,
          pos: {x: x, y: y},
          hp: 3
        });
      }
    },


    _roundRect: function(ctx, x, y, width, height, radius, fill, stroke) {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      ctx.lineTo(x + radius, y + height);
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
      ctx.lineTo(x, y + radius);
      ctx.quadraticCurveTo(x, y, x + radius, y);
      ctx.closePath();
      if (stroke) {
        ctx.stroke();
      }
      if (fill) {
        ctx.fill();
      }
    },


    _redraw: function() {
      var r = this._robots;
      this._ctx.clearRect(0,0,1000,500);
      var ctx = this._ctx;
      for(var i = 0; i < r.length; i++) {

        var x = r[i].pos.x;
        var y = r[i].pos.y;

        switch(r[i].hp) {
          case 3:
          ctx.fillStyle = "#0F0";
          break;
          case 2:
          ctx.fillStyle = "rgba(0, 255, 0, .7)";
          break;
          case 1:
          ctx.fillStyle = "rgba(0, 255, 0, .3)";
          break;
          case 0:
          ctx.fillStyle = "#FFF";
          break;
        }

        ctx.beginPath();
        ctx.arc(r[i].pos.x, r[i].pos.y-16, 13, 0, Math.PI, true);
        ctx.closePath();
        ctx.fill();

        this._roundRect(ctx, x-21, y-13, 5, 23, 3, true, false);
        this._roundRect(ctx, x+16, y-13, 5, 23, 3, true, false);

        this._roundRect(ctx, x-8, y+14, 5, 10, 3, true, false);
        this._roundRect(ctx, x+3, y+14, 5, 10, 3, true, false);

        this._roundRect(ctx, x-15, y-15, 30, 30, 6, true, false);
      }
    }

  };