src/jalview/io/HtmlSvgOutput.java

   1 /*
   2  * Jalview - A Sequence Alignment Editor and Viewer ($$Version-Rel$$)
   3  * Copyright (C) $$Year-Rel$$ The Jalview Authors
   4  *
   5  * This file is part of Jalview.
   6  *
   7  * Jalview is free software: you can redistribute it and/or
   8  * modify it under the terms of the GNU General Public License
   9  * as published by the Free Software Foundation, either version 3
  10  * of the License, or (at your option) any later version.
  11  *
  12  * Jalview is distributed in the hope that it will be useful, but
  13  * WITHOUT ANY WARRANTY; without even the implied warranty
  14  * of MERCHANTABILITY or FITNESS FOR A PARTICULAR
  15  * PURPOSE.  See the GNU General Public License for more details.
  16  *
  17  * You should have received a copy of the GNU General Public License
  18  * along with Jalview.  If not, see <http://www.gnu.org/licenses/>.
  19  * The Jalview Authors are detailed in the 'AUTHORS' file.
  20  */
  21 package jalview.io;
  22
  23 import jalview.api.AlignExportSettingI;
  24 import jalview.api.FeatureRenderer;
  25 import jalview.datamodel.AlignmentExportData;
  26 import jalview.datamodel.SequenceI;
  27 import jalview.gui.AlignViewport;
  28 import jalview.gui.AlignmentPanel;
  29 import jalview.gui.HTMLOptions;
  30 import jalview.gui.IProgressIndicator;
  31 import jalview.gui.OOMWarning;
  32 import jalview.math.AlignmentDimension;
  33 import jalview.util.ColorUtils;
  34 import jalview.util.MessageManager;
  35
  36 import java.awt.Color;
  37 import java.awt.FontMetrics;
  38 import java.awt.Graphics;
  39 import java.awt.print.Printable;
  40 import java.awt.print.PrinterException;
  41 import java.io.File;
  42 import java.io.FileOutputStream;
  43
  44 import org.jfree.graphics2d.svg.SVGGraphics2D;
  45 import org.jfree.graphics2d.svg.SVGHints;
  46
  47 public class HtmlSvgOutput
  48 {
  49   AlignViewport av;
  50
  51   FeatureRenderer fr;
  52
  53   AlignmentPanel ap;
  54
  55   private IProgressIndicator pIndicator;
  56
  57   private long pSessionId;
  58
  59   private boolean headless;
  60
  61
  62   public HtmlSvgOutput(File file, AlignmentPanel ap)
  63   {
  64     this.av = ap.av;
  65     this.ap = ap;
  66     fr = ap.cloneFeatureRenderer();
  67     generateHtmlSvgOutput(file);
  68   }
  69
  70   public void generateHtmlSvgOutput(File file)
  71   {
  72     pIndicator = ap.alignFrame;
  73     pSessionId = System.currentTimeMillis();
  74     try
  75     {
  76       headless = (System.getProperty("java.awt.headless") != null && System
  77               .getProperty("java.awt.headless").equals("true"));
  78       if (file == null)
  79       {
  80         setProgressMessage(MessageManager.formatMessage(
  81                 "status.waiting_for_user_to_select_output_file", "HTML"));
  82         JalviewFileChooser chooser = getHTMLChooser();
  83         chooser.setFileView(new jalview.io.JalviewFileView());
  84         chooser.setDialogTitle(ap.alignFrame.getTitle());
  85         chooser.setToolTipText(MessageManager.getString("action.save"));
  86         int value = chooser.showSaveDialog(ap.alignFrame);
  87
  88         if (value == jalview.io.JalviewFileChooser.APPROVE_OPTION)
  89         {
  90           jalview.bin.Cache.setProperty("LAST_DIRECTORY", chooser
  91                   .getSelectedFile().getParent());
  92           file = chooser.getSelectedFile();
  93           ap.alignFrame.repaint();
  94         }
  95         else
  96         {
  97           setProgressMessage(MessageManager.formatMessage(
  98                   "status.cancelled_image_export_operation", "HTML"));
  99           return;
 100         }
 101       }
 102     } catch (Exception e)
 103     {
 104       pIndicator.setProgressBar(MessageManager.formatMessage(
 105               "info.error_creating_file", "HTML"), pSessionId);
 106       e.printStackTrace();
 107       return;
 108     }
 109     final File fileX = file;
 110     new Thread()
 111     {
 112       @Override
 113       public void run()
 114       {
 115         try
 116         {
 117           setProgressMessage(null);
 118           setProgressMessage(MessageManager
 119 .formatMessage(
 120                   "status.exporting_alignment_as_x_file", "HTML"));
 121           AlignmentDimension aDimension = ap.getAlignmentDimension();
 122           SVGGraphics2D g1 = new SVGGraphics2D(aDimension.getWidth(),
 123                   aDimension.getHeight());
 124           SVGGraphics2D g2 = new SVGGraphics2D(aDimension.getWidth(),
 125                   aDimension.getHeight());
 126
 127           String renderStyle = jalview.bin.Cache.getDefault(
 128                   "HTML_RENDERING", "Prompt each time");
 129
 130           // If we need to prompt, and if the GUI is visible then
 131           // Prompt for rendering style
 132           if (renderStyle.equalsIgnoreCase("Prompt each time")
 133                   && !(System.getProperty("java.awt.headless") != null && System
 134                           .getProperty("java.awt.headless").equals("true")))
 135           {
 136             HTMLOptions svgOption = new HTMLOptions();
 137             renderStyle = svgOption.getValue();
 138
 139             if (renderStyle == null || svgOption.cancelled)
 140             {
 141               setProgressMessage(MessageManager.formatMessage(
 142                       "status.cancelled_image_export_operation", "HTML"));
 143               return;
 144             }
 145           }
 146
 147           if (renderStyle.equalsIgnoreCase("Lineart"))
 148           {
 149             g1.setRenderingHint(SVGHints.KEY_DRAW_STRING_TYPE,
 150                     SVGHints.VALUE_DRAW_STRING_TYPE_VECTOR);
 151             g2.setRenderingHint(SVGHints.KEY_DRAW_STRING_TYPE,
 152                     SVGHints.VALUE_DRAW_STRING_TYPE_VECTOR);
 153           }
 154           printUnwrapped(aDimension.getWidth(), aDimension.getHeight(), 0,
 155                   g1, g2);
 156
 157           String titleSvgData = g1.getSVGDocument();
 158           String alignSvgData = g2.getSVGDocument();
 159           String jsonData = null;
 160           boolean isEmbbedBioJSON = Boolean.valueOf(jalview.bin.Cache
 161                   .getDefault("EXPORT_EMBBED_BIOJSON", "true"));
 162           if (isEmbbedBioJSON)
 163           {
 164             AlignExportSettingI exportSettings = new AlignExportSettingI()
 165             {
 166               @Override
 167               public boolean isExportHiddenSequences()
 168               {
 169                 return true;
 170               }
 171
 172               @Override
 173               public boolean isExportHiddenColumns()
 174               {
 175                 return true;
 176               }
 177
 178               @Override
 179               public boolean isExportAnnotations()
 180               {
 181                 return true;
 182               }
 183
 184               @Override
 185               public boolean isExportFeatures()
 186               {
 187                 return true;
 188               }
 189
 190               @Override
 191               public boolean isExportGroups()
 192               {
 193                 return true;
 194               }
 195
 196               @Override
 197               public boolean isCancelled()
 198               {
 199                 return false;
 200               }
 201
 202             };
 203             AlignmentExportData exportData = jalview.gui.AlignFrame
 204                     .getAlignmentForExport(JSONFile.FILE_DESC, av,
 205                             exportSettings);
 206             jsonData = new FormatAdapter(ap, exportData.getSettings())
 207                     .formatSequences(JSONFile.FILE_DESC,
 208                             exportData.getAlignment(),
 209                             exportData.getOmitHidden(),
 210                             exportData.getStartEndPostions(),
 211                             av.getColumnSelection());
 212           }
 213           String htmlData = getHtml(titleSvgData, alignSvgData, jsonData);
 214           FileOutputStream out = new FileOutputStream(fileX);
 215           out.write(htmlData.getBytes());
 216           out.flush();
 217           out.close();
 218           if (!(System.getProperty("java.awt.headless") != null && System
 219                   .getProperty("java.awt.headless").equals("true")))
 220           {
 221             jalview.util.BrowserLauncher.openURL("file:///" + fileX);
 222           }
 223         } catch (OutOfMemoryError err)
 224         {
 225           System.out.println("########################\n"
 226                   + "OUT OF MEMORY " + fileX + "\n"
 227                   + "########################");
 228           new OOMWarning("Creating Image for " + fileX, err);
 229         } catch (Exception e)
 230         {
 231           e.printStackTrace();
 232           pIndicator.setProgressBar(MessageManager.formatMessage(
 233                   "info.error_creating_file", "HTML"), pSessionId);
 234         }
 235         setProgressMessage(MessageManager.formatMessage(
 236                 "status.export_complete", "HTML"));
 237       }
 238     }.start();
 239
 240   }
 241
 242   private void setProgressMessage(String message)
 243   {
 244     if (pIndicator != null && !headless)
 245     {
 246       pIndicator.setProgressBar(message, pSessionId);
 247     }
 248     else
 249     {
 250       System.out.println(message);
 251     }
 252   }
 253
 254   static JalviewFileChooser getHTMLChooser()
 255   {
 256     return new jalview.io.JalviewFileChooser(
 257             jalview.bin.Cache.getProperty("LAST_DIRECTORY"),
 258             new String[] { "html" },
 259             new String[] { "Hypertext Markup Language" },
 260             "Hypertext Markup Language");
 261   }
 262
 263   public int printUnwrapped(int pwidth, int pheight, int pi, Graphics... pg)
 264           throws PrinterException
 265   {
 266     int idWidth = ap.getVisibleIdWidth(false);
 267     FontMetrics fm = ap.getFontMetrics(av.getFont());
 268     int scaleHeight = av.getCharHeight() + fm.getDescent();
 269
 270     pg[0].setColor(Color.white);
 271     pg[0].fillRect(0, 0, pwidth, pheight);
 272     pg[0].setFont(av.getFont());
 273
 274     // //////////////////////////////////
 275     // / How many sequences and residues can we fit on a printable page?
 276     int totalRes = (pwidth - idWidth) / av.getCharWidth();
 277     int totalSeq = (pheight - scaleHeight) / av.getCharHeight() - 1;
 278     int pagesWide = (av.getAlignment().getWidth() / totalRes) + 1;
 279
 280     // ///////////////////////////
 281     // / Only print these sequences and residues on this page
 282     int startRes;
 283
 284     // ///////////////////////////
 285     // / Only print these sequences and residues on this page
 286     int endRes;
 287
 288     // ///////////////////////////
 289     // / Only print these sequences and residues on this page
 290     int startSeq;
 291
 292     // ///////////////////////////
 293     // / Only print these sequences and residues on this page
 294     int endSeq;
 295     startRes = (pi % pagesWide) * totalRes;
 296     endRes = (startRes + totalRes) - 1;
 297
 298     if (endRes > (av.getAlignment().getWidth() - 1))
 299     {
 300       endRes = av.getAlignment().getWidth() - 1;
 301     }
 302     startSeq = (pi / pagesWide) * totalSeq;
 303     endSeq = startSeq + totalSeq;
 304     if (endSeq > av.getAlignment().getHeight())
 305     {
 306       endSeq = av.getAlignment().getHeight();
 307     }
 308     int pagesHigh = ((av.getAlignment().getHeight() / totalSeq) + 1)
 309             * pheight;
 310     if (av.isShowAnnotation())
 311     {
 312       pagesHigh += ap.getAnnotationPanel().adjustPanelHeight() + 3;
 313     }
 314     pagesHigh /= pheight;
 315     if (pi >= (pagesWide * pagesHigh))
 316     {
 317       return Printable.NO_SUCH_PAGE;
 318     }
 319
 320     // draw Scale
 321     pg[1].translate(0, 0);
 322     ap.getScalePanel().drawScale(pg[1], startRes, endRes, pwidth - idWidth,
 323             scaleHeight);
 324     pg[1].translate(-idWidth, scaleHeight);
 325
 326     // //////////////
 327     // Draw the ids
 328     Color currentColor = null;
 329     Color currentTextColor = null;
 330     pg[0].translate(0, scaleHeight);
 331     pg[0].setFont(ap.getIdPanel().getIdCanvas().getIdfont());
 332     SequenceI seq;
 333     for (int i = startSeq; i < endSeq; i++)
 334     {
 335       seq = av.getAlignment().getSequenceAt(i);
 336       if ((av.getSelectionGroup() != null)
 337               && av.getSelectionGroup().getSequences(null).contains(seq))
 338       {
 339         currentColor = Color.gray;
 340         currentTextColor = Color.black;
 341       }
 342       else
 343       {
 344         currentColor = ColorUtils.getColor(av.getSequenceColour(seq));
 345         currentTextColor = Color.black;
 346       }
 347       pg[0].setColor(currentColor);
 348       pg[0].fillRect(0, (i - startSeq) * av.getCharHeight(), idWidth,
 349               av.getCharHeight());
 350       pg[0].setColor(currentTextColor);
 351       int xPos = 0;
 352       if (av.isRightAlignIds())
 353       {
 354         fm = pg[0].getFontMetrics();
 355         xPos = idWidth
 356                 - fm.stringWidth(seq.getDisplayId(av.getShowJVSuffix()))
 357                 - 4;
 358       }
 359       pg[0].drawString(seq.getDisplayId(av.getShowJVSuffix()), xPos,
 360               (((i - startSeq) * av.getCharHeight()) + av.getCharHeight())
 361                       - (av.getCharHeight() / 5));
 362     }
 363     pg[0].setFont(av.getFont());
 364     pg[0].translate(idWidth, 0);
 365
 366     // draw main sequence panel
 367     pg[1].translate(idWidth, 0);
 368     ap.getSeqPanel().seqCanvas.drawPanel(pg[1], startRes, endRes, startSeq,
 369             endSeq, 0);
 370     if (av.isShowAnnotation() && (endSeq == av.getAlignment().getHeight()))
 371     {
 372       // draw annotation label - need to offset for current scroll position
 373       int offset = -ap.getAlabels().getScrollOffset();
 374       pg[0].translate(0, offset);
 375       pg[0].translate(-idWidth - 3,
 376               (endSeq - startSeq) * av.getCharHeight() + 3);
 377       ap.getAlabels().drawComponent(pg[0], idWidth);
 378       pg[0].translate(idWidth + 3, 0);
 379       pg[0].translate(0, -offset);
 380
 381       // draw annotation - need to offset for current scroll position
 382       pg[1].translate(0, offset);
 383       pg[1].translate(-idWidth - 3,
 384               (endSeq - startSeq) * av.getCharHeight() + 3);
 385       pg[1].translate(idWidth + 3, 0);
 386       ap.getAnnotationPanel().renderer.drawComponent(
 387               ap.getAnnotationPanel(), av, pg[1], -1, startRes, endRes + 1);
 388       pg[1].translate(0, -offset);
 389     }
 390
 391     return Printable.PAGE_EXISTS;
 392   }
 393
 394   private String getHtml(String titleSvg, String alignmentSvg,
 395           String jsonData)
 396   {
 397     StringBuilder htmlSvg = new StringBuilder();
 398     htmlSvg.append("<html>\n");
 399     if (jsonData != null)
 400     {
 401       htmlSvg.append("<button onclick=\"javascipt:openJalviewUsingCurrentUrl();\">Launch in Jalview</button> &nbsp;");
 402       htmlSvg.append("<input type=\"submit\" value=\"View raw BioJSON Data\" onclick=\"jQuery.facebox({ div:'#seqData' }); return false;\" />");
 403       htmlSvg.append("<div style=\"display: none;\" name=\"seqData\" id=\"seqData\" >"
 404               + jsonData + "</div>");
 405       htmlSvg.append("<br/>&nbsp;");
 406     }
 407     htmlSvg.append("\n<style type=\"text/css\"> "
 408             + "div.parent{ width:100%;<!-- overflow: auto; -->}\n"
 409             + "div.titlex{ width:11%; float: left; }\n"
 410             + "div.align{ width:89%; float: right; }\n"
 411             + "div.main-container{ border: 2px solid blue; border: 2px solid blue; width: 99%;   min-height: 99%; }\n"
 412             + ".sub-category-container {overflow-y: scroll; overflow-x: hidden; width: 100%; height: 100%;}\n"
 413             + "object {pointer-events: none;}");
 414     if (jsonData != null)
 415     {
 416       // facebox style sheet for displaying raw BioJSON data
 417       htmlSvg.append("#facebox { position: absolute;  top: 0;   left: 0; z-index: 100; text-align: left; }\n"
 418               + "#facebox .popup{ position:relative; border:3px solid rgba(0,0,0,0); -webkit-border-radius:5px;"
 419               + "-moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4); -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);"
 420               + "box-shadow:0 0 18px rgba(0,0,0,0.4); }\n"
 421               + "#facebox .content { display:table; width: 98%; padding: 10px; background: #fff; -webkit-border-radius:4px; -moz-border-radius:4px;"
 422               + " border-radius:4px; }\n"
 423               + "#facebox .content > p:first-child{ margin-top:0; }\n"
 424               + "#facebox .content > p:last-child{ margin-bottom:0; }\n"
 425               + "#facebox .close{ position:absolute; top:5px; right:5px; padding:2px; background:#fff; }\n"
 426               + "#facebox .close img{ opacity:0.3; }\n"
 427               + "#facebox .close:hover img{ opacity:1.0; }\n"
 428               + "#facebox .loading { text-align: center; }\n"
 429               + "#facebox .image { text-align: center;}\n"
 430               + "#facebox img { border: 0;  margin: 0; }\n"
 431               + "#facebox_overlay { position: fixed; top: 0px; left: 0px; height:100%; width:100%; }\n"
 432               + ".facebox_hide { z-index:-100; }\n"
 433               + ".facebox_overlayBG { background-color: #000;  z-index: 99;  }");
 434     }
 435
 436     htmlSvg.append("</style>");
 437     htmlSvg.append("<div class=\"main-container\" \n>");
 438     htmlSvg.append("<div class=\"titlex\">\n");
 439     htmlSvg.append("<div class=\"sub-category-container\"> \n");
 440     htmlSvg.append(titleSvg);
 441     htmlSvg.append("</div>");
 442     htmlSvg.append("</div>\n\n<!-- ========================================================================================== -->\n\n");
 443     htmlSvg.append("<div class=\"align\" >");
 444     htmlSvg.append(
 445             "<div class=\"sub-category-container\"> <div style=\"overflow-x: scroll;\">")
 446             .append(alignmentSvg).append("</div></div>").append("</div>");
 447     htmlSvg.append("</div>");
 448
 449     htmlSvg.append("<script language=\"JavaScript\" type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js\"></script>\n"
 450             + "<script language=\"JavaScript\" type=\"text/javascript\"  src=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js\"></script>\n"
 451             + "<script>\n"
 452             + "var subCatContainer = $(\".sub-category-container\");\n"
 453             + "subCatContainer.scroll(\nfunction() {\n"
 454             + "subCatContainer.scrollTop($(this).scrollTop());\n});\n");
 455
 456     htmlSvg.append("</script>\n");
 457
 458     // javascript for launching file in Jalview
 459
 460     htmlSvg.append("<script language=\"JavaScript\">\n");
 461     htmlSvg.append("function openJalviewUsingCurrentUrl(){\n");
 462     htmlSvg.append("    var json = JSON.parse(document.getElementById(\"seqData\").innerHTML);\n");
 463     htmlSvg.append("    var jalviewVersion = json['appSettings'].version;\n");
 464     htmlSvg.append("    var url = json['appSettings'].webStartUrl;\n");
 465     htmlSvg.append("    var myForm = document.createElement(\"form\");\n\n");
 466     htmlSvg.append("    var heap = document.createElement(\"input\");\n");
 467     htmlSvg.append("    heap.setAttribute(\"name\", \"jvm-max-heap\") ;\n");
 468     htmlSvg.append("    heap.setAttribute(\"value\", \"2G\");\n\n");
 469     htmlSvg.append("    var target = document.createElement(\"input\");\n");
 470     htmlSvg.append("    target.setAttribute(\"name\", \"open\");\n");
 471     htmlSvg.append("    target.setAttribute(\"value\", document.URL);\n\n");
 472     htmlSvg.append("    var jvVersion = document.createElement(\"input\");\n");
 473     htmlSvg.append("    jvVersion.setAttribute(\"name\", \"version\") ;\n");
 474     htmlSvg.append("    jvVersion.setAttribute(\"value\", jalviewVersion);\n\n");
 475     htmlSvg.append("    myForm.action = url;\n");
 476     htmlSvg.append("    myForm.appendChild(heap);\n");
 477     htmlSvg.append("    myForm.appendChild(target);\n");
 478     htmlSvg.append("    myForm.appendChild(jvVersion);\n");
 479     htmlSvg.append("    document.body.appendChild(myForm);\n");
 480     htmlSvg.append("    myForm.submit() ;\n");
 481     htmlSvg.append("    document.body.removeChild(myForm);\n");
 482     htmlSvg.append("}\n");
 483
 484     // jquery facebox for displaying raw BioJSON data");
 485     if (jsonData != null)
 486     {
 487       htmlSvg.append("/* Facebox (for jQuery)\n");
 488       htmlSvg.append("* version: 1.3\n");
 489       htmlSvg.append(" * @requires jQuery v1.2 or later\n");
 490       htmlSvg.append(" * @homepage https://github.com/defunkt/facebox\n");
 491       htmlSvg.append(" * Licensed under the MIT:\n");
 492       htmlSvg.append(" *   http://www.opensource.org/licenses/mit-license.php\n");
 493       htmlSvg.append(" * Copyright Forever Chris Wanstrath, Kyle Neath\n");
 494       htmlSvg.append(" * Usage:\n");
 495       htmlSvg.append(" *  jQuery(document).ready(function() {\n");
 496       htmlSvg.append(" *    jQuery('a[rel*=facebox]').facebox()\n");
 497       htmlSvg.append(" *  })\n");
 498       htmlSvg.append(" *  <a href=\"#terms\" rel=\"facebox\">Terms</a>\n");
 499       htmlSvg.append(" *    Loads the #terms div in the box\n");
 500       htmlSvg.append(" *  <a href=\"terms.html\" rel=\"facebox\">Terms</a>\n");
 501       htmlSvg.append(" *    Loads the terms.html page in the box\n");
 502       htmlSvg.append(" *  <a href=\"terms.png\" rel=\"facebox\">Terms</a>\n");
 503       htmlSvg.append(" *    Loads the terms.png image in the box\n");
 504       htmlSvg.append(" *  You can also use it programmatically:\n");
 505       htmlSvg.append(" *    jQuery.facebox('some html')\n");
 506       htmlSvg.append(" *    jQuery.facebox('some html', 'my-groovy-style')\n");
 507       htmlSvg.append(" *  The above will open a facebox with \"some html\" as the content.\n");
 508       htmlSvg.append(" *    jQuery.facebox(function($) {\n");
 509       htmlSvg.append(" *      $.get('blah.html', function(data) { $.facebox(data) })\n");
 510       htmlSvg.append(" *    })\n");
 511       htmlSvg.append(" *  The above will show a loading screen before the passed function is called,\n");
 512       htmlSvg.append(" *  allowing for a better ajaxy experience.\n");
 513       htmlSvg.append(" *  The facebox function can also display an ajax page, an image, or the contents of a div:\n");
 514       htmlSvg.append(" *    jQuery.facebox({ ajax: 'remote.html' })\n");
 515       htmlSvg.append(" *    jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')\n");
 516       htmlSvg.append(" *    jQuery.facebox({ image: 'stairs.jpg' })\n");
 517       htmlSvg.append(" *    jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')\n");
 518       htmlSvg.append(" *    jQuery.facebox({ div: '#box' })\n");
 519       htmlSvg.append(" *    jQuery.facebox({ div: '#box' }, 'my-groovy-style')\n");
 520       htmlSvg.append(" *    Want to close the facebox?  Trigger the 'close.facebox' document event:\n");
 521       htmlSvg.append(" *    jQuery(document).trigger('close.facebox')\n");
 522       htmlSvg.append(" *  Facebox also has a bunch of other hooks:\n");
 523       htmlSvg.append(" *    loading.facebox\n");
 524       htmlSvg.append(" *    beforeReveal.facebox\n");
 525       htmlSvg.append(" *    reveal.facebox (aliased as 'afterReveal.facebox')\n");
 526       htmlSvg.append(" *    init.facebox\n");
 527       htmlSvg.append(" *    afterClose.facebox\n");
 528       htmlSvg.append(" *  Simply bind a function to any of these hooks:\n");
 529       htmlSvg.append(" *   $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })\n");
 530       htmlSvg.append(" *\n");
 531       htmlSvg.append(" */\n");
 532       htmlSvg.append("(function($) {\n");
 533       htmlSvg.append("  $.facebox = function(data, klass) {\n");
 534       htmlSvg.append("    $.facebox.loading()\n");
 535       htmlSvg.append("    if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)\n");
 536       htmlSvg.append("    else if (data.image) fillFaceboxFromImage(data.image, klass)\n");
 537       htmlSvg.append("    else if (data.div) fillFaceboxFromHref(data.div, klass)\n");
 538       htmlSvg.append("    else if ($.isFunction(data)) data.call($)\n");
 539       htmlSvg.append("    else $.facebox.reveal(data, klass)\n");
 540       htmlSvg.append("  }\n");
 541
 542       htmlSvg.append("  $.extend($.facebox, {\n");
 543       htmlSvg.append("    settings: {\n");
 544       htmlSvg.append("      opacity      : 0.2,\n");
 545       htmlSvg.append("      overlay      : true,\n");
 546       htmlSvg.append("      loadingImage : 'https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/loading.gif',\n");
 547       htmlSvg.append("      closeImage   : 'https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/cancel.png',\n");
 548       htmlSvg.append("      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],\n");
 549       htmlSvg.append("      faceboxHtml  : '<div  id=\"facebox\" style=\"display:none; width: 95%; height: 85%; overflow: auto;\"> ");
 550       htmlSvg.append("      <div class=\"popup\"> ");
 551       htmlSvg.append("        <div class=\"content\"> ");
 552       htmlSvg.append("        </div> ");
 553       htmlSvg.append("        <a href=\"#\" class=\"close\"></a> ");
 554       htmlSvg.append("      </div> ");
 555       htmlSvg.append("    </div>'\n");
 556       htmlSvg.append("    },      \n");
 557       htmlSvg.append("    loading: function() {\n");
 558       htmlSvg.append("      init()\n");
 559       htmlSvg.append("      if ($('#facebox .loading').length == 1) return true\n");
 560       htmlSvg.append("      showOverlay()      \n");
 561       htmlSvg.append("      $('#facebox .content').empty().\n");
 562       htmlSvg.append("        append('<div class=\"loading\"><img src=\"'+$.facebox.settings.loadingImage+'\"/></div>')\n");
 563       htmlSvg.append("      $('#facebox').show().css({\n");
 564       htmlSvg.append("        top:    getPageScroll()[1] + (getPageHeight() / 10),\n");
 565       htmlSvg.append("        left:    $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)\n");
 566       htmlSvg.append("      })      \n");
 567       htmlSvg.append("      $(document).bind('keydown.facebox', function(e) {\n");
 568       htmlSvg.append("       if (e.keyCode == 27) $.facebox.close()\n");
 569       htmlSvg.append("        return true\n");
 570       htmlSvg.append("      })\n");
 571       htmlSvg.append("      $(document).trigger('loading.facebox')\n");
 572       htmlSvg.append("    },\n");
 573       htmlSvg.append("    reveal: function(data, klass) {\n");
 574       htmlSvg.append("      $(document).trigger('beforeReveal.facebox')\n");
 575       htmlSvg.append("      if (klass) $('#facebox .content').addClass(klass)\n");
 576       htmlSvg.append("      $('#facebox .content').empty().append('<pre><code>'+JSON.stringify(JSON.parse(data),null,4)+'</pre></code>')\n");
 577       htmlSvg.append("      $('#facebox .popup').children().fadeIn('normal')\n");
 578       htmlSvg.append("      $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))\n");
 579       htmlSvg.append("      $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')\n");
 580       htmlSvg.append("    },      \n");
 581       htmlSvg.append("    close: function() {\n");
 582       htmlSvg.append("      $(document).trigger('close.facebox')\n");
 583       htmlSvg.append("      return false\n");
 584       htmlSvg.append("    }\n");
 585       htmlSvg.append("  })\n");
 586       htmlSvg.append("  $.fn.facebox = function(settings) {\n");
 587       htmlSvg.append("    if ($(this).length == 0) return    \n");
 588       htmlSvg.append("    init(settings)      \n");
 589       htmlSvg.append("    function clickHandler() {\n");
 590       htmlSvg.append("      $.facebox.loading(true)      \n");
 591       htmlSvg.append("      // support for rel=\"facebox.inline_popup\" syntax, to add a class\n");
 592       htmlSvg.append("      // also supports deprecated \"facebox[.inline_popup]\" syntax\n");
 593       htmlSvg.append("      var klass = this.rel.match(/facebox\\[?\\.(\\w+)\\]?/)\n");
 594       htmlSvg.append("      if (klass) klass = klass[1]\n");
 595       htmlSvg.append("      fillFaceboxFromHref(this.href, klass)\n");
 596       htmlSvg.append("      return false\n");
 597       htmlSvg.append("    }      \n");
 598       htmlSvg.append("    return this.bind('click.facebox', clickHandler)\n");
 599       htmlSvg.append("  }\n");
 600       htmlSvg.append("  // called one time to setup facebox on this page\n");
 601       htmlSvg.append("  function init(settings) {\n");
 602       htmlSvg.append("    if ($.facebox.settings.inited) return true\n");
 603       htmlSvg.append("    else $.facebox.settings.inited = true\n");
 604       htmlSvg.append("    $(document).trigger('init.facebox')\n");
 605       htmlSvg.append("    makeCompatible()\n");
 606       htmlSvg.append("    var imageTypes = $.facebox.settings.imageTypes.join('|')\n");
 607       htmlSvg.append("    $.facebox.settings.imageTypesRegexp = new RegExp('\\\\.(' + imageTypes + ')(\\\\?.*)?$', 'i')\n");
 608
 609       htmlSvg.append("    if (settings) $.extend($.facebox.settings, settings)\n");
 610       htmlSvg.append("    $('body').append($.facebox.settings.faceboxHtml)\n");
 611
 612       htmlSvg.append("    var preload = [ new Image(), new Image() ]\n");
 613       htmlSvg.append("    preload[0].src = $.facebox.settings.closeImage\n");
 614       htmlSvg.append("    preload[1].src = $.facebox.settings.loadingImage\n");
 615
 616       htmlSvg.append("    $('#facebox').find('.b:first, .bl').each(function() {\n");
 617       htmlSvg.append("      preload.push(new Image())\n");
 618       htmlSvg.append("      preload.slice(-1).src = $(this).css('background-image').replace(/url\\((.+)\\)/, '$1')\n");
 619       htmlSvg.append("    })\n");
 620
 621       htmlSvg.append("    $('#facebox .close')\n");
 622       htmlSvg.append("      .click($.facebox.close)\n");
 623       htmlSvg.append("      .append('<img src=\"'\n");
 624       htmlSvg.append("              + $.facebox.settings.closeImage\n");
 625       htmlSvg.append("              + '\" class=\"close_image\" title=\"close\">')\n");
 626       htmlSvg.append("  }\n");
 627
 628       htmlSvg.append("  // getPageScroll() by quirksmode.com\n");
 629       htmlSvg.append("  function getPageScroll() {\n");
 630       htmlSvg.append("    var xScroll, yScroll;\n");
 631       htmlSvg.append("    if (self.pageYOffset) {\n");
 632       htmlSvg.append("      yScroll = self.pageYOffset;\n");
 633       htmlSvg.append("      xScroll = self.pageXOffset;\n");
 634       htmlSvg.append("    } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict\n");
 635       htmlSvg.append("      yScroll = document.documentElement.scrollTop;\n");
 636       htmlSvg.append("      xScroll = document.documentElement.scrollLeft;\n");
 637       htmlSvg.append("    } else if (document.body) {// all other Explorers\n");
 638       htmlSvg.append("      yScroll = document.body.scrollTop;\n");
 639       htmlSvg.append("      xScroll = document.body.scrollLeft;\n");
 640       htmlSvg.append("    }\n");
 641       htmlSvg.append("    return new Array(xScroll,yScroll)\n");
 642       htmlSvg.append("  }\n");
 643
 644       // Adapted from getPageSize() by quirksmode.com");
 645       htmlSvg.append("  function getPageHeight() {\n");
 646       htmlSvg.append("    var windowHeight\n");
 647       htmlSvg.append("    if (self.innerHeight) {    // all except Explorer\n");
 648       htmlSvg.append("      windowHeight = self.innerHeight;\n");
 649       htmlSvg.append("    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode\n");
 650       htmlSvg.append("      windowHeight = document.documentElement.clientHeight;\n");
 651       htmlSvg.append("    } else if (document.body) { // other Explorers\n");
 652       htmlSvg.append("      windowHeight = document.body.clientHeight;\n");
 653       htmlSvg.append("    }\n");
 654       htmlSvg.append("    return windowHeight\n");
 655       htmlSvg.append("  }\n");
 656
 657       htmlSvg.append("  // Backwards compatibility\n");
 658       htmlSvg.append("  function makeCompatible() {\n");
 659       htmlSvg.append("    var $s = $.facebox.settings      \n");
 660       htmlSvg.append("    $s.loadingImage = $s.loading_image || $s.loadingImage\n");
 661       htmlSvg.append("    $s.closeImage = $s.close_image || $s.closeImage\n");
 662       htmlSvg.append("    $s.imageTypes = $s.image_types || $s.imageTypes\n");
 663       htmlSvg.append("    $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml\n");
 664       htmlSvg.append("  }\n");
 665
 666       htmlSvg.append("  // Figures out what you want to display and displays it\n");
 667       htmlSvg.append("  // formats are:\n");
 668       htmlSvg.append("  //     div: #id\n");
 669       htmlSvg.append("  //   image: blah.extension\n");
 670       htmlSvg.append("  //    ajax: anything else\n");
 671       htmlSvg.append("  function fillFaceboxFromHref(href, klass) {\n");
 672       htmlSvg.append("    // div\n");
 673       htmlSvg.append("    if (href.match(/#/)) {\n");
 674       htmlSvg.append("      var url    = window.location.href.split('#')[0]\n");
 675       htmlSvg.append("      var target = href.replace(url,'')\n");
 676       htmlSvg.append("      if (target == '#') return\n");
 677       htmlSvg.append("      $.facebox.reveal($(target).html(), klass)\n");
 678
 679       htmlSvg.append("    // image\n");
 680       htmlSvg.append("    } else if (href.match($.facebox.settings.imageTypesRegexp)) {\n");
 681       htmlSvg.append("      fillFaceboxFromImage(href, klass)\n");
 682       htmlSvg.append("    // ajax\n");
 683       htmlSvg.append("    } else {\n");
 684       htmlSvg.append("      fillFaceboxFromAjax(href, klass)\n");
 685       htmlSvg.append("    }\n");
 686       htmlSvg.append("  }\n");
 687
 688       htmlSvg.append("  function fillFaceboxFromImage(href, klass) {\n");
 689       htmlSvg.append("    var image = new Image()\n");
 690       htmlSvg.append("    image.onload = function() {\n");
 691       htmlSvg.append("      $.facebox.reveal('<div class=\"image\"><img src=\"' + image.src + '\" /></div>', klass)\n");
 692       htmlSvg.append("    }\n");
 693       htmlSvg.append("    image.src = href\n");
 694       htmlSvg.append("   }\n");
 695
 696       htmlSvg.append("  function fillFaceboxFromAjax(href, klass) {\n");
 697       htmlSvg.append("    $.facebox.jqxhr = $.get(href, function(data) { $.facebox.reveal(data, klass) })\n");
 698       htmlSvg.append("  }\n");
 699
 700       htmlSvg.append("  function skipOverlay() {\n");
 701       htmlSvg.append("    return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null\n");
 702       htmlSvg.append("  }\n");
 703
 704       htmlSvg.append("  function showOverlay() {\n");
 705       htmlSvg.append("    if (skipOverlay()) return\n");
 706
 707       htmlSvg.append("    if ($('#facebox_overlay').length == 0)\n");
 708       htmlSvg.append("      $(\"body\").append('<div id=\"facebox_overlay\" class=\"facebox_hide\"></div>')\n");
 709
 710       htmlSvg.append("    $('#facebox_overlay').hide().addClass(\"facebox_overlayBG\")\n");
 711       htmlSvg.append("      .css('opacity', $.facebox.settings.opacity)\n");
 712       htmlSvg.append("      .click(function() { $(document).trigger('close.facebox') })\n");
 713       htmlSvg.append("       .fadeIn(200)\n");
 714       htmlSvg.append("    return false\n");
 715       htmlSvg.append("  }\n");
 716
 717       htmlSvg.append("  function hideOverlay() {\n");
 718       htmlSvg.append("    if (skipOverlay()) return      \n");
 719       htmlSvg.append("    $('#facebox_overlay').fadeOut(200, function(){\n");
 720       htmlSvg.append("      $(\"#facebox_overlay\").removeClass(\"facebox_overlayBG\")\n");
 721       htmlSvg.append("      $(\"#facebox_overlay\").addClass(\"facebox_hide\")\n");
 722       htmlSvg.append("      $(\"#facebox_overlay\").remove()\n");
 723       htmlSvg.append("    })      \n");
 724       htmlSvg.append("    return false\n");
 725       htmlSvg.append("  }\n");
 726
 727       htmlSvg.append("  $(document).bind('close.facebox', function() {\n");
 728       htmlSvg.append("    if ($.facebox.jqxhr) {\n");
 729       htmlSvg.append("      $.facebox.jqxhr.abort()\n");
 730       htmlSvg.append("      $.facebox.jqxhr = null\n");
 731       htmlSvg.append("    }\n");
 732       htmlSvg.append("    $(document).unbind('keydown.facebox')\n");
 733       htmlSvg.append("    $('#facebox').fadeOut(function() {\n");
 734       htmlSvg.append("      $('#facebox .content').removeClass().addClass('content')\n");
 735       htmlSvg.append("      $('#facebox .loading').remove()\n");
 736       htmlSvg.append("      $(document).trigger('afterClose.facebox')\n");
 737       htmlSvg.append("    })\n");
 738       htmlSvg.append("    hideOverlay()\n");
 739       htmlSvg.append("  })\n");
 740
 741       htmlSvg.append("})(jQuery);\n");
 742
 743     }
 744
 745     htmlSvg.append("</script>\n");
 746     htmlSvg.append("</html>");
 747     return htmlSvg.toString();
 748   }
 749 }