let Layout = require('Layout');

  let Caret = require("heatshrink").decompress(atob("hEUgMAsFgmEwjEYhkMg0GAYIHBBYIPBgAA=="));

  let ScreenWidth  = g.getWidth(),  CenterX;
  let ScreenHeight = g.getHeight(), CenterY, outerRadius;

  Bangle.setUI('clock');
  Bangle.loadWidgets();

/**** updateClockFaceSize ****/

  function updateClockFaceSize () {
    CenterX = ScreenWidth/2;
    CenterY = ScreenHeight/2;

    outerRadius = Math.min(CenterX,CenterY);

    if (global.WIDGETS == null) { return; }

    let WidgetLayouts = {
      tl:{ x:0,             y:0,               Direction:0 },
      tr:{ x:ScreenWidth-1, y:0,               Direction:1 },
      bl:{ x:0,             y:ScreenHeight-24, Direction:0 },
      br:{ x:ScreenWidth-1, y:ScreenHeight-24, Direction:1 }
    };

    for (let Widget of WIDGETS) {
      let WidgetLayout = WidgetLayouts[Widget.area];     // reference, not copy!
      if (WidgetLayout == null) { continue; }

      Widget.x = WidgetLayout.x - WidgetLayout.Direction * Widget.width;
      Widget.y = WidgetLayout.y;

      WidgetLayout.x += Widget.width * (1-2*WidgetLayout.Direction);
    }

    let x,y, dx,dy;
    let cx = CenterX, cy = CenterY, r = outerRadius, r2 = r*r;

    x = WidgetLayouts.tl.x; y = WidgetLayouts.tl.y+24; dx = x - cx; dy = y - cy;
    if (dx*dx + dy*dy < r2) {
      cy = CenterY + 12; dy = y - cy; r2 = dx*dx + dy*dy; r = Math.min(Math.sqrt(r2),cy-24);
    }

    x = WidgetLayouts.tr.x; y = WidgetLayouts.tr.y+24; dx = x - cx; dy = y - cy;
    if (dx*dx + dy*dy < r2) {
      cy = CenterY + 12; dy = y - cy; r2 = dx*dx + dy*dy; r = Math.min(Math.sqrt(r2),cy-24);
    }

    x = WidgetLayouts.bl.x; y = WidgetLayouts.bl.y; dx = x - cx; dy = y - cy;
    if (dx*dx + dy*dy < r2) {
      cy = CenterY - 12; dy = y - cy; r2 = dx*dx + dy*dy; r = Math.min(Math.sqrt(r2),cy);
    }

    x = WidgetLayouts.br.x; y = WidgetLayouts.br.y; dx = x - cx; dy = y - cy;
    if (dx*dx + dy*dy < r2) {
      cy = CenterY - 12; dy = y - cy; r2 = dx*dx + dy*dy; r = Math.min(Math.sqrt(r2),cy);
    }

    CenterX = cx; CenterY = cy; outerRadius = r - 4;
  }

  updateClockFaceSize();

/**** custom version of Bangle.drawWidgets (does not clear the widget areas) ****/

  Bangle.drawWidgets = function () {
    var w = g.getWidth(), h = g.getHeight();

    var pos = {
      tl:{x:0,   y:0,    r:0, c:0}, // if r==1, we're right->left
      tr:{x:w-1, y:0,    r:1, c:0},
      bl:{x:0,   y:h-24, r:0, c:0},
      br:{x:w-1, y:h-24, r:1, c:0}
    };

    if (global.WIDGETS) {
      for (var wd of WIDGETS) {
        var p = pos[wd.area];
        if (!p) continue;

        wd.x = p.x - p.r*wd.width;
        wd.y = p.y;

        p.x += wd.width*(1-2*p.r);
        p.c++;
      }

      g.reset();                                 // also loads the current theme

      if (pos.tl.c || pos.tr.c) {
        g.setClipRect(0,h-24,w-1,h-1);
        g.reset();                           // also (re)loads the current theme
      }

      if (pos.bl.c || pos.br.c) {
        g.setClipRect(0,h-24,w-1,h-1);
        g.reset();                           // also (re)loads the current theme
      }

      try {
        for (wd of WIDGETS) {
          g.clearRect(wd.x,wd.y, wd.x+wd.width-1,23);
          wd.draw(wd);
        }
      } catch (e) { print(e); }
    }
  };

/**** EventConsumerAtPoint ****/

  let activeLayout;

  function EventConsumerAtPoint (HandlerName, x,y) {
    let Layout = (activeLayout || {}).l;
    if (Layout == null) { return; }

    function ConsumerIn (Control) {
      if (
        (x < Control.x) || (x >= Control.x + Control.w) ||
        (y < Control.y) || (y >= Control.y + Control.h)
      ) { return undefined; }

      if (typeof Control[HandlerName] === 'function') { return Control; }

      if (Control.c != null) {
        let ControlList = Control.c;
        for (let i = 0, l = ControlList.length; i < l; i++) {
          let Consumer = ConsumerIn(ControlList[i]);
          if (Consumer != null) { return Consumer; }
        }
      }

      return undefined;
    }

    return ConsumerIn(Layout);
  }

/**** dispatchTouchEvent ****/

  function dispatchTouchEvent (DefaultHandler) {
    function handleTouchEvent (Button, xy) {
      if (activeLayout == null) {
        if (typeof DefaultHandler === 'function') {
          DefaultHandler();
        }
      } else {
        let Control = EventConsumerAtPoint('onTouch', xy.x,xy.y);
        if (Control != null) {
          Control.onTouch(Control, Button, xy);
        }
      }
    }
    Bangle.on('touch',handleTouchEvent);
  }
  dispatchTouchEvent();

/**** dispatchStrokeEvent ****/

  function dispatchStrokeEvent (DefaultHandler) {
    function handleStrokeEvent (Coordinates) {
      if (activeLayout == null) {
        if (typeof DefaultHandler === 'function') {
          DefaultHandler();
        }
      } else {
        let Control = EventConsumerAtPoint('onStroke', Coordinates.xy[0],Coordinates.xy[1]);
        if (Control != null) {
          Control.onStroke(Control, Coordinates);
        }
      }
    }
    Bangle.on('stroke',handleStrokeEvent);
  }
  dispatchStrokeEvent();
