var drawNode = function (ctx, x, y, i, color) {
                var g = window[$(ctx.canvas).attr('id')];
                if(g.vertexStyle == "marked") ctx.fillStyle = color;
                if(g.vertexStyle == "full") ctx.fillStyle = "#000000";
                ctx.beginPath();
                ctx.arc(x, y, 10, 0, Math.PI * 2, true);
                ctx.fill();
                ctx.stroke();
                ctx.fillStyle = "#000000"; 
                ctx.font = "13px Arial";

                var chr = String.fromCharCode(97 + i)
                if (g.displayAlphabet) {
                    ctx.fillText(chr, x-4, y+4);
                } else {
                    ctx.fillText(i, x-4, y+4);  
                }
               
        };

var drawEdge = function (ctx, x0, y0, x1, y1) {
                var g = window[$(ctx.canvas).attr('id')];
                ctx.beginPath();
                var betaS = 0.4;
                var prepona = Math.sqrt(Math.abs(y1-y0)*Math.abs(y1-y0) + Math.abs(x1-x0)*Math.abs(x1-x0));
                
                if(prepona < 20 && g.selfEdges) {
                   var truee = 0;
                   if(x0>x1){var swap = x0; x0 = x1; x1 = swap;
                                 swap = y0; y0 = y1; y1 = swap; truee = 1}
                   ctx.moveTo(x0-7, y0-7);
                   ctx.bezierCurveTo(x0-30, y0-50, x1+30, y1-50, x1+7, y1-7);
                   ctx.stroke(); ctx.closePath(); ctx.beginPath();
                   if(truee){
                      ctx.moveTo(x0-7, y0-7);
                      if (g.bidirectional) ctx.lineTo(x0-7-9, y0-9-5);
                      ctx.arcTo(x0-7, y0-7, x0-9, y0-9-7, 5);
                      ctx.lineTo(x0-7, y0-7);
                      ctx.fill();
                      ctx.stroke();
                      return;}
                   ctx.moveTo(x1+7, y1-7); //asi neni treba
                    // podmienka !
                    if (g.bidirectional) ctx.lineTo(x1+7+9, y1-9-5);
                   ctx.arcTo(x1+7, y1-7, x1+9, y1-9-7, 5);
                   ctx.lineTo(x1+7, y1-7);
                   ctx.fill();
                   ctx.stroke();
                   return;
                }
                if(prepona < 20) return;
                var alfa = 0;
                var beta1 = 0;
                var beta2 = 0;
                var xdlzka = 0;
                var ydlzka = 0;

                if(x0 <= x1) alfa = Math.acos(Math.abs(x1-x0)/prepona);
                if(x0 > x1) alfa = Math.PI - Math.acos(Math.abs(x1-x0)/prepona);   
                beta1 = Math.PI/2 - alfa + betaS;
                beta2 = beta1 -2*betaS;

                prepona = prepona - 10;
                xdlzka = Math.round(Math.cos(alfa)*prepona);
                ydlzka = Math.round(Math.sin(alfa)*Math.abs(prepona));


                x1 = x0 + xdlzka;
                if(y0 >= y1) y1 = y0 - ydlzka;
                if(y0 < y1) y1 = y0 + ydlzka;

                if(y0 < y1){
                   beta1 = beta1 + 2*alfa;
                   beta2 = beta2 + 2*alfa; }
                
                var xMove = Math.round(10 * Math.sin(beta1));
                var yMove = Math.round(10 * Math.cos(beta1));
                ctx.moveTo(x0, y0);
                ctx.lineTo(x1, y1);
                // podmienka !
                if (g.bidirectional) ctx.lineTo(x1 - xMove, y1 + yMove);

                xMove = Math.round(10 * Math.sin(beta2));
                yMove = Math.round(10 * Math.cos(beta2));
                ctx.arcTo(x1, y1, x1-xMove, y1 + yMove, 5);
                ctx.lineTo(x1, y1);

                ctx.lineTo(x0, y0);  //ciara naspat loool

                ctx.stroke();
                ctx.fill();
        };

