/*
 * This file is part of Toolkit.
 *
 * Toolkit is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * Toolkit is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU General
 * Public License along with this program; if not, write to the
 * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
 * Boston, MA  02110-1301  USA
 */
"use strict";
(function(w, TK){
var format_viewbox = TK.FORMAT("0 0 %d %d");
function draw_time(force) {
    var tmp, drawn;
    var O = this.options;
    var t = O.time;

    if ((tmp = t.getSeconds()) !== this.__sec || force) {
        this.circulars.seconds.set("value", tmp);
        this.__sec = tmp;
    }
    if ((tmp = t.getMinutes()) !== this.__min || force) {
        this.circulars.minutes.set("value", tmp);
        this.__min = tmp;
    }
    if ((tmp = t.getHours() % 12) !== this.__hour || force) {
        this.circulars.hours.set("value", tmp);
        this.__hour = tmp;
    }
    
    var args = [t,
                t.getFullYear(),
                t.getMonth(),
                t.getDate(),
                t.getDay(),
                t.getHours(),
                t.getMinutes(),
                t.getSeconds(),
                t.getMilliseconds(),
                Math.round(t.getMilliseconds() / (1000 / O.fps)),
                O.months,
                O.days];
    if ((tmp = O.label.apply(this, args)) !== this.__label || force) {
        TK.set_text(this._label, tmp);
        this.__label = tmp;
        drawn = true;
    }
    if ((tmp = O.label_upper.apply(this, args)) !== this.__upper || force) {
        TK.set_text(this._label_upper, tmp);
        this.__upper = tmp;
        drawn = true;
    }
    if ((tmp = O.label_lower.apply(this, args)) !== this.__lower || force) {
        TK.set_text(this._label_lower, tmp);
        this.__lower = tmp;
        drawn = true;
    }
    
    if (drawn)
        /**
         * Is fired when the time was drawn.
         * 
         * @param {Date} time - The time which was drawn.
         * 
         * @event TK.Clock#timedrawn
         */
        this.fire_event("timedrawn", O.time);
}
function set_labels() {
    var O = this.options;
    var E = this._label;
    var s = O.label(new Date(2000, 8, 30, 24, 59, 59, 999), 2000, 8,
                                               30, 6, 24, 59, 59, 999, 999,
                                               O.months, O.days);
    TK.set_text(E, s);
    
    E.setAttribute("transform", "");

    /* FORCE_RELAYOUT */
    
    TK.S.add(function() {
        var bb = E.getBoundingClientRect();
        if (bb.width === 0) return; // we are hidden
        var mleft   = parseInt(TK.get_style(E, "margin-left")) || 0;
        var mright  = parseInt(TK.get_style(E, "margin-right")) || 0;
        var mtop    = parseInt(TK.get_style(E, "margin-top")) || 0;
        var mbottom = parseInt(TK.get_style(E, "margin-bottom")) || 0;
        var space   = O.size - mleft - mright - this._margin * 2;
        var scale   = space / bb.width;
        var pos     = O.size / 2;
        
        TK.S.add(function() {
            E.setAttribute("transform", "translate(" + pos + "," + pos + ") "
                + "scale(" + scale + ")");

            /* FORCE_RELAYOUT */
            
            TK.S.add(function() {
                bb = E.getBoundingClientRect();
                
                TK.S.add(function() {
                    this._label_upper.setAttribute("transform", "translate(" + pos + "," + (pos - bb.height / 2 - mtop) + ") "
                        + "scale(" + (scale * O.label_scale) + ")");
                    this._label_lower.setAttribute("transform", "translate(" + pos + "," + (pos + bb.height / 2 + mtop) + ") "
                        + "scale(" + (scale * O.label_scale) + ")");
                    draw_time.call(this, true);
                }.bind(this), 1);
            }.bind(this));
        }.bind(this), 1);
    }.bind(this));
}
function timeout() {
    if (this.__to)
        window.clearTimeout(this.__to);
    var O = this.options;
    if (!O) return;
    if (O.timeout) {
        var d = O.time;
        var ts = +Date.now();

        if (O.offset) {
            ts += (O.offset|0);
        }

        d.setTime(ts);
        this.set("time", d);
            
        var targ = (O.timeout|0);
        if (O.timeadd) {
            targ += (O.timeadd|0) - ((ts % 1000)|0)
        }
        this.__to = window.setTimeout(this.__timeout, targ);
    } else this.__to = false;
}
function onhide() {
    if (this.__to) {
        window.clearTimeout(this.__to);
        this.__to = false;
    }
}

TK.Clock = TK.class({
    /**
     * TK.Clock shows a customized clock with circulars displaying hours, minutes
     * and seconds. It additionally offers three freely formatable labels.
     *
     * @class TK.Clock
     * 
     * @extends TK.Widget
     * 
     * @param {Object} [options={ }] - An object containing initial options.
     * 
     * @property {Integer} [options.thickness=10] - Thickness of the rings in percent of the maximum dimension.
     * @property {Integer} [options.margin=0] - Margin between the {@link TK.Circular} in percent of the maximum dimension.
     * @property {Integer} [options.size=200] - Width and height of the widget.
     * @property {Boolean} [options.show_seconds=true] - Show seconds ring.
     * @property {Boolean} [options.show_minutes=true] - Show minutes ring.
     * @property {Boolean} [options.show_hours=true] - Show hours ring.
     * @property {Integer} [options.timeout=1000] - The timeout of the redraw trigger.
     * @property {Integer} [options.timeadd=10] - Set additional milliseconds to add to the timeout target system clock regulary.
     * @property {Integer} [options.offset=0] - If a timeout is set offset the system time in milliseconds.
     * @property {Integer} [options.fps=25] - Framerate for calculating SMTP frames
     * @property {Array<String>} [options.months=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]] - Array containing all months names.
     * @property {Array<String>} [options.days=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]] - Array containing all days names.
     * @property {Function} [options.label=function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) { return ((hour < 10) ? ("0" + hour) : hour) + ":" + ((minute < 10) ? ("0" + minute) : minute) + ":" + ((second < 10) ? ("0" + second) : second);] - Callback to format the main label.
     * @property {Function} [options.label_upper=function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) { return days[day]; }] - Callback to format the upper label.
     * @property {Function} [options.label_lower=function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) { return ((date < 10) ? ("0" + date) : date) + ". " + months[month] + " " + year; }] - Callback to format the lower label.
     * @property {Number} [options.label_scale=0.33] - The scale of `label_upper` and `label_lower` compared to the main label.
     * @property {Number|String|Date} [options.time] - Set a specific time and date. To avoid auto-udates, set `timeout` to 0.
     *   For more information about the value, please refer to <a href="https://www.w3schools.com/jsref/jsref_obj_date.asp">W3Schools</a>.
     */
    _class: "Clock",
    Extends: TK.Widget,
    _options: Object.assign(Object.create(TK.Widget.prototype._options), {
        thickness:    "number",
        margin:       "number",
        size:         "number",
        show_seconds: "boolean",
        show_minutes: "boolean",
        show_hours:   "boolean",
        timeout:      "int",
        timeadd:      "int",
        offset:       "int",
        fps:          "number",
        months:       "array",
        days:         "array",
        label:        "function",
        label_upper:  "function",
        label_lower:  "function",
        label_scale:  "number",
        time: "object|string|number",
    }),
    options: {
        thickness:    10,         // thickness of the rings
        margin:       0,          // margin between the circulars
        size:         200,        // diameter of the whole clock
        show_seconds: true,       // show the seconds ring
        show_minutes: true,       // show the minutes ring
        show_hours:   true,       // show the hours ring
        timeout:      1000,          // set a timeout to update the clock with the
                                  // system clock regulary
        timeadd:      10,          // set additional milliseconds for the
                                  // timeout target
                                  // system clock regulary
        offset:       0,          // if a timeout is set offset the system time
                                  // in milliseconds
        fps:          25,         // framerate for calculatind SMTP frames
        months:       ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        days:         ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        label: function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) {
            return ((hour < 10) ? ("0" + hour) : hour) + ":" +
                   ((minute < 10) ? ("0" + minute) : minute) + ":" +
                   ((second < 10) ? ("0" + second) : second);
        },
        label_upper: function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) {
            return days[day];
        },
        label_lower: function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) {
            return ((date < 10) ? ("0" + date) : date) + ". " + months[month] + " " + year;
        },
        label_scale: 0.33           // the scale of the upper and lower labels
                                   // compared to the main label
    },
    static_events: {
        hide: onhide,
        show: timeout,
        timeout: timeout,
    },
    initialize: function (options) {
        var E, S;
        /**
         * @member {Object} TK.Clock#circulars - An object holding all three TK.Circular as members <code>seconds</code>, <code>minutes</code> and <code>hours</code>.
         */
        this.circulars = {};
        this._margin = -1;
        TK.Widget.prototype.initialize.call(this, options);
        this.set("time", this.options.time);
        
        /**
         * @member {HTMLDivElement} TK.Clock#element - The main DIV element. Has class <code>toolkit-clock</code> 
         */
        if (!(E = this.element)) this.element = E = TK.element("div");
        /**
         * @member {SVGImage} TK.Clock#svg - The main SVG image.
         */
        this.svg = S = TK.make_svg("svg");
        this.widgetize(E, true, true, true);
        TK.add_class(E, "toolkit-clock");
        
        /**
         * @member {SVGText} TK.Clock#_label - The center label showing the time. Has class<code>toolkit-label</code>
         */
        this._label       = TK.make_svg("text", {
            "class":       "toolkit-label",
            "text-anchor": "middle",
            "style":       "dominant-baseline: central;"
        });
        /**
         * @member {SVGText} TK.Clock#_label_upper - The upper label showing the day. Has class<code>toolkit-label-upper</code>
         */
        this._label_upper = TK.make_svg("text", {
            "class": "toolkit-label-upper",
            "text-anchor": "middle",
            "style":       "dominant-baseline: central;"
        });
        /** @member {SVGText} TK.Clock#_label_lower - The lower label showing the date. Has class<code>toolkit-label-lower</code>
         */
        this._label_lower = TK.make_svg("text", {
            "class": "toolkit-label-lower",
            "text-anchor": "middle",
            "style":       "dominant-baseline: central;"
        });
        S.appendChild(this._label);
        S.appendChild(this._label_upper);
        S.appendChild(this._label_lower);
        E.appendChild(S);

        var circ_options = {
            container: S,
            show_hand: false,
            start: 270,
            angle: 360,
            min: 0
        };
        
        /**
         * @member {Object} TK.Clock#circulars - An object containing the {@link TK.Circular}
         * widgets. Members are `seconds`, `minutes` and `hours`.
         */
        this.circulars.seconds = new TK.Circular(Object.assign({}, circ_options,
            {max: 60, "class": "toolkit-seconds"}));
        this.circulars.minutes = new TK.Circular(Object.assign({}, circ_options,
            {max: 60, "class": "toolkit-minutes"}));
        this.circulars.hours   = new TK.Circular(Object.assign({}, circ_options,
            {max: 12, "class": "toolkit-hours"}));

        this.add_child(this.circulars.seconds);
        this.add_child(this.circulars.minutes);
        this.add_child(this.circulars.hours);
        
        // start the clock
        this.__timeout = timeout.bind(this);
    },

    redraw: function () {
        var I = this.invalid, O = this.options;

        TK.Widget.prototype.redraw.call(this);

        if (I.size) {
            this.svg.setAttribute("viewBox", format_viewbox(O.size, O.size));
        }

        if (I.validate("show_hours", "show_minutes", "show_seconds", "thickness", "margin") || I.size) {
            var margin = 0;
            for (var i in this.circulars) {
                var circ = this.circulars[i];
                if (O["show_" + i]) {
                    circ.set("thickness", O.thickness);
                    circ.set("show_base", true);
                    circ.set("show_value", true);
                    circ.set("size", O.size);
                    circ.set("margin", margin);
                    margin += O.thickness;
                    margin += circ._get_stroke();
                    margin += O.margin;
                } else {
                    circ.set("show_base", false);
                    circ.set("show_value", false);
                }
            }
            if(this._margin < 0) {
                this._margin = margin;
            } else {
                this._margin = margin;
            }
            // force set_labels
            I.label = true;
        }

        if (I.validate("label", "months", "days", "size", "label_scale")) {
            set_labels.call(this);
        }

        if (I.validate("time", "label", "label_upper", "label_lower", "label_scale")) {
            draw_time.call(this, false);
        }
    },
    
    destroy: function () {
        this._label.remove();
        this._label_upper.remove();
        this._label_lower.remove();
        this.circulars.seconds.destroy();
        this.circulars.minutes.destroy();
        this.circulars.hours.destroy();
        if (this.__to)
            window.clearTimeout(this.__to);
        TK.Widget.prototype.destroy.call(this);
    },
    
    set: function (key, value) {
        switch (key) {
            case "time":
                if (Object.prototype.toString.call(value) === '[object Date]')
                    break;
                value = new Date(value);
                break;
        }
        return TK.Widget.prototype.set.call(this, key, value);
    },
});
})(this, this.TK);