Rkns.Renderer = {

    _MARGIN_X: 80,

    _MARGIN_Y: 50,

    _MIN_DRAG_DISTANCE: 2,

    _NODE_RADIUS: 25,

    _NODE_BUTTON_INNER: 26,

    _NODE_BUTTON_OUTER: 60,

    _EDGE_BUTTON_INNER: 1,

    _EDGE_BUTTON_OUTER: 40,

    _NODE_FONT_SIZE: 10,

    _EDGE_FONT_SIZE: 9,

    _NODE_MAX_CHAR: 50,

    _EDGE_MAX_CHAR: 40,

    _ARROW_LENGTH: 16,

    _ARROW_WIDTH: 8,

    _EDITOR_ARROW_LENGTH : 20,

    _EDITOR_ARROW_WIDTH : 40,

    _EDITOR_MARGIN : 15,

    _EDITOR_PADDING : 10,

    _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),

    _CLICKMODE_ADDNODE : 1,

    _CLICKMODE_STARTEDGE : 2,

    _CLICKMODE_ENDEDGE : 3

}

Rkns.Renderer.Utils = {

    drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {

        _selector.css({

            width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),

        })

        var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING,

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

            _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH ),

            _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH + _width ),

            _top = _coords.y - _height / 2;

        if (_top < Rkns.Renderer._EDITOR_MARGIN) {

            _top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );

        }

        var _bottom = _top + _height;

        if (_bottom > (paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN)) {

            _bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );

            _top = _bottom - _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 - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;

        _path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;

        _path.closed = true;

        _path.fillColor = new paper.GradientColor(Rkns.Renderer._EDITOR_GRADIENT, [0,_top], [0, _bottom]);

        _selector.css({

            left: (Rkns.Renderer._EDITOR_PADDING + Math.min(_left, _right)),

            top: (Rkns.Renderer._EDITOR_PADDING + _top)

        });

    },

    sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) {

        var _startRads = _startAngle * Math.PI / 180,

            _endRads = _endAngle * Math.PI / 180,

            _img = new Image(),

            _span = _endRads - _startRads,

            _k = .0879 * _span,

            _kin = _k * _inR,

            _kout = _k * _outR,

            _startdx = - Math.sin(_startRads),

            _startdy = Math.cos(_startRads),

            _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,

            _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,

            _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,

            _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,

            _enddx = - Math.sin(_endRads),

            _enddy = Math.cos(_endRads),

            _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,

            _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,

            _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,

            _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,

            _centerR = (_inR + _outR)/2,

            _centerRads = (_startRads + _endRads) / 2,

            _centerX = Math.cos(_centerRads) * _centerR,

            _centerY = Math.sin(_centerRads) * _centerR,

            _textX = Math.cos(_centerRads) * (_outR + 3),

            _textY = Math.sin(_centerRads) * (_outR + 3),

            _segments = [];

        _segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]);

        for (var i = 1; i < 4; i++) {

            var _rads = i * _span / 4 + _startRads,

                _dx = - Math.sin(_rads),

                _dy = Math.cos(_rads),

                _x = Math.cos(_rads) * _inR,

                _y = Math.sin(_rads) * _inR;

            _segments.push([[_x, _y], [ - _kin * _dx, - _kin * _dy], [ _kin * _dx, _kin * _dy ]]);

        }

        _segments.push([[_endXIn, _endYIn], [ - _kin * _enddx, - _kin * _enddy ], [0,0]]);

        _segments.push([[_endXOut, _endYOut], [ 0,0 ], [ - _kout * _enddx, - _kout * _enddy ]]);

        for (var i = 3; i > 0; i--) {

            var _rads = i * _span / 4 + _startRads,

                _dx = - Math.sin(_rads),

                _dy = Math.cos(_rads),

                _x = Math.cos(_rads) * _outR,

                _y = Math.sin(_rads) * _outR;

            _segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]);

        }

        _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);

        var _path = new paper.Path();

        _path.add.apply(_path, _segments);

        _path.fillColor = "#333333";

        _path.opacity = .5;

        _path.closed = true;

        _path.__representation = _repr;

        if (_textX >= -2 && _textX <= 2) {

            if (_textY > 0) {

                _textY += 6;

            }

        }

        var _text = new paper.PointText(_textX,_textY);

        _text.characterStyle = {

            fontSize: 9,

            fillColor: '#c000c0'

        };

        if (_textX > 2) {

            _text.paragraphStyle.justification = 'left';

        } else if (_textX < -2) {

            _text.paragraphStyle.justification = 'right';

        } else {

            _text.paragraphStyle.justification = 'center';

        }

        _text.visible = false;

        var _visible = false,

            _restPos = new paper.Point(-200, -200),

            _grp = new paper.Group([_path, _text]),

            _delta = _grp.position,

            _imgdelta = new paper.Point([_centerX, _centerY]),

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

        _text.content = _caption;

        _grp.visible = false;

        _grp.position = _restPos;

        var _res = {

            show: function() {

                _visible = true;

                _grp.position = _currentPos.add(_delta);

                _grp.visible = true;

            },

            moveTo: function(_point) {

                _currentPos = _point;

                if (_visible) {

                    _grp.position = _point.add(_delta);

                }

            },

            hide: function() {

                _visible = false;

                _grp.visible = false;

                _grp.position = _restPos;

            },

            select: function() {

                _path.opacity = .8;

                _text.visible = true;

            },

            unselect: function() {

                _path.opacity = .5;

                _text.visible = false;

            },

            destroy: function() {

                _grp.remove();

            }

        }

        _img.onload = function() {

            var _h = _img.height;

            var _raster = new paper.Raster(_img);

            _raster.position = _imgdelta.add(_grp.position).subtract(_delta);

            _grp.addChild(_raster);

        }

        _img.src = _imgsrc;

        return _res

    }

}

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

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

        this.renderer = _renderer;

        this.project = _renderer.renkan.project;

        this.model = _model;

        if (this.model) {

            var _this = this;

            this._changeBinding = function() {

                _this.redraw();

            }

            this._removeBinding = function() {

                _renderer.removeRepresentation(_this);

                _renderer.redraw();

            }

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

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

        }

    }

}

