/* file KLEIDER/web/src/pinw/pinw.js */
// Herbert Schiemann

// globale Variable
/*
var n_imgsect;            // Anzahl der Bild-Abschnitte
var n_sect;               // Anzahl der Abschnitte

   // Liste, Bilderabschnitte vor Textabschnitten
   // [sectnr, title, [[src, fmt], ], len  ] für Bilderabschnitte
   // [sectnr, title, null,           null ] für Textabscnitte
var init_d;
var prf_img;              // Prefix des Pfades der Bilddateien
*/

//#if INFO_POSE
var info_msg = "";
/* verschiedene Ausgaben zur Verteilung
0                      keine Ausgabe
1 detailed_pose_info   Einzelheiten zu den Zerlegungsschritten
2 last_pose_info       Zerlegung bei der Positionierung des letzten Pinwandzettels
3 detailed_field_count Zahl der Felder bei den einzelnen Schritten
4 last_field_count     Zahl der Felder bei der Postionierung des letzten Pinwandzettels
*/
var info_mode = 0;  // keine Ausgabe
var info_cnt  = 0;  // Zähler für info-Ausgaben
var info_on   = 0;  // Ausgabe eingeschaltet?

function info_show () {
    if (info_msg)
        alert (info_msg);
    info_msg = "";
    info_on = 0;
} // info_show
//#endif INFO_POSE

var lg = null;  // Nutzer-Name als URI-Komponente kodiert
function lg_g () {
    var s = window.localStorage || window.sessionStorage;
    if (s) {
        s = s.getItem ("name");
        if (s)
            lg = encodeURIComponent(s);
    }
}

var lng;           // Sprach-Suffix
var set   = {};    // gespeicherte Einstellungen
function set_g () {
    var s = window.localStorage || window.sessionStorage;
    if (s) {
        var v = s.getItem("set");
        if (v) {
            var m;
            while (m = v.match (/^([a-z0-9_]+)=([^:]*)/)) {
                set[m[1]] = m[2];
                v = v.replace(/^[^:]*:?/, "");
            }
        }
    }
} // set_g

var help_l = 0;     // Hilfe 0: ist nicht geladen, 1: wird geladen, 2: ist geladen, 3: aktiv
var help_k = {};    // 
var help_e = null;

// Hilfeabschnitt verbergen, "mouseout"
function help_h (e) {
    if (help_e) {
        if (e) { // mouseout-handler
            var r = e.relatedTarget;
            while (r) {
                if (r == help_e)
                    return;
                if (r.localName == "body")
                    break;
                r = r.parentNode;
            }
        }
        var c = help_e.getAttribute ("class");
        help_e.setAttribute("class", c.replace(/\bshow\b/, "hide"));
        if (ky_l == 3)
            ky_l = 2;
    }
} // help_h

// zeigt ggf die Hilfe zum Schlüssel k an
// 0: Hilfe nicht aktiv oder k ist schon angezeigt, weiter
// 1: Hilfe wird neu angezeigt, Aktion ist zu beenden
function help_c (k) {
    if (help_l == 3 && ! help_k[k]) {
        var e = document.getElementById (k);
        if (e) {
            var c;
            if (help_e) {
                c = help_e.getAttribute ("class");
                help_e.setAttribute ("class", c.replace (/\bshow\b/, "hide"));
            }
            help_e = e;
            c = e.getAttribute ("class");
            e.setAttribute ("class", c.replace (/\bhide\b/, "show"));
            help_k[k] = 1;
            return 1;
        }
    }
    return 0;
} // help_c

// schaltet die Hilfe an und aus
// k: "f1" Taste F1, "qm" anders (Maus?)
function help_t (k) {
    if (! help_l) {
        help_l = 1;
        var r = new XMLHttpRequest();
        var f = function () {
            var s = r.status;
            if (200 <= s && s < 400) {
                var b = document.getElementsByTagName("body") [0];
                var n = r.responseXML.getElementsByTagName("body") [0];
                var m;
                for (n = n.firstChild; n; n = m) {
                    m = n.nextSibling;
                    if (n.localName == "div") {
                        n = document.adoptNode(n);
                        n.setAttribute ("class", "hlp hide");
                        n.addEventListener ("mouseout", help_h);                    
                        b.appendChild(n);
                    }
                }
                help_l = 3;
                help_c ("hilfe_ein_" + k);
            }
            else {
                sound ("e");
                help_l = 0;
            }
        };
        r.addEventListener("loadend", f);
        r.open ("get", "/h/pinw/h.xhtml" + lng);
        r.send();
    }
    else if (help_l == 2) {
        help_l = 3;
        help_c ("hilfe_ein_" + k);
    }
    else if (help_l == 3) {
        help_c ("hilfe_aus_" + k);
        help_l = 2;
        help_k = {};
    }
} // help_t

var ky_l = 0;      // Tastenhilfe 0: ist nicht geladen, 1: wird geladen, 2: geladen, 3: angezeigt

// zeigt die Tasten-Hilfe zum Schlüssel k an
function ky_c (k) {
    if (ky_l == 0) {
        ky_l = 1;
        var r = new XMLHttpRequest();
        var f = function () {
            var s = r.status;
            if (200 <= s && s < 400) {
                var b = document.getElementsByTagName("body") [0];
                var n = r.responseXML.getElementsByTagName("body") [0];
                var m;
                for (n = n.firstChild; n; n = m) {
                    m = n.nextSibling;
                    if (n.localName == "div") {
                        n = document.adoptNode(n);
                        n.setAttribute ("class", "hlp hide");
                        n.addEventListener ("mouseout", help_h);                    
                        b.appendChild(n);
                    }
                }
                ky_l = 2;
                ky_c (k);
            }
            else {
                sound ("e");
                help_l = 0;
            }
        };
        r.addEventListener("loadend", f);
        r.open ("get", "/h/pinw/k.xhtml" + lng);
        r.send();
    }
    else if (ky_l == 2) {
        var e = document.getElementById (`k_${k}`);
        if (e) {
            var c;
            if (help_e) {
                c = help_e.getAttribute ("class");
                help_e.setAttribute ("class", c.replace (/\bshow\b/, "hide"));
            }
            help_e = e;
            c = e.getAttribute ("class");
            e.setAttribute ("class", c.replace (/\bhide\b/, "show"));
            ky_l = 3;
        }
    }
    else if (ky_l == 3) {
        help_h ();
    }
} // ky_c

var radio;       // Tafel-Umschalter
var ilm;         // Liste der ersten Bilder der Abschnitte
var links_d;     // Abschnitt mit Verweisen
var hint_d;      // Abschnitt mit Hinweis
var audio;       // audio-Element
var sl = [0];    // Verweisziele der Fremdbilder 

function c_l () {
    var i = radio.cid;
    var d;       // Objekt
    var l;       // Bilderliste
    var k;       // Bildkennung, Bildposition
    var h = "";  // Fragment (Hash)
    var x;       // Absschnitts-Index
    var m;
    if (!i);
    else if (i == "d_main");
    else if (m = i.match(/^d_([0-9]+)$/))
        h = `#s${m[1]}`;
    else if (i == "d_vw") {
        d = radio.cd()[1];
        if (d) {
            l = d.il;
            if (l === ilm) {
                if (x = d.cip())
                    h = `#rndimgshow_s${init_d[x][0]}`;
            }
            else for (x = 0; x < n_imgsect; ++x) {
                if (l === init_d[x][2]) {
                    h = `#s${init_d[x][0]}`;
                    if (k = d.cii())
                        h = `${h}_${k}`;
                    if (k = d.cip())
                        h = `${h}_${k}`;
                    break;
                }
            }
        }
    }
    l = window.location ;
    return l.protocol + "//" + l.host + l.pathname + h;
} // c_l

// setzt das Attribut img/@src für alle Bilder im Abschnitt e
function isrc (e) {
    var l = e.getElementsByTagName("img");
    var n;
    var i;
    var s;
    var p;
    var r;
    for (n = 0; n < l.length; ++n) {
        i = l[n];
        if (i.getAttribute ("src"))
            continue;
        s = i.getAttribute ("x-id");
        if (s) {
            p = i.getAttribute ("class") == "thb" ? "thumbs" : "images";
            i.setAttribute ("src", `${prf_img}${p}/${s}.jpg`);
        }
    }
} // isrc