/**** Label ****/

  function Label (Text, Options) {
    function renderLabel (Details) {
      let x = Details.x, xAlignment = Details.halign || 0;
      let y = Details.y, yAlignment = Details.valign || 0;

      let Width  = Details.w, halfWidth  = Width/2;
      let Height = Details.h, halfHeight = Height/2;

      let Border  = Details.border || 0, BorderColor = Details.BorderColor;
      let Padding = Details.pad    || 0;
      let Hilite  = Details.hilite || false;
      let bold    = Details.bold ? 1 : 0;

      if (Hilite || (Details.bgCol != null)) {
        g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol);
        g.clearRect(x,y, x + Width-1,y + Height-1);
      }

      if ((Border > 0) && (BorderColor !== null)) {// draw border of layout cell
        g.setColor(BorderColor || Details.col || g.theme.fg);

        switch (Border) {
          case 1:  g.drawRect(x,y,     x+Width-1,y+Height-1); break;
          case 2:  g.drawRect(x,y,     x+Width-1,y+Height-1);
                   g.drawRect(x+1,y+1, x+Width-2,y+Height-2); break;
          default: g.fillPoly([
            x,y, x+Width,y, x+Width,y+Height, x,y+Height, x,y,
            x+Border,y+Border, x+Border,y+Height-Border,
              x+Width-Border,y+Height-Border, x+Width-Border,y+Border,
              x+Border,y+Border
          ]);
        }
      }

      g.setClipRect(
        x+Border+Padding,y+Border+Padding,
        x + Width-Border-Padding-1,y + Height-Border-Padding-1
      );

      x += halfWidth  + xAlignment*(halfWidth  - Border - Padding);
      y += halfHeight + yAlignment*(halfHeight - Border - Padding);

      g.setColor  (Hilite ? g.theme.fgH : Details.col   || g.theme.fg);
      g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol || g.theme.bg);

      if (Details.font != null) { g.setFont(Details.font); }
      g.setFontAlign(xAlignment,yAlignment);

      g.drawString(Details.label, x,y);
      if (bold !== 0) {
        g.drawString(Details.label, x+1,y);
        g.drawString(Details.label, x,y+1);
        g.drawString(Details.label, x+1,y+1);
      }
    }

    let Result = Object.assign((
      Options == null ? {} : Object.assign({}, Options.common || {}, Options)
    ), {
      type:'custom', render:renderLabel, label:Text || ''
    });
      let Border  = Result.border || 0;
      let Padding = Result.pad    || 0;

      let TextMetrics;
      if (! Result.width || ! Result.height) {
        if (Result.font == null) {
          Result.font = g.getFont();
        } else {
          g.setFont(Result.font);
        }
        TextMetrics = g.stringMetrics(Result.label);
      }

      if (Result.col   == null) { Result.col   = g.getColor(); }
      if (Result.bgCol == null) { Result.bgCol = g.getBgColor(); }

      Result.width  = Result.width  || TextMetrics.width  + 2*Border + 2*Padding;
      Result.height = Result.height || TextMetrics.height + 2*Border + 2*Padding;
    return Result;
  }

/**** Image ****/

  function Image (Image, Options) {
    function renderImage (Details) {
      let x = Details.x, xAlignment = Details.halign || 0;
      let y = Details.y, yAlignment = Details.valign || 0;

      let Width  = Details.w, halfWidth  = Width/2  - Details.ImageWidth/2;
      let Height = Details.h, halfHeight = Height/2 - Details.ImageHeight/2;

      let Border  = Details.border || 0, BorderColor = Details.BorderColor;
      let Padding = Details.pad    || 0;
      let Hilite  = Details.hilite || false;

      if (Hilite || (Details.bgCol != null)) {
        g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol);
        g.clearRect(x,y, x + Width-1,y + Height-1);
      }

      if ((Border > 0) && (BorderColor !== null)) {// draw border of layout cell
        g.setColor(BorderColor || Details.col || g.theme.fg);

        switch (Border) {
          case 1:  g.drawRect(x,y,     x+Width-1,y+Height-1); break;
          case 2:  g.drawRect(x,y,     x+Width-1,y+Height-1);
                   g.drawRect(x+1,y+1, x+Width-2,y+Height-2); break;
          default: g.fillPoly([
            x,y, x+Width,y, x+Width,y+Height, x,y+Height, x,y,
            x+Border,y+Border, x+Border,y+Height-Border,
              x+Width-Border,y+Height-Border, x+Width-Border,y+Border,
              x+Border,y+Border
          ]);
        }
      }

      g.setClipRect(
        x+Border+Padding,y+Border+Padding,
        x + Width-Border-Padding-1,y + Height-Border-Padding-1
      );

      x += halfWidth  + xAlignment*(halfWidth  - Border - Padding);
      y += halfHeight + yAlignment*(halfHeight - Border - Padding);

      if ('rotate' in Details) {               // "rotate" centers image at x,y!
        x += Details.ImageWidth/2;
        y += Details.ImageHeight/2;
      }

      g.setColor  (Hilite ? g.theme.fgH : Details.col   || g.theme.fg);
      g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol || g.theme.bg);

      g.drawImage(Image, x,y, Details.ImageOptions);
    }

    let Result = Object.assign((
      Options == null ? {} : Object.assign({}, Options.common || {}, Options)
    ), {
      type:'custom', render:renderImage, Image:Image
    });
      let ImageMetrics = g.imageMetrics(Image);
      let Scale        = Result.scale  || 1;
      let Border       = Result.border || 0;
      let Padding      = Result.pad    || 0;

      Result.ImageWidth  = Scale * ImageMetrics.width;
      Result.ImageHeight = Scale * ImageMetrics.height;

      if (('rotate' in Result) || ('scale' in Result) || ('frame' in Result)) {
        Result.ImageOptions = {};
        if ('rotate' in Result) { Result.ImageOptions.rotate = Result.rotate; }
        if ('scale'  in Result) { Result.ImageOptions.scale  = Result.scale; }
        if ('frame'  in Result) { Result.ImageOptions.frame  = Result.frame; }
      }

      Result.width  = Result.width  || Result.ImageWidth  + 2*Border + 2*Padding;
      Result.height = Result.height || Result.ImageHeight + 2*Border + 2*Padding;
    return Result;
  }