var contains = function (vertex, x, y) {
                var dx, dy;
                dx = x - vertex.x;
                dy = y - vertex.y;
                return (Math.sqrt(dx * dx + dy * dy) < 10);
        };

var x_grabOffset, y_grabOffset;

var graph = {};
graph.vertices = []; /*DEFAULT atributes of graph*/
graph.bidirectional = true;
graph.displayAlphabet = true;
graph.selfEdges = true;
graph.vertexStyle = "marked";  /*possible values: "marked", "full"*/

        graph.edgelist = function () {
                var i, j, edges = [],
                        e;
                var contains = function (a, e) {
                        var i;
                        for (i = 0; i < a.length; i += 1) {
                                if (a[i].n === e.n && a[i].m === e.m) {
                                        return true;
                                }
                                if (a[i].m === e.n && a[i].n === e.m) {
                                        return true;
                                }
                        }
                        return false;
                };
                for (i = 0; i < this.vertices.length; i += 1) {
                        for (j = 0; j < this.vertices[i].edges.length; j += 1) {
                                e = {
                                        n: i,
                                        m: this.vertices[i].edges[j]
                                };
                                if (!contains(edges, {n: i, m: this.vertices[i].edges[j]})) {
                                        edges.push(e);
                                } else if(!graph.bidirectional) edges.push(e);
                        }
                }
                return edges;
        };

        graph.draw = function (ctx) {
                var i;
                var n, m;
                for (i = 0; i < this.edgelist().length; i += 1) {
                        n = this.vertices[this.edgelist()[i].n];
                        m = this.vertices[this.edgelist()[i].m];
                        drawEdge(ctx, n.x, n.y, m.x, m.y);
                }
                for (i = 0; i < this.vertices.length; i += 1) {
                        n = this.vertices[i];
                        drawNode(ctx, n.x, n.y, i, n.isGrabbed ? 'grey' : 'white');
                }
        };     

        graph.getTarget = function (x, y) {
                var i;
                for (i = 0; i < this.vertices.length; i += 1) {
                        if (contains(this.vertices[i], x, y)) {
                                return this.vertices[i];
                        }
                }
                return undefined;
        };

        $('.graph').mousedown(function () {

                var offset, x, y, circle, target, search, ctx;
                var g = window[$(this).attr('id')];
                offset = $(this).offset();
                x = event.pageX - offset.left;
                y = event.pageY - offset.top;
                target = g.getTarget(x, y);

                if (target !== undefined) {

                        target.isGrabbed = true;

                }

                x_grabOffset = target.x - x;
                y_grabOffset = target.y - y;


                ctx = $(this)[0].getContext("2d");
                ctx.clearRect(0, 0, 800, 500);

                g.draw(ctx);
                //graph1.draw(ctx);

        }).mouseup(function () {
                var g = window[$(this).attr('id')];
                var i;
                for (i = 0; i < g.vertices.length; i += 1) {
                        g.vertices[i].isGrabbed = false;
                }
                ctx = $(this)[0].getContext("2d");
                ctx.clearRect(0, 0, 800, 500);
                g.draw(ctx);

        }).mousemove(function () {
                var g = window[$(this).attr('id')];
                var i, v, grabbed, offset, x, y;
                for (i = 0; i < g.vertices.length; i += 1) {
                        v = g.vertices[i];
                        if (v.isGrabbed && v.isGrabbed === true) {
                                grabbed = v;
                        }
                        if (grabbed !== undefined) {
                                offset = $(this).offset();
                                x = event.pageX - offset.left;
                                y = event.pageY - offset.top;
                                grabbed.x = x - x_grabOffset;
                                grabbed.y = y - y_grabOffset;
                        }
                        ctx = $(this)[0].getContext("2d");
                        ctx.clearRect(0, 0, 800, 500);
                        g.draw(ctx);
                }

        });