Rkns.Renderer._BaseRepresentation.prototype.super = function(_func) {

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

}

Rkns.Renderer._BaseRepresentation.prototype.select = function() {}

Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}

Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {}

Rkns.Renderer._BaseRepresentation.prototype.unhighlight = function() {}

Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}

Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {

    if (this.model) {

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

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

    }

}

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

Rkns.Renderer.Node.prototype._init = function() {

    this.renderer.node_layer.activate();

    this.type = "Node";

    this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);

    this.circle.fillColor = '#ffffff';

    this.circle.__representation = this;

    this.title = new paper.PointText([0,0]);

    this.title.characterStyle = {

        fontSize: Rkns.Renderer._NODE_FONT_SIZE,

        fillColor: 'black'

    };

    this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);

    this.edit_button.node_representation = this;

    this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);

    this.remove_button.node_representation = this;

    this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);

    this.link_button.node_representation = this;

    this.title.paragraphStyle.justification = 'center';

}

Rkns.Renderer.Node.prototype.redraw = function() {

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

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

    this.circle.position = this.paper_coords;

    this.title.content = this.model.get("title");

    this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);

    this.circle.strokeColor = this.model.get("created_by").get("color");

    this.edit_button.moveTo(this.paper_coords);

    this.remove_button.moveTo(this.paper_coords);

    this.link_button.moveTo(this.paper_coords);

    var _img = this.model.get("image");

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

        var _image = new Image(),

            _this = this;

        _image.onload = function() {

            if (_this.node_image) {

                _this.node_image.remove();

            }

            _this.renderer.node_layer.activate();

            var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );

            var _raster = new paper.Raster(_image);

            var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);

            _raster.scale(_ratio);

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

            _this.node_image.opacity = .9;

            /* 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).

            */

            _this.node_image.clipped = true;

            _this.node_image.position = _this.paper_coords;