/*
 * 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 MODES = [
    "circular",
    "line-horizontal",
    "line-vertical",
    "block-top",
    "block-bottom",
    "block-left",
    "block-right",
    "block",
];
function normalize(v) {
    var n = Math.sqrt(v[0]*v[0] + v[1]*v[1]);
    v[0] /= n;
    v[1] /= n;
}
function scrollwheel(e) {
    var direction;
    e.preventDefault();
    var d = e.wheelDelta !== void(0) && e.wheelDelta ? e.wheelDelta : e.detail;
    if (d > 0) {
        direction = 1;
    } else if (d < 0) {
        direction = -1;
    } else return;

    if (this.__sto) window.clearTimeout(this.__sto);
    this.set("dragging", true);
    TK.add_class(this.element, "toolkit-active");
    this.__sto = window.setTimeout(function () {
        this.set("dragging", false);
        TK.remove_class(this.element, "toolkit-active");
        this.fire_event("zchangeended", this.options.z);
    }.bind(this), 250);
    var s = this.range_z.get("step") * direction;
    if (e.ctrlKey && e.shiftKey)
        s *= this.range_z.get("shift_down");
    else if (e.shiftKey)
        s *= this.range_z.get("shift_up");
    this.userset("z", this.get("z") + s);
    if (!this._zwheel)
        this.fire_event("zchangestarted", this.options.z);
    this._zwheel = true;
}

/* The following functions turn positioning options
 * into somethine we can calculate with */

function ROT(a) {
    return [ +Math.sin(+a), +Math.cos(+a) ];
}

var ZHANDLE_POSITION_circular = {
    "top":          ROT(Math.PI),
    "center":       [1e-10, 1e-10],
    "top-right":    ROT(Math.PI*3/4),
    "right":        ROT(Math.PI/2),
    "bottom-right": ROT(Math.PI/4),
    "bottom":       ROT(0),
    "bottom-left":  ROT(Math.PI*7/4),
    "left":         ROT(Math.PI*3/2),
    "top-left":     ROT(Math.PI*5/4),
};

function get_zhandle_position_movable(O, X) {
    var vec = ZHANDLE_POSITION_circular[O.z_handle];
    var x = (X[0]+X[2])/2;
    var y = (X[1]+X[3])/2;
    var R = (X[2] - X[0] - O.z_handle_size)/2;

    return [
        x + R*vec[0],
        y + R*vec[1]
    ];
}

var Z_HANDLE_SIZE_corner = [ 1, 1, 0, 0 ];
var Z_HANDLE_SIZE_horiz = [ 1, 0, 0, 1 ];
var Z_HANDLE_SIZE_vert = [ 0, 1, 1, 0 ];

function Z_HANDLE_SIZE(pos) {
    switch (pos) {
    default:
        TK.warn("Unsupported z_handle position:", pos);
    case "top-right":
    case "bottom-right":
    case "bottom-left":
    case "top-left":
    case "center":
        return Z_HANDLE_SIZE_corner;
    case "top":
    case "bottom":
        return Z_HANDLE_SIZE_vert;
    case "left":
    case "right":
        return Z_HANDLE_SIZE_horiz;
    }
};

function get_zhandle_size(O, X) {
    var vec = Z_HANDLE_SIZE(O.z_handle);
    var z_handle_size = O.z_handle_size;
    var z_handle_centered = O.z_handle_centered;
    var width = X[2] - X[0];
    var height = X[3] - X[1];

    if (z_handle_centered < 1) {
        width *= z_handle_centered;
        height *= z_handle_centered;
    } else {
        width = z_handle_centered;
        height = z_handle_centered;
    }

    width = vec[0] * z_handle_size + vec[2] * width;
    height = vec[1] * z_handle_size + vec[3] * height;

    if (width < z_handle_size) width = z_handle_size;
    if (height < z_handle_size) height = z_handle_size;

    return [width, height];
}

var Z_HANDLE_POS = {
    "top":          [ 0, -1 ],
    "top-right":    [ 1, -1 ],
    "right":        [ 1, 0 ],
    "bottom-right": [ 1, 1 ],
    "bottom":       [ 0, 1 ],
    "bottom-left":  [ -1, 1 ],
    "left":         [ -1, 0 ],
    "top-left":     [ -1, -1 ],
    "center":       [ 0, 0 ],
};

function get_zhandle_position(O, X, zhandle_size) {
    var x = +(+X[0]+X[2]-+zhandle_size[0])/2;
    var y = +(+X[1]+X[3]-+zhandle_size[1])/2;
    var width = +X[2] - +X[0];
    var height = +X[3] - +X[1];
    var vec = Z_HANDLE_POS[O.z_handle] || Z_HANDLE_POS["top-right"];

    x += +vec[0] * +(width - +zhandle_size[0])/2;
    y += +vec[1] * +(height - +zhandle_size[1])/2;

    return [x, y];
}

function mode_to_handle(mode) {
    if (mode === "block-left" || mode === "block-right" ||
        mode === "block-top" || mode === "block-bottom")
        return "block";
    return mode;
}

