Added docs and examples

11 years ago · 49a00ceb5a
--- a/docs/css/prettify.css
+++ b/docs/css/prettify.css
@ -0,0 +1,87 @@
 .com {
    color: gray;
 }

 .lit {
    color: red;
 }

 .pun {
    color: gray;
 }

 .pln {
    color: #333333;
 }

 pre.prettyprint {
    border: 1px solid lightgray;
    background-color: #fcfcfc;
    padding: 5px;

    font-size: 10pt;
    line-height: 1.5em;
    font-family: monospace;
 }

 ol.linenums {
    margin-top:0;
    margin-bottom:0;
 }

 li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
    list-style:none;
 }

 li.L1,li.L3,li.L5,li.L7,li.L9 {
    background:#eee;
 }

 .str,.atv {
    color: green;
 }

 .kwd,.tag {
    color:#2B7CE9;
 }

 .typ,.atn,.dec {
    color: darkorange;
 }

@media print {
    .com {
        color:#600;
        font-style:italic;
    }

    .typ {
        color:#404;
        font-weight:700;
    }

    .lit {
        color:#044;
    }

    .pun {
        color:#440;
    }

    .pln {
        color:#000;
    }

    .atn {
        color:#404;
    }

    .str,.atv {
        color:#060;
    }

    .kwd,.tag {
        color:#006;
        font-weight:700;
    }
 }
--- a/docs/css/style.css
+++ b/docs/css/style.css
@ -0,0 +1,69 @@
 html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
 }

 body, td, th {
    font-family: arial, sans-serif;
    font-size: 11pt;
    color: #4D4D4D;
    line-height: 1.7em;
 }

 #container {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 700px;
 }

 h1 {
    font-size: 180%;
    font-weight: bold;
    padding: 0;
    margin: 1em 0 1em 0;
 }

 h2 {
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #a0c0f0;
    color: #2B7CE9;
 }

 h3 {
    font-size: 140%;
 }


 a {
    color: #2B7CE9;
    text-decoration: none;
 }
 a:visited {
    color: #2E60A4;
 }
 a:hover {
    color: red;
    text-decoration: underline;
 }

 table {
    border-collapse: collapse;
 }

 th {
    font-weight: bold;
    border: 1px solid lightgray;
    background-color: #E5E5E5;
    text-align: left;
    vertical-align: top;
    padding: 5px;
 }

 td {
    border: 1px solid lightgray;
    padding: 5px;
    vertical-align: top;
 }
--- a/docs/dataset.html
+++ b/docs/dataset.html
@ -0,0 +1,23 @@
 <!doctype html>
 <html>

 <head>
    <title>vis.js | DataSet documentation</title>
    <link rel='stylesheet' href='css/style.css' type='text/css' />

    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
    <link href='css/style.css' type='text/css' rel='stylesheet'>

    <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>

 <body>
 <div id="container">

    <h1>DataSet documentation</h1>

    <p>coming soon...</p>

 </div>
 </body>
 </html>
--- a/docs/graph.html
+++ b/docs/graph.html
--- a/docs/img/graph/graph.png
+++ b/docs/img/graph/graph.png
--- a/docs/img/graph/graph120x60.png
+++ b/docs/img/graph/graph120x60.png
--- a/docs/img/timeline/timeline.png
+++ b/docs/img/timeline/timeline.png
--- a/docs/img/timeline/timeline120x60.png
+++ b/docs/img/timeline/timeline120x60.png
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,29 @@
 <!doctype html>
 <html>

 <head>
    <title>vis.js | documentation</title>
    <link rel='stylesheet' href='css/style.css' type='text/css' />

    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
    <link href='css/style.css' type='text/css' rel='stylesheet'>

    <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>

 <body>
 <div id="container">

    <h1>vis.js documentation</h1>

    <p>Vis.js contains the following components:</p>

    <ul>
        <li><a href="dataset.html">DataSet</a></li>
        <li><a href="graph.html">Graph</a></li>
        <li><a href="timeline.html">Timeline</a></li>
    </ul>

 </div>
 </body>
 </html>
--- a/docs/lib/prettify/lang-apollo.js
+++ b/docs/lib/prettify/lang-apollo.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
 null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])
--- a/docs/lib/prettify/lang-css.js
+++ b/docs/lib/prettify/lang-css.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
 ["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])
--- a/docs/lib/prettify/lang-hs.js
+++ b/docs/lib/prettify/lang-hs.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
 null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])
--- a/docs/lib/prettify/lang-lisp.js
+++ b/docs/lib/prettify/lang-lisp.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
 null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])
--- a/docs/lib/prettify/lang-lua.js
+++ b/docs/lib/prettify/lang-lua.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
 ["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])
--- a/docs/lib/prettify/lang-ml.js
+++ b/docs/lib/prettify/lang-ml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
 ["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])
--- a/docs/lib/prettify/lang-proto.js
+++ b/docs/lib/prettify/lang-proto.js
@ -0,0 +1 @@
 PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])
--- a/docs/lib/prettify/lang-scala.js
+++ b/docs/lib/prettify/lang-scala.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
 ["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])
--- a/docs/lib/prettify/lang-sql.js
+++ b/docs/lib/prettify/lang-sql.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
 null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])
--- a/docs/lib/prettify/lang-vb.js
+++ b/docs/lib/prettify/lang-vb.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
 null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])
--- a/docs/lib/prettify/lang-vhdl.js
+++ b/docs/lib/prettify/lang-vhdl.js
@ -0,0 +1,3 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
 null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
 ["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])
--- a/docs/lib/prettify/lang-wiki.js
+++ b/docs/lib/prettify/lang-wiki.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
 PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])
--- a/docs/lib/prettify/lang-yaml.js
+++ b/docs/lib/prettify/lang-yaml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
 ["yaml","yml"])
--- a/docs/lib/prettify/prettify.css
+++ b/docs/lib/prettify/prettify.css
@ -0,0 +1 @@
 .str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
--- a/docs/lib/prettify/prettify.js
+++ b/docs/lib/prettify/prettify.js
@ -0,0 +1,33 @@
 window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
 (function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
 for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
 8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
 continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
 a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
 g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
 ""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push("                ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
 f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
 if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
 null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
 null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
 null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
 d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
 for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
 function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
 d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
 "&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
 "~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
 la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
 hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
 "htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
 ["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
 hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
 hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
 cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
 u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
 multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
 ["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
 0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
 " "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
 document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
 PR_TAG:"tag",PR_TYPE:S}})()
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -0,0 +1,492 @@
 <html>

 <head>
    <title>vis.js | timeline documentation</title>

    <link href='css/prettify.css' type='text/css' rel='stylesheet'>
    <link href='css/style.css' type='text/css' rel='stylesheet'>

    <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>

 <body onload="prettyPrint();">
 <div id="container">

 <h1>Timeline documentation</h1>

 <table>
    <tr>
        <td>Author</td>
        <td>Jos de Jong, <a href="http://www.almende.com" target="_blank">Almende B.V.</a></td>
    </tr>
    <tr>
        <td>Webpage</td>
        <td><a href="http://visjs.org" target="_blank">http://visjs.org</a></td>
    </tr>
    <tr>
        <td>License</td>
        <td> <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a></td>
    </tr>

 </table>


 <h2 id="Contents">Contents</h2>
 <ul>
    <li><a href="#Overview">Overview</a></li>
    <li><a href="#Example">Example</a></li>
    <li><a href="#Loading">Loading</a></li>
    <li><a href="#Data_Format">Data Format</a></li>
    <li><a href="#Configuration_Options">Configuration Options</a></li>
    <li><a href="#Methods">Methods</a></li>
    <li><a href="#Styles">Styles</a></li>
    <li><a href="#Data_Policy">Data Policy</a></li>
 </ul>

 <h2 id="Overview">Overview</h2>
 <p>
    The Timeline is an interactive visualization chart to visualize data in time.
    The data items can take place on a single date, or have a start and end date (a range).
    You can freely move and zoom in the timeline by dragging and scrolling in the
    Timeline. Items can be created, edited, and deleted in the timeline.
    The time scale on the axis is adjusted automatically, and supports scales ranging
    from milliseconds to years.
 </p>

 <h2 id="Example">Example</h2>
 <p>
    The following code shows how to create a Timeline and provide it with data.
    More examples can be found in the <a href="../examples">examples</a> directory.
 </p>

 <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
    &lt;title&gt;Timeline | Basic demo&lt;/title&gt;

    &lt;style type="text/css"&gt;
        body, html {
            font-family: sans-serif;
        }
    &lt;/style&gt;

    &lt;script src="../../vis.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="visualization"&gt;&lt;/div&gt;

 &lt;script type="text/javascript"&gt;
    var container = document.getElementById('visualization');
    var items = [
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, items, options);
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>


 <h2 id="Loading">Loading</h2>
 <p>
    Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
    in a subfolder of your project. Include the library script in the head of your html code:
 </p>

 <pre class="prettyprint lang-html">
 &lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;
 </pre>

 The constructor of the Timeline is <code>vis.Timeline</code>
 <pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre>


 The constructor accepts three parameters:
 <ul>
    <li>
        <code>container</code> is the DOM element in which to create the graph.
    </li>
    <li>
        <code>items</code> is an Array containing items. The properties of an
        item are described in section <a href="#Data_Format">Data Format</a>.
    </li>
    <li>
        <code>options</code> is an optional Object containing a name-value map
        with options. Options can also be set using the method
        <code>setOptions</code>.
    </li>
 </ul>

 <h2 id="Data_Format">Data Format</h2>

 <p>
    The Timeline uses regular Arrays and Objects as data format.
    Data items can contain the properties <code>start</code>,
    <code>end</code> (optional), <code>content</code>,
    <code>group</code> (optional), and <code>className</code> (optional).
 </p>

 <p>
    A table is constructed as:
 </p>

 <pre class="prettyprint lang-js">
 var items = [
    {
        start: new Date(2010, 7, 15),
        end: new Date(2010, 8, 2),  // end is optional
        content: 'Trajectory A'
        // Optional: a field 'group'
        // Optional: a field 'className'
        // Optional: a field 'editable'
    }
    // more items...
 ]);
 </pre>

 <h3>Properties</h3>

 <p>
    The item properties are defined as:
 </p>

 <table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Required</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>start</td>
        <td>Date</td>
        <td>yes</td>
        <td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
    </tr>
    <tr>
        <td>end</td>
        <td>Date</td>
        <td>no</td>
        <td>The end date of the item. The end date is optional, and can be left <code>null</code>.
            If end date is provided, the item is displayed as a range.
            If not, the item is displayed as a box.</td>
    </tr>
    <tr>
        <td>content</td>
        <td>String</td>
        <td>yes</td>
        <td>The contents of the item. This can be plain text or html code.</td>
    </tr>
    <tr>
        <td>type</td>
        <td>String</td>
        <td>'box'</td>
        <td>The type of the item. Can be 'box' (default), 'range', or 'point'.</td>
    </tr>
    <tr>
        <td>group</td>
        <td>any type</td>
        <td>no</td>
        <td>This field is optional. When the group column is provided,
            all items with the same group are placed on one line.
            A vertical axis is displayed showing the groups.
            Grouping items can be useful for example when showing availability of multiple
            people, rooms, or other resources next to each other.<br>
        </td>
    </tr>
    <tr>
        <td>className</td>
        <td>String</td>
        <td>no</td>
        <td>This field is optional. A className can be used to give items
            and individual css style. For example, when an item has className
            'red', one can define a css style
            <code>
                .red {
                background-color: red;
                border-color: dark-red;
                }
            </code>.
            More details on how to style items can be found in the section
            <a href="#Styles">Styles</a>.
        </td>
    </tr>
 </table>


 <h2 id="Configuration_Options">Configuration Options</h2>

 <p>
    Options can be used to customize the timeline.
    Options are defined as a JSON object. All options are optional.
 </p>

 <pre class="prettyprint lang-js">
 var options = {
    width: '100%',
    height: '30px'
 };
 </pre>

 <p>
    The following options are available.
 </p>

 <table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
    </tr>

    <tr>
        <td>align</td>
        <td>String</td>
        <td>"center"</td>
        <td>Alignment of items with type 'box'. Available values are
            'center' (default), 'left', or 'right').</td>
    </tr>

    <tr>
        <td>autoResize</td>
        <td>boolean</td>
        <td>false</td>
        <td>If true, the Timeline will automatically detect when its
            container is resized, and redraw itself accordingly.</td>
    </tr>

    <tr>
        <td>end</td>
        <td>Date</td>
        <td>none</td>
        <td>The initial end date for the axis of the timeline.
            If not provided, the latest date present in the items set is taken as
            end date.</td>
    </tr>

    <tr>
        <td>height</td>
        <td>String</td>
        <td>none</td>
        <td>The height of the timeline in pixels or as a percentage.
            When height is undefined or null, the height of the timeline is automatically
            adjusted to fit the contents.
            It is possible to set a maximum height using option <code>maxHeight</code>
            to prevent the timeline from getting too high in case of automatically
            calculated height.
        </td>
    </tr>

    <tr>
        <td>margin.axis</td>
        <td>Number</td>
        <td>20</td>
        <td>The minimal margin in pixels between items and the time axis.</td>
    </tr>

    <tr>
        <td>margin.item</td>
        <td>Number</td>
        <td>10</td>
        <td>The minimal margin in pixels between items.</td>
    </tr>

    <tr>
        <td>max</td>
        <td>Date</td>
        <td>none</td>
        <td>Set a maximum Date for the visible range.
            It will not be possible to move beyond this maximum.
        </td>
    </tr>

    <tr>
        <td>maxHeight</td>
        <td>Number</td>
        <td>none</td>
        <td>Specifies a maximum height for the Timeline in pixels.
        </td>
    </tr>

    <tr>
        <td>min</td>
        <td>Date</td>
        <td>none</td>
        <td>Set a minimum Date for the visible range.
            It will not be possible to move beyond this minimum.
        </td>
    </tr>

    <tr>
        <td>order</td>
        <td>function</td>
        <td>none</td>
        <td>Provide a custom sort function to order the items. The order of the
            items is determining the way they are stacked. The function
            order is called with two parameters, both of type
            `vis.components.items.Item`.
        </td>
    </tr>

    <tr>
        <td>orientation</td>
        <td>String</td>
        <td>'bottom'</td>
        <td>Orientation of the timeline: 'top' or 'bottom' (default).
            If orientation is 'bottom', the time axis is drawn at the bottom,
            and if 'top', the axis is drawn on top.</td>
    </tr>

    <tr>
        <td>padding</td>
        <td>Number</td>
        <td>5</td>
        <td>The padding of items, needed to correctly calculate the size
            of item ranges. Must correspond with the css of item ranges.</td>
    </tr>

    <tr>
        <td>showMajorLabels</td>
        <td>boolean</td>
        <td>true</td>
        <td>By default, the timeline shows both minor and major date labels on the
            time axis.
            For example the minor labels show minutes and the major labels show hours.
            When <code>showMajorLabels</code> is <code>false</code>, no major labels
            are shown.</td>
    </tr>

    <tr>
        <td>showMinorLabels</td>
        <td>boolean</td>
        <td>true</td>
        <td>By default, the timeline shows both minor and major date labels on the
            time axis.
            For example the minor labels show minutes and the major labels show hours.
            When <code>showMinorLabels</code> is <code>false</code>, no minor labels
            are shown. When both <code>showMajorLabels</code> and
            <code>showMinorLabels</code> are false, no horizontal axis will be
            visible.</td>
    </tr>

    <tr>
        <td>start</td>
        <td>Date</td>
        <td>none</td>
        <td>The initial start date for the axis of the timeline.
            If not provided, the earliest date present in the events is taken as start date.</td>
    </tr>

    <tr>
        <td>type</td>
        <td>String</td>
        <td>'box'</td>
        <td>Specifies the type for the timeline items. Choose from 'dot' or 'point'.
            Note that individual items can override this global type.
        </td>
    </tr>

    <tr>
        <td>width</td>
        <td>String</td>
        <td>'100%'</td>
        <td>The width of the timeline in pixels or as a percentage.</td>
    </tr>

    <tr>
        <td>zoomMax</td>
        <td>Number</td>
        <td>315360000000000</td>
        <td>Set a maximum zoom interval for the visible range in milliseconds.
            It will not be possible to zoom out further than this maximum.
            Default value equals about 10000 years.
        </td>
    </tr>

    <tr>
        <td>zoomMin</td>
        <td>Number</td>
        <td>10</td>
        <td>Set a minimum zoom interval for the visible range in milliseconds.
            It will not be possible to zoom in further than this minimum.
        </td>
    </tr>


 </table>

 <h2 id="Methods">Methods</h2>
 <p>
    The Timeline supports the following methods.
 </p>

 <table>
    <tr>
        <th>Method</th>
        <th>Return Type</th>
        <th>Description</th>
    </tr>
 <!-- TODO: document groups as soon as implemented
    <tr>
        <td>setGroups(groups)</td>
        <td>none</td>
        <td>Set a data set with groups for the Timeline.
            <code>groups</code> can be an Array with Objects,
            a DataSet, or a DataView.
        </td>
    </tr>
 -->
    <tr>
        <td>setItems(items)</td>
        <td>none</td>
        <td>Set a data set with items for the Timeline.
            <code>items</code> can be an Array with Objects,
            a DataSet, or a DataView.
        </td>
    </tr>

    <tr>
        <td>setOptions(options)</td>
        <td>none</td>
        <td>Set or update options. It is possible to change any option
            of the timeline at any time. You can for example switch orientation
            on the fly.
        </td>
    </tr>

 </table>


 <h2 id="Styles">Styles</h2>
 <p>
    All parts of the Timeline have a class name and a default css style.
    The styles can be overwritten, which enables full customization of the layout
    of the Timeline.
 </p>

 <p>For example, to change the border and background color of all items, include the
    following code inside the head of your html code or in a separate stylesheet.</p>
 <pre class="prettyprint lang-html">&lt;style&gt;
    .graph .item {
      border-color: orange;
      background-color: yellow;
    }
 &lt;/style&gt;
 </pre>


 <h2 id="Data_Policy">Data Policy</h2>
 <p>
    All code and data are processed and rendered in the browser. No data is sent to any server.
 </p>

 </div>
 </body>
 </html>
