//  Version 2.3
"use strict";
/*global Raphael*/
var a, a2, arc, b, b2, c, c0, canvas, cb, centre = 255, colour, colour1 = colour, conv = Math.PI / 180.0, conv2 = Math.PI / 360.0, curve, dphi, draw = true, dt, e, end_ey, end_x, end_y, g2 = 0.05096, g8 = 0.01274, half, horizontal_axis, l, maxl, phi, phi0, pi = Math.PI, q, s, s0, sa, start_ex, start_x, twice = centre << 1, vertical_axis, y; //  0.5 / 9.8116 resp. 0.125 / 9.8116 

function get_colour() {
//  Get colour from cookie
    var ca = document.cookie.split(";"), ch, i, name = "bh_style=";
    for (i = 0; i < ca.length; i++) {
        ch = ca[i];
        while (ch.charAt(0) === " ") {
            ch = ch.substring(1);
        }
        if (ch.indexOf(name) === 0) {
            return (ch.substring(name.length, ch.length) === "bh_inblackandwhite") ? "#000000" : "#FFFFFF";
        }
    }
    return "#FFFFFF"; //  default colour
}

function update_pendulum() {
    if (draw) {
        if (curve === 1) {
//  Ellipse
            if (Math.abs(phi) < phi0) {
//  Forwards
                horizontal_axis.remove();
                arc         = phi * conv;
                c           = Math.cos(arc);
                s           = Math.sin(arc);
                sa          = s  *  a;
                cb          = c  *  b;
                c          *= c;
                s          *= s;
                e           = c  * a2;
                e          += s  * b2;
                q           = -e / a2;
                start_ex    = centre + Math.round(sa * ++q);
                q           = -e / b2;
                end_ey      = centre + Math.round(cb * ++q);
                start_x     = centre + Math.round(sa);
                end_y       = centre + Math.round(cb);
                e          /= cb - c0;
                e           = Math.sqrt(e);
                dt          = Math.round(e);
                horizontal_axis = canvas.path("M" + start_ex + " " + end_ey + "L" + start_x  + " " +    end_y);
                horizontal_axis.attr({"stroke": colour1, "stroke-width": 1});
                vertical_axis   = canvas.path("M" + start_ex + " " + end_ey + "L" + start_ex + " " + ++end_ey);
                vertical_axis.attr({  "stroke": colour,  "stroke-width": 1});
                vertical_axis   = canvas.path("M" + start_x + " " +  end_y  + "L" + start_x  + " " +  ++end_y);
                vertical_axis.attr({  "stroke": colour,  "stroke-width": 1});
            } else {
//  Backwards
                colour      = (colour === "#FFFFFF") ? "#000000" : "#FFFFFF";
                dphi        = -dphi;
            }
        } else {
//  Cycloid        
            if (Math.sin(phi * conv2) > Math.sin(phi0 * conv2)) {
//  Forwards
                horizontal_axis.remove();
                arc         = phi * conv;
                c           = Math.cos(arc);
                s           = Math.sin(arc);
                q           = -c;
                y           = Math.round(e * ++q);
                q          /= c0  - c;
                q           = Math.sqrt(q);
                arc        -= s;
                start_x     = Math.round(e * arc);
                end_y       = centre + y;
                arc        += s      + s;
                start_ex    = Math.round(e * arc);
                end_ey      = centre - y;
                dt          = Math.round(q *  s0);
                horizontal_axis = canvas.path("M" + start_ex + " " + end_ey + "L" + start_x  + " " +    end_y);
                horizontal_axis.attr({"stroke": colour1, "stroke-width": 1});
                vertical_axis   = canvas.path("M" + start_ex + " " + end_ey + "L" + start_ex + " " + ++end_ey);
                vertical_axis.attr({  "stroke": colour,  "stroke-width": 1});
                vertical_axis   = canvas.path("M" + start_x + " " +  end_y  + "L" + start_x  + " " +  ++end_y);
                vertical_axis.attr({  "stroke": colour,  "stroke-width": 1});
            } else {
//  Backwards
                colour      = (colour === "#FFFFFF") ? "#000000" : "#FFFFFF";
                dphi        = -dphi;
            }
        }
        phi += dphi;
        setTimeout('update_pendulum();', dt);
    }
}

