/* paper-renderer.js */

"use strict";

(function(root) {

    var Rkns = root.Rkns,

    _ = Rkns._,

    $ = Rkns.$;

    /* Rkns.Renderer Object */

    /* This object contains constants, utility functions and classes for Renkan's Graph Manipulation GUI */

    var Renderer = Rkns.Renderer = {},

    /* The minimum distance (in pixels) the mouse has to move to consider an element was dragged */

    _MIN_DRAG_DISTANCE = 2,

    /* Distance between the inner and outer radius of buttons that appear when hovering on a node */

    _NODE_BUTTON_WIDTH = 40,

    _EDGE_BUTTON_INNER = 2,

    _EDGE_BUTTON_OUTER = 40,

    /* Constants used to know if a specific action is to be performed when clicking on the canvas */

    _CLICKMODE_ADDNODE = 1,

    _CLICKMODE_STARTEDGE = 2,

    _CLICKMODE_ENDEDGE = 3,

    /* Node size step: Used to calculate the size change when clicking the +/- buttons */

    _NODE_SIZE_STEP = Math.LN2/4,

    _MIN_SCALE = 1/20,

    _MAX_SCALE = 20,

    _MOUSEMOVE_RATE = 80,

    _DOUBLETAP_DELAY = 800,

    /* Maximum distance in pixels (squared, to reduce calculations)

     * between two taps when double-tapping on a touch terminal */

    _DOUBLETAP_DISTANCE = 20*20,

    /* A placeholder so a default colour is displayed when a node has a null value for its user property */

    _USER_PLACEHOLDER = function(_renkan) {

        return {

            color: _renkan.options.default_user_color,

            title: _renkan.translate("(unknown user)"),

            get: function(attr) {

                return this[attr] || false;

            }

        };

    },

    /* The code for the "Drag and Add Bookmarklet", slightly minified and with whitespaces removed, though

     * it doesn't seem that it's still a requirement in newer browsers (i.e. the ones compatibles with canvas drawing)

     */

    _BOOKMARKLET_CODE = function(_renkan) {

        return "(function(a,b,c,d,e,f,h,i,j,k,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">"

        + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_")

        + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();";

    },

    /* Shortens text to the required length then adds ellipsis */

    shortenText = function(_text, _maxlength) {

        return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);

    },

    /* Drawing an edit box with an arrow and positioning the edit box according to the position of the node/edge being edited

     * Called by Rkns.Renderer.NodeEditor and Rkns.Renderer.EdgeEditor */

    drawEditBox = function(_options, _coords, _path, _xmargin, _selector) {

        _selector.css({

            width: ( _options.tooltip_width - 2* _options.tooltip_padding )

        });

        var _height = _selector.outerHeight() + 2* _options.tooltip_padding,

        _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),

        _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),

        _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),

        _top = _coords.y - _height / 2;

        if (_top + _height > (paper.view.size.height - _options.tooltip_margin)) {

            _top = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 ) - _height;

        }

        if (_top < _options.tooltip_margin) {

            _top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 );

        }

        var _bottom = _top + _height;

        _path.segments[0].point

        = _path.segments[7].point

        = _coords.add([_isLeft * _xmargin, 0]);

        _path.segments[1].point.x

        = _path.segments[2].point.x

        = _path.segments[5].point.x

        = _path.segments[6].point.x

        = _left;

        _path.segments[3].point.x

        = _path.segments[4].point.x

        = _right;

        _path.segments[2].point.y

        = _path.segments[3].point.y

        = _top;

        _path.segments[4].point.y

        = _path.segments[5].point.y

        = _bottom;

        _path.segments[1].point.y = _coords.y - _options.tooltip_arrow_width / 2;

        _path.segments[6].point.y = _coords.y + _options.tooltip_arrow_width / 2;

        _path.closed = true;

        _path.fillColor = new paper.GradientColor(new paper.Gradient([_options.tooltip_top_color, _options.tooltip_bottom_color]), [0,_top], [0, _bottom]);

        _selector.css({

            left: (_options.tooltip_padding + Math.min(_left, _right)),

            top: (_options.tooltip_padding + _top)

        });

        return _path;

    };

    /* Rkns.Renderer._BaseRepresentation Class */

    /* In Renkan, a "Representation" is a sort of ViewModel (in the MVVM paradigm) and bridges the gap between

     * models (written with Backbone.js) and the view (written with Paper.js)

     * Renkan's representations all inherit from Rkns.Renderer._BaseRepresentation '*/

    var _BaseRepresentation = Renderer._BaseRepresentation = function(_renderer, _model) {

        if (typeof _renderer !== "undefined") {

            this.renderer = _renderer;

            this.renkan = _renderer.renkan;

            this.project = _renderer.renkan.project;

            this.options = _renderer.renkan.options;

            this.model = _model;

            if (this.model) {

                var _this = this;

                this._changeBinding = function() {

                    _this.redraw();

                };

                this._removeBinding = function() {

                    _renderer.removeRepresentation(_this);

                    _(function() {

                        _renderer.redraw();

                    }).defer();

                };

                this._selectBinding = function() {

                    _this.select();

                };

                this._unselectBinding = function() {

                    _this.unselect();

                };

                this.model.on("change", this._changeBinding );

                this.model.on("remove", this._removeBinding );

                this.model.on("select", this._selectBinding );

                this.model.on("unselect", this._unselectBinding );

            }

        }

    };

    /* Rkns.Renderer._BaseRepresentation Methods */

    _(_BaseRepresentation.prototype).extend({

        _super: function(_func) {

            return _BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));

        },

        redraw: function() {},

        moveTo: function() {},

        show: function() {},

        hide: function() {},

        select: function() {

            if (this.model) {

                this.model.trigger("selected");

            }

        },

        unselect: function() {

            if (this.model) {

                this.model.trigger("unselected");

            }

        },

        highlight: function() {},

        unhighlight: function() {},

        mousedown: function() {},

        mouseup: function() {

            if (this.model) {

                this.model.trigger("clicked");

            }

        },

        destroy: function() {

            if (this.model) {

                this.model.off("change", this._changeBinding );

                this.model.off("remove", this._removeBinding );

                this.model.off("select", this._selectBinding );

                this.model.off("unselect", this._unselectBinding );

            }

        }

    });

    /* End of Rkns.Renderer._BaseRepresentation Class */

    /* Rkns.Renderer._BaseButton Class */

    /* BaseButton is extended by contextual buttons that appear when hovering on nodes and edges */

    var _BaseButton = Renderer._BaseButton = Rkns.Utils.inherit(_BaseRepresentation);

    _(_BaseButton.prototype).extend({

        moveTo: function(_pos) {

            this.sector.moveTo(_pos);

        },

        show: function() {

            this.sector.show();

        },

        hide: function() {

            this.sector.hide();

        },

        select: function() {

            this.sector.select();

        },

        unselect: function(_newTarget) {

            this.sector.unselect();

            if (!_newTarget || (_newTarget !== this.source_representation && _newTarget.source_representation !== this.source_representation)) {

                this.source_representation.unselect();

            }

        },

        destroy: function() {

            this.sector.destroy();

        }

    });

    /* End of Rkns.Renderer._BaseButton Class */

    /* Rkns.Renderer.Node Class */

    /* The representation for the node : A circle, with an image inside and a text label underneath.

     * The circle and the image are drawn on canvas and managed by Paper.js.

     * The text label is an HTML node, managed by jQuery. */

    var NodeRepr = Renderer.Node = Rkns.Utils.inherit(_BaseRepresentation);

    _(NodeRepr.prototype).extend({

        _init: function() {

            this.renderer.node_layer.activate();

            this.type = "Node";

            this.circle = new paper.Path.Circle([0, 0], 1);

            this.circle.__representation = this;

            if (this.options.show_node_circles) {

                this.circle.strokeWidth = this.options.node_stroke_width;

                this.h_ratio = 1;

            } else {

                this.h_ratio = 0;

            }

            this.title = $('<div class="Rk-Label">').appendTo(this.renderer.labels_$);

            if (this.options.editor_mode) {

                this.normal_buttons = [

                                       new NodeEditButton(this.renderer, null),

                                       new NodeRemoveButton(this.renderer, null),

                                       new NodeLinkButton(this.renderer, null),

                                       new NodeEnlargeButton(this.renderer, null),

                                       new NodeShrinkButton(this.renderer, null)

                                       ];

                this.pending_delete_buttons = [

                                               new NodeRevertButton(this.renderer, null)

                                               ];

                this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);

                for (var i = 0; i < this.all_buttons.length; i++) {

                    this.all_buttons[i].source_representation = this;

                }

                this.active_buttons = [];

            } else {

                this.active_buttons = this.all_buttons = [];

            }

            this.last_circle_radius = 1;

            if (this.renderer.minimap) {

                this.renderer.minimap.node_layer.activate();

                this.minimap_circle = new paper.Path.Circle([0, 0], 1);

                this.minimap_circle.__representation = this.renderer.minimap.miniframe.__representation;

                this.renderer.minimap.node_group.addChild(this.minimap_circle);

            }

        },

        redraw: function(_dontRedrawEdges) {

            var _model_coords = new paper.Point(this.model.get("position")),

            _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * _NODE_SIZE_STEP);

            if (!this.is_dragging || !this.paper_coords) {

                this.paper_coords = this.renderer.toPaperCoords(_model_coords);

            }

            this.circle_radius = _baseRadius * this.renderer.scale;

            if (this.last_circle_radius !== this.circle_radius) {

                this.all_buttons.forEach(function(b) {

                    b.setSectorSize();

                });

                var square = new paper.Size(this.circle_radius, this.circle_radius),

                topleft = this.paper_coords.subtract(square),

                bounds = new paper.Rectangle(topleft, square.multiply(2));

                this.circle.scale(this.circle_radius / this.last_circle_radius);

                if (this.node_image) {

                    this.node_image.scale(this.circle_radius / this.last_circle_radius);

                }

            }

            this.circle.position = this.paper_coords;

            if (this.node_image) {

                this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));

            }

            this.last_circle_radius = this.circle_radius;

            var old_act_btn = this.active_buttons;

            if (this.model.get("delete_scheduled")) {

                var opacity = .5;

                this.active_buttons = this.pending_delete_buttons;

                this.circle.dashArray = [2,2];

            } else {

                var opacity = 1;

                this.active_buttons = this.normal_buttons;

                this.circle.dashArray = null;

            }

            if (this.selected && this.renderer.isEditable()) {

                if (old_act_btn !== this.active_buttons) {

                    old_act_btn.forEach(function(b) {

                        b.hide();

                    });

                }

                this.active_buttons.forEach(function(b) {

                    b.show();

                });

            }

            if (this.node_image) {

                this.node_image.opacity = this.highlighted ? opacity * .5 : (opacity - .01);

            }

            this.circle.fillColor = this.highlighted ? this.options.highlighted_node_fill_color : this.options.node_fill_color;

            this.circle.opacity = this.options.show_node_circles ? opacity : .01;

            var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_nodes) || "";

            _text = shortenText(_text, this.options.node_label_max_length);

            if (typeof this.highlighted === "object") {

                this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));

            } else {

                this.title.text(_text);

            }

            this.title.css({

                left: this.paper_coords.x,

                top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,

                opacity: opacity

            });

            var _color = this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color");

            this.circle.strokeColor = _color;

            var _pc = this.paper_coords;

            this.all_buttons.forEach(function(b) {

                b.moveTo(_pc);

            });

            var lastImage = this.img;

            this.img = this.model.get("image");

            if (this.img && this.img !== lastImage) {

                this.showImage();

            }

            if (this.node_image && !this.img) {

                this.node_image.remove();

                delete this.node_image;

            }

            if (this.renderer.minimap) {

                this.minimap_circle.fillColor = _color;

                var minipos = this.renderer.toMinimapCoords(_model_coords),

                miniradius = this.renderer.minimap.scale * _baseRadius,

                minisize = new paper.Size([miniradius, miniradius]);

                this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));

            }

            if (!_dontRedrawEdges) {

                var _this = this;

                _.each(

                        this.project.get("edges").filter(

                                function (ed) {

                                    return ((ed.get("to") === _this.model) || (ed.get("from") === _this.model));

                                }

                        ),

                        function(edge, index, list) {

                            var repr = _this.renderer.getRepresentationByModel(edge);

                            if (repr && typeof repr.from_representation !== "undefined" && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") {

                                repr.redraw();

                            }

                        }

                );

            }

        },

        showImage: function() {

            if (typeof this.renderer.image_cache[this.img] === "undefined") {

                var _image = new Image();

                this.renderer.image_cache[this.img] = _image;

                _image.src = this.img;

            } else {

                var _image = this.renderer.image_cache[this.img];

            }

            if (_image.width) {

                if (this.node_image) {

                    this.node_image.remove();

                }

                this.renderer.node_layer.activate();

                var width = _image.width,

                height = _image.height,

                clipPath = this.model.get("clip_path"),

                hasClipPath = (typeof clipPath !== "undefined" && clipPath);

                if (hasClipPath) {

                    var _clip = new paper.Path(),

                    instructions = clipPath.match(/[a-z][^a-z]+/gi) || [],

                    lastCoords = [0,0],

                    minX = Infinity,

                    minY = Infinity,

                    maxX = -Infinity,

                    maxY = -Infinity;

                    var transformCoords = function(tabc, relative) {

                        var newCoords = tabc.slice(1).map(function(v, k) {

                            var res = parseFloat(v),

                            isY = k % 2;

                            if (isY) {

                                res = ( res - .5 ) * height;

                            } else {

                                res = ( res - .5 ) * width;

                            }

                            if (relative) {

                                res += lastCoords[isY];

                            }

                            if (isY) {

                                minY = Math.min(minY, res);

                                maxY = Math.max(maxY, res);

                            } else {

                                minX = Math.min(minX, res);

                                maxX = Math.max(maxX, res);

                            }

                            return res;

                        });

                        lastCoords = newCoords.slice(-2);

                        return newCoords;

                    };

                    instructions.forEach(function(instr) {

                        var coords = instr.match(/([a-z]|[0-9.-]+)/ig) || [""];

                        switch(coords[0]) {

                        case "M":

                            _clip.moveTo(transformCoords(coords));

                            break;

                        case "m":

                            _clip.moveTo(transformCoords(coords, true));

                            break;

                        case "L":

                            _clip.lineTo(transformCoords(coords));

                            break;

                        case "l":

                            _clip.lineTo(transformCoords(coords, true));

                            break;

                        case "C":

                            _clip.cubicCurveTo(transformCoords(coords));

                            break;

                        case "c":

                            _clip.cubicCurveTo(transformCoords(coords, true));

                            break;

                        case "Q":

                            _clip.quadraticCurveTo(transformCoords(coords));

                            break;

                        case "q":

                            _clip.quadraticCurveTo(transformCoords(coords, true));

                            break;

                        }

                    });

                    var baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](maxX - minX, maxY - minY) / 2,

                    centerPoint = new paper.Point((maxX + minX) / 2, (maxY + minY) / 2);

                    if (!this.options.show_node_circles) {

                        this.h_ratio = (maxY - minY) / (2 * baseRadius);

                    }

                } else {

                    var baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](width, height) / 2,

                    centerPoint = new paper.Point(0,0);

                    if (!this.options.show_node_circles) {

                        this.h_ratio = height / (2 * baseRadius);

                    }

                }

                var _raster = new paper.Raster(_image);

                _raster.locked = true; // Disable mouse events on icon

                if (hasClipPath) {

                    _raster = new paper.Group(_clip, _raster);

                    _raster.opacity = .99;

                    /* This is a workaround to allow clipping at group level

                     * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).

                     */

                    _raster.clipped = true;

                    _clip.__representation = this;

                }

                if (this.options.clip_node_images) {

                    var _circleClip = new paper.Path.Circle(centerPoint, baseRadius);

                    _raster = new paper.Group(_circleClip, _raster);

                    _raster.opacity = .99;

                    _raster.clipped = true;

                    _circleClip.__representation = this;

                }

                this.image_delta = centerPoint.divide(baseRadius);

                this.node_image = _raster;

                this.node_image.__representation = _this;

                this.node_image.scale(this.circle_radius / baseRadius);

                this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));