Rkns.Renderer = {

    _MINIMAP_MARGIN: 20,

    _MIN_DRAG_DISTANCE: 2,

    _NODE_BUTTON_WIDTH: 40,

    _EDGE_BUTTON_INNER: 2,

    _EDGE_BUTTON_OUTER: 40,

    _CLICKMODE_ADDNODE : 1,

    _CLICKMODE_STARTEDGE : 2,

    _CLICKMODE_ENDEDGE : 3,

    _IMAGE_MAX_KB : 500,

    _NODE_SIZE_STEP: Math.LN2/4,

    _MIN_SCALE: 1/20,

    _MAX_SCALE: 20,

    _AUTOSCALE_MARGIN: 50,

    _USER_PLACEHOLDER : function(_renkan) {

    	return {

    		color: _renkan.options.default_user_color,

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

	        get: function(attr) {

	            return this[attr] || false;

	        }

    	}

    },

    _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);})();"

    }

}

Rkns.Renderer.Utils = {

	shortenText : function(_text, _maxlength) {

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

	},

    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 < _options.tooltip_margin) {

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

        }

        var _bottom = _top + _height;

        if (_bottom > (paper.view.size.height - _options.tooltip_margin)) {

            _bottom = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_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 - _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;

    },

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

        var _options = _repr.renderer.renkan.options,

        	_startRads = _startAngle * Math.PI / 180,

            _endRads = _endAngle * Math.PI / 180,

            _img = new Image(),

            _span = _endRads - _startRads,

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

            _centerXIn = Math.cos(_centerRads) * _inR,

            _centerXOut = Math.cos(_centerRads) * _outR,

            _centerYIn = Math.sin(_centerRads) * _inR,

            _centerYOut = Math.sin(_centerRads) * _outR,

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

            _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2,

            _segments = [];

    	_repr.renderer.buttons_layer.activate();

        var _path = new paper.Path();

        _path.add([_startXIn, _startYIn]);

        _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);

        _path.lineTo([_endXOut,  _endYOut]);

        _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);

        _path.fillColor = _options.buttons_background;

        _path.opacity = .5;

        _path.closed = true;

        _path.__representation = _repr;

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

        _text.characterStyle = {

            fontSize: _options.buttons_label_font_size,

            fillColor: _options.buttons_label_color

        };

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

            _repr.renderer.throttledPaperDraw();

        }

        _img.src = _imgsrc;

        return _res

    }

}

Rkns.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.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.redraw = function() {}

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

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

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

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

Rkns.Renderer._BaseButton.prototype.moveTo = function(_pos) {

    this.sector.moveTo(_pos);

}

Rkns.Renderer._BaseButton.prototype.show = function() {

    this.sector.show();

}

Rkns.Renderer._BaseButton.prototype.hide = function() {

    this.sector.hide();

}

Rkns.Renderer._BaseButton.prototype.select = function() {

    this.sector.select();

}

Rkns.Renderer._BaseButton.prototype.unselect = function(_newTarget) {

    this.sector.unselect();

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

        this.source_representation.unselect();

    }

}

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

    this.sector.destroy();

}

/* */

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], 1);

    this.circle.__representation = this;

    this.circle.fillColor = this.options.node_fill_color;

    if (this.options.show_node_circles) {

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

	    this.h_ratio = 1;

    } else {

    	this.circle.opacity = .01;

    	this.h_ratio = 0;

    }

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

    this.title.characterStyle = {

        font: this.options.node_label_font,

        fontSize: this.options.node_label_font_size,

        fillColor: this.options.node_label_color

    };

    if (this.options.editor_mode) {

    	this.buttons = [

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

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

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

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

    		new Rkns.Renderer.NodeShrinkButton(this.renderer, null)

    	];

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