/**** Drawable ****/

  function Drawable (Callback, Options) {
    function renderDrawable (Details) {
      let x = Details.x, xAlignment = Details.halign || 0;
      let y = Details.y, yAlignment = Details.valign || 0;

      let Width  = Details.w, DrawableWidth  = Details.DrawableWidth  || Width;
      let Height = Details.h, DrawableHeight = Details.DrawableHeight || Height;

      let halfWidth  = Width/2  - DrawableWidth/2;
      let halfHeight = Height/2 - DrawableHeight/2;

      let Border  = Details.border || 0, BorderColor = Details.BorderColor;
      let Padding = Details.pad    || 0;
      let Hilite  = Details.hilite || false;

      if (Hilite || (Details.bgCol != null)) {
        g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol);
        g.clearRect(x,y, x + Width-1,y + Height-1);
      }

      if ((Border > 0) && (BorderColor !== null)) {// draw border of layout cell
        g.setColor(BorderColor || Details.col || g.theme.fg);

        switch (Border) {
          case 1:  g.drawRect(x,y,     x+Width-1,y+Height-1); break;
          case 2:  g.drawRect(x,y,     x+Width-1,y+Height-1);
                   g.drawRect(x+1,y+1, x+Width-2,y+Height-2); break;
          default: g.fillPoly([
            x,y, x+Width,y, x+Width,y+Height, x,y+Height, x,y,
            x+Border,y+Border, x+Border,y+Height-Border,
              x+Width-Border,y+Height-Border, x+Width-Border,y+Border,
              x+Border,y+Border
          ]);
        }
      }

      let DrawableX = x + halfWidth  + xAlignment*(halfWidth  - Border - Padding);
      let DrawableY = y + halfHeight + yAlignment*(halfHeight - Border - Padding);

      g.setClipRect(
        Math.max(x+Border+Padding,DrawableX),
        Math.max(y+Border+Padding,DrawableY),
        Math.min(x+Width -Border-Padding,DrawableX+DrawableWidth)-1,
        Math.min(y+Height-Border-Padding,DrawableY+DrawableHeight)-1
      );

      g.setColor  (Hilite ? g.theme.fgH : Details.col   || g.theme.fg);
      g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol || g.theme.bg);

      Callback(DrawableX,DrawableY, DrawableWidth,DrawableHeight, Details);
    }

    let Result = Object.assign((
      Options == null ? {} : Object.assign({}, Options.common || {}, Options)
    ), {
      type:'custom', render:renderDrawable, cb:Callback
    });
      let DrawableWidth  = Result.DrawableWidth  || 10;
      let DrawableHeight = Result.DrawableHeight || 10;

      let Border  = Result.border || 0;
      let Padding = Result.pad    || 0;

      Result.width  = Result.width  || DrawableWidth  + 2*Border + 2*Padding;
      Result.height = Result.height || DrawableHeight + 2*Border + 2*Padding;
    return Result;
  }

  if (g.drawRoundedRect == null) {
    g.drawRoundedRect = function drawRoundedRect (x1,y1, x2,y2, r) {
      let x,y;
      if (x1 > x2) { x = x1; x1 = x2; x2 = x; }
      if (y1 > y2) { y = y1; y1 = y2; y2 = y; }

      r = Math.min(r || 0, (x2-x1)/2, (y2-y1)/2);

      let cx1 = x1+r, cx2 = x2-r;
      let cy1 = y1+r, cy2 = y2-r;

      this.drawLine(cx1,y1, cx2,y1);
      this.drawLine(cx1,y2, cx2,y2);
      this.drawLine(x1,cy1, x1,cy2);
      this.drawLine(x2,cy1, x2,cy2);

      x = r; y = 0;

      let dx,dy, Error = 0;
      while (y <= x) {
        dy = 1 + 2*y; y++; Error -= dy;
        if (Error < 0) {
          dx = 1 - 2*x; x--; Error -= dx;
        }

        this.setPixel(cx1 - x, cy1 - y);  this.setPixel(cx1 - y, cy1 - x);
        this.setPixel(cx2 + x, cy1 - y);  this.setPixel(cx2 + y, cy1 - x);
        this.setPixel(cx2 + x, cy2 + y);  this.setPixel(cx2 + y, cy2 + x);
        this.setPixel(cx1 - x, cy2 + y);  this.setPixel(cx1 - y, cy2 + x);
      }
    };
  }

  if (g.fillRoundedRect == null) {
    g.fillRoundedRect = function fillRoundedRect (x1,y1, x2,y2, r) {
      let x,y;
      if (x1 > x2) { x = x1; x1 = x2; x2 = x; }
      if (y1 > y2) { y = y1; y1 = y2; y2 = y; }

      r = Math.min(r || 0, (x2-x1)/2, (y2-y1)/2);

      let cx1 = x1+r, cx2 = x2-r;
      let cy1 = y1+r, cy2 = y2-r;

      this.fillRect(x1,cy1, x2,cy2);

      x = r; y = 0;

      let dx,dy, Error = 0;
      while (y <= x) {
        dy = 1 + 2*y; y++; Error -= dy;
        if (Error < 0) {
          dx = 1 - 2*x; x--; Error -= dx;
        }

        this.drawLine(cx1 - x, cy1 - y,  cx2 + x, cy1 - y);
        this.drawLine(cx1 - y, cy1 - x,  cx2 + y, cy1 - x);
        this.drawLine(cx1 - x, cy2 + y,  cx2 + x, cy2 + y);
        this.drawLine(cx1 - y, cy2 + x,  cx2 + y, cy2 + x);
      }
    };
  }


/**** Button ****/

  function Button (Text, Options) {
    function renderButton (Details) {
      let x = Details.x, Width  = Details.w, halfWidth  = Width/2;
      let y = Details.y, Height = Details.h, halfHeight = Height/2;

      let Padding = Details.pad || 0;
      let Hilite  = Details.hilite || false;

      if (Details.bgCol != null) {
        g.setBgColor(Details.bgCol);
        g.clearRect(x,y, x + Width-1,y + Height-1);
      }

      if (Hilite) {
        g.setColor(g.theme.bgH);                                     // no typo!
        g.fillRoundedRect(x+Padding,y+Padding, x+Width-Padding-1,y+Height-Padding-1,8);
      }

      g.setColor  (Hilite ? g.theme.fgH : Details.col   || g.theme.fg);
      g.setBgColor(Hilite ? g.theme.bgH : Details.bgCol || g.theme.bg);

      if (Details.font != null) { g.setFont(Details.font); }
      g.setFontAlign(0,0);

      g.drawRoundedRect(x+Padding,y+Padding, x+Width-Padding-1,y+Height-Padding-1,8);

      g.setClipRect(x+Padding,y+Padding, x+Width-Padding-1,y+Height-Padding-1);

      g.drawString(Details.label, x+halfWidth,y+halfHeight);
      g.drawString(Details.label, x+halfWidth+1,y+halfHeight);
      g.drawString(Details.label, x+halfWidth,y+halfHeight+1);
      g.drawString(Details.label, x+halfWidth+1,y+halfHeight+1);
    }

    let Result = Object.assign((
      Options == null ? {} : Object.assign({}, Options.common || {}, Options)
    ), {
      type:'custom', render:renderButton, label:Text || 'Tap'
    });
      let Padding = Result.pad || 0;

      let TextMetrics;
      if (! Result.width || ! Result.height) {
        if (Result.font == null) {
          Result.font = g.getFont();
        } else {
          g.setFont(Result.font);
        }
        TextMetrics = g.stringMetrics(Result.label);
      }

      Result.width  = Result.width  || TextMetrics.width + 2*10 + 2*Padding;
      Result.height = Result.height || TextMetrics.height + 2*5 + 2*Padding;
    return Result;
  }

  const Checkbox_checked   = require("heatshrink").decompress(atob("ikUgMf/+GgEGoEAlEAgOAgEYsFhw8OjE54OB/EYh4OB+EYj+BwecjFw8OGg0YDocUgECsEAsP//A"));
  const Checkbox_unchecked = require("heatshrink").decompress(atob("ikUgMf/+GgEGoEAlEAgOAgEYAjkUgECsEAsP//A="));

