(() => {
  old = { 'x':0, 'y':0 };


  function drawSpiritLevel(v,W,H,offsetX,offsetY) {  
    /* ---------------------------------
    v is the current velocity given when the
    event 'accel' fires - W,H and the offsets
    are width, height, and offsets of the 
    displayed spirit level
    --------------------------------- */
    
    // calculate sizes of forms
    var outlineRectULCx = offsetX+W/2-(W-40)/2;  // upper left corner (ULC) of the outline rect
    var outlineRectULCy = offsetY+H/2-(H-40)/2;  // upper left corner of the outline rect
    var outlineRectLRCx = offsetX+W/2+(W-40)/2;  // lower right corner (LRC) of the outline rect
    var outlineRectLRCy = offsetY+H/2+(H-40)/2;  // lower right corner of the outline rect

    // draw outlines (cross and circle
    g.setColor(g.theme.fg2);
    g.drawRect(outlineRectULCx,outlineRectULCy,  outlineRectLRCx,outlineRectLRCy);
    g.fillRect(offsetX+W/2-20,offsetY+H/2-3, offsetX+W/2+20,offsetY+H/2+3); // horizontal line of the cross
    g.fillRect(offsetX+W/2-3,offsetY+H/2-20, offsetX+W/2+3,offsetY+H/2+20); // vertical line of the cross

    var n = { x:E.clip(W/2+v.x*256,29,W-29),
              y:E.clip(H/2+v.y*256,29,H-29), };
    var dX = v.x*90;
    var dY = v.y*90;

    g.reset();
    g.clearRect(offsetX,offsetY,offsetX+W,offsetY+16); // clear behind text
    g.clearRect(offsetX+W-16,offsetY,offsetX+W,offsetY+H); // clear behind text
    g.setFont("Vector",15).setFontAlign(0,-1).drawString("Y: " + dY.toFixed(1), offsetX+W/2,offsetY+2);
    g.setFont("Vector",15).setFontAlign(0,-1,1).drawString("X: " + dX.toFixed(1), offsetX+W-2,offsetY+H/2);
    g.setColor(g.theme.bg).fillCircle(offsetX+old.x,offsetY+old.y, 8); // clear old marker
    g.setColor(g.theme.fg).fillCircle(offsetX+n.x,offsetY+n.y, 8); // draw new marker

    // vibrate if it's nearly flat
    if(Math.abs(v.x)<0.015 && Math.abs(v.y)<0.015) {
      Bangle.beep(20,440);
    }

    old = n;
  }

  function drawFace() {
    Bangle.setLCDTimeout(60);
    g.clear();
    Bangle.on('accel', (v) => { drawSpiritLevel(v,240,240,0,0); });
  }

  function stop() {
    Bangle.removeAllListeners();
    Bangle.setLCDTimeout(10);
    g.clear();
  }

  return { drawFace:drawFace,stop:stop };
})();