// alle Bilder "im Hintergrund" laden
function ldi () {
    var l = document.getElementsByTagName("img");
    var i = -1;
    var s;
    var f = function () {
        while (++i < l.length) {
            e = l[i];
            if (e.getAttribute("src") || e.getAttribute("class") == "thb")
                continue;
            s = i.getAttribute ("x-id");
            if (s) {
                i.setAttribute ("src", `${prf_img}images/${s}.jpg`);
                // https://developer.mozilla.org/de/docs/Web/API/WindowOrWorkerGlobalScope
                // https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout
                setTimeout (f, 250);
                return;
            }
        }
    };
} // ldi;

// eins von mehreren Kindelementen ist aktiv
function Radio (div) {
    // Schlüssel sind die ID der "Wechseltafeln"
    // Einträge [pid, obj ]
    // Weiter Einträge sind "kundenspezifisch"
    this.data = {};
    this.cid = null;   // ID des aktiven Elements
    this.pid = null;
    var e;
    var i;
    for (e = div.firstChild; e; e = e.nextSibling) {
        if (e.nodeType == e.ELEMENT_NODE) {
            i = e.getAttribute ("id");
            this.data[i] = [null];
        }
    }
} // Radio

Radio.prototype.cd = function () {
    return this.cid ? this.data[this.cid] : null;
}; // Radio.prototype.cd

// zurück (aufrufende Tafel)
Radio.prototype.back = function () {
    var a = this.cid;
    var b;
    if (a) {
        var b = this.data[a][0];
        if (b)
            this.show (b, 1);
    }
};

// zurück (zuvor angezeigte Tafel)
Radio.prototype.prev = function () {
    var a = this.pid;
    if (a)
        this.show (a, 1);
};

// einem Verweisziel i (Attribut x-l) folgen
Radio.prototype.xl = function (i) {
    if (i == "back")
        this.back();
    else if (i == "prev")
        this.prev();
    else if (i == "top") {
        this.show("d_main");
    }
    else if (i.match (/^[1-9]/))
        this.show(`d_${i}`);
    else if (i == "img")
        this.show("d_vw", 0, [-1, Math.floor(Math.random() * n_imgsect)]);
    else if (m = i.match(/i(\d+)_(\d+)/))
        this.show("d_vw", 0, [parseInt(m[1]), parseInt(m[2])]);
    // nicht benutzt
    else if (m = i.match(/img_(\d+)/))
        this.show("d_vw", 0, [-1, parseInt(m[1])]);
    else
        xl (i);
}; // Radio.prototype.xl

// id
//  b : "zurück", preid des "Aufgerufenen" wird nicht gesetzt
//  z : zusätzliche Daten zur Aktivierung
Radio.prototype.show = function (id, b, z) {
    var e;
    var n;
    var c;
    var d;
    if (this.cid == id || !id)
        return;
    n = document.getElementById(id);
    if (!n)
        return;
    if (this.cid) {
        links_h ();
        e = document.getElementById(this.cid);
        c = e.getAttribute ("class");
        // alte Tafel deaktivieren
        if (c.match(/\bdias\b/))
            this.data[this.cid][1].stp();
        c = c.replace(/\bshow\b/, "hide");
        e.setAttribute("class", c);
    }
    c = n.getAttribute ("class");
    c = c.replace(/\bhide\b/, "show");
    n.setAttribute("class", c);
    d = this.data[id];
    if (!b || ! d[0])
        d[0] = this.cid;
    this.pid = this.cid;
    this.cid  = id;
    // Tafel aktivieren, ggf Objekt erzeugen, aktivieren
    if (c.match(/\bpinw\b/)) {
        if (!d[1])
            d[1] = new Pw (n);
        else
            d[1].pose();
        if (help_l == 3)
            help_c ("pinwand")
            || help_c (n.getAttribute ("id") == "d_main" ? "toppage" : "sectpage")
    }
    else if (c.match(/\bdias\b/)) {
        if (!d[1])
            d[1] = new Dias (n, "ds_img");
        if (z) {
            if (z[0] < 0) {
                d[1].set(ilm, z[1]);
                if (help_l == 3)
                    help_c ("ds_main");
            }
            else {
                d[1].set(init_d[z[0]][2], z[1]);
                if (help_l == 3)
                    help_c ("ds_sect");
            }
        }
    }
    else if (c.match(/\bsnim\b/)) {
        if (!d[1])
            d[1] = new Plain (n);
        d[1].activate ();
        if (help_l == 3)
            help_c ("snim");
    }
}; // Radio.prototype.show

// behandelt ein Tastenereignis
Radio.prototype.onk = function (e) {
    var d = this.cd()[1];
    if (d) {
        if (d.onk(e))
            return 1;
    }
    d = e.code;
    if (d == "Enter") {
        d = e.target.getAttribute("x-l");
        if (d) {
            if (help_l == 3) {
                var h = e.target.getAttribute("x-h");
                if (h && help_c(h))
                    return 1;
            }
            this.xl (d);
        }
        else
            return 0;
    }
    else if (help_l == 3 && help_c(`r_${d}`));
    else if (d == "ArrowLeft")
        this.back ();
    else if (d == "ArrowRight")
        this.prev ();
    else if (d == "Home")
        this.show("d_main");
    else if (d == "ArrowUp") {
        d = Math.floor(Math.random() * (n_sect)) + 1;
        d = `d_${d}`;
        if (d == this.cid)
            d = "d_main";
        this.show(d);
    }
    else
        return 0;
    return 1;
}; // Radio.prototype.onk

// Abschnitt ohne Bilder
function Plain (d) {
    isrc (d);
    this.snr = 0;     // Abschnittsnummer
    this.fe  = null;  // Fokus bei der Anzeige
    var m;
    if (m = d.getAttribute ("id").match (/[1-9][0-9]*/))
        this.snr = parseInt (m);
    m = d.getElementsByTagName ("span");
    var i;
    for (i = 0; i < m.length; ++i) {
        if (m[i].getAttribute ("x-l")) {
            this.fe = m[i];
            break;
        }
    }
    if (!this.fe) {
        m = d.getElementsByClassName ("thb");
        if (m.length > 0)
            this.fe = m[0];
    }
    d.addEventListener ("click", this.oncl, false);
}; // Plain

// Klick in einem Abschnitt ohne Bild
Plain.prototype.oncl = function (e) {
    var l;
    var t = e.target;
    if (help_l == 3) {
        var h = t.getAttribute ("x-h");
        if (h) {
            if (help_c (h))
                return;
        }
        else {
            h = t.getAttribute ("class");
            if (h == "thb")
                if (help_c (h))
                    return;
        }
    }
    if (l = t.getAttribute("x-l"))
        radio.xl (l);
} // Plain.prototype.oncl

// behandelt ein Tastenereignis
Plain.prototype.onk = function (e) {
    var c = e.code;
    var r;
    if (c == "KeyH")
        ky_c ("plain");
    else if (c == "ArrowUp" && e.shiftKey) {
        // zum nächsten Abschnitt in der Dokument-Reihenfolge
        if (help_l == 3 && help_c("plain_ShiftArrowUp"))
            return 1;
        r = this.snr + 1;
        if (r > n_sect)
            r = 1;
        radio.show (`d_${r}`);
    }
    else if (c == "ArrowDown" && e.shiftKey) {
        // zum vorhergehenden Abschnitt in der Dokument-Reihenfolge
        if (help_l == 3 && help_c("plain_ShiftArrowDown"))
            return 1;
        r = this.snr - 1;
        if (r = 0)
            r = n_sect;
        radio.show (`d_${r}`);
    }
    else
        return 0;
    return 1;
}; // Plain.prototype.onk

// Focus setzen
Plain.prototype.activate = function () {
    if (this.fe)
        this.fe.focus ();
}; // Plain.prototype.activate

Plain.prototype.tm_f = function () {};