/**** Checkbox ****/

  function Checkbox (Options) {
    function renderCheckbox (Details) {
      let x = Details.x, xAlignment = Details.halign || 0;
      let y = Details.y, yAlignment = Details.valign || 0;

      let Width  = Details.w, halfWidth  = Width/2  - 10;
      let Height = Details.h, halfHeight = Height/2 - 10;

      let Padding = Details.pad || 0;

      if (Details.bgCol != null) {
        g.setBgColor(Details.bgCol);
        g.clearRect(x,y, x + Width-1,y + Height-1);
      }

      x += halfWidth  + xAlignment*(halfWidth  - Padding);
      y += halfHeight + yAlignment*(halfHeight - Padding);

      g.setColor  (Details.col   || g.theme.fg);
      g.setBgColor(Details.bgCol || g.theme.bg);

      g.drawImage(
        Details.checked ? Checkbox_checked : Checkbox_unchecked, x,y
      );
    }

    let Result = Object.assign((
      Options == null ? {} : Object.assign({}, Options.common || {}, Options)
    ), {
      type:'custom', render:renderCheckbox, onTouch:toggleCheckbox
    });
      let Padding = Result.pad || 0;

      Result.width  = Result.width  || 20 + 2*Padding;
      Result.height = Result.height || 20 + 2*Padding;

      if (Result.checked == null) { Result.checked = false; }
    return Result;
  }

  /* private */ function toggleCheckbox (Control) {
    g.reset();

    Control.checked = ! Control.checked;
    Control.render(Control);

    if (typeof Control.onChange === 'function') {
      Control.onChange(Control);
    }
  }

/**** toggleInnerCheckbox ****/

  /* export */ function toggleInnerCheckbox (Control) {
    if (Control.c == null) {
      if (('checked' in Control) && ! ('GroupName' in Control)) {
        toggleCheckbox(Control);
        return true;
      }
    } else {
      let ControlList = Control.c;
      for (let i = 0, l = ControlList.length; i < l; i++) {
        let done = toggleInnerCheckbox(ControlList[i]);
        if (done) { return true; }
      }
    }
  }

  const Radiobutton_checked   = require("heatshrink").decompress(atob("ikUgMB/EAsFgjEBwUAgkggFEgECoEAlEPgOB/EYj+BAgmA+EUCYciDodBwEYg0GgEfwA"));
  const Radiobutton_unchecked = require("heatshrink").decompress(atob("ikUgMB/EAsFgjEBwUAgkggFEgECoEAlEAgOAgEYAhEUCYciDodBwEYg0GgEfwAA="));

/**** Radiobutton ****/

  function Radiobutton (Options) {
    function renderRadiobutton (Details) {
      let x = Details.x, xAlignment = Details.halign || 0;
      let y = Details.y, yAlignment = Details.valign || 0;

      let Width  = Details.w, halfWidth  = Width/2  - 10;
      let Height = Details.h, halfHeight = Height/2 - 10;

      let Padding = Details.pad || 0;

      if (Details.bgCol != null) {
        g.setBgColor(Details.bgCol);
        g.clearRect(x,y, x + Width-1,y + Height-1);
      }

      x += halfWidth  + xAlignment*(halfWidth  - Padding);
      y += halfHeight + yAlignment*(halfHeight - Padding);

      g.setColor  (Details.col   || g.theme.fg);
      g.setBgColor(Details.bgCol || g.theme.bg);

      g.drawImage(
        Details.checked ? Radiobutton_checked : Radiobutton_unchecked, x,y
      );
    }

    let Result = Object.assign((
      Options == null ? {} : Object.assign({}, Options.common || {}, Options)
    ), {
      type:'custom', render:renderRadiobutton, onTouch:checkRadiobutton
    });
      let Padding = Result.pad || 0;

      Result.width  = Result.width  || 20 + 2*Padding;
      Result.height = Result.height || 20 + 2*Padding;

      if (Result.checked == null) { Result.checked = false; }
    return Result;
  }

  /* private */ function checkRadiobutton (Control) {
    if (! Control.checked) {
      uncheckRadiobuttonsIn((activeLayout || {}).l,Control.GroupName);
      toggleRadiobutton(Control);

      if (typeof Control.onChange === 'function') {
        Control.onChange(Control);
      }
    }
  }

  /* private */ function toggleRadiobutton (Control) {
    g.reset();

    Control.checked = ! Control.checked;
    Control.render(Control);
  }

  /* private */ function uncheckRadiobuttonsIn (Control,GroupName) {
    if ((Control == null) || (GroupName == null)) { return; }

    if (Control.c == null) {
      if (('checked' in Control) && (Control.GroupName === GroupName)) {
        if (Control.checked) { toggleRadiobutton(Control); }
      }
    } else {
      let ControlList = Control.c;
      for (let i = 0, l = ControlList.length; i < l; i++) {
        uncheckRadiobuttonsIn(ControlList[i],GroupName);
      }
    }
  }

/**** checkInnerRadiobutton ****/

  /* export */ function checkInnerRadiobutton (Control) {
    if (Control.c == null) {
      if (('checked' in Control) && ('GroupName' in Control)) {
        checkRadiobutton(Control);
        return true;
      }
    } else {
      let ControlList = Control.c;
      for (let i = 0, l = ControlList.length; i < l; i++) {
        let done = checkInnerRadiobutton(ControlList[i]);
        if (done) { return true; }
      }
    }
  }


  let Theme = g.theme;
  g.clear(true);

/**** Settings ****/

  let Settings;

  function readSettings () {
    Settings = Object.assign({},
      {
        Face:'1-12', colored:true,
        Hands:'rounded', withSeconds:true,
        Foreground:'Theme', Background:'Theme', Seconds:'#FF0000'
      },
      require('Storage').readJSON('configurable_clock.json', true) || {}
    );

    prepareTransformedPolygon();
  }

  function saveSettings () {
    require('Storage').writeJSON('configurable_clock.json', Settings);
    prepareTransformedPolygon();
  }

  function prepareTransformedPolygon () {
    switch (Settings.Hands) {
      case 'simple':  transformedPolygon = new Array(simpleHourHandPolygon.length); break;
      case 'rounded': transformedPolygon = new Array(roundedHandPolygon.length);    break;
      case 'hollow':  transformedPolygon = new Array(hollowHandPolygon.length);
    }
  }

