docs: function createEye(mainDiv, eyeRadius, pupilRadius, focusPosition, bigPupilColor){
      // create the DOM
      var eyeDiv = document.createElement("div");
      var pupilDiv = document.createElement("pupil");
      eyeDiv.appendChild(pupilDiv);
      mainDiv.appendChild(eyeDiv);
  
      var eyeBorderWidth = tie(2);
  
      // make sure the pupil cannot be bigger than the eye
      pupilRadius = tie.min(pupilRadius, eyeRadius);
  
      // calculate pupil position
      var dx = eyeRadius.add(eyeBorderWidth).sub(focusPosition.prop("x")).alter(function(dx){
          return dx + eyeDiv.offsetLeft;
      });
      var dy = eyeRadius.add(eyeBorderWidth).sub(focusPosition.prop("y")).alter(function(dy){
          return dy + eyeDiv.offsetTop;
      });
      var d  = tie.min(
          eyeRadius.sub(pupilRadius),
          tie.sum(dx.pow(2), dy.pow(2)).sqrt()
      );
      var angle = tie.atan2(dy, dx);
      var pupilLeft = eyeRadius.sub(pupilRadius, d.mul(angle.cos()));
      var pupilTop  = eyeRadius.sub(pupilRadius, d.mul(angle.sin()));
  
      var pupilColor = eyeRadius.lte(pupilRadius).ifElse(bigPupilColor, "black");
  
      // set the style
      tie.bindStyle(eyeDiv, {
          "position": "relative",
          "display": "inline-block",
          "margin": "5px 4px",
          "border-radius": "100%",
          "border-width": eyeBorderWidth.add("px"),
          "border-color": "black",
          "border-style": "solid",
          "height": eyeRadius.mul(2).add("px"),
          "width": eyeRadius.mul(2).add("px")
      });
      tie.bindStyle(pupilDiv, {
          "position": "absolute",
          "border-radius": "100%",
          "background-color": pupilColor,
          "left": pupilLeft.add("px"),
          "top": pupilTop.add("px"),
          "height": pupilRadius.mul(2).add("px"),
          "width": pupilRadius.mul(2).add("px")
      });
  }