function Pw (div) {
    this.div = div;
    
    // Einstellungen für die pseudozufällige Verteilung der Bilder
    // in this.load gesetzt
    this.rmx  = 1;    // Einstellungen zur Bilderverteilung zufällig setzen
                      // 0 fix gleichverteilt, 1 nein, 2 total, 3 "diagonal", 
    this.ctsq = 3;    // Schnittreihenfolge: 0 erst an x-Punkten, 1 erst an y-Punkten
                      // 2 zyklisch links - oben - rechts - unten, 3 das größte Stück
    this.clpx = 0;    // Bildposition rechts / links einrasten (0 bis 3)
    this.clpy = 0;    // Bildposition oben / unten einrasten
    this.lvq  = 512.0;
    this.load ();
    
    // Einträge der Liste
    // [elt, left, top, left + width, top + height]
    // Maße einschließlich border (Rahmen)
    // this.im = [];
    this.im = null;
    // alle Bilder mit Index >= vix sind voll sichtbar
    this.vix = null;
    var s = this;
    // Timer für den verzögerten Aufruf von pose
    this.tm = null; 
    this._f = function () {s.tm = null; s.pose();};
    this.sx = null;
    this.init ();
    this.setup ();
} // Pw

// Der zweite Teil der Initialisierung,
// nachdem alle nötigen Daten geladen sind
Pw.prototype.setup = function () {
    var s = this;
    oncl = function (e) {s.oncl(e)};
    var e = this.div.firstChild;
    var cs;
    var w, h;
    this.im = [];

    var f = function () {
        while (e) {
            if (e.nodeType == e.ELEMENT_NODE) {
                cs = window.getComputedStyle (e);
                // https://drafts.csswg.org/cssom/#cssstyledeclaration
                // https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-414.pdf
                // https://www.ecma-international.org/ecma-262/10.0/index.html#sec-parseint-string-radix
                // https://www.w3.org/TR/CSS2/propidx.html#q24.0
                w = parseInt(cs.getPropertyValue ("width"))
                    +  parseInt(cs.getPropertyValue ("padding-left"))
                    +  parseInt(cs.getPropertyValue ("padding-right"))
                    +  parseInt(cs.getPropertyValue ("border-left-width"))
                    +  parseInt(cs.getPropertyValue ("border-right-width"));
                h = parseInt(cs.getPropertyValue ("height"))
                    +  parseInt(cs.getPropertyValue ("padding-top"))
                    +  parseInt(cs.getPropertyValue ("padding-bottom"))
                    +  parseInt(cs.getPropertyValue ("border-top-width"))
                    +  parseInt(cs.getPropertyValue ("border-bottom-width"));
                if (Number.isNaN (w) || Number.isNaN (h) || h < 5) {
                    setTimeout (f, 100);
                    return;
                }
                else {
                    s.im.push ([e, 0, 0, w, h]);
                    e.addEventListener ("click", oncl, true);
                }
                e = e.nextSibling;
            }
        }
        /*
          var m = "";
          var i;
          for (i = 0; i < this.im.length; ++i) {
          p = this.im[i];
          m += `${p[3]} x ${p[4]}\n`;
          }
          alert (m);
        */
        s.toe(0);
        s.pose();
    };
    f ();
} // Pw.prototype.setup

// verzögerter Aufruf von pose
Pw.prototype.tm_f = function () {
    if (this.tm)
        clearInterval (this.tm);
    this.tm = setTimeout (this._f, 100);
}; // Pw.prototype.tm_f

Pw.prototype.oncl = function (e) {
    var t;
    // https://dom.spec.whatwg.org/#dom-node-parentnode
    for (t = e.target; t.parentNode != this.div; t = t.parentNode);
    var i;
    var l = this.im.length;
    for (i = 0; i < l && this.im[i][0] != t; ++i);
    if (i < this.vix) {
        if (help_l == 3)
            help_c ("verdeckt");
        this.toe (i);
        this.vte (this.im.length - 2);
        this.pose (this.vix);
    }
    else {
        if (help_l == 3) {
            i = t.getAttribute ("x-h");
            if (i && help_c (i))
                return;
        }
        for (t = e.target; !t.getAttribute ("id"); t = t.parentNode) {
            if (help_l == 3) {
                i = t.getAttribute ("x-h");
                if (i && help_c (i))
                    break;
            }
            i = t.getAttribute ("x-l");
            if (i) {
                radio.xl (i);
                break;
            }
        }
    }
}; // Pw.prototype.oncl

// ist der Pinwandzettel (i) voll sichtbar?
Pw.prototype.isv = function (i) {
    var j;
    var ls = this.im;
    var ln = ls.length;
    var x  = ls[i];
    var y;
    var l = x[1];
    var t = x[2];
    var r = x[3];
    var b = x[4];
    for (j = i + 1; j < ln; ++j) {
        y = ls[j];
        if (y[3] > l && y[4] > t && r > y[1] && b > y[2])
            return 0;
    }
    return 1;
}; // Pw.prototype.isv

// Ergebnis i
// alle Bilder mit Index < i sind zum Teil verdeckt,
// alle Bilder mit Index >= i sind unverdeckt
// Annnahme: alle Bilder mit Index > j sind unverdeckt
Pw.prototype.vte = function (j) {
    var ls = this.im;
    if (!ls)
        return;
    var i  = 0;
    // var j  = ls.length - 1;
    while (i <= j) {
        if (! this.isv(i))
            ++i;
        else if (this.isv(j))
            --j;
        else {
            x = ls [i];
            ls [i] = ls [j];
            ls [j] = x;
            ++i;
            --j;
        }
    }
    this.vix = i;
}; // Pw.prototype.vte

// Pinwandzettel i an das Ende setzen
// Anzeige bleibt unverändert
Pw.prototype.toe = function (i) {
    var ls  = this.im;
    if (!ls)
        return;
    var end = ls.length - 1;
    var j;
    var x;
    if (i < end) {
        x = ls[i];
        for (j = i; j < end; ++j)
            ls [j] = ls [j+1];
        ls [end] = x;
    }
}; // Pw.prototype.toe

// Hilfsfunktion: Gewichtung eines Intervalls
Pw.prototype.ivw = function (l, r, e, w) {
    // 0 <= l < r <= e, 0 < w <= e
    // f(x) = min (x, w, e - x, e - w), 0 <= x < e
    // 2 * Integral f(x) dx, l <= x < r
    w = Math.min (w, e - w);
    var i = 0;
    if (w <= 0)
        i = 1;
    else if (r <= w)
        i = (r - l) * (r + l);
    else if (e - w <= l)
        i = (r - l) * (e - r + e - l);
    else {
        if (l < w) {
            i += (w - l) * (w + l);
            l = w;
        }
        if (e - w < r) {
            i += (w - r + e) * (w + r - e);
            r = e - w;
        }
        if (l < r)
            i += (r - l) * w * 2;
    }
    return i;
}; // Pw.prototype.ivw

