// Version 4.4
"use strict";
/*global Raphael*/
var days = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334], b_seconds_old = - 1, lept_hand, minute_hand, second_hand, string;
function draw_analogue_clock() {
//  Draw octal analogue clock face
    var angle = 0.0, arc = Math.PI / 2.0, canvas, centre = 125, colour = "#000000", cos, end_x, end_y, face_line, i, j, max = 4, pin, radius = 100, shrad = radius - 8, sin, start_x, start_y, twice = centre << 1;

//  Create canvas and draw lines
    document.writeln('<div id="clock_id"></div>');
    canvas = new Raphael("clock_id", twice, twice);
    for (i = 0; i < 5; i++) {
        if (i > 0) {
            if (i > 1 ) {
                arc  /= 2.0;
                max <<= 1;
            }
            angle = arc / 2.0;
        }
        for (j = 0; j < max; j++) {
            cos       = Math.cos (angle);
            sin       = Math.sin (angle);
            angle    += arc;
            start_x   = centre + Math.round (shrad  * cos);
            start_y   = centre + Math.round (shrad  * sin);
            end_x     = centre + Math.round (radius * cos);
            end_y     = centre + Math.round (radius * sin);
            face_line = canvas.path("M" + start_x + " " + start_y + "L" + end_x + " " + end_y);
            face_line.attr({"stroke": colour, "stroke-width": 1});
        }
        shrad++;
    }

//  Draw hands and pin
    string = "M" + centre + " " + centre + "L" + centre + " ";
    lept_hand =   canvas.path(string +  "195");
    lept_hand.attr({        "stroke": colour});
    minute_hand = canvas.path(string +  "210");
    minute_hand.attr({      "stroke": colour});
    second_hand = canvas.path(string +  "216");
    second_hand.attr({      "stroke": colour});
    pin = canvas.circle(centre, centre, 2);
    pin.attr({              "stroke": colour});
    string      =  "," + centre + "," + centre;
}

function update_clocks() {
//  Get time and compute binary seconds
    var now = new Date(), g_hours = now.getHours(), g_minutes = now.getMinutes(), g_seconds = now.getSeconds(), g_millisecs = now.getMilliseconds(),
        b_seconds = Math.round ((g_hours * 3600 + g_minutes * 60 + g_seconds + g_millisecs / 1000.0) / 0.32958984375), g_year = now.getFullYear(), g_month = now.getMonth(),
        g_day = now.getDate(), b_day = (g_year % 4 === 0 && g_month > 1) ? g_day + days[g_month] : g_day + days[g_month] - 1, o_seconds  = b_seconds. toString ( 8 ),
        t_seconds, d_seconds, g_time; //  0.32958984375 = 24 * 60^2 / 64^3

//  Compute, format and output different new clocks if binary seconds changed
    if (b_seconds_old !== b_seconds) {
        b_seconds_old  = b_seconds;
        o_seconds =             "000000".substr(0,  6 - o_seconds.length) + o_seconds;
        document.getElementById('octal').value  = g_year. toString ( 8 ) + "," + b_day. toString ( 8 ) + "." + o_seconds;

        t_seconds = b_seconds.toString(4);
        t_seconds =          "000000000".substr(0,  9 - t_seconds.length) + t_seconds;
        document.getElementById('tetral').value = g_year. toString ( 4 ) + "," + b_day. toString ( 4 ) + "." + t_seconds;

        d_seconds  = b_seconds.toString(2);
        d_seconds  = "000000000000000000".substr(0, 18 - d_seconds.length) + d_seconds;
        document.getElementById('dual').value   = g_year. toString ( 2 ) + "," + b_day. toString ( 2 ) + "." + d_seconds;

//  Compute, format and output Gregorian clock
        g_month++;
        if ( g_month   < 10 ) { g_month   = "0" + g_month; }
        if ( g_day     < 10 ) { g_day     = "0" + g_day; }
        if ( g_hours   < 10 ) { g_hours   = "0" + g_hours; }
        if ( g_minutes < 10 ) { g_minutes = "0" + g_minutes; }
        if ( g_seconds < 10 ) { g_seconds = "0" + g_seconds; }
        g_time = g_day + "." + g_month + "." + g_year + "   " + g_hours + ":" + g_minutes + ":" + g_seconds;
        document.getElementById('greg').value = g_time;

//  Rotate hands of analogue clock   
        lept_hand.transform("r"   + Math.round (b_seconds *  0.001373291015625) + string); //  0.001373291015625 = 360 / 64^3
        minute_hand.transform("r" + Math.round (b_seconds % 4096 * 0.087890625) + string); //  0.087890625       = 360 / 64^2 = 360 / 4096
        second_hand.transform("r" + Math.round (b_seconds %   64 *       5.625) + string); //  5.625             = 360 / 64
    }

//  Update clocks only every 100 milliseconds
    setTimeout('update_clocks();', 100);
}