var LABEL_ALIGN = {
    "line-vertical": {
        "top":      "middle",
        "bottom":   "middle",
        "left":     "end",
        "top-left": "end",
        "bottom-left":"end",
        "right":    "start",
        "top-right":"start",
        "bottom-right":"start",
        "center" : "middle",
    },
    "line-horizontal": {
        "top":      "middle",
        "bottom":   "middle",
        "left":     "start",
        "top-left": "start",
        "bottom-left":"start",
        "right":    "end",
        "top-right":"end",
        "bottom-right":"end",
        "center" : "middle",
    },
    "circular": {
        "top":      "middle",
        "bottom":   "middle",
        "left":     "end",
        "top-left": "start",
        "bottom-left":"start",
        "right":    "start",
        "top-right":"end",
        "bottom-right":"end",
        "center" : "middle",
    },
    "block": {
        "top":      "middle",
        "bottom":   "middle",
        "left":     "start",
        "top-left": "start",
        "bottom-left":"start",
        "right":    "end",
        "top-right":"end",
        "bottom-right":"end",
        "center" : "middle",
    }
}

function get_label_align(O, pos) {
    return LABEL_ALIGN[mode_to_handle(O.mode)][pos];
}

/* The following arrays contain multipliers, alternating x and y, starting with x.
 * The first pair is a multiplier for the handle width and height
 * The second pair is a multiplier for the label size
 * The third pair is a multiplier for the margin
*/ 

var LABEL_POSITION = {
    "line-vertical": {
        top:                 [ 0, -1, 0, 0, 0, 1 ],
        right:               [ 1, 0, 0, -1/2, 1, 0 ],
        left:                [ -1, 0, 0, -1/2, -1, 0 ],
        bottom:              [ 0, 1, 0, -1, 0, -1 ],
        "bottom-left":       [ -1, 1, 0, -1, -1, -1 ],
        "bottom-right":      [ 1, 1, 0, -1, 1, -1 ],
        "top-right":         [ 1, -1, 0, 0, 0, 1 ],
        "top-left":          [ -1, -1, 0, 0, -1, 1 ],
        center:              [ 0, 0, 0, -1/2, 0, 0 ],
    },
    "line-horizontal": {
        top:                 [ 0, -1, 0, -1, 0, -1 ],
        right:               [ 1, 0, 0, -1/2, 1, 0 ],
        left:                [ -1, 0, 0, -1/2, -1, 0 ],
        bottom:              [ 0, 1, 0, 0, 0, 1 ],
        "bottom-left":       [ -1, 1, 0, 0, 1, 1 ],
        "bottom-right":      [ 1, 1, 0, 0, -1, 1 ],
        "top-right":         [ 1, -1, 0, -1, -1, -1 ],
        "top-left":          [ -1, -1, 0, -1, 1, -1 ],
        center:              [ 0, 0, 0, -1/2, 0, 0 ],
    },
    "circular": {
        top:                 [ 0, -1, 0, -1, 0, -1 ],
        right:               [ 1, 0, 0, -1/2, 1, 0 ],
        left:                [ -1, 0, 0, -1/2, -1, 0 ],
        bottom:              [ 0, 1, 0, 0, 0, 1 ],
        "bottom-left":       [ -1, 1, 0, 0, 0, 1 ],
        "bottom-right":      [ 1, 1, 0, 0, 0, 1 ],
        "top-right":         [ 1, -1, 0, -1, 0, -1 ],
        "top-left":          [ -1, -1, 0, -1, 0, -1 ],
        center:              [ 0, 0, 0, -1/2, 0, 0 ],
    },
    "block": {
        top:                 [ 0, -1, 0, 0, 0, 1 ],
        bottom:              [ 0, 1, 0, -1, 0, -1 ],
        right:               [ 1, 0, 0, -1/2, -1, 0 ],
        left:                [ -1, 0, 0, -1/2, 1, 0 ],
        "bottom-left":       [ -1, 1, 0, -1, 1, -1 ],
        "bottom-right":      [ 1, 1, 0, -1, -1, -1 ],
        "top-right":         [ 1, -1, 0, 0, -1, 1 ],
        "top-left":          [ -1, -1, 0, 0, 1, 1 ],
        center:              [ 0, 0, 0, -1/2, 0, 0 ],
    }
}

function get_label_position(O, X, pos, label_size) {
    /* X: array containing [X0, Y0, X1, Y1] of the handle
     * pos: string describing the position of the label ("top", "bottom-right", ...)
     * label_size: array containing width and height of the label
     */
    var m = O.margin;
    
    // Pivot (x, y) is the center of the handle.
    var x = (X[0]+X[2])/2;
    var y = (X[1]+X[3])/2;
    
    // Size of handle
    var width = +X[2]-+X[0];
    var height = +X[3]-+X[1];
    
    // multipliers
    var vec = LABEL_POSITION[mode_to_handle(O.mode)][pos];

    x += vec[0] * width/2 + vec[2] * label_size[0] + vec[4] * m;
    y += vec[1] * height/2 + vec[3] * label_size[1] + vec[5] * m;
    
    // result is [x, y] of the "real" label position. Please note that
    // the final x position depends on the LABEL_ALIGN value for pos.
    // Y value is the top border of the overall label.
    return [x,y];
}

function remove_zhandle() {
    var E = this._zhandle;
    if (!E) return;
    this._zhandle = null;
    if (this.z_drag.get("node") === E)
        this.z_drag.set("node", null);

    E.remove();
}

function create_zhandle() {
    var E;
    var O = this.options;

    if (this._zhandle) remove_zhandle.call(this);

    E = TK.make_svg(
        O.mode === "circular" ? "circle" : "rect", {
            "class": "toolkit-z-handle",
        }
    );

    this._zhandle = E;
    if (this.z_drag.get("node") !== document)
        this.z_drag.set("node", E);
}