// Hilfsfunktion: Pseudo-Zufallsvariable mit geeigneter Gewichtung
Pw.prototype.rv = function (l, r, e, w, z) {
    // 0 < l < r <= e, 0 < w <= e
    // z :  0  normal
    //      1  Wertebereich beschneiden
    //      2  diskret
    //      3  Gleichverteilung in der "Mitte"
    if (e <= w)
        return 0;
    if (z == 2) {
        if (Math.random () < 0.5)
            return l + w < e ? l : e - w;
        else
            return r < w ? 0 : r - w;
    }
    var x1, x2, c;
    if (z == 3) {
        x1 = (r - w < 0) ? 0 : r - w;
        x2 = (l + w < e) ? l : e - w;
        return Math.floor (x1 + Math.random() * (x2 - x1));
    }
    // Dichte für max (0, l-w) <= x <= min (r+w, e-w):
    // f(x) = max (min (x+w, r) - max (x, l), 0)
    // Fall l + w <= r: l < r <= l+w
    // x+w=l, x=l, x+w=r, x=r
    // x < l-w      : f(x) = 0
    // l-w <= x < l : f(x) = x + w - l
    // l <= x < r-w : f(x) = w
    // r-w <= x < r : f(x) = r - x
    // r <= x       : f(x) = 0
    // Fall l + w > r
    // x+w=l, x+w=r, x=l, x=r
    // x < l-w        : f(x) = 0
    // l-x <= x < r-w : f(x) = x + w - l
    // r-w <= x < l   : f(x) = r - l
    // l <= x < r     : f(x) = r - x
    // r <= x         : f(x) = 0
    if (l + w <= r) {
        x1 = l;
        x2 = r - w;
        c  = w;
    }
    else {
        x1 = r - w;
        x2 = l;
        c  = r - l;
    }
    var x0 = l - w;
    var xa = Math.max (0, x0);
    var xe = Math.min (r, e - w);
    // x0 <= x < x1 : f(x) = x - x0
    //                F(x) = (x - x0) ** 2 / 2
    //                x = sqrt (2 * F(x)) + x0
    //                F1 = (x1 - x0) ** 2 / 2
    var f1 = (x1 - x0) ** 2 / 2;
    // x1 <= x < x2 : f(x) = c
    //                F(x) = F1 + c * (x - x1)
    //                x = (F(x) - F1) / c + x1
    //                F2 = F1 + c * (x2 - x1)
    var f2 = f1 + c * (x2 - x1);
    // x2 <= x < r  : f(x) = c + x2 - x
    //                F(x) = F2 + (c + x2) * (x - x2) - (x ** 2 - x2 ** 2) / 2
    //                     = F2 + (c + x2) * (x - x2) - (x - x2) * (x + x2) / 2
    //                     = F2 + (x - x2) * (2 * c + 2 * x2 - x - x2) / 2
    //                     = F2 + (x - x2) * (c + c + x - x) / 2
    //                0 = x ** 2 - 2 * (c + x2) * x + 2 * (F(x) - F2) + 2 * x2 * (c + x2) - x2 ** 2
    //                  = (x - (c + x2)) ** 2 - (c + x2) ** 2 + 2 * (F(x) - F2) + 2 * x2 * (c + x2) - x2 ** 2
    //                x - x2 - c = - sqrt ( (c + x2) ** 2 - 2 * (F(x) - F2) - 2 * x2 * (c + x2) + x2 ** 2)
    //                           = - sqrt ( c**2 + 2 * c * x2 + x2 ** 2 - 2 * (F(x) - F2) - 2 * c * x2 - 2 * x2 ** 2 + x2 **2)
    //                           = - sqrt ( c**2              + x2 ** 2 - 2 * (F(x) - F2)              - x2 ** 2)
    //                           = - sqrt ( c**2 - 2 * (F(x) - F2))
    //                         x = x2 + c - sqrt (c**2 - 2 * (F(x) - F2))
    var fa = xa < x1 ? (xa - x0) ** 2 / 2 :
        xa < x2 ? f1 + c * (xa - x1)      :
        f2  + (xa - x2) * (c + c + x2 - xa) / 2;
    var fe = xe < x1 ? (xe - x0) ** 2 / 2 :
        xe < x2 ? f1 + c * (xe - x1)      :
        f2  + (xe - x2) * (c + c + x2 - xe) / 2;
    var f = fa + Math.random () * (fe - fa);
    var x = f < f1 ? Math.sqrt (f + f) + x0 :
        f < f2 ? (f - f1) / c + x1 :
        x2 + c - Math.sqrt (Math.max (c ** 2 - 2 * (f - f2), 0));
    var t = x < x1 ? (x - x0) ** 2 / 2 :
        x < x2 ? f1 + c * (x - x1)      :
        f2 + (x - x2) * (c + c + x2 - x) / 2;
    // https://www.ecma-international.org/ecma-262/10.0/index.html#sec-math.floor
    x = Math.floor (x);
    if (z == 1) {
        if (x < l && x + w < r) {
            x = l;
            if (x + w > r)
                x = r - w;
        }
        else if (l < x && r < x + w) {
            x = l;
            if (r > x + w)
                x = r - w;
        }
    }
    return x;
}; // Pw.prototype.rv

// Hilfsfunktion zu Pw.prototype.pose: einen Zettel zur Felderliste hinzufügen
Pw.prototype.az = function (flds, i) {
    var lq = this.lvq; // Quotient der Gewichtungen der verschiedenen "Levels"
    var rl = [];       // Ergebnisliste
    var l  = i[1];     // left
    var t  = i[2];     // top
    var r  = i[3];     // right
    var b  = i[4];     // bottom
    var q  = this.ctsq;
    var f;             // ein Feld aus der Liste flds
    var fl, ft, fr, fb, lv;
    // https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.shift
    // https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.push
    for (f = flds.shift(); f; f = flds.shift()) {
        fl = f[0];
        ft = f[1];
        fr = f[2];
        fb = f[3];
        if (r <= fl || fr <= l || fb <= t || b <= ft) {
            rl.push(f);
            continue;
        }
        lv = f[4];
        if (q == 0) {
            if (fl < l) {
                rl.push ([fl, ft, l, fb, lv]);
                fl = l;
            }
            if (r < fr) {
                rl.push ([r, ft, fr, fb, lv]);
                fr = r;
            }
            if (ft < t) {
                rl.push ([fl, ft, fr, t, lv]);
                ft = t;
            }
            if (b < fb) {
                rl.push ([fl, b, fr, fb, lv]);
                fb = b;
            }
        }
        else if (q == 1) {
            if (ft < t) {
                rl.push ([fl, ft, fr, t, lv]);
                ft = t;
            }
            if (b < fb) {
                rl.push ([fl, b, fr, fb, lv]);
                fb = b;
            }
            if (fl < l) {
                rl.push ([fl, ft, l, fb, lv]);
                fl = l;
            }
            if (r < fr) {
                rl.push ([r, ft, fr, fb, lv]);
                fr = r;
            }
        }
        // zyklisch: links, oben, rechts, unten
        else if (q == 2) {
            if (fl < l) {
                rl.push ([fl, ft, l, fb, lv]);
                fl = l;
            }
            if (ft < t) {
                rl.push ([fl, ft, fr, t, lv]);
                ft = t;
            }
            if (r < fr) {
                rl.push ([r, ft, fr, fb, lv]);
                fr = r;
            }
            if (b < fb) {
                rl.push ([fl, b, fr, fb, lv]);
                fb = b;
            }
        }
        // optimiert: immer das größte Stück
        else if (q == 3) {
            var j, w, w2;
            while (1) {
                k = 0;
                j = -1;
                w = -1;
                if (fl < l) {
                    w = (l - fl) * (fb - ft);
                    j = 0;
                }
                if (ft < t) {
                    w2 = (fr - fl) * (t - ft);
                    if (w2 > w) {
                        w = w2;
                        j = 1;
                    }
                }
                if (r < fr) {
                    w2 = (fr - r) * (fb - ft);
                    if (w2 > w) {
                        w = w2;
                        j = 2;
                    }
                }
                if (b < fb) {
                    if ( (fr - fl) * (fb - b) > w ) {
                        rl.push ([fl, b, fr, fb, lv]);
                        fb = b;
                        continue;
                    }
                }
                if (j == 0) {
                    rl.push ([fl, ft, l, fb, lv]);
                    fl = l;
                }
                else if (j == 1) {
                    rl.push ([fl, ft, fr, t, lv]);
                    ft = t;
                }
                else if (j == 2) {
                    rl.push ([r, ft, fr, fb, lv]);
                    fr = r;
                }
                else
                    break;
            }
        }
        rl.push ([fl, ft, fr, fb, lv / lq]);
    }
    return rl;
}; // Pw.prototype.az

//#if INFO_POSE
function info_pose_step (flds, fl, li, self, left, top, wd, ht) {
    var m = "";
    var i;
    var f;
    m += `img:${li[1]},${li[2]},${li[3]},${li[4]}\n`;
    m += `set:${self.rmx},${self.ctsq},${self.clpx},${self.clpy},${self.lvq}\n`;
    for (i = 0; i < flds.length; ++i) {
        f = flds[i];
        m += `fld ${i}:${f[0]},${f[1]},${f[2]},${f[3]},${f[4]},${f[5]}\n`;
    }
    f = fl;
    m += `selfld:${f[0]},${f[1]},${f[2]},${f[3]},${f[4]},${f[5]}\n`;
    m += `ltwh:${left},${top},${wd},${ht}\n`;
    info_msg += m;
} // info_pose_step

Pw.prototype.info_distrib = function () {
    var m =
        this.ctsq == 0 ? "h" :
        this.ctsq == 1 ? "v" :
        this.ctsq == 2 ? "c" :
        this.ctsq == 3 ? "m" :
        "?" ;
    m += `${this.clpx}${this.clpy}`;
    info_msg += m;
} // Pw.prototype.info_distrib

//#endif INFO_POSE

