/*
 * Covers for books that have none (docs/library.md): drawn here, the same on every
 * device, from what the book is called and where it stands — its title, author, shelf
 * category and folders. Words in them point to a design concept (a motif, curated
 * palettes, a typeface: Marx and Kapital to constructivism, Hegel and Dialektik to quiet
 * geometry, Meer to waves, Krieg to map contours …); a hash of title and author picks
 * the palette, the layout and every detail of the motif, so no two books look alike and
 * each always looks the same. Nothing is stored or sent: it's an SVG, made when needed.
 *
 *   DioraGenCover.url(book, {gray})  a data: URL (book: {title, author, shelfTag, folders})
 *   DioraGenCover.theme(book)        the concept chosen (for tests)
 *
 * Chrome-61-safe: no ?. / ??.
 */
(function () {
  'use strict';
  const W = 300, H = 450;

  // ---- chance, the same for the same book ------------------------------------------------

  function hash(s) {
    let h = 2166136261;
    for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
    return h >>> 0;
  }
  function rng(seed) {
    let a = seed >>> 0;
    return function () {
      a = (a + 0x6D2B79F5) >>> 0;
      let t = a;
      t = Math.imul(t ^ (t >>> 15), t | 1);
      t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
  }
  const pick = (r, list) => list[Math.floor(r() * list.length)];
  const between = (r, a, b) => a + r() * (b - a);
  const f1 = n => Math.round(n * 10) / 10;

  // ---- the concepts ---------------------------------------------------------------------------
  // words: stems found anywhere in the text (lower case, umlauts as they are);
  // palettes: [background, ink, accent, second accent], curated to sit well together.

  const SERIF = "Georgia, 'Times New Roman', serif";
  const SANS = "'Helvetica Neue', Helvetica, Arial, sans-serif";
  const NARROW = "'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif";
  const MONO = "'Courier New', Courier, monospace";

  const THEMES = [
    {id: 'konstruktiv', font: NARROW, upper: true,
      words: ['marx', 'kapital', 'capital', 'arbeit', 'labor', 'labour', 'revolution', 'sozialis', 'socialis', 'kommun', 'communis',
        'ökonom', 'econom', 'klasse', 'class', 'gewerkschaft', 'streik', 'strike', 'partei', 'lenin', 'luxemburg', 'engels',
        'proletar', 'faschis', 'fascis', 'jacobin', 'gegenstandpunkt', 'demokratie', 'herrschaft', 'massen'],
      palettes: [['#efe6d2', '#1b1b1b', '#c8322b', '#1b1b1b'], ['#1d1d1d', '#f2ead7', '#d23a2c', '#e8b23a'], ['#e9dfc8', '#22252a', '#b5302a', '#7a8a8f']]},
    {id: 'geometrie', font: SERIF,
      words: ['philosoph', 'hegel', 'kant', 'dialekt', 'dialect', 'vernunft', 'reason', 'geist', 'spirit', 'ethik', 'ethic',
        'logik', 'logic', 'metaphys', 'phänomen', 'phenomen', 'denken', 'wahrheit', 'truth', 'sein', 'nichts', 'nothing',
        'kritik', 'critique', 'theorie', 'theory', 'begriff', 'wissen'],
      palettes: [['#f1ece1', '#2b2a27', '#b08a3e', '#6f7d72'], ['#26292e', '#ece4d4', '#c9a25a', '#8a9aa8'], ['#e7e1d6', '#3a3833', '#8c5a3c', '#5d6b74']]},
    {id: 'psyche', font: SERIF,
      words: ['lacan', 'freud', 'psycho', 'sex', 'begehren', 'desire', 'disavowal', 'verleugn', 'unbewusst', 'unconscious',
        'comedy', 'komik', 'komöd', 'parallax', 'real', 'voice', 'stimme', 'žižek', 'zizek', 'zupan', 'dolar', 'traum', 'dream',
        'odd one', 'antigone', 'let them rot', 'klavierspielerin'],
      palettes: [['#f3e3d9', '#3d2440', '#c45b6a', '#5c8a8a'], ['#2c2236', '#f2dfd2', '#e07a6f', '#7fb3ae'], ['#e8ddeb', '#2e2a3d', '#8d4f8a', '#d99a6c']]},
    {id: 'wellen', font: SERIF,
      words: ['meer', 'sea', 'ozean', 'ocean', 'wasser', 'water', 'insel', 'island', 'fluss', 'river', 'flut', 'flood', 'deluge',
        'sintflut', 'schiff', 'ship', 'welle', 'wave', 'strand', 'küste', 'coast', 'regen', 'rain'],
      palettes: [['#e5eef0', '#13324a', '#2f6f8f', '#8fb8c6'], ['#0f2a3d', '#e3edf0', '#4c95b0', '#a9d3dc'], ['#efe9dc', '#1f3b4d', '#3d7a8c', '#c98a5a']]},
    {id: 'karte', font: SERIF, upper: true,
      words: ['krieg', 'war', 'geschichte', 'history', 'empire', 'imperium', 'reich', 'zerstörung', 'destruction', 'wages',
        'nazi', 'staat', 'state', 'nation', 'kolonial', 'colonial', 'weltkrieg', 'schlacht', 'battle', 'grenze', 'border',
        'seeing like', 'world-system', 'weltsystem'],
      palettes: [['#e9e1cc', '#3b3a2c', '#8a4b2a', '#6d7a4f'], ['#2f3127', '#e6dcc4', '#b5763c', '#8e9a6b'], ['#ddd5bd', '#2c2a22', '#7a3b2e', '#5f6f63']]},
    {id: 'kosmos', font: SANS, upper: true,
      words: ['stern', 'star', 'kosmos', 'cosmos', 'space', 'weltraum', 'planet', 'mond', 'moon', 'dune', 'nacht', 'night',
        'universum', 'universe', 'zeit', 'time', 'licht', 'light', 'galax', 'messiah', 'science fiction', 'sci-fi', 'zukunft', 'future'],
      palettes: [['#141833', '#ece6d3', '#e3b65b', '#7d8bd4'], ['#0e1424', '#dfe6f2', '#d9824a', '#6fa3c4'], ['#1f1a33', '#efe7da', '#c9a8e0', '#e3c46b']]},
    {id: 'ornament', font: SERIF,
      words: ['fantasy', 'drache', 'dragon', 'magie', 'magic', 'prophezei', 'prophecy', 'throne', 'thron', 'könig', 'king',
        'krone', 'crown', 'schwert', 'sword', 'warrior', 'krieger', 'cats', 'katze', 'legende', 'legend', 'märchen', 'fairy',
        'zauber', 'spell', 'ice and fire', 'bundle'],
      palettes: [['#1e2a2a', '#efe3c4', '#c69a3c', '#8f3b46'], ['#2b1d2e', '#f0e2c8', '#d3a13f', '#3f7a6d'], ['#f0e6d0', '#2d2433', '#8c3a4a', '#2f6b65']]},
    {id: 'botanik', font: SERIF,
      words: ['natur', 'nature', 'wald', 'forest', 'baum', 'tree', 'garten', 'garden', 'blume', 'flower', 'blatt', 'leaf',
        'frühling', 'spring', 'sommer', 'summer', 'pflanze', 'plant', 'wurzel', 'root', 'gras', 'grass', 'pilz', 'mushroom'],
      palettes: [['#eef0e4', '#23301f', '#4f7a43', '#b7a35a'], ['#203024', '#e8ecdc', '#86a86b', '#d6b56a'], ['#f2ece0', '#2b3326', '#6f8f5a', '#c27c5a']]},
    {id: 'berge', font: SANS, upper: true,
      words: ['berg', 'mountain', 'alpen', 'alps', 'gipfel', 'peak', 'zauberberg', 'hügel', 'hill', 'landschaft', 'landscape',
        'schnee', 'snow', 'winter', 'eis', 'ice', 'tal', 'valley', 'wandern'],
      palettes: [['#e8ecef', '#22303b', '#5b7a8f', '#a9bccb'], ['#24323d', '#eef1f2', '#7f9fb3', '#c8d6de'], ['#efe9e0', '#2e3438', '#6f8590', '#c7a27a']]},
    {id: 'zellen', font: SANS,
      words: ['biolog', 'gehirn', 'brain', 'mensch', 'human', 'behave', 'verhalten', 'behavio', 'sucht', 'addict', 'enough',
        'körper', 'body', 'medizin', 'medic', 'gen', 'evolution', 'neuro', 'zelle', 'cell', 'leben', 'life', 'tier', 'animal'],
      palettes: [['#f1ebe4', '#26323a', '#e0765c', '#4f9a94'], ['#1f2b31', '#eef0ea', '#f08a6c', '#69b3aa'], ['#eaf0ee', '#22303a', '#d4634e', '#3f8f8a']]},
    {id: 'raster', font: SANS,
      words: ['stadt', 'city', 'urban', 'risiko', 'risk', 'gesellschaft', 'society', 'moderne', 'modern', 'system', 'analys',
        'netz', 'network', 'technik', 'techn', 'smart', 'notes', 'notiz', 'daten', 'data', 'digital', 'maschine', 'machine',
        'architektur', 'architect', 'hyperpolitik', 'politik', 'politic', 'revolution of', 'end of the'],
      palettes: [['#ecebe7', '#1f2328', '#d1453b', '#2f5f8f'], ['#22262b', '#ebe8e1', '#e2b33c', '#4f86b8'], ['#f0ede6', '#2a2d31', '#3f6fa0', '#d9a03a']]},
    {id: 'schatten', font: NARROW, upper: true,
      words: ['tod', 'death', 'mord', 'murder', 'crime', 'verbrechen', 'schatten', 'shadow', 'dunkel', 'dark', 'angst', 'fear',
        'serotonin', 'blut', 'blood', 'gift', 'poison', 'detektiv', 'detective', 'kommissar', 'thriller'],
      palettes: [['#151515', '#ecebe6', '#c2302f', '#5a5a5a'], ['#ecebe6', '#151515', '#a8241f', '#7c7c7c'], ['#1c1f24', '#e4e0d8', '#d0a04a', '#55606b']]},
    {id: 'typo', font: SERIF,
      words: ['roman', 'novel', 'erzählung', 'stories', 'geschichten', 'gedicht', 'poem', 'poesie', 'poetry', 'brief', 'letters',
        'tagebuch', 'diary', 'molloy', 'beckett', 'manuskripte', 'literatur', 'literature', 'review', 'zeitschrift'],
      palettes: [['#f2ede3', '#211f1c', '#9b3b2f', '#7d7466'], ['#24211e', '#f0e9dc', '#d39b5f', '#8f8578'], ['#e9e4f0', '#26222e', '#5b4a8a', '#a3909a']]},
  ];
  const DEFAULT = {id: 'bauhaus', font: SANS,
    palettes: [['#efe9dd', '#24262a', '#d0533f', '#3f7fb0'], ['#26282d', '#efe8da', '#e3b04b', '#5b9aa8'], ['#e8ecef', '#22272c', '#c8553d', '#6b8f71'],
      ['#f3e9e2', '#2a2523', '#b84a62', '#4c7a8a']]};

  // ---- which concept: the words, weighted by where they stand -------------------------------

  function norm(s) { return String(s || '').toLowerCase(); }

  function scored(book) {
    // The title says most about a book; author and shelf category help, a folder only tips the scales.
    const fields = [[norm(book.title), 3], [norm(book.shelfTag), 2],
      [norm((book.folders || (book.folder ? [book.folder] : [])).join(' ')), 1], [norm(book.author), 2]];
    return THEMES.map(t => {
      let score = 0;
      t.words.forEach(w => fields.forEach(f => { if (f[0].indexOf(w) >= 0) score += f[1]; }));
      return {t, score};
    }).filter(x => x.score > 0).sort((a, b) => b.score - a.score);
  }

  function theme(book) {
    const s = scored(book);
    return s.length ? s[0].t : DEFAULT;
  }

  // ---- motifs: each draws into the whole cover, the text gets its own space later -----------

  const M = {
    konstruktiv(r, p) {
      let s = '';
      const a = pick(r, [-34, -28, 28, 34, -45]);
      s += `<g transform="rotate(${a} 150 225)">`;
      for (let i = 0; i < 3; i++) {
        const y = between(r, 60, 380), h = between(r, 14, 46);
        s += `<rect x="-120" y="${f1(y)}" width="540" height="${f1(h)}" fill="${i ? p[1] : p[2]}" opacity="${i ? 0.9 : 1}"/>`;
      }
      s += '</g>';
      s += `<circle cx="${f1(between(r, 70, 230))}" cy="${f1(between(r, 120, 320))}" r="${f1(between(r, 38, 78))}" fill="${p[2]}"/>`;
      s += `<rect x="${f1(between(r, 20, 200))}" y="${f1(between(r, 40, 360))}" width="${f1(between(r, 30, 80))}" height="${f1(between(r, 30, 80))}" fill="none" stroke="${p[1]}" stroke-width="6"/>`;
      return s;
    },
    geometrie(r, p) {
      const cx = between(r, 100, 200), cy = between(r, 170, 300);
      let s = '';
      const n = 4 + Math.floor(r() * 5);
      for (let i = 1; i <= n; i++) s += `<circle cx="${f1(cx)}" cy="${f1(cy)}" r="${f1(i * between(r, 14, 22))}" fill="none" stroke="${i % 3 ? p[1] : p[2]}" stroke-width="${i % 3 ? 1 : 2.4}" opacity="${i % 3 ? 0.55 : 0.9}"/>`;
      const phi = 1.618;
      s += `<line x1="0" y1="${f1(H / phi)}" x2="${W}" y2="${f1(H / phi)}" stroke="${p[1]}" stroke-width="1" opacity=".5"/>`;
      s += `<line x1="${f1(W / phi)}" y1="0" x2="${f1(W / phi)}" y2="${H}" stroke="${p[1]}" stroke-width="1" opacity=".5"/>`;
      s += `<circle cx="${f1(cx + between(r, -40, 40))}" cy="${f1(cy + between(r, -40, 40))}" r="${f1(between(r, 8, 18))}" fill="${p[2]}"/>`;
      return s;
    },
    psyche(r, p) {
      let s = `<rect x="${W / 2}" y="0" width="${W / 2}" height="${H}" fill="${p[3]}" opacity=".35"/>`;
      const cy = between(r, 170, 290);
      const rx = between(r, 60, 95), ry = between(r, 80, 130);
      s += `<ellipse cx="${f1(W / 2 - rx * 0.45)}" cy="${f1(cy)}" rx="${f1(rx)}" ry="${f1(ry)}" fill="${p[2]}" opacity=".85"/>`;
      s += `<ellipse cx="${f1(W / 2 + rx * 0.45)}" cy="${f1(cy)}" rx="${f1(rx)}" ry="${f1(ry)}" fill="none" stroke="${p[1]}" stroke-width="2.5"/>`;
      s += `<line x1="${W / 2}" y1="40" x2="${W / 2}" y2="${H - 40}" stroke="${p[1]}" stroke-width="1" opacity=".6"/>`;
      return s;
    },
    wellen(r, p) {
      let s = '';
      const n = 6 + Math.floor(r() * 5);
      const amp = between(r, 6, 16), len = between(r, 60, 120);
      for (let i = 0; i < n; i++) {
        const y0 = 120 + i * (300 / n);
        let d = `M0 ${f1(y0)}`;
        for (let x = 0; x <= W; x += 10) d += ` L${x} ${f1(y0 + Math.sin((x / len) * Math.PI * 2 + i * 0.7) * amp)}`;
        d += ` L${W} ${H} L0 ${H} Z`;
        s += `<path d="${d}" fill="${i % 2 ? p[2] : p[3]}" opacity="${f1(0.18 + i * 0.07)}"/>`;
      }
      return s;
    },
    karte(r, p) {
      let s = '';
      const cx = between(r, 80, 220), cy = between(r, 160, 320);
      for (let i = 1; i <= 9; i++) {
        let d = '';
        for (let k = 0; k <= 36; k++) {
          const a = (k / 36) * Math.PI * 2;
          const rad = i * 15 * (1 + 0.18 * Math.sin(a * 3 + i) + 0.1 * Math.cos(a * 5 + r()));
          d += (k ? ' L' : 'M') + f1(cx + Math.cos(a) * rad) + ' ' + f1(cy + Math.sin(a) * rad * 1.15);
        }
        s += `<path d="${d} Z" fill="none" stroke="${i % 4 ? p[1] : p[2]}" stroke-width="${i % 4 ? 0.8 : 1.8}" opacity="${i % 4 ? 0.45 : 0.9}"/>`;
      }
      s += `<g stroke="${p[2]}" stroke-width="1.4"><line x1="${f1(cx)}" y1="${f1(cy - 30)}" x2="${f1(cx)}" y2="${f1(cy + 30)}"/><line x1="${f1(cx - 30)}" y1="${f1(cy)}" x2="${f1(cx + 30)}" y2="${f1(cy)}"/></g>`;
      return s;
    },
    kosmos(r, p) {
      let s = '';
      for (let i = 0; i < 70; i++) s += `<circle cx="${f1(r() * W)}" cy="${f1(r() * H)}" r="${f1(between(r, 0.4, 1.5))}" fill="${p[1]}" opacity="${f1(between(r, 0.3, 0.9))}"/>`;
      const cx = between(r, 90, 210), cy = between(r, 170, 290), pr = between(r, 30, 55);
      for (let i = 1; i <= 3; i++) s += `<ellipse cx="${f1(cx)}" cy="${f1(cy)}" rx="${f1(pr + i * 28)}" ry="${f1((pr + i * 28) * 0.38)}" fill="none" stroke="${p[3]}" stroke-width="1" opacity=".6" transform="rotate(-18 ${f1(cx)} ${f1(cy)})"/>`;
      s += `<circle cx="${f1(cx)}" cy="${f1(cy)}" r="${f1(pr)}" fill="${p[2]}"/>`;
      s += `<circle cx="${f1(cx + pr * 0.35)}" cy="${f1(cy - pr * 0.2)}" r="${f1(pr)}" fill="${p[0]}" opacity=".35"/>`;
      return s;
    },
    ornament(r, p) {
      const cx = W / 2, cy = between(r, 190, 260), n = pick(r, [8, 10, 12, 16]);
      let s = `<g transform="translate(${cx} ${f1(cy)})">`;
      const len = between(r, 70, 105), wid = between(r, 18, 30);
      for (let i = 0; i < n; i++) {
        s += `<path d="M0 0 C ${f1(wid)} ${f1(-len * 0.4)} ${f1(wid * 0.5)} ${f1(-len * 0.8)} 0 ${f1(-len)} C ${f1(-wid * 0.5)} ${f1(-len * 0.8)} ${f1(-wid)} ${f1(-len * 0.4)} 0 0 Z" ` +
          `fill="${i % 2 ? p[2] : p[3]}" opacity=".85" transform="rotate(${f1(i * 360 / n)})"/>`;
      }
      s += `<circle r="${f1(between(r, 12, 20))}" fill="${p[1]}"/><circle r="${f1(len + 12)}" fill="none" stroke="${p[2]}" stroke-width="1.5"/></g>`;
      s += `<rect x="14" y="14" width="${W - 28}" height="${H - 28}" fill="none" stroke="${p[2]}" stroke-width="1.5" opacity=".8"/>`;
      return s;
    },
    botanik(r, p) {
      let s = '';
      const n = 5 + Math.floor(r() * 4);
      for (let i = 0; i < n; i++) {
        const x = between(r, 40, 260), y = between(r, 150, 420), len = between(r, 60, 130), a = between(r, -50, 50);
        s += `<g transform="translate(${f1(x)} ${f1(y)}) rotate(${f1(a)})">` +
          `<path d="M0 0 C ${f1(len * 0.35)} ${f1(-len * 0.35)} ${f1(len * 0.3)} ${f1(-len * 0.8)} 0 ${f1(-len)} C ${f1(-len * 0.3)} ${f1(-len * 0.8)} ${f1(-len * 0.35)} ${f1(-len * 0.35)} 0 0 Z" fill="${i % 3 ? p[2] : p[3]}" opacity=".8"/>` +
          `<line x1="0" y1="0" x2="0" y2="${f1(-len * 0.95)}" stroke="${p[0]}" stroke-width="1.2" opacity=".7"/></g>`;
      }
      return s;
    },
    berge(r, p) {
      let s = `<circle cx="${f1(between(r, 60, 240))}" cy="${f1(between(r, 120, 190))}" r="${f1(between(r, 22, 38))}" fill="${p[3]}"/>`;
      for (let i = 0; i < 4; i++) {
        const base = 260 + i * 45;
        let d = `M0 ${H} L0 ${base}`;
        for (let x = 0; x <= W; x += 30) d += ` L${x} ${f1(base - between(r, 10, 90 - i * 15))}`;
        d += ` L${W} ${base} L${W} ${H} Z`;
        s += `<path d="${d}" fill="${i % 2 ? p[1] : p[2]}" opacity="${f1(0.35 + i * 0.18)}"/>`;
      }
      return s;
    },
    zellen(r, p) {
      let s = '';
      for (let i = 0; i < 16; i++) {
        const x = between(r, 20, 280), y = between(r, 140, 430), rad = between(r, 12, 42);
        s += `<circle cx="${f1(x)}" cy="${f1(y)}" r="${f1(rad)}" fill="${i % 3 ? p[3] : p[2]}" opacity="${f1(between(r, 0.25, 0.75))}"/>`;
        if (i % 4 === 0) s += `<circle cx="${f1(x)}" cy="${f1(y)}" r="${f1(rad * 0.3)}" fill="${p[1]}" opacity=".7"/>`;
      }
      return s;
    },
    raster(r, p) {
      if (r() < 0.45) {   // or a skyline
        let s = '';
        let x = 10;
        while (x < W - 10) {
          const w = between(r, 18, 46), h = between(r, 60, 230), v = r();
          s += `<rect x="${f1(x)}" y="${f1(H - 20 - h)}" width="${f1(w)}" height="${f1(h)}" fill="${v < 0.15 ? p[2] : v < 0.25 ? p[3] : p[1]}" opacity="${v < 0.25 ? 0.95 : f1(0.12 + v * 0.18)}"/>`;
          for (let wy = H - 30 - h + 12; wy < H - 32; wy += 14) {
            if (r() < 0.4) s += `<rect x="${f1(x + 5)}" y="${f1(wy)}" width="${f1(Math.max(3, w - 10))}" height="3" fill="${p[0]}" opacity=".5"/>`;
          }
          x += w + between(r, 2, 6);
        }
        return s;
      }
      let s = '';
      const cols = 4 + Math.floor(r() * 3), rows = 5 + Math.floor(r() * 3), gap = 6;
      const cw = (W - 40 - gap * (cols - 1)) / cols, rh = (H - 200 - gap * (rows - 1)) / rows;
      for (let i = 0; i < cols; i++) for (let j = 0; j < rows; j++) {
        const v = r();
        const fill = v < 0.12 ? p[2] : v < 0.2 ? p[3] : p[1];
        s += `<rect x="${f1(20 + i * (cw + gap))}" y="${f1(180 + j * (rh + gap))}" width="${f1(cw)}" height="${f1(rh)}" fill="${fill}" opacity="${v < 0.2 ? 0.95 : f1(0.08 + v * 0.12)}"/>`;
      }
      return s;
    },
    schatten(r, p) {
      const x = between(r, 60, 240);
      return `<rect x="${f1(x)}" y="0" width="${f1(between(r, 3, 8))}" height="${H}" fill="${p[2]}"/>` +
        `<circle cx="${f1(x)}" cy="${f1(between(r, 200, 330))}" r="${f1(between(r, 50, 90))}" fill="${p[3]}" opacity=".35"/>`;
    },
    typo(r, p, book) {
      const ch = (book.title || '?').replace(/^[^A-Za-zÄÖÜäöüß0-9]+/, '').charAt(0).toUpperCase() || '?';
      return `<text x="${f1(between(r, 20, 60))}" y="${f1(between(r, 380, 430))}" font-family="${SERIF}" font-size="${f1(between(r, 240, 320))}" ` +
        `fill="${p[2]}" opacity=".9">${esc(ch)}</text>` +
        `<line x1="20" y1="${f1(between(r, 120, 160))}" x2="${W - 20}" y2="${f1(between(r, 120, 160))}" stroke="${p[1]}" stroke-width="1" opacity=".5"/>`;
    },
    bauhaus(r, p) {
      let s = '';
      for (let i = 0; i < 4; i++) {
        const kind = Math.floor(r() * 3), x = between(r, 30, 270), y = between(r, 150, 410), size = between(r, 40, 110);
        const fill = pick(r, [p[2], p[3], p[1]]);
        if (kind === 0) s += `<circle cx="${f1(x)}" cy="${f1(y)}" r="${f1(size / 2)}" fill="${fill}" opacity=".9"/>`;
        else if (kind === 1) s += `<rect x="${f1(x - size / 2)}" y="${f1(y - size / 2)}" width="${f1(size)}" height="${f1(size)}" fill="${fill}" opacity=".9" transform="rotate(${f1(between(r, -20, 20))} ${f1(x)} ${f1(y)})"/>`;
        else s += `<path d="M${f1(x)} ${f1(y - size / 2)} L${f1(x + size / 2)} ${f1(y + size / 2)} L${f1(x - size / 2)} ${f1(y + size / 2)} Z" fill="${fill}" opacity=".9"/>`;
      }
      return s;
    },
  };

  // ---- the text -------------------------------------------------------------------------------------

  function esc(s) {
    return String(s).replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;'}[c]));
  }

  // The title's lines, for a size that fits; a word too long is broken.
  function lines(text, size, max) {
    const per = Math.max(4, Math.floor(250 / (size * 0.56)));
    const words = String(text).split(/\s+/).filter(Boolean);
    const out = [];
    let cur = '';
    words.forEach(w => {
      while (w.length > per) { if (cur) { out.push(cur); cur = ''; } out.push(w.slice(0, per - 1) + '‑'); w = w.slice(per - 1); }
      if (!cur) cur = w;
      else if ((cur + ' ' + w).length <= per) cur += ' ' + w;
      else { out.push(cur); cur = w; }
    });
    if (cur) out.push(cur);
    if (out.length > max) { out.length = max; out[max - 1] = out[max - 1].replace(/\s*\S*$/, '') + ' …'; }
    return out;
  }

  // Only the main title ("Seeing Like a State: How …" → "Seeing Like a State").
  function mainTitle(t) {
    let s = String(t || '').split(/\s[-:–—•·\/]\s|:\s/)[0].trim();
    // "Der Zauberberg. Erster Band" → "Der Zauberberg", but not at an initial ("George R. R. Martin").
    const re = /(\S+)\.\s+(?=[A-ZÄÖÜ])/g;
    let m;
    while ((m = re.exec(s))) {
      if (m[1].length >= 3) { s = s.slice(0, m.index + m[1].length); break; }
    }
    return s.length >= 3 ? s : String(t || '?');
  }

  function textBlock(r, th, p, book) {
    const title = mainTitle(book.title);
    const upper = th.upper;
    const t = upper ? title.toUpperCase() : title;
    const len = t.length;
    const longest = t.split(/\s+/).reduce((n, w) => Math.max(n, w.length), 0);
    // The longest word stays whole: the type gets smaller rather than the word broken.
    const size = Math.max(15, Math.min(len <= 10 ? 40 : len <= 18 ? 34 : len <= 30 ? 28 : len <= 48 ? 23 : 19,
      Math.floor(250 / (longest * 0.58))));
    const ls = lines(t, size, 5);
    const lh = size * 1.12;
    const layout = pick(r, ['top', 'top', 'bottom', 'plate']);
    const author = String(book.author || '').split(/[;,]/)[0].trim();
    const blockH = ls.length * lh + (author ? 30 : 0) + 40;
    let y0, s = '';
    if (layout === 'top') {
      y0 = 34;
      s += `<rect x="0" y="0" width="${W}" height="${f1(blockH)}" fill="${p[0]}" opacity=".94"/>`;
    } else if (layout === 'bottom') {
      y0 = H - blockH + 20;
      s += `<rect x="0" y="${f1(H - blockH)}" width="${W}" height="${f1(blockH)}" fill="${p[0]}" opacity=".94"/>`;
    } else {
      y0 = 70;
      s += `<rect x="18" y="${f1(y0 - 34)}" width="${W - 36}" height="${f1(blockH)}" rx="3" fill="${p[0]}" opacity=".95"/>`;
    }
    const x = 26;
    ls.forEach((l, i) => {
      s += `<text x="${x}" y="${f1(y0 + size * 0.85 + i * lh)}" font-family="${th.font}" font-size="${size}" font-weight="${th.font === SERIF ? 400 : 700}" ` +
        `fill="${p[1]}" letter-spacing="${upper ? 0.5 : 0}">${esc(l)}</text>`;
    });
    if (author) {
      s += `<text x="${x}" y="${f1(y0 + ls.length * lh + 22)}" font-family="${SANS}" font-size="12" letter-spacing="2" fill="${p[2]}">${esc(author.toUpperCase())}</text>`;
    }
    return s;
  }

  // ---- the cover ---------------------------------------------------------------------------------------

  function gray(hex) {
    const n = parseInt(hex.slice(1), 16);
    const y = Math.round(0.3 * (n >> 16) + 0.59 * ((n >> 8) & 255) + 0.11 * (n & 255));
    const h = (y < 16 ? '0' : '') + y.toString(16);
    return '#' + h + h + h;
  }

  function svg(book, opts) {
    const th = theme(book);
    const r = rng(hash(norm(book.title) + '|' + norm(book.author)));
    let p = pick(r, th.palettes);
    if (opts && opts.gray) p = p.map(gray);
    const motif = (M[th.id] || M.bauhaus)(r, p, book);
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}">` +
      `<rect width="${W}" height="${H}" fill="${p[0]}"/>${motif}${textBlock(r, th, p, book)}</svg>`;
  }

  const cache = new Map();
  function url(book, opts) {
    const key = (book.title || '') + '|' + (book.author || '') + '|' + (book.shelfTag || '') + '|' +
      ((book.folders || []).join(',')) + '|' + (opts && opts.gray ? 1 : 0);
    if (!cache.has(key)) cache.set(key, 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg(book, opts)));
    return cache.get(key);
  }

  window.DioraGenCover = {url, svg, theme: book => theme(book).id};
})();