function create_line1() {
    if (this._line1) remove_line1.call(this);
    this._line1 = TK.make_svg("path", {
        "class": "toolkit-line toolkit-line-1"
    });
}
function create_line2() {
    if (this._line2) remove_line2.call(this);
    this._line2 = TK.make_svg("path", {
        "class": "toolkit-line toolkit-line-2"
    });
}
function remove_line1() {
    if (!this._line1) return;
    this._line1.remove();
    this._line1 = null;
}
function remove_line2() {
    if (!this._line2) return;
    this._line2.remove();
    this._line2 = null;
}

/* Prints a line, making sure that an offset of 0.5 px aligns them on
 * pixel boundaries */
var format_line = TK.FORMAT("M %.0f.5 %.0f.5 L %.0f.5 %.0f.5");

/* calculates the actual label positions based on given alignment
 * and dimensions */
function get_label_dimensions(align, X, label_size) {
    switch (align) {
    case "start":
        return [ X[0], X[1], X[0]+label_size[0], X[1]+label_size[1] ];
    case "middle":
        return [ X[0]-label_size[0]/2, X[1], X[0]+label_size[0]/2, X[1]+label_size[1] ];
    case "end":
        return [ X[0]-label_size[0], X[1], X[0], X[1]+label_size[1] ];
    }
}

function redraw_handle(O, X) {
    var _handle = this._handle;

    if (!O.show_handle) {
        if (_handle) remove_handle.call(this);
        return;
    }

    var range_x = this.range_x;
    var range_y = this.range_y;
    var range_z = this.range_z;

    if (!range_x.options.basis || !range_y.options.basis) return;

    var x = range_x.val2px(O.x);
    var y = range_y.val2px(O.y);
    var z = range_z.val2coef(O.z);

    var tmp;

    if (O.mode === "circular") {
        tmp = Math.max(O.min_size, z * O.max_size)/2;
        X[0] = x-tmp;
        X[1] = y-tmp;
        X[2] = x+tmp;
        X[3] = y+tmp;

        _handle.setAttribute("r", tmp.toFixed(2));
        _handle.setAttribute("cx", x.toFixed(2));
        _handle.setAttribute("cy", y.toFixed(2));
    } else if (O.mode === "block") {
        tmp = Math.max(O.min_size, z)/2;
        X[0] = x-tmp;
        X[1] = y-tmp;
        X[2] = x+tmp;
        X[3] = y+tmp;

        _handle.setAttribute("x", Math.round(+X[0]).toFixed(0));
        _handle.setAttribute("y", Math.round(+X[1]).toFixed(0));
        _handle.setAttribute("width", Math.round(+X[2]-X[0]).toFixed(0));
        _handle.setAttribute("height", Math.round(+X[3]-X[1]).toFixed(0));
    } else {
        var x_min = O.x_min !== false ? range_x.val2px(range_x.snap(O.x_min)) : 0;
        var x_max = O.x_max !== false ? range_x.val2px(range_x.snap(O.x_max)) : range_x.options.basis;

        if (x_min > x_max) {
            tmp = x_min;
            x_min = x_max;
            x_max = tmp;
        }

        var y_min = O.y_min !== false ? range_y.val2px(range_y.snap(O.y_min)) : 0;
        var y_max = O.y_max !== false ? range_y.val2px(range_y.snap(O.y_max)) : range_y.options.basis;

        if (y_min > y_max) {
            tmp = y_min;
            y_min = y_max;
            y_max = tmp;
        }

        tmp = O.min_size / 2;

        /* All other modes are drawn as rectangles */
        switch (O.mode) {
        case "line-vertical":
            tmp = Math.max(tmp, z * O.max_size/2);
            X[0] = x-tmp;
            X[1] = y_min;
            X[2] = x+tmp;
            X[3] = y_max;
            break;
        case "line-horizontal":
            // line horizontal
            tmp = Math.max(tmp, z * O.max_size/2);
            X[0] = x_min;
            X[1] = y - tmp;
            X[2] = x_max;
            X[3] = y + tmp;
            break;
        case "block-left":
            // rect lefthand
            X[0] = 0;
            X[1] = y_min;
            X[2] = Math.max(x, tmp);
            X[3] = y_max;
            break;
        case "block-right":
            // rect righthand
            X[0] = x;
            X[1] = y_min;
            X[2] = range_x.options.basis;
            X[3] = y_max;
            if (X[2] - X[0] < tmp) X[0] = X[2] - tmp;
            break;
        case "block-top":
            // rect top
            X[0] = x_min;
            X[1] = 0;
            X[2] = x_max;
            X[3] = Math.max(y, tmp);
            break;
        case "block-bottom":
            // rect bottom
            X[0] = x_min;
            X[1] = y;
            X[2] = x_max;
            X[3] = range_y.options.basis;
            if (X[3] - X[1] < tmp) X[1] = X[3] - tmp;
            break;
        default:
            TK.warn("Unsupported mode:", O.mode);
        }

        /* Draw the rectangle */
        _handle.setAttribute("x", Math.round(+X[0]).toFixed(0));
        _handle.setAttribute("y", Math.round(+X[1]).toFixed(0));
        _handle.setAttribute("width", Math.round(+X[2]-X[0]).toFixed(0));
        _handle.setAttribute("height", Math.round(+X[3]-X[1]).toFixed(0));
    }
}