// Bilder bis ausschließlich Index end pseudozufällig neu positionieren
Pw.prototype.pose = function (end) {
    var i;    // Mischen bis ausschließlich i
    if (typeof end != "number") {
        end = this.im.length;
        if (!end)
            return;
        i = end - 1;
    }
    else
        i = end;
    var j;
    var w;
    var l  = this.im;
    // mischen
    while (i > 1) {
        j = Math.floor (Math.random() * i);
        --i;
        if (j < i) {
            w = l[i];
            l[i] = l[j];
            l[j] = w;
        }
    }
    // Einstellung
    if (this.rmx > 1) {
        i = Math.floor (Math.random() * 64);
        j = i % 4;
        this.ctsq = j;
        i -= j;
        i /= 2;
        j = i % 4;
        this.clpx = j;
        if (this.rmx == 3)
            this.clpy == j;
        else {
            i -= j;
            this.clpy = i / 4;
        }
    }
    
    var s = this;
    var li;      // list item
    var iw, ih;  // Bildbreite und Bildhöhe
    var aw;      // akkumuliertes Gewicht
    var st = window.getComputedStyle (this.div);
    var wd = parseInt(st.getPropertyValue ("width"));
    var ht = parseInt(st.getPropertyValue ("height"));
    var top, left;
    var flds = [ [0, 0, wd, ht, 1.0, 0.0] ];
    var fl;      // ein Feld in dieser Liste
    if (this.rmx)
        for (j = end; j < l.length; ++j)
            flds = this.az (flds, l[j]);
    var fef = function (f) {
        w = f[4] * s.ivw (f[0], f[2], wd, iw) * s.ivw (f[1], f[3], ht, ih);
        f[5] = w;
        aw += w;
    };
    for (j = end; j-- > 0;) {
        li = l[j];
        iw  = li[3] - li[1];
        ih  = li[4] - li[2];
        if (this.rmx) {
            aw = 0;
            // https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.foreach
            flds.forEach (fef);
            w = Math.random() * aw;
            aw = 0;
            for (i = 0; i < flds.length && aw <= w; ++i) {
                fl = flds[i];
                aw += fl[5];
            }
            left = this.rv (fl[0], fl[2], wd, iw, this.clpx);
            top  = this.rv (fl[1], fl[3], ht, ih, this.clpy);
//#if INFO_POSE
            if (info_on == 0);
            else if (info_mode == 1)
                info_pose_step (flds, fl, li, this, left, top, wd, ht);
            else if (info_mode == 2) {
                if (!j)
                    info_pose_step (flds, fl, li, this, left, top, wd, ht);
            }
            else if (info_mode == 3) {
                if (j == end - 1)
                    this.info_distrib ();
                info_msg += `,${flds.length}`;
                if (!j)
                    info_msg += "\n";
            }
            else if (info_mode == 4) {
                if (!j)
                    info_msg += `,${flds.length}`;
            }
//#endif INFO_POSE
        }
        else {
            // einfache Verteilung
            left = Math.floor (Math.random() * (wd - iw));
            top  = Math.floor (Math.random() * (ht - ih));
        }
        // https://drafts.csswg.org/cssom/#elementcssinlinestyle
        st = li[0].style;
        st.setProperty ("left", left + "px");
        st.setProperty ("top",  top  + "px");
        li[1] = left;
        li[2] = top;
        li[3] = left + iw;
        li[4] = top + ih;
        if (this.rmx && j)
            flds = this.az (flds, li);
    }
    this.vte (end - 1);
    /*
    var str = "";
    flds.forEach (function (a) {
        str += "[ " + a + "]\n";
    });
    alert (str);
    */

    // Elemente in die richtige Reihenfolge bringen
    fl = l.length;
    if (fl > 0) {
        w  = this.div;
        for (i = 0; i < fl; ++i) {
            j = l[i][0];
            w.removeChild(j);
            w.appendChild(j);
        }
        j.focus ();
    }
}; // Pw.prototype.pose

// Initialisierung
Pw.prototype.init = function () {
    var d = this.div;
    var s = d.getAttribute("id");
    var m = s.match(/[1-9][0-9]*/);
    if (m) {
        s = parseInt(m[0]); // die Nummer "dieses" Abschnitts
        var l = d.getElementsByClassName("rnd");
        var e;
        var i, j, k;
        var c;
        var fi = -1;        // Das "Fremdbild" ist nicht zu setzen
        var ni = n_imgsect; // Anzahl der "freien" Bildabschnitte
        var ns = n_sect;    // Anzahl der freien Text- oder Bildabschnitte
        var b = init_d;
        // Die Liste "init_d"
        // enthält alle Bilderabschnitte vor den Textabschnitten.
        // Die Liste x enthält die bereits "verbrauchten" Positionen
        // in der Liste "init_d" in aufsteigender Reihenfolge
        var x = [];
        // r ist eine Liste von Paaren [imgelt, section_data]
        var r = [];
        
        // Abschnittsdaten c zur Zufallszahl
        var f = function (n) {
            for (i = 0; i < x.length && x[i] <= n; ++i)
                if (x[i] == n) ++n;
            for (j = x.length; j > i; j--)
                x[j] = x[j-1];
            if (n < n_imgsect) --ni;
            --ns;
            x[i] = n;
            c = b[n];
        }
        // der "selbe" Abschnitt wird ausgenommen
        for (k = 0; k < b.length; ++k) {
            if (b[k][0] == s) {
                this.sx = k;
                f(k);
                if (k < n_imgsect) {
                    fi = sl[k];  // "Fremdbild" ist zu setzen
                    f(fi > k ? fi - 1 : fi);
                }
                break;
            }
        }
        for (k = 0; k < l.length; ++k) {
            if (ni <= 0) {
                x = [];
                ni = n_imgsect;
                ns = n_sect;
                f (this.sx);
            }
            e = l[k];
            if (e.localName == "img") {
                if (fi >= 0) {
                    c = b[fi];
                    fi = -1;
                }
                else
                    f (Math.floor (Math.random() * ni));
                r.push ([e, c]);
            }
            else if (e.localName == "li") {
                f (Math.floor (Math.random() * ns));
                e.setAttribute("x-l", `${c[0]}`);
                // https://dom.spec.whatwg.org/#dom-node-textcontent
                e.textContent = c[1];
            }
        }
        for (k = 0; k < r.length; ++k) {
            c = r[k];
            e = c[0];
            c = c[1];
            e.setAttribute ("class", `fc ${c[2][0][1]}`);
            e.setAttribute ("x-l", `${c[0]}`);
            e.setAttribute ("src", `${prf_img}images/${c[2][0][0]}.jpg`);
        }
    }
    isrc (d);
}; // Pw.prototype.init

Pw.prototype.load = function () {
    var v;
    var m;
    load ();
    // Zerlegung der Fläche
    if (v = set ["m"]) {
        if (v == "g")
            this.rmx = 0;
        else if (m = v.match(/^([hvcm])([0-3])([0-3])$/)) {
            this.rmx = 1;
            // Schnittfolge
            this.ctsq =
                m[1] == "h" ? 0 :
                m[1] == "v" ? 1 :
                m[1] == "c" ? 2 : 3;
            // Zufallspositionierungsmodus in x-Richtung
            this.clpx = parseInt (m[2]);
            // Zufallspositionierungsmodus in y-Richtung
            this.clpy = parseInt (m[3]);
        }
        else if (v == "r")
            this.rmx = 2;
        else if (v == "q")
            this.rmx = 3;
    }
    // Gewichtungs-Quotient für überdeckte Felder
    if (v = set ["w"]) {
        v = parseFloat (v);
        if (v > 0)
            this.lvq = v;
    }
}; // Pw.prototype.load