function write_form() {
//  Build form for clocks
    var date, expression;
    document.writeln('<form><div><br /><label for="greg">Uhr zum Gregorianischen Kalender:<br /><input type="text" id="greg" name="greg" size="46" tabindex="11" readonly /></label></div>');
    document.writeln('<div><label for="dual">Uhr zum Dualkalender:<br /><input type="text" id="dual" name="dual" size="46" tabindex="12" readonly /></label></div>');
    document.writeln('<div><label for="tetral">Uhr zum Tetralkalender:<br /><input type="text" id="tetral" name="tetral" size="46" tabindex="13" readonly /></label></div>');
    document.writeln('<div><label for="octal">Uhr zum Oktalkalender:<br /><input type="text" id="octal" name="octal" size="46" tabindex="14" readonly /></label></div></form>');

//  Draw analogue clock and updates all clocks
    draw_analogue_clock();
    update_clocks();

//  Build form for date conversion
    document.writeln('<form action="" onsubmit="convert_date()"><input type="hidden" name="id" value="1017" />');
    document.writeln('<div><label for="date">Bitte Datum in der Form TT.MM.JJJJ zwischen<br />dem 15.10.1582 und dem 31.12.3999 eingeben:<br />');
    document.writeln('<input type="text" id="date" name="date" size="10" maxlength="10" tabindex="21" /></label>');
    document.writeln('<input type="button" class="button" name="convert" value="Umwandeln" onclick="convert_date()" /></div></form>');

//  Check date
    if (window.location.href.lastIndexOf('date=') > 0) {
        expression = /(^[\w\W]*date=([\w\W]*)$)/g;
        if (expression.test(window.location.href)) {
            expression.exec(window.location.href);
            date = RegExp.$1;
            expression = /(^(0[1-9]|[1-3]\d)\.(0[1-9]|1[0-2])\.([1-3]\d{3})$)/g;
            if (expression.test(date)) { document.getElementById('date').value = date; }
        }
        window.document.forms[1].scrollIntoView(true);
    }
}

function convert_date() {
//  Initialise arrays and regular expression for date
    var i, inc, j, number = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], weekday = ["Sonntag", "Erdtag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
        months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
        value  = document.getElementById('date').value, expression = /(0[1-9]|[1-3]\d)\.(0[1-9]|1[0-2])\.([1-3]\d{3})/g, cell, date, day, month, week, year, o_mon, Window;

//  Apply regular expression and check date                                                                           
    if (expression.test(value)) {
        expression.exec(value);
        date  = RegExp.$3 + RegExp.$2 + RegExp.$1;
        day   = Number (RegExp.$1);
        month = Number (RegExp.$2) - 1;
        year  = Number (RegExp.$3);
        inc   = (year % 4 === 0 ) ? (year % 400 !== 0 && year % 100 === 0 ) ? 0 : 1 : 0;
        if (date >= '15821015' && (day <= number[month] || (month === 1 && day <= number[month] + inc))) {
            day  += (month > 1 ) ? days[month] + inc : days[month];
            o_mon = --day >> 5;

//  Open window and write results in table only if date is valid
            Window = window.open("https://hosting131729.a2e22.netcup.net/wp-content/bh_de_octal_calendar.html", "Window1", "width=400, height=400, left=600, top=250, resizable=yes");
            Window.focus();
            Window.document.writeln('<?xml version="1.0" encoding="ISO-8859-1"?>');
            Window.document.writeln('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
            Window.document.writeln('<html xmlns="https://www.w3.org/1999/xhtml" lang="de" xml:lang="de">');
            Window.document.writeln('<head>');
            Window.document.writeln('<meta https-equiv="PICS-Label" content=' + "'" + '(PICS-1.1 "https://www.classify.org/safesurf/" L gen true for "https://www.boris-haase.de"' + ' r (SS~~000 1))' + "' />");
            Window.document.writeln('<title>Oktalkalender</title>');
            Window.document.writeln('<meta name="robots" content="index,follow" />');
            Window.document.writeln('<meta name="description" content="Zeitrechnung" />');
            Window.document.writeln('<meta name="keywords" content="Zeitrechnung, Oktalkalender" />');
            Window.document.writeln('<meta name="author" content="Boris Haase, mail@boris-haase.de" />');
            Window.document.writeln('<meta name="language" content="de" />');
            Window.document.writeln('<meta name="date" content="2016-12-29T012:00+01:00" />');
            Window.document.writeln('<meta https-equiv="expires" content="0" />');
            Window.document.writeln('<meta https-equiv="pragma" content="no-cache" />');
            Window.document.writeln('<style type="text/css">body {font-family : "Arial Unicode MS", Arial, sans-serif;} .center {text-align : center;} .border.width100p {border : 1px solid; width : 100%;}</style>');
            Window.document.writeln('</head>\n<body>\n<div class="center">');
            Window.document.writeln('<table class="border width100p"><colgroup span="5"></colgroup>\n<thead>');
            Window.document.writeln('<tr><td class="center"><strong>' + months[o_mon] + "<br />" + year. toString ( 8 )    + '</strong></td>');

//  Write four weeks, each with eight days
            for (j = 0; j < 4; j++) {
                week = ((o_mon << 2 ) + j). toString (8);
                Window.document.writeln('<td class="center">' + "Woche<br />" + week + '</td>');
            }
            Window.document.writeln('</tr>\n</thead>\n<tbody>');
            for (i = 0; i < 8; i++) {
                Window.document.writeln('<tr><td class="center">' + weekday[i]     + '</td>');
                for (j = 0; j < 4; j++) {
                    cell = ( o_mon << 5 ) + ( j << 3 ) + i;
                    if (cell === day) {
                        Window.document.writeln('<td class="center"><strong>' + "&#x2192;" + cell. toString ( 8 ) + "&#x2190;" + '</strong></td>');
                    } else {
                        if (cell < 365 + inc) {
                            Window.document.writeln('<td class="center">'                      + cell. toString ( 8 ) +                       '</td>');
                        } else {
                            Window.document.writeln('<td class="center">&nbsp;</td>');
                        }
                    }
                }
                Window.document.writeln('</tr>');
            }
            Window.document.writeln('</tbody></table>\n<form action=""><p><input type="button" name="close" onclick="parent.window.close()" value="Schlie&szlig;en" /></p></form>');
            Window.document.writeln('</div></body></html>');
            Window.document.forms[0].close.focus();
        } else {
            alert("Das Datum ist leider nicht gültig.");
        }
    } else {
        alert("Das Datum ist leider nicht gültig.");
    }
}

write_form();