function redraw_zhandle(O, X) {
    var vec;
    var size;
    var zhandle = this._zhandle;

    if (!O.show_handle || O.z_handle === false) {
        if (zhandle) remove_zhandle.call(this);
        return;
    }

    if (!zhandle.parentNode)
        this.element.appendChild(zhandle);
    
    if (this._handle && O.z_handle_below)
        this.element.appendChild(this._handle);
    
    if (O.mode === "circular") {
        /*
         * position the z_handle on the circle.
         */
        vec = get_zhandle_position_movable(O, X);
        /* width and height are equal here */
        zhandle.setAttribute("cx", vec[0].toFixed(1));
        zhandle.setAttribute("cy", vec[1].toFixed(1));
        zhandle.setAttribute("r",  (O.z_handle_size / 2).toFixed(1));

        this.zhandle_position = vec;
    } else if (O.mode === "block") {
        /*
         * position the z_handle on the box.
         */
        vec = get_zhandle_position_movable(O, X);
        size = O.z_handle_size / 2;
        /* width and height are equal here */
        zhandle.setAttribute("x", vec[0].toFixed(0) - size);
        zhandle.setAttribute("y", vec[1].toFixed(0) - size);
        zhandle.setAttribute("width", O.z_handle_size);
        zhandle.setAttribute("height", O.z_handle_size);

        this.zhandle_position = vec;
    } else {
        // all other handle types (lines/blocks)
        this.zhandle_position = vec = get_zhandle_size(O, X);

        zhandle.setAttribute("width", vec[0].toFixed(0));
        zhandle.setAttribute("height", vec[1].toFixed(0));

        vec = get_zhandle_position(O, X, vec);

        zhandle.setAttribute("x", vec[0].toFixed(0));
        zhandle.setAttribute("y", vec[1].toFixed(0));

        /* adjust to the center of the zhandle */
        this.zhandle_position[0] /= 2;
        this.zhandle_position[1] /= 2;
        this.zhandle_position[0] += vec[0];
        this.zhandle_position[1] += vec[1];
    }

    this.zhandle_position[0] -= (X[0]+X[2])/2;
    this.zhandle_position[1] -= (X[1]+X[3])/2;
    normalize(this.zhandle_position);
}

function prevent_default(e) {
    e.preventDefault();
    return false;
}

function create_label() {
    var E;
    this._label = E = TK.make_svg("text", {
        "class": "toolkit-label"
    });
    TK.add_event_listener(E, "mousewheel", this._scrollwheel);
    TK.add_event_listener(E, "DOMMouseScroll",  this._scrollwheel);
    TK.add_event_listener(E, 'contextmenu', prevent_default);
}

function remove_label() {
    var E = this._label;
    this._label = null;
    E.remove();
    TK.remove_event_listener(E, "mousewheel",      this._scrollwheel);
    TK.remove_event_listener(E, "DOMMouseScroll",  this._scrollwheel);
    TK.remove_event_listener(E, 'contextmenu', prevent_default);

    this.label = [0,0,0,0];
}

function STOP() { return false; };

function create_handle() {
    var O = this.options;
    var E;

    if (this._handle) remove_handle.call(this);
    
    E = TK.make_svg(O.mode === "circular" ? "circle" : "rect",
                    { class: "toolkit-handle" });
    TK.add_event_listener(E, "mousewheel",     this._scrollwheel);
    TK.add_event_listener(E, "DOMMouseScroll", this._scrollwheel);
    TK.add_event_listener(E, 'selectstart', prevent_default);
    TK.add_event_listener(E, 'contextmenu', prevent_default);
    this._handle = E;
    this.element.appendChild(E);
}

function remove_handle() {
    var E = this._handle;
    if (!E) return;
    this._handle = null;
    E.remove();
    TK.remove_event_listener(E, "mousewheel",     this._scrollwheel);
    TK.remove_event_listener(E, "DOMMouseScroll", this._scrollwheel);
    TK.remove_event_listener(E, "selectstart", prevent_default);
    TK.remove_event_listener(E, 'contextmenu', prevent_default);
}

function redraw_label(O, X) {
    if (!O.show_handle || O.label === false) {
        if (this._label) remove_label.call(this);
        return false;
    }

    var a = O.label.call(this, O.title, O.x, O.y, O.z).split("\n");
    var c = this._label.childNodes;

    while (c.length < a.length) {
        this._label.appendChild(TK.make_svg("tspan", {dy:"1.0em"}));
    }
    while (c.length > a.length) {
        this._label.removeChild(this._label.lastChild);
    }
    for (var i = 0; i < a.length; i++) {
        TK.set_text(c[i], a[i]);
    }

    if (!this._label.parentNode) this.element.appendChild(this._label);

    TK.S.add(function() {
        var w = 0;
        for (var i = 0; i < a.length; i++) {
            w = Math.max(w, c[i].getComputedTextLength());
        }

        var bbox;

        try {
            bbox = this._label.getBBox();
        } catch(e) {
            /* _label is not in the DOM yet */
            return;
        }

        TK.S.add(function() {
            var label_size = [ w, bbox.height ];

            var i;
            var pref = O.preferences;
            var area = 0;
            var label_position;
            var text_position;
            var text_anchor;
            var tmp;

            /*
             * Calculate possible positions of the labels and calculate their intersections. Choose
             * that position which has the smallest intersection area with all other handles and labels
             */
            for (i = 0; i < pref.length; i++) {

                /* get alignment */
                var align = get_label_align(O, pref[i]);

                /* get label position */
                var LX = get_label_position(O, X, pref[i], label_size);

                /* calculate the label bounding box using anchor and dimensions */
                var pos = get_label_dimensions(align, LX, label_size);

                tmp = O.intersect(pos, this);

                /* We require at least one square px smaller intersection
                 * to avoid flickering label positions */
                if (area === 0 || tmp.intersect + 1 < area) {
                    area = tmp.intersect;
                    label_position = pos;
                    text_position = LX;
                    text_anchor = align;

                    /* there is no intersections, we are done */
                    if (area === 0) break;
                }
            }

            this.label = label_position;
            tmp = Math.round(text_position[0]) + "px";
            this._label.setAttribute("x", tmp);
            this._label.setAttribute("y", Math.round(text_position[1]) + "px");
            this._label.setAttribute("text-anchor", text_anchor);
            var c = this._label.childNodes;
            for (var i = 0; i < c.length; i++)
                c[i].setAttribute("x", tmp);

            redraw_lines.call(this, O, X);
        }.bind(this), 1);
    }.bind(this));

    return true;
}

