/* paper-renderer.js */

(function(root) {

"use strict";

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);

        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;

        }