title: kinetic js zindex
body: <p>Can't quite figure out how to layer these objects with kenetic js, I want circle to be on top of circle2. Am I writing 'circle.setZIndex();' improperly? This is breaking the script.</p>
  
  <p>jsfiddle with .setZIndex lines commented out: <a href="http://jsfiddle.net/ZfuDs/" rel="nofollow">http://jsfiddle.net/ZfuDs/</a> </p>
  
  <pre><code>  function writeMessage(messageLayer, message) {
      var context = messageLayer.getContext();
      messageLayer.clear();
      context.font = '18pt Calibri';
      context.fillStyle = 'black';
      context.fillText(message, 10, 25);
    }
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 200
    });
    var shapesLayer = new Kinetic.Layer();
    var messageLayer = new Kinetic.Layer();
  
  var circle2 = new Kinetic.Circle({
      x: 360,
      y: stage.getHeight() / 2,
      radius: 90,
      fill: 'orange',
      stroke: 'black',
      strokeWidth: 4
    });
  circle2.setZIndex(3);
  
    var circle = new Kinetic.Circle({
      x: 380,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4
    });
     circle.setZIndex(2); 
  
  
    shapesLayer.add(circle);
    shapesLayer.add(circle2);
  
    stage.add(shapesLayer);
    stage.add(messageLayer);
  </code></pre>