/*
 * 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) {
function range_change_cb() {
    this.invalidate_all();
    this.trigger_draw();
};
function transform_dots(dots) {
    if (dots === void(0)) return "";
    if (typeof dots === "string") return dots;
    if (typeof dots === "object") {
        if (Array.isArray(dots)) {
            if (!dots.length || !dots[0]) return null;
            var ret = { };
            var start, stop;

            for (var name in dots[0]) if (dots[0].hasOwnProperty(name)) {
                var a = [];
                ret[name] = a;
                for (var i = 0; i < dots.length; i++) {
                    a[i] = dots[i][name];
                }
            }
            return ret;
        } else return dots;
    } else {
        TK.error("Unsupported option 'dots':", dots);
        return "";
    }
}
// this is not really a rounding operation but simply adds 0.5. we do this to make sure
// that integer pixel positions result in actual pixels, instead of being spread across
// two pixels with half opacity
function svg_round(x) {
    x = +x;
    return x + 0.5;
}
function svg_round_array(x) {
    var i;
    for (i = 0; i < x.length; i++) {
        x[i]  = +x[i] + 0.5;
    }
    return x;
}
function _start(d, s) {
    var w = this.range_x.options.basis;
    var h = this.range_y.options.basis;
    var t = this.options.type;
    var m = this.options.mode;
    var x = this.range_x.val2px(d.x[0]);
    var y = this.range_y.val2px(d.y[0]);
    switch (m) {
        case "bottom":
            // fill the lower part of the graph
            s.push(
                "M " + svg_round(x - 1) + " ",
                svg_round(h + 1) + " " + t + " ",
                svg_round(x - 1) + " ",
                svg_round(y)
            );
            break;
        case "top":
            // fill the upper part of the graph
            s.push("M " + svg_round(x - 1) + " " + svg_round(-1),
                   " " + t + " " + svg_round(x - 1) + " ",
                   svg_round(y)
            );
            break;
        case "center":
            // fill from the mid
            s.push(
                   "M " + svg_round(x - 1) + " ",
                    svg_round(0.5 * h)
            );
            break;
        case "base":
            // fill from variable point
            s.push(
                   "M " + svg_round(x - 1) + " ",
                    svg_round((1 - this.options.base) * h)
            );
            break;
        default:
            TK.error("Unsupported mode:", m);
            /* FALL THROUGH */
        case "line":
            // fill nothing
            s.push("M " + svg_round(x) + " " + svg_round(y));
            break;
    }
}
function _end(d, s) {
    var a = 0.5;
    var h = this.range_y.options.basis;
    var t = this.options.type;
    var m = this.options.mode;
    var x = this.range_x.val2px(d.x[d.x.length-1]);
    var y = this.range_y.val2px(d.y[d.y.length-1]);
    switch (m) {
        case "bottom":
            // fill the graph below
            s.push(" " + t + " " + svg_round(x) + " " + svg_round(h + 1) + " Z");
            break;
        case "top":
            // fill the upper part of the graph
            s.push(" " + t + " " + svg_round(x + 1) + " " + svg_round(-1) + " Z");
            break;
        case "center":
            // fill from mid
            s.push(" " + t + " " + svg_round(x + 1) + " " + svg_round(0.5 * h) + " Z");
            break;
        case "base":
            // fill from variable point
            s.push(" " + t + " " + svg_round(x + 1) + " " + svg_round((-m + 1) * h) + " Z");
            break;
        default:
            TK.error("Unsupported mode:", m);
            /* FALL THROUGH */
        case "line":
            // fill nothing
            break;
    }
}
    