//readSettings();                                                     // not yet


/**** Hands ****/

  let HourHandLength = outerRadius * 0.5;
  let HourHandWidth  = 2*3, halfHourHandWidth = HourHandWidth/2;

  let MinuteHandLength = outerRadius * 0.8;
  let MinuteHandWidth  = 2*2, halfMinuteHandWidth = MinuteHandWidth/2;

  let SecondHandLength = outerRadius * 0.9;
  let SecondHandOffset = 10;

  let twoPi  = 2*Math.PI, deg2rad = Math.PI/180;
  let Pi     = Math.PI;

  let sin = Math.sin, cos = Math.cos;

/**** simple Hands ****/

  let simpleHourHandPolygon = [
    -halfHourHandWidth,halfHourHandWidth,
    -halfHourHandWidth,halfHourHandWidth-HourHandLength,
     halfHourHandWidth,halfHourHandWidth-HourHandLength,
     halfHourHandWidth,halfHourHandWidth,
  ];

  let simpleMinuteHandPolygon = [
    -halfMinuteHandWidth,halfMinuteHandWidth,
    -halfMinuteHandWidth,halfMinuteHandWidth-MinuteHandLength,
     halfMinuteHandWidth,halfMinuteHandWidth-MinuteHandLength,
     halfMinuteHandWidth,halfMinuteHandWidth,
  ];


/**** rounded Hands ****/

  let outerBoltRadius   = halfHourHandWidth + 2;
  let innerBoltRadius   = outerBoltRadius - 4;
  let roundedHandOffset = outerBoltRadius + 4;

  let sine = [0, sin(30*deg2rad), sin(60*deg2rad), 1];

  let roundedHandPolygon = [
    -sine[3],-sine[0], -sine[2],-sine[1], -sine[1],-sine[2], -sine[0],-sine[3],
     sine[0],-sine[3],  sine[1],-sine[2],  sine[2],-sine[1],  sine[3],-sine[0],
     sine[3], sine[0],  sine[2], sine[1],  sine[1], sine[2],  sine[0], sine[3],
    -sine[0], sine[3], -sine[1], sine[2], -sine[2], sine[1], -sine[3], sine[0],
  ];

  let roundedHourHandPolygon = new Array(roundedHandPolygon.length);
    for (let i = 0, l = roundedHandPolygon.length; i < l; i+=2) {
      roundedHourHandPolygon[i]   = halfHourHandWidth*roundedHandPolygon[i];
      roundedHourHandPolygon[i+1] = halfHourHandWidth*roundedHandPolygon[i+1];
      if (i < l/2) { roundedHourHandPolygon[i+1] -= HourHandLength; }
      if (i > l/2) { roundedHourHandPolygon[i+1] += roundedHandOffset; }
    }
  let roundedMinuteHandPolygon = new Array(roundedHandPolygon.length);
    for (let i = 0, l = roundedHandPolygon.length; i < l; i+=2) {
      roundedMinuteHandPolygon[i]   = halfMinuteHandWidth*roundedHandPolygon[i];
      roundedMinuteHandPolygon[i+1] = halfMinuteHandWidth*roundedHandPolygon[i+1];
      if (i < l/2) { roundedMinuteHandPolygon[i+1] -= MinuteHandLength; }
      if (i > l/2) { roundedMinuteHandPolygon[i+1] += roundedHandOffset; }
    }


/**** hollow Hands ****/

  let BoltRadius       = 3;
  let hollowHandOffset = BoltRadius + 15;

  let hollowHandPolygon = [
    -sine[3],-sine[0], -sine[2],-sine[1], -sine[1],-sine[2], -sine[0],-sine[3],
     sine[0],-sine[3],  sine[1],-sine[2],  sine[2],-sine[1],  sine[3],-sine[0],
     sine[3], sine[0],  sine[2], sine[1],  sine[1], sine[2],  sine[0], sine[3],
     0,0,
    -sine[0], sine[3], -sine[1], sine[2], -sine[2], sine[1], -sine[3], sine[0]
  ];

  let hollowHourHandPolygon = new Array(hollowHandPolygon.length);
    for (let i = 0, l = hollowHandPolygon.length; i < l; i+=2) {
      hollowHourHandPolygon[i]   = halfHourHandWidth*hollowHandPolygon[i];
      hollowHourHandPolygon[i+1] = halfHourHandWidth*hollowHandPolygon[i+1];
      if (i < l/2) { hollowHourHandPolygon[i+1] -= HourHandLength; }
      if (i > l/2) { hollowHourHandPolygon[i+1] -= hollowHandOffset; }
    }
  hollowHourHandPolygon[25] = -BoltRadius;

  let hollowMinuteHandPolygon = new Array(hollowHandPolygon.length);
    for (let i = 0, l = hollowHandPolygon.length; i < l; i+=2) {
      hollowMinuteHandPolygon[i]   = halfMinuteHandWidth*hollowHandPolygon[i];
      hollowMinuteHandPolygon[i+1] = halfMinuteHandWidth*hollowHandPolygon[i+1];
      if (i < l/2) { hollowMinuteHandPolygon[i+1] -= MinuteHandLength; }
      if (i > l/2) { hollowMinuteHandPolygon[i+1] -= hollowHandOffset; }
    }
  hollowMinuteHandPolygon[25] = -BoltRadius;



/**** transform polygon ****/

  let transformedPolygon;

  function transformPolygon (originalPolygon, OriginX,OriginY, Phi) {
    let sPhi = sin(Phi), cPhi = cos(Phi), x,y;

    for (let i = 0, l = originalPolygon.length; i < l; i+=2) {
      x = originalPolygon[i];
      y = originalPolygon[i+1];

      transformedPolygon[i]   = OriginX + x*cPhi + y*sPhi;
      transformedPolygon[i+1] = OriginY + x*sPhi - y*cPhi;
    }
  }

/**** refreshClock ****/

  let Timer;
  function refreshClock () {
    activeLayout = null;

    g.setTheme({
      fg:(Settings.Foreground === 'Theme' ? Theme.fg : Settings.Foreground || '#000000'),
      bg:(Settings.Background === 'Theme' ? Theme.bg : Settings.Background || '#FFFFFF')
    });
    g.clear(true);                            // also installs the current theme

    Bangle.drawWidgets();
    renderClock();

    let Period = (Settings.withSeconds ? 1000 : 60000);

    let Pause = Period - (Date.now() % Period);
    Timer = setTimeout(refreshClock,Pause);
  }

