--- a/client/js/renderer/edge.js	Wed May 20 10:36:37 2015 +0200
+++ b/client/js/renderer/edge.js	Wed May 20 10:39:35 2015 +0200
@@ -13,6 +13,8 @@
         _init: function() {
             this.renderer.edge_layer.activate();
             this.type = "Edge";
+            this.hidden = false;
+            this.ghost = false;
             this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
             this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
             this.bundle = this.renderer.addToBundles(this);
@@ -58,12 +60,14 @@
         redraw: function() {
             var from = this.model.get("from"),
             to = this.model.get("to");
-            if (!from || !to) {
+            if (!from || !to || (this.hidden && !this.ghost)) {
                 return;
             }
             this.from_representation = this.renderer.getRepresentationByModel(from);
             this.to_representation = this.renderer.getRepresentationByModel(to);
-            if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined") {
+            if (typeof this.from_representation === "undefined" || typeof this.to_representation === "undefined" ||
+                    (this.from_representation.hidden && !this.from_representation.ghost)||
+                    (this.to_representation.hidden && !this.to_representation.ghost)){
                 return;
             }
             var _p0a = this.from_representation.paper_coords,
@@ -105,7 +109,7 @@
 
             this.paper_coords = _p0b.add(_p1b).divide(2);
             this.line.strokeColor = _color;
-            this.line.opacity = opacity;
+            this.line.opacity = this.ghost ? 0.3 : opacity;
             this.line.segments[0].point = _p0a;
             this.line.segments[1].point = this.paper_coords;
             this.line.segments[1].handleIn = _handle.multiply(-1);
@@ -113,7 +117,7 @@
             this.line.segments[2].point = _p1a;
             this.arrow.rotate(_a - this.arrow_angle);
             this.arrow.fillColor = _color;
-            this.arrow.opacity = opacity;
+            this.arrow.opacity = this.ghost ? 0.3 : opacity;
             this.arrow.position = this.paper_coords;
             this.arrow_angle = _a;
             if (_a > 90) {
@@ -134,7 +138,7 @@
                 transform: "rotate(" + _a + "deg)",
                 "-moz-transform": "rotate(" + _a + "deg)",
                 "-webkit-transform": "rotate(" + _a + "deg)",
-                opacity: opacity
+                opacity: this.ghost ? 0.3 : opacity
             });
             this.text_angle = _a;
 
@@ -149,6 +153,36 @@
                 this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get("position")));
             }
         },
+        hide: function(){
+            this.hidden = true;
+            this.ghost = false;
+            
+            this.text.hide();
+            this.line.visible = false;
+            this.arrow.visible = false;
+            this.minimap_line.visible = false;
+        },
+        show: function(ghost){
+            this.ghost = ghost;
+            if (this.ghost){
+                this.text.css('opacity', 0.3);
+                this.line.opacity = 0.3;
+                this.arrow.opacity = 0.3;
+                this.minimap_line.opacity = 0.3;
+            }else{
+                this.hidden = false;
+                
+                this.text.css('opacity', 1);
+                this.line.opacity = 1;
+                this.arrow.opacity = 1;
+                this.minimap_line.opacity = 1;
+            }
+            this.text.show();
+            this.line.visible = true;
+            this.arrow.visible = true;
+            this.minimap_line.visible = true;
+            this.redraw();
+        },
         openEditor: function() {
             this.renderer.removeRepresentationsOfType("editor");
             var _editor = this.renderer.addRepresentation("EdgeEditor",null);