function redraw_lines(O, X) {

    if (!O.show_handle) {
        if (this._line1) remove_line1.call(this);
        if (this._line2) remove_line2.call(this);
        return;
    }

    var pos = this.label;
    var range_x = this.range_x;
    var range_y = this.range_y;
    var range_z = this.range_z;

    var x = range_x.val2px(O.x);
    var y = range_y.val2px(O.y);
    var z = range_z.val2px(O.z);
    switch (O.mode) {
        case "circular":
        case "block":
            if (O.show_axis) {
                this._line1.setAttribute("d",
                     format_line(((y >= pos[1] && y <= pos[3]) ? Math.max(X[2], pos[2]) : X[2]) + O.margin, y,
                                 range_x.options.basis, y));
                this._line2.setAttribute("d",
                     format_line(x, ((x >= pos[0] && x <= pos[2]) ? Math.max(X[3], pos[3]) : X[3]) + O.margin,
                                 x, range_y.options.basis));
            } else {
                if (this._line1) remove_line1.call(this);
                if (this._line2) remove_line2.call(this);
            }
            break;
        case "line-vertical":
        case "block-left":
        case "block-right":
            this._line1.setAttribute("d", format_line(x, X[1], x, X[3]));
            if (O.show_axis) {
                this._line2.setAttribute("d", format_line(0, y, range_x.options.basis, y));
            } else if (this._line2) {
                remove_line2.call(this);
            }
            break;
        case "line-horizontal":
        case "block-top":
        case "block-bottom":
            this._line1.setAttribute("d", format_line(X[0], y, X[2], y));
            if (O.show_axis) {
                this._line2.setAttribute("d", format_line(x, 0, x, range_y.options.basis));
            } else if (this._line2) {
                remove_line2.call(this);
            }
            break;
        default:
            TK.warn("Unsupported mode", pref[i]);
    }

    if (this._line1 && !this._line1.parentNode) this.element.appendChild(this._line1);
    if (this._line2 && !this._line2.parentNode) this.element.appendChild(this._line2);
}

function set_main_class(O) {
    var E = this.element;
    var i;

    for (i = 0; i < MODES.length; i++) TK.remove_class(E, "toolkit-"+MODES[i]);

    TK.remove_class(E, "toolkit-line");
    TK.remove_class(E, "toolkit-block");

    switch (O.mode) {
    case "line-vertical":
    case "line-horizontal":
        TK.add_class(E, "toolkit-line");
    case "circular":
        break;
    case "block-left":
    case "block-right":
    case "block-top":
    case "block-bottom":
    case "block":
        TK.add_class(E, "toolkit-block");
        break;
    default:
        TK.warn("Unsupported mode:", O.mode);
        return;
    }

    TK.add_class(E, "toolkit-"+O.mode);
}

function startdrag() {
    this.draw_once(function() {
        var e = this.element;
        var p = e.parentNode;
        TK.add_class(e, "toolkit-active");
        this.set("dragging", true);

        /* TODO: move this into the parent */
        TK.add_class(this.parent.element, "toolkit-dragging");

        this.global_cursor("move");

        if (p.lastChild !== e)
            p.appendChild(e);
    });
}

function enddrag() {
    this.draw_once(function() {
        var e = this.element;
        TK.remove_class(e, "toolkit-active");
        this.set("dragging", false);

        /* TODO: move this into the parent */
        TK.remove_class(this.parent.element, "toolkit-dragging");

        this.remove_cursor("move");
    });
}

