function button(x, y, r) {
  return {
    mouse_over: false,
    contains: function(x_off, y_off, x_not, y_not) {
      var x_dist = x + x_off - x_not;
      var y_dist = y + y_off - y_not;
      if (x_dist*x_dist + y_dist*y_dist < r*r) {
        return true;
      } else {
        return false;
      }
    },
    draw: function(cx, x_off, y_off) {
      cx.beginPath();
      if (this.mouse_over) {
        cx.strokeStyle = "rgb(200,200,200);";
      } else {
        cx.strokeStyle = "rgb(100,100,100);"
      }
      cx.lineWidth = 2;
      cx.shadowBlur = 20;
      cx.shadowColor = "white";
      cx.arc(x + x_off, y + y_off, r, 0, 2.0*Math.PI);
      cx.stroke();
    }
  };
}

function mouse_ui(x_off, y_off, x_mouse, y_mouse, ui) {
  for (var i = 0; i < ui.length; i++) {
    el = ui[i];
    el.mouse_over = el.contains(x_off, y_off, x_mouse, y_mouse);
  }
}

function draw_ui(cx, x_off, y_off, ui) {
  for (var i = 0; i < ui.length; i++) {
    el = ui[i];
    cx.save();
    el.draw(cx, x_off, y_off);
    cx.restore();
  }        
}