TK.Graph = TK.class({
    /**
     * TK.Graph is a single SVG path element. It provides
     * some functions to easily draw paths inside Charts and other
     * derivates.
     *
     * @class TK.Graph
     * 
     * @param {Object} [options={ }] - An object containing initial options.
     * 
     * @property {Function|Object} options.range_x - Callback function
     *   returning a {@link TK.Range} module for x axis or an object with options
     *   for a new {@link Range}.
     * @property {Function|Object} options.range_y - Callback function
     *   returning a {@link TK.Range} module for y axis or an object with options
     *   for a new {@link Range}.
     * @property {Array<Object>|String} options.dots=[] - The dots of the path.
     *   Can be a ready-to-use SVG-path-string or an array of objects like
     *   <code>{x: x, y: y [, x1, y1, x2, y2]}</code> (depending on the type).
     * @property {String} [options.type="L"] - Type of the graph (needed values in dots object):
     *   <ul>
     *     <li><code>L</code>: normal (needs x,y)</li>
     *     <li><code>T</code>: smooth quadratic Bézier (needs x, y)</li>
     *     <li><code>H[n]</code>: smooth horizontal, [n] = smoothing factor between 1 (square) and 5 (nearly no smooth)</li>
     *     <li><code>Q</code>: quadratic Bézier (needs: x1, y1, x, y)</li>
     *     <li><code>C</code>: CurveTo (needs: x1, y1, x2, y2, x, y)</li>
     *     <li><code>S</code>: SmoothCurve (needs: x1, y1, x, y)</li>
     *   </ul>
     * @property {String} [options.mode="line"] - Drawing mode of the graph, possible values are:
     *   <ul>
     *     <li><code>line</code>: line only</li>
     *     <li><code>bottom</code>: fill below the line</li>
     *     <li><code>top</code>: fill above the line</li>
     *     <li><code>center</code>: fill from the vertical center of the canvas</li>
     *     <li><code>base</code>: fill from a percentual position on the canvas (set with base)</li>
     *   </ul>
     * @property {Number} [options.base=0] - If mode is <code>base</code> set the position
     *   of the base line to fill from between 0 (bottom) and 1 (top).
     * @property {String} [options.color=""] - Set the color of the path.
     *   Better use <code>stroke</code> and <code>fill</code> via CSS.
     * @property {Number} [options.width=0] - The width of the graph.
     * @property {Number} [options.height=0] - The height of the graph.
     * @property {String|Boolean} [options.key=false] - Show a description
     *   for this graph in the charts key, <code>false</code> to turn it off.
     * 
     * @extends TK.Widget
     * 
     * @mixes TK.Ranges
     */
    _class: "Graph",
    Extends: TK.Widget,
    Implements: TK.Ranges,
    _options: Object.assign(Object.create(TK.Widget.prototype._options), {
        dots: "array",
        type: "string",
        mode: "string",
        base: "number",
        color: "string",
        range_x: "object",
        range_y: "object",
        width: "number",
        height: "number",
        key: "string|boolean",
        element: void(0),
    }),
    options: {
        dots:      null,
        type:      "L",
        mode:      "line",
        base:      0,
        color:     "",
        width:     0,
        height:    0,
        key:       false
    },
    
    initialize: function (options) {
        TK.Widget.prototype.initialize.call(this, options);
        /** @member {SVGPath} TK.Graph#element - The SVG path. Has class <code>toolkit-graph</code> 
         */
        this.element = this.widgetize(TK.make_svg("path"), true, true, true);
        TK.add_class(this.element, "toolkit-graph");
        /** @member {TK.Range} TK.Graph#range_x - The range for the x axis. 
         */
        /** @member {TK.Range} TK.Graph#range_y - The range for the y axis.
         */
        if (this.options.range_x) this.set("range_x", this.options.range_x);
        if (this.options.range_y) this.set("range_y", this.options.range_y);
        this.set("color", this.options.color);
        this.set("mode",  this.options.mode);
        if (this.options.dots) this.options.dots = transform_dots(this.options.dots);
    },
    
    redraw: function () {
        var I = this.invalid;
        var O = this.options;
        var E = this.element;

        if (I.color) {
            I.color = false;
            E.style.stroke = O.color;
        }

        if (I.mode) {
            I.mode = false;
            TK.remove_class(E, "toolkit-filled");
            TK.remove_class(E, "toolkit-outline");
            TK.add_class(E, O.mode === "line" ?  "toolkit-outline" : "toolkit-filled");
        }

        if (I.validate("dots", "type", "width", "height")) {
            var a = 0.5;
            var dots = O.dots;
            var range_x = this.range_x;
            var range_y = this.range_y;
            var w = range_x.options.basis;
            var h = range_y.options.basis;
        
            if (typeof dots === "string") {
                E.setAttribute("d", dots);
            } else if (!dots) {
                E.setAttribute("d", "");
            } else {
                var x = svg_round_array(dots.x.map(range_x.val2px));
                var y = svg_round_array(dots.y.map(range_y.val2px));
                var x1, x2, y1, y2;
                // if we are drawing a line, _start will do the first point
                var i = O.type === "line" ? 1 : 0;
                var s = [];
                var f;

                _start.call(this, dots, s);

                switch (O.type.substr(0,1)) {
                case "L":
                case "T":
                    for (; i < x.length; i++)
                        s.push(" " + O.type + " " + x[i] + " " + y[i]);
                    break;
                case "Q":
                case "S":
                    x1 = svg_round_array(dots.x1.map(range_x.val2px));
                    y1 = svg_round_array(dots.y1.map(range_y.val2px));
                    for (; i < x.length; i++)
                        s.push(" " + O.type + " "
                                 + x1[i] + "," + y1[i] + " "
                                 + x[i] + "," + y[i]);
                    break;
                case "C":
                    x1 = svg_round_array(dots.x1.map(range_x.val2px));
                    x2 = svg_round_array(dots.x2.map(range_x.val2px));
                    y1 = svg_round_array(dots.y1.map(range_y.val2px));
                    y2 = svg_round_array(dots.y2.map(range_y.val2px));
                    for (; i < x.length; i++)
                        s.push(" " + O.type + " "
                            + x1[i] + "," + y1[i] + " "
                            + x2[i] + "," + y2[i] + " "
                            + x[i] + "," + y[i]);
                    break;
                case "H":
                    f = O.type.length > 1 ? parseFloat(O.type.substr(1)) : 3;
                    if (i === 0) {
                        i++;
                        s.push(" S" + x[0] + "," + y[0] + " " + x[0] + "," + y[0]);
                    }
                    for (; i < x.length-1; i++)
                        s.push(" S" + (x[i] - Math.round(x[i] - x[i-1])/f) + ","
                               + y[i] + " " + x[i] + "," + y[i]);
                    if (i < x.length)
                        s.push(" S" + x[i] + "," + y[i] + " " + x[i] + "," + y[i]);
                    break;
                default:
                    TK.error("Unsupported graph type", O.type);
                }
                
                _end.call(this, dots, s);
                E.setAttribute("d", s.join(""));
            }
        }
        TK.Widget.prototype.redraw.call(this);
    },
    
    // GETTER & SETTER
    set: function (key, value) {
        if (key === "dots") {
            value = transform_dots(value);
        }
        TK.Widget.prototype.set.call(this, key, value);
        switch (key) {
            case "range_x":
            case "range_y":
                this.add_range(value, key);
                value.add_event("set", range_change_cb.bind(this));
                break;
            case "width":
                this.range_x.set("basis", value);
                break;
            case "height":
                this.range_y.set("basis", value);
                break;
            case "dots":
                /**
                 * Is fired when the graph changes
                 * @event TK.Graph#graphchanged
                 */
                this.fire_event("graphchanged");
                break;
        }
    }
});
})(this, this.TK);