From: Alexander Sadleir <asadleir@p12ny9n.ibm.com>
Date: Sat, 28 Jul 2012 13:08:44 +0000
Subject: Library updates
X-Git-Url: https://maxious.lambdacomplex.org/git/?p=disclosr.git&a=commitdiff&h=f9e85a3ad37f2c71f3b1f86a3a2e0fc1078facbd
---
Library updates


Former-commit-id: 6bd29a4ce0df1531423533a3653d2086d21c3a55
---


--- a/.gitmodules
+++ b/.gitmodules
@@ -4,9 +4,6 @@
 [submodule "couchdb/settee"]
 	path = couchdb/settee
 	url = https://github.com/inadarei/settee.git
-[submodule "lib/springy"]
-	path = lib/springy
-	url = https://github.com/dhotson/springy.git
 [submodule "lib/php-diff"]
 	path = lib/php-diff
 	url = https://github.com/chrisboulton/php-diff.git
@@ -19,4 +16,10 @@
 [submodule "lib/phpquery"]
 	path = lib/phpquery
 	url = https://github.com/TobiaszCudnik/phpquery.git
+[submodule "javascripts/sigma"]
+	path = javascripts/sigma
+	url = https://github.com/jacomyal/sigma.js.git
+[submodule "javascripts/bubbletree"]
+	path = javascripts/bubbletree
+	url = https://github.com/okfn/bubbletree.git
 

--- /dev/null
+++ b/admin/conflicts.php
@@ -1,1 +1,48 @@
+<?php
 
+include_once('../include/common.inc.php');
+include_header();
+                require_once '../lib/php-diff/lib/Diff.php';
+                require_once '../lib/php-diff/lib/Diff/Renderer/Html/SideBySide.php';
+
+$db = $server->get_db('disclosr-agencies');
+
+try {
+    $rows = $db->get_view("app", "getConflicts", null, true)->rows;
+    //print_r($rows);
+    foreach ($rows as $row) {
+echo "<h2>".$row->id."</h2>";
+$request = Requests::get($serverAddr."disclosr-agencies/".$row->id);
+$origSort = object_to_array(json_decode($request->body));
+ksort($origSort);
+    $origDoc = explode(",",json_encode($origSort));
+	foreach($row->value as $conflictRev) {
+$conflictURL = $serverAddr."disclosr-agencies/".$row->id."?rev=".$conflictRev;
+$request = Requests::get($conflictURL);
+$conflictSort = object_to_array(json_decode($request->body));
+ksort($conflictSort);
+    $conflictDoc = explode(",",json_encode($conflictSort));
+echo "curl -X DELETE ".$conflictURL."<br>".PHP_EOL;
+                // Options for generating the diff
+                $options = array(
+                        //'ignoreWhitespace' => true,
+                        //'ignoreCase' => true,
+                );
+
+                // Initialize the diff class
+                $diff = new Diff($conflictDoc, $origDoc, $options);
+
+                // Generate a side by side diff
+                $renderer = new Diff_Renderer_Html_SideBySide;
+                echo $diff->Render($renderer);
+}
+die();
+	
+    }
+} catch (SetteeRestClientException $e) {
+    setteErrorHandler($e);
+}
+
+include_footer();
+?>
+

--- /dev/null
+++ b/admin/directory.gexf.php
@@ -1,1 +1,59 @@
+<?php
 
+$nodes = Array(Array("id" => "gov", "label" => "Federal Government"));
+$edges = Array();
+
+function addEdge($source, $target) {
+    global $edges;
+    $edges[] = Array("id" => md5($source . $target), "source" => $source, "target" => $target);
+}
+
+function addNode($id, $label, $pid) {
+    global $nodes;
+    $nodes[] = Array("id" => $id, "label" => $label , "pid" => $pid);
+}
+
+function addChildren($parentID, $parentXML) {
+    foreach ($parentXML as $childXML) {
+
+        if ($childXML->getName() == "organization" || $childXML->getName() == "organizationalUnit" || $childXML->getName() == "person") {
+            $attr = $childXML->attributes();
+            $id = $attr['UUID'];
+            if ($childXML->getName() == "organization" || $childXML->getName() == "organizationalUnit") {
+
+                $label = $childXML->name;
+            } else if ($childXML->getName() == "person") {
+                  $label = $childXML->fullName;
+            }
+            addNode($id, $label, $parentID);
+            addEdge($id, $parentID);
+            addChildren($id, $childXML);
+        }
+    }
+}
+
+if (file_exists('directoryexport.xml')) {
+    $xml = simplexml_load_file('directoryexport.xml');
+
+    addChildren("gov", $xml);
+} else {
+    exit('Failed to open directoryexport.xml');
+}
+  header('Content-Type: application/gexf+xml');
+echo '<?xml version="1.0" encoding="UTF-8"?>
+<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd" version="1.2">
+    <graph mode="static" defaultedgetype="directed">
+        <nodes>';
+foreach ($nodes as $node) {
+    echo '          <node id="' . $node['id'] . '" label="' . htmlentities($node['label'],ENT_XML1) . '" ' . (isset($node['pid']) ? 'pid="' . $node['pid'] . '"' : "") . ' />';
+}
+echo '</nodes>
+        <edges>';
+foreach ($edges as $edge) {
+    echo '            <edge id="' . $edge['id'] . '" source="' . $edge['source'] . '" target="' . $edge['target'] . '" />';
+}
+echo '</edges>
+    </graph>
+</gexf>';
+?>
+

--- /dev/null
+++ b/admin/directoryexport.xml

--- a/admin/exportEmployees.csv.php
+++ b/admin/exportEmployees.csv.php
@@ -5,7 +5,6 @@
 $format = "csv";
 //$format = "json";
 if (isset($_REQUEST['format']))  $format = $_REQUEST['format'];
-
 setlocale(LC_CTYPE, 'C');
 if ($format == "csv") {
     $headers = Array("name");

--- a/admin/importAPSCEmployees.php
+++ b/admin/importAPSCEmployees.php
@@ -32,23 +32,35 @@
                 @$sums[$id][$timePeriod] += $data[1];
             } else {
                 echo "<br>ERROR NAME MISSING FROM ID LIST<br><bR>" . PHP_EOL;
-                
+
                 die();
-               
             }
         }
         fclose($handle);
     }
 }
 foreach ($sums as $id => $sum) {
-    echo $id. "<br>" . PHP_EOL;
+    echo $id . "<br>" . PHP_EOL;
     $doc = $db->get($id);
-   // print_r($doc);
-    if (isset($doc->statistics)) $doc->statistics = Array();
+     echo $doc->name . "<br>" . PHP_EOL;
+    // print_r($doc);
+    $changed = false;
+    if (!isset($doc->statistics)) {
+        $changed = true;
+        $doc->statistics = Array();
+    }
     foreach ($sum as $timePeriod => $value) {
-        $doc->statistics["employees"][$timePeriod] = Array("value"=>$value, "source"=>"http://apsc.gov.au/stateoftheservice/");
+        if (!isset($doc->statistics->employees->$timePeriod->value) 
+                || $doc->statistics->employees->$timePeriod->value != $value) {
+            $changed = true;
+            $doc->statistics["employees"][$timePeriod] = Array("value" => $value, "source" => "http://apsc.gov.au/stateoftheservice/");
+        }
     }
-    $db->save($doc);
+    if ($changed) {
+        $db->save($doc);
+    } else {
+        echo "not changed" . "<br>" . PHP_EOL;
+    }
 }
 // employees: timeperiod, source = apsc state of service, value 
 ?>

--- /dev/null
+++ b/admin/metadata.py
@@ -1,1 +1,22 @@
+#http://packages.python.org/CouchDB/client.html
+import couchdb
+from BeautifulSoup import BeautifulSoup
 
+couch = couchdb.Server('http://127.0.0.1:5984/')
+
+# select database
+docsdb = couch['disclosr-documents']
+
+for row in docsdb.view('app/getMetadataExtractRequired'): 
+    print row.id
+    html = docsdb.get_attachment(row.id,row.value.iterkeys().next()).read()
+    metadata = []
+     # http://www.crummy.com/software/BeautifulSoup/documentation.html
+            soup = BeautifulSoup(html)
+metatags = soup.meta
+    for metatag in metatags:
+        print metatag['name']
+    doc = docsdb.get(row.id)
+    //doc['metadata'] = metadata
+    //docsdb.save(doc)
+

--- /dev/null
+++ b/bubbletree.php
@@ -1,1 +1,126 @@
 
