define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation', 'renderer/shapebuilder'], function ($, _, requtils, BaseRepresentation, ShapeBuilder) {

    'use strict';

    var Utils = requtils.getUtils();

    /* 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 = Utils.inherit(Renderer._BaseRepresentation);

    var NodeRepr = Utils.inherit(BaseRepresentation);

    _(NodeRepr.prototype).extend({

        _init: function() {

            this.renderer.node_layer.activate();

            this.type = "Node";

            this.buildShape();

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

                var Renderer = requtils.getRenderer();

                this.normal_buttons = [

                                       new Renderer.NodeEditButton(this.renderer, null),

                                       new Renderer.NodeRemoveButton(this.renderer, null),

                                       new Renderer.NodeLinkButton(this.renderer, null),

                                       new Renderer.NodeEnlargeButton(this.renderer, null),

                                       new Renderer.NodeShrinkButton(this.renderer, null)

                                       ];

                this.pending_delete_buttons = [

                                               new Renderer.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);

            }

        },

        buildShape: function(){

            if( 'shape' in this.model.changed ) {

                delete this.img;

            }

            if(this.circle){

                this.circle.remove();

                delete this.circle;

            }

            // "circle" "rectangle" "ellipse" "polygon" "star" "diamond"

            this.shapeBuilder = new ShapeBuilder(this.model.get("shape"));

            this.circle = this.shapeBuilder.getShape();

            this.circle.__representation = this;

            this.circle.sendToBack();

            this.last_circle_radius = 1;

        },

        redraw: function(options) {

            if( 'shape' in this.model.changed && 'change' in options && options.change ) {

            //if( 'shape' in this.model.changed ) {

                this.buildShape();

            }

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

                _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Utils._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();

                });

                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;

            var opacity = 1;

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

                opacity = 0.5;

                this.active_buttons = this.pending_delete_buttons;

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

            } else {

                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 * 0.5 : (opacity - 0.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 : 0.01;

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

            _text = Utils.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

            });

            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.circle) {

                    this.circle.sendToBack();

                }

            }

            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 (typeof options === 'undefined' || !('dontRedrawEdges' in options) || !options.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() {

            var _image = null;

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

                _image = new Image();

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

                _image.src = this.img;

            } else {

                _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),

                    _clip = null,

                    baseRadius = null,

                    centerPoint = null;

                if (hasClipPath) {

                    _clip = new paper.Path();

                    var 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 - 0.5 ) * height;

                            } else {

                                res = ( res - 0.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;

                        }

                    });

                    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 {

                    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 = 0.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 = this.shapeBuilder.getImageShape(centerPoint, baseRadius);

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

                    _raster.opacity = 0.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));

                this.node_image.insertAbove(this.circle);

            } else {

                var _this = this;

                $(_image).on("load", function() {