// behandelt ein Tastenereignis
Pw.prototype.onk = function (e) {
    var c = e.code;
    var r;
    var i;
    var l;
    if (c == "Enter") {
        r = e.target.getAttribute ("class") || "";
        if (r.match (/\bfc\b/)) {
            this.oncl (e);
            return 1;
        }
        else return 0;
    }
    else if (c == "KeyG") {
        // Einstellungen laden
        if (help_l == 3 && help_c ("pinw_KeyG"))
            return;
        this.load();
    }
    else if (c == "KeyH")
        ky_c (this.sx == null ? "main" : "pinw");
    else if (c == "KeyX") {
        // Pinwand-Zettel mischen
        if (help_l == 3 && help_c ("pinw_KeyX"))
            return;
//#if INFO_POSE
        if (info_mode > 0) {
            info_on = 1;
            if (info_mode == 4) 
                this.info_distrib ();
        }
//#endif INFO_POSE
        this.pose(this.im.length);
//#if INFO_POSE
        if (info_on) {
            for (i = info_cnt; i > 1; --i)
                this.pose(this.im.length);
            if (info_mode == 4)
                info_msg += "\n";
            info_show();
        }
//#endif INFO_POSE
    }
    else if (this.sx == null) {
        // Tastenfunktionen nur für die Übersichtsseite
        if (c == "ArrowDown") {
            // Pfeil nach unten zur Bilderschau
            if (e.shiftKey) {
                if (help_l == 3 && help_c ("m_ShiftArrowDown"))
                    return 1;
                // mit Shift zu einem zufällig gewählten Bild
                i = Math.floor(Math.random() * n_imgsect);
            }
            else {
                // ohne Shift zum obersten Bild
                if (help_l == 3 && help_c ("m_ArrowDown"))
                    return 1;
                i = this.im;
                for (r = i.length - 1; r >= 0; r--) {
                    l = i[r][0].getAttribute ("x-l");
                    if (!l)
                        continue;
                    if (l.match (/^[1-9]/)) {
                        l = parseInt (l);
                        break;
                    }
                }
                if (r < 0)
                    return 0;
                for (
                    i = n_imgsect - 1;
                    i >= 0 && init_d [i][0] != l;
                    i--
                );
            }
            radio.show("d_vw", 0, [-1, i]);
        }
        else
            return 0;
        return 1;
    }
    // die folgenden Tastenfunktionen nur für Bilderabschnitte
    else if (c == "ArrowUp" && e.shiftKey) {
        // zum nächsten Abschnitt in der Dokument-Reihenfolge
        if (help_l == 3 && help_c ("pinw_ShiftArrowUp"))
            return 1;
        r = init_d [this.sx][0] + 1;
        if (r > n_sect)
            r = 1;
        radio.show (`d_${r}`);
    }
    else if (c == "ArrowUp" && e.ctrlKey) {
        // zum Abschnitt des Fremdbildes
        if (help_l == 3 && help_c ("pinw_CtrlArrowUp"))
            return 1;
        r = init_d[sl[this.sx]][0];
        radio.show (`d_${r}`);
    }
    else if (c == "ArrowDown") {
        // Pfeil nach unten zur Bilderschau
        if (e.shiftKey) {
            // mit Shift zu einem zufällig gewählten Bild
            if (help_l == 3 && help_c ("pinw_ShiftArrowDown"))
                return 1;
            r = Math.floor(Math.random() * init_d [this.sx][3]);
            radio.show ("d_vw", 0, [this.sx, r]);
        }
        else {
            // ohne Shift zum obersten Bild
            if (help_l == 3 && help_c ("pinw_ArrowDown"))
                return 1;
            i = this.im;
            for (r = i.length - 1; r >= 0; r--) {
                l = i[r][0].getAttribute ("x-l");
                if (!l)
                    continue;
                if (l.startsWith ("i"))
                    break;
            }
            if (r < 0)
                return 0;
            radio.xl (l);
        }
    }
    else
        return 0;
    return 1;
}; // Pw.prototype.onk

// e: Element
// t: ID des img-Elements
function Dias (e, t) {
    var s = this;
    this.il  = [];
    this.ms  = 5000;    // Millisekunden
    this.cur = -1;
    this.tm  = null;
    this.tf  = function () { s.tmf (); };
    this.rd  = [];
    this.ln  = 0;
    this.im  = document.getElementById (t);
    this.load ();
    var c  = function (x) { s.oncl (x); };
    e.addEventListener ("click", c, false);
} // Dias

// Position des aktuellen Bildes
Dias.prototype.cip = function () {
    return this.cur > -1 ? this.rd[this.cur] : null;
};

// Kennung des aktuellen Bildes
Dias.prototype.cii = function () {
    return this.cur > -1 ? this.il [this.rd[this.cur]][0] : null;
};

// verzögerte Anpassung an Fenstergröße - hier dummy
Dias.prototype.tm_f = function () {};

// Klick
Dias.prototype.oncl = function (e) {
    var t = e.target;
    var l = t.getAttribute ("x-l");
    var h = t.getAttribute ("x-h");
    if ( h && help_l == 3 && help_c (h) )
        return;
    if (l)
        this.xl (l);
    // zur Bildergeschichte
    else if (this.cur >= 0 && radio.cd()[0] == "d_main")
        radio.show (`d_${init_d[this.rd[this.cur]][0]}`);
}; // Dias.prototype.oncl

Dias.prototype.xl = function (l) {
    if (l == "startstop")
        this.stst ();
    else if (l == "next")
        this.nxt ();
    else if (l == "previmg")
        this.pvi ();
    else if (l == "fast")
        this.spd(1);
    else if (l == "slow")
        this.spd(0);
    else if (l == "imgfit")
        this.fit();
    else if (l == "store")
        this.store();
    else
        radio.xl (l);
}; // Dias.prototype.xl

// behandelt ein Tastenereignis
Dias.prototype.onk = function (e) {
    var c = e.code;
    /*
    alert (c);
    return;
    */
    if (c == "Enter") {
        c = e.target.getAttribute("x-l");
        if (c)
            this.xl (c);
        else if (this.cur >= 0 && radio.cd()[0] == "d_main") {
            // zur Bildergeschichte
            if (help_l == 3 && help_c ("ds_Enter"))
                return 1;
            radio.show (`d_${init_d[this.rd[this.cur]][0]}`);
        }
        else
            return 0;
    }
    else if (
        c == "ArrowUp" && e.shiftKey
        && this.cur >= 0 && radio.cd()[0] == "d_main"
    ) {
        // zur Bildergeschichte
        if (help_l == 3 && help_c ("ds_ShiftArrowUp"))
            return 1;
        radio.show (`d_${init_d[this.rd[this.cur]][0]}`);
    }
    else if (c == "KeyH")
        ky_c (this.cur >= 0 && radio.cd()[0] == "d_main" ? "diasmain" : "dias");
    else if (help_l == 3 && help_c (`ds_${c}`));
    else if (c == "NumpadMultiply" || c == "KeyX")
        radio.xl ("prev");
    else if (c == "ArrowLeft")
        this.pvi ();
    else if (c == "ArrowRight")
        this.nxt ();
    else if (c == "Space")
        this.stst ();
    else if (c == "ArrowUp")
        this.spd(1);
    else if (c == "ArrowDown")
        this.spd(0);
    else if (c == "KeyG")
        this.load();
    else if (c == "KeyF")
        this.fit();
    else if (c == "KeyS")
        this.store();
    else
        return 0;
    return 1;
}; // Dias.prototype.onk

// Wechselt die Anpassung der Bilddarstellung shrink <-> fit
Dias.prototype.fit = function () {
    var c = this.im.getAttribute ("class");
    this.im.setAttribute ("class", c == "fit" ? "shrink" : "fit");
};  // Dias.prototype.fit

// speichert die aktuellen Einstellungen
Dias.prototype.store = function () {
    var c;
    var v;
    
    // Bildanpassung v
    c = this.im.getAttribute ("class");
    v = set ["v"] || "";
    if (c == "fit") {
        if (! v.match (/fit$/))
            set["v"] = "fit";
    }
    else if (! v.match (/shrink$/))
        set ["v"] = "shrink";
    
    // Bildlaufgeschwindigkeit d
    if (this.ms)
        set ["d"] = `${this.ms}`;
    store ();
};  // Dias.prototype.store

// lädt die aktuellen Einstellungen
Dias.prototype.load = function () {
    var v;
    var c;
    load ();

    // Bildanpassung v
    if (v = set ["v"]) {
        v = v.replace (/^[hw]?/, "");
        if (v.match (/^(fit|shrink)$/)) {
            c = this.im.getAttribute ("class");
            if (v != c)
                this.im.setAttribute ("class", v);
        }
    }
    
    // Bildlaufgeschwindigkeit d
    if (v = set ["d"])
        if (v.match (/^[1-9][0-9]*$/))
            this.ms = parseInt (v);
}; // Dias.prototype.load