+<!DOCTYPE html> 
+<html xmlns="http://www.w3.org/1999/xhtml"> 
+    <head> 
+        <meta charset="UTF-8"/> 
+        <title>Minimal BubbleTree Demo</title> 
+        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
+        <script type="text/javascript" src="javascripts/bubbletree/lib/jquery.history.js"></script> 
+        <script type="text/javascript" src="javascripts/bubbletree/lib/raphael.js"></script> 
+        <script type="text/javascript" src="javascripts/bubbletree/lib/vis4.js"></script> 
+        <script type="text/javascript" src="javascripts/bubbletree/lib/Tween.js"></script> 
+        <script type="text/javascript" src="javascripts/bubbletree/build/bubbletree.js"></script> 
+        <link rel="stylesheet" type="text/css" href="javascripts/bubbletree/build/bubbletree.css" /> 
+        <script type="text/javascript" src="javascripts/bubbletree/styles/cofog.js"></script> 
+
+
+        <script type="text/javascript"> 
+       
+            $(function() {
+<?php
+include_once('include/common.inc.php');
+
+include("lib/Color.php");
+$color = new Lux_Color();
+
+$portfolios = Array();
+$total = 0;
+$db = $server->get_db('disclosr-agencies');
+try {
+    $rows = $db->get_view("app", "byDeptStateName", null, true)->rows;
+    foreach ($rows as $row) {
+        $portfolios[trim(str_replace(Array("Department of", "Department", "the", "'", "`"), "", $row->key))] = $row->value;
+    }
+} catch (SetteeRestClientException $e) {
+    setteErrorHandler($e);
+}
+
+$agencies = Array();
+try {
+    $rows = $db->get_view("app", "byCanonicalName", null, true)->rows;
+//print_r($rows);
+    foreach ($rows as $row) {
+        $employees = 0;
+        $portfolioid = 0;
+        if (isset($row->value->employees)) {
+            $employees = $row->value->employees;
+        }
+        if (isset($row->value->statistics->employees)) {
+            $agencyEmployeesArray = object_to_array($row->value->statistics->employees);
+            if (isset($agencyEmployeesArray["2010-2011"]["value"])) {
+                $employees = $agencyEmployeesArray["2010-2011"]["value"];
+            } else {
+                // bailout for agencies that are closed for business
+                continue;
+            }
+        }
+        if (!($employees > 0)) {
+            $employees = 0;
+        }
+        if (isset($row->value->parentOrg)) {
+            $portfolioid = $row->value->parentOrg;
+        }
+        if (isset($row->value->orgType) && $row->value->orgType == "FMA-DepartmentOfState") {
+            $portfolioid = $row->id;
+        }
+        $agencies[$portfolioid][$row->value->name] = $employees;
+    }
+} catch (SetteeRestClientException $e) {
+    setteErrorHandler($e);
+}
+//print_r($portfolios);
+//print_r($agencies);
+
+// http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+$golden_ratio_conjugate = 0.618033988749895;
+$h = 0.00+rand(0,10)/10; # use random start value
+foreach ($portfolios as $portfolioName => $portfolioID) {
+  $h += $golden_ratio_conjugate;
+  
+  $h =  fmod($h,1);
+    $portfolioColor = $color->hsv2hex(Array($h, .3, .99));
+    $subnodes = Array();
+    $portfolioEmployees = 0;
+    foreach ($agencies[$portfolioID] as $agencyName => $agencyEmployees) {
+        $agencyColor = $color->hsv2hex(Array($h / 10, rand(1, 10) / 10, abs(($h * (1 / 10)) - .5) + .5));
+        $subnodes[] = Array(
+            "label" => str_replace(Array("'", "`"), "", $agencyName),
+            "amount" => $agencyEmployees,
+            //"color" => "#" . $agencyColor
+        );
+        $portfolioEmployees += $agencyEmployees;
+    }
+    $nodes[] = Array(
+        "label" => $portfolioName,
+        "amount" => $portfolioEmployees,
+        //"color" => "#" . $portfolioColor,
+        "children" => $subnodes
+    );
+    $total += $portfolioEmployees;
+}
+$data = Array(
+    "label" => "Australian Federal Government",
+    "amount" => $total,
+    //"color" => "#000000",
+    "children" => $nodes
+);
+echo "var data =eval('('+'" . json_encode($data) . "'+')');";
+?>
+
+        new BubbleTree({
+            data: data,
+            container: '.bubbletree'
+        });
+		
+			
+    });
+     
+        </script> 
+    </head> 
+    <body> 
+        <div class="bubbletree-wrapper"> 
+            <div class="bubbletree"></div> 
+        </div> 
+    </body> 
+</html> 
+

--- a/graph.php
+++ b/graph.php
@@ -6,36 +6,46 @@
     $format = $_REQUEST['format'];
 }
 
-function add_node($id, $label) {
+function add_node($id, $label, $parent="") {
     global $format;
     if ($format == "html") {
-        echo "nodes[\"$id\"] = graph.newNode({label: \"$label\"});" . PHP_EOL;
+       // echo "nodes[\"$id\"] = graph.newNode({label: \"$label\"});" . PHP_EOL;
     }
      if ($format == "dot" && $label != "") {
          echo "$id [label=\"$label\"];". PHP_EOL;
      }
+      if ($format == "gexf") {
+          echo "<node id='$id' label=\"".htmlentities($label,ENT_XML1)."\" ".($parent != ""? "pid='$parent'><viz:size value='1'/>":"><viz:size value='2'/>")
+              ."<viz:color b='".rand(0,255)."' g='".rand(0,255)."' r='".rand(0,255)."'/>"
+                  ."</node>". PHP_EOL;
+      }
 }
 
 function add_edge($from, $to, $color) {
     global $format;
     if ($format == "html") {
-        echo "graph.newEdge(nodes[\"$from\"], nodes['$to'], {color: '$color'});" . PHP_EOL;
+     //   echo "graph.newEdge(nodes[\"$from\"], nodes['$to'], {color: '$color'});" . PHP_EOL;
     }
     if ($format == "dot") {
         echo "$from -> $to ".($color != ""? "[color=$color]":"").";". PHP_EOL;
     }
+     if ($format == "gexf") {
+          echo "<edge id='$from$to' source='$from' target='$to' />". PHP_EOL;
+      }
+}
+if ($format == "gexf") {
+    //header('Content-Type: text/xml');
+     header('Content-Type: application/gexf+xml');
+echo '<?xml version="1.0" encoding="UTF-8"?>
+<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:viz="http://www.gexf.net/1.2draft/viz" version="1.2">
+    <meta lastmodifieddate="2009-03-20">
+        <creator>Gexf.net</creator>
+        <description>A hello world! file</description>
+    </meta>
+    <graph mode="static" defaultedgetype="directed">
+        <nodes>'. PHP_EOL;
 }
 
-if ($format == "html") {
-    ?>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-    <script src="lib/springy/springy.js"></script>
-    <script src="lib/springy/springyui.js"></script>
-    <script>
-        var graph = new Graph();
-        var nodes = [];
-    <?php
-}
 if ($format == "dot") {
     echo 'digraph g {'. PHP_EOL;
 }
@@ -50,7 +60,10 @@
 } catch (SetteeRestClientException $e) {
     setteErrorHandler($e);
 }
-
+if ($format == "gexf") {
+echo '</nodes>
+        <edges>'. PHP_EOL;
+}
 try {
     $rows = $db->get_view("app", "byDeptStateName", null, true)->rows;
 //print_r($rows);
@@ -72,21 +85,59 @@
 }
 if ($format == "html") {
     ?>
-        window.onload = function() {
-            $(document).ready(function() {
-                var springy = $('#springydemo').springy({
-                    graph: graph
-                });
-            });
-        };
-    </script>
+ <div id="sigma-example" width="960" style="min-height:800px;background-color: #333;"></div>
+  <script src="javascripts/sigma.min.js"></script>
+  <script src="javascripts/sigma/plugins/sigma.parseGexf.js"></script>
+  <script src="javascripts/sigma/plugins/sigma.forceatlas2.js"></script>
+  <script type="text/javascript">function init() {
+  // Instanciate sigma.js and customize rendering :
+  var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
+    defaultLabelColor: '#fff',
+    defaultLabelSize: 14,
+    defaultLabelBGColor: '#fff',
+    defaultLabelHoverColor: '#000',
+    labelThreshold: 6,
+    defaultEdgeType: 'curve'
+  }).graphProperties({
+    minNodeSize: 0.5,
+    maxNodeSize: 5,
+    minEdgeSize: 5,
+    maxEdgeSize: 5
+  }).mouseProperties({
+    maxRatio: 32
+  });
 
-    <canvas id="springydemo" width="1260" height="680" />
+  // Parse a GEXF encoded file to fill the graph
+  // (requires "sigma.parseGexf.js" to be included)
+  sigInst.parseGexf('graph.php?format=gexf');
+ sigInst.bind('downnodes',function(event){
+    var nodes = event.content;
+ });
+  // Start the ForceAtlas2 algorithm
+  // (requires "sigma.forceatlas2.js" to be included)
+  sigInst.startForceAtlas2();
+  
+  // Draw the graph :
+  sigInst.draw();
+}
+
+if (document.addEventListener) {
+  document.addEventListener("DOMContentLoaded", init, false);
+} else {
+  window.onload = init;
+}
+</script>
+
     <?php
 }
 if ($format == "dot") {
     echo "}";
 }