/**** renderClock ****/

  function renderClock () {
    g.setColor  (Settings.Foreground === 'Theme' ? Theme.fg : Settings.Foreground || '#000000');
    g.setBgColor(Settings.Background === 'Theme' ? Theme.bg : Settings.Background || '#FFFFFF');

    switch (Settings.Face) {
      case 'none':
        break;
      case '3,6,9,12':
        g.setFont('Vector', 22);

        g.setFontAlign(0,-1);
        g.drawString('12', CenterX,CenterY-outerRadius);

        g.setFontAlign(1,0);
        g.drawString('3', CenterX+outerRadius,CenterY);

        g.setFontAlign(0,1);
        g.drawString('6', CenterX,CenterY+outerRadius);

        g.setFontAlign(-1,0);
        g.drawString('9', CenterX-outerRadius,CenterY);
        break;
      case '1-12': {
        let innerRadius = outerRadius * 0.9 - 10;

        let dark = g.theme.dark;

        let Saturations  = [0.8,1.0,1.0,1.0,1.0,1.0,1.0,0.9,0.7,0.7,0.9,0.9];
        let Brightnesses = [1.0,0.9,0.6,0.6,0.8,0.8,0.7,1.0,1.0,1.0,1.0,1.0,];

        for (let i = 0; i < 60; i++) {
          let Phi = i * twoPi/60;

          let x = CenterX + outerRadius * sin(Phi);
          let y = CenterY - outerRadius * cos(Phi);

          if (Settings.colored) {
            let j = Math.floor(i / 5);
            let Saturation = (dark ? Saturations[j] : 1.0);
            let Brightness = (dark ? 1.0 : Brightnesses[j]);

            let Color = E.HSBtoRGB(i/60,Saturation,Brightness, true);
            g.setColor(Color[0]/255,Color[1]/255,Color[2]/255);
          }

          g.fillCircle(x,y, 1);
        }

        g.setFont('Vector', 20);
        g.setFontAlign(0,0);

        for (let i = 0; i < 12; i++) {
          let Phi = i * twoPi/12;

          let Radius = innerRadius;
          if (i >= 10) { Radius -= 4; }

          let x = CenterX + Radius * sin(Phi);
          let y = CenterY - Radius * cos(Phi);

          if (Settings.colored) {
            let Saturation = (dark ? Saturations[i] : 1.0);
            let Brightness = (dark ? 1.0 : Brightnesses[i]);

            let Color = E.HSBtoRGB(i/12,Saturation,Brightness, true);
            g.setColor(Color[0]/255,Color[1]/255,Color[2]/255);
          }

          g.drawString(i == 0 ? '12' : '' + i, x,y);
        }
      }
    }

    let now = new Date();

    let Hours   = now.getHours() % 12;
    let Minutes = now.getMinutes();

    let HoursAngle   = (Hours+(Minutes/60))/12 * twoPi - Pi;
    let MinutesAngle = (Minutes/60)            * twoPi - Pi;

    g.setColor(Settings.Foreground === 'Theme' ? Theme.fg : Settings.Foreground || '#000000');

    switch (Settings.Hands) {
      case 'simple':
        transformPolygon(simpleHourHandPolygon, CenterX,CenterY, HoursAngle);
        g.fillPoly(transformedPolygon);

        transformPolygon(simpleMinuteHandPolygon, CenterX,CenterY, MinutesAngle);
        g.fillPoly(transformedPolygon);
        break;
      case 'rounded':
        transformPolygon(roundedHourHandPolygon, CenterX,CenterY, HoursAngle);
        g.fillPoly(transformedPolygon);

        transformPolygon(roundedMinuteHandPolygon, CenterX,CenterY, MinutesAngle);
        g.fillPoly(transformedPolygon);

//      g.setColor(Settings.Foreground === 'Theme' ? Theme.fg || '#000000');
        g.fillCircle(CenterX,CenterY, outerBoltRadius);

        g.setColor(Settings.Background === 'Theme' ? Theme.bg : Settings.Background || '#FFFFFF');
        g.drawCircle(CenterX,CenterY, outerBoltRadius);
        g.fillCircle(CenterX,CenterY, innerBoltRadius);
        break;
      case 'hollow':
        transformPolygon(hollowHourHandPolygon, CenterX,CenterY, HoursAngle);
        g.drawPoly(transformedPolygon,true);

        transformPolygon(hollowMinuteHandPolygon, CenterX,CenterY, MinutesAngle);
        g.drawPoly(transformedPolygon,true);

        g.drawCircle(CenterX,CenterY, BoltRadius);
    }

    if (Settings.withSeconds) {
      g.setColor(Settings.Seconds === 'Theme' ? Theme.fgH : Settings.Seconds || '#FF0000');

      let Seconds      = now.getSeconds();
      let SecondsAngle = (Seconds/60) * twoPi - Pi;

      let sPhi = Math.sin(SecondsAngle), cPhi = Math.cos(SecondsAngle);

      g.drawLine(
        CenterX + SecondHandOffset*sPhi,
        CenterY - SecondHandOffset*cPhi,
        CenterX - SecondHandLength*sPhi,
        CenterY + SecondHandLength*cPhi
      );
    }
  }


/**** MainScreen Logic ****/

  let Changes = {}, KeysToChange;

  let fullScreen = {
    x:0,y:0, w:ScreenWidth,h:ScreenHeight, x2:ScreenWidth-1,y2:ScreenHeight-1
  };
  let AppRect;

  function openMainScreen () {
    if (Timer   != null) { clearTimeout(Timer); Timer = undefined; }
    if (AppRect == null) { AppRect = Bangle.appRect; Bangle.appRect = fullScreen; }

    Bangle.buzz();

    KeysToChange = 'Face colored Hands withSeconds Foreground Background Seconds';

    g.setTheme({ fg:'#000000', bg:'#FFFFFF' });
    g.clear(true);                            // also installs the current theme

    (activeLayout = MainScreen).render();
  }

  function applySettings ()    { Bangle.buzz(); saveSettings(); Bangle.appRect = AppRect; refreshClock(); }
  function withdrawSettings () { Bangle.buzz(); readSettings(); Bangle.appRect = AppRect; refreshClock(); }

/**** FacesScreen Logic ****/

  function openFacesScreen () {
    Bangle.buzz();

    KeysToChange   = 'Face colored';
    Bangle.appRect = fullScreen;
    refreshFacesScreen();
  }

  function refreshFacesScreen () {
    activeLayout = FacesScreen;
      activeLayout['none'].checked     = ((Changes.Face || Settings.Face) === 'none');
      activeLayout['3,6,9,12'].checked = ((Changes.Face || Settings.Face) === '3,6,9,12');
      activeLayout['1-12'].checked     = ((Changes.Face || Settings.Face) === '1-12');
      activeLayout['colored'].checked  = (Changes.colored == null ? Settings.colored : Changes.colored);
    activeLayout.render();
  }

  function chooseFace (Control) { Bangle.buzz(); Changes.Face    = Control.id;        refreshFacesScreen(); }
  function toggleColored ()     { Bangle.buzz(); Changes.colored = ! Changes.colored; refreshFacesScreen(); }

