var Renderer = function(canvas)
{
    var canvas = $(canvas).get(0);
    var ctx = canvas.getContext("2d");
    var particleSystem;

    function draw_line(a, b, color, width){

        color = color || "rgba(0,0,0, .555)";
        width = width || 1;

        if(width > 1 ){width = Math.floor(Math.log(width) * 1.5)};
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineWidth =  width;
        ctx.moveTo(a.x, a.y);
        ctx.lineTo(b.x, b.y);
        ctx.stroke();
    }

//    var selected_items = [{src: 'v1', dst: 'v2'}, {src: 'v2', dst: 'v3'}, {src: 'v3', dst: 'v4'}];
    var selected_items = [];
    var selected_change = true;

    var that = {

            init:function(system){
            //начальная инициализация
            particleSystem = system;
            particleSystem.screenSize(canvas.width, canvas.height);
            particleSystem.screenPadding(80);
            that.initMouseHandling();
        },

        selector: function(){

            if(selected_change){
               selected_items.forEach(
                  function(item){
                        var edge = particleSystem.getEdges( item.src, item.dst )[0] || particleSystem.getEdges( item.dst, item.src )[0]  ;
                        edge.data.selected = true;
            });

            selected_change = false;
          }

        },


        add_selected_edge: function(pt1, pt2){

            selected_change = true;
            selected_items.push({src: pt1, dst: pt2});
        },

        remove_selected_edge: function(pt1, pt2){

            selected_items.splice(selected_items.indexOf({ src: pt1, dst: pt2 }));
            selected_change = true;
        },

        redraw:function(){
            //действия при перересовке
            ctx.fillStyle = "white";
            ctx.fillRect(0,0, canvas.width, canvas.height);

            that.selector();

            particleSystem.eachEdge( //отрисуем каждую грань

                function(edge, pt1, pt2){ //будем работать с гранями и точками её начала и конца

                    if(edge.data.selected){
                        draw_line(pt1, pt2, "red", 10);
                    }
                    else{
                        draw_line(pt1, pt2, "rgba(0,0,0, .444)", edge.data.weigh);
                    }

        // подписываем грани
                    ctx.fillStyle = "blue";
                    ctx.font = 'italic 13px Helvetica';
                    ctx.fillText (edge.data.weigh, (pt1.x + pt2.x) / 2 + 15, (pt1.y + pt2.y) / 2 + 15);
                });

            particleSystem.eachNode( //теперь каждую вершину
                function(node, pt){  //получаем вершину и точку где она
                    var w = 15;   //ширина квадрата
                    ctx.fillStyle = "orange";
                    ctx.fillRect(pt.x-w/2, pt.y-w/2, w,w);
                    ctx.fillStyle = "black";
                    ctx.font = 'bold 14px Helvetica';
                    ctx.fillText (node.name, pt.x+15, pt.y+15); //пишем имя у каждой точки
                });
        },

        initMouseHandling:function(){ //события с мышью
            var dragged = null;   //вершина которую перемещают
            var handler = {
                clicked:function(e){ //нажали
                    var pos = $(canvas).offset(); //получаем позицию canvas
                    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); //и позицию нажатия кнопки относительно canvas
                    dragged = particleSystem.nearest(_mouseP); //определяем ближайшую вершину к нажатию
                    if (dragged && dragged.node !== null){
                        dragged.node.fixed = true; //фиксируем её
                    }
                    $(canvas).bind('mousemove', handler.dragged); //слушаем события перемещения мыши
                    $(window).bind('mouseup', handler.dropped);  //и отпускания кнопки
                    return false;
                },
                dragged:function(e){ //перетаскиваем вершину
                    var pos = $(canvas).offset();
                    var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);

                    if (dragged && dragged.node !== null){
                        var p = particleSystem.fromScreen(s);
                        dragged.node.p = p; //тянем вершину за нажатой мышью
                    }

                    return false;
                },
                dropped:function(e){ //отпустили
                    if (dragged===null || dragged.node===undefined) return; //если не перемещали, то уходим
                    if (dragged.node !== null) dragged.node.fixed = false; //если перемещали - отпускаем
                    dragged = null; //очищаем
                    $(canvas).unbind('mousemove', handler.dragged); //перестаём слушать события
                    $(window).unbind('mouseup', handler.dropped);
                    mouseP = null;
                    return false;
                }
            }
            // слушаем события нажатия мыши
            $(canvas).mousedown(handler.clicked);
        }
    }
    return that;


}