paco

familyark/app/node_modules/express/package.json

@@ -1,5 +1,5 @@
 {
-  "_from": "express@^4.16.0",
+  "_from": "express@^4.17.1",
   "_id": "express@4.17.1",
   "_inBundle": false,
   "_integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
@@ -8,12 +8,12 @@
   "_requested": {
     "type": "range",
     "registry": true,
-    "raw": "express@^4.16.0",
+    "raw": "express@^4.17.1",
     "name": "express",
     "escapedName": "express",
-    "rawSpec": "^4.16.0",
+    "rawSpec": "^4.17.1",
     "saveSpec": null,
-    "fetchSpec": "^4.16.0"
+    "fetchSpec": "^4.17.1"
   },
   "_requiredBy": [
     "#USER",
@@ -21,7 +21,7 @@
   ],
   "_resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
   "_shasum": "4491fc38605cf51f8629d39c2b5d026f98a4c134",
-  "_spec": "express@^4.16.0",
+  "_spec": "express@^4.17.1",
   "_where": "/app",
   "author": {
     "name": "TJ Holowaychuk",

familyark/app/node_modules/treant-js/README.md

@@ -0,0 +1,16 @@
+<pre>
+  _______                   _          _     
+ |__   __|                 | |        (_)    
+    | |_ __ ___  __ _ _ __ | |_ ______ _ ___ 
+    | | '__/ _ \/ _` | '_ \| __|______| / __|
+    | | | |  __/ (_| | | | | |_       | \__ \
+    |_|_|  \___|\__,_|_| |_|\__|      | |___/
+                                     _/ |    
+                                    |__/     
+</pre>
+
+Treant-js is an SVG based JS library for drawing tree diagrams.
+It relies on Raphael and jQuery for handling SVG and animations.
+
+For Docs, Examples, and everything else see:
+http://fperucic.github.io/treant-js

familyark/app/node_modules/treant-js/Treant.css

@@ -0,0 +1,11 @@
+/* required LIB STYLES */
+/* .Treant se automatski dodaje na svaki chart conatiner */
+.Treant { position: relative; overflow: hidden; padding: 0 !important; }
+.Treant > .node,
+.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
+.Treant.Treant-loaded .node,
+.Treant.Treant-loaded .pseudo { visibility: visible; }
+.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
+.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
+.Treant .collapsed .collapse-switch { background-color: #868DEE; }
+.Treant > .node img {	border: none; float: left; }

familyark/app/node_modules/treant-js/build

@@ -0,0 +1 @@
+java -jar {path}/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --warning_level QUIET --externs vendor/jquery.min.js --externs vendor/perfect-scrollbar/perfect-scrollbar.js --externs vendor/raphael.js --language_in ECMASCRIPT5 --js Treant.js --js_output_file Treant.min.js

familyark/app/node_modules/treant-js/examples/basic-example/basic-example.css

@@ -0,0 +1,31 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 600px; margin: 5px; width: 900px; }
+.Treant > .node {  }
+.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
+.node-name { font-weight: bold;}
+
+.nodeExample1 {
+    padding: 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    border: 1px solid #000;
+    width: 200px;
+    font-family: Tahoma;
+    font-size: 12px;
+}
+
+.nodeExample1 img {
+    margin-right:  10px;
+}

familyark/app/node_modules/treant-js/examples/basic-example/basic-example.js

@@ -0,0 +1,220 @@
+var config = {
+        container: "#basic-example",
+        
+        connectors: {
+            type: 'step'
+        },
+        node: {
+            HTMLclass: 'nodeExample1'
+        }
+    },
+    ceo = {
+        text: {
+            name: "Mark Hill",
+            title: "Chief executive officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/2.jpg"
+    },
+
+    cto = {
+        parent: ceo,
+        text:{
+            name: "Joe Linux",
+            title: "Chief Technology Officer",
+        },
+        stackChildren: true,
+        image: "../headshots/1.jpg"
+    },
+    cbo = {
+        parent: ceo,
+        stackChildren: true,
+        text:{
+            name: "Linda May",
+            title: "Chief Business Officer",
+        },
+        image: "../headshots/5.jpg"
+    },
+    cdo = {
+        parent: ceo,
+        text:{
+            name: "John Green",
+            title: "Chief accounting officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/6.jpg"
+    },
+    cio = {
+        parent: cto,
+        text:{
+            name: "Ron Blomquist",
+            title: "Chief Information Security Officer"
+        },
+        image: "../headshots/8.jpg"
+    },
+    ciso = {
+        parent: cto,
+        text:{
+            name: "Michael Rubin",
+            title: "Chief Innovation Officer",
+            contact: {val: "we@aregreat.com", href: "mailto:we@aregreat.com"}
+        },
+        image: "../headshots/9.jpg"
+    },
+    cio2 = {
+        parent: cdo,
+        text:{
+            name: "Erica Reel",
+            title: "Chief Customer Officer"
+        },
+        link: {
+            href: "http://www.google.com"
+        },
+        image: "../headshots/10.jpg"
+    },
+    ciso2 = {
+        parent: cbo,
+        text:{
+            name: "Alice Lopez",
+            title: "Chief Communications Officer"
+        },
+        image: "../headshots/7.jpg"
+    },
+    ciso3 = {
+        parent: cbo,
+        text:{
+            name: "Mary Johnson",
+            title: "Chief Brand Officer"
+        },
+        image: "../headshots/4.jpg"
+    },
+    ciso4 = {
+        parent: cbo,
+        text:{
+            name: "Kirk Douglas",
+            title: "Chief Business Development Officer"
+        },
+        image: "../headshots/11.jpg"
+    }
+
+    chart_config = [
+        config,
+        ceo,
+        cto,
+        cbo,
+        cdo,
+        cio,
+        ciso,
+        cio2,
+        ciso2,
+        ciso3,
+        ciso4
+    ];
+
+
+
+
+    // Antoher approach, same result
+    // JSON approach
+
+/*
+    var chart_config = {
+        chart: {
+            container: "#basic-example",
+            
+            connectors: {
+                type: 'step'
+            },
+            node: {
+                HTMLclass: 'nodeExample1'
+            }
+        },
+        nodeStructure: {
+            text: {
+                name: "Mark Hill",
+                title: "Chief executive officer",
+                contact: "Tel: 01 213 123 134",
+            },
+            image: "../headshots/2.jpg",
+            children: [
+                {
+                    text:{
+                        name: "Joe Linux",
+                        title: "Chief Technology Officer",
+                    },
+                    stackChildren: true,
+                    image: "../headshots/1.jpg",
+                    children: [
+                        {
+                            text:{
+                                name: "Ron Blomquist",
+                                title: "Chief Information Security Officer"
+                            },
+                            image: "../headshots/8.jpg"
+                        },
+                        {
+                            text:{
+                                name: "Michael Rubin",
+                                title: "Chief Innovation Officer",
+                                contact: "we@aregreat.com"
+                            },
+                            image: "../headshots/9.jpg"
+                        }
+                    ]
+                },
+                {
+                    stackChildren: true,
+                    text:{
+                        name: "Linda May",
+                        title: "Chief Business Officer",
+                    },
+                    image: "../headshots/5.jpg",
+                    children: [
+                        {
+                            text:{
+                                name: "Alice Lopez",
+                                title: "Chief Communications Officer"
+                            },
+                            image: "../headshots/7.jpg"
+                        },
+                        {
+                            text:{
+                                name: "Mary Johnson",
+                                title: "Chief Brand Officer"
+                            },
+                            image: "../headshots/4.jpg"
+                        },
+                        {
+                            text:{
+                                name: "Kirk Douglas",
+                                title: "Chief Business Development Officer"
+                            },
+                            image: "../headshots/11.jpg"
+                        }
+                    ]
+                },
+                {
+                    text:{
+                        name: "John Green",
+                        title: "Chief accounting officer",
+                        contact: "Tel: 01 213 123 134",
+                    },
+                    image: "../headshots/6.jpg",
+                    children: [
+                        {
+                            text:{
+                                name: "Erica Reel",
+                                title: "Chief Customer Officer"
+                            },
+                            link: {
+                                href: "http://www.google.com"
+                            },
+                            image: "../headshots/10.jpg"
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+
+*/

familyark/app/node_modules/treant-js/examples/basic-example/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Basic example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="basic-example.css">
+    
+</head>
+<body>
+    <div class="chart" id="basic-example"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="basic-example.js"></script>
+    <script>
+        new Treant( chart_config );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/collapsable/collapsable.css

@@ -0,0 +1,18 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 600px; margin: 5px; width: 900px; }
+.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
+.Treant > .node img { width: 100%; height: 100%; }
+
+.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
+.Treant .node.collapsed { background-color: #DEF82D; }
+.Treant .node.collapsed .collapse-switch { background: none; }

familyark/app/node_modules/treant-js/examples/collapsable/collapsable.js

@@ -0,0 +1,112 @@
+
+    var chart_config = {
+        chart: {
+            container: "#collapsable-example",
+
+            animateOnInit: true,
+            
+            node: {
+                collapsable: true
+            },
+            animation: {
+                nodeAnimation: "easeOutBounce",
+                nodeSpeed: 700,
+                connectorsAnimation: "bounce",
+                connectorsSpeed: 700
+            }
+        },
+        nodeStructure: {
+            image: "img/malory.png",
+            children: [
+                {
+                    image: "img/lana.png",
+                    collapsed: true,
+                    children: [
+                        {
+                            image: "img/figgs.png"
+                        }
+                    ]
+                },
+                {
+                    image: "img/sterling.png",
+                    childrenDropLevel: 1,
+                    children: [
+                        {
+                            image: "img/woodhouse.png"
+                        }
+                    ]
+                },
+                {
+                    pseudo: true,
+                    children: [
+                        {
+                            image: "img/cheryl.png"
+                        },
+                        {
+                            image: "img/pam.png"
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+
+/* Array approach
+    var config = {
+        container: "#collapsable-example",
+
+        animateOnInit: true,
+        
+        node: {
+            collapsable: true
+        },
+        animation: {
+            nodeAnimation: "easeOutBounce",
+            nodeSpeed: 700,
+            connectorsAnimation: "bounce",
+            connectorsSpeed: 700
+        }
+    },
+    malory = {
+        image: "img/malory.png"
+    },
+
+    lana = {
+        parent: malory,
+        image: "img/lana.png"
+    }
+
+    figgs = {
+        parent: lana,
+        image: "img/figgs.png"
+    }
+
+    sterling = {
+        parent: malory,
+        childrenDropLevel: 1,
+        image: "img/sterling.png"
+    },
+
+    woodhouse = {
+        parent: sterling,
+        image: "img/woodhouse.png"
+    },
+
+    pseudo = {
+        parent: malory,
+        pseudo: true
+    },
+
+    cheryl = {
+        parent: pseudo,
+        image: "img/cheryl.png"
+    },
+
+    pam = {
+        parent: pseudo,
+        image: "img/pam.png"
+    },
+
+    chart_config = [config, malory, lana, figgs, sterling, woodhouse, pseudo, pam, cheryl];
+
+*/

familyark/app/node_modules/treant-js/examples/collapsable/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Collapsable example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="collapsable.css">
+    
+    <link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
+
+</head>
+<body>
+    <div class="chart" id="collapsable-example"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="../../vendor/jquery.min.js"></script>
+    <script src="../../vendor/jquery.easing.js"></script>
+    
+    
+    <script src="collapsable.js"></script>
+    <script>
+        tree = new Treant( chart_config );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/comments/example8.css

@@ -0,0 +1,39 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+
+body { background: #fff;  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
+/* optional Container STYLES */
+.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
+.comments { width: 427px; margin: 15px auto; }
+.comments ul { margin-left: 35px; list-style: none; }
+.comment {
+    color: #333333;
+    display: inline-block;
+    font-size: 14px;
+    margin-top: 6px;
+    width: 360px;
+}
+
+.comment img {
+    border-radius: 3px 3px 3px 3px;
+    float: left;
+    height: 30px;
+    margin-right: 8px;
+    margin-top: 3px;
+    width: 30px;
+}
+.comment p {
+    color: #42474A;
+    font-size: 14px;
+    line-height: 1.4em;
+    margin-bottom: 0;
+    max-height: 4.2em;
+    overflow: hidden;
+}
+
+.comment .user {
+    color: rgba(30, 55, 70, 0.4);
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.Treant .comment { margin: 0; padding: 3px; border: 1px solid #ddd; border-radius: 3px; }

familyark/app/node_modules/treant-js/examples/comments/example8.js

@@ -0,0 +1,79 @@
+var config = {
+        container: "#OrganiseChart8",
+        levelSeparation:    70,
+        siblingSeparation:  60,
+        nodeAlign: "BOTTOM",
+        connectors: {
+            type: "step",
+            style: {
+                "stroke-width": 2,
+                "stroke": "#ccc",
+                "stroke-dasharray": "--", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
+                "arrow-end": "classic-wide-long"
+            }
+        }
+    },
+
+    first_post = {
+        innerHTML: "#first-post"
+    },
+
+    first_reply = {
+        parent: first_post,
+        innerHTML: "#first-reply"
+    },
+
+    second_reply = {
+        parent: first_post,
+        innerHTML: "#second-reply"
+    }
+
+    second_reply_reply = {
+        parent: second_reply,
+        innerHTML: "#second-reply-reply"
+    },
+
+tree_structure = [
+    config, first_post, first_reply, second_reply, second_reply_reply
+];
+
+
+/* ALTERNATIVE tree_structure CONFIG, same result as above
+
+    var tree_structure = {
+        chart: {
+            container: "#OrganiseChart8",
+            levelSeparation:    70,
+            siblingSeparation:  60,
+            nodeAlign: "BOTTOM",
+            connectors: {
+                type: "step",
+                style: {
+                    "stroke-width": 2,
+                    "stroke": "#ccc",
+                    "stroke-dasharray": "--",
+                    "arrow-end": "classic-wide-long"
+                }
+            }
+        },
+        nodeStructure: {
+            innerHTML: "#first-post",
+            children: [
+                {
+                    innerHTML: "#first-reply"
+                },
+                {
+                    innerHTML: "#second-reply",
+                    children: [
+                        {
+                            innerHTML: "#second-reply-reply"
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+
+*/
+
+

familyark/app/node_modules/treant-js/examples/comments/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Comments, selector example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="example8.css">
+
+</head>
+<body>
+
+    <div class="comments">
+        <ul>
+            <li>
+                <div id="first-post" class="comment">
+                    <img alt="Avatar" src="avatar.jpg">
+                    <p>
+                        <span class="user">John Smitt</span> &mdash; 
+                        <span class="line-truncate">
+                            <em>Treant.js</em> is an library that handles drawing and visualisation of tree structural charts. What does that mean?
+                        </span>
+                    </p>
+                </div>
+                <ul>
+                    <li>
+                        <div id="first-reply" class="comment">
+                            <img alt="Avatar" src="avatar.jpg">
+                            <p>
+                                <span class="user"> Peter Griffin </span> &mdash; 
+                                <span class="line-truncate">
+                                    Great collection! A lot of good inspiration. Thanks!
+                                </span>
+                            </p>
+                        </div>
+                    </li>
+                    <li>
+                        <div id="second-reply" class="comment">
+                            <img alt="Avatar" src="avatar.jpg">
+                            <p>
+                                <span class="user">Jane Black</span> &mdash; 
+                                <span class="line-truncate">
+                                    Thanks for tutorial. One issue I have is that all tutorials is on dev environment. What about production? what differences between …
+                                </span>
+                            </p>
+                        </div>
+                        <ul>
+                            <li>
+                                <div id="second-reply-reply" class="comment">
+                                    <img alt="Avatar" src="avatar.jpg">
+                                    <p>
+                                        <span class="user"> Joe Linux </span> &mdash; 
+                                        <span class="line-truncate">
+                                            Looks very promising. I'll have to take a closer look some time.
+                                        </span>
+                                    </p>
+                                </div>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+
+    <div class="chart" id="OrganiseChart8"></div>
+    
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+
+    
+    <script src="example8.js"></script>
+    <script>
+        new Treant( tree_structure );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/connectors/connectors.css

@@ -0,0 +1,36 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+
+
+body { background: #fff; font-family: "Droid Serif",Georgia,"Times New Roman",Times,serif; color: #444444; }
+
+/* optional Container STYLES */
+.chart { height: 600px; width: 750px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
+
+.node { font-size: 11px; }
+
+.node.big-commpany { 
+	cursor: pointer;
+	padding: 0 2px;
+	min-width: 60px;
+	text-align: center;
+	height: 30px;
+	border: 2px solid #E8E8E3; 
+	border-radius: 2px;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.5);
+	background: #fff; 
+}
+.node.big-commpany:active { 
+	box-shadow: inset 1px 1px 1px rgba(0,0,0,.1); 
+	margin: 1px 0 0 1px; 
+	border: 2px solid #D3D3CB;
+}
+
+.node.big-commpany .node-name {
+	line-height: 30px;
+	color: #9B9B9B;
+}
+
+.node.big-commpany:hover .node-name {
+	color: #8B8B8B;
+	text-shadow: 1px 1px rgba(0,0,0,.15);
+}

familyark/app/node_modules/treant-js/examples/connectors/connectors.js

@@ -0,0 +1,166 @@
+// fix arrow end issues:
+// https://github.com/DmitryBaranovskiy/raphael/issues/471
+
+var chart_config = {
+	chart: {
+		container: "#OrganiseChart-big-commpany",
+		levelSeparation: 45,
+
+		rootOrientation: "WEST",
+
+		nodeAlign: "BOTTOM",
+
+		connectors: {
+			type: "step",
+			style: {
+				"stroke-width": 2
+			}
+		},
+		node: {
+			HTMLclass: "big-commpany"
+		}
+	},
+
+	nodeStructure: {
+		text: { name: "CEO" },
+		connectors: {
+			style: {
+				'stroke': '#bbb',
+				'arrow-end': 'oval-wide-long'
+			}
+		},
+		children: [
+			{
+				text: { name: "Account" },
+				stackChildren: true,
+				connectors: {
+					style: {
+						'stroke': '#8080FF',
+						'arrow-end': 'block-wide-long'
+					}
+				},
+				children: [
+					{
+						text: {name: "Receptionist"},
+						HTMLclass: "reception"
+					},
+					{
+						text: {name: "Author"}
+					}
+				]
+			},
+			{
+				text: { name: "Operation Manager" },
+				connectors: {
+					style: {
+						'stroke': '#bbb',
+						"stroke-dasharray": "- .", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
+						'arrow-start': 'classic-wide-long'
+					}
+				},
+				children: [
+					{
+						text: {name: "Manager I"},
+						connectors: {
+							style: {
+								stroke: "#00CE67"
+							}
+						},
+						children: [
+							{
+								text: {name: "Worker I"}
+							},
+							{
+								pseudo: true,
+								connectors: {
+									style: {
+										stroke: "#00CE67"
+									}
+								},
+								children: [
+									{
+										text: {name: "Worker II"}
+									}
+								]
+							},
+							{
+								text: {name: "Worker III"}
+							}
+						]
+					},
+					{
+						text: {name: "Manager II"},
+						connectors: {
+							type: "curve",
+							style: {
+								stroke: "#50688D"
+							}
+						},
+						children: [
+							{
+								text: {name: "Worker I"}
+							},
+							{
+								text: {name: "Worker II"}
+							}
+						]
+					},
+					{
+						text: {name: "Manager III"},
+						connectors: {
+							style: {
+								'stroke': '#FF5555'
+							}
+						},
+						children: [
+							{
+								text: {name: "Worker I"}
+							},
+							{
+								pseudo: true,
+								connectors: {
+									style: {
+										'stroke': '#FF5555'
+									}
+								},
+								children: [
+									{
+										text: {name: "Worker II"}
+									},
+									{
+										text: {name: "Worker III"}
+									}
+								]
+							},
+							{
+								text: {name: "Worker IV"}
+							}
+						]
+					}
+				]
+			},
+			{
+				text: { name: "Delivery Manager" },
+				stackChildren: true,
+				connectors: {
+					stackIndent: 30,
+					style: {
+						'stroke': '#E3C61A',
+						'arrow-end': 'block-wide-long'
+					}
+				},
+				children: [
+					{
+						text: {name: "Driver I"}
+					},
+					{
+						text: {name: "Driver II"}
+					},
+					{
+						text: {name: "Driver III"}
+					}
+				]
+			}
+		]
+	}
+};

familyark/app/node_modules/treant-js/examples/connectors/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+	<title> Connectors style example </title>
+	<link rel="stylesheet" href="../../Treant.css">
+	<link rel="stylesheet" href="connectors.css">
+	
+	<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
+	
+</head>
+<body>
+	<div class="chart" id="OrganiseChart-big-commpany"></div>
+	
+	<script src="../../vendor/raphael.js"></script>
+	<script src="../../Treant.js"></script>
+	<script src="connectors.js"></script>
+
+	<script>
+
+		new Treant( chart_config );
+
+	</script>
+
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/custom-color-plus-scrollbar/custom-color-plus-scrollbar.css

@@ -0,0 +1,44 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 670px; margin: 5px; width: 900px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
+.Treant > .node {  }
+.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
+.node-name { font-weight: bold;}
+
+.nodeExample1 {
+    padding: 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #262626;
+    border: 1px solid #000;
+    width: 200px;
+    font-family: Tahoma;
+    font-size: 12px;
+    color: #ffffff;
+}
+
+.nodeExample1 img {
+    margin-right:  10px;
+}
+
+.Treant > a:link {
+    color: #ffffff;
+}
+
+.Treant > a:visited {
+    color: #ffffff;
+}
+
+.Treant > a:link:hover {
+    color: #636363;
+}

familyark/app/node_modules/treant-js/examples/custom-color-plus-scrollbar/custom-color-plus-scrollbar.js

@@ -0,0 +1,127 @@
+var config = {
+        container: "#OrganiseChart1",
+        rootOrientation:  'WEST', // NORTH || EAST || WEST || SOUTH
+        // levelSeparation: 30,
+        siblingSeparation:   20,
+        subTeeSeparation:    60,
+        scrollbar: "fancy",
+        
+        connectors: {
+            type: 'step'
+        },
+        node: {
+            HTMLclass: 'nodeExample1'
+        }
+    },
+    ceo = {
+        text: {
+            name: "Mark Hill",
+            title: "Chief executive officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/2.jpg",
+        HTMLid: "ceo"
+    },
+
+    cto = {
+        parent: ceo,
+        text:{
+            name: "Joe Linux",
+            title: "Chief Technology Officer",
+        },
+        stackChildren: true,
+        image: "../headshots/1.jpg",
+        HTMLid: "coo"
+    },
+    cbo = {
+        parent: ceo,
+        text:{
+            name: "Linda May",
+            title: "Chief Business Officer",
+        },
+        image: "../headshots/5.jpg",
+        HTMLid: "cbo"
+    },
+    cdo = {
+        parent: ceo,
+        text:{
+            name: "John Green",
+            title: "Chief accounting officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/6.jpg",
+        HTMLid: "cdo"
+    },
+    cio = {
+        parent: cto,
+        text:{
+            name: "Ron Blomquist",
+            title: "Chief Information Security Officer"
+        },
+        image: "../headshots/8.jpg",
+        HTMLid: "cio"
+    },
+    ciso = {
+        parent: cto,
+        text:{
+            name: "Michael Rubin",
+            title: "Chief Innovation Officer",
+            contact: "we@aregreat.com"
+        },
+        image: "../headshots/9.jpg",
+        HTMLid: "ciso"
+    },
+    cio2 = {
+        parent: cdo,
+        text:{
+            name: "Erica Reel",
+            title: "Chief Customer Officer"
+        },
+        link: {
+            href: "http://www.google.com",
+            target: "_blank"
+        },
+        image: "../headshots/10.jpg",
+        HTMLid: "cio2"
+    },
+    ciso2 = {
+        parent: cbo,
+        text:{
+            name: "Alice Lopez",
+            title: "Chief Communications Officer"
+        },
+        image: "../headshots/7.jpg",
+        HTMLid: "ciso2"
+    },
+    ciso3 = {
+        parent: cbo,
+        text:{
+            name: "Mary Johnson",
+            title: "Chief Brand Officer"
+        },
+        image: "../headshots/4.jpg",
+        HTMLid: "ciso2"
+    },
+    ciso4 = {
+        parent: cbo,
+        text:{
+            name: "Kirk Douglas",
+            title: "Chief Business Development Officer"
+        },
+        image: "../headshots/11.jpg",
+        HTMLid: "ciso2"
+    }
+
+    ALTERNATIVE = [
+        config,
+        ceo,
+        cto,
+        cbo,
+        cdo,
+        cio,
+        ciso,
+        cio2,
+        ciso2,
+        ciso3,
+        ciso4
+    ];

familyark/app/node_modules/treant-js/examples/custom-color-plus-scrollbar/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Chart example 1 </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="custom-color-plus-scrollbar.css">
+    
+    <link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
+
+</head>
+<body>
+    <div class="chart" id="OrganiseChart1"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="../../vendor/jquery.min.js"></script>
+    <script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
+    <script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
+    
+    <script src="custom-color-plus-scrollbar.js"></script>
+    <script>
+        new Treant( ALTERNATIVE );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/custom-colored/custom-colored.css

@@ -0,0 +1,43 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 550px; margin: 5px; width: 900px;  }
+.Treant > .node {  }
+.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
+.node-name { font-weight: bold;}
+
+.nodeExample1 {
+    padding: 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    border: 1px solid #000;
+    width: 200px;
+    font-family: Tahoma;
+    font-size: 12px;
+}
+
+.nodeExample1 img {
+    margin-right:  10px;
+}
+
+.gray {
+    background-color: #909090;
+}
+
+.light-gray {
+    background-color: #D3D3C7;
+}
+
+.blue {
+    background-color: #A2BDFD;
+}

familyark/app/node_modules/treant-js/examples/custom-colored/custom-colored.js

@@ -0,0 +1,231 @@
+var config = {
+        container: "#custom-colored",
+
+        nodeAlign: "BOTTOM",
+        
+        connectors: {
+            type: 'step'
+        },
+        node: {
+            HTMLclass: 'nodeExample1'
+        }
+    },
+    ceo = {
+        text: {
+            name: "Mark Hill",
+            title: "Chief executive officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/2.jpg"
+    },
+
+    cto = {
+        parent: ceo,
+        HTMLclass: 'light-gray',
+        text:{
+            name: "Joe Linux",
+            title: "Chief Technology Officer",
+        },
+        image: "../headshots/1.jpg"
+    },
+    cbo = {
+        parent: ceo,
+        childrenDropLevel: 2,
+        HTMLclass: 'blue',
+        text:{
+            name: "Linda May",
+            title: "Chief Business Officer",
+        },
+        image: "../headshots/5.jpg"
+    },
+    cdo = {
+        parent: ceo,
+        HTMLclass: 'gray',
+        text:{
+            name: "John Green",
+            title: "Chief accounting officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/6.jpg"
+    },
+    cio = {
+        parent: cto,
+        HTMLclass: 'light-gray',
+        text:{
+            name: "Ron Blomquist",
+            title: "Chief Information Security Officer"
+        },
+        image: "../headshots/8.jpg"
+    },
+    ciso = {
+        parent: cto,
+        HTMLclass: 'light-gray',
+        text:{
+            name: "Michael Rubin",
+            title: "Chief Innovation Officer",
+            contact: "we@aregreat.com"
+        },
+        image: "../headshots/9.jpg"
+    },
+    cio2 = {
+        parent: cdo,
+        HTMLclass: 'gray',
+        text:{
+            name: "Erica Reel",
+            title: "Chief Customer Officer"
+        },
+        link: {
+            href: "http://www.google.com"
+        },
+        image: "../headshots/10.jpg"
+    },
+    ciso2 = {
+        parent: cbo,
+        HTMLclass: 'blue',
+        text:{
+            name: "Alice Lopez",
+            title: "Chief Communications Officer"
+        },
+        image: "../headshots/7.jpg"
+    },
+    ciso3 = {
+        parent: cbo,
+        HTMLclass: 'blue',
+        text:{
+            name: "Mary Johnson",
+            title: "Chief Brand Officer"
+        },
+        image: "../headshots/4.jpg"
+    },
+    ciso4 = {
+        parent: cbo,
+        HTMLclass: 'blue',
+        text:{
+            name: "Kirk Douglas",
+            title: "Chief Business Development Officer"
+        },
+        image: "../headshots/11.jpg"
+    },
+
+    chart_config = [
+        config,
+        ceo,cto,cbo,
+        cdo,cio,ciso,
+        cio2,ciso2,ciso3,ciso4
+    ];
+
+    // Antoher approach, same result
+    // JSON approach
+
+/*
+    var chart_config = {
+        chart: {
+            container: "#custom-colored",
+
+            nodeAlign: "BOTTOM",
+
+            connectors: {
+                type: 'step'
+            },
+            node: {
+                HTMLclass: 'nodeExample1'
+            }
+        },
+        nodeStructure: {
+            text: {
+                name: "Mark Hill",
+                title: "Chief executive officer",
+                contact: "Tel: 01 213 123 134",
+            },
+            image: "../headshots/2.jpg",
+            children: [
+                {   
+                    text:{
+                        name: "Joe Linux",
+                        title: "Chief Technology Officer",
+                    },
+                    image: "../headshots/1.jpg",
+                    HTMLclass: 'light-gray',
+                    children: [
+                        {
+                            text:{
+                                name: "Ron Blomquist",
+                                title: "Chief Information Security Officer"
+                            },
+                            HTMLclass: 'light-gray',
+                            image: "../headshots/8.jpg"
+                        },
+                        {
+                            text:{
+                                name: "Michael Rubin",
+                                title: "Chief Innovation Officer",
+                                contact: "we@aregreat.com"
+                            },
+                            HTMLclass: 'light-gray',
+                            image: "../headshots/9.jpg"
+                        }
+                    ]
+                },
+                {
+                    childrenDropLevel: 2,
+                    text:{
+                        name: "Linda May",
+                        title: "Chief Business Officer",
+                    },
+                    HTMLclass: 'blue',
+                    image: "../headshots/5.jpg",
+                    children: [
+                        {
+                            parent: cbo,
+                            text:{
+                                name: "Alice Lopez",
+                                title: "Chief Communications Officer"
+                            },
+                            HTMLclass: 'blue',
+                            image: "../headshots/7.jpg"
+                        },
+                        {
+                            text:{
+                                name: "Mary Johnson",
+                                title: "Chief Brand Officer"
+                            },
+                            HTMLclass: 'blue',
+                            image: "../headshots/4.jpg"
+                        },
+                        {
+                            text:{
+                                name: "Kirk Douglas",
+                                title: "Chief Business Development Officer"
+                            },
+                            HTMLclass: 'blue',
+                            image: "../headshots/11.jpg"
+                        }
+                    ]
+                },
+                {
+                    text:{
+                        name: "John Green",
+                        title: "Chief accounting officer",
+                        contact: "Tel: 01 213 123 134",
+                    },
+                    HTMLclass: 'gray',
+                    image: "../headshots/6.jpg",
+                    children: [
+                        {
+                            text:{
+                                name: "Erica Reel",
+                                title: "Chief Customer Officer"
+                            },
+                            link: {
+                                href: "http://www.google.com"
+                            },
+                            HTMLclass: 'gray',
+                            image: "../headshots/10.jpg"
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+
+*/

familyark/app/node_modules/treant-js/examples/custom-colored/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Custom colored example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="custom-colored.css">
+    
+</head>
+<body>
+    <div class="chart" id="custom-colored"> --@-- </div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="custom-colored.js"></script>
+    <script>
+        new Treant( chart_config );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/evolution-tree/example6.css

@@ -0,0 +1,25 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff;  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
+/* optional Container STYLES */
+.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
+
+.evolution-tree {
+    padding: 2px;
+    width: 40px; height: 40px;
+    border-radius: 3px;
+    font-size: 10px;
+}
+
+.evolution-tree .node-name { text-align: center; position: absolute; width: 88px; left: -50%; }
+.evolution-tree img {  margin-right:  10px; float: none !important; }
+
+.evolution-tree.the-parent { border-radius: 50%; background-color: #000; width: 3px; height: 3px; }
+.evolution-tree.the-parent .node-name { width: auto; margin-top: -7px; text-indent: 12px; font-weight: bold; }

familyark/app/node_modules/treant-js/examples/evolution-tree/example6.js

@@ -0,0 +1,263 @@
+var tree_structure = {
+    chart: {
+        container: "#OrganiseChart6",
+        levelSeparation:    25,
+        siblingSeparation:  70,
+        subTeeSeparation:   70,
+        nodeAlign: "BOTTOM",
+        scrollbar: "fancy",
+        padding: 35,
+        node: { HTMLclass: "evolution-tree" },
+        connectors: {
+            type: "curve",
+            style: {
+                "stroke-width": 2,
+                "stroke-linecap": "round",
+                "stroke": "#ccc"
+            }
+        }
+    },
+
+    nodeStructure: {
+        text: { name: "LIFE" },
+        HTMLclass: "the-parent",
+        children: [
+            {
+                text: { name: "true bacteria" },
+                image: "img/truebacteria.png"
+            },
+            {
+                pseudo: true,
+                children: [
+                    {
+                        text: { name: "archea bacteria" },
+                        image: "img/archaebacteria.png"
+                    },
+                    {
+                        text: { name: "EUKARYOTES" },
+                        HTMLclass: "the-parent",
+                        children: [
+                            {
+                                text: { name: "protocists" },
+                                image: "img/protoctis.png"
+                            },
+                            {
+                                pseudo: true,
+                                children: [
+                                    {
+                                        text: { name: "PLANTS" },
+                                        HTMLclass: "the-parent",
+                                        children: [
+                                            {
+                                                pseudo: true,
+                                                children: [
+                                                    {
+                                                        pseudo: true,
+                                                        children: [
+                                                            {
+                                                                pseudo: true,
+                                                                children: [
+                                                                    {
+                                                                        text: { name: "flowering seed plants" },
+                                                                        image: "img/cvijece2.png"
+                                                                    },
+                                                                    {
+                                                                        text: { name: "non-flowering seed plants" },
+                                                                        image: "img/ne_cvijece.png"
+                                                                    }
+                                                                ]
+                                                            },
+                                                            {
+                                                               text: { name: "ferns and fern allies" },
+                                                                image: "img/ferns.png"
+                                                            }
+                                                        ]
+                                                    },
+                                                    {
+                                                        text: { name: "mosses and allies" },
+                                                        image: "img/mosses.png"
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                text: { name: "green algae" },
+                                                image: "img/greenalgae.png"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        pseudo: true,
+                                        children: [
+                                            {
+                                                text: { name: "fungi and lichens" },
+                                                image: "img/fungi.png"
+                                            },
+                                            {
+                                                text: { name: "ANIMALS" },
+                                                HTMLclass: "the-parent",
+                                                children: [
+                                                    {
+                                                        text: { name: "sponges" },
+                                                        image: "img/spuzva.png"
+                                                    },
+                                                    {
+                                                        pseudo: true,
+                                                        children: [
+                                                            {
+                                                                text: { name: "cnidarians" },
+                                                                image: "img/cnidarians.png"
+                                                            },
+                                                            {
+                                                                pseudo: true,
+                                                                childrenDropLevel: 1,
+                                                                children: [
+                                                                    {
+                                                                        pseudo: true,
+                                                                        children: [
+                                                                            {
+                                                                                text: { name: "echinoderms" },
+                                                                                image: "img/zvezda.png"
+                                                                            },
+                                                                            {
+                                                                                text: { name: "VERTEBRATES" },
+                                                                                HTMLclass: "the-parent",
+                                                                                children: [
+                                                                                    {
+                                                                                        text: { name: "cartilaginous fish" },
+                                                                                        image: "img/cartilaginousfish.png"
+                                                                                    },
+                                                                                    {
+                                                                                        text: { name: "bony fish" },
+                                                                                        image: "img/bonyfish.png"
+                                                                                    },
+                                                                                    {
+                                                                                        text: { name: "TETRAPODS" },
+                                                                                        HTMLclass: "the-parent",
+                                                                                        children: [
+                                                                                            {
+                                                                                                text: { name: "amphibians" },
+                                                                                                image: "img/zaba.png"
+                                                                                            },
+                                                                                            {
+                                                                                                text: { name: "AMNIOTES" },
+                                                                                                HTMLclass: "the-parent",
+                                                                                                children: [
+                                                                                                    {
+                                                                                                        pseudo: true,
+                                                                                                        children: [
+                                                                                                            {
+                                                                                                                text: { name: "turtles" },
+                                                                                                                image: "img/kornjaca.png"
+                                                                                                            },
+                                                                                                            {
+                                                                                                                pseudo: true,
+                                                                                                                children: [
+                                                                                                                    {
+                                                                                                                        text: { name: "snakes and lizards" },
+                                                                                                                        image: "img/zmijurina.png"
+                                                                                                                    },
+                                                                                                                    {
+                                                                                                                        text: { name: "crocodiles and birds" },
+                                                                                                                        image: "img/ptica.png"
+                                                                                                                    }
+                                                                                                                ]
+                                                                                                            }
+                                                                                                        ]
+                                                                                                    },
+                                                                                                    {
+                                                                                                        text: { name: "mammals" },
+                                                                                                        image: "img/slon.png"
+                                                                                                    }
+                                                                                                ]
+                                                                                            }
+                                                                                        ]
+                                                                                    }
+                                                                                ]
+                                                                            }
+                                                                        ]
+                                                                    },
+                                                                    {
+                                                                        text: { name: "ARTHROPODS" },                                                                      
+                                                                        HTMLclass: "the-parent",
+                                                                        children: [
+                                                                            {
+                                                                                text: { name: "chelicerates" },
+                                                                                image: "img/chelirates.png"
+                                                                            },
+                                                                            {
+                                                                                pseudo: true,
+                                                                                stackChildren: true,
+                                                                                children: [
+                                                                                    {
+                                                                                        text: { name: "crustaceans" },
+                                                                                        image: "img/rak.png"
+                                                                                    },
+                                                                                    {
+                                                                                        text: { name: "insects and myriapods" },
+                                                                                        image: "img/insekti.png"
+                                                                                    }
+                                                                                ]
+                                                                            }
+                                                                        ]
+                                                                    },
+                                                                    {
+                                                                        pseudo: true,
+                                                                        children: [
+                                                                            {
+                                                                                text: { name: "flatworms" },
+                                                                                image: "img/flatare.png"
+                                                                            },
+                                                                            {
+                                                                                text: { name: "lophophorates" },
+                                                                                image: "img/lophoprates.png"
+                                                                            }
+
+                                                                        ]
+                                                                    },
+                                                                    {
+                                                                        pseudo: true,
+                                                                        childrenDropLevel: 1,
+                                                                        stackChildren: true,
+                                                                        children: [
+                                                                            {
+                                                                                text: { name: "rotifers" },
+                                                                                image: "img/rotfiers.png"
+                                                                            },
+                                                                            {
+                                                                                text: { name: "roundworms" },
+                                                                                image: "img/roundworms.png"
+                                                                            }
+                                                                        ]
+                                                                    },
+                                                                    {
+                                                                        pseudo: true,
+                                                                        childrenDropLevel: 1,
+                                                                        stackChildren: true,
+                                                                        children: [
+                                                                            {
+                                                                                text: { name: "mollusks" },
+                                                                                image: "img/mosculs.png"
+                                                                            },
+                                                                            {
+                                                                                text: { name: "segmented worms" },
+                                                                                image: "img/segmentedworms.png"
+                                                                            }
+                                                                        ]
+                                                                    }
+                                                                ]
+                                                            }
+                                                        ]
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+};

familyark/app/node_modules/treant-js/examples/evolution-tree/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Evolution tree example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="example6.css">
+    
+    <link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
+
+</head>
+<body>
+    <div class="chart" id="OrganiseChart6"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="../../vendor/jquery.min.js"></script>
+    <script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
+    <script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
+    
+    <script src="example6.js"></script>
+
+    <script>
+        new Treant( tree_structure );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/no-parent/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Chart example 1 </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="no-parent.css">
+    
+</head>
+<body>
+    <div class="chart" id="OrganiseChart1"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="no-parent.js"></script>
+    <script>
+        new Treant(ALTERNATIVE);
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/no-parent/no-parent.css

@@ -0,0 +1,31 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 670px; margin: 5px; width: 900px;  }
+.Treant > .node {  }
+.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
+.node-name { font-weight: bold; font-size: 16px;}
+
+.nodeExample1 {
+    padding: 10px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    border: 1px solid #000;
+    width: 200px;
+    font-family: Tahoma;
+    font-size: 12px;
+}
+
+.nodeExample1 img {
+    margin-right:  10px;
+}

familyark/app/node_modules/treant-js/examples/no-parent/no-parent.js

@@ -0,0 +1,117 @@
+var config = {
+        container: "#OrganiseChart1",
+        rootOrientation:  'NORTH', // NORTH || EAST || WEST || SOUTH
+        hideRootNode: true,
+        // levelSeparation: 30,
+        siblingSeparation:   40,
+        subTeeSeparation:    30,
+        
+        connectors: {
+            type: 'curve'
+        },
+        node: {
+            HTMLclass: 'nodeExample1'
+        }
+    },
+    root = {},
+
+    cto = {
+        parent: root,
+        text:{
+            name: "Joe Linux",
+            title: "Board member",
+            contact: "email: we@aregreat.com"
+        },
+        stackChildren: true,
+        HTMLid: "coo"
+    },
+    cbo = {
+        parent: root,
+        stackChildren: true,
+        text:{
+            name: "Linda May",
+            title: "Board member",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "cbo"
+    },
+    cdo = {
+        parent: root,
+        text:{
+            name: "John Green",
+            title: "Board member, CEO",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "cdo"
+    },
+    cio = {
+        parent: cto,
+        text:{
+            name: "Ron Blomquist",
+            title: "Chief Information Security Officer",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "cio"
+    },
+    ciso = {
+        parent: cto,
+        text:{
+            name: "Michael Rubin",
+            title: "Chief Innovation Officer",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "ciso"
+    },
+    cio2 = {
+        parent: cdo,
+        text:{
+            name: "Erica Reel",
+            title: "Chief Customer Officer",
+            contact: "email: we@aregreat.com"
+        },
+        link: {
+            href: "www.google.com"
+        },
+        HTMLid: "cio2"
+    },
+    ciso2 = {
+        parent: cbo,
+        text:{
+            name: "Alice Lopez",
+            title: "Chief Communications Officer",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "ciso2"
+    },
+    ciso3 = {
+        parent: cbo,
+        text:{
+            name: "Mary Johnson",
+            title: "Chief Brand Officer",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "ciso2"
+    },
+    ciso4 = {
+        parent: cbo,
+        text:{
+            name: "Kirk Douglas",
+            title: "Chief Business Development Officer",
+            contact: "email: we@aregreat.com"
+        },
+        HTMLid: "ciso2"
+    }
+
+    ALTERNATIVE = [
+        config,
+        root,
+        cto,
+        cbo,
+        cdo,
+        cio,
+        ciso,
+        cio2,
+        ciso2,
+        ciso3,
+        ciso4
+    ];

familyark/app/node_modules/treant-js/examples/simple-scrollbar/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Chart example 1 </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="simple-scrollbar.css">
+    
+    <link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
+
+</head>
+<body>
+    <div class="chart" id="OrganiseChart1"> --@-- </div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="../../vendor/jquery.min.js"></script>
+    <script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
+    <script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
+    
+    <script src="simple-scrollbar.js"></script>
+    <script>
+        new Treant( ALTERNATIVE );
+    </script>
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/simple-scrollbar/simple-scrollbar.css

@@ -0,0 +1,31 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff; }
+/* optional Container STYLES */
+.chart { height: 400px; margin: 5px; width: 500px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px;  }
+.Treant > .node {  }
+.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
+.node-name { font-weight: bold;}
+
+.nodeExample1 {
+    padding: 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    border: 1px solid #000;
+    width: 200px;
+    font-family: Tahoma;
+    font-size: 12px;
+}
+
+.nodeExample1 img {
+    margin-right:  10px;
+}

familyark/app/node_modules/treant-js/examples/simple-scrollbar/simple-scrollbar.js

@@ -0,0 +1,127 @@
+var config = {
+        container: "#OrganiseChart1",
+        rootOrientation:  'NORTH', // NORTH || EAST || WEST || SOUTH
+        scrollbar: "fancy",
+        // levelSeparation: 30,
+        siblingSeparation:   20,
+        subTeeSeparation:    60,
+        
+        connectors: {
+            type: 'step'
+        },
+        node: {
+            HTMLclass: 'nodeExample1'
+        }
+    },
+    ceo = {
+        text: {
+            name: "Mark Hill",
+            title: "Chief executive officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/2.jpg",
+        HTMLid: "ceo"
+    },
+
+    cto = {
+        parent: ceo,
+        text:{
+            name: "Joe Linux",
+            title: "Chief Technology Officer",
+        },
+        stackChildren: true,
+        image: "../headshots/1.jpg",
+        HTMLid: "coo"
+    },
+    cbo = {
+        parent: ceo,
+        stackChildren: true,
+        text:{
+            name: "Linda May",
+            title: "Chief Business Officer",
+        },
+        image: "../headshots/5.jpg",
+        HTMLid: "cbo"
+    },
+    cdo = {
+        parent: ceo,
+        text:{
+            name: "John Green",
+            title: "Chief accounting officer",
+            contact: "Tel: 01 213 123 134",
+        },
+        image: "../headshots/6.jpg",
+        HTMLid: "cdo"
+    },
+    cio = {
+        parent: cto,
+        text:{
+            name: "Ron Blomquist",
+            title: "Chief Information Security Officer"
+        },
+        image: "../headshots/8.jpg",
+        HTMLid: "cio"
+    },
+    ciso = {
+        parent: cto,
+        text:{
+            name: "Michael Rubin",
+            title: "Chief Innovation Officer",
+            contact: "we@aregreat.com"
+        },
+        image: "../headshots/9.jpg",
+        HTMLid: "ciso"
+    },
+    cio2 = {
+        parent: cdo,
+        text:{
+            name: "Erica Reel",
+            title: "Chief Customer Officer"
+        },
+        link: {
+            href: "www.google.com"
+        },
+        image: "../headshots/10.jpg",
+        HTMLid: "cio2"
+    },
+    ciso2 = {
+        parent: cbo,
+        text:{
+            name: "Alice Lopez",
+            title: "Chief Communications Officer"
+        },
+        image: "../headshots/7.jpg",
+        HTMLid: "ciso2"
+    },
+    ciso3 = {
+        parent: cbo,
+        text:{
+            name: "Mary Johnson",
+            title: "Chief Brand Officer"
+        },
+        image: "../headshots/4.jpg",
+        HTMLid: "ciso2"
+    },
+    ciso4 = {
+        parent: cbo,
+        text:{
+            name: "Kirk Douglas",
+            title: "Chief Business Development Officer"
+        },
+        image: "../headshots/11.jpg",
+        HTMLid: "ciso2"
+    }
+
+    ALTERNATIVE = [
+        config,
+        ceo,
+        cto,
+        cbo,
+        cdo,
+        cio,
+        ciso,
+        cio2,
+        ciso2,
+        ciso3,
+        ciso4
+    ];

familyark/app/node_modules/treant-js/examples/super-simple/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+	<title> Chart emulation </title>
+	<link rel="stylesheet" href="../../Treant.css">
+	<link rel="stylesheet" href="super-simple.css">
+</head>
+<body>
+	<div class="chart" id="OrganiseChart-simple">
+	</div>
+	
+	<script src="../../vendor/raphael.js"></script>
+	<script src="../../Treant.js"></script>
+	<script src="super-simple.js"></script>
+
+	<script>
+		new Treant( simple_chart_config );
+	</script>
+
+</body>
+</html>

familyark/app/node_modules/treant-js/examples/super-simple/super-simple.css

@@ -0,0 +1,9 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+
+
+body { background: #fff; }
+
+/* optional Container STYLES */
+.chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
+.node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; }
+.node p { font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }

familyark/app/node_modules/treant-js/examples/super-simple/super-simple.js

@@ -0,0 +1,43 @@
+
+var simple_chart_config = {
+	chart: {
+		container: "#OrganiseChart-simple"
+	},
+	
+	nodeStructure: {
+		text: { name: "Parent node" },
+		children: [
+			{
+				text: { name: "First child" }
+			},
+			{
+				text: { name: "Second child" }
+			}
+		]
+	}
+};
+
+// // // // // // // // // // // // // // // // // // // // // // // // 
+
+var config = {
+	container: "#OrganiseChart-simple"
+};
+
+var parent_node = {
+	text: { name: "Parent node" }
+};
+
+var first_child = {
+	parent: parent_node,
+	text: { name: "First child" }
+};
+
+var second_child = {
+	parent: parent_node,
+	text: { name: "Second child" }
+};
+
+var simple_chart_config = [
+	config, parent_node,
+		first_child, second_child 
+];

familyark/app/node_modules/treant-js/examples/tennis-draw/example7.css

@@ -0,0 +1,36 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+table { border-collapse:collapse; border-spacing:0; }
+fieldset,img { border:0; }
+address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
+caption,th { text-align:left; }
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+q:before,q:after { content:''; }
+abbr,acronym { border:0; }
+
+body { background: #fff;  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
+/* optional Container STYLES */
+.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
+
+.tennis-draw {
+    font-size: 10px;
+    width: 100px;
+}
+
+.tennis-draw.winner { height: 38px; }
+.tennis-draw.winner:hover { background: url('trophy.png') right 0 no-repeat; }
+.tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }
+
+.tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }
+.tennis-draw .node-desc { padding: 2px; color: #999; }
+
+.tennis-draw.first-draw .node-title,
+.tennis-draw.first-draw .node-name,
+.tennis-draw.first-draw img { position: absolute; top: -8px; }
+.tennis-draw.first-draw:hover img { width: 20px; top: -12px; }
+
+.tennis-draw.first-draw { width: 165px; height: 20px; }
+.tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }
+.tennis-draw.first-draw .node-title { margin-top: 3px; }
+.tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }
+.tennis-draw.first-draw.bye .node-name { color: #999; }
+

familyark/app/node_modules/treant-js/examples/tennis-draw/example7.js

@@ -0,0 +1,272 @@
+// source: 
+// http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013
+
+var tree_structure = {
+    chart: {
+        container: "#OrganiseChart6",
+        levelSeparation:    20,
+        siblingSeparation:  15,
+        subTeeSeparation:   15,
+        rootOrientation: "EAST",
+
+        node: {
+            HTMLclass: "tennis-draw",
+            drawLineThrough: true
+        },
+        connectors: {
+            type: "straight",
+            style: {
+                "stroke-width": 2,
+                "stroke": "#ccc"
+            }
+        }
+    },
+    
+    nodeStructure: {
+        text: {
+            name: {val: "Djokovic, Novak", href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx"}
+        },
+        HTMLclass: "winner",
+        children: [
+            {
+                text: {
+                    name: "Djokovic, Novak",
+                    desc: "4-6, 6-2, 6-2"
+                },
+                children: [
+                    {
+                        text: {
+                            name: "Djokovic, Novak",
+                            desc: "4-6, 6-1, 6-4"
+                        },
+                        children: [
+                            {
+                                text: {
+                                    name: "Djokovic, Novak",
+                                    desc: "4-6, 6-1, 6-4"
+                                },
+                                children: [
+                                    {
+                                        text: { 
+                                            name: "Djokovic, Novak",
+                                            title: 1
+                                        },
+                                        image: "flags/srb.jpg",
+                                        HTMLclass: "first-draw",
+
+                                    },
+                                    {
+                                        text: { 
+                                            name: "Bye",
+                                            title: 2
+                                        },
+                                        HTMLclass: "first-draw bye"
+                                    }
+                                ]
+                            },
+                            {
+                                text: {
+                                    name: "Youzhny, Mikhail",
+                                    desc: "6-4, 6-0"
+                                },
+                                children: [
+                                    {
+                                        text: { 
+                                            name: "Youzhny, Mikhail",
+                                            title: 3
+                                        },
+                                        image: "flags/rus.jpg",
+                                        HTMLclass: "first-draw"
+                                    },
+                                    {
+                                        text: { 
+                                            name: "Gimeno-Traver, Daniel",
+                                            title: 4
+                                        },
+                                        image: "flags/esp.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        text: {
+                            name: "Monaco, Juan",
+                            desc: "6-0, 3-6, 6-3"
+                        },
+                        children: [
+                            {
+                                text: {
+                                    name: "Gulbis, Ernests",
+                                    desc: "4-6, 6-2, 6-3"
+                                },
+                                children: [
+                                    {
+                                        text: {
+                                         name: "Gulbis, Ernests",
+                                         title: 5
+                                     },
+                                        image: "flags/lat.jpg",
+                                        HTMLclass: "first-draw"
+                                    },
+                                    {
+                                        text: { 
+                                            name: "Isner, John",
+                                            title: 6
+                                        },
+                                        image: "flags/usa.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            },
+                            {
+                                text: {
+                                    name: "Monaco, Juan",
+                                    desc: "6-4, 6-0"
+                                },
+                                children: [
+                                    {
+                                        text: { 
+                                            name: "Klizan, Martin",
+                                            title: 7
+                                        },
+                                        image: "flags/slo.jpg",
+                                        HTMLclass: "first-draw"
+                                    },
+                                    {
+                                        text: { 
+                                            name: "Monaco, Juan",
+                                            title: 8
+                                        },
+                                        image: "flags/arg.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                text: {
+                    name: "Nieminen, Jarkko",
+                    desc: "6-3, 1-6, 7-6(3)"
+                },
+                children: [
+                    {
+                        text: {
+                            name: "Nieminen, Jarkko",
+                            desc: "4-6, 6-1, 6-4"
+                        },
+                        children: [
+                            {
+                                text: {
+                                    name: "Raonic, Milos",
+                                    desc: "6-1, 6-4"
+                                },
+                                children: [
+                                    {
+                                        text: { 
+                                            name: "Raonic, Milos",
+                                            title: 9
+                                        },
+                                        image: "flags/can.jpg",
+                                        HTMLclass: "first-draw"
+                                    },
+                                    {
+                                        text: { 
+                                            name: "Benneteau, Julien",
+                                            title: 10
+                                        },
+                                        image: "flags/fra.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            },
+                            {
+                                text: {
+                                    name: "Nieminen, Jarkko",
+                                    desc: "6-1, 6-2"
+                                },
+                                children: [
+                                    {
+                                        text: { 
+                                            name: "Nieminen, Jarkko",
+                                            title: 11
+                                        },
+                                        image: "flags/fin.jpg",
+                                        HTMLclass: "first-draw"
+                                    },
+                                    {
+                                        text: { 
+                                            name: "Troicki, Viktor",
+                                            title: 12
+                                        },
+                                        image: "flags/srb.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        text: {
+                            name: "Del Potro, Juan Martin",
+                            desc: "6-2, 6-4"
+                        },
+                        children: [
+                            {
+                                text: {
+                                    name: "Dolgopolov, Alexandr",
+                                    desc: "4-6, 6-2, 6-3"
+                                },
+                                children: [
+                                    {
+                                        text: { 
+                                            name: "Dolgopolov, Alexandr",
+                                            title: 13
+                                        },
+                                        image: "flags/ukr.jpg",
+                                        HTMLclass: "first-draw"
+                                    },
+                                    {
+                                        text: {
+                                            name: "Tomic, Bernard",
+                                            title: 14
+                                        },
+                                        image: "flags/aus.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            },
+                            {
+                                text: {
+                                    name: "Del Potro, Juan Martin",
+                                    desc: "6-4, 6-0"
+                                },
+                                children: [
+                                    {
+                                        text: {
+                                            name: "Bye",
+                                            title: 15
+                                        },
+                                        HTMLclass: "first-draw bye"
+                                    },
+                                    {
+                                        text: {
+                                            name: "Del Potro, Juan Martin",
+                                            title: 16
+                                        },
+                                        image: "flags/arg.jpg",
+                                        HTMLclass: "first-draw"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+};

familyark/app/node_modules/treant-js/examples/tennis-draw/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title> Tennis draw example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="example7.css">
+    
+</head>
+<body>
+    <div class="chart" id="OrganiseChart6"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="example7.js"></script>
+    <script>
+       new Treant( tree_structure );
+    </script>
+</body>
+</html>