(function() {
  "use strict";

  var Button = function(text, onclick) {
    this.Container_constructor();

    var w = 160;
    var h = 50;
    var font = 25;
    this.width = w;
    this.height = h;

    var hw = w/2;
    var hh = h/2;

    this.text = new createjs.Text(text, font+'px Arial', '#333');
    this.text.textAlign = 'center';
    this.text.regY = font/2+2;

    this.shape = new createjs.Shape();
    this.graphicsNormal = new createjs.Graphics()
        .f('#E0E0E0').r(-hw, -hh, w, h)
        .f('#82837E').r(-hw+2, -hh+2, w-4, h-4)
        .f('#E0E0E0').r(-hw+4, -hh+4, w-8, h-10)

    this.graphicsOver = new createjs.Graphics()
        .f('#E0E0E0').r(-hw, -hh, w, h)
        .f('#82837E').r(-hw+2, -hh+2, w-4, h-4)
        .f('#FFFFFF').r(-hw+4, -hh+4, w-8, h-10)

    this.graphicsDown = new createjs.Graphics()
        .f('#E0E0E0').r(-hw, -hh, w, h)
        .f('#82837E').r(-hw+2, -hh+2, w-4, h-4)
        .f('#44BCC4').r(-hw+4, -hh+4, w-8, h-10)

    this.colorNormal = '#333';
    this.colorOver = '#333';
    this.colorDown = '#E0E0E0';

    this.shape.graphics = this.graphicsNormal;
    this.addChild(this.shape);
    this.addChild(this.text);
    this.down = false;

    this.onclick = onclick;
    this.on('mousedown', this._onMouseDown, this);
    this.on('mouseover', this._onMouseOver, this);
    this.on('mouseout', this._onMouseOut, this);
    this.on('click', this._onMouseUp, this);
  }
  var p = createjs.extend(Button, createjs.Container);

  // p.getBounds = function() {
  //   return new createjs.Rectangle(0, 0, this.width, this.height);
  // }

  p._onMouseOver = function(e) {
    if (this.down) return;
    this.text.color = this.colorOver;
    this.shape.graphics = this.graphicsOver;
  }
  p._onMouseOut = function(e) {
    this.text.color = this.colorNormal;
    this.shape.graphics = this.graphicsNormal;
  }

  p._onMouseDown = function(e) {
    this.down = true;
    this.text.color = this.colorDown;
    this.shape.graphics = this.graphicsDown;
  }

  p._onMouseUp = function(e) {
    this.down = false;
    this.text.color = this.colorNormal;
    this.shape.graphics = this.graphicsNormal;
    var v = game.sound.sfxVolume;
    game.sound.sfxVolume = 0.1;
    game.sound.playSfx('select');
    game.sound.sfxVolume = v;
    if (this.onclick) this.onclick()
  }

  window.Button = createjs.promote(Button, 'Container');
})();