root/js/relationship-readonly.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 var readingdata = {};
   7
   8 function getTextPath() {
   9     var currpath = window.location.pathname;
  10     // Get rid of trailing slash
  11     if( currpath.lastIndexOf('/') == currpath.length - 1 ) {
  12         currpath = currpath.slice( 0, currpath.length - 1)
  13     };
  14     // Get rid of query parameters
  15     if( currpath.lastIndexOf('?') != -1 ) {
  16         currpath = currpath.slice( 0, currpath.lastIndexOf('?') );
  17     };
  18     var path_elements = currpath.split('/');
  19     var textid = path_elements.pop();
  20     var basepath = path_elements.join( '/' );
  21     var path_parts = [ basepath, textid ];
  22     return path_parts;
  23 }
  24
  25 function getRelativePath() {
  26         var path_parts = getTextPath();
  27         return path_parts[0];
  28 }
  29
  30 function getTextURL( which ) {
  31         var path_parts = getTextPath();
  32         return path_parts[0] + '/' + path_parts[1] + '/' + which;
  33 }
  34
  35 function getReadingURL( reading_id ) {
  36         var path_parts = getTextPath();
  37         return path_parts[0] + '/' + path_parts[1] + '/reading/' + reading_id;
  38 }
  39
  40 // Make an XML ID into a valid selector
  41 function jq(myid) {
  42         return '#' + myid.replace(/(:|\.)/g,'\\$1');
  43 }
  44
  45 // Actions for opening the reading panel
  46 function node_dblclick_listener( evt ) {
  47         // Open the reading dialogue for the given node.
  48         // First get the reading info
  49         var reading_id = $(this).attr('id');
  50         var reading_info = readingdata[reading_id];
  51         // and then populate the dialog box with it.
  52         // Set the easy properties first
  53         $('#reading-form').dialog( 'option', 'title', 'Reading information for "' + reading_info['text'] + '"' );
  54         $('#reading_id').val( reading_id );
  55         toggle_checkbox( $('#reading_is_nonsense'), reading_info['is_nonsense'] );
  56         toggle_checkbox( $('#reading_grammar_invalid'), reading_info['grammar_invalid'] );
  57         // Use .text as a backup for .normal_form
  58         var normal_form = reading_info['normal_form'];
  59         if( !normal_form ) {
  60                 normal_form = reading_info['text'];
  61         }
  62         var nfboxsize = 10;
  63         if( normal_form.length > 9 ) {
  64                 nfboxsize = normal_form.length + 1;
  65         }
  66         $('#reading_normal_form').attr( 'size', nfboxsize )
  67         $('#reading_normal_form').val( normal_form );
  68         // Now do the morphological properties.
  69         morphology_form( reading_info['lexemes'] );
  70         // and then open the dialog.
  71         $('#reading-form').dialog("open");
  72 }
  73
  74 function toggle_checkbox( box, value ) {
  75         if( value == null ) {
  76                 value = false;
  77         }
  78         box.attr('checked', value );
  79 }
  80
  81 function morphology_form ( lexlist ) {
  82         $('#morphology').empty();
  83         $.each( lexlist, function( idx, lex ) {
  84                 var morphoptions = [];
  85                 if( 'wordform_matchlist' in lex ) {
  86                         $.each( lex['wordform_matchlist'], function( tdx, tag ) {
  87                                 var tagstr = stringify_wordform( tag );
  88                                 morphoptions.push( tagstr );
  89                         });
  90                 }
  91                 var formtag = 'morphology_' + idx;
  92                 var formstr = '';
  93                 if( 'form' in lex ) {
  94                         formstr = stringify_wordform( lex['form'] );
  95                 }
  96                 var form_morph_elements = morph_elements(
  97                         formtag, lex['string'], formstr, morphoptions );
  98                 $.each( form_morph_elements, function( idx, el ) {
  99                         $('#morphology').append( el );
 100                 });
 101         });
 102 }
 103
 104 function stringify_wordform ( tag ) {
 105         if( tag ) {
 106                 var elements = tag.split(' // ');
 107                 return elements[1] + ' // ' + elements[2];
 108         }
 109         return ''
 110 }
 111
 112 function morph_elements ( formtag, formtxt, currform, morphoptions ) {
 113         var clicktag = '(Click to select)';
 114         if ( !currform ) {
 115                 currform = clicktag;
 116         }
 117         var formlabel = $('<label/>').attr( 'id', 'label_' + formtag ).attr(
 118                 'for', 'reading_' + formtag ).text( formtxt + ': ' );
 119         var forminput = $('<input/>').attr( 'id', 'reading_' + formtag ).attr(
 120                 'name', 'reading_' + formtag ).attr( 'size', '50' ).attr(
 121                 'class', 'reading_morphology' ).val( currform );
 122         forminput.autocomplete({ source: morphoptions, minLength: 0     });
 123         forminput.focus( function() {
 124                 if( $(this).val() == clicktag ) {
 125                         $(this).val('');
 126                 }
 127                 $(this).autocomplete('search', '')
 128         });
 129         var morphel = [ formlabel, forminput, $('<br/>') ];
 130         return morphel;
 131 }
 132
 133 function color_inactive ( el ) {
 134         var reading_id = $(el).parent().attr('id');
 135         var reading_info = readingdata[reading_id];
 136         // If the reading info has any non-disambiguated lexemes, color it yellow;
 137         // otherwise color it green.
 138         $(el).attr( {stroke:'green', fill:'#b3f36d'} );
 139         if( reading_info ) {
 140                 $.each( reading_info['lexemes'], function ( idx, lex ) {
 141                         if( !lex['is_disambiguated'] || lex['is_disambiguated'] == 0 ) {
 142                                 $(el).attr( {stroke:'orange', fill:'#fee233'} );
 143                         }
 144                 });
 145         }
 146 }
 147
 148 function relemmatize () {
 149         // Send the reading for a new lemmatization and reopen the form.
 150         $('#relemmatize_pending').show();
 151         var reading_id = $('#reading_id').val()
 152         ncpath = getReadingURL( reading_id );
 153         form_values = {
 154                 'normal_form': $('#reading_normal_form').val(),
 155                 'relemmatize': 1 };
 156         var jqjson = $.post( ncpath, form_values, function( data ) {
 157                 // Update the form with the return
 158                 if( 'id' in data ) {
 159                         // We got back a good answer. Stash it
 160                         readingdata[reading_id] = data;
 161                         // and regenerate the morphology form.
 162                         morphology_form( data['lexemes'] );
 163                 } else {
 164                         alert("Could not relemmatize as requested: " + data['error']);
 165                 }
 166                 $('#relemmatize_pending').hide();
 167         });
 168 }
 169
 170 // Initialize the SVG once it exists
 171 function svgEnlargementLoaded() {
 172         //Give some visual evidence that we are working
 173         $('#loading_overlay').show();
 174         lo_height = $("#enlargement_container").outerHeight();
 175         lo_width = $("#enlargement_container").outerWidth();
 176         $("#loading_overlay").height( lo_height );
 177         $("#loading_overlay").width( lo_width );
 178         $("#loading_overlay").offset( $("#enlargement_container").offset() );
 179         $("#loading_message").offset(
 180                 { 'top': lo_height / 2 - $("#loading_message").height() / 2,
 181                   'left': lo_width / 2 - $("#loading_message").width() / 2 });
 182     //Set viewbox widht and height to widht and height of $('#svgenlargement svg').
 183     //This is essential to make sure zooming and panning works properly.
 184         var rdgpath = getTextURL( 'readings' );
 185                 $.getJSON( rdgpath, function( data ) {
 186                 readingdata = data;
 187             $('#svgenlargement ellipse').each( function( i, el ) { color_inactive( el ) });
 188         });
 189     $('#svgenlargement ellipse').parent().dblclick( node_dblclick_listener );
 190     var graph_svg = $('#svgenlargement svg');
 191     var svg_g = $('#svgenlargement svg g')[0];
 192     if (!svg_g) return;
 193     svg_root = graph_svg.svg().svg('get').root();
 194
 195     // Find the real root and ignore any text nodes
 196     for (i = 0; i < svg_root.childNodes.length; ++i) {
 197         if (svg_root.childNodes[i].nodeName != '#text') {
 198                 svg_root_element = svg_root.childNodes[i];
 199                 break;
 200            }
 201     }
 202
 203     svg_root.viewBox.baseVal.width = graph_svg.attr( 'width' );
 204     svg_root.viewBox.baseVal.height = graph_svg.attr( 'height' );
 205     //Now set scale and translate so svg height is about 150px and vertically centered in viewbox.
 206     //This is just to create a nice starting enlargement.
 207     var initial_svg_height = 250;
 208     var scale = initial_svg_height/graph_svg.attr( 'height' );
 209     var additional_translate = (graph_svg.attr( 'height' ) - initial_svg_height)/(2*scale);
 210     var transform = svg_g.getAttribute('transform');
 211     var translate = parseFloat( transform.match( /translate\([^\)]*\)/ )[0].split('(')[1].split(' ')[1].split(')')[0] );
 212     translate += additional_translate;
 213     var transform = 'rotate(0) scale(' + scale + ') translate(4 ' + translate + ')';
 214     svg_g.setAttribute('transform', transform);
 215     //used to calculate min and max zoom level:
 216     start_element_height = $('#__START__').children('ellipse')[0].getBBox().height;
 217     add_relations( function() { $('#loading_overlay').hide(); });
 218 }
 219
 220 function add_relations( callback_fn ) {
 221         var basepath = getRelativePath();
 222         var textrelpath = getTextURL( 'relationships' );
 223     $.getJSON( basepath + '/definitions', function(data) {
 224                 var rel_types = data.types.sort();
 225                 $.each( rel_types, function(index, value) {
 226                          $('#keymaplist').append( $('<li>').css( "border-color", relation_manager.relation_colors[index] ).text(value) );
 227                 });
 228         $.getJSON( textrelpath, function(data) {
 229             $.each(data, function( index, rel_info ) {
 230                 var type_index = $.inArray(rel_info.type, rel_types);
 231                 var source_found = get_ellipse( rel_info.source );
 232                 var target_found = get_ellipse( rel_info.target );
 233                 if( type_index != -1 && source_found.size() && target_found.size() ) {
 234                     var relation = relation_manager.create( rel_info.source, rel_info.target, type_index );
 235                     relation.data( 'type', rel_info.type );
 236                     relation.data( 'scope', rel_info.scope );
 237                     relation.data( 'note', rel_info.note );
 238                     var node_obj = get_node_obj(rel_info.source);
 239                     node_obj.ellipse.data( 'node_obj', null );
 240                     node_obj = get_node_obj(rel_info.target);
 241                     node_obj.ellipse.data( 'node_obj', null );
 242                 }
 243             });
 244             callback_fn.call();
 245         });
 246     });
 247 }
 248
 249 function get_ellipse( node_id ) {
 250         return $( jq( node_id ) + ' ellipse');
 251 }
 252
 253 function get_node_obj( node_id ) {
 254     var node_ellipse = get_ellipse( node_id );
 255     if( node_ellipse.data( 'node_obj' ) == null ) {
 256         node_ellipse.data( 'node_obj', new node_obj(node_ellipse) );
 257     };
 258     return node_ellipse.data( 'node_obj' );
 259 }
 260
 261 function node_obj(ellipse) {
 262   this.ellipse = ellipse;
 263   var self = this;
 264
 265   this.x = 0;
 266   this.y = 0;
 267   this.dx = 0;
 268   this.dy = 0;
 269   this.node_elements = node_elements_for(self.ellipse);
 270
 271   this.update_elements = function() {
 272       self.node_elements = node_elements_for(self.ellipse);
 273   }
 274 }
 275
 276 function svgshape( shape_element ) {
 277   this.shape = shape_element;
 278   this.move = function(dx,dy) {
 279     this.shape.attr( "transform", "translate(" + dx + " " + dy + ")" );
 280   }
 281   this.reset = function() {
 282     this.shape.attr( "transform", "translate( 0, 0 )" );
 283   }
 284   this.grey_out = function(filter) {
 285       if( this.shape.parent(filter).size() != 0 ) {
 286           this.shape.attr({'stroke':'#e5e5e5', 'fill':'#e5e5e5'});
 287       }
 288   }
 289   this.un_grey_out = function(filter) {
 290       if( this.shape.parent(filter).size() != 0 ) {
 291         this.shape.attr({'stroke':'#000000', 'fill':'#000000'});
 292       }
 293   }
 294 }
 295
 296 function svgpath( path_element, svg_element ) {
 297   this.svg_element = svg_element;
 298   this.path = path_element;
 299   this.x = this.path.x;
 300   this.y = this.path.y;
 301   this.move = function(dx,dy) {
 302     this.path.x = this.x + dx;
 303     this.path.y = this.y + dy;
 304   }
 305   this.reset = function() {
 306     this.path.x = this.x;
 307     this.path.y = this.y;
 308   }
 309   this.grey_out = function(filter) {
 310       if( this.svg_element.parent(filter).size() != 0 ) {
 311           this.svg_element.attr('stroke', '#e5e5e5');
 312           this.svg_element.siblings('text').attr('fill', '#e5e5e5');
 313           this.svg_element.siblings('text').attr('class', 'noselect');
 314       }
 315   }
 316   this.un_grey_out = function(filter) {
 317       if( this.svg_element.parent(filter).size() != 0 ) {
 318           this.svg_element.attr('stroke', '#000000');
 319           this.svg_element.siblings('text').attr('fill', '#000000');
 320           this.svg_element.siblings('text').attr('class', '');
 321       }
 322   }
 323 }
 324
 325 function node_elements_for( ellipse ) {
 326   node_elements = get_edge_elements_for( ellipse );
 327   node_elements.push( new svgshape( ellipse.siblings('text') ) );
 328   node_elements.push( new svgshape( ellipse ) );
 329   return node_elements;
 330 }
 331
 332 function get_edge_elements_for( ellipse ) {
 333   edge_elements = new Array();
 334   node_id = ellipse.parent().attr('id');
 335   edge_in_pattern = new RegExp( node_id + '$' );
 336   edge_out_pattern = new RegExp( '^' + node_id );
 337   $.each( $('#svgenlargement .edge,#svgenlargement .relation').children('title'), function(index) {
 338     title = $(this).text();
 339     if( edge_in_pattern.test(title) ) {
 340         polygon = $(this).siblings('polygon');
 341         if( polygon.size() > 0 ) {
 342             edge_elements.push( new svgshape( polygon ) );
 343         }
 344         path_segments = $(this).siblings('path')[0].pathSegList;
 345         edge_elements.push( new svgpath( path_segments.getItem(path_segments.numberOfItems - 1), $(this).siblings('path') ) );
 346     }
 347     if( edge_out_pattern.test(title) ) {
 348       path_segments = $(this).siblings('path')[0].pathSegList;
 349       edge_elements.push( new svgpath( path_segments.getItem(0), $(this).siblings('path') ) );
 350     }
 351   });
 352   return edge_elements;
 353 }
 354
 355 function relation_factory() {
 356     var self = this;
 357     this.color_memo = null;
 358     //TODO: colors hard coded for now
 359     this.relation_colors = [ "#5CCCCC", "#67E667", "#F9FE72", "#6B90D4", "#FF7673", "#E467B3", "#AA67D5", "#8370D8", "#FFC173" ];
 360
 361     this.create = function( source_node_id, target_node_id, color_index ) {
 362         //TODO: Protect from (color_)index out of bound..
 363         var relation_color = self.relation_colors[ color_index ];
 364         var relation = draw_relation( source_node_id, target_node_id, relation_color );
 365         var relation_id = get_relation_id( source_node_id, target_node_id );
 366         get_node_obj( source_node_id ).update_elements();
 367         get_node_obj( target_node_id ).update_elements();
 368         // Set it active by default. May need to restore toggling if having all
 369         // relationships active is too much of a performance hit.
 370         var relation_path = relation.children('path');
 371         // All relations active in order to allow hover information?
 372         // Else we will have to deactivate them when they go off-screen.
 373                 relation_path.css( {'cursor':'pointer'} );
 374                 relation_path.mouseenter( function(event) {
 375                         outerTimer = setTimeout( function() {
 376                                 timer = setTimeout( function() {
 377                                         var related_nodes = get_related_nodes( relation_id );
 378                                         var source_node_id = related_nodes[0];
 379                                         var target_node_id = related_nodes[1];
 380                                         $('#delete_source_node_id').val( source_node_id );
 381                                         $('#delete_target_node_id').val( target_node_id );
 382                                         self.showinfo(relation);
 383                                 }, 500 )
 384                         }, 1000 );
 385                 });
 386                 relation_path.mouseleave( function(event) {
 387                         clearTimeout(outerTimer);
 388                         if( timer != null ) { clearTimeout(timer); }
 389                 });
 390
 391         return relation;
 392     }
 393
 394     this.showinfo = function(relation) {
 395         var htmlstr = 'type: ' + relation.data( 'type' ) + '<br/>scope: ' + relation.data( 'scope' );
 396         if( relation.data( 'note' ) ) {
 397                 htmlstr = htmlstr + '<br/>note: ' + relation.data( 'note' );
 398         }
 399         $('#delete-form-text').html( htmlstr );
 400         var points = relation.children('path').attr('d').slice(1).replace('C',' ').split(' ');
 401         var xs = parseFloat( points[0].split(',')[0] );
 402         var xe = parseFloat( points[1].split(',')[0] );
 403         var ys = parseFloat( points[0].split(',')[1] );
 404         var ye = parseFloat( points[3].split(',')[1] );
 405         var p = svg_root.createSVGPoint();
 406         p.x = xs + ((xe-xs)*1.1);
 407         p.y = ye - ((ye-ys)/2);
 408         var ctm = svg_root_element.getScreenCTM();
 409         var nx = p.matrixTransform(ctm).x;
 410         var ny = p.matrixTransform(ctm).y;
 411         var dialog_aria = $ ("div[aria-labelledby='ui-dialog-title-delete-form']");
 412         $('#delete-form').dialog( 'open' );
 413         dialog_aria.offset({ left: nx, top: ny });
 414     }
 415     /* Do we need this in readonly mode?
 416     this.remove = function( relation_id ) {
 417         var relation = $( jq( relation_id ) );
 418         relation.remove();
 419     }
 420     */
 421 }
 422
 423 // Utility function to create/return the ID of a relation link between
 424 // a source and target.
 425 function get_relation_id( source_id, target_id ) {
 426         var idlist = [ source_id, target_id ];
 427         idlist.sort();
 428         return 'relation-' + idlist[0] + '-...-' + idlist[1];
 429 }
 430
 431 function get_related_nodes( relation_id ) {
 432         var srctotarg = relation_id.substr( 9 );
 433         return srctotarg.split('-...-');
 434 }
 435
 436 function draw_relation( source_id, target_id, relation_color ) {
 437     var source_ellipse = get_ellipse( source_id );
 438     var target_ellipse = get_ellipse( target_id );
 439     var relation_id = get_relation_id( source_id, target_id );
 440     var svg = $('#svgenlargement').children('svg').svg().svg('get');
 441     var path = svg.createPath();
 442     var sx = parseInt( source_ellipse.attr('cx') );
 443     var rx = parseInt( source_ellipse.attr('rx') );
 444     var sy = parseInt( source_ellipse.attr('cy') );
 445     var ex = parseInt( target_ellipse.attr('cx') );
 446     var ey = parseInt( target_ellipse.attr('cy') );
 447     var relation = svg.group( $("#svgenlargement svg g"),
 448         { 'class':'relation', 'id':relation_id } );
 449     svg.title( relation, source_id + '->' + target_id );
 450     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});
 451     var relation_element = $('#svgenlargement .relation').filter( ':last' );
 452     relation_element.insertBefore( $('#svgenlargement g g').filter(':first') );
 453     return relation_element;
 454 }
 455
 456 $(document).ready(function () {
 457
 458   timer = null;
 459   relation_manager = new relation_factory();
 460
 461   $('#enlargement').mousedown(function (event) {
 462     $(this)
 463         .data('down', true)
 464         .data('x', event.clientX)
 465         .data('y', event.clientY)
 466         .data('scrollLeft', this.scrollLeft)
 467         stateTf = svg_root_element.getCTM().inverse();
 468         var p = svg_root.createSVGPoint();
 469         p.x = event.clientX;
 470         p.y = event.clientY;
 471         stateOrigin = p.matrixTransform(stateTf);
 472         event.returnValue = false;
 473         event.preventDefault();
 474         return false;
 475   }).mouseup(function (event) {
 476         $(this).data('down', false);
 477   }).mousemove(function (event) {
 478     if( timer != null ) { clearTimeout(timer); }
 479     if ( ($(this).data('down') == true) ) {
 480         var p = svg_root.createSVGPoint();
 481         p.x = event.clientX;
 482         p.y = event.clientY;
 483         p = p.matrixTransform(stateTf);
 484         var matrix = stateTf.inverse().translate(p.x - stateOrigin.x, p.y - stateOrigin.y);
 485         var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
 486         svg_root_element.setAttribute("transform", s);
 487     }
 488     event.returnValue = false;
 489     event.preventDefault();
 490   }).mousewheel(function (event, delta) {
 491     event.returnValue = false;
 492     event.preventDefault();
 493         if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
 494         if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
 495         if( delta < -9 ) { delta = -9 };
 496         var z = 1 + delta/10;
 497         z = delta > 0 ? 1 : -1;
 498         var g = svg_root_element;
 499         if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 100))) {
 500                 var root = svg_root;
 501                 var p = root.createSVGPoint();
 502                 p.x = event.originalEvent.clientX;
 503                 p.y = event.originalEvent.clientY;
 504                 p = p.matrixTransform(g.getCTM().inverse());
 505                 var scaleLevel = 1+(z/20);
 506                 var k = root.createSVGMatrix().translate(p.x, p.y).scale(scaleLevel).translate(-p.x, -p.y);
 507                 var matrix = g.getCTM().multiply(k);
 508                 var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
 509                 g.setAttribute("transform", s);
 510         }
 511   }).css({
 512     'overflow' : 'hidden',
 513     'cursor' : '-moz-grab'
 514   });
 515
 516   $( "#delete-form" ).dialog({
 517     autoOpen: false,
 518     height: 135,
 519     width: 160,
 520     modal: false,
 521     buttons: {
 522         OK: function() {
 523             $( this ).dialog( "close" );
 524         }
 525     },
 526     create: function(event, ui) {
 527         var buttonset = $(this).parent().find( '.ui-dialog-buttonset' ).css( 'width', '100%' );
 528         buttonset.find( "button:contains('Cancel')" ).css( 'float', 'right' );
 529         var dialog_aria = $("div[aria-labelledby='ui-dialog-title-delete-form']");
 530         dialog_aria.mouseenter( function() {
 531             if( mouseWait != null ) { clearTimeout(mouseWait) };
 532         })
 533         dialog_aria.mouseleave( function() {
 534             mouseWait = setTimeout( function() { $("#delete-form").dialog( "close" ) }, 2000 );
 535         })
 536     },
 537     open: function() {
 538         mouseWait = setTimeout( function() { $("#delete-form").dialog( "close" ) }, 2000 );
 539     },
 540     close: function() {
 541     }
 542   });
 543
 544   // function for reading form dialog should go here; for now hide the element
 545   $('#reading-form').dialog({
 546         autoOpen: false,
 547         height: 400,
 548         width: 600,
 549         modal: true,
 550         buttons: {
 551                 OK: function() {
 552                         $( this ).dialog( "close" );
 553                 }
 554         },
 555         create: function() {
 556         },
 557         open: function() {
 558         $(".ui-widget-overlay").css("background", "none");
 559         $("#dialog_overlay").show();
 560         $('#reading_status').empty();
 561         $("#dialog_overlay").height( $("#enlargement_container").height() );
 562         $("#dialog_overlay").width( $("#enlargement_container").innerWidth() );
 563         $("#dialog_overlay").offset( $("#enlargement_container").offset() );
 564         $("#reading-form").parent().find('.ui-button').button("enable");
 565         },
 566         close: function() {
 567                 $("#dialog_overlay").hide();
 568         }
 569   }).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) {
 570       if( ajaxSettings.url.lastIndexOf( getReadingURL('') ) > -1
 571         && ajaxSettings.type == 'POST' && jqXHR.status == 403 ) {
 572           var errobj = jQuery.parseJSON( jqXHR.responseText );
 573           $('#reading_status').append( '<p class="error">Error: ' + errobj.error + '</p>' );
 574       }
 575           $(event.target).parent().find('.ui-button').button("enable");
 576   });
 577
 578   // Hide the unused elements
 579   $('#dialog-form').hide();
 580   $('#update_workspace_button').hide();
 581
 582   $('.helptag').popupWindow({
 583           height:500,
 584           width:800,
 585           top:50,
 586           left:50,
 587           scrollbars:1
 588   });
 589
 590
 591   expandFillPageClients();
 592   $(window).resize(function() {
 593     expandFillPageClients();
 594   });
 595
 596 });
 597
 598
 599 function expandFillPageClients() {
 600         $('.fillPage').each(function () {
 601                 $(this).height($(window).height() - $(this).offset().top - MARGIN);
 602         });
 603 }
 604
 605 function loadSVG(svgData) {
 606         var svgElement = $('#svgenlargement');
 607
 608         $(svgElement).svg('destroy');
 609
 610         $(svgElement).svg({
 611                 loadURL: svgData,
 612                 onLoad : svgEnlargementLoaded
 613         });
 614 }
 615
 616
 617 /*      OS Gadget stuff
 618
 619 function svg_select_callback(topic, data, subscriberData) {
 620         svgData = data;
 621         loadSVG(svgData);
 622 }
 623
 624 function loaded() {
 625         var prefs = new gadgets.Prefs();
 626         var preferredHeight = parseInt(prefs.getString('height'));
 627         if (gadgets.util.hasFeature('dynamic-height')) gadgets.window.adjustHeight(preferredHeight);
 628         expandFillPageClients();
 629 }
 630
 631 if (gadgets.util.hasFeature('pubsub-2')) {
 632         gadgets.HubSettings.onConnect = function(hum, suc, err) {
 633                 subId = gadgets.Hub.subscribe("interedition.svg.selected", svg_select_callback);
 634                 loaded();
 635         };
 636 }
 637 else gadgets.util.registerOnLoadHandler(loaded);
 638 */