stemmaweb/root/js/relationship.js

   1 var MARGIN=30;
   2 var svg_root = null;
   3 var svg_root_element = null;
   4 var start_element_height = 0;
   5 var reltypes = {};
   6
   7 function getTextPath() {
   8     var currpath = window.location.pathname;
   9     // Get rid of trailing slash
  10     if( currpath.lastIndexOf('/') == currpath.length - 1 ) {
  11         currpath = currpath.slice( 0, currpath.length - 1)
  12     };
  13     // Get rid of query parameters
  14     if( currpath.lastIndexOf('?') != -1 ) {
  15         currpath = currpath.slice( 0, currpath.lastIndexOf('?') );
  16     };
  17     var path_elements = currpath.split('/');
  18     var textid = path_elements.pop();
  19     var basepath = path_elements.join( '/' );
  20     var path_parts = [ basepath, textid ];
  21     return path_parts;
  22 }
  23
  24 function getRelativePath() {
  25         var path_parts = getTextPath();
  26         return path_parts[0];
  27 }
  28
  29 function getRelationshipURL() {
  30         var path_parts = getTextPath();
  31         return path_parts[0] + '/' + path_parts[1] + '/relationships';
  32 }
  33
  34 function svgEnlargementLoaded() {
  35         //Give some visual evidence that we are working
  36         $('#loading_overlay').show();
  37         lo_height = $("#enlargement_container").outerHeight();
  38         lo_width = $("#enlargement_container").outerWidth();
  39         $("#loading_overlay").height( lo_height );
  40         $("#loading_overlay").width( lo_width );
  41         $("#loading_overlay").offset( $("#enlargement_container").offset() );
  42         $("#loading_message").offset(
  43                 { 'top': lo_height / 2 - $("#loading_message").height() / 2,
  44                   'left': lo_width / 2 - $("#loading_message").width() / 2 });
  45     //Set viewbox widht and height to widht and height of $('#svgenlargement svg').
  46     $('#update_workspace_button').data('locked', false);
  47     $('#update_workspace_button').css('background-position', '0px 44px');
  48     //This is essential to make sure zooming and panning works properly.
  49     $('#svgenlargement ellipse').attr( {stroke:'green', fill:'#b3f36d'} );
  50     var graph_svg = $('#svgenlargement svg');
  51     var svg_g = $('#svgenlargement svg g')[0];
  52     if (!svg_g) return;
  53     svg_root = graph_svg.svg().svg('get').root();
  54
  55     // Find the real root and ignore any text nodes
  56     for (i = 0; i < svg_root.childNodes.length; ++i) {
  57         if (svg_root.childNodes[i].nodeName != '#text') {
  58                 svg_root_element = svg_root.childNodes[i];
  59                 break;
  60            }
  61     }
  62
  63     // This might be a little application specific and should be pushed to the backend
  64     // but... This collapes corrector hands when they agree with the original
  65     // e.g., P46-*,P46-C becomes simply P46
  66     $(svg_root).find('text').each(function () {
  67                 var t = $(this).text();
  68                 var ws = t.split(',');
  69                 for (i = 0; i < ws.length; ++i) {
  70                         if (ws[i].indexOf('-*')> -1) {
  71                                 var collapse = false;
  72                                 var main = $.trim(ws[i].substring(0,ws[i].indexOf('-')));
  73                                 for (j = 0; j < ws.length; ++j) {
  74                                         if (i != j && ws[j].indexOf('-')> -1) {
  75                                                 var pair = $.trim(ws[j].substring(0,ws[j].indexOf('-')));
  76                                                 if (main == pair) {
  77                                                         collapse = true;
  78                                                         ws[j] = '';
  79                                                 }
  80                                         }
  81                                 }
  82                                 if (collapse) ws[i] = main;
  83                         }
  84                 }
  85                 t = '';
  86                 for (i = 0; i < ws.length; ++i) {
  87                         if (ws[i].length) {
  88                                 if (t.length>0) t+=', ';
  89                                 t+=ws[i];
  90                         }
  91                 }
  92                 $(this).text(t);
  93         });
  94
  95     svg_root.viewBox.baseVal.width = graph_svg.attr( 'width' );
  96     svg_root.viewBox.baseVal.height = graph_svg.attr( 'height' );
  97     //Now set scale and translate so svg height is about 150px and vertically centered in viewbox.
  98     //This is just to create a nice starting enlargement.
  99     var initial_svg_height = 250;
 100     var scale = initial_svg_height/graph_svg.attr( 'height' );
 101     var additional_translate = (graph_svg.attr( 'height' ) - initial_svg_height)/(2*scale);
 102     var transform = svg_g.getAttribute('transform');
 103     var translate = parseFloat( transform.match( /translate\([^\)]*\)/ )[0].split('(')[1].split(' ')[1].split(')')[0] );
 104     translate += additional_translate;
 105     var transform = 'rotate(0) scale(' + scale + ') translate(4 ' + translate + ')';
 106     svg_g.setAttribute('transform', transform);
 107     //used to calculate min and max zoom level:
 108     start_element_height = $("#svgenlargement .node title:contains('START#')").siblings('ellipse')[0].getBBox().height;
 109     add_relations( function() { $('#loading_overlay').hide(); });
 110 }
 111
 112 function add_relations( callback_fn ) {
 113         var basepath = getRelativePath();
 114         var textrelpath = getRelationshipURL();
 115     $.getJSON( basepath + '/definitions', function(data) {
 116         var rel_types = data.types.sort();
 117         $.getJSON( textrelpath,
 118         function(data) {
 119             $.each(data, function( index, rel_info ) {
 120                 var type_index = $.inArray(rel_info.type, rel_types);
 121                 var source_found = get_ellipse( rel_info.source );
 122                 var target_found = get_ellipse( rel_info.target );
 123                 if( type_index != -1 && source_found.size() && target_found.size() ) {
 124                     var relation = relation_manager.create( rel_info.source, rel_info.target, type_index );
 125                     relation.data( 'type', rel_info.type );
 126                     relation.data( 'scope', rel_info.scope );
 127                     relation.data( 'note', rel_info.note );
 128                     var node_obj = get_node_obj(rel_info.source);
 129                     node_obj.set_draggable( false );
 130                     node_obj.ellipse.data( 'node_obj', null );
 131                     node_obj = get_node_obj(rel_info.target);
 132                     node_obj.set_draggable( false );
 133                     node_obj.ellipse.data( 'node_obj', null );
 134                 }
 135             });
 136             callback_fn.call();
 137         });
 138     });
 139 }
 140
 141 function get_ellipse( node_id ) {
 142   return $('#svgenlargement .node').children('title').filter( function(index) {
 143     return $(this).text() == node_id;
 144   }).siblings('ellipse');
 145 }
 146
 147 function get_node_obj( node_id ) {
 148     var node_ellipse = get_ellipse( node_id );
 149     if( node_ellipse.data( 'node_obj' ) == null ) {
 150         node_ellipse.data( 'node_obj', new node_obj(node_ellipse) );
 151     };
 152     return node_ellipse.data( 'node_obj' );
 153 }
 154
 155 function get_edge( edge_id ) {
 156   return $('#svgenlargement .edge').filter( function(index) {
 157     return $(this).children( 'title' ).text() == $('<div/>').html(edge_id).text() ;
 158   });
 159 }
 160
 161 function node_obj(ellipse) {
 162   this.ellipse = ellipse;
 163   var self = this;
 164
 165   this.x = 0;
 166   this.y = 0;
 167   this.dx = 0;
 168   this.dy = 0;
 169   this.node_elements = node_elements_for(self.ellipse);
 170
 171   this.get_id = function() {
 172     return self.ellipse.siblings('title').text()
 173   }
 174
 175   this.set_draggable = function( draggable ) {
 176     if( draggable ) {
 177       $(self.ellipse).attr( {stroke:'black', fill:'#fff'} );
 178       $(self.ellipse).parent().mousedown( this.mousedown_listener );
 179       $(self.ellipse).parent().hover( this.enter_node, this.leave_node );
 180       self.ellipse.siblings('text').attr('class', 'noselect draggable');
 181     } else {
 182       self.ellipse.siblings('text').attr('class', '');
 183       $(self.ellipse).parent().unbind('mouseenter').unbind('mouseleave').unbind('mousedown');
 184       $(self.ellipse).attr( {stroke:'green', fill:'#b3f36d'} );
 185     }
 186   }
 187
 188   this.mousedown_listener = function(evt) {
 189     evt.stopPropagation();
 190     self.x = evt.clientX;
 191     self.y = evt.clientY;
 192     $('body').mousemove( self.mousemove_listener );
 193     $('body').mouseup( self.mouseup_listener );
 194     $(self.ellipse).parent().unbind('mouseenter').unbind('mouseleave')
 195     self.ellipse.attr( 'fill', '#ff66ff' );
 196     first_node_g_element = $("#svgenlargement g .node" ).filter( ":first" );
 197     if( first_node_g_element.attr('id') !== self.get_g().attr('id') ) { self.get_g().insertBefore( first_node_g_element ) };
 198   }
 199
 200   this.mousemove_listener = function(evt) {
 201     self.dx = (evt.clientX - self.x) / mouse_scale;
 202     self.dy = (evt.clientY - self.y) / mouse_scale;
 203     self.move_elements();
 204     evt.returnValue = false;
 205     evt.preventDefault();
 206     return false;
 207   }
 208
 209   this.mouseup_listener = function(evt) {
 210     if( $('ellipse[fill="#ffccff"]').size() > 0 ) {
 211         var source_node_id = self.ellipse.siblings('title').text();
 212         var source_node_text = self.ellipse.siblings('text').text();
 213         var target_node_id = $('ellipse[fill="#ffccff"]').siblings("title").text();
 214         var target_node_text = $('ellipse[fill="#ffccff"]').siblings("text").text();
 215         $('#source_node_id').val( source_node_id );
 216         $('#source_node_text').val( source_node_text );
 217         $('#target_node_id').val( target_node_id );
 218         $('#target_node_text').val( target_node_text );
 219         $('#dialog-form').dialog( 'open' );
 220     };
 221     $('body').unbind('mousemove');
 222     $('body').unbind('mouseup');
 223     self.ellipse.attr( 'fill', '#fff' );
 224     $(self.ellipse).parent().hover( self.enter_node, self.leave_node );
 225     self.reset_elements();
 226   }
 227
 228   this.cpos = function() {
 229     return { x: self.ellipse.attr('cx'), y: self.ellipse.attr('cy') };
 230   }
 231
 232   this.get_g = function() {
 233     return self.ellipse.parent('g');
 234   }
 235
 236   this.enter_node = function(evt) {
 237     self.ellipse.attr( 'fill', '#ffccff' );
 238   }
 239
 240   this.leave_node = function(evt) {
 241     self.ellipse.attr( 'fill', '#fff' );
 242   }
 243
 244   this.greyout_edges = function() {
 245       $.each( self.node_elements, function(index, value) {
 246         value.grey_out('.edge');
 247       });
 248   }
 249
 250   this.ungreyout_edges = function() {
 251       $.each( self.node_elements, function(index, value) {
 252         value.un_grey_out('.edge');
 253       });
 254   }
 255
 256   this.move_elements = function() {
 257     $.each( self.node_elements, function(index, value) {
 258       value.move(self.dx,self.dy);
 259     });
 260   }
 261
 262   this.reset_elements = function() {
 263     $.each( self.node_elements, function(index, value) {
 264       value.reset();
 265     });
 266   }
 267
 268   this.update_elements = function() {
 269       self.node_elements = node_elements_for(self.ellipse);
 270   }
 271
 272   self.set_draggable( true );
 273 }
 274
 275 function svgshape( shape_element ) {
 276   this.shape = shape_element;
 277   this.move = function(dx,dy) {
 278     this.shape.attr( "transform", "translate(" + dx + " " + dy + ")" );
 279   }
 280   this.reset = function() {
 281     this.shape.attr( "transform", "translate( 0, 0 )" );
 282   }
 283   this.grey_out = function(filter) {
 284       if( this.shape.parent(filter).size() != 0 ) {
 285           this.shape.attr({'stroke':'#e5e5e5', 'fill':'#e5e5e5'});
 286       }
 287   }
 288   this.un_grey_out = function(filter) {
 289       if( this.shape.parent(filter).size() != 0 ) {
 290         this.shape.attr({'stroke':'#000000', 'fill':'#000000'});
 291       }
 292   }
 293 }
 294
 295 function svgpath( path_element, svg_element ) {
 296   this.svg_element = svg_element;
 297   this.path = path_element;
 298   this.x = this.path.x;
 299   this.y = this.path.y;
 300   this.move = function(dx,dy) {
 301     this.path.x = this.x + dx;
 302     this.path.y = this.y + dy;
 303   }
 304   this.reset = function() {
 305     this.path.x = this.x;
 306     this.path.y = this.y;
 307   }
 308   this.grey_out = function(filter) {
 309       if( this.svg_element.parent(filter).size() != 0 ) {
 310           this.svg_element.attr('stroke', '#e5e5e5');
 311           this.svg_element.siblings('text').attr('fill', '#e5e5e5');
 312           this.svg_element.siblings('text').attr('class', 'noselect');
 313       }
 314   }
 315   this.un_grey_out = function(filter) {
 316       if( this.svg_element.parent(filter).size() != 0 ) {
 317           this.svg_element.attr('stroke', '#000000');
 318           this.svg_element.siblings('text').attr('fill', '#000000');
 319           this.svg_element.siblings('text').attr('class', '');
 320       }
 321   }
 322 }
 323
 324 function node_elements_for( ellipse ) {
 325   node_elements = get_edge_elements_for( ellipse );
 326   node_elements.push( new svgshape( ellipse.siblings('text') ) );
 327   node_elements.push( new svgshape( ellipse ) );
 328   return node_elements;
 329 }
 330
 331 function get_edge_elements_for( ellipse ) {
 332   edge_elements = new Array();
 333   node_id = ellipse.siblings('title').text();
 334   edge_in_pattern = new RegExp( node_id + '$' );
 335   edge_out_pattern = new RegExp( '^' + node_id );
 336   $.each( $('#svgenlargement .edge,#svgenlargement .relation').children('title'), function(index) {
 337     title = $(this).text();
 338     if( edge_in_pattern.test(title) ) {
 339         polygon = $(this).siblings('polygon');
 340         if( polygon.size() > 0 ) {
 341             edge_elements.push( new svgshape( polygon ) );
 342         }
 343         path_segments = $(this).siblings('path')[0].pathSegList;
 344         edge_elements.push( new svgpath( path_segments.getItem(path_segments.numberOfItems - 1), $(this).siblings('path') ) );
 345     }
 346     if( edge_out_pattern.test(title) ) {
 347       path_segments = $(this).siblings('path')[0].pathSegList;
 348       edge_elements.push( new svgpath( path_segments.getItem(0), $(this).siblings('path') ) );
 349     }
 350   });
 351   return edge_elements;
 352 }
 353
 354 function relation_factory() {
 355     var self = this;
 356     this.color_memo = null;
 357     //TODO: colors hard coded for now
 358     this.temp_color = '#FFA14F';
 359     this.relation_colors = [ "#5CCCCC", "#67E667", "#F9FE72", "#6B90D4", "#FF7673", "#E467B3", "#AA67D5", "#8370D8", "#FFC173" ];
 360
 361     this.create_temporary = function( source_node_id, target_node_id ) {
 362         var relation = $('#svgenlargement .relation').filter( function(index) {
 363             var relation_id = $(this).children('title').text();
 364             if( ( relation_id == ( source_node_id + '->' + target_node_id ) ) || ( relation_id == ( target_node_id + '->' + source_node_id ) ) ) {
 365                 return true;
 366             }
 367         } );
 368         if( relation.size() == 0 ) {
 369             draw_relation( source_node_id, target_node_id, self.temp_color );
 370         } else {
 371             self.color_memo = relation.children('path').attr( 'stroke' );
 372             relation.children('path').attr( 'stroke', self.temp_color );
 373         }
 374     }
 375     this.remove_temporary = function() {
 376         var path_element = $('#svgenlargement .relation').children('path[stroke="' + self.temp_color + '"]');
 377         if( self.color_memo != null ) {
 378             path_element.attr( 'stroke', self.color_memo );
 379             self.color_memo = null;
 380         } else {
 381             var temporary = path_element.parent('g').remove();
 382             temporary.empty();
 383             temporary = null;
 384         }
 385     }
 386     this.create = function( source_node_id, target_node_id, color_index ) {
 387         //TODO: Protect from (color_)index out of bound..
 388         var relation_color = self.relation_colors[ color_index ];
 389         var relation = draw_relation( source_node_id, target_node_id, relation_color );
 390         get_node_obj( source_node_id ).update_elements();
 391         get_node_obj( target_node_id ).update_elements();
 392         return relation;
 393     }
 394     this.toggle_active = function( relation_id ) {
 395         var relation = $("#svgenlargement .relation:has(title:contains('" + relation_id + "'))");
 396         var relation_path = relation.children('path');
 397         if( !relation.data( 'active' ) ) {
 398             relation_path.css( {'cursor':'pointer'} );
 399             relation_path.mouseenter( function(event) {
 400                 outerTimer = setTimeout( function() {
 401                     timer = setTimeout( function() {
 402                         var title = relation.children('title').text();
 403                         var source_node_id = title.substring( 0, title.indexOf( "->" ) );
 404                         var target_node_id = title.substring( (title.indexOf( "->" ) + 2) );
 405                         $('#delete_source_node_id').val( source_node_id );
 406                         $('#delete_target_node_id').val( target_node_id );
 407                         self.showinfo(relation);
 408                     }, 500 )
 409                 }, 1000 );
 410             });
 411             relation_path.mouseleave( function(event) {
 412                 clearTimeout(outerTimer);
 413                 if( timer != null ) { clearTimeout(timer); }
 414             });
 415             relation.data( 'active', true );
 416         } else {
 417             relation_path.unbind( 'mouseenter' );
 418             relation_path.unbind( 'mouseleave' );
 419             relation_path.css( {'cursor':'inherit'} );
 420             relation.data( 'active', false );
 421         }
 422     }
 423     this.showinfo = function(relation) {
 424         var htmlstr = 'type: ' + relation.data( 'type' ) + '<br/>scope: ' + relation.data( 'scope' );
 425         if( relation.data( 'note' ) ) {
 426                 htmlstr = htmlstr + '<br/>note: ' + relation.data( 'note' );
 427         }
 428         $('#delete-form-text').html( htmlstr );
 429         var points = relation.children('path').attr('d').slice(1).replace('C',' ').split(' ');
 430         var xs = parseFloat( points[0].split(',')[0] );
 431         var xe = parseFloat( points[1].split(',')[0] );
 432         var ys = parseFloat( points[0].split(',')[1] );
 433         var ye = parseFloat( points[3].split(',')[1] );
 434         var p = svg_root.createSVGPoint();
 435         p.x = xs + ((xe-xs)*1.1);
 436         p.y = ye - ((ye-ys)/2);
 437         var ctm = svg_root_element.getScreenCTM();
 438         var nx = p.matrixTransform(ctm).x;
 439         var ny = p.matrixTransform(ctm).y;
 440         var dialog_aria = $ ("div[aria-labelledby='ui-dialog-title-delete-form']");
 441         $('#delete-form').dialog( 'open' );
 442         dialog_aria.offset({ left: nx, top: ny });
 443     }
 444     this.remove = function( relation_id ) {
 445         var relation = $("#svgenlargement .relation:has(title:contains('" + relation_id + "'))");
 446         relation.remove();
 447     }
 448 }
 449
 450 function draw_relation( source_id, target_id, relation_color ) {
 451     var source_ellipse = get_ellipse( source_id );
 452     var target_ellipse = get_ellipse( target_id );
 453     var svg = $('#svgenlargement').children('svg').svg().svg('get');
 454     var path = svg.createPath();
 455     var sx = parseInt( source_ellipse.attr('cx') );
 456     var rx = parseInt( source_ellipse.attr('rx') );
 457     var sy = parseInt( source_ellipse.attr('cy') );
 458     var ex = parseInt( target_ellipse.attr('cx') );
 459     var ey = parseInt( target_ellipse.attr('cy') );
 460     var relation = svg.group( $("#svgenlargement svg g"), {'class':'relation'} );
 461     svg.title( relation, source_id + '->' + target_id );
 462     svg.path( relation, path.move( sx, sy ).curveC( sx + (2*rx), sy, ex + (2*rx), ey, ex, ey ), {fill: 'none', stroke: relation_color, strokeWidth: 4});
 463     var relation_element = $('#svgenlargement .relation').filter( ':last' );
 464     relation_element.insertBefore( $('#svgenlargement g g').filter(':first') );
 465     return relation_element;
 466 }
 467
 468
 469 $(document).ready(function () {
 470
 471   timer = null;
 472   relation_manager = new relation_factory();
 473   $('#update_workspace_button').data('locked', false);
 474
 475   $('#enlargement').mousedown(function (event) {
 476     $(this)
 477         .data('down', true)
 478         .data('x', event.clientX)
 479         .data('y', event.clientY)
 480         .data('scrollLeft', this.scrollLeft)
 481         stateTf = svg_root_element.getCTM().inverse();
 482         var p = svg_root.createSVGPoint();
 483         p.x = event.clientX;
 484         p.y = event.clientY;
 485         stateOrigin = p.matrixTransform(stateTf);
 486         event.returnValue = false;
 487         event.preventDefault();
 488         return false;
 489   }).mouseup(function (event) {
 490         $(this).data('down', false);
 491   }).mousemove(function (event) {
 492     if( timer != null ) { clearTimeout(timer); }
 493     if ( ($(this).data('down') == true) && ($('#update_workspace_button').data('locked') == false) ) {
 494         var p = svg_root.createSVGPoint();
 495         p.x = event.clientX;
 496         p.y = event.clientY;
 497         p = p.matrixTransform(stateTf);
 498         var matrix = stateTf.inverse().translate(p.x - stateOrigin.x, p.y - stateOrigin.y);
 499         var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
 500         svg_root_element.setAttribute("transform", s);
 501     }
 502     event.returnValue = false;
 503     event.preventDefault();
 504   }).mousewheel(function (event, delta) {
 505     event.returnValue = false;
 506     event.preventDefault();
 507     if ( $('#update_workspace_button').data('locked') == false ) {
 508         if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
 509         if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
 510         if( delta < -9 ) { delta = -9 };
 511         var z = 1 + delta/10;
 512         z = delta > 0 ? 1 : -1;
 513         var g = svg_root_element;
 514         if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 100))) {
 515             var root = svg_root;
 516             var p = root.createSVGPoint();
 517             p.x = event.originalEvent.clientX;
 518             p.y = event.originalEvent.clientY;
 519             p = p.matrixTransform(g.getCTM().inverse());
 520             var scaleLevel = 1+(z/20);
 521             var k = root.createSVGMatrix().translate(p.x, p.y).scale(scaleLevel).translate(-p.x, -p.y);
 522             var matrix = g.getCTM().multiply(k);
 523             var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
 524             g.setAttribute("transform", s);
 525         }
 526     }
 527   }).css({
 528     'overflow' : 'hidden',
 529     'cursor' : '-moz-grab'
 530   });
 531
 532
 533   $( "#dialog-form" ).dialog({
 534     autoOpen: false,
 535     height: 270,
 536     width: 290,
 537     modal: true,
 538     buttons: {
 539       "Ok": function() {
 540         $('#status').empty();
 541         form_values = $('#collapse_node_form').serialize();
 542         ncpath = getRelationshipURL();
 543         $(':button :contains("Ok")').attr("disabled", true);
 544         var jqjson = $.post( ncpath, form_values, function(data) {
 545             $.each( data, function(item, source_target) {
 546                 var source_found = get_ellipse( source_target[0] );
 547                 var target_found = get_ellipse( source_target[1] );
 548                 if( source_found.size() && target_found.size() ) {
 549                 var relation = relation_manager.create( source_target[0], source_target[1], $('#rel_type')[0].selectedIndex-1 );
 550                                         relation.data( 'type', $('#rel_type :selected').text()  );
 551                                         relation.data( 'scope', $('#scope :selected').text()  );
 552                                         relation.data( 'note', $('#note').val()  );
 553                                         relation_manager.toggle_active( relation.children('title').text() );
 554                                 }
 555             });
 556             $( "#dialog-form" ).dialog( "close" );
 557         }, 'json' );
 558       },
 559       Cancel: function() {
 560           $( this ).dialog( "close" );
 561       }
 562     },
 563     create: function(event, ui) {
 564         $(this).data( 'relation_drawn', false );
 565         //TODO? Err handling?
 566                 var basepath = getRelativePath();
 567         var jqjson = $.getJSON( basepath + '/definitions', function(data) {
 568             var types = data.types.sort();
 569             $.each( types, function(index, value) {
 570                  $('#rel_type').append( $('<option />').attr( "value", value ).text(value) );
 571                  $('#keymaplist').append( $('<li>').css( "border-color", relation_manager.relation_colors[index] ).text(value) );
 572             });
 573             var scopes = data.scopes;
 574             $.each( scopes, function(index, value) {
 575                  $('#scope').append( $('<option />').attr( "value", value ).text(value) );
 576             });
 577         });
 578     },
 579     open: function() {
 580         relation_manager.create_temporary( $('#source_node_id').val(), $('#target_node_id').val() );
 581         $(".ui-widget-overlay").css("background", "none");
 582         $("#dialog_overlay").show();
 583         $("#dialog_overlay").height( $("#enlargement_container").height() );
 584         $("#dialog_overlay").width( $("#enlargement_container").innerWidth() );
 585         $("#dialog_overlay").offset( $("#enlargement_container").offset() );
 586     },
 587     close: function() {
 588         relation_manager.remove_temporary();
 589         $( '#status' ).empty();
 590         $("#dialog_overlay").hide();
 591     }
 592   }).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) {
 593       if( ( ajaxSettings.type == 'POST' ) && jqXHR.status == 403 ) {
 594           var errobj = jQuery.parseJSON( jqXHR.responseText );
 595           $('#status').append( '<p class="error">Error: ' + errobj.error + '</br>The relationship cannot be made.</p>' );
 596       }
 597   } );
 598
 599   $( "#delete-form" ).dialog({
 600     autoOpen: false,
 601     height: 135,
 602     width: 160,
 603     modal: false,
 604     buttons: {
 605         Cancel: function() {
 606             $( this ).dialog( "close" );
 607         },
 608         Delete: function() {
 609           form_values = $('#delete_relation_form').serialize()
 610           ncpath = getRelationshipURL()
 611           var jqjson = $.ajax({ url: ncpath, data: form_values, success: function(data) {
 612               $.each( data, function(item, source_target) {
 613                   relation_manager.remove( source_target[0] + '->' + source_target[1] );
 614               });
 615               $( "#delete-form" ).dialog( "close" );
 616           }, dataType: 'json', type: 'DELETE' });
 617         }
 618     },
 619     create: function(event, ui) {
 620         var buttonset = $(this).parent().find( '.ui-dialog-buttonset' ).css( 'width', '100%' );
 621         buttonset.find( "button:contains('Cancel')" ).css( 'float', 'right' );
 622         var dialog_aria = $("div[aria-labelledby='ui-dialog-title-delete-form']");
 623         dialog_aria.mouseenter( function() {
 624             if( mouseWait != null ) { clearTimeout(mouseWait) };
 625         })
 626         dialog_aria.mouseleave( function() {
 627             mouseWait = setTimeout( function() { $("#delete-form").dialog( "close" ) }, 2000 );
 628         })
 629     },
 630     open: function() {
 631         mouseWait = setTimeout( function() { $("#delete-form").dialog( "close" ) }, 2000 );
 632     },
 633     close: function() {
 634     }
 635   });
 636
 637   // function for reading form dialog should go here; for now hide the element
 638   $('#reading_form').hide();
 639
 640   $('#update_workspace_button').click( function() {
 641      var svg_enlargement = $('#svgenlargement').svg().svg('get').root();
 642      mouse_scale = svg_root_element.getScreenCTM().a;
 643      if( $(this).data('locked') == true ) {
 644          $('#svgenlargement ellipse' ).each( function( index ) {
 645              if( $(this).data( 'node_obj' ) != null ) {
 646                  $(this).data( 'node_obj' ).ungreyout_edges();
 647                  $(this).data( 'node_obj' ).set_draggable( false );
 648                  var node_id = $(this).data( 'node_obj' ).get_id();
 649                  toggle_relation_active( node_id );
 650                  $(this).data( 'node_obj', null );
 651              }
 652          })
 653          $(this).data('locked', false);
 654          $(this).css('background-position', '0px 44px');
 655      } else {
 656          var left = $('#enlargement').offset().left;
 657          var right = left + $('#enlargement').width();
 658          var tf = svg_root_element.getScreenCTM().inverse();
 659          var p = svg_root.createSVGPoint();
 660          p.x=left;
 661          p.y=100;
 662          var cx_min = p.matrixTransform(tf).x;
 663          p.x=right;
 664          var cx_max = p.matrixTransform(tf).x;
 665          $('#svgenlargement ellipse').each( function( index ) {
 666              var cx = parseInt( $(this).attr('cx') );
 667              if( cx > cx_min && cx < cx_max) {
 668                  if( $(this).data( 'node_obj' ) == null ) {
 669                      $(this).data( 'node_obj', new node_obj( $(this) ) );
 670                  } else {
 671                      $(this).data( 'node_obj' ).set_draggable( true );
 672                  }
 673                  $(this).data( 'node_obj' ).greyout_edges();
 674                  var node_id = $(this).data( 'node_obj' ).get_id();
 675                  toggle_relation_active( node_id );
 676              }
 677          });
 678          $(this).css('background-position', '0px 0px');
 679          $(this).data('locked', true );
 680      }
 681   });
 682
 683   $('.helptag').popupWindow({
 684           height:500,
 685           width:800,
 686           top:50,
 687           left:50,
 688           scrollbars:1
 689   });
 690
 691
 692   function toggle_relation_active( node_id ) {
 693       $('#svgenlargement .relation').find( "title:contains('" + node_id +  "')" ).each( function(index) {
 694           matchid = new RegExp( "^" + node_id );
 695           if( $(this).text().match( matchid ) != null ) {
 696               relation_manager.toggle_active( $(this).text() );
 697           };
 698       });
 699   }
 700
 701   expandFillPageClients();
 702   $(window).resize(function() {
 703     expandFillPageClients();
 704   });
 705
 706 });
 707
 708
 709 function expandFillPageClients() {
 710         $('.fillPage').each(function () {
 711                 $(this).height($(window).height() - $(this).offset().top - MARGIN);
 712         });
 713 }
 714
 715 function loadSVG(svgData) {
 716         var svgElement = $('#svgenlargement');
 717
 718         $(svgElement).svg('destroy');
 719
 720         $(svgElement).svg({
 721                 loadURL: svgData,
 722                 onLoad : svgEnlargementLoaded
 723         });
 724 }
 725
 726
 727 /*      OS Gadget stuff
 728
 729 function svg_select_callback(topic, data, subscriberData) {
 730         svgData = data;
 731         loadSVG(svgData);
 732 }
 733
 734 function loaded() {
 735         var prefs = new gadgets.Prefs();
 736         var preferredHeight = parseInt(prefs.getString('height'));
 737         if (gadgets.util.hasFeature('dynamic-height')) gadgets.window.adjustHeight(preferredHeight);
 738         expandFillPageClients();
 739 }
 740
 741 if (gadgets.util.hasFeature('pubsub-2')) {
 742         gadgets.HubSettings.onConnect = function(hum, suc, err) {
 743                 subId = gadgets.Hub.subscribe("interedition.svg.selected", svg_select_callback);
 744                 loaded();
 745         };
 746 }
 747 else gadgets.util.registerOnLoadHandler(loaded);
 748 */