// Bildlaufgeschwindigkeit ändern
Dias.prototype.spd = function (up) {
    var n = this.ms;
    if (up)
        n /= 1.25;
    else
        n *= 1.25;
    if (n < 300)
        this.ms = 300;
    else if (n > 300000)
        this.ms = 300000;
    else
        this.ms = Math.floor(n);
}; // Dias.prototype.spd

// Bildlauf stop
Dias.prototype.stp = function () {
    if (this.tm) {
        window.clearInterval(this.tm);
        this.tm = null;
    }
}; // Dias.prototype.stp

// Bildlauf start/stop
Dias.prototype.stst = function () {
    var s = this;
    if (this.tm)
        this.stp();
    else if (this.ln > 1)
        this.tmf ();
}; // Dias.prototype.stst

Dias.prototype.shn = function () {
    var n = this.cur + 1;
    if (n >= this.ln)
        n = 0;
    if (this.cur != n) {
        this.cur = n;
        this.im.setAttribute (
            "src",
            `${prf_img}images/${this.il [this.rd [n]][0]}.jpg`
        );
    }
}; // Dias.prototype.shn

Dias.prototype.tmf = function () {
    if (this.cur + 1 == this.ln)
        this.shf (0);
    this.shn();
    if (this.tm)
        window.clearInterval(this.tm);
    this.tm = window.setInterval (this.tf, this.ms);
};

// mischt ab der Position i
Dias.prototype.shf = function (i) {
    var r = this.rd;
    var l = this.ln;
    var j;
    var k;
    while (i + 1 < l) {
        j = i + Math.floor(Math.random () * (l-i));
        if (j > i) {
            k = r[i];
            r[i] = r[j];
            r[j] = k;
        }
        ++i;
    }
};

// nächstes Bild
Dias.prototype.nxt = function () {
    if (this.tm)
        this.stp();
    this.shn();
}; // Dias.prototype.nxt

// vorhergehendes Bild
Dias.prototype.pvi = function () {
    if (this.tm)
        this.stp();
    if (--this.cur < 0)
        this.cur = this.ln - 1;
    this.im.setAttribute (
        "src",
        `${prf_img}images/${this.il [this.rd [this.cur]][0]}.jpg`
    );
}; // Dias.prototype.pvi

// v  Bilderliste, Listeneinträge: [src, ...]
// b  Index des ersten angezeigten Bildes
Dias.prototype.set = function (v, b) {
    var l = v.length;
    var r = [];
    this.il  = v;
    this.ln = l;
    this.rd  = r;
    this.cur = 0;
    for (i = 0; i < l; ++i)
        r[i] = i;
    if (b > 0) {
        r[0] = b;
        r[b] = 0;
    }
    this.shf (1);
    this.im.setAttribute (
        "src",
        `${prf_img}images/${this.il [this.rd [this.cur]][0]}.jpg`
    );
};

// Resize-Ereignis
function onrsz () {
    var e = document.getElementById ("head");
    var s = window.getComputedStyle (e);
    var h = 
        parseInt(s.getPropertyValue ("height"))
        + parseInt(s.getPropertyValue ("padding-top"))
        + parseInt(s.getPropertyValue ("padding-bottom"))
        + parseInt(s.getPropertyValue ("border-top-width"))
        + parseInt(s.getPropertyValue ("border-bottom-width"))
        + parseInt(s.getPropertyValue ("margin-top"))
        + parseInt(s.getPropertyValue ("margin-bottom"));
    if (Number.isNaN (h))
        h = 0;
    e = document.getElementById ("d_cont");
    e.style.setProperty ("top", `${h}px`);
    if (radio) {
        e = radio.cd()[1];
        if (e)
            e.tm_f();
    }
} // onrsz

// E-Mail mit URL zur aktuellen Anzeige
function share () {
    var s = encodeURIComponent (tell.s);
    var b = tell.b + "\n" + c_l() + "\n";
    b = encodeURIComponent(b);
    window.location.href = `mailto:?subject=${s}&body=${b}` ;
} // tell_about

// spielt ein Klangsignal
function sound (k) {
    var n = set[k];
    if (n) {
        audio.setAttribute("src", `/snd/${n}.ogg`);
        audio.play();
    }
};