--- a/examples/graph/01_basic_usage.html
+++ b/examples/graph/01_basic_usage.html
@ -0,0 +1,50 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Basic usage</title>

    <script type="text/javascript" src="../../vis.js"></script>

    <style type="text/css">
        #mygraph {
            width: 400px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
 </head>

 <body>

 <div id="mygraph"></div>

 <script type="text/javascript">
    // create an array with nodes
    var nodes = [
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ];

    // create an array with edges
    var edges = [
        {from: 1, to: 2},
        {from: 1, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ];

    // create a graph
    var container = document.getElementById('mygraph');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};
    var graph = new vis.Graph(container, data, options);
 </script>

 </body>
 </html>
--- a/examples/graph/02_random_nodes.html
+++ b/examples/graph/02_random_nodes.html
@ -0,0 +1,110 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Random nodes</title>

    <style type="text/css">
        body {
            font: 10pt sans;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        function draw() {
            nodes = [];
            edges = [];
            var connectionCount = [];

            // randomly create some nodes and edges
            var nodeCount = document.getElementById('nodeCount').value;
            for (var i = 0; i < nodeCount; i++) {
                nodes.push({
                    id: i,
                    label: String(i)
                });

                connectionCount[i] = 0;

                // create edges in a scale-free-graph way
                if (i == 1) {
                    var from = i;
                    var to = 0;
                    edges.push({
                        from: from,
                        to: to
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
                else if (i > 1) {
                    var conn = edges.length * 2;
                    var rand = Math.floor(Math.random() * conn);
                    var cum = 0;
                    var j = 0;
                    while (j < connectionCount.length && cum < rand) {
                        cum += connectionCount[j];
                        j++;
                    }

                    var from = i;
                    var to = j;
                    edges.push({
                        from: from,
                        to: to
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
            }

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                nodes: {
                    shape: 'circle'
                },
                edges: {
                    length: 50
                },
                stabilize: false
            };
            graph = new vis.Graph(container, data, options);

            // add event listeners
            vis.events.addListener(graph, 'select', function(params) {
                document.getElementById('selection').innerHTML =
                        'Selection: ' + JSON.stringify(graph.getSelection());
            });
        }
    </script>
 </head>

 <body onload="draw();">

 <form onsubmit="draw(); return false;">
    <label for="nodeCount">Number of nodes:</label>
    <input id="nodeCount" type="text" value="25" style="width: 50px;">
    <input type="submit" value="Go">
 </form>
 <br>

 <div id="mygraph"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/graph/03_images.html
+++ b/examples/graph/03_images.html
@ -0,0 +1,83 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Images</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        var DIR = 'img/refresh-cl/';
        var LENGTH_MAIN = 150;
        var LENGTH_SUB = 50;

        // Called when the Visualization API is loaded.
        function draw() {
            // Create a data table with nodes.
            nodes = [];

            // Create a data table with links.
            edges = [];

            nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
            nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
            nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
            edges.push({from: 1, to: 2, length: LENGTH_MAIN});
            edges.push({from: 1, to: 3, length: LENGTH_MAIN});

            for (var i = 4; i <= 7; i++) {
                nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
                edges.push({from: 2, to: i, length: LENGTH_SUB});
            }

            nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
            edges.push({from: 2, to: 101, length: LENGTH_SUB});

            nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
            edges.push({from: 3, to: 102, length: LENGTH_SUB});

            nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
            edges.push({from: 1, to: 103, length: LENGTH_SUB});

            nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
            edges.push({from: 1, to: 104, length: LENGTH_SUB});

            for (var i = 200; i <= 201; i++ ) {
                nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
                edges.push({from: 3, to: i, length: LENGTH_SUB});
            }

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                stabilize: false   // stabilize positions before displaying
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">

 <div id="mygraph"></div>

 </body>
 </html>
--- a/examples/graph/04_shapes.html
+++ b/examples/graph/04_shapes.html
@ -0,0 +1,76 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Shapes</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 100%;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        function draw() {
            nodes = [
                {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
                {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
                {id: 3, label: 'database', shape: 'database', group: 'group_x'},
                {id: 4, label: 'box', shape: 'box', group: 'group_x'}
            ];

            edges = [
                {from: 3, to: 1, style: 'arrow'},
                {from: 1, to: 4, style: 'dash-line'},
                {from: 1, to: 2, style: 'arrow-center'}
            ];

            var mainId = 5;
            nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
            var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
            var id = 6;
            for (var size = 1; size < 4; size++) {
                var groupId = id;
                nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
                edges.push({from: mainId, to: groupId, color: 'gray', width: size});
                id++;

                for (var i in shapes) {
                    if (shapes.hasOwnProperty(i)) {
                        nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
                        edges.push({from: groupId, to: id, color: 'gray', width: size});
                        id++;
                    }
                }
            }

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                stabilize: false
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/05_social_network.html
+++ b/examples/graph/05_social_network.html
@ -0,0 +1,78 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Social Network</title>

    <style>
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
            background: #F3F3F3;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var DIR = 'img/soft-scraps-icons/';

        var nodes = null;
        var edges = null;
        var graph = null;

        function draw() {
            // create people
            nodes = [
                {id: 1,  label: 'Algie',   image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
                {id: 2,  label: 'Alston',  image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
                {id: 3,  label: 'Barney',  image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
                {id: 4,  label: 'Coley',   image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
                {id: 5,  label: 'Grant',   image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
                {id: 6,  label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
                {id: 7,  label: 'Lee',     image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
                {id: 8,  label: 'Merlin',  image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
                {id: 9,  label: 'Mick',    image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
                {id: 10, label: 'Tod',     image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
            ];

            // create connections
            var color = '#BFBFBF';
            edges = [
                {from: 2,   to: 8,  value: 3,   label: 3,   color: color},
                {from: 2,   to: 9,  value: 5,   label: 5,   color: color},
                {from: 2,   to: 10, value: 1,   label: 1,   color: color},
                {from: 4,   to: 6,  value: 8,   label: 8,   color: color},
                {from: 5,   to: 7,  value: 2,   label: 2,   color: color},
                {from: 4,   to: 5,  value: 1,   label: 1,   color: color},
                {from: 9,   to: 10, value: 2,   label: 2,   color: color},
                {from: 2,   to: 3,  value: 6,   label: 6,   color: color},
                {from: 3,   to: 9,  value: 4,   label: 4,   color: color},
                {from: 5,   to: 3,  value: 1,   label: 1,   color: color},
                {from: 2,   to: 7,  value: 4,   label: 4,   color: color}
            ];

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {};
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>
 <p>
    Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
 </p>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/06_groups.html
+++ b/examples/graph/06_groups.html
@ -0,0 +1,160 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Groups</title>

    <style>
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        google.load('visualization', '1');

        // Set callback to run when API is loaded
        google.setOnLoadCallback(draw);

        // Called when the Visualization API is loaded.
        function draw() {
            var from, to;

            nodes = [];
            edges = [];

            var color = 'gray';
            var len = undefined;

            // randomly create some nodes
            var nodeCount = parseInt(document.getElementById('nodeCount').value);
            var nodeOffset = 0;
            var groupMin = 0;
            var groupMax = parseInt(document.getElementById('groupCount').value);
            var group = groupMin;
            var groupLeader = []; // will contain the node id with the most links of each group
            while (group < groupMax) {
                // randomly create some nodes
                var i = 0;
                var cols = parseInt(Math.sqrt(nodeCount));
                var connectionCount = [];
                while (i < nodeCount) {
                    nodes.push({
                        id: i + nodeOffset,
                        label: String(i + nodeOffset),
                        group: group
                    });
                    connectionCount[i] = 0;

                    // create links in a scale-free-graph way
                    if (i == 1) {
                        from = i;
                        to = 0;
                        edges.push({
                            from: from + nodeOffset,
                            to: to + nodeOffset,
                            length: len,
                            color: color
                        });
                        connectionCount[from]++;
                        connectionCount[to]++;
                    }
                    else if (i > 1) {
                        var conn = (i - 1) * 2;
                        var rand = Math.floor(Math.random() * conn);
                        var cum = 0;
                        var j = 0;
                        while (j < connectionCount.length && cum < rand) {
                            cum += connectionCount[j];
                            j++;
                        }

                        from = i;
                        to = j;
                        edges.push({
                            from: from + nodeOffset,
                            to: to + nodeOffset,
                            length: len,
                            color: color
                        });
                        connectionCount[from]++;
                        connectionCount[to]++;
                    }

                    i++;
                }

                // calculate the node with the most number of connections
                var leader = 0;
                for (var c in connectionCount) {
                    if (connectionCount.hasOwnProperty(c)) {
                        if (connectionCount[c] > connectionCount[leader]) {
                            leader = parseInt(c);
                        }
                    }
                }

                if (group > groupMin) {
                    // connect to the leader of this group to the leader of a random other group
                    from = leader + nodeOffset;
                    to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
                    edges.push({
                        from: from,
                        to: to,
                        length: len,
                        color: color
                    });
                }

                // add this leader to the list
                groupLeader[group] = leader + nodeOffset;

                nodeOffset += nodeCount;
                group++;
            }

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                stabilize: false,
                nodes: {
                    shape: 'dot'
                },
                edges: {
                    length: 50
                }
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <form onsubmit= "javascript: draw(); return false;">
    Number of groups:
    <input type="text" value="6" id="groupCount" style="width: 50px;">
    Number of nodes per group:
    <input type="text" value="7" id="nodeCount" style="width: 50px;">
    <input type="submit" value="Go">
 </form>
 <br>

 <div id="mygraph"></div>

 </body>
 </html>
--- a/examples/graph/07_selections.html
+++ b/examples/graph/07_selections.html
@ -0,0 +1,76 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Selections</title>

    <script type="text/javascript" src="../../vis.js"></script>

    <style type="text/css">
        #mygraph {
            width: 400px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
 </head>

 <body>

 <div id="mygraph"></div>
 <div id="info"></div>

 <script type="text/javascript">
    // create an array with nodes
    var nodes = [
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ];

    // create an array with edges
    var edges = [
        {from: 1, to: 2},
        {from: 1, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ];

    // create a graph
    var container = document.getElementById('mygraph');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'box'
        }
    };
    graph = new vis.Graph(container, data, options);

    // add event listener
    function onSelect() {
        var selection = graph.getSelection();

        var info = 'selection: ';
        selection.forEach(function (s) {
            info += s.row + ' ';
        });

        document.getElementById('info').innerHTML += info + '<br>';
    }
    vis.events.addListener(graph, 'select', onSelect);

    // set initial selection (row based, zero-based)
    var selection = [
        {'row': 2},
        {'row': 3},
        {'row': 4}
    ];
    graph.setSelection(selection);
 </script>

 </body>
 </html>
--- a/examples/graph/08_mobile_friendly.html
+++ b/examples/graph/08_mobile_friendly.html
@ -0,0 +1,108 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Graph | Mobile friendly</title>

    <style type="text/css">
        html, body {
            font: 10pt arial;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mygraph {
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- for mobile devices like android and iphone -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        // Called when the Visualization API is loaded.
        function draw() {
            nodes = [];
            edges = [];
            var EDGE_LENGTH = 50;
            var connectionCount = [];

            // randomly create some nodes
            var nodeCount = 20;
            var cols = parseInt(Math.sqrt(nodeCount));
            for (var i = 0; i < nodeCount; i++) {
                nodes.push({
                    id: i,
                    label: '' + i
                });

                connectionCount[i] = 0;

                // create links in a scale-free-network way
                if (i == 1) {
                    var from = i;
                    var to = 0;
                    edges.push({
                        from: from,
                        to: to,
                        length: EDGE_LENGTH
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
                else if (i > 1) {
                    var conn = edges.length * 2;
                    var rand = Math.floor(Math.random() * conn);
                    var cum = 0;
                    var j = 0;
                    while (j < connectionCount.length && cum < rand) {
                        cum += connectionCount[j];
                        j++;
                    }

                    var from = i;
                    var to = j;
                    edges.push({
                        from: from,
                        to: to,
                        length: EDGE_LENGTH
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
            }

            // Create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                stabilize: false,
                nodes: {
                    shape: 'dot',
                    radius: 24,
                    fontSize: 24
                },
                edges: {
                    width: 2
                }
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()" onresize="graph.redraw();">
 <div id="mygraph"></div>
 </body>
 </html>
--- a/examples/graph/09_sizing.html
+++ b/examples/graph/09_sizing.html
@ -0,0 +1,80 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Sizing</title>

    <style type="text/css">
        html, body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        var DIR = 'img/soft-scraps-icons/';

        function draw() {
            // create people.
            // value corresponds with the age of the person
            nodes = [
                {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
                {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
                {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
                {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
                {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
                {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
                {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
                {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
                {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
                {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
            ];

            // create connections.
            // value corresponds with the amount of contact between two people
            edges = [
                {from: 2, to: 8, value: 3, title: '3 emails per week'},
                {from: 2, to: 9, value: 5, title: '5 emails per week'},
                {from: 2, to: 10,value: 1, title: '1 emails per week'},
                {from: 4, to: 6, value: 8, title: '8 emails per week'},
                {from: 5, to: 7, value: 2, title: '2 emails per week'},
                {from: 4, to: 5, value: 1, title: '1 emails per week'},
                {from: 9, to: 10,value: 2, title: '2 emails per week'},
                {from: 2, to: 3, value: 6, title: '6 emails per week'},
                {from: 3, to: 9, value: 4, title: '4 emails per week'},
                {from: 5, to: 3, value: 1, title: '1 emails per week'},
                {from: 2, to: 7, value: 4, title: '4 emails per week'}
            ];

            // Instantiate our graph object.
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                nodes: {
                    shape: 'dot'
                },
                edges: {
                    color: '#97C2FC'
                }
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>
 </body>
 </html>
--- a/examples/graph/10_multiline_text.html
+++ b/examples/graph/10_multiline_text.html
@ -0,0 +1,50 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Multiline text</title>

    <style type="text/css">
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        function draw() {
            // create some nodes
            var nodes = [
                {id: 1, label: 'Node in\nthe center', shape: 'text'},
                {id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
                {id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
                {id: 4, label: 'This is text\non multiple lines', shape: 'box'},
                {id: 5, label: 'Little text', shape: 'ellipse'}
            ];

            // create some edges
            var edges = [
                {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
                {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
                {from: 1, to: 4, style: 'line', width: 1, length: 200},
                {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
            ];

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {};
            var graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>
 </body>
 </html>
--- a/examples/graph/11_custom_style.html
+++ b/examples/graph/11_custom_style.html
@ -0,0 +1,131 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Custom style</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var options = null;
        var graph = null;

        // Called when the Visualization API is loaded.
        function draw() {
            // create nodes
            nodes = [
                {id: 1, label: 'black node', group: 'black'},
                {id: 2, label: 'black node', group: 'black'},
                {id: 3, label: 'black node', group: 'black'},
                {id: 4, label: 'red node', group: 'black', color: 'red'},
                {id: 5, label: 'gray node', group: 'gray'},
                {id: 6, label: 'gray node', group: 'gray'},
                {id: 7, label: 'gray node', group: 'gray'},
                {id: 8, label: 'gray node', group: 'gray'},
                {id: 9, label: 'image node', group: 'white'},
                {id: 10, label: 'image node', group: 'white'},
                {id: 11, label: 'default node'},
                {id: 12, label: 'default node'}
            ];

            // create edges
            edges = [
                {from: 1, to: 2},
                {from: 1, to: 3},
                {from: 1, to: 4},
                {from: 5, to: 6},
                {from: 5, to: 7},
                {from: 5, to: 8},
                {from: 9, to: 10},
                {from: 9, to: 11},
                {from: 9, to: 12},

                {from: 1, to: 5},
                {from: 5, to: 9},
                {from: 9, to: 1}
            ];

            // specify options
            options = {
                stabilize: false,
                edges: {
                    length: 120,
                    width: 2,
                    style: 'arrow',
                    color: 'gray'
                },
                nodes: {
                    // default for all nodes
                    fontFace: 'times',
                    shape: 'circle',
                    color: {
                        border: 'orange',
                        background: 'yellow',
                        highlight: {
                            border: 'darkorange',
                            background: 'gold'
                        }
                    }
                },
                groups: {
                    black: {
                        // defaults for nodes in this group
                        radius: 15,
                        color: 'black',
                        fontColor: 'white',
                        fontSize: 18,
                        fontFace: 'courier',
                        shape: 'rect'
                    },
                    gray: {
                        color: {
                            border: 'black',
                            background: 'gray',
                            highlight: {
                                border: 'black',
                                background: 'lightgray'
                            }
                        },
                        fontSize: 18,
                        fontFace: 'arial',
                        shape: 'circle'
                    },
                    white: {
                        color: {
                            border: 'black',
                            background: 'white'
                        },
                        fontColor: 'red',
                        shape: 'image',
                        image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
                    }
                }
            };

            // create the graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>
 </body>
 </html>
--- a/examples/graph/12_scalable_images.html
+++ b/examples/graph/12_scalable_images.html
@ -0,0 +1,85 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Scalable images</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var DIR = 'img/soft-scraps-icons/';

        var nodes = null;
        var edges = null;
        var graph = null;

        // Called when the Visualization API is loaded.
        function draw() {
            // create people.
            // value corresponds with the age of the person
            var DIR = 'img/soft-scraps-icons/';
            nodes = [
                {id: 1,  value: 2,  shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
                {id: 2,  value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
                {id: 3,  value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
                {id: 4,  value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
                {id: 5,  value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
                {id: 6,  value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
                {id: 7,  value: 6,  shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
                {id: 8,  value: 5,  shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
                {id: 9,  value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
                {id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
            ];

            // create connetions between people
            // value corresponds with the amount of contact between two people
            edges = [
                {from: 2, to: 8, value: 3, title: '3 emails per week'},
                {from: 2, to: 9, value: 5, title: '5 emails per week'},
                {from: 2, to: 10,value: 1, title: '1 emails per week'},
                {from: 4, to: 6, value: 8, title: '8 emails per week'},
                {from: 5, to: 7, value: 2, title: '2 emails per week'},
                {from: 4, to: 5, value: 1, title: '1 emails per week'},
                {from: 9, to: 10,value: 2, title: '2 emails per week'},
                {from: 2, to: 3, value: 6, title: '6 emails per week'},
                {from: 3, to: 9, value: 4, title: '4 emails per week'},
                {from: 5, to: 3, value: 1, title: '1 emails per week'},
                {from: 2, to: 7, value: 4, title: '4 emails per week'}
            ];

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                nodes: {
                    widthMin: 20,  // min width in pixels
                    widthMax: 100  // max width in pixels
                },
                edges: {
                    color: 'lightgray'
                }
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/13_dashed_lines.html
+++ b/examples/graph/13_dashed_lines.html
@ -0,0 +1,65 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | Dashed lines</title>

    <style type="text/css">
        body {
            font: 10pt sans;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        // Called on page load
        function draw() {
            var nodes = [
                {id: 1, label: 'dashed\nline\nexamples'},
                {id: 2, label: 'default'},
                {id: 3, label: 'dash.length: 20\ndash.gap: 20'},
                {id: 4, label: 'dash.length: 20\ndash.gap: 5'},
                {id: 5, label: 'dash.length: 5\ndash.gap: 20'},
                {id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
            ];
            var edges = [
                {from: 1, to: 2, style: 'dash-line'},
                {from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
                {from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
                {from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
                {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
            ];

            // create the graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                nodes: {
                    shape: 'box'
                },
                edges: {
                    length: 180
                },
                stabilize: false
            };
            var graph = new vis.Graph(container, data, options);
        }
    </script>
 </head>

 <body onload="draw();">
    <p>
        This example shows the different options for dashed lines.
    </p>

    <div id="mygraph"></div>
 </body>
 </html>
--- a/examples/graph/14_dot_language.html
+++ b/examples/graph/14_dot_language.html
@ -0,0 +1,18 @@
 <html>
 <head>
    <title>Graph | DOT Language</title>

    <script type="text/javascript" src="../../vis.js"></script>
 </head>
 <body>
    <div id="mygraph"></div>

    <script type="text/javascript">
        var container = document.getElementById('mygraph');
        var data = {
            dot: 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
        };
        var graph = new vis.Graph(container, data);
    </script>
 </body>
 </html>
--- a/examples/graph/15_dot_language_playground.html
+++ b/examples/graph/15_dot_language_playground.html
@ -0,0 +1,209 @@
 <!doctype html>
 <html>
 <head>
    <title>Graph | DOT language playground</title>

    <script type="text/javascript" src="../../vis.js"></script>

    <style type="text/css">
        body, html {
            font: 10pt sans;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            color: #4d4d4d;
        }

        #frame {
            width: 100%;
            height: 99%;
        }
        #frame td {
            padding: 10px;
            height: 100%;
        }
        #error {
            color: red;
        }

        #data {
            width: 100%;
            height: 100%;
            border: 1px solid #d3d3d3;
        }

        #mygraph {
            float: left;
            width: 100%;
            height: 100%;
            border: 1px solid #d3d3d3;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            overflow: hidden;
        }

        textarea.example {
            display: none;
        }
    </style>
 </head>
 <body>

 <table id="frame">
    <col width="50%">
    <col width="50%">
    <tr>
        <td colspan="2" style="height: 50px;">
            <h1>DOT language playground</h1>
            <div>
                <a href="javascript: drawExample('example1')">example 1</a>
                <a href="javascript: drawExample('example2')">example 2</a>
                <a href="javascript: drawExample('example3')">example 3</a>
            </div>
            <div>
                <br>
                <button id="draw">Draw</button>
                <span id="error"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <textarea id="data"></textarea>
        </td>
        <td>
            <div id="mygraph"></div>
        </td>
    </tr>
 </table>

 <script type="text/javascript">
    var graph, data;

    var btnDraw = document.getElementById('draw');
    var txtData = document.getElementById('data');
    var txtError = document.getElementById('error');
    btnDraw.onclick = draw;

    // resize the graph when window resizes
    window.onresize = function () {
        graph.redraw()
    };

    // parse and draw the data
    function draw () {
        try {
            txtError.innerHTML = '';

            // Provide a string with data in DOT language
            data = {
                dot: txtData.value
            };

            // create a graph
            var container = document.getElementById('mygraph');
            var options = {};
            graph = new vis.Graph(container, data, options);
        }
        catch (err) {
            // set the cursor at the position where the error occurred
            var match = /\(char (.*)\)/.exec(err);
            if (match) {
                var pos = Number(match[1]);
                if(txtData.setSelectionRange) {
                    txtData.focus();
                    txtData.setSelectionRange(pos, pos);
                }
            }

            // show an error message
            txtError.innerHTML =  err.toString();
        }
    }

    /**
     * Draw an example
     * @param {String} id HTML id of the textarea containing the example code
     */
    function drawExample(id) {
        txtData.value = document.getElementById(id).value;
        draw();
    }
 </script>

 <textarea id="example1" class="example">
 digraph {
    node [shape=circle fontSize=16]
    edge [length=100, color=gray, fontColor=black]

    A -> A[label=0.5];
    B -> B[label=1.2] -> C[label=0.7] -- A;
    B -> D;
    D -> B;
    D -> C;
    D -> E[label=0.2];
    F -> F;
    A [
        fontColor=white,
        color=red,
    ]
 }
 </textarea>

 <textarea id="example2" class="example">
 digraph topology
 {
    node[shape=circle fontSize=12]
    edge[length=170 fontSize=12]
    "10.0.255.1" -> "10.0.255.3"[label="1.000"];
    "10.0.255.1" -> "10.0.255.2"[label="1.000"];
    "10.0.255.1" -> "10.0.255.2"[label="1.000"];
    "10.0.255.1" -> "10.0.255.3"[label="1.000"];
    "10.0.255.2" -> "10.0.255.1"[label="1.000"];
    "10.0.255.2" -> "10.0.255.3"[label="1.000"];
    "10.0.255.3" -> "10.0.255.1"[label="1.000"];
    "10.0.255.3" -> "10.0.255.2"[label="1.000"];
    "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
    "10.0.3.0/24"[shape=box];
    "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
    "10.0.2.0/24"[shape=box];
    "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
    "10.0.1.0/24"[shape=box];
 }
 </textarea>

 <textarea id="example3" class="example">
 digraph G  {
    // note: not all attributes are recognized and supported by Network
    //       unrecognized attributes are ignored

    node[width=.25,height=.375,fontsize=15]
    node [shape=filled fillcolor=#F1AAF0]
    0-> 0 ;
    1-> 1 ;
    2-> 2 ;
    3-> 3 ;
    4-> 4 ;
    5-> 5 ;
    6-> 6 ;
    7-> 5 ;
    8-> 8 ;
    9-> 9 ;
    10-> 10 ;
    11-> 10 ;
    12-> 12 ;
    13-> 5 ;
    14-> 10 ;
    15-> 0 ;
 }
 </textarea>

 <script>

    // draw example1 now
    drawExample('example1');
 </script>

 </body>
 </html>
--- a/examples/graph/graphviz/data/fsm.gv.txt
+++ b/examples/graph/graphviz/data/fsm.gv.txt
@ -0,0 +1,20 @@
 digraph finite_state_machine {
 	rankdir=LR;
 	size="8,5"
 	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
 	node [shape = circle];
 	LR_0 -> LR_2 [ label = "SS(B)" ];
 	LR_0 -> LR_1 [ label = "SS(S)" ];
 	LR_1 -> LR_3 [ label = "S($end)" ];
 	LR_2 -> LR_6 [ label = "SS(b)" ];
 	LR_2 -> LR_5 [ label = "SS(a)" ];
 	LR_2 -> LR_4 [ label = "S(A)" ];
 	LR_5 -> LR_7 [ label = "S(b)" ];
 	LR_5 -> LR_5 [ label = "S(a)" ];
 	LR_6 -> LR_6 [ label = "S(b)" ];
 	LR_6 -> LR_5 [ label = "S(a)" ];
 	LR_7 -> LR_8 [ label = "S(b)" ];
 	LR_7 -> LR_5 [ label = "S(a)" ];
 	LR_8 -> LR_6 [ label = "S(b)" ];
 	LR_8 -> LR_5 [ label = "S(a)" ];
 }
--- a/examples/graph/graphviz/data/hello.gv.txt
+++ b/examples/graph/graphviz/data/hello.gv.txt
@ -0,0 +1 @@
 digraph G {Hello->World}
--- a/examples/graph/graphviz/data/process.gv.txt
+++ b/examples/graph/graphviz/data/process.gv.txt
@ -0,0 +1,15 @@
 graph G {
 	run -- intr;
 	intr -- runbl;
 	runbl -- run;
 	run -- kernel;
 	kernel -- zombie;
 	kernel -- sleep;
 	kernel -- runmem;
 	sleep -- swap;
 	swap -- runswap;
 	runswap -- new;
 	runswap -- runmem;
 	new -- runmem;
 	sleep -- runmem;
 }
--- a/examples/graph/graphviz/data/siblings.gv.txt
+++ b/examples/graph/graphviz/data/siblings.gv.txt
@ -0,0 +1,512 @@
 /*
 This is a graphviz-produced layout of the "family tree" of a fraternity and sorority.

 Each member in the graph was assigned a "big brother" from one organization and a "big sister" from the other. Blue icons represent Brothers from the fraternity, Pink represents Sisters from the sorority (Purple members are in both organizations - like honoraries.)

 Charter members (who can have no parent nodes) are outlined.

 ...

 dot -Tgif -Goverlap=false -o siblings.gif siblings.dot


 We're experimenting with different ways of coloring and graphing, but found this the easiest for now. When we have more people in, we might look at different shades depending on generation number -- earlier people would get lighter colors, more recent members darker. Thumbnail images would be an interesting alteration as well.

 from Japheth Cleaver
 */


 digraph sdsu {
 	size="36,36";
 	node [color=grey, style=filled];    
 	node [fontname="Verdana", size="30,30"];
 	graph [ fontname = "Arial",
 	  fontsize = 36,
          style = "bold",
          label = "\nKappa Kappa Psi/Tau Beta Sigma\nSan Diego State University\nEta Mu and Zeta Xi Family Tree\n\nto date: November 30th, 2008\n",
 	  ssize = "30,60" ];
 "Lori Brede" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=10"];
 "Michael Griffith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=24"];
 "Amie Holston" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=30"];
 "Michael Griffith" -> "Lori Brede"
 "Amie Holston" -> "Lori Brede"
 "Casey Carter" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=11"];
 "Laura De'Armond" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=14"];
 "Laura De'Armond" -> "Casey Carter"
 "Japheth Cleaver" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=12"];
 "Chuk Gawlik" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=22"];
 "Stacy Snyder" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=309"];
 "Chuk Gawlik" -> "Japheth Cleaver"
 "Stacy Snyder" -> "Japheth Cleaver"
 "Jillian Clifton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=13"];
 "David Guthrie" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=25"];
 "David Guthrie" -> "Jillian Clifton"
 "Japheth Cleaver" -> "Jillian Clifton"
 "Tony Sacco" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=55"];
 "Heather Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=59"];
 "Tony Sacco" -> "Laura De'Armond"
 "Heather Smith" -> "Laura De'Armond"
 "Kevin Decker" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=15"];
 "Alex Hansen" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=26"];
 "Wanda Livelsberger" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=53"];
 "Alex Hansen" -> "Kevin Decker"
 "Wanda Livelsberger" -> "Kevin Decker"
 "Patrick Doerr" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=16"];
 "Deanna Jagow" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=23"];
 "Alex Hansen" -> "Patrick Doerr"
 "Deanna Jagow" -> "Patrick Doerr"
 "Lori Asaro" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=178"];
 "Mark Pearson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=169"];
 "Lori Ball" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=167"];
 "Mark Pearson" -> "Lori Asaro"
 "Lori Ball" -> "Lori Asaro"
 "Ryan Farris" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=18"];
 "Rob Reiner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=51"];
 "Cindy Teel" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=62"];
 "Rob Reiner" -> "Ryan Farris"
 "Cindy Teel" -> "Ryan Farris"
 "Ginger Palmer" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=180"];
 "Mark Newton-John" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=46"];
 "Mark Newton-John" -> "Ginger Palmer"
 "Matthew FitzGerald" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=19"];
 "Mervin Maniago" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=41"];
 "Mervin Maniago" -> "Matthew FitzGerald"
 "Amie Holston" -> "Matthew FitzGerald"
 "Tani Miller" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=195"];
 "Mark Pearson" -> "Tani Miller"
 "Vienna McMurtry" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=196"];
 "Robert Walwick" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=153"];
 "Robert Walwick" -> "Vienna McMurtry"
 "Ginger Palmer" -> "Vienna McMurtry"
 "Chuck Foster" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=20"];
 "Karen Saye" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=56"];
 "Kevin Decker" -> "Chuck Foster"
 "Karen Saye" -> "Chuck Foster"
 "Gary Frampton" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=201"];
 "Ginger Palmer" -> "Gary Frampton"
 "Pat Norris" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=207"];
 "Sean Tipps" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=204"];
 "Teresa Long" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=194"];
 "Sean Tipps" -> "Pat Norris"
 "Teresa Long" -> "Pat Norris"
 "Marc Martin-ez" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=208"];
 "Mark Pearson" -> "Marc Martin-ez"
 "Tani Miller" -> "Marc Martin-ez"
 "Kristen Villone" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=209"];
 "Kelly Erickson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=199"];
 "Anna Pedroza" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=197"];
 "Kelly Erickson" -> "Kristen Villone"
 "Anna Pedroza" -> "Kristen Villone"
 "Geoff Frank" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=21"];
 "Chris Livelsberger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=40"];
 "Amy Price" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=57"];
 "Chris Livelsberger" -> "Geoff Frank"
 "Amy Price" -> "Geoff Frank"
 "Tracy Murray" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=210"];
 "John FitzGibbon" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=92"];
 "Judy Dulcich" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=177"];
 "John FitzGibbon" -> "Tracy Murray"
 "Judy Dulcich" -> "Tracy Murray"
 "Ian McIntosh" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=215"];
 "Barbara Tollison" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=172"];
 "Robert Walwick" -> "Ian McIntosh"
 "Barbara Tollison" -> "Ian McIntosh"
 "Jayson Smith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=58"];
 "Jayson Smith" -> "Chuk Gawlik"
 "Heather Smith" -> "Chuk Gawlik"
 "Kelly McKinney" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=222"];
 "Mark Nadeau" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=183"];
 "Mark Nadeau" -> "Kelly McKinney"
 "Judy Dulcich" -> "Kelly McKinney"
 "Chris Livelsberger" -> "Deanna Jagow"
 "Amy Price" -> "Deanna Jagow"
 "Renee Thompson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=231"];
 "J. Angeles" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=3"];
 "Kelley Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=223"];
 "J. Angeles" -> "Renee Thompson"
 "Kelley Smith" -> "Renee Thompson"
 "Steven Smith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=233"];
 "John FitzGibbon" -> "Steven Smith"
 "Charlene Andrews" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=234"];
 "Diane Reoch" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=227"];
 "Diane Reoch" -> "Charlene Andrews"
 "Tonya Alexander" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=238"];
 "Gail Vasquez" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=225"];
 "Gail Vasquez" -> "Tonya Alexander"
 "Spencer Caldwell" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=239"];
 "Becky Bernal" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=218"];
 "Becky Bernal" -> "Spencer Caldwell"
 "Chuk Gawlik" -> "Michael Griffith"
 "Wanda Livelsberger" -> "Michael Griffith"
 "Russell Grant" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=242"];
 "Steven Smith" -> "Russell Grant"
 "Tiffany Worthington" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=66"];
 "Chuck Foster" -> "David Guthrie"
 "Tiffany Worthington" -> "David Guthrie"
 "Jerry Maya" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=250"];
 "John FitzGibbon" -> "Jerry Maya"
 "Melissa Schwartz" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=252"];
 "Russell Grant" -> "Melissa Schwartz"
 "Delphy Shaulis" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=255"];
 "Renee Thompson" -> "Delphy Shaulis"
 "Martin Naiman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=45"];
 "Janean Angeles" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=86"];
 "Martin Naiman" -> "Alex Hansen"
 "Janean Angeles" -> "Alex Hansen"
 "Leslie Harlow" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=265"];
 "Dennis McColl" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=251"];
 "Denise Luna" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=236"];
 "Dennis McColl" -> "Leslie Harlow"
 "Denise Luna" -> "Leslie Harlow"
 "Jonathan Yudman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=267"];
 "April Ortiz-cloninger" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=258"];
 "April Ortiz-cloninger" -> "Jonathan Yudman"
 "Michael Elgo" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=268"];
 "Carol Kropp" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=254"];
 "Spencer Caldwell" -> "Michael Elgo"
 "Carol Kropp" -> "Michael Elgo"
 "Denmark Vea" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=269"];
 "Marc Martin-ez" -> "Denmark Vea"
 "Kelley Smith" -> "Denmark Vea"
 "Kathleen Hansen" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=27"];
 "Martin Naiman" -> "Kathleen Hansen"
 "Heather Smith" -> "Kathleen Hansen"
 "Laura Stegner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=274"];
 "April Ortiz-cloninger" -> "Laura Stegner"
 "Kathy Jones" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=28"];
 "J. Angeles" -> "Kathy Jones"
 "Eric Gates" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=282"];
 "Erick Sugimura" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=280"];
 "Erick Sugimura" -> "Eric Gates"
 "Laura Stegner" -> "Eric Gates"
 "Jennifer Stoewe" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=288"];
 "Eric Gates" -> "Jennifer Stoewe"
 "Karen Helbling" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=29"];
 "Regan Ashker" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=5"];
 "Kevin Decker" -> "Karen Helbling"
 "Regan Ashker" -> "Karen Helbling"
 "Scott Wood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=295"];
 "Eric Gates" -> "Scott Wood"
 "Greg Flood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=200"];
 "Greg Flood" -> "J. Angeles"
 "Ginger Palmer" -> "J. Angeles"
 "Lynn Reeves" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=48"];
 "Chuk Gawlik" -> "Amie Holston"
 "Lynn Reeves" -> "Amie Holston"
 "Susan Colwell" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=302"];
 "Michael Elgo" -> "Susan Colwell"
 "Christopher Jouan" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=306"];
 "Kevin Owens" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=245"];
 "Kevin Owens" -> "Christopher Jouan"
 "Kristianna Reynante" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=308"];
 "Michael Elgo" -> "Kristianna Reynante"
 "Janean Angeles" -> "Kristianna Reynante"
 "Amy Berner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=300"];
 "Amy Berner" -> "Stacy Snyder"
 "Deanna Johnson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=31"];
 "Alex Hansen" -> "Deanna Johnson"
 "Laura De'Armond" -> "Deanna Johnson"
 "Johnny Richardson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=310"];
 "Russell Grant" -> "Johnny Richardson"
 "Nathan Fellhauer" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=313"];
 "James Rowland" [color=thistle, URL="http://sdsu.kkytbs.net/members/profile.html?who=52"];
 "James Rowland" -> "Nathan Fellhauer"
 "Kristianna Reynante" -> "Nathan Fellhauer"
 "Brian Raneses" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=314"];
 "Sean McHenry" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=42"];
 "Sean McHenry" -> "Brian Raneses"
 "Penny Lewis" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=315"];
 "Martin Naiman" -> "Penny Lewis"
 "Becky Graham" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=316"];
 "Kristen Elgo" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=7"];
 "Kristen Elgo" -> "Becky Graham"
 "Steven Gross" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=318"];
 "Rob Reiner" -> "Steven Gross"
 "Stacy Snyder" -> "Steven Gross"
 "Sedona Reynolds" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=32"];
 "Mark Newton-John" -> "Sedona Reynolds"
 "Cindy Teel" -> "Sedona Reynolds"
 "Klair Mayerchak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=320"];
 "Nathan Fellhauer" -> "Klair Mayerchak"
 "Becky Graham" -> "Klair Mayerchak"
 "Shari VerBerkmoes" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=321"];
 "Sean McHenry" -> "Shari VerBerkmoes"
 "Janean Angeles" -> "Shari VerBerkmoes"
 "Anson Summers" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=326"];
 "James Rowland" -> "Anson Summers"
 "Dusty Jolliff" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=33"];
 "Rob Reiner" -> "Dusty Jolliff"
 "Stacy Snyder" -> "Dusty Jolliff"
 "Jennifer Garman" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=331"];
 "James Rowland" -> "Jennifer Garman"
 "Kelly Greenhill" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=333"];
 "Rob Reiner" -> "Kelly Greenhill"
 "Kristen Elgo" -> "Kelly Greenhill"
 "Lucinda Farless" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=334"];
 "J. Angeles" -> "Lucinda Farless"
 "Susan Colwell" -> "Lucinda Farless"
 "Alfredo Cardenas" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=335"];
 "Chuk Gawlik" -> "Alfredo Cardenas"
 "Kathleen Hansen" -> "Alfredo Cardenas"
 "Jennifer Jouan" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=34"];
 "Andrea Owens" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=276"];
 "Andrea Owens" -> "Jennifer Jouan"
 "Tamara Scrivner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=345"];
 "Joseph Butler" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=69"];
 "Sarah Maltese" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=83"];
 "Joseph Butler" -> "Tamara Scrivner"
 "Sarah Maltese" -> "Tamara Scrivner"
 "Bradley Stouse" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=346"];
 "Ryan Underwood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=74"];
 "Ryan Underwood" -> "Bradley Stouse"
 "Cindy Teel" -> "Bradley Stouse"
 "Casondra Brimmage" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=347"];
 "Kristopher Lininger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=85"];
 "Ilana Melcher" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=73"];
 "Kristopher Lininger" -> "Casondra Brimmage"
 "Ilana Melcher" -> "Casondra Brimmage"
 "Cassiopeia Guthrie" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=348"];
 "Jeremy Frazier" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=79"];
 "Christine Mount" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=76"];
 "Jeremy Frazier" -> "Cassiopeia Guthrie"
 "Christine Mount" -> "Cassiopeia Guthrie"
 "Kathleen Moran" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=349"];
 "Matthew FitzGerald" -> "Kathleen Moran"
 "Lori Brede" -> "Kathleen Moran"
 "Tiffany Kalland" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=35"];
 "Tony Sacco" -> "Tiffany Kalland"
 "Karen Helbling" -> "Tiffany Kalland"
 "Kristen Anderson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=350"];
 "Jennie Bogart" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=78"];
 "David Guthrie" -> "Kristen Anderson"
 "Jennie Bogart" -> "Kristen Anderson"
 "Laura Simonette" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=351"];
 "Jon Weisel" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=89"];
 "Jon Weisel" -> "Laura Simonette"
 "Japheth Cleaver" -> "Laura Simonette"
 "Nathan Williams" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=352"];
 "David Guthrie" -> "Nathan Williams"
 "Karen Helbling" -> "Nathan Williams"
 "Rebecca Hippert" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=353"];
 "Ryan Underwood" -> "Rebecca Hippert"
 "Tiffany Kalland" -> "Rebecca Hippert"
 "Samuel Wallace" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=354"];
 "Joseph Butler" -> "Samuel Wallace"
 "Deanna Jagow" -> "Samuel Wallace"
 "Scott Gardner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=355"];
 "Jeremy Frazier" -> "Scott Gardner"
 "Christine Mount" -> "Scott Gardner"
 "Alberto Ayon" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=356"];
 "Bradley Stouse" -> "Alberto Ayon"
 "Jennie Bogart" -> "Alberto Ayon"
 "Susannah Clayton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=357"];
 "Nathan Williams" -> "Susannah Clayton"
 "Karen Helbling" -> "Susannah Clayton"
 "Lisa Gochnauer" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=358"];
 "Scott Gardner" -> "Lisa Gochnauer"
 "Casondra Brimmage" -> "Lisa Gochnauer"
 "Jamie Jackson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=359"];
 "Samuel Wallace" -> "Jamie Jackson"
 "Tamara Scrivner" -> "Jamie Jackson"
 "Christina Kelly" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=36"];
 "Matthew FitzGerald" -> "Christina Kelly"
 "Lori Brede" -> "Christina Kelly"
 "Gara Thornton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=360"];
 "Mark Newton-John" -> "Gara Thornton"
 "Laura Simonette" -> "Gara Thornton"
 "Robert Winebarger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=361"];
 "Robin Ellison" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=90"];
 "Scott Gardner" -> "Robert Winebarger"
 "Robin Ellison" -> "Robert Winebarger"
 "Jeremy Kirchner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=37"];
 "Rob Reiner" -> "Jeremy Kirchner"
 "Sandy Konar" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=38"];
 "Jennifer Brandon" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=9"];
 "Jennifer Brandon" -> "Sandy Konar"
 "Dan Kuhlman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=39"];
 "Rob Reiner" -> "Dan Kuhlman"
 "Dusty Jolliff" -> "Dan Kuhlman"
 "Lindsay Arehart" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=4"];
 "Martin Naiman" -> "Lindsay Arehart"
 "Jennifer Brandon" -> "Lindsay Arehart"
 "J. Angeles" -> "Mervin Maniago"
 "Kathy Jones" -> "Mervin Maniago"
 "Jarrod Monroe" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=43"];
 "Jamie Fratacci" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=44"];
 "Mark Newton-John" -> "Jarrod Monroe"
 "Jamie Fratacci" -> "Jarrod Monroe"
 "Chuk Gawlik" -> "Jamie Fratacci"
 "Tiffany Worthington" -> "Jamie Fratacci"
 "Russell Grant" -> "Martin Naiman"
 "Tonya Alexander" -> "Martin Naiman"
 "Edward Givens" [color=lightblue, outline=bold, style=bold, URL="http://sdsu.kkytbs.net/members/profile.html?who=106"];
 "Edward Givens" -> "Mark Newton-John"
 "Veronica Nickel" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=47"];
 "Regan Ashker" -> "Veronica Nickel"
 "Wanda Livelsberger" -> "Lynn Reeves"
 "Bryan Ransom" [color=thistle, URL="http://sdsu.kkytbs.net/members/profile.html?who=49"];
 "Jayson Smith" -> "Bryan Ransom"
 "Tony Sacco" -> "Regan Ashker"
 "Dusty Jolliff" -> "Regan Ashker"
 "Jennifer Stout" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=50"];
 "Matthew FitzGerald" -> "Jennifer Stout"
 "Deanna Jagow" -> "Jennifer Stout"
 "Sean McHenry" -> "James Rowland"
 "James Rowland" -> "Wanda Livelsberger"
 "Janean Angeles" -> "Wanda Livelsberger"
 "Melissa Roy" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=54"];
 "Mervin Maniago" -> "Melissa Roy"
 "Christina Kelly" -> "Melissa Roy"
 "Dennis McColl" -> "Tony Sacco"
 "April Ortiz-cloninger" -> "Tony Sacco"
 "Tony Sacco" -> "Karen Saye"
 "Tony Sacco" -> "Amy Price"
 "Kathleen Hansen" -> "Amy Price"
 "James Rowland" -> "Jayson Smith"
 "Brian Raneses" -> "Heather Smith"
 "Kristen Elgo" -> "Heather Smith"
 "Josh Atwood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=6"];
 "David Guthrie" -> "Josh Atwood"
 "Lori Brede" -> "Josh Atwood"
 "Katie Browne" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=60"];
 "Patrick Doerr" -> "Katie Browne"
 "Jamie Fratacci" -> "Katie Browne"
 "Kristin Tang" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=61"];
 "James Rowland" -> "Kristin Tang"
 "Heather Smith" -> "Kristin Tang"
 "Mervin Maniago" -> "Cindy Teel"
 "Veronica Nickel" -> "Cindy Teel"
 "Mike Tulumello" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=63"];
 "Matthew FitzGerald" -> "Mike Tulumello"
 "Katie Browne" -> "Mike Tulumello"
 "Veronica Villanueva" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=64"];
 "Ryan Farris" -> "Veronica Villanueva"
 "Sedona Reynolds" -> "Veronica Villanueva"
 "Mervin Maniago" -> "Tiffany Worthington"
 "Jennifer Jouan" -> "Tiffany Worthington"
 "Scott Wright" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=67"];
 "James Rowland" -> "Scott Wright"
 "Kristen Elgo" -> "Scott Wright"
 "Jeremy Browne" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=68"];
 "Matthew FitzGerald" -> "Jeremy Browne"
 "Japheth Cleaver" -> "Jeremy Browne"
 "James Fogelman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=688"];
 "Alberto Ayon" -> "James Fogelman"
 "Susannah Clayton" -> "James Fogelman"
 "Sandra Chase" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=689"];
 "David Guthrie" -> "Sandra Chase"
 "Japheth Cleaver" -> "Sandra Chase"
 "Patrick Doerr" -> "Joseph Butler"
 "Deanna Jagow" -> "Joseph Butler"
 "Laura Fisher" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=690"];
 "Nathan Williams" -> "Laura Fisher"
 "Casondra Brimmage" -> "Laura Fisher"
 "Katie Kozma" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=691"];
 "Scott Wright" -> "Katie Kozma"
 "Robin Ellison" -> "Katie Kozma"
 "Rachel Perkins" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=692"];
 "Joseph Butler" -> "Rachel Perkins"
 "Cassiopeia Guthrie" -> "Rachel Perkins"
 "Sarah Titilah" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=693"];
 "Robert Winebarger" -> "Sarah Titilah"
 "Karen Helbling" -> "Sarah Titilah"
 "Ashley Rehart" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=694"];
 "Laura Fisher" -> "Ashley Rehart"
 "Cara Yancey" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=695"];
 "Katie Kozma" -> "Cara Yancey"
 "Ashley Presley" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=698"];
 "Cara Yancey" -> "Ashley Presley"
 "Leila Wilhelm" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=699"];
 "Robin Ellison" -> "Leila Wilhelm"
 "Sean McHenry" -> "Kristen Elgo"
 "Stacy Snyder" -> "Kristen Elgo"
 "Greg Moody" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=70"];
 "Ryan Farris" -> "Greg Moody"
 "Jennifer Stout" -> "Greg Moody"
 "Lisa Fleck" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=700"];
 "Rachel Perkins" -> "Lisa Fleck"
 "Christine Coyne" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=701"];
 "Rachel Perkins" -> "Christine Coyne"
 "Jennifer Cooley" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=702"];
 "Laura Fisher" -> "Jennifer Cooley"
 "Elizabeth Larios" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=703"];
 "Ashley Rehart" -> "Elizabeth Larios"
 "Cate Threlkeld" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=707"];
 "Katie Kozma" -> "Cate Threlkeld"
 "Erika Tapia" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=71"];
 "Patrick Doerr" -> "Erika Tapia"
 "Melissa Roy" -> "Erika Tapia"
 "Robbyn Rozelle" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=72"];
 "Jarrod Monroe" -> "Robbyn Rozelle"
 "Tiffany Kalland" -> "Robbyn Rozelle"
 "Ryan Farris" -> "Ilana Melcher"
 "Veronica Villanueva" -> "Ilana Melcher"
 "Greg Moody" -> "Ryan Underwood"
 "Katie Browne" -> "Ryan Underwood"
 "Cameron Brown" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=75"];
 "Joseph Butler" -> "Cameron Brown"
 "Tiffany Kalland" -> "Cameron Brown"
 "Ryan Underwood" -> "Christine Mount"
 "Lori Brede" -> "Christine Mount"
 "Janay Rabe" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=77"];
 "Greg Moody" -> "Janay Rabe"
 "Cindy Teel" -> "Janay Rabe"
 "Jeremy Browne" -> "Jennie Bogart"
 "Tiffany Kalland" -> "Jennie Bogart"
 "Ryan Farris" -> "Jeremy Frazier"
 "Ilana Melcher" -> "Jeremy Frazier"
 "Crystal Bozak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=8"];
 "Patrick Doerr" -> "Crystal Bozak"
 "Katie Browne" -> "Crystal Bozak"
 "Kameka Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=80"];
 "Matthew FitzGerald" -> "Kameka Smith"
 "Ilana Melcher" -> "Kameka Smith"
 "Kyra Sacco" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=81"];
 "Joseph Butler" -> "Kyra Sacco"
 "Robbyn Rozelle" -> "Kyra Sacco"
 "Samuel Behar" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=82"];
 "Ryan Underwood" -> "Samuel Behar"
 "Lori Brede" -> "Samuel Behar"
 "Patrick Doerr" -> "Sarah Maltese"
 "Deanna Jagow" -> "Sarah Maltese"
 "David Bronson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=84"];
 "Kristin Alongi-Hutchins" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=87"];
 "Tony Sacco" -> "David Bronson"
 "Kristin Alongi-Hutchins" -> "David Bronson"
 "Cameron Brown" -> "Kristopher Lininger"
 "Kameka Smith" -> "Kristopher Lininger"
 "Rakan Abu-Rahma" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=852"];
 "Christine Coyne" -> "Rakan Abu-Rahma"
 "Jennifer Berry" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=270"];
 "Jennifer Berry" -> "Janean Angeles"
 "Penny Lewis" -> "Kristin Alongi-Hutchins"
 "Melissa Bebak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=88"];
 "Greg Moody" -> "Melissa Bebak"
 "Sarah Maltese" -> "Melissa Bebak"
 "Scott Wright" -> "Jennifer Brandon"
 "Japheth Cleaver" -> "Jennifer Brandon"
 "Samuel Behar" -> "Robin Ellison"
 "Kyra Sacco" -> "Robin Ellison"
 "Teresa Simms" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=91"];
 "Joseph Butler" -> "Teresa Simms"
 "Janay Rabe" -> "Teresa Simms"
 "Robert Schmidtke" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=188"];
 "Jean Newman" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=166"];
 "Robert Schmidtke" -> "John FitzGibbon"
 "Jean Newman" -> "John FitzGibbon"
 "Brittany DePew" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=928"];
 "Elizabeth Larios" -> "Brittany DePew"
 "Kathleen Halberg" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=929"];
 "Ashley Rehart" -> "Kathleen Halberg"
 "Terrance Hirsch" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=96"];
 "J. Angeles" -> "Terrance Hirsch"
 "Susan Colwell" -> "Terrance Hirsch"
 "Monique Arellano" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=972"];
 "Ashley Presley" -> "Monique Arellano"
 "Anthony Henderson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=973"];
 "Jennifer Cooley" -> "Anthony Henderson"
 "Amethyst Tagle" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=974"];
 "Cate Threlkeld" -> "Amethyst Tagle"
 "Mallory Williams" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=975"];
 "Lisa Fleck" -> "Mallory Williams"
 }
--- a/examples/graph/graphviz/data/softmaint.gv.txt
+++ b/examples/graph/graphviz/data/softmaint.gv.txt
@ -0,0 +1,377 @@
 digraph G  {
 	size="7,10"
 	page="8.5,11"
 	center=""
 	node[width=.25,height=.375,fontsize=9]
 	fcfpr1_1_2t_17 -> 341411;
 	fcfpr1_1t_1 -> 341411;
 	rdlfpr2_0_rdlt_4 -> 341411;
 	fpfpr1_0_1t_1 -> 341411;
 	fpfpr1_1_2t_11 -> 341411;
 	rtafpr1_1_2t_28 -> 341411;
 	rtafpr1_1_3t_6 -> 341411;
 	rdlfpr1_1t_1 -> 358866;
 	rtafpr1_1_3t_6 -> 358866;
 	tmfpr1_1_3t_5 -> 358930;
 	fcfpr1_1_3t_9 -> 358930;
 	pcfpr1_1_3t_7 -> 358930;
 	fpfpr1_1_3g_1 -> 358930;
 	fpfpr1_1_3t_1 -> 358930;
 	aufpr1_1_3t_1 -> 358930;
 	rtafpr1_0_3g_1 -> 358930;
 	rtafpr1_1_3t_6 -> 358930;
 	msgfpr1_1_1g_12 -> 371943;
 	rtafpr1_1_1g_8 -> 371943;
 	rtafpr1_1_1t_35 -> 371943;
 	rtafpr1_1_1t_45 -> 371943;
 	rtafpr1_1_3t_6 -> 371943;
 	tlfpr2_0_rdlg_2 -> 374300;
 	fcfpr1_1_3t_8 -> 374300;
 	fcfpr1_1_3t_9 -> 374300;
 	rtafpr1_1_3t_6 -> 374300;
 	fcfpr1_0_5g_1 -> 371942;
 	fcfpr1_1_1t_19 -> 371942;
 	fcfpr1_1_3t_9 -> 371942;
 	fcfpr1_1_3t_9 -> 374700;
 	tymsgfpr1_1_3t_3 -> 374700;
 	fpfpr1_1_3t_1 -> 374700;
 	rtafpr1_1_3t_7 -> 374700;
 	fcfpr1_1_3g_2 -> 374741;
 	fcfpr1_1_3t_9 -> 374741;
 	fpfpr1_1_3t_1 -> 374741;
 	rtafpr1_1_3t_7 -> 374741;
 	fcfpr1_1_1t_18 -> 374886;
 	fcfpr1_1_3t_9 -> 374886;
 	fpfpr1_1_3t_1 -> 374886;
 	rtafpr1_1_3t_7 -> 374886;
 	fcfpr1_1_3t_9 -> 375039;
 	fpfpr1_1_3t_1 -> 375039;
 	fcfpr1_1_3t_42 -> 375507;
 	fcfpr1_1_3t_9 -> 375507;
 	rdlfpr2_0_rdlt_158 -> 375507;
 	rtafpr1_1_3t_7 -> 375507;
 	rtafpr1_1_3t_71 -> 375507;
 	dbfpr1_1_3t_2 -> 375507;
 	fcfpr1_1_3t_9 -> 375508;
 	rdlfpr1_1g_13 -> 375508;
 	rtafpr1_1_3t_7 -> 375508;
 	rtafpr2_1_rdlg_1 -> 375508;
 	dbfpr1_1_3t_2 -> 375508;
 	fcfpr1_1_3t_9 -> 375519;
 	fpfpr1_1_3g_1 -> 375519;
 	fpfpr1_1_3t_1 -> 375519;
 	fcfpr1_1_3t_9 -> 377380;
 	rdlfpr1_1g_16 -> 377380;
 	rdlfpr1_1t_100 -> 377380;
 	fcfpr1_0_2g_1 -> 377719;
 	fcfpr1_1_3t_10 -> 377719;
 	fcfpr1_1_3t_7 -> 377719;
 	fcfpr1_1_3t_9 -> 377719;
 	rdlfpr2_0_rdlg_12 -> 377719;
 	rdlfpr2_0_rdlt_108 -> 377719;
 	rdlfpr2_0_rdlt_27 -> 377719;
 	rdlfpr2_0_rdlt_30 -> 377719;
 	fcfpr1_1_3t_9 -> 377763;
 	fcfpr1_1_3t_9 -> 379848;
 	fpfpr1_1_3t_1 -> 379848;
 	fcfpr1_1_3t_9 -> 380571;
 	fcfpr1_1_3t_9 -> 380604;
 	fpfpr1_1_3t_1 -> 380604;
 	fcfpr1_1_3t_9 -> 381211;
 	fpfpr1_1_3t_1 -> 381211;
 	fcfpr1_1_3t_9 -> 381835;
 	fcfpr1_1_3t_9 -> 381897;
 	fcfpr1_1_3t_9 -> 381901;
 	fpfpr1_1_3t_1 -> 381901;
 	fcfpr1_1_3t_9 -> 382103;
 	rtafpr1_1_3t_7 -> 382103;
 	fcfpr1_1_3t_9 -> 382161;
 	fcfpr1_1_3t_9 -> 383174;
 	fpfpr1_1_3t_1 -> 383174;
 	rtafpr1_1_3t_7 -> 383174;
 	fpfpr1_1_3g_1 -> 352010;
 	fpfpr1_1_3t_1 -> 352010;
 	fpfpr1_1_3t_1 -> 382409;
 	fpfpr1_1_3t_1 -> 382827;
 	fpfpr1_1_3t_1 -> 382928;
 	rtafpr1_1_3t_7 -> 382928;
 	tlfpr1_1_1t_5 -> 358224;
 	tymsgfpr1_1_1t_23 -> 358224;
 	tymsgfpr1_1_3t_3 -> 358224;
 	rcfpr0_0_1t_9 -> 358224;
 	rcfpr1_1_1t_5 -> 358224;
 	odfpr0_0_1t_8 -> 358224;
 	odfpr1_1_1t_6 -> 358224;
 	ecdsgfpr1_1_1t_4 -> 358224;
 	tymsgfpr1_1_1t_18 -> 358900;
 	tymsgfpr1_1_3t_3 -> 358900;
 	rcfpr1_1_1t_100 -> 358900;
 	rcfpr1_1_1t_22 -> 358900;
 	rcfpr1_1_1t_37 -> 358900;
 	odfpr1_1_1t_21 -> 358900;
 	tymsgfpr1_1_3t_3 -> 372568;
 	rcfpr1_1_1t_30 -> 372568;
 	odfpr1_1_1t_31 -> 372568;
 	tlfpr1_1_1t_20 -> 375557;
 	tymsgfpr1_1_1t_24 -> 375557;
 	tymsgfpr1_1_3t_3 -> 375557;
 	rcfpr1_1_1t_11 -> 375557;
 	odfpr1_1_1t_9 -> 375557;
 	ecdsgfpr1_1_1t_19 -> 375557;
 	rtafpr1_1_1g_14 -> 376956;
 	rtafpr1_1_1t_64 -> 376956;
 	rtafpr1_1_2t_18 -> 376956;
 	rtafpr1_1_3t_30 -> 376956;
 	rtafpr1_1_3t_7 -> 376956;
 	rtafpr1_1_3t_7 -> 379339;
 	rtafpr1_1_1t_14 -> 379422;
 	rtafpr1_1_1t_20 -> 379422;
 	rtafpr1_1_3t_7 -> 379422;
 	rtafpr1_1_3t_7 -> 383039;
 	fcfpr1_1_1t_18 -> 359471;
 	fcfpr2_0_1t_1 -> 359471;
 	fcfpr2_0_1t_2 -> 359471;
 	ccsfpr2_0_1t_99 -> 359471;
 	fcfpr1_1_3t_42 -> 384096;
 	rtafpr1_1_3t_71 -> 384096;
 	tlfpr1_0_4g_4 -> 354290;
 	rcfpr0_0_1t_9 -> 354290;
 	odfpr0_0_1t_8 -> 354290;
 	pagfpr1_1_1t_23 -> 354290;
 	rcfpr1_1_1t_5 -> 379864;
 	rcfpr1_1_1t_100 -> 382574;
 	rcfpr1_1_1t_22 -> 382574;
 	rcfpr1_1_1t_37 -> 382574;
 	rcfpr1_1_1t_30 -> 370706;
 	rcfpr1_1_1t_30 -> 377908;
 	rcfpr1_1_1t_30 -> 377924;
 	rcfpr1_1_1t_30 -> 377971;
 	rcfpr1_1_1t_30 -> 377980;
 	odfpr1_1_1t_31 -> 377980;
 	rcfpr1_1_1t_30 -> 378362;
 	rcfpr1_1_1t_30 -> 378656;
 	rcfpr1_1_1t_30 -> 378666;
 	rcfpr1_1_1t_30 -> 379169;
 	odfpr1_1_1t_31 -> 379169;
 	rcfpr1_1_1t_110 -> 379341;
 	rcfpr1_1_1t_30 -> 379341;
 	rcfpr1_1_1t_62 -> 379341;
 	odfpr1_1_1t_31 -> 379341;
 	rcfpr1_1_1t_30 -> 379972;
 	rcfpr1_1_1t_30 -> 380298;
 	rcfpr1_1_1t_30 -> 380448;
 	rcfpr1_1_1t_30 -> 380475;
 	odfpr1_1_1t_31 -> 380475;
 	rcfpr1_1_1t_30 -> 380526;
 	odfpr1_1_1t_31 -> 357430;
 	rcfpr1_1_1t_11 -> 379968;
 	odfpr1_1_1t_9 -> 379968;
 	ccsfpr2_0_1t_99 -> 359100;
 	ccsfpr2_0_1t_99 -> 376529;
 	ccsfpr2_0_1t_99 -> 377801;
 	ccsfpr2_0_1t_99 -> 379126;
 	ccsfpr2_0_1t_99 -> 379212;
 	ccsfpr2_0_1t_99 -> 380285;
 	ccsfpr2_0_1t_99 -> 380963;
 	ccsfpr2_0_1t_99 -> 384909;
 	tlfpr1_0_4g_4 -> 358471;
 	odfpr0_0_1t_7 -> 358471;
 	odfpr1_0_1t_36 -> 358471;
 	odfpr1_0_3t_18 -> 358471;
 	odfpr1_0_3t_21 -> 358471;
 	tlfpr1_0_4g_4 -> 375024;
 	tlfpr1_0_4g_4 -> 375027;
 	rcfpr1_1_1t_110 -> 381710;
 	rcfpr1_1_1t_62 -> 381710;
 	rcfpr1_1_1t_110 -> 381775;
 	rcfpr1_1_1t_62 -> 381775;
 	rcfpr1_1_1t_110 -> 382436;
 	fcfpr1_1_3t_34 -> 382528;
 	rcfpr1_1_1t_110 -> 382528;
 	rtafpr1_1_3t_48 -> 382528;
 	rcfpr1_1_1t_110 -> 382566;
 	rcfpr1_1_1t_110 -> 382572;
 	odfpr0_0_1t_7 -> 353506;
 	rcfpr1_0_1t_35 -> 370509;
 	odfpr0_0_1t_7 -> 370509;
 	odfpr0_0_1t_7 -> 370510;
 	odfpr1_0_1t_38 -> 370510;
 	tlfpr1_0_4g_5 -> 354546;
 	rcfpr1_1_1t_61 -> 354546;
 	odfpr1_0_3t_18 -> 354546;
 	odfpr1_0_3t_20 -> 354546;
 	odfpr1_0_3t_18 -> 354757;
 	odfpr1_0_3t_20 -> 354757;
 	odfpr1_0_3t_18 -> 354766;
 	odfpr1_0_3t_20 -> 354766;
 	odfpr1_0_3t_18 -> 354771;
 	odfpr1_0_3t_20 -> 354771;
 	odfpr1_0_3t_18 -> 354785;
 	odfpr1_0_3t_23 -> 354785;
 	odfpr1_0_3t_24 -> 354785;
 	odfpr1_0_3t_18 -> 354878;
 	odfpr1_0_3t_23 -> 354878;
 	odfpr1_0_3t_24 -> 354878;
 	odfpr1_0_3t_18 -> 355080;
 	odfpr1_0_3t_23 -> 355080;
 	odfpr1_0_3t_24 -> 355080;
 	odfpr1_0_3t_18 -> 355288;
 	odfpr1_0_3t_23 -> 355288;
 	odfpr1_0_3t_24 -> 355288;
 	odfpr2_0_03t_13 -> 355288;
 	odfpr1_0_3t_18 -> 355800;
 	odfpr1_0_3t_21 -> 355800;
 	odfpr1_0_3t_18 -> 356116;
 	odfpr1_0_3t_21 -> 356116;
 	odfpr1_0_3t_18 -> 356741;
 	odfpr1_0_3t_21 -> 356741;
 	odfpr1_0_3t_18 -> 357340;
 	odfpr1_0_3t_21 -> 357340;
 	odfpr1_0_3t_18 -> 357538;
 	odfpr1_0_3t_21 -> 357538;
 	odfpr1_0_3t_18 -> 357769;
 	odfpr1_0_3t_21 -> 357769;
 	odfpr1_0_3t_18 -> 357793;
 	odfpr1_0_3t_21 -> 357793;
 	odfpr1_0_3t_18 -> 358155;
 	odfpr1_0_3t_21 -> 358155;
 	odfpr1_0_3t_18 -> 358157;
 	odfpr1_0_3t_21 -> 358157;
 	odfpr1_0_3t_18 -> 358159;
 	odfpr1_0_3t_21 -> 358159;
 	odfpr1_0_3t_18 -> 358584;
 	odfpr1_0_3t_21 -> 358584;
 	odfpr1_0_3t_18 -> 360104;
 	odfpr1_0_3t_21 -> 360104;
 	odfpr1_0_3t_18 -> 360144;
 	odfpr1_0_3t_21 -> 360144;
 	odfpr1_0_3t_18 -> 360672;
 	odfpr1_0_3t_21 -> 360672;
 	odfpr1_0_3t_5 -> 360672;
 	odfpr1_0_3t_18 -> 360839;
 	odfpr1_0_3t_21 -> 360839;
 	odfpr1_0_3t_18 -> 371187;
 	tlfpr1_0_3g_5 -> 373300;
 	odfpr1_0_3t_12 -> 373300;
 	odfpr1_0_3t_18 -> 373300;
 	odfpr1_0_3t_18 -> 375134;
 	odfpr1_0_5t_18 -> 375134;
 	rcfpr0_0_1t_10 -> 375319;
 	odfpr1_0_3t_18 -> 375319;
 	odfpr1_0_3t_36 -> 375319;
 	odfpr1_0_5t_17 -> 375319;
 	odfpr1_0_5t_19 -> 375319;
 	odfpr1_0_3t_18 -> 375499;
 	odfpr1_0_3t_18 -> 377220;
 	odfpr1_0_5t_21 -> 377220;
 	tlfpr1_0_3g_7 -> 377562;
 	tlfpr1_1_1t_3 -> 377562;
 	odfpr1_0_3t_18 -> 377562;
 	odfpr1_0_3t_36 -> 377562;
 	odfpr1_0_5t_20 -> 377562;
 	odfpr1_0_3t_18 -> 378108;
 	odfpr1_0_3t_6 -> 378108;
 	odfpr1_0_5t_20 -> 354221;

 	odfpr0_0_1t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_0_3g_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr0_0_1t_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_61 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_0_3g_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_62 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	ccsfpr2_0_1t_99 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tymsgfpr1_1_3t_3 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr0_0_1t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1t_14 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_3t_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_110 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	dbfpr1_1_3t_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1g_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_1_1t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1t_64 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr2_0_rdlg_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_2t_28 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_1_1t_3 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_1_1t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fpfpr1_1_3t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	aufpr1_1_3t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3t_34 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_1t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_36 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_1_1t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_1t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_1_1t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_37 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3t_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_1_1t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr2_0_rdlt_27 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3g_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1t_35 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_5t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fpfpr1_1_3g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_5t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fpfpr1_1_2t_11 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	ecdsgfpr1_1_1t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_1t_36 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1g_14 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tymsgfpr1_1_1t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tymsgfpr1_1_1t_24 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_1t_38 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_0_2g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr1_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr0_0_1t_10 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_100 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr2_0_rdlt_108 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	pcfpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	ecdsgfpr1_1_1t_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tmfpr1_1_3t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fpfpr1_0_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_22 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	pagfpr1_1_1t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_3t_71 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_2t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr2_0_rdlt_158 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_3t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_24 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_0_3g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr1_1g_13 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_0_1t_35 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_2t_17 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr2_1_rdlg_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr2_0_rdlt_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr1_1g_16 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr2_0_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr2_0_1t_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr1_1t_100 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	msgfpr1_1_1g_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr2_0_rdlt_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_0_4g_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3t_42 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tlfpr1_0_4g_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_3t_48 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_5t_17 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_5t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	tymsgfpr1_1_1t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_5t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_1_3t_10 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	fcfpr1_0_5g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_0_3t_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr2_0_03t_13 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rcfpr1_1_1t_11 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	odfpr1_1_1t_31 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rdlfpr2_0_rdlg_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 	rtafpr1_1_1t_45 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
 }
--- a/examples/graph/graphviz/data/traffic_lights.gv.txt
+++ b/examples/graph/graphviz/data/traffic_lights.gv.txt
@ -0,0 +1,29 @@
 ##"I played some days with making an interface between our ConceptBase system (essentially a database system to store models) and graphviz. One example graph is attached. It is a so-called petri net for Dutch traffic lights. The example is actually taken from a book by Wil van der Aalst." Contributed by Manfred Jeusfeld.

 ##Command to produce the output: "neato -Tpng thisfile > thisfile.png"

 digraph TrafficLights {
 node [shape=box];  gy2; yr2; rg2; gy1; yr1; rg1;
 node [shape=circle,fixedsize=true,width=0.9];  green2; yellow2; red2; safe2; safe1; green1; yellow1; red1;
 gy2->yellow2;
 rg2->green2;
 yr2->safe1;
 yr2->red2;
 safe2->rg2;
 green2->gy2;
 yellow2->yr2;
 red2->rg2;
 gy1->yellow1;
 rg1->green1;
 yr1->safe2;
 yr1->red1;
 safe1->rg1;
 green1->gy1;
 yellow1->yr1;
 red1->rg1;

 overlap=false
 label="PetriNet Model TrafficLights\nExtracted from ConceptBase and layed out by Graphviz"
 fontsize=12;
 }

--- a/examples/graph/graphviz/data/transparency.gv.txt
+++ b/examples/graph/graphviz/data/transparency.gv.txt
@ -0,0 +1,105 @@
 graph G {
 //	graph [splines=true overlap=false]
 //	graph [truecolor bgcolor="#ff00005f"]
 	node [style=filled fillcolor="#00ff005f"]
 	1 -- 30 [f=1];
 	1 -- 40 [f=14];
 	8 -- 46 [f=1];
 	8 -- 16 [f=18];
 	10 -- 25 [f=1];
 	10 -- 19 [f=5];
 	10 -- 33 [f=1];
 	12 -- 8 [f=1];
 	12 -- 36 [f=5];
 	12 -- 17 [f=16];
 	13 -- 38 [f=1];
 	13 -- 24 [f=19];
 	24 -- 49 [f=1];
 	24 -- 13 [f=1];
 	24 -- 47 [f=12];
 	24 -- 12 [f=19];
 	25 -- 27 [f=1];
 	25 -- 12 [f=1];
 	27 -- 12 [f=1];
 	27 -- 14 [f=8];
 	29 -- 10 [f=1];
 	29 -- 8 [f=17];
 	30 -- 24 [f=1];
 	30 -- 44 [f=15];
 	38 -- 29 [f=1];
 	38 -- 35 [f=15];
 	2 -- 42 [f=2];
 	2 -- 35 [f=3];
 	2 -- 11 [f=19];
 	14 -- 18 [f=2];
 	14 -- 24 [f=15];
 	14 -- 38 [f=18];
 	18 -- 49 [f=2];
 	18 -- 47 [f=20];
 	26 -- 41 [f=2];
 	26 -- 42 [f=15];
 	31 -- 39 [f=2];
 	31 -- 47 [f=17];
 	31 -- 25 [f=14];
 	37 -- 26 [f=2];
 	37 -- 16 [f=14];
 	39 -- 50 [f=2];
 	39 -- 14 [f=2];
 	39 -- 18 [f=17];
 	39 -- 47 [f=10];
 	41 -- 31 [f=2];
 	41 -- 8 [f=16];
 	42 -- 44 [f=2];
 	42 -- 29 [f=12];
 	44 -- 37 [f=2];
 	44 -- 32 [f=15];
 	3 -- 20 [f=2];
 	3 -- 28 [f=19];
 	6 -- 45 [f=2];
 	6 -- 28 [f=10];
 	9 -- 6 [f=2];
 	9 -- 16 [f=1];
 	15 -- 16 [f=2];
 	15 -- 48 [f=2];
 	16 -- 50 [f=2];
 	16 -- 32 [f=14];
 	16 -- 39 [f=8];
 	20 -- 33 [f=2];
 	33 -- 9 [f=2];
 	33 -- 46 [f=3];
 	33 -- 48 [f=17];
 	45 -- 15 [f=2];
 	4 -- 17 [f=4];
 	4 -- 15 [f=6];
 	4 -- 12 [f=16];
 	17 -- 21 [f=4];
 	19 -- 35 [f=4];
 	19 -- 15 [f=9];
 	19 -- 43 [f=4];
 	21 -- 19 [f=4];
 	21 -- 50 [f=4];
 	23 -- 36 [f=4];
 	34 -- 23 [f=4];
 	34 -- 24 [f=11];
 	35 -- 34 [f=4];
 	35 -- 16 [f=6];
 	35 -- 18 [f=16];
 	36 -- 46 [f=4];
 	5 -- 7 [f=1];
 	5 -- 36 [f=6];
 	7 -- 32 [f=1];
 	7 -- 11 [f=2];
 	7 -- 14 [f=17];
 	11 -- 40 [f=1];
 	11 -- 50 [f=1];
 	22 -- 46 [f=1];
 	28 -- 43 [f=1];
 	28 -- 8 [f=18];
 	32 -- 28 [f=1];
 	32 -- 39 [f=13];
 	32 -- 42 [f=15];
 	40 -- 22 [f=1];
 	40 -- 47 [f=1];
 	43 -- 11 [f=1];
 	43 -- 17 [f=19];
 }
--- a/examples/graph/graphviz/data/twopi2.gv.txt
+++ b/examples/graph/graphviz/data/twopi2.gv.txt
--- a/examples/graph/graphviz/data/unix.gv.txt
+++ b/examples/graph/graphviz/data/unix.gv.txt
@ -0,0 +1,55 @@
 /* courtesy Ian Darwin and Geoff Collyer, Softquad Inc. */
 digraph unix {
 	size="6,6";
 	node [color=lightblue, style=filled];
 	"5th Edition" -> "6th Edition";
 	"5th Edition" -> "PWB 1.0";
 	"6th Edition" -> "LSX";
 	"6th Edition" -> "1 BSD";
 	"6th Edition" -> "Mini Unix";
 	"6th Edition" -> "Wollongong";
 	"6th Edition" -> "Interdata";
 	"Interdata" -> "Unix/TS 3.0";
 	"Interdata" -> "PWB 2.0";
 	"Interdata" -> "7th Edition";
 	"7th Edition" -> "8th Edition";
 	"7th Edition" -> "32V";
 	"7th Edition" -> "V7M";
 	"7th Edition" -> "Ultrix-11";
 	"7th Edition" -> "Xenix";
 	"7th Edition" -> "UniPlus+";
 	"V7M" -> "Ultrix-11";
 	"8th Edition" -> "9th Edition";
 	"1 BSD" -> "2 BSD";
 	"2 BSD" -> "2.8 BSD";
 	"2.8 BSD" -> "Ultrix-11";
 	"2.8 BSD" -> "2.9 BSD";
 	"32V" -> "3 BSD";
 	"3 BSD" -> "4 BSD";
 	"4 BSD" -> "4.1 BSD";
 	"4.1 BSD" -> "4.2 BSD";
 	"4.1 BSD" -> "2.8 BSD";
 	"4.1 BSD" -> "8th Edition";
 	"4.2 BSD" -> "4.3 BSD";
 	"4.2 BSD" -> "Ultrix-32";
 	"PWB 1.0" -> "PWB 1.2";
 	"PWB 1.0" -> "USG 1.0";
 	"PWB 1.2" -> "PWB 2.0";
 	"USG 1.0" -> "CB Unix 1";
 	"USG 1.0" -> "USG 2.0";
 	"CB Unix 1" -> "CB Unix 2";
 	"CB Unix 2" -> "CB Unix 3";
 	"CB Unix 3" -> "Unix/TS++";
 	"CB Unix 3" -> "PDP-11 Sys V";
 	"USG 2.0" -> "USG 3.0";
 	"USG 3.0" -> "Unix/TS 3.0";
 	"PWB 2.0" -> "Unix/TS 3.0";
 	"Unix/TS 1.0" -> "Unix/TS 3.0";
 	"Unix/TS 3.0" -> "TS 4.0";
 	"Unix/TS++" -> "TS 4.0";
 	"CB Unix 3" -> "TS 4.0";
 	"TS 4.0" -> "System V.0";
 	"System V.0" -> "System V.2";
 	"System V.2" -> "System V.3";
 }

--- a/examples/graph/graphviz/data/world.gv.txt
+++ b/examples/graph/graphviz/data/world.gv.txt
@ -0,0 +1,67 @@
 digraph world {
 size="7,7";
 	{rank=same; S8 S24 S1 S35 S30;}
 	{rank=same; T8 T24 T1 T35 T30;}
 	{rank=same; 43 37 36 10 2;}
 	{rank=same; 25 9 38 40 13 17 12 18;}
 	{rank=same; 26 42 11 3 33 19 39 14 16;}
 	{rank=same; 4 31 34 21 41 28 20;}
 	{rank=same; 27 5 22 32 29 15;}
 	{rank=same; 6 23;}
 	{rank=same; 7;}

 	S8 -> 9;
 	S24 -> 25;
 	S24 -> 27;
 	S1 -> 2;
 	S1 -> 10;
 	S35 -> 43;
 	S35 -> 36;
 	S30 -> 31;
 	S30 -> 33;
 	9 -> 42;
 	9 -> T1;
 	25 -> T1;
 	25 -> 26;
 	27 -> T24;
 	2 -> {3 ; 16 ; 17 ; T1 ; 18}
 	10 -> { 11 ; 14 ; T1 ; 13; 12;}
 	31 -> T1;
 	31 -> 32;
 	33 -> T30;
 	33 -> 34;
 	42 -> 4;
 	26 -> 4;
 	3 -> 4;
 	16 -> 15;
 	17 -> 19;
 	18 -> 29;
 	11 -> 4;
 	14 -> 15;
 	37 -> {39 ; 41 ; 38 ; 40;}
 	13 -> 19;
 	12 -> 29;
 	43 -> 38;
 	43 -> 40;
 	36 -> 19;
 	32 -> 23;
 	34 -> 29;
 	39 -> 15;
 	41 -> 29;
 	38 -> 4;
 	40 -> 19;
 	4 -> 5;
 	19 -> {21 ; 20 ; 28;}
 	5 -> {6 ; T35 ; 23;}
 	21 -> 22;
 	20 -> 15;
 	28 -> 29;
 	6 -> 7;
 	15 -> T1;
 	22 -> T35;
 	22 -> 23;
 	29 -> T30;
 	7 -> T8;
 	23 -> T24;
 	23 -> T1;
 }
--- a/examples/graph/graphviz/graphviz_gallery.html
+++ b/examples/graph/graphviz/graphviz_gallery.html
@ -0,0 +1,88 @@
 <html>
 <head>
    <title>Graph | Graphviz Gallery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../../vis.js"></script>

    <style type="text/css">
        p {
            width: 600px;
        }
        html, body, select {
            font: 11pt arial;
        }
        #mygraph {
            width: 100%;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>
 </head>
 <body>

 <script>
    if (location.href.substr(0, 5) == 'file:') {
        document.write(
            '<p style="color: red;">' +
                '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 load DOT graphs in ' +
                'the <a href="../15_dot_language_playground.html" ' +
                'style="color:red;">playground</a>.' +
            '</p>');
    }
 </script>

 <p>
    The following examples are unmodified copies from the
    <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
 </p>
 <p>
    Note that some style attributes of Graphviz are not supported by vis.js,
    and that vis.js offers options not supported by Graphviz (which could make
    some examples look much nicer).
 </p>

 <p>
    <label for="url">Select an example:</label>
    <select id="url" onchange="loadData()">
        <option value="data/fsm.gv.txt">fsm</option>
        <option value="data/hello.gv.txt">hello</option>
        <option value="data/process.gv.txt">process</option>
        <option value="data/siblings.gv.txt">siblings</option>
        <option value="data/softmaint.gv.txt">softmaint</option>
        <option value="data/traffic_lights.gv.txt">traffic_lights</option>
        <option value="data/transparency.gv.txt">transparency</option>
        <option value="data/twopi2.gv.txt">twopi2</option>
        <option value="data/unix.gv.txt">unix</option>
        <!-- TODO: get example world working (needs some extension of the DOT parser)
        <option value="data/world.gv.txt">world</option>
        -->
    </select>
 </p>

 <div id="mygraph"></div>
 <script type="text/javascript">
    var container = document.getElementById('mygraph');
    var url = document.getElementById('url');
    var graph = new vis.Graph(container);

    function loadData () {
        $.ajax({
            type: "GET",
            url: url.value
        }).done(function(data) {
            graph.setOptions({
                stabilize: false
            });
            graph.setData( {
                dot: data
            });
        });
    }
    loadData();
 </script>
 </body>
 </html>
--- a/examples/graph/graphviz/screenshots/fsm.png
+++ b/examples/graph/graphviz/screenshots/fsm.png
--- a/examples/graph/graphviz/screenshots/hello.png
+++ b/examples/graph/graphviz/screenshots/hello.png
--- a/examples/graph/graphviz/screenshots/softmaint.png
+++ b/examples/graph/graphviz/screenshots/softmaint.png
--- a/examples/graph/graphviz/screenshots/traffic_lights.png
+++ b/examples/graph/graphviz/screenshots/traffic_lights.png
--- a/examples/graph/img/refresh-cl/Hardware-Fax-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Fax-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-Laptop-1-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Laptop-1-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-Mobile-Phone-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Mobile-Phone-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-Computer-3-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-Computer-3-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-PDA-02-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-PDA-02-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-PDA-04-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-PDA-04-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-PDA-05-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-PDA-05-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-Phone-Picture-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-Phone-Picture-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-Printer-Blue-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Printer-Blue-icon.png
--- a/examples/graph/img/refresh-cl/Misc-Scanner-default-icon.png
+++ b/examples/graph/img/refresh-cl/Misc-Scanner-default-icon.png
--- a/examples/graph/img/refresh-cl/Network-Drive-icon.png
+++ b/examples/graph/img/refresh-cl/Network-Drive-icon.png
--- a/examples/graph/img/refresh-cl/Network-Internet-Connection-icon.png
+++ b/examples/graph/img/refresh-cl/Network-Internet-Connection-icon.png
--- a/examples/graph/img/refresh-cl/Network-Pipe-icon.png
+++ b/examples/graph/img/refresh-cl/Network-Pipe-icon.png
--- a/examples/graph/img/refresh-cl/System-Firewall-2-icon.png
+++ b/examples/graph/img/refresh-cl/System-Firewall-2-icon.png
--- a/examples/graph/img/refresh-cl/System-Globe-icon.png
+++ b/examples/graph/img/refresh-cl/System-Globe-icon.png
--- a/examples/graph/img/refresh-cl/license.txt
+++ b/examples/graph/img/refresh-cl/license.txt
@ -0,0 +1,14 @@
 Refresh Cl icon set

 http://www.iconarchive.com/show/refresh-cl-icons-by-tpdkdesign.net.html
 http://www.iconarchive.com/artist/tpdkdesign.net.html

 Artist: TpdkDesign.net
 License: Free for non-commercial use.

 Name: TpdkDesign.net
 URL: http://www.tpdkdesign.net
 Available for custom work: No
 Default License: Free for non-commercial use.
 Commercial usage: Not allowed

--- a/examples/graph/img/soft-scraps-icons/Document-icon24.png
+++ b/examples/graph/img/soft-scraps-icons/Document-icon24.png
--- a/examples/graph/img/soft-scraps-icons/Document-icon32.png
+++ b/examples/graph/img/soft-scraps-icons/Document-icon32.png
--- a/examples/graph/img/soft-scraps-icons/Document-icon48.png
+++ b/examples/graph/img/soft-scraps-icons/Document-icon48.png
--- a/examples/graph/img/soft-scraps-icons/Email-icon24.png
+++ b/examples/graph/img/soft-scraps-icons/Email-icon24.png
--- a/examples/graph/img/soft-scraps-icons/Email-icon32.png
+++ b/examples/graph/img/soft-scraps-icons/Email-icon32.png
--- a/examples/graph/img/soft-scraps-icons/Email-icon48.png
+++ b/examples/graph/img/soft-scraps-icons/Email-icon48.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon24.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon24.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon32.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon32.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon48.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon48.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon64.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon64.png
--- a/examples/graph/img/soft-scraps-icons/Smiley-Angry-icon.png
+++ b/examples/graph/img/soft-scraps-icons/Smiley-Angry-icon.png
--- a/examples/graph/img/soft-scraps-icons/Smiley-Grin-icon.png
+++ b/examples/graph/img/soft-scraps-icons/Smiley-Grin-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Administrator-Blue-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Administrator-Blue-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Administrator-Green-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Administrator-Green-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Coat-Blue-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Coat-Blue-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Coat-Green-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Coat-Green-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Coat-Red-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Coat-Red-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Executive-Green-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Executive-Green-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Preppy-Blue-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Preppy-Blue-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Preppy-Red-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Preppy-Red-icon.png
--- a/examples/graph/img/soft-scraps-icons/license.txt
+++ b/examples/graph/img/soft-scraps-icons/license.txt
@ -0,0 +1,12 @@
 Scrap Icons by Deleket

 http://www.iconarchive.com/show/soft-scraps-icons-by-deleket.html


 Artist: Deleket (Jojo Mendoza) (Available for custom work)
 License: CC Attribution-Noncommercial-No Derivate 3.0

 http://creativecommons.org/licenses/by-nc-nd/3.0/

 Commercial usage: Allowed (Author Approval required -> Visit artist homepage for details).

--- a/examples/timeline/01_basic.html
+++ b/examples/timeline/01_basic.html
@ -0,0 +1,31 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Basic demo</title>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>

    <script src="../../vis.js"></script>
 </head>
 <body>
 <div id="visualization"></div>

 <script type="text/javascript">
    var container = document.getElementById('visualization');
    var items = [
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/02_dataset.html
+++ b/examples/timeline/02_dataset.html
@ -0,0 +1,54 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Dataset example</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }

        #visualization {
            box-sizing: border-box;
            width: 100%;
            height: 300px;
        }
    </style>

    <script src="../../vis.js"></script>
 </head>
 <body>
 <div id="visualization"></div>

 <script>
    var now = moment().minutes(0).seconds(0).milliseconds(0);

    // create a dataset with items
    var items = new vis.DataSet({
        fieldTypes: {
            start: 'Date',
            end: 'Date'
        }
    });
    items.add([
        {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
        {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
        {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
        {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
        {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
        {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
    ]);

    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 7),
        height: '100%'
    };

    var timeline = new vis.Timeline(container, items, options);

 </script>
 </body>
 </html>
--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_much_data.html
@ -0,0 +1,65 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | a lot of data</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
    </style>

    <script src="../../vis.js"></script>
 </head>
 <body>
 <h1>
    Test with a lot of data
 </h1>
 <p>
    <label for="count">Number of items</label>
    <input id="count" value="100">
    <input id="draw" type="button" value="draw">
 </p>
 <div id="visualization"></div>

 <script>
    // create a dataset with items
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var items = new vis.DataSet({
        fieldTypes: {
            start: 'Date',
            end: 'Date'
        }
    });

    // create data
    function createData() {
        var count = parseInt(document.getElementById('count').value) || 100;
        var newData = [];
        for (var i = 0; i < count; i++) {
            newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
        }
        items.clear();
        items.add(newData);
    }
    createData();

    document.getElementById('draw').onclick = createData;

    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 11),
        zoomMin: 1000 * 60 * 60 * 24,          // a day
        zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
        //maxHeight: 300,
        //height: '300px',
        //orientation: 'top'
    };

    var timeline = new vis.Timeline(container, items, options);

 </script>
 </body>
 </html>
--- a/examples/timeline/04_html_data.html
+++ b/examples/timeline/04_html_data.html
@ -0,0 +1,69 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | HTML data</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
        span {
            color: red;
        }
        span.large {
            font-size: 200%;
        }
    </style>

    <script src="../../vis.js"></script>
 </head>
 <body>
 <p>
    Load HTML contents in the Timeline
 </p>
 <div id="visualization"></div>

 <script>
    // create a couple of HTML items in various ways

    var item1 = document.createElement('div');
    item1.appendChild(document.createTextNode('item 1'));

    var item2 = document.createElement('div');
    item2.innerHTML = '<span>item 2</span>';

    var item3 = document.createElement('div');
    var span3 = document.createElement('span');
    span3.className = 'large';
    span3.appendChild(document.createTextNode('item 3'));
    item3.appendChild(span3);

    var item4 = 'item <span class="large">4</span>';

    var item5 = document.createElement('div');
    item5.appendChild(document.createTextNode('item 5'));
    item5.appendChild(document.createElement('br'));
    var img5 = document.createElement('img');
    img5.src = 'img/attachment-icon.png';
    img5.style.width = '48px';
    img5.style.height = '48px';
    item5.appendChild(img5);

    var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';

    // create data and a Timeline
    var container = document.getElementById('visualization');
    var items = [
        {id: 1, content: item1, start: '2013-04-20'},
        {id: 2, content: item2, start: '2013-04-14'},
        {id: 3, content: item3, start: '2013-04-18'},
        {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: item5, start: '2013-04-25'},
        {id: 6, content: item6, start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@ -0,0 +1,64 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Group example</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }

        #visualization {
            box-sizing: border-box;
            width: 100%;
            height: 300px;
        }
    </style>

    <script src="../../vis.js"></script>
 </head>
 <body>
 <div id="visualization"></div>

 <script>
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var groupCount = 3;
    var itemCount = 20;

    // create a dataset with groups
    var names = ['John', 'Alston', 'Lee', 'Grant'];
    var groups = new vis.DataSet();
    for (var g = 0; g < groupCount; g++) {
        groups.add({id: g, content: names[g]});
    }

    // create a dataset with items
    var items = new vis.DataSet();
    for (var i = 0; i < itemCount; i++) {
        var start = now.clone().add('hours', Math.random() * 200);
        var group = Math.floor(Math.random() * groupCount);
        items.add({
            id: i,
            group: group,
            content: 'item ' + i +
                    ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
            start: start,
            type: 'box'
        });
    }

    // create visualization
    var container = document.getElementById('visualization');
    var options = {
        groupsOrder: 'content'
    };

    var timeline = new vis.Timeline(container);
    timeline.setOptions(options);
    timeline.setGroups(groups);
    timeline.setItems(items);

 </script>
 </body>
 </html>
--- a/examples/timeline/img/Hardware-Mobile-Phone-icon.png
+++ b/examples/timeline/img/Hardware-Mobile-Phone-icon.png
--- a/examples/timeline/img/attachment-icon.png
+++ b/examples/timeline/img/attachment-icon.png
--- a/examples/timeline/img/blog-post-edit-icon.png
+++ b/examples/timeline/img/blog-post-edit-icon.png