+if ($format == "gexf") {
+echo ' </edges>
+    </graph>
+</gexf>'. PHP_EOL;
+}
 //include_footer();
 ?>
 

--- a/include/couchdb.inc.php
+++ b/include/couchdb.inc.php
@@ -5,28 +5,28 @@
 require ($basePath . 'couchdb/settee/src/settee.php');
 
 function createDocumentsDesignDoc() {
-    /*"views": {
-       "web_server": {
-           "map": "function(doc) {\n  emit(doc.web_server, 1);\n}",
-           "reduce": "function (key, values, rereduce) {\n    return sum(values);\n}"
-       },
-       "byAgency": {
-           "map": "function(doc) {\n  emit(doc.agencyID, 1);\n}",
-           "reduce": "function (key, values, rereduce) {\n    return sum(values);\n}"
-       },
-       "byURL": {
-           "map": "function(doc) {\n  emit(doc.url, doc);\n}"
-       },
-       "agency": {
-           "map": "function(doc) {\n  emit(doc.agencyID, doc);\n}"
-       },
-       "byWebServer": {
-           "map": "function(doc) {\n  emit(doc.web_server, doc);\n}"
-       },
-  "getValidationRequired": {
-       "map": "function(doc) {\nif (doc.mime_type == \"text/html\" \n&& typeof(doc.validation) == \"undefined\") {\n  emit(doc._id, doc._attachments);\n}\n}"
-   }
-   }*/
+    /* "views": {
+      "web_server": {
+      "map": "function(doc) {\n  emit(doc.web_server, 1);\n}",
+      "reduce": "function (key, values, rereduce) {\n    return sum(values);\n}"
+      },
+      "byAgency": {
+      "map": "function(doc) {\n  emit(doc.agencyID, 1);\n}",
+      "reduce": "function (key, values, rereduce) {\n    return sum(values);\n}"
+      },
+      "byURL": {
+      "map": "function(doc) {\n  emit(doc.url, doc);\n}"
+      },
+      "agency": {
+      "map": "function(doc) {\n  emit(doc.agencyID, doc);\n}"
+      },
+      "byWebServer": {
+      "map": "function(doc) {\n  emit(doc.web_server, doc);\n}"
+      },
+      "getValidationRequired": {
+      "map": "function(doc) {\nif (doc.mime_type == \"text/html\" \n&& typeof(doc.validation) == \"undefined\") {\n  emit(doc._id, doc._attachments);\n}\n}"
+      }
+      } */
 }
 
 function createAgencyDesignDoc() {
@@ -95,7 +95,7 @@
   }
 }";
     // http://stackoverflow.com/questions/646628/javascript-startswith
-$obj->views->score->map =  'if(!String.prototype.startsWith){
+    $obj->views->score->map = 'if(!String.prototype.startsWith){
     String.prototype.startsWith = function (str) {
         return !this.indexOf(str);
     }
@@ -119,7 +119,7 @@
         emit(count+doc._id, {id:doc._id, name: doc.name, score:count, orgType: doc.orgType, portfolio:portfolio});
     }
 }';
-        $obj->views->scoreHas->map = 'if(!String.prototype.startsWith){
+    $obj->views->scoreHas->map = 'if(!String.prototype.startsWith){
     String.prototype.startsWith = function (str) {
         return !this.indexOf(str);
     }
@@ -142,7 +142,7 @@
     $obj->views->scoreHas->reduce = 'function (key, values, rereduce) {
     return sum(values);
 }';