/**
 * Class which represents a draggable SVG element, which can be used to represent and change
 * a value inside of a {@link TK.ResponseHandler} and is drawn inside of a chart.
 *
 * @class TK.ResponseHandle
 * 
 * @extends TK.Widget
 *
 * @param {Object} [options={ }] - An object containing initial options.
 * 
 * @property {Function|Object} options.range_x - Callback returning a {@link TK.Range}
 *   for the x-axis or an object with options for a {@link TK.Range}. This is usually
 *   the <code>x_range</code> of the parent chart.
 * @property {Function|Object} options.range_y - Callback returning a {@link TK.Range}
 *   for the y-axis or an object with options for a {@link TK.Range}. This is usually
 *   the <code>y_range</code> of the parent chart.
 * @property {Function|Object} options.range_z - Callback returning a {@link TK.Range}
 *   for the z-axis or an object with options for a {@link TK.Range}.
 * @property {String} [options.mode="circular"] - Type of the handle. Can be one out of
 *   <code>circular</code>, <code>line-vertical</code>, <code>line-horizontal</code>,
 *   <code>block-left</code>, <code>block-right</code>, <code>block-top</code> or
 *   <code>block-right</code>.
 * @property {Number} [options.x] - Value of the x-coordinate.
 * @property {Number} [options.y] - Value of the y-coordinate.
 * @property {Number} [options.z] - Value of the z-coordinate.
 * @property {Number} [options.min_size=24] - Minimum size of the handle in px.
 * @property {Number} [options.max_size=100] - Maximum size of the handle in px.
 * @property {Function|Boolean} options.label - Label formatting function. Arguments are
 *   <code>title</code>, <code>x</code>, <code>y</code>, <code>z</code>. If set to <code>false</code>, no label is displayed.
 * @property {Array<String>}  [options.preferences=["left", "top", "right", "bottom"]] - Possible label
 *   positions by order of preference. Depending on the selected <code>mode</code> this can
 *   be a subset of <code>top</code>, <code>top-right</code>, <code>right</code>,
 *   <code>bottom-right</code>, <code>bottom</code>, <code>bottom-left</code>,
 *   <code>left</code>, <code>top-left</code> and <code>center</code>.
 * @property {Number} [options.margin=3] - Margin in px between the handle and the label.
 * @property {Boolean|String} [options.z_handle=false] - If not false, a small handle is drawn at the given position (`top`, `top-left`, `top-right`, `left`, `center`, `right`, `bottom-left`, `bottom`, `bottom-right`), which can
 *   be dragged to change the value of the z-coordinate.
 * @property {Number} [options.z_handle_size=6] - Size in px of the z-handle.
 * @property {Number} [options.z_handle_centered=0.1] - Size of the z-handle in center positions.
 *   If this options is between 0 and 1, it is interpreted as a ratio, otherwise as a px size.
 * @property {Number} [options.z_handle_below=false] - Render the z-handle below the normal handle in the DOM. SVG doesn't know CSS attribute z-index, so this workaround is needed from time to time.
 * @property {Number} [options.x_min] - Minimum value of the x-coordinate.
 * @property {Number} [options.x_max] - Maximum value of the x-coordinate.
 * @property {Number} [options.y_min] - Minimum value of the y-coordinate.
 * @property {Number} [options.y_max] - Maximum value of the y-coordinate.
 * @property {Number} [options.z_min] - Minimum value of the z-coordinate.
 * @property {Number} [options.z_max] - Maximum value of the z-coordinate.
 * @property {Boolean} [options.show_axis=false] - If set to true,  additional lines are drawn at the coordinate values.
 *
 * @mixes TK.Ranges
 * @mixes TK.Warning
 * @mixes TK.GlobalCursor
 */

/**
 * @member {SVGText} TK.ResponseHandle#_label - The label. Has class <code>toolkit-label</code>.
 */
/**
 * @member {SVGPath} TK.ResponseHandle#_line1 - The first line. Has class <code>toolkit-line toolkit-line-1</code>.
 */
/**
 * @member {SVGPath} TK.ResponseHandle#_line2 - The second line. Has class <code>toolkit-line toolkit-line-2</code>.
 */

function set_min(value, key) {
    var name = key.substr(0, 1);
    var O = this.options;
    if (value !== false && O[name] < value) this.set(name, value);
}

function set_max(value, key) {
    var name = key.substr(0, 1);
    var O = this.options;
    if (value !== false && O[name] > value) this.set(name, value);
}
         
/**
 * The <code>useraction</code> event is emitted when a widget gets modified by user interaction.
 * The event is emitted for the options <code>x</code>, <code>y</code> and <code>z</code>.
 *
 * @event TK.ResponseHandle#useraction
 * 
 * @param {string} name - The name of the option which was changed due to the users action.
 * @param {mixed} value - The new value of the option.
 */