function like () {
    if (help_l == 3 && help_c ("lk_general"))
        return;
    if (!lg) {
        lg_g ();
        set_g ();
    }
    if (!lg) {
        if (help_l == 3 && help_c ("lk_login"))
            return;
        var c = hint_d.getAttribute ("class");
        c = c.replace(/\bhide\b/, "show");
        hint_d.setAttribute("class", c);
        hint_d.getElementsByTagName ("a")[0].focus ();
    }
    if (help_l == 3 && (! set["o"] || ! set["e"]) && help_c ("lk_sound"))
        return;
    var s = encodeURIComponent(c_l().replace (/^.*?\/kleider[^\/]*\//, ""));
    var l = encodeURIComponent(document.documentElement.getAttribute ("xml:lang"));
    // https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
    // https://www.ecma-international.org/ecma-262/6.0/#sec-encodeuricomponent-uricomponent
    var q =
        (! lg || lg.startsWith ("anonym"))
        ? `/cgi-bin/like?s=${s}&l=${l}&v=pinw`
        : `/cgi-bin/like?s=${s}&l=${l}&v=pinw&n=${lg}`
    ;
    var r = new XMLHttpRequest();
    var h = function (e) {
        var a = e.target.status;
        sound (200 <= a && a < 400 ? "o" : "e");
    };
    if (set["o"] || set["e"])
        r.addEventListener("loadend", h);
    r.open ("POST", q);
    r.send();
} // like

// Verweisziele bei Bedarf laden und anzeigen oder verbergen
function links () {
    var d = document;
    var n = links_d.firstChild;
    var c = links_d.getAttribute ("class");
    if (c.match(/\bshow\b/)) {
        c = c.replace(/\bshow\b/, "hide");
        links_d.setAttribute("class", c);
        return;
    }
    var f = function () {
        c = c.replace(/\bhide\b/, "show");
        links_d.setAttribute("class", c);
        c = links_d.getElementsByTagName("a")[0];
        if (c)
            c.focus ();
    }
    for (; n && n.nodeType != n.ELEMENT_NODE; n = n.nextSibling) {};
    if (!n) {
        var le = function () {
            var s = this.status;
            if (200 <= s && s < 400) {
                links_d.appendChild(d.adoptNode(this.responseXML.documentElement));
                f();
            }
            else
                sound ("e");
        }
        var r = new XMLHttpRequest();
        r.addEventListener("loadend", le);
        r.open ("GET", "/h/ln/l.xhtml" + lng);
        r.overrideMimeType ("text/xml");
        r.send();
    }
    else
        f();
} // links

// Verweisziele verbergen
function links_h (e) {
    if (e) {
        var r = e.relatedTarget;
        while (r) {
            if (r == links_d)
                return;
            if (r.localName == "body")
                break;
            r = r.parentNode;
        }
    }
    var c = links_d.getAttribute ("class");
    c = c.replace(/\bshow\b/, "hide");
    links_d.setAttribute("class", c);
} // links_h

// Hinweis verbergen
function hint_h (e) {
    if (e) {
        var r = e.relatedTarget;
        while (r) {
            if (r == hint_d)
                return;
            if (r.localName == "body")
                break;
            r = r.parentNode;
        }
    }
    var c = hint_d.getAttribute ("class");
    c = c.replace(/\bshow\b/, "hide");
    hint_d.setAttribute("class", c);
} // hint_h

// Klick im Kopf der Darstellung
function clk (e) {
    if (help_l == 3 && help_c ("head_help"))
        return;
    var t = e.target;
    var l = t.getAttribute("x-l");
    if (! l)
        return;
    if (help_l == 3) {
        var h = t.getAttribute("x-h");
        if (h && help_c (h))
            return;
    }
    xl (l) || radio.xl (l);
} // clk

// globale Verweisziele / Funktionen
function xl (l) {
    if (l == "backgr")
        bkg ();
    else if (l == "imgonly")
        thd ();
    else if (l == "share")
        share ();
    else if (l == "like")
        like ();
    else if (l == "links")
        links ();
    else if (l == "help")
        help_t ("qm");
    else
        return 0;
    return 1;
} // xl

function bkg () {
    var h = document.getElementsByTagName ("body")[0];
    var c = h.getAttribute ("class");
    c =
        c.match (/\bclear\b/) ? c.replace (/\bclear\b/, "grey") :
        c.match (/\bgrey\b/)  ? c.replace (/\bgrey\b/, "black") :
        c.replace (/\bblack\b/, "clear");
    h.setAttribute ("class", c);
};

function thd () {
    var h = document.getElementById ("head");
    var c = h.getAttribute ("class");
    if (c == "show")
        c = "hide";
    else if (c == "hide")
        c = "show";
    h.setAttribute ("class", c);
    onrsz ();
};

// Hinweis auf maschinelle Übersetzung verbergen
function hmt () {
    var h = document.getElementById ("mt");
    if (h) h.setAttribute ("class", "hide");
};

// Mausklick verbirgt Hinweis auf maschinelle Übersetzung
function clk_hmt () {
    if (help_c ("b_hmt"))
        return;
    hmt ();
};

function store () {
    var c;

    // Kopfbereich sichtbar?
    c = document.getElementById ("head") .getAttribute ("class");
    if (c.match (/\bshow\b/))
        set ["b"] = "0";
    else if (c.match (/\bhide\b/))
        set ["b"] = "1";

    // Hintergrundfarbe f
    c = document.getElementsByTagName ("body")[0] .getAttribute ("class");
    set ["f"] =
        c.match (/\bgrey\b/) ? "grey" :
        c.match (/\bblack\b/) ? "black" :
        "transparent";

    // Einstellungen speichern
    var s = window.localStorage || window.sessionStorage;
    if (s) {
        var v = "";
        var i = 0;
        for (c in set) {
            if (set[c]) {
                if (i++)
                    v += ":";
                v += `${c}=${set[c]}`;
            }
        }
        s.setItem ("set", v);
    }
}; // store

function load () {
    var v;
    var c;
    var e;
    set_g ();

    // Anzeige der Kopfzeile
    if (v = set ["b"]) {
        c = document.getElementById ("head") .getAttribute ("class");
        if (
               ( v == "1" && ! c.match (/\bhide\b/))
            || ( v == "0" && ! c.match (/\bshow\b/))
        )
            thd ();
    }

    // Hintergrundfarbe f
    if (v = set ["f"]) {
        e = document.getElementsByTagName ("body")[0];
        c = e.getAttribute ("class");
        if (v == "transparent") {
            if (! c.match (/\bclear\b/)) {
                c = c.replace (/\b(grey|black)\b/, "clear");
                e.setAttribute ("class", c);
            }
        }
        else if (v == "grey") {
            if (! c.match (/\bgrey\b/)) {
                c = c.replace (/\b(clear|black)\b/, "grey");
                e.setAttribute ("class", c);
            }
        }
        else if (v == "black") {
            if (! c.match (/\bblack\b/)) {
                c = c.replace (/\b(clear|grey)\b/, "black");
                e.setAttribute ("class", c);
            }
        }
    }

//#if INFO_POSE
    if (v = set ["pinwinfo"]) {
        if (c = v.match (/^([a-z_]+)\/([1-9][0-9]*)$/)) {
            info_cnt = parseInt(c[2]);
            v = c[1];
        }
        else
            info_cnt = 1;
        info_mode =
            v == "detailed_pose_info"   ? 1 :
            v == "last_pose_info"       ? 2 :
            v == "detailed_field_count" ? 3 :
            v == "last_field_count"     ? 4 :
            0 ;
    }
//#endif INFO_POSE
    
}; // load

function onk (e) {
    var c = e.code;
    if (help_l == 3 && c == "KeyH" && help_c ("g_KeyH"));
    else if (radio.onk(e));
    else if (help_l == 3 && help_c (`g_${c}`));
    else if (c == "KeyB")
        bkg ();
    else if (c == "KeyL") {
        if (e.altKey && e.ctrlKey && e.shiftKey)
            like ();
    }
    else if (c == "KeyG")
        load ();
    else if (c == "KeyI")
        thd ();
    else if (c == "KeyM")
        share ();
    else if (c == "F1")
        help_t ("f1");
    else if (c == "KeyS")
        store ();
    else if (c == "KeyQ")
        hmt ();
    else if (c == "Escape") {
        links_h ();
        hint_h ();
        if (help_l > 1 || ky_l == 2)
            help_h ();
    }
    else
        return;
    e.preventDefault();
} // onk

function initialize () {
    var i;
    var j;
    // sl initialisieren
    var l = [0,];
    for (i = 1; i < n_imgsect; ++i) {
        j = Math.floor(Math.random() * (i + 1));
        l[i] = l[j];
        l[j] = i;
    }
    if (n_imgsect > 0) {
        sl[l[0]] = l[n_imgsect - 1];
        for (i = 1; i < n_imgsect; ++i)
            sl[l[i]] = l[i-1];
    }
    links_d = document.getElementById("d_links");
    hint_d = document.getElementById("d_hint");

    // Sprach-Suffix
    l = document.documentElement.getAttribute ("xml:lang");
    if (l) {
            l = l.toLowerCase();
            i = l.match(/^([a-z]+)/);
            lng = "." + i[1];
    }
    else
        lng = ".de";
    
    lg_g ();   // Login-Name
    audio = document.getElementsByTagName("audio")[0];
    ilm = [];
    for (i = 0; i < n_imgsect; ++i)
        ilm [i] = init_d [i][2][0];
    load ();
    onrsz();
    radio = new Radio (document.getElementById ("d_cont"));

    // Anzeige gem. Fragment
    var h = window.location.hash;
    var s = 0;      // Abschnittsnummer
    var x = -1;     // Abschnittsindex
    var a;          // Abschnitts-ID
        i = null;   // Bildkennung
    var p = -1;     // Bildposition
    var d = false;
    var z;          // Zusatzdaten zur Diaschau: [x, pos]

    // [sectnr, title, [[src, fmt], ], len  ] für Bilderabschnitte
    // [sectnr, title, null,           null ] für Textabscnitte
    l = init_d;

    var m;
    if (m = h.match (/s([0-9]+)/)) {
        s = parseInt (m[1]);
        if (s > n_sect)
            s = 0;
        if (s > 0) {
            while (++x < n_sect && l[x][0] != s);
            if (x == n_sect)
                x = -1;
        }
    }
    if (m = h.match (/rndimgshow/))
        d = true;
    else if (m = h.match (/_([a-z0-9]+)_([0-9]+)/)) {
        i = m[1];
        p = parseInt (m[2]);
    }
    else if (m = h.match (/_([a-z0-9]+)/))
        i = m[1];
    a = (d || !s) ? "d_main" : `d_${s}`;
    if (d)
        z = [-1, -1 < x && x < n_imgsect ? x : 0];
    else if (i && -1 < x && x < n_imgsect) {
        l = l[x][2];
        if (-1 < p && p < l.length && l[p][0] == i)
            z = [x, p];
        else for (m = 0; m < l.length; ++m) {
            if (l[m][0] == i) {
                z = [x, m];
                break;
            }
        }
    }
    radio.show (a);
    if (z)
        radio.show ("d_vw", false, z);
    
    document.getElementById("head").addEventListener ("click", clk, false);
    i = document.getElementById("hmt");
    if (i)
        i.addEventListener ("click", clk_hmt, false);
    links_d.addEventListener ("mouseout", links_h, false);
    hint_d.addEventListener ("mouseout", hint_h, false);
    window.addEventListener ("resize", onrsz, false);
    document.addEventListener ("keydown", onk, false);

    // Bilder "im Hintergrund" laden
    l = document.getElementsByTagName("img");
    i = -1;
    p = function () {
        while (++i < l.length) {
            a = l[i];
            if (a.getAttribute("src") || a.getAttribute("class") == "thb")
                continue;
            s = a.getAttribute ("x-id");
            if (s) {
                a.setAttribute ("src", `${prf_img}images/${s}.jpg`);
                // https://developer.mozilla.org/de/docs/Web/API/WindowOrWorkerGlobalScope
                // https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout
                setTimeout (p, 250);
                return;
            }
        }
    };
    p ();
} // initialize

/* end of file KLEIDER/web/src/pinw/pinw.js */