-        $obj->views->fieldNames->map = '
+    $obj->views->fieldNames->map = '
 function(doc) {
 for(var propName in doc) {
      	emit(propName, doc._id);
@@ -157,16 +157,16 @@
 }
 
 if (php_uname('n') == "vanille") {
-$serverAddr = 'http://192.168.178.21:5984/';
-   
+    $serverAddr = 'http://192.168.178.21:5984/';
 } else
 if (php_uname('n') == "KYUUBEY") {
 
-    $serverAddr = 'http://192.168.1.148:5984/';
+    $serverAddr = 'http://127.0.0.1:5984/';
 } else {
     $serverAddr = 'http://127.0.0.1:5984/';
 }
- $server = new SetteeServer($serverAddr);
+$server = new SetteeServer($serverAddr);
+
 function setteErrorHandler($e) {
     echo $e->getMessage() . "<br>" . PHP_EOL;
 }

--- /dev/null
+++ b/javascripts/bubbletree

--- a/javascripts/flotr2
+++ b/javascripts/flotr2

--- /dev/null
+++ b/javascripts/sigma

--- /dev/null
+++ b/javascripts/sigma.min.js
@@ -1,1 +1,3552 @@
-
+// Define packages:
+var sigma = {};
+sigma.tools = {};
+sigma.classes = {};
+sigma.instances = {};
+
+// Adding Array helpers, if not present yet:
+(function() {
+  if (!Array.prototype.some) {
+    Array.prototype.some = function(fun /*, thisp*/) {
+      var len = this.length;
+      if (typeof fun != 'function') {
+        throw new TypeError();
+      }
+
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++) {
+        if (i in this &&
+            fun.call(thisp, this[i], i, this)) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+  }
+
+  if (!Array.prototype.forEach) {
+    Array.prototype.forEach = function(fun /*, thisp*/) {
+      var len = this.length;
+      if (typeof fun != 'function') {
+        throw new TypeError();
+      }
+
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++) {
+        if (i in this) {
+          fun.call(thisp, this[i], i, this);
+        }
+      }
+    };
+  }
+
+  if (!Array.prototype.map) {
+    Array.prototype.map = function(fun /*, thisp*/) {
+      var len = this.length;
+      if (typeof fun != 'function') {
+        throw new TypeError();
+      }
+
+      var res = new Array(len);
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++) {
+        if (i in this) {
+          res[i] = fun.call(thisp, this[i], i, this);
+        }
+      }
+
+      return res;
+    };
+  }
+
+  if (!Array.prototype.filter) {
+    Array.prototype.filter = function(fun /*, thisp*/) {
+      var len = this.length;
+      if (typeof fun != 'function')
+        throw new TypeError();
+
+      var res = new Array();
+      var thisp = arguments[1];
+      for (var i = 0; i < len; i++) {
+        if (i in this) {
+          var val = this[i]; // in case fun mutates this
+          if (fun.call(thisp, val, i, this)) {
+            res.push(val);
+          }
+        }
+      }
+
+      return res;
+    };
+  }
+
+  if (!Object.keys) {
+    Object.keys = (function() {
+      var hasOwnProperty = Object.prototype.hasOwnProperty,
+          hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
+          dontEnums = [
+            'toString',
+            'toLocaleString',
+            'valueOf',
+            'hasOwnProperty',
+            'isPrototypeOf',
+            'propertyIsEnumerable',
+            'constructor'
+          ],
+          dontEnumsLength = dontEnums.length;
+
+      return function(obj) {
+        if (typeof obj !== 'object' &&
+            typeof obj !== 'function' ||
+            obj === null
+        ) {
+          throw new TypeError('Object.keys called on non-object');
+        }
+
+        var result = [];
+
+        for (var prop in obj) {
+          if (hasOwnProperty.call(obj, prop)) result.push(prop);
+        }
+
+        if (hasDontEnumBug) {
+          for (var i = 0; i < dontEnumsLength; i++) {
+            if (hasOwnProperty.call(obj, dontEnums[i])) {
+              result.push(dontEnums[i]);
+            }
+          }
+        }
+        return result;
+      }
+    })();
+  }
+})();
+
+/**
+ * A jQuery like properties management class. It works like jQuery .css()
+ * method: You can call it with juste one string to get the corresponding
+ * property, with a string and anything else to set the corresponding property,
+ * or directly with an object, and then each pair string / object (or any type)
+ * will be set in the properties.
+ * @constructor
+ * @this {sigma.classes.Cascade}
+ */
+sigma.classes.Cascade = function() {
+  /**
+   * This instance properties.
+   * @protected
+   * @type {Object}
+   */
+  this.p = {};
+
+  /**
+   * The method to use to set/get any property of this instance.
+   * @param  {(string|Object)} a1 If it is a string and if a2 is undefined,
+   *                              then it will return the corresponding
+   *                              property.
+   *                              If it is a string and if a2 is set, then it
+   *                              will set a2 as the property corresponding to
+   *                              a1, and return this.
+   *                              If it is an object, then each pair string /
+   *                              object (or any other type) will be set as a
+   *                              property.
+   * @param  {*?} a2              The new property corresponding to a1 if a1 is
+   *                              a string.
+   * @return {(*|sigma.classes.Cascade)} Returns itself or the corresponding
+   *                                     property.
+   */
+  this.config = function(a1, a2) {
+    if (typeof a1 == 'string' && a2 == undefined) {
+      return this.p[a1];
+    } else {
+      var o = (typeof a1 == 'object' && a2 == undefined) ? a1 : {};
+      if (typeof a1 == 'string') {
+        o[a1] = a2;
+      }
+
+      for (var k in o) {
+        if (this.p[k] != undefined) {
+          this.p[k] = o[k];
+        }
+      }
+      return this;
+    }
+  };
+};
+
+/**
+ * sigma.js custom event dispatcher class.
+ * @constructor
+ * @this {sigma.classes.EventDispatcher}
+ */
+sigma.classes.EventDispatcher = function() {
+  /**
+   * An object containing all the different handlers bound to one or many
+   * events, indexed by these events.
+   * @private
+   * @type {Object.<string,Object>}
+   */
+  var _h = {};
+
+  /**
+   * Represents "this", without the well-known scope issue.
+   * @private
+   * @type {sigma.classes.EventDispatcher}
+   */
+  var _self = this;
+
+  /**
+   * Will execute the handler the next (and only the next) time that the
+   * indicated event (or the indicated events) will be triggered.
+   * @param  {string} events            The name of the event (or the events
+   *                                    separated by spaces).
+   * @param  {function(Object)} handler The handler to bind.
+   * @return {sigma.classes.EventDispatcher} Returns itself.
+   */
+  function one(events, handler) {
+    if (!handler || !events) {
+      return _self;
+    }
+
+    var eArray = ((typeof events) == 'string') ? events.split(' ') : events;
+
+    eArray.forEach(function(event) {
+      if (!_h[event]) {
+        _h[event] = [];
+      }
+
+      _h[event].push({
+        'h': handler,
+        'one': true
+      });
+    });
+
+    return _self;
+  }
+
+  /**
+   * Will execute the handler everytime that the indicated event (or the
+   * indicated events) will be triggered.
+   * @param  {string} events            The name of the event (or the events
+   *                                    separated by spaces).
+   * @param  {function(Object)} handler The handler to bind.
+   * @return {sigma.classes.EventDispatcher} Returns itself.
+   */
+  function bind(events, handler) {
+    if (!handler || !events) {
+      return _self;
+    }
+
+    var eArray = ((typeof events) == 'string') ? events.split(' ') : events;
+
+    eArray.forEach(function(event) {
+      if (!_h[event]) {
+        _h[event] = [];
+      }
+
+      _h[event].push({
+        'h': handler,
+        'one': false
+      });
+    });
+
+    return _self;
+  }
+
+  /**
+   * Unbinds the handler from a specified event (or specified events).
+   * @param  {?string} events            The name of the event (or the events
+   *                                     separated by spaces). If undefined,
+   *                                     then all handlers are unbound.
+   * @param  {?function(Object)} handler The handler to unbind. If undefined,
+   *                                     each handler bound to the event or the
+   *                                     events will be unbound.
+   * @return {sigma.classes.EventDispatcher} Returns itself.
+   */
+  function unbind(events, handler) {
+    if (!events) {
+      _h = {};
+    }
+
+    var eArray = typeof events == 'string' ? events.split(' ') : events;
+
+    if (handler) {
+      eArray.forEach(function(event) {
+        if (_h[event]) {
+          _h[event] = _h[event].filter(function(e) {
+            return e['h'] != handler;
+          });
+        }
+
+        if (_h[event] && _h[event].length == 0) {
+          delete _h[event];
+        }
+      });
+    }else {
+      eArray.forEach(function(event) {
+        delete _h[event];
+      });
+    }
+
+    return _self;
+  }
+
+  /**
+   * Executes each handler bound to the event
+   * @param  {string} type     The type of the event.
+   * @param  {?Object} content The content of the event (optional).
+   * @return {sigma.classes.EventDispatcher} Returns itself.
+   */
+  function dispatch(type, content) {
+    if (_h[type]) {
+      _h[type].forEach(function(e) {
+        e['h']({
+          'type': type,
+          'content': content,
+          'target': _self
+        });
+      });
+
+      _h[type] = _h[type].filter(function(e) {
+        return !e['one'];
+      });
+    }
+
+    return _self;
+  }
+
+  /* PUBLIC INTERFACE: */
+  this.one = one;
+  this.bind = bind;
+  this.unbind = unbind;
+  this.dispatch = dispatch;
+};
+
+(function() {
+// Define local shortcut:
+var id = 0;
+
+// Define local package:
+var local = {};
+local.plugins = [];
+
+sigma.init = function(dom) {
+  var inst = new Sigma(dom, (++id).toString());
+  sigma.instances[id] = new SigmaPublic(inst);
+  return sigma.instances[id];
+};
+
+/**
+ * This class listen to all the different mouse events, to normalize them and
+ * dispatch action events instead (from "startinterpolate" to "isdragging",
+ * etc).
+ * @constructor
+ * @extends sigma.classes.Cascade
+ * @extends sigma.classes.EventDispatcher
+ * @param {element} dom The DOM element to bind the handlers on.
+ * @this {MouseCaptor}
+ */
+function MouseCaptor(dom) {
+  sigma.classes.Cascade.call(this);
+  sigma.classes.EventDispatcher.call(this);
+
+  /**
+   * Represents "this", without the well-known scope issue.
+   * @private
+   * @type {MouseCaptor}
+   */
+  var self = this;
+
+  /**
+   * The DOM element to bind the handlers on.
+   * @type {element}
+   */
+  var dom = dom;
+
+  /**
+   * The different parameters that define how this instance should work.
+   * @see sigma.classes.Cascade
+   * @type {Object}
+   */
+  this.p = {
+    minRatio: 1,
+    maxRatio: 32,
+    marginRatio: 1,
+    zoomDelta: 0.1,
+    dragDelta: 0.3,
+    zoomMultiply: 2,
+    directZooming: false,
+    blockScroll: true,
+    inertia: 1.1,
+    mouseEnabled: true
+  };
+
+  var oldMouseX = 0;
+  var oldMouseY = 0;
+  var startX = 0;
+  var startY = 0;
+
+  var oldStageX = 0;
+  var oldStageY = 0;
+  var oldRatio = 1;
+
+  var targetRatio = 1;
+  var targetStageX = 0;
+  var targetStageY = 0;
+
+  var lastStageX = 0;
+  var lastStageX2 = 0;
+  var lastStageY = 0;
+  var lastStageY2 = 0;
+
+  var progress = 0;
+  var isZooming = false;
+
+  this.stageX = 0;
+  this.stageY = 0;
+  this.ratio = 1;
+
+  this.mouseX = 0;
+  this.mouseY = 0;
+
+  this.isMouseDown = false;
+
+  /**
+   * Extract the local X position from a mouse event.
+   * @private
+   * @param  {event} e A mouse event.
+   * @return {number} The local X value of the mouse.
+   */
+  function getX(e) {
+    return e.offsetX != undefined && e.offsetX ||
+           e.layerX != undefined && e.layerX ||
+           e.clientX != undefined && e.clientX;
+  };
+
+  /**
+   * Extract the local Y position from a mouse event.
+   * @private
+   * @param  {event} e A mouse event.
+   * @return {number} The local Y value of the mouse.
+   */
+  function getY(e) {
+    return e.offsetY != undefined && e.offsetY ||
+           e.layerY != undefined && e.layerY ||
+           e.clientY != undefined && e.clientY;
+  };
+
+  /**
+   * Extract the wheel delta from a mouse event.
+   * @private
+   * @param  {event} e A mouse event.
+   * @return {number} The wheel delta of the mouse.
+   */
+  function getDelta(e) {
+    return e.wheelDelta != undefined && e.wheelDelta ||
+           e.detail != undefined && -e.detail;
+  };
+
+  /**
+   * The handler listening to the 'move' mouse event. It will set the mouseX
+   * and mouseY values as the mouse position values, prevent the default event,
+   * and dispatch a 'move' event.
+   * @private
+   * @param  {event} event A 'move' mouse event.
+   */
+  function moveHandler(event) {
+    oldMouseX = self.mouseX;
+    oldMouseY = self.mouseY;
+
+    self.mouseX = getX(event);
+    self.mouseY = getY(event);
+
+    self.isMouseDown && drag(event);
+    self.dispatch('move');
+
+    if (event.preventDefault) {
+      event.preventDefault();
+    } else {
+      event.returnValue = false;
+    }
+  };
+
+  /**
+   * The handler listening to the 'up' mouse event. It will set the isMouseDown
+   * value as false, dispatch a 'mouseup' event, and trigger stopDrag().
+   * @private
+   * @param  {event} event A 'up' mouse event.
+   */
+  function upHandler(event) {
+    if (self.p.mouseEnabled && self.isMouseDown) {
+      self.isMouseDown = false;
+      self.dispatch('mouseup');
+      stopDrag();
+
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false;
+      }
+    }
+  };
+
+  /**
+   * The handler listening to the 'down' mouse event. It will set the
+   * isMouseDown value as true, dispatch a 'mousedown' event, and trigger
+   * startDrag().
+   * @private
+   * @param  {event} event A 'down' mouse event.
+   */
+  function downHandler(event) {
+    if (self.p.mouseEnabled) {
+      self.isMouseDown = true;
+      oldMouseX = self.mouseX;
+      oldMouseY = self.mouseY;
+
+      self.dispatch('mousedown');
+
+      startDrag();
+
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false;
+      }
+    }
+  };
+
+  /**
+   * The handler listening to the 'wheel' mouse event. It will trigger
+   * {@link startInterpolate} with the event delta as parameter.
+   * @private
+   * @param  {event} event A 'wheel' mouse event.
+   */
+  function wheelHandler(event) {
+    if (self.p.mouseEnabled) {
+      startInterpolate(
+        self.mouseX,
+        self.mouseY,
+        self.ratio * (getDelta(event) > 0 ?
+          self.p.zoomMultiply :
+          1 / self.p.zoomMultiply)
+      );
+
+      if (self.p['blockScroll']) {
+        if (event.preventDefault) {
+          event.preventDefault();
+        } else {
+          event.returnValue = false;
+        }
+      }
+    }
+  };
+
+  /**
+   * Will start computing the scene X and Y, until {@link stopDrag} is
+   * triggered.
+   */
+  function startDrag() {
+    oldStageX = self.stageX;
+    oldStageY = self.stageY;
+    startX = self.mouseX;
+    startY = self.mouseY;
+
+    lastStageX = self.stageX;
+    lastStageX2 = self.stageX;
+    lastStageY = self.stageY;
+    lastStageY2 = self.stageY;
+
+    self.dispatch('startdrag');
+  };
+
+  /**
+   * Stops computing the scene position.
+   */
+  function stopDrag() {
+    if (oldStageX != self.stageX || oldStageY != self.stageY) {
+      startInterpolate(
+        self.stageX + self.p.inertia * (self.stageX - lastStageX2),
+        self.stageY + self.p.inertia * (self.stageY - lastStageY2)
+      );
+    }
+  };
+
+  /**
+   * Computes the position of the scene, relatively to the mouse position, and
+   * dispatches a "drag" event.
+   */
+  function drag() {
+    var newStageX = self.mouseX - startX + oldStageX;
+    var newStageY = self.mouseY - startY + oldStageY;
+
+    if (newStageX != self.stageX || newStageY != self.stageY) {
+      lastStageX2 = lastStageX;
+      lastStageY2 = lastStageY;
+
+      lastStageX = newStageX;
+      lastStageY = newStageY;
+
+      self.stageX = newStageX;
+      self.stageY = newStageY;
+      self.dispatch('drag');
+    }
+  };
+
+  /**
+   * Will start computing the scene zoom ratio, until {@link stopInterpolate} is
+   * triggered.
+   * @param {number} x     The new stage X.
+   * @param {number} y     The new stage Y.
+   * @param {number} ratio The new zoom ratio.
+   */
+  function startInterpolate(x, y, ratio) {
+    if (self.isMouseDown) {
+      return;
+    }
+
+    window.clearInterval(self.interpolationID);
+    isZooming = ratio != undefined;
+
+    oldStageX = self.stageX;
+    targetStageX = x;
+
+    oldStageY = self.stageY;
+    targetStageY = y;
+
+    oldRatio = self.ratio;
+    targetRatio = ratio || self.ratio;
+    targetRatio = Math.min(
+      Math.max(targetRatio, self.p.minRatio),
+      self.p.maxRatio
+    );
+
+    progress =
+      self.p.directZooming ?
+      1 - (isZooming ? self.p.zoomDelta : self.p.dragDelta) :
+      0;
+
+    if (
+      self.ratio != targetRatio ||
+      self.stageX != targetStageX ||
+      self.stageY != targetStageY
+    ) {
+      interpolate();
+      self.interpolationID = window.setInterval(interpolate, 50);
+      self.dispatch('startinterpolate');
+    }
+  };
+
+  /**
+   * Stops the move interpolation.
+   */
+  function stopInterpolate() {
+    var oldRatio = self.ratio;
+
+    if (isZooming) {
+      self.ratio = targetRatio;
+      self.stageX = targetStageX +
+                    (self.stageX - targetStageX) *
+                    self.ratio /
+                    oldRatio;
+      self.stageY = targetStageY +
+                    (self.stageY - targetStageY) *
+                    self.ratio /
+                    oldRatio;
+    }else {
+      self.stageX = targetStageX;
+      self.stageY = targetStageY;
+    }
+
+    self.dispatch('stopinterpolate');
+  };
+
+  /**
+   * Computes the interpolate ratio and the position of the scene, relatively
+   * to the last mouse event delta received, and dispatches a "interpolate"
+   * event.
+   */
+  function interpolate() {
+    progress += (isZooming ? self.p.zoomDelta : self.p.dragDelta);
+    progress = Math.min(progress, 1);
+
+    var k = sigma.easing.quadratic.easeout(progress);
+    var oldRatio = self.ratio;
+
+    self.ratio = oldRatio * (1 - k) + targetRatio * k;
+
+    if (isZooming) {
+      self.stageX = targetStageX +
+                    (self.stageX - targetStageX) *
+                    self.ratio /
+                    oldRatio;
+
+      self.stageY = targetStageY +
+                    (self.stageY - targetStageY) *
+                    self.ratio /
+                    oldRatio;
+    } else {
+      self.stageX = oldStageX * (1 - k) + targetStageX * k;
+      self.stageY = oldStageY * (1 - k) + targetStageY * k;
+    }
+
+    self.dispatch('interpolate');
+    if (progress >= 1) {
+      window.clearInterval(self.interpolationID);
+      stopInterpolate();
+    }
+  };
+
+  /**
+   * Checks that there is always a part of the graph that is displayed, to
+   * avoid the user to drag the graph out of the stage.
+   * @param  {Object} b      An object containing the borders of the graph.
+   * @param  {number} width  The width of the stage.
+   * @param  {number} height The height of the stage.
+   * @return {MouseCaptor} Returns itself.
+   */
+  function checkBorders(b, width, height) {
+    // TODO : Find the good formula
+    /*if (!isNaN(b.minX) && !isNaN(b.maxX)) {
+      self.stageX = Math.min(
+        self.stageX = Math.max(
+          self.stageX,
+          (b.minX - width) * self.ratio +
+            self.p.marginRatio*(b.maxX - b.minX)
+        ),
+        (b.maxX - width) * self.ratio +
+          width -
+          self.p.marginRatio*(b.maxX - b.minX)
+      );
+    }
+
+    if (!isNaN(b.minY) && !isNaN(b.maxY)) {
+      self.stageY = Math.min(
+        self.stageY = Math.max(
+          self.stageY,
+          (b.minY - height) * self.ratio +
+            self.p.marginRatio*(b.maxY - b.minY)
+        ),
+        (b.maxY - height) * self.ratio +
+          height -
+          self.p.marginRatio*(b.maxY - b.minY)
+      );
+    }*/
+
+    return self;
+  };
+
+  // ADD CALLBACKS
+  dom.addEventListener('DOMMouseScroll', wheelHandler, true);
+  dom.addEventListener('mousewheel', wheelHandler, true);
+  dom.addEventListener('mousemove', moveHandler, true);
+  dom.addEventListener('mousedown', downHandler, true);
+  document.addEventListener('mouseup', upHandler, true);
+
+  this.checkBorders = checkBorders;
+  this.interpolate = startInterpolate;
+}
+
+/**
+ * A class to monitor some local / global probes directly on an instance,
+ * inside a div DOM element.
+ * It executes different methods (called "probes") regularly, and displays
+ * the results on the element.
+ * @constructor
+ * @extends sigma.classes.Cascade
+ * @param {Sigma} instance The instance to monitor.
+ * @param {element} dom    The div DOM element to draw write on.
+ * @this {Monitor}
+ */
+function Monitor(instance, dom) {
+  sigma.classes.Cascade.call(this);
+
+  /**
+   * Represents "this", without the well-known scope issue.
+   * @private
+   * @type {Monitor}
+   */
+  var self = this;
+
+  /**
+   * {@link Sigma} instance owning this Monitor instance.
+   * @type {Sigma}
+   */
+  this.instance = instance;
+
+  /**
+   * Determines if the monitoring is activated or not.
+   * @type {Boolean}
+   */
+  this.monitoring = false;
+
+  /**
+   * The different parameters that define how this instance should work. It
+   * also contains the different probes.
+   * @see sigma.classes.Cascade
+   * @type {Object}
+   */
+  this.p = {
+    fps: 40,
+    dom: dom,
+    globalProbes: {
+      'Time (ms)': sigma.chronos.getExecutionTime,
+      'Queue': sigma.chronos.getQueuedTasksCount,
+      'Tasks': sigma.chronos.getTasksCount,
+      'FPS': sigma.chronos.getFPS
+    },
+    localProbes: {
+      'Nodes count': function() { return self.instance.graph.nodes.length; },
+      'Edges count': function() { return self.instance.graph.edges.length; }
+    }
+  };
+
+  /**
+   * Activates the monitoring: Some texts describing some values about sigma.js
+   * or the owning {@link Sigma} instance will appear over the graph, but
+   * beneath the mouse sensible DOM element.
+   * @return {Monitor} Returns itself.
+   */
+  function activate() {
+    if (!self.monitoring) {
+      self.monitoring = window.setInterval(routine, 1000 / self.p.fps);
+    }
+
+    return self;
+  }
+
+  /**
+   * Desactivates the monitoring: Will disappear, and stop computing the
+   * different probes.
+   * @return {Monitor} Returns itself.
+   */
+  function desactivate() {
+    if (self.monitoring) {
+      window.clearInterval(self.monitoring);
+      self.monitoring = null;
+
+      self.p.dom.innerHTML = '';
+    }
+
+    return self;
+  }
+
+  /**
+   * The private method dedicated to compute the different values to observe.
+   * @private
+   * @return {Monitor} Returns itself.
+   */
+  function routine() {
+    var s = '';
+
+    s += '<p>GLOBAL :</p>';
+    for (var k in self.p.globalProbes) {
+      s += '<p>' + k + ' : ' + self.p.globalProbes[k]() + '</p>';
+    }
+
+    s += '<br><p>LOCAL :</p>';
+    for (var k in self.p.localProbes) {
+      s += '<p>' + k + ' : ' + self.p.localProbes[k]() + '</p>';
+    }
+
+    self.p.dom.innerHTML = s;
+
+    return self;
+  }
+
+  this.activate = activate;
+  this.desactivate = desactivate;
+}
+
+/**
+ * Sigma is the main class. It represents the core of any instance id sigma.js.
+ * It is private and can be initialized only from inside sigma.js. To see its
+ * public interface, see {@link SigmaPublic}.
+ * It owns its own {@link Graph}, {@link MouseCaptor}, {@link Plotter}
+ * and {@link Monitor}.
+ * @constructor
+ * @extends sigma.classes.Cascade
+ * @extends sigma.classes.EventDispatcher
+ * @param {element} root The DOM root of this instance (a div, for example).
+ * @param {string} id    The ID of this instance.
+ * @this {Sigma}
+ */
+function Sigma(root, id) {
+  sigma.classes.Cascade.call(this);
+  sigma.classes.EventDispatcher.call(this);
+
+  /**
+   * Represents "this", without the well-known scope issue.
+   * @private
+   * @type {Sigma}
+   */
+  var self = this;
+
+  /**
+   * The ID of the instance.
+   * @type {string}
+   */
+  this.id = id.toString();
+
+  /**
+   * The different parameters that define how this instance should work.
+   * @see sigma.classes.Cascade
+   * @type {Object}
+   */
+  this.p = {
+    auto: true,
+    drawNodes: 2,
+    drawEdges: 1,
+    drawLabels: 2,
+    lastNodes: 2,
+    lastEdges: 0,
+    lastLabels: 2,
+    drawHoverNodes: true,
+    drawActiveNodes: true
+  };
+
+  /**
+   * The root DOM element of this instance, containing every other elements.
+   * @type {element}
+   */
+  this.domRoot = root;
+
+  /**
+   * The width of this instance - initially, the root's width.
+   * @type {number}
+   */
+  this.width = this.domRoot.offsetWidth;
+
+  /**
+   * The height of this instance - initially, the root's height.
+   * @type {number}
+   */
+  this.height = this.domRoot.offsetHeight;
+
+  /**
+   * The graph of this instance - initiallyempty.
+   * @type {Graph}
+   */
+  this.graph = new Graph();
+
+  /**
+   * An object referencing every DOM elements used by this instance.
+   * @type {Object}
+   */
+  this.domElements = {};
+
+  initDOM('edges', 'canvas');
+  initDOM('nodes', 'canvas');
+  initDOM('labels', 'canvas');
+  initDOM('hover', 'canvas');
+  initDOM('monitor', 'div');
+  initDOM('mouse', 'canvas');
+
+  /**
+   * The class dedicated to manage the drawing process of the graph of the
+   * different canvas.
+   * @type {Plotter}
+   */
+  this.plotter = new Plotter(
+    this.domElements.nodes.getContext('2d'),
+    this.domElements.edges.getContext('2d'),
+    this.domElements.labels.getContext('2d'),
+    this.domElements.hover.getContext('2d'),
+    this.graph,
+    this.width,
+    this.height
+  );
+
+  /**
+   * The class dedicated to monitor different probes about the running
+   * processes or the data, such as the number of nodes or edges, or how
+   * many times the graph is drawn per second.
+   * @type {Monitor}
+   */
+  this.monitor = new Monitor(
+    this,
+    this.domElements.monitor
+  );
+
+  /**
+   * The class dedicated to manage the different mouse events.
+   * @type {MouseCaptor}
+   */
+  this.mousecaptor = new MouseCaptor(
+    this.domElements.mouse,
+    this.id
+  );
+
+  // Interaction listeners:
+  this.mousecaptor.bind('drag interpolate', function(e) {
+    self.draw(
+      self.p.auto ? 2 : self.p.drawNodes,
+      self.p.auto ? 0 : self.p.drawEdges,
+      self.p.auto ? 2 : self.p.drawLabels,
+      true
+    );
+  }).bind('stopdrag stopinterpolate', function(e) {
+    self.draw(
+      self.p.auto ? 2 : self.p.drawNodes,
+      self.p.auto ? 1 : self.p.drawEdges,
+      self.p.auto ? 2 : self.p.drawLabels,
+      true
+    );
+  }).bind('mousedown mouseup', function(e) {
+    var targeted = self.graph.nodes.filter(function(n) {
+      return !!n['hover'];
+    }).map(function(n) {
+      return n.id;
+    });
+
+    self.dispatch(
+      e['type'] == 'mousedown' ?
+        'downgraph' :
+        'upgraph'
+    );
+
+    if (targeted.length) {
+      self.dispatch(
+        e['type'] == 'mousedown' ?
+          'downnodes' :
+          'upnodes',
+        targeted
+      );
+    }
+  }).bind('move', function() {
+    self.domElements.hover.getContext('2d').clearRect(
+      0,
+      0,
+      self.domElements.hover.width,
+      self.domElements.hover.height
+    );
+
+    drawHover();
+    drawActive();
+  });
+
+  sigma.chronos.bind('startgenerators', function() {
+    if (sigma.chronos.getGeneratorsIDs().some(function(id) {
+      return !!id.match(new RegExp('_ext_' + self.id + '$', ''));
+    })) {
+      self.draw(
+        self.p.auto ? 2 : self.p.drawNodes,
+        self.p.auto ? 0 : self.p.drawEdges,
+        self.p.auto ? 2 : self.p.drawLabels
+      );
+    }
+  }).bind('stopgenerators', function() {
+    self.draw();
+  });
+
+  /**
+   * Resizes the element, and redraws the graph with the last settings.
+   * @param  {?number} w The new width (if undefined, it will use the root
+   *                     width).
+   * @param  {?number} h The new height (if undefined, it will use the root
+   *                     height).
+   * @return {Sigma} Returns itself.
+   */
+  function resize(w, h) {
+    var oldW = self.width, oldH = self.height;
+
+    if (w != undefined && h != undefined) {
+      self.width = w;
+      self.height = h;
+    }else {
+      self.width = self.domRoot.offsetWidth;
+      self.height = self.domRoot.offsetHeight;
+    }
+
+    if (oldW != self.width || oldH != self.height) {
+      for (var k in self.domElements) {
+        self.domElements[k].setAttribute('width', self.width + 'px');
+        self.domElements[k].setAttribute('height', self.height + 'px');
+      }
+
+      self.plotter.resize(self.width, self.height);
+
+      self.draw(
+        self.p.lastNodes,
+        self.p.lastEdges,
+        self.p.lastLabels,
+        true
+      );
+    }
+    return self;
+  };
+
+  /**
+   * Kills every drawing task currently running. Basically, it stops this
+   * instance's drawing process.
+   * @return {Sigma} Returns itself.
+   */
+  function clearSchedule() {
+    sigma.chronos.removeTask(
+      'node_' + self.id, 2
+    ).removeTask(
+      'edge_' + self.id, 2
+    ).removeTask(
+      'label_' + self.id, 2
+    ).stopTasks();
+    return self;
+  };
+
+  /**
+   * Initialize a DOM element, that will be stores by this instance, to make
+   * automatic these elements resizing.
+   * @private
+   * @param  {string} id   The element's ID.
+   * @param  {string} type The element's nodeName (Example : canvas, div, ...).
+   * @return {Sigma} Returns itself.
+   */
+  function initDOM(id, type) {
+    self.domElements[id] = document.createElement(type);
+    self.domElements[id].style.position = 'absolute';
+    self.domElements[id].setAttribute('id', 'sigma_' + id + '_' + self.id);
+    self.domElements[id].setAttribute('class', 'sigma_' + id + '_' + type);
+    self.domElements[id].setAttribute('width', self.width + 'px');
+    self.domElements[id].setAttribute('height', self.height + 'px');
+
+    self.domRoot.appendChild(self.domElements[id]);
+    return self;
+  };
+
+  /**
+   * Starts the graph drawing process. The three first parameters indicate
+   * how the different layers have to be drawn:
+   * . -1: The layer is not drawn, but it is not erased.
+   * . 0:  The layer is not drawn.
+   * . 1:  The layer is drawn progressively.
+   * . 2:  The layer is drawn directly.
+   * @param  {?number} nodes  Determines if and how the nodes must be drawn.
+   * @param  {?number} edges  Determines if and how the edges must be drawn.
+   * @param  {?number} labels Determines if and how the labels must be drawn.
+   * @param  {?boolean} safe  If true, nothing will happen if any generator
+   *                          affiliated to this instance is currently running
+   *                          (an iterative layout, for example).
+   * @return {Sigma} Returns itself.
+   */
+  function draw(nodes, edges, labels, safe) {
+    if (safe && sigma.chronos.getGeneratorsIDs().some(function(id) {
+      return !!id.match(new RegExp('_ext_' + self.id + '$', ''));
+    })) {
+      return self;
+    }
+
+    var n = (nodes == undefined) ? self.p.drawNodes : nodes;
+    var e = (edges == undefined) ? self.p.drawEdges : edges;
+    var l = (labels == undefined) ? self.p.drawLabels : labels;
+
+    var params = {
+      nodes: n,
+      edges: e,
+      labels: l
+    };
+
+    self.p.lastNodes = n;
+    self.p.lastEdges = e;
+    self.p.lastLabels = l;
+
+    // Remove tasks:
+    clearSchedule();
+
+    // Rescale graph:
+    self.graph.rescale(
+      self.width,
+      self.height,
+      n > 0,
+      e > 0
+    ).setBorders();
+
+    self.mousecaptor.checkBorders(
+      self.graph.borders,
+      self.width,
+      self.height
+    );
+
+    self.graph.translate(
+      self.mousecaptor.stageX,
+      self.mousecaptor.stageY,
+      self.mousecaptor.ratio,
+      n > 0,
+      e > 0
+    );
+
+    self.dispatch(
+      'graphscaled'
+    );
+
+    // Clear scene:
+    for (var k in self.domElements) {
+      if (
+        self.domElements[k].nodeName.toLowerCase() == 'canvas' &&
+        (params[k] == undefined || params[k] >= 0)
+      ) {
+        self.domElements[k].getContext('2d').clearRect(
+          0,
+          0,
+          self.domElements[k].width,
+          self.domElements[k].height
+        );
+      }
+    }
+
+    self.plotter.currentEdgeIndex = 0;
+    self.plotter.currentNodeIndex = 0;
+    self.plotter.currentLabelIndex = 0;
+
+    var previous = null;
+    var start = false;
+
+    if (n) {
+      if (n > 1) {
+        while (self.plotter.task_drawNode()) {}
+      }else {
+        sigma.chronos.addTask(
+          self.plotter.task_drawNode,
+          'node_' + self.id,
+          false
+        );
+
+        start = true;
+        previous = 'node_' + self.id;
+      }
+    }
+
+    if (l) {
+      if (l > 1) {
+        while (self.plotter.task_drawLabel()) {}
+      } else {
+        if (previous) {
+          sigma.chronos.queueTask(
+            self.plotter.task_drawLabel,
+            'label_' + self.id,
+            previous
+          );
+        } else {
+          sigma.chronos.addTask(
+            self.plotter.task_drawLabel,
+            'label_' + self.id,
+            false
+          );
+        }
+
+        start = true;
+        previous = 'label_' + self.id;
+      }
+    }
+
+    if (e) {
+      if (e > 1) {
+        while (self.plotter.task_drawEdge()) {}
+      }else {
+        if (previous) {
+          sigma.chronos.queueTask(
+            self.plotter.task_drawEdge,
+            'edge_' + self.id,
+            previous
+          );
+        }else {
+          sigma.chronos.addTask(
+            self.plotter.task_drawEdge,
+            'edge_' + self.id,
+            false
+          );
+        }
+
+        start = true;
+        previous = 'edge_' + self.id;
+      }
+    }
+
+    self.dispatch(
+      'draw'
+    );
+
+    self.refresh();
+
+    start && sigma.chronos.runTasks();
+    return self;
+  };
+
+  /**
+   * Draws the hover and active nodes labels.
+   * @return {Sigma} Returns itself.
+   */
+  function refresh() {
+    self.domElements.hover.getContext('2d').clearRect(
+      0,
+      0,
+      self.domElements.hover.width,
+      self.domElements.hover.height
+    );
+
+    drawHover();
+    drawActive();
+
+    return self;
+  }
+
+  /**
+   * Draws the hover nodes labels. This method is applied directly, and does
+   * not use the pseudo-asynchronous tasks process.
+   * @return {Sigma} Returns itself.
+   */
+  function drawHover() {
+    if (self.p.drawHoverNodes) {
+      self.graph.checkHover(
+        self.mousecaptor.mouseX,
+        self.mousecaptor.mouseY
+      );
+
+      self.graph.nodes.forEach(function(node) {
+        if (node.hover && !node.active) {
+          self.plotter.drawHoverNode(node);
+        }
+      });
+    }
+
+    return self;
+  }
+
+  /**
+   * Draws the active nodes labels. This method is applied directly, and does
+   * not use the pseudo-asynchronous tasks process.
+   * @return {Sigma} Returns itself.
+   */
+  function drawActive() {
+    if (self.p.drawActiveNodes) {
+      self.graph.nodes.forEach(function(node) {
+        if (node.active) {
+          self.plotter.drawActiveNode(node);
+        }
+      });
+    }
+
+    return self;
+  }
+
+  // Apply plugins:
+  for (var i = 0; i < local.plugins.length; i++) {
+    local.plugins[i](this);
+  }
+
+  this.draw = draw;
+  this.resize = resize;
+  this.refresh = refresh;
+  this.drawHover = drawHover;
+  this.drawActive = drawActive;
+  this.clearSchedule = clearSchedule;
+
+  window.addEventListener('resize', function() {
+    self.resize();
+  });
+}
+
+/**
+ * This class draws the graph on the different canvas DOM elements. It just
+ * contains all the different methods to draw the graph, synchronously or
+ * pseudo-asynchronously.
+ * @constructor
+ * @param {CanvasRenderingContext2D} nodesCtx  Context dedicated to draw nodes.
+ * @param {CanvasRenderingContext2D} edgesCtx  Context dedicated to draw edges.
+ * @param {CanvasRenderingContext2D} labelsCtx Context dedicated to draw
+ *                                             labels.
+ * @param {CanvasRenderingContext2D} hoverCtx  Context dedicated to draw hover
+ *                                             nodes labels.
+ * @param {Graph} graph                        A reference to the graph to
+ *                                             draw.
+ * @param {number} w                           The width of the DOM root
+ *                                             element.
+ * @param {number} h                           The width of the DOM root
+ *                                             element.
+ * @extends sigma.classes.Cascade
+ * @this {Plotter}
+ */
+function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
+  sigma.classes.Cascade.call(this);
+
+  /**
+   * Represents "this", without the well-known scope issue.
+   * @private
+   * @type {Plotter}
+   */
+  var self = this;
+
+  /**
+   * The different parameters that define how this instance should work.
+   * @see sigma.classes.Cascade
+   * @type {Object}
+   */
+  this.p = {
+    // -------
+    // LABELS:
+    // -------
+    //   Label color:
+    //   - 'node'
+    //   - default (then defaultLabelColor
+    //              will be used instead)
+    labelColor: 'default',
+    defaultLabelColor: '#000',
+    //   Label hover background color:
+    //   - 'node'
+    //   - default (then defaultHoverLabelBGColor
+    //              will be used instead)
+    labelHoverBGColor: 'default',
+    defaultHoverLabelBGColor: '#fff',
+    //   Label hover shadow:
+    labelHoverShadow: true,
+    labelHoverShadowColor: '#000',
+    //   Label hover color:
+    //   - 'node'
+    //   - default (then defaultLabelHoverColor
+    //              will be used instead)
+    labelHoverColor: 'default',
+    defaultLabelHoverColor: '#000',
+    //   Label active background color:
+    //   - 'node'
+    //   - default (then defaultActiveLabelBGColor
+    //              will be used instead)
+    labelActiveBGColor: 'default',
+    defaultActiveLabelBGColor: '#fff',
+    //   Label active shadow:
+    labelActiveShadow: true,
+    labelActiveShadowColor: '#000',
+    //   Label active color:
+    //   - 'node'
+    //   - default (then defaultLabelActiveColor
+    //              will be used instead)
+    labelActiveColor: 'default',
+    defaultLabelActiveColor: '#000',
+    //   Label size:
+    //   - 'fixed'
+    //   - 'proportional'
+    //   Label size:
+    //   - 'fixed'
+    //   - 'proportional'
+    labelSize: 'fixed',
+    defaultLabelSize: 12, // for fixed display only
+    labelSizeRatio: 2,    // for proportional display only
+    labelThreshold: 6,
+    font: 'Arial',
+    hoverFont: '',
+    activeFont: '',
+    fontStyle: '',
+    hoverFontStyle: '',
+    activeFontStyle: '',
+    // ------
+    // EDGES:
+    // ------
+    //   Edge color:
+    //   - 'source'
+    //   - 'target'
+    //   - default (then defaultEdgeColor or edge['color']
+    //              will be used instead)
+    edgeColor: 'source',
+    defaultEdgeColor: '#aaa',
+    defaultEdgeType: 'line',
+    // ------
+    // NODES:
+    // ------
+    defaultNodeColor: '#aaa',
+    // HOVER:
+    //   Node hover color:
+    //   - 'node'
+    //   - default (then defaultNodeHoverColor
+    //              will be used instead)
+    nodeHoverColor: 'node',
+    defaultNodeHoverColor: '#fff',
+    // ACTIVE:
+    //   Node active color:
+    //   - 'node'
+    //   - default (then defaultNodeActiveColor
+    //              will be used instead)
+    nodeActiveColor: 'node',
+    defaultNodeActiveColor: '#fff',
+    //   Node border color:
+    //   - 'node'
+    //   - default (then defaultNodeBorderColor
+    //              will be used instead)
+    borderSize: 0,
+    nodeBorderColor: 'node',
+    defaultNodeBorderColor: '#fff',
+    // --------
+    // PROCESS:
+    // --------
+    edgesSpeed: 200,
+    nodesSpeed: 200,
+    labelsSpeed: 200
+  };
+
+  /**
+   * The canvas context dedicated to draw the nodes.
+   * @type {CanvasRenderingContext2D}
+   */
+  var nodesCtx = nodesCtx;
+
+  /**
+   * The canvas context dedicated to draw the edges.
+   * @type {CanvasRenderingContext2D}
+   */
+  var edgesCtx = edgesCtx;
+
+  /**
+   * The canvas context dedicated to draw the labels.
+   * @type {CanvasRenderingContext2D}
+   */
+  var labelsCtx = labelsCtx;
+
+  /**
+   * The canvas context dedicated to draw the hover nodes.
+   * @type {CanvasRenderingContext2D}
+   */
+  var hoverCtx = hoverCtx;
+
+  /**
+   * A reference to the graph to draw.
+   * @type {Graph}
+   */
+  var graph = graph;
+
+  /**
+   * The width of the stage to draw on.
+   * @type {number}
+   */
+  var width = w;
+
+  /**
+   * The height of the stage to draw on.
+   * @type {number}
+   */
+  var height = h;
+
+  /**
+   * The index of the next edge to draw.
+   * @type {number}
+   */
+  this.currentEdgeIndex = 0;
+
+  /**
+   * The index of the next node to draw.
+   * @type {number}
+   */
+  this.currentNodeIndex = 0;
+
+  /**
+   * The index of the next label to draw.
+   * @type {number}
+   */
+  this.currentLabelIndex = 0;
+
+  /**
+   * An atomic function to drawn the N next edges, with N as edgesSpeed.
+   * The counter is {@link this.currentEdgeIndex}.
+   * This function has been designed to work with {@link sigma.chronos}, that
+   * will insert frames at the middle of the calls, to make the edges drawing
+   * process fluid for the user.
+   * @see sigma.chronos
+   * @return {boolean} Returns true if all the edges are drawn and false else.
+   */
+  function task_drawEdge() {
+    var c = graph.edges.length;
+    var s, t, i = 0;
+
+    while (i++< self.p.edgesSpeed && self.currentEdgeIndex < c) {
+      e = graph.edges[self.currentEdgeIndex];
+      s = e['source'];
+      t = e['target'];
+      if (e['hidden'] ||
+          s['hidden'] ||
+          t['hidden'] ||
+          (!self.isOnScreen(s) && !self.isOnScreen(t))) {
+        self.currentEdgeIndex++;
+      }else {
+        drawEdge(graph.edges[self.currentEdgeIndex++]);
+      }
+    }
+
+    return self.currentEdgeIndex < c;
+  };
+
+  /**
+   * An atomic function to drawn the N next nodes, with N as nodesSpeed.
+   * The counter is {@link this.currentEdgeIndex}.
+   * This function has been designed to work with {@link sigma.chronos}, that
+   * will insert frames at the middle of the calls, to make the nodes drawing
+   * process fluid for the user.
+   * @see sigma.chronos
+   * @return {boolean} Returns true if all the nodes are drawn and false else.
+   */
+  function task_drawNode() {
+    var c = graph.nodes.length;
+    var i = 0;
+
+    while (i++< self.p.nodesSpeed && self.currentNodeIndex < c) {
+      if (!self.isOnScreen(graph.nodes[self.currentNodeIndex])) {
+        self.currentNodeIndex++;
+      }else {
+        drawNode(graph.nodes[self.currentNodeIndex++]);
+      }
+    }
+
+    return self.currentNodeIndex < c;
+  };
+
+  /**
+   * An atomic function to drawn the N next labels, with N as labelsSpeed.
+   * The counter is {@link this.currentEdgeIndex}.
+   * This function has been designed to work with {@link sigma.chronos}, that
+   * will insert frames at the middle of the calls, to make the labels drawing
+   * process fluid for the user.
+   * @see sigma.chronos
+   * @return {boolean} Returns true if all the labels are drawn and false else.
+   */
+  function task_drawLabel() {
+    var c = graph.nodes.length;
+    var i = 0;
+
+    while (i++< self.p.labelsSpeed && self.currentLabelIndex < c) {
+      if (!self.isOnScreen(graph.nodes[self.currentLabelIndex])) {
+        self.currentLabelIndex++;
+      }else {
+        drawLabel(graph.nodes[self.currentLabelIndex++]);
+      }
+    }
+
+    return self.currentLabelIndex < c;
+  };
+
+  /**
+   * Draws one node to the corresponding canvas.
+   * @param  {Object} node The node to draw.
+   * @return {Plotter} Returns itself.
+   */
+  function drawNode(node) {
+    var size = Math.round(node['displaySize'] * 10) / 10;
+    var ctx = nodesCtx;
+
+    ctx.fillStyle = node['color'];
+    ctx.beginPath();
+    ctx.arc(node['displayX'],
+            node['displayY'],
+            size,
+            0,
+            Math.PI * 2,
+            true);
+
+    ctx.closePath();
+    ctx.fill();
+
+    node['hover'] && drawHoverNode(node);
+    return self;
+  };
+
+  /**
+   * Draws one edge to the corresponding canvas.
+   * @param  {Object} edge The edge to draw.
+   * @return {Plotter} Returns itself.
+   */
+  function drawEdge(edge) {
+    var x1 = edge['source']['displayX'];
+    var y1 = edge['source']['displayY'];
+    var x2 = edge['target']['displayX'];
+    var y2 = edge['target']['displayY'];
+    var color = edge['color'];
+
+    if (!color) {
+      switch (self.p.edgeColor) {
+        case 'source':
+          color = edge['source']['color'] ||
+                  self.p.defaultNodeColor;
+          break;
+        case 'target':
+          color = edge['target']['color'] ||
+                  self.p.defaultNodeColor;
+          break;
+        default:
+          color = self.p.defaultEdgeColor;
+          break;
+      }
+    }
+
+    var ctx = edgesCtx;
+
+    switch (edge['type'] || self.p.defaultEdgeType) {
+      case 'curve':
+        ctx.strokeStyle = color;
+        ctx.lineWidth = edge['displaySize'] / 3;
+        ctx.beginPath();
+        ctx.moveTo(x1,