Javascript KineticJS删除和添加层

我觉得自己太愚蠢了，但出于某种原因，我对解决这个问题视而不见

我想要3个单独的层，每个层上可以有多个对象/形状，然后单击我想要移除或隐藏可见层，并显示下一层

我认为我的问题在于逻辑和调用函数。下面是函数和JSFIDLE：

var version = 0;    
function layerVersion() {
  if (version === 1) {
    stage.add(layerBlue);
    layerBlue.on('click', function() {
      layerOrange.hide;
      version = 2;
    });
  } else if (version === 2) {
    stage.add(layerOrange);
  } else {
    stage.add(layerPink);
    layerpink.on('click', function() {
      layerPink.hide;
      version = 1;
    });
  }
}

以下是JSFIDLE链接：

如果能帮上忙，我会非常感激的。我觉得自己太笨了，没办法弄明白。看看这个。

---

工作完美，不知道我为什么会想到。隐藏但不是。显示我显然是想把这个工作复杂化。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
});
var layerPink = new Kinetic.Layer();
layerPink.hide();
var layerBlue = new Kinetic.Layer();
var layerOrange = new Kinetic.Layer();
layerOrange.hide();

  // pink box
  var pink = new Kinetic.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    fill: 'pink',
    stroke: 'black',
    strokeWidth: 2
  });
  // blue box
  var blue = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 2
  });
  // orange box
  var orange = new Kinetic.Rect({
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    fill: 'orange',
    stroke: 'black',
    strokeWidth: 2
  });

  layerPink.add(pink);
  layerBlue.add(blue);
  layerOrange.add(orange);

  var version = 0;
      stage.add(layerBlue);
      stage.add(layerOrange);
      stage.add(layerPink);

layerBlue.on('click', function() {
        layerBlue.hide();
        layerOrange.show();
        layerPink.hide();
    stage.draw();
      });
layerOrange.on('click', function() {
        layerBlue.hide();
        layerOrange.hide();
        layerPink.show();
    stage.draw();
      });
layerPink.on('click', function() {
        layerPink.hide();
        layerOrange.hide();
        layerBlue.show();
    stage.draw();
      });