TK.ResponseHandle = TK.class({
    _class: "ResponseHandle",
    Extends: TK.Widget,
    Implements: [TK.GlobalCursor, TK.Ranges, TK.Warning],
    _options: Object.assign(Object.create(TK.Widget.prototype._options), TK.Ranges.prototype._options, {
        range_x: "mixed",
        range_y: "mixed",
        range_z: "mixed",
        intersect: "function",
        mode: "string",
        preferences: "array",
        label: "function|boolean",
        x: "number",
        y: "number",
        z: "number",
        min_size: "number",
        max_size: "number",
        margin: "number",
        z_handle: "boolean|string",
        z_handle_size: "number",
        z_handle_centered: "number",
        z_handle_below: "boolean",
        min_drag: "number",
        x_min: "number",
        x_max: "number",
        y_min: "number",
        y_max: "number",
        z_min: "number",
        z_max: "number",
        active: "boolean",
        show_axis: "boolean",
        title: "string",
        hover: "boolean",
        dragging: "boolean",
        show_handle: "boolean"
    }),
    options: {
        range_x:          {},
        range_y:          {},
        range_z:          {},
        intersect:        function () { return { intersect: 0, count: 0 } },
        // NOTE: this is currently not a public API
        // callback function for checking intersections: function (x1, y1, x2, y2, id) {}
        // returns a value describing the amount of intersection with other handle elements.
        // intersections are weighted depending on the intersecting object. E.g. SVG borders have
        // a very high impact while intersecting in comparison with overlapping handle objects
        // that have a low impact on intersection
        mode:             "circular",
        preferences:      ["left", "top", "right", "bottom"],
        label:            TK.FORMAT("%s\n%d Hz\n%.2f dB\nQ: %.2f"),
        x:                0,
        y:                0,
        z:                0,
        min_size:         24,
        max_size:         100,
        margin:           3,
        z_handle:         false,
        z_handle_size:    6,
        z_handle_centered:0.1,
        z_handle_below:   false,
        min_drag:         0,
        // NOTE: not yet a public API
        // amount of pixels the handle has to be dragged before it starts to move
        x_min:            false,
        x_max:            false,
        y_min:            false,
        y_max:            false,
        z_min:            false,
        z_max:            false,
        active:           true,
        show_axis:        false,
        hover:            false,
        dragging:         false,
        show_handle:      true
    },
    static_events: {
        set_show_axis: function(value) {
            var O = this.options;
            if (O.mode === "circular") create_line1.call(this);
            create_line2.call(this);
        },
        set_label: function(value) {
            if (value !== false && !this._label) create_label.call(this);
        },
        set_show_handle: function(value) {
            this.set("mode", this.options.mode);
            this.set("show_axis", this.options.show_axis);
            this.set("label", this.options.label);
        },
        set_mode: function(value) {
            var O = this.options;
            if (!O.show_handle) return;
            create_handle.call(this);
            if (O.z_handle !== false) create_zhandle.call(this);
            if (value !== "circular") create_line1.call(this);
        },
        set_x_min: set_min,
        set_y_min: set_min,
        set_z_min: set_min,
        set_x_max: set_max,
        set_y_max: set_max,
        set_z_max: set_max,
        mouseenter: function() {
            this.set("hover", true);
        },
        mouseleave: function() {
            this.set("hover", false);
        },
        set_active: function(v) {
            if (!v) {
                this.pos_drag.cancel_drag();
                this.z_drag.cancel_drag();
            }
        },
    },

    initialize: function (options) {
        this.label = [0,0,0,0];
        this.handle = [0,0,0,0];
        this._zwheel = false;
        this.__sto = 0;
        TK.Widget.prototype.initialize.call(this, options);
        var O = this.options;
        
        /**
         * @member {TK.Range} TK.ResponseHandle#range_x - The {@link TK.Range} for the x axis.
         */
        /**
         * @member {TK.Range} TK.ResponseHandle#range_y - The {@link TK.Range} for the y axis.
         */
        /**
         * @member {TK.Range} TK.ResponseHandle#range_z - The {@link TK.Range} for the z axis.
         */
        this.add_range(O.range_x, "range_x");
        this.add_range(O.range_y, "range_y");
        this.add_range(O.range_z, "range_z");

        var set_cb = function() {
            this.invalid.x = true;
            this.trigger_draw();
        }.bind(this);

        this.range_x.add_event("set", set_cb);
        this.range_y.add_event("set", set_cb);
        this.range_z.add_event("set", set_cb);

        var E = TK.make_svg("g");
        
        /**
         * @member {SVGGroup} TK.ResponseHandle#element - The main SVG group containing all handle elements. Has class <code>toolkit-response-handle</code>.
         */
        this.element = E;

        this.widgetize(E, true, true);

        TK.add_class(E, "toolkit-response-handle");
        /**
         * @member {SVGCircular} TK.ResponseHandle#_handle - The main handle.
         *      Has class <code>toolkit-handle</code>.
         */
        
        /**
         * @member {SVGCircular} TK.ResponseHandle#_zhandle - The handle for manipulating z axis.
         *      Has class <code>toolkit-z-handle</code>.
         */

        this._scrollwheel = scrollwheel.bind(this);

        this._handle = this._zhandle = this._line1 = this._line2 = this._label = null;

        this.z_drag = new TK.DragCapture(this, {
            node: null,
            onstartcapture: function(state) {
                var self = this.parent;
                var O = self.options;
                if (!O.active) return;
                state.z = self.range_z.val2px(O.z);

                /* the main handle is active,
                 * this is a z gesture */
                var pstate = self.pos_drag.state();
                if (pstate) {
                    var d;
                    var v = [ state.current.clientX - pstate.prev.clientX,
                              state.current.clientY - pstate.prev.clientY ];
                    normalize(v);
                    state.vector = v;
                } else {
                    state.vector = self.zhandle_position;
                }
                /**
                 * Is fired when the user grabs the z-handle. The argument is the
                 * actual z value.
                 * 
                 * @event TK.ResponseHandle#zchangestarted
                 * 
                 * @param {number} z - The z value.
                 */
                self.fire_event("zchangestarted", O.z);
                startdrag.call(self);
                return true;
            },
            onmovecapture: function(state) {
                var self = this.parent;
                var O = self.options;

                var zv = state.vector;
                var v = state.vdistance();

                var d = zv[0] * v[0] + zv[1] * v[1];

                /* ignore small movements */
                if (O.min_drag > 0 && O.min_drag > d) return;

                var range_z = self.range_z;
                var z = range_z.px2val(state.z + d);

                self.userset("z", z);
            },
            onstopcapture: function() {
                var self = this.parent;
                /**
                 * Is fired when the user releases the z-handle. The argument is the
                 * actual z value.
                 * 
                 * @event TK.ResponseHandle#zchangeended
                 * 
                 * @param {number} z - The z value.
                 */
                self.fire_event("zchangeended", self.options.z);
                enddrag.call(self);
            },
        });
        this.pos_drag = new TK.DragCapture(this, {
            node: this.element,
            onstartcapture: function(state) {
                var self = this.parent;
                var O = self.options;
                if (!O.active) return;

                var button = state.current.button;
                var E = self.element;
                var p = E.parentNode;
                var ev = state.current;

                self.z_drag.set("node", document);

                /* right click triggers move to the back */
                if (ev.button === 2) {
                    if (E !== p.firstChild)
                        self.draw_once(function() {
                            var e = this.element;
                            var p = e.parentNode;
                            if (p && e !== p.firstChild) p.insertBefore(e, p.firstChild);
                        });
                    /* cancel everything else, but do not drag */
                    ev.preventDefault();
                    ev.stopPropagation();
                    return false;
                }

                state.x = self.range_x.val2px(O.x);
                state.y = self.range_y.val2px(O.y);
                /**
                 * Is fired when the main handle is grabbed by the user.
                 * The argument is an object with the following members:
                 * <ul>
                 * <li>x: the actual value on the x axis</li>
                 * <li>y: the actual value on the y axis</li>
                 * <li>pos_x: the position in pixels on the x axis</li>
                 * <li>pos_y: the position in pixels on the y axis</li>
                 * </ul>
                 * 
                 * @event TK.ResponseHandle#handlegrabbed
                 * 
                 * @param {Object} positions - An object containing all relevant positions of the pointer.
                 */
                self.fire_event("handlegrabbed", {
                    x:     O.x,
                    y:     O.y,
                    pos_x: state.x,
                    pos_y: state.y
                });
                startdrag.call(self);
                return true;
            },
            onmovecapture: function(state) {
                var self = this.parent;
                var O = self.options;

                /* ignore small movements */
                if (O.min_drag > 0 && O.min_drag > state.distance()) return;

                /* we are changing z right now using a gesture, irgnore this movement */
                if (self.z_drag.dragging()) return;

                var v = state.vdistance();
                var range_x = self.range_x;
                var range_y = self.range_y;
                var x = range_x.px2val(state.x + v[0]);
                var y = range_y.px2val(state.y + v[1]);

                self.userset("x", x);
                self.userset("y", y);
            },
            onstopcapture: function() {
                /**
                 * Is fired when the user releases the main handle.
                 * The argument is an object with the following members:
                 * <ul>
                 * <li>x: the actual value on the x axis</li>
                 * <li>y: the actual value on the y axis</li>
                 * <li>pos_x: the position in pixels on the x axis</li>
                 * <li>pos_y: the position in pixels on the y axis</li>
                 * </ul>
                 * 
                 * @event TK.ResponseHandle#handlereleased
                 * 
                 * @param {Object} positions - An object containing all relevant positions of the pointer.
                 */
                var self = this.parent;
                var O = self.options;
                self.fire_event("handlereleased", {
                    x:     O.x,
                    y:     O.y,
                    pos_x: self.range_x.val2px(O.x),
                    pos_y: self.range_y.val2px(O.y),
                });
                enddrag.call(self);
                self.z_drag.set("node", self._zhandle);
            },
        });

        this.set("mode", O.mode);
        this.set("show_handle", O.show_handle);
        this.set("show_axis", O.show_axis);
        this.set("active", O.active);
        this.set("x", O.x);
        this.set("y", O.y);
        this.set("z", O.z);
        this.set("z_handle", O.z_handle);
        this.set("label", O.label);

    },

    redraw: function () {
        TK.Widget.prototype.redraw.call(this);
        var O = this.options;
        var I = this.invalid;

        var range_x = this.range_x;
        var range_y = this.range_y;
        var range_z = this.range_z;

        /* These are the coordinates of the corners (x1, y1, x2, y2)
         * NOTE: x,y are not necessarily in the midde. */
        var X  = this.handle;

        if (I.mode) set_main_class.call(this, O);

        if (I.hover) {
            I.hover = false;
            TK.toggle_class(this.element, "toolkit-hover", O.hover);
        }
        if (I.dragging) {
            I.dragging = false;
            TK.toggle_class(this.element, "toolkit-dragging", O.dragging);
        }

        if (I.active || I.disabled) {
            I.disabled = false;
            // TODO: this is not very nice, we should really use the options
            // for that. 1) set "active" from the mouse handlers 2) set disabled instead
            // of active
            TK.toggle_class(this.element, "toolkit-disabled", !O.active || O.disabled);
        }

        var moved = I.validate("x", "y", "z", "mode", "active", "show_handle");

        if (moved) redraw_handle.call(this, O, X);

        // Z-HANDLE

        if (I.validate("z_handle") || moved) {
            redraw_zhandle.call(this, O, X);
        }

        var delay_lines;
        
        // LABEL
        if (I.validate("label", "title", "preference") || moved) {
            delay_lines = redraw_label.call(this, O, X);
        }

        // LINES
        if (I.validate("show_axis") || moved) {
            if (!delay_lines) redraw_lines.call(this, O, X);
        }
    },
    set: function(key, value) {
        var O = this.options;

        switch (key) {
        case "z_handle":
            if (value !== false && !ZHANDLE_POSITION_circular[value]) {
                TK.warn("Unsupported z_handle option:", value);
                value = false;
            }
            if (value !== false) create_zhandle.call(this);
            break;
        case "x":
            value = this.range_x.snap(value);
            if (O.x_min !== false && value < O.x_min) value = O.x_min;
            if (O.x_max !== false && value > O.x_max) value = O.x_max;
            break;
        case "y":
            value = this.range_y.snap(value);
            if (O.y_min !== false && value < O.y_min) value = O.y_min;
            if (O.y_max !== false && value > O.y_max) value = O.y_max;
            break;
        case "z":
            value = this.range_z.snap(value);
            if (O.z_min !== false && value < O.z_min) {
                value = O.z_min;
                this.warning(this.element);
            } else if (O.z_max !== false && value > O.z_max) {
                value = O.z_max;
                this.warning(this.element);
            }
            break;
        }

        return TK.Widget.prototype.set.call(this, key, value);
    },
    destroy: function () {
        remove_zhandle.call(this);
        remove_line1.call(this);
        remove_line2.call(this);
        remove_label.call(this);
        remove_handle.call(this);
        TK.Widget.prototype.destroy.call(this);
    },
});
})(this, this.TK);