function show_oscillations(value) {
//  Initialise variables 
    canvas.clear();
    curve = value;
   if (curve === 1) {
//  Ellipse
        a               = Math.round(Number(window.document.forms[0].major.value));
        if (a < 1 || a > centre) {
            alert("Die große Halbachse muss zwischen 1 und "  + centre + " liegen!");
            draw        = false;
            return;
        }
        b               = Math.round(Number(window.document.forms[0].minor.value));
        if (b < 1 || b > a) {
            alert("Die kleine Halbachse muss zwischen 1 und " + a      + " liegen!");
            draw        = false;
            return;
        }
        phi0            = Math.round(Number(window.document.forms[0].amplitude.value));
        if (phi0 < 1 || phi0 > 90) {
            alert("Der Ausschlagswinkel muss zwischen 1 und 90 Grad liegen!");
            draw        = false;
            return;
        }
        start_x         = centre - a;
        end_x           = centre + a;
        end_y           = centre + b;
        horizontal_axis = canvas.path("M" + start_x + " " + centre + "L" + end_x  + " " + centre);
        horizontal_axis.attr({"stroke": colour, "stroke-width": 1});
        vertical_axis   = canvas.path("M" + centre  + " " + centre + "L" + centre + " " +  end_y);
        vertical_axis.attr({  "stroke": colour, "stroke-width": 1});
        c0              = Math.cos(phi0 * conv);
        c0             *= b;
        a2              = a * a;
        a2             *= g8;
        b2              = b * b;
        b2             *= g8;
        dphi            = -0.5;
    } else {
//  Cycloid        
        l               = Math.round(Number(window.document.forms[0].pendulum.value));
        maxl = Math.floor((twice << 1) / pi);
        if (l < 1 || l > maxl) {
            alert("Die Pendellänge muss zwischen 1 und "      + maxl   + " liegen!");
            draw        = false;
            return;
        }
        e               = 0.25 * l;
        a2              = Math.round(2.0 * e);
        phi0            = Math.round(Number(window.document.forms[0].angle.value)) + 180;
        if (phi0 < 181 || phi0 > 360) {
            alert("Der Ausschlagswinkel muss zwischen 1 und 180 Grad liegen!");
            draw        = false;
            return;
        }
        half            = Math.round(e * pi);
        end_x           = half << 1;
        end_y           = centre + a2;
        horizontal_axis = canvas.path("M0 " + centre + "L" + end_x  + " " + centre);
        horizontal_axis.attr({"stroke": colour, "stroke-width": 1});
        vertical_axis   = canvas.path("M" + half    + " " + centre + "L" + half   + " " +  end_y);
        vertical_axis.attr({  "stroke": colour, "stroke-width": 1});
        c0              = Math.cos(phi0 * conv);
        s0              = Math.sqrt(a2  *   g2);
        dphi            = -1.0;
    }
    phi             = phi0 + dphi;
    horizontal_axis = canvas.path("M" + end_x + " " + centre + "L" + end_x  + " " + centre);
    horizontal_axis.attr({"stroke": colour, "stroke-width": 1});
    update_pendulum();
}

function write_form() {
//  Build form for pendulums
    document.writeln('<form><table><tr><td><label for="major">Große Halbachse</label></td><td>der Ellipse:</td><td><input type="text" id="major" name="major" value="255" maxlength="3" size="3" tabindex="11" /> (1 - 255)</td></tr>');
    document.writeln('<tr><td><label for="minor">Kleine Halbachse</label></td><td>der Ellipse:</td><td><input type="text" id="minor" name="minor" value="125" maxlength="3" size="3" tabindex="12" /> (1 - 255)</td></tr>');
    document.writeln('<tr><td><label for="amplitude">Ausschlagswinkel</label></td><td>der Ellipse:</td><td><input type="text" id="amplitude" name="amplitude" value="90" maxlength="2" size="3" tabindex="13" /> (1 - 90)</td></tr>');
    document.writeln('<tr><td><label for="pendulum">Pendellänge</label></td><td>der Zykloide:</td><td><input type="text" id="pendulum" name="pendulum" value="324" maxlength="3" size="3" tabindex="14" /> (1 - 324)</td></tr>');
    document.writeln('<tr><td><label for="angle">Ausschlagswinkel</label></td><td>der Zykloide:</td><td><input type="text" id="angle" name="angle" value="180" maxlength="3" size="3" tabindex="15" /> (1 - 180)</td></tr>');
    document.writeln('<tr><td><label for="ellipse"><input type="button" class="button" name="ellipse" value="Ellipse neu anzeigen"  tabindex="16" onclick="show_oscillations(1)" /></label></td>');
    document.writeln('<td><label     for="cycloid"><input type="button" class="button" name="cycloid" value="Zykloide neu anzeigen" tabindex="17" onclick="show_oscillations(2)" /></label></td>');
    document.writeln('<td></td></tr></table></form>');
    document.writeln('<div id="canvas"></div>');
    canvas = new Raphael("canvas", twice, twice + 1);
    colour = get_colour();
    show_oscillations(1);
}

write_form();