/**** HandsScreen Logic ****/

  function openHandsScreen () {
    Bangle.buzz();

    KeysToChange   = 'Hands withSeconds';
    Bangle.appRect = fullScreen;
    refreshHandsScreen();
  }

  function refreshHandsScreen () {
    activeLayout = HandsScreen;
      activeLayout['simple'].checked      = ((Changes.Hands || Settings.Hands) === 'simple');
      activeLayout['rounded'].checked     = ((Changes.Hands || Settings.Hands) === 'rounded');
      activeLayout['hollow'].checked      = ((Changes.Hands || Settings.Hands) === 'hollow');
      activeLayout['withSeconds'].checked = (Changes.withSeconds == null ? Settings.withSeconds : Changes.withSeconds);
    activeLayout.render();
  }

  function chooseHand (Control) { Bangle.buzz(); Changes.Hands = Control.id;                  refreshHandsScreen(); }
  function toggleSeconds ()     { Bangle.buzz(); Changes.withSeconds = ! Changes.withSeconds; refreshHandsScreen(); }

/**** ColorsScreen Logic ****/

  function openColorsScreen () {
    Bangle.buzz();

    KeysToChange   = 'Foreground Background Seconds';
    Bangle.appRect = fullScreen;
    refreshColorsScreen();
  }

  function refreshColorsScreen () {
    let Foreground = (Changes.Foreground == null ? Settings.Foreground : Changes.Foreground);
    let Background = (Changes.Background == null ? Settings.Background : Changes.Background);
    let Seconds    = (Changes.Seconds    == null ? Settings.Seconds    : Changes.Seconds);

    activeLayout = ColorsScreen;
      activeLayout['Foreground'].bgCol = (Foreground === 'Theme' ? Theme.fg  : Foreground);
      activeLayout['Background'].bgCol = (Background === 'Theme' ? Theme.bg  : Background);
      activeLayout['Seconds'].bgCol    = (Seconds    === 'Theme' ? Theme.fgH : Seconds);
    activeLayout.render();
  }

  function selectForegroundColor () { ColorToChange = 'Foreground'; openColorChoiceScreen(); }
  function selectBackgroundColor () { ColorToChange = 'Background'; openColorChoiceScreen(); }
  function selectSecondsColor ()    { ColorToChange = 'Seconds';    openColorChoiceScreen(); }

/**** ColorChoiceScreen Logic ****/

  let ColorToChange, chosenColor;

  function openColorChoiceScreen () {
    Bangle.buzz();

    chosenColor = (
      Changes[ColorToChange] == null ? Settings[ColorToChange] : Changes[ColorToChange]
    );
    Bangle.appRect = fullScreen;
    refreshColorChoiceScreen();
  }

  function refreshColorChoiceScreen () {
    activeLayout = ColorChoiceScreen;
      activeLayout['#000000'].selected = (chosenColor === '#000000');
      activeLayout['#FF0000'].selected = (chosenColor === '#FF0000');
      activeLayout['#00FF00'].selected = (chosenColor === '#00FF00');
      activeLayout['#0000FF'].selected = (chosenColor === '#0000FF');
      activeLayout['#FFFF00'].selected = (chosenColor === '#FFFF00');
      activeLayout['#FF00FF'].selected = (chosenColor === '#FF00FF');
      activeLayout['#00FFFF'].selected = (chosenColor === '#00FFFF');
      activeLayout['#FFFFFF'].selected = (chosenColor === '#FFFFFF');
      activeLayout['Theme'].selected   = (chosenColor === 'Theme');
    activeLayout.render();
  }

  function chooseColor (Control) { Bangle.buzz(); chosenColor = Control.id; refreshColorChoiceScreen(); }
  function chooseThemeColor ()   { Bangle.buzz(); chosenColor = 'Theme';    refreshColorChoiceScreen(); }

  function applyColor () {
    Changes[ColorToChange] = chosenColor;
    openColorsScreen();
  }

  function withdrawColor () {
    openColorsScreen();
  }

/**** common logic for multiple screens ****/

  function applyChanges () {
    Settings = Object.assign(Settings,Changes);
    Changes  = {};
    openMainScreen();
  }

  function withdrawChanges () {
    Changes  = {};
    openMainScreen();
  }


  g.setFont12x20();                  // does not seem to be respected in layout!

  let OkCancelWidth = Math.max(
    g.stringWidth('Ok'), g.stringWidth('Cancel')
  ) + 2*10;

  let StdFont     = { font:'12x20' };
  let legible     = Object.assign({ col:'#000000', bgCol:'#FFFFFF' }, StdFont);
  let leftAligned = Object.assign({ halign:-1, valign:0 }, legible);
  let ColorView   = Object.assign({ width:30, border:1, BorderColor:'#000000' }, StdFont);
  let ColorChoice = Object.assign({ DrawableWidth:30, DrawableHeight:30, onTouch:chooseColor }, StdFont);

/**** MainScreen ****/

  let MainScreen = new Layout({
    type:'v', c:[
      Label('Settings', { common:legible, bold:true, filly:1 }),
      { height:4 },
      { type:'h', c:[
        { width:4 },
        Label('Faces', { common:leftAligned, fillx:1 }),
        Image(Caret,   { common:leftAligned }),
        { width:4 },
      ], filly:1, onTouch:openFacesScreen },
      { type:'h', c:[
        { width:4 },
        Label('Hands', { common:leftAligned, fillx:1 }),
        Image(Caret,   { common:leftAligned }),
        { width:4 },
      ], filly:1, onTouch:openHandsScreen },
      { type:'h', c:[
        { width:4 },
        Label('Colors', { common:leftAligned, fillx:1 }),
        Image(Caret,    { common:leftAligned }),
        { width:4 },
      ], filly:1, onTouch:openColorsScreen },
      { height:4 },
      { type:'h', c:[
        Button('Ok',     { common:legible, width:OkCancelWidth, onTouch:applySettings }),
        { width:4 },
        Button('Cancel', { common:legible, width:OkCancelWidth, onTouch:withdrawSettings }),
      ], filly:1 },
    ], bgCol:'#FFFFFF'
  });


