From f0bc4b10418bb3aa2f5d0c7cd385a741d7c7a7ff Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Thu, 21 May 2015 14:40:12 +0200
Subject: [PATCH] Some tweaks of the DOT playground

---
 .../data/dotLanguage/dotPlayground.html       | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/examples/network/categories/data/dotLanguage/dotPlayground.html b/examples/network/categories/data/dotLanguage/dotPlayground.html
index cca244e3..a4c002dc 100644
--- a/examples/network/categories/data/dotLanguage/dotPlayground.html
+++ b/examples/network/categories/data/dotLanguage/dotPlayground.html
@@ -79,15 +79,6 @@
 <div id="header">
   <h1>DOT language playground</h1>
 
-  <p id="warning" style="color: red; display: none;">
-    Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.
-  </p>
-  <script>
-    if (location.href.substr(0, 5) == 'file:') {
-      $('#warning').show();
-    }
-  </script>
-
   <p>
     Play around with the DOT language in the textarea below, or select one of the following examples:
   </p>
@@ -96,18 +87,18 @@
     <a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
     <a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
     <a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
-    <a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</sup></a>,
-    <a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</sup></a>
+    <a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
+    <a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
   </p>
   <p>
-    The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">gallery of GraphViz</a>.
+    The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
   </p>
   <div>
     <br>
@@ -160,17 +151,19 @@ digraph {
 
   $('a.example').click(function (event) {
     var url = $(event.target).data('url');
-    $.get(url).done(function(dotData) {
-      $('#data').val(dotData);
-      draw();
-    });
+    $.get(url)
+        .done(function(dotData) {
+          $('#data').val(dotData);
+          draw();
+        })
+        .fail(function () {
+          $('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
+          resize();
+        });
   });
 
   $(window).resize(resize);
-  $(window).load(function () {
-    resize();
-    draw();
-  });
+  $(window).load(draw);
 
   function resize() {
     $('#contents').height($('body').height() - $('#header').height() - 30);
@@ -178,6 +171,7 @@ digraph {
 
   function draw () {
     try {
+      resize();
       $('#error').html('');
 
       // Provide a string with data in DOT language