/**** FacesScreen ****/

  let FacesScreen = new Layout({
    type:'v', c:[
      Label('Clock Faces', { common:legible, bold:true, filly:1 }),
      { height:4 },
      { type:'h', c:[
        { width:4 },
        Radiobutton({ id:'none', GroupName:'Faces', common:legible, onChange:chooseFace }),
        Label(' no Face', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:checkInnerRadiobutton },
      { type:'h', c:[
        { width:4 },
        Radiobutton({ id:'3,6,9,12', GroupName:'Faces', common:legible, onChange:chooseFace }),
        Label(' 3, 6, 9 and 12', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:checkInnerRadiobutton },
      { type:'h', c:[
        { width:4 },
        Radiobutton({ id:'1-12', GroupName:'Faces', common:legible, onChange:chooseFace }),
        Label(' numbers 1...12', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:checkInnerRadiobutton },
      { type:'h', c:[
        { width:30 },
        Checkbox({ id:'colored', common:legible, onChange:toggleColored }),
        Label(' colorful', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:toggleInnerCheckbox },
      { height:4 },
      { type:'h', c:[
        Button('Ok',     { common:legible, width:OkCancelWidth, onTouch:applyChanges }),
        { width:4 },
        Button('Cancel', { common:legible, width:OkCancelWidth, onTouch:withdrawChanges }),
      ], filly:1 },
    ], bgCol:'#FFFFFF'
  });


/**** HandsScreen ****/

  let HandsScreen = new Layout({
    type:'v', c:[
      Label('Clock Hands', { common:legible, bold:true, filly:1 }),
      { height:4 },
      { type:'h', c:[
        { width:4 },
        Radiobutton({ id:'simple', GroupName:'Faces', common:legible, onChange:chooseHand }),
        Label(' simple', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:checkInnerRadiobutton },
      { type:'h', c:[
        { width:4 },
        Radiobutton({ id:'rounded', GroupName:'Faces', common:legible, onChange:chooseHand }),
        Label(' rounded + Bolt', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:checkInnerRadiobutton },
      { type:'h', c:[
        { width:4 },
        Radiobutton({ id:'hollow', GroupName:'Faces', common:legible, onChange:chooseHand }),
        Label(' hollow + Bolt', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:checkInnerRadiobutton },
      { type:'h', c:[
        { width:4 },
        Checkbox({ id:'withSeconds', common:legible, onChange:toggleSeconds }),
        Label(' show Seconds', { common:leftAligned, pad:4, fillx:1 }),
      ], filly:1, onTouch:toggleInnerCheckbox },
      { height:4 },
      { type:'h', c:[
        Button('Ok',     { common:legible, width:OkCancelWidth, onTouch:applyChanges }),
        { width:4 },
        Button('Cancel', { common:legible, width:OkCancelWidth, onTouch:withdrawChanges }),
      ], filly:1 },
    ], bgCol:'#FFFFFF'
  });


/**** ColorsScreen ****/

  let ColorsScreen = new Layout({
    type:'v', c:[
      Label('Clock Colors', { common:legible, bold:true, filly:1 }),
      { height:4 },
      { type:'h', c:[
        { width:4 },
        Label('Foreground', { common:leftAligned, pad:4, fillx:1 }),
        Label('', { id:'Foreground', common:ColorView, bgCol:Theme.fg }),
        { width:4 },
      ], filly:1, onTouch:selectForegroundColor },
      { type:'h', c:[
        { width:4 },
        Label('Background', { common:leftAligned, pad:4, fillx:1 }),
        Label('', { id:'Background', common:ColorView, bgCol:Theme.bg }),
        { width:4 },
      ], filly:1, onTouch:selectBackgroundColor },
      { type:'h', c:[
        { width:4 },
        Label('Seconds',    { common:leftAligned, pad:4, fillx:1 }),
        Label('', { id:'Seconds', common:ColorView, bgCol:Theme.fgH }),
        { width:4 },
      ], filly:1, onTouch:selectSecondsColor },
      { height:4 },
      { type:'h', c:[
        Button('Ok',     { common:legible, width:OkCancelWidth, onTouch:applyChanges }),
        { width:4 },
        Button('Cancel', { common:legible, width:OkCancelWidth, onTouch:withdrawChanges }),
      ], filly:1 },
    ], bgCol:'#FFFFFF'
  });


/**** ColorChoiceScreen ****/

  function drawColorChoice (x,y, Width,Height, Details) {
    let selected = Details.selected;
    if (selected) {
      g.setColor('#FF0000');
      g.fillPoly([
        x,y, x+Width-1,y, x+Width-1,y+Height-1, x,y+Height-1, x,y,
        x+3,y+3, x+3,y+Height-4, x+Width-4,y+Height-4, x+Width-4,y+3, x+3,y+3
      ]);
    } else {
      g.setColor('#000000');
      g.drawRect(x+3,y+3, x+Width-4,y+Height-4);
    }

    g.setColor(Details.col);
    g.fillRect(x+4,y+4, x+Width-5,y+Height-5);
  }

  let ColorChoiceScreen = new Layout({
    type:'v', c:[
      Label('Choose Color', { common:legible, bold:true, filly:1 }),
      { height:4 },
      { type:'h', c:[
        Drawable(drawColorChoice, { id:'#000000', common:ColorChoice, col:'#000000' }),
        { width:8 },
        Drawable(drawColorChoice, { id:'#FF0000', common:ColorChoice, col:'#FF0000' }),
        { width:8 },
        Drawable(drawColorChoice, { id:'#00FF00', common:ColorChoice, col:'#00FF00' }),
        { width:8 },
        Drawable(drawColorChoice, { id:'#0000FF', common:ColorChoice, col:'#0000FF' }),
      ], filly:1 },
      { type:'h', c:[
        Drawable(drawColorChoice, { id:'#FFFFFF', common:ColorChoice, col:'#FFFFFF' }),
        { width:8 },
        Drawable(drawColorChoice, { id:'#FFFF00', common:ColorChoice, col:'#FFFF00' }),
        { width:8 },
        Drawable(drawColorChoice, { id:'#FF00FF', common:ColorChoice, col:'#FF00FF' }),
        { width:8 },
        Drawable(drawColorChoice, { id:'#00FFFF', common:ColorChoice, col:'#00FFFF' }),
      ], filly:1 },
      { type:'h', c:[
        Label('use Theme:', { id:'Theme', common:leftAligned, pad:4 }),
        { width:10 },
        Drawable(drawColorChoice, { id:'Theme', common:ColorChoice, col:Theme.fg }),
      ], filly:1, onTouch:chooseThemeColor },
      { height:4 },
      { type:'h', c:[
        Button('Ok',     { common:legible, width:OkCancelWidth, onTouch:applyColor }),
        { width:4 },
        Button('Cancel', { common:legible, width:OkCancelWidth, onTouch:withdrawColor }),
      ], filly:1 },
    ], bgCol:'#FFFFFF'
  });



  readSettings();

  Bangle.on('swipe', (Direction) => {
    if (Direction === 0) { openMainScreen(); }
  });

  setTimeout(refreshClock, 500);                   // enqueue first draw request

  Bangle.on('lcdPower', (on) => {
    if (on) {
      if (Timer != null) { clearTimeout(Timer); Timer = undefined; }
      refreshClock();
    }
  });