From c5badc241fe7476c4195d6e48034b2532fd4f4b2 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Fri, 22 May 2015 10:57:20 +0200
Subject: [PATCH] Reorganized the Timeline examples

---
 .../{01_basic.html => basicUsage.html}        |   0
 .../dataSerialization.html}                   |   6 +-
 .../loadExternalData.html}                    |   8 +-
 .../customSnappingOfItems.html}               |   6 +-
 .../editingItems.html}                        |  13 ++-
 .../editingItemsCallbacks.html}               |   6 +-
 .../updateDataOnEvent.html}                   |   8 +-
 .../{05_groups.html => groups/groups.html}    |   6 +-
 .../groupsOrdering.html}                      |   6 +-
 .../subgroups.html}                           |   6 +-
 .../animateWindow.html}                       |   6 +-
 .../clickToUse.html}                          |   6 +-
 .../eventListeners.html}                      |   6 +-
 .../limitMoveAndZoom.html}                    |   6 +-
 .../navigationMenu.html}                      |   6 +-
 .../setSelection.html}                        |   6 +-
 .../backgroundAreas.html}                     |   6 +-
 .../backgroundAreasWithGroups.html}           |   6 +-
 .../htmlContents.html}                        |   8 +-
 .../itemOrdering.html}                        |   6 +-
 .../pointItems.html}                          |   6 +-
 .../rangeOverflowItem.html}                   |   6 +-
 .../customTimeBars.html}                      |   6 +-
 .../dataAttributes.html}                      |   6 +-
 .../dataAttributesAll.html}                   |   6 +-
 .../groupsPerformance.html}                   |   6 +-
 .../hidingPeriods.html}                       |   8 +-
 .../localization.html}                        |   6 +-
 .../performance.html}                         |   6 +-
 .../other/requirejs/requirejs_example.html    |  17 +++
 .../{ => other}/requirejs/scripts/main.js     |   2 +-
 .../{ => other}/requirejs/scripts/require.js  |   0
 .../timeline/requirejs/requirejs_example.html |  14 ---
 .../timeline/{ => resources}/data/basic.json  |   0
 .../timeline/{ => resources}/data/wk2014.json |   0
 .../img/Hardware-Mobile-Phone-icon.png        | Bin
 .../{ => resources}/img/attachment-icon.png   | Bin
 .../img/blog-post-edit-icon.png               | Bin
 .../{ => resources}/img/comments-icon.png     | Bin
 .../img/community-users-icon.png              | Bin
 .../timeline/{ => resources}/img/license.txt  |   0
 .../img/license_aesthetica-2.txt              |   0
 .../img/license_refresh-cl.txt                |   0
 .../{ => resources}/img/mail-icon.png         | Bin
 .../{ => resources}/img/notes-edit-icon.png   | Bin
 .../{ => resources}/img/product-icon.png      | Bin
 .../{ => resources}/img/truck-icon.png        | Bin
 .../axisOrientation.html}                     |   6 +-
 examples/timeline/styling/customCss.html      | 100 ++++++++++++++++++
 .../gridStyling.html}                         |   6 +-
 .../itemClassNames.html}                      |   6 +-
 .../itemTemplates.html}                       |   6 +-
 52 files changed, 224 insertions(+), 116 deletions(-)
 rename examples/timeline/{01_basic.html => basicUsage.html} (100%)
 rename examples/timeline/{17_data_serialization.html => dataHandling/dataSerialization.html} (94%)
 rename examples/timeline/{26_load_external_data.html => dataHandling/loadExternalData.html} (86%)
 rename examples/timeline/{33_custom_snapping.html => editing/customSnappingOfItems.html} (88%)
 rename examples/timeline/{02_manipulation.html => editing/editingItems.html} (81%)
 rename examples/timeline/{08_manipulation_callbacks.html => editing/editingItemsCallbacks.html} (95%)
 rename examples/timeline/{13_past_and_future.html => editing/updateDataOnEvent.html} (89%)
 rename examples/timeline/{05_groups.html => groups/groups.html} (91%)
 rename examples/timeline/{09_groups_ordering.html => groups/groupsOrdering.html} (91%)
 rename examples/timeline/{30_subgroups.html => groups/subgroups.html} (94%)
 rename examples/timeline/{22_animate_window.html => interaction/animateWindow.html} (94%)
 rename examples/timeline/{20_click_to_use.html => interaction/clickToUse.html} (90%)
 rename examples/timeline/{06_event_listeners.html => interaction/eventListeners.html} (91%)
 rename examples/timeline/{10_limit_move_and_zoom.html => interaction/limitMoveAndZoom.html} (89%)
 rename examples/timeline/{16_navigation_menu.html => interaction/navigationMenu.html} (93%)
 rename examples/timeline/{21_set_selection.html => interaction/setSelection.html} (91%)
 rename examples/timeline/{25_background_areas.html => items/backgroundAreas.html} (88%)
 rename examples/timeline/{31_background_areas_with_groups.html => items/backgroundAreasWithGroups.html} (91%)
 rename examples/timeline/{04_html_data.html => items/htmlContents.html} (86%)
 rename examples/timeline/{28_item_ordering.html => items/itemOrdering.html} (91%)
 rename examples/timeline/{11_point_items.html => items/pointItems.html} (93%)
 rename examples/timeline/{18_range_overflow.html => items/rangeOverflowItem.html} (89%)
 rename examples/timeline/{07_custom_time_bars.html => other/customTimeBars.html} (93%)
 rename examples/timeline/{23_data_attributes.html => other/dataAttributes.html} (87%)
 rename examples/timeline/{24_all_data_attributes.html => other/dataAttributesAll.html} (86%)
 rename examples/timeline/{14_performance_of_groups.html => other/groupsPerformance.html} (93%)
 rename examples/timeline/{29_hiding_periods.html => other/hidingPeriods.html} (87%)
 rename examples/timeline/{19_localization.html => other/localization.html} (90%)
 rename examples/timeline/{03_performance.html => other/performance.html} (91%)
 create mode 100644 examples/timeline/other/requirejs/requirejs_example.html
 rename examples/timeline/{ => other}/requirejs/scripts/main.js (94%)
 rename examples/timeline/{ => other}/requirejs/scripts/require.js (100%)
 delete mode 100644 examples/timeline/requirejs/requirejs_example.html
 rename examples/timeline/{ => resources}/data/basic.json (100%)
 rename examples/timeline/{ => resources}/data/wk2014.json (100%)
 rename examples/timeline/{ => resources}/img/Hardware-Mobile-Phone-icon.png (100%)
 rename examples/timeline/{ => resources}/img/attachment-icon.png (100%)
 rename examples/timeline/{ => resources}/img/blog-post-edit-icon.png (100%)
 rename examples/timeline/{ => resources}/img/comments-icon.png (100%)
 rename examples/timeline/{ => resources}/img/community-users-icon.png (100%)
 rename examples/timeline/{ => resources}/img/license.txt (100%)
 rename examples/timeline/{ => resources}/img/license_aesthetica-2.txt (100%)
 rename examples/timeline/{ => resources}/img/license_refresh-cl.txt (100%)
 rename examples/timeline/{ => resources}/img/mail-icon.png (100%)
 rename examples/timeline/{ => resources}/img/notes-edit-icon.png (100%)
 rename examples/timeline/{ => resources}/img/product-icon.png (100%)
 rename examples/timeline/{ => resources}/img/truck-icon.png (100%)
 rename examples/timeline/{34_orientation.html => styling/axisOrientation.html} (91%)
 create mode 100644 examples/timeline/styling/customCss.html
 rename examples/timeline/{32_grid_styling.html => styling/gridStyling.html} (87%)
 rename examples/timeline/{15_item_class_names.html => styling/itemClassNames.html} (93%)
 rename examples/timeline/{27_templates.html => styling/itemTemplates.html} (96%)

diff --git a/examples/timeline/01_basic.html b/examples/timeline/basicUsage.html
similarity index 100%
rename from examples/timeline/01_basic.html
rename to examples/timeline/basicUsage.html
diff --git a/examples/timeline/17_data_serialization.html b/examples/timeline/dataHandling/dataSerialization.html
similarity index 94%
rename from examples/timeline/17_data_serialization.html
rename to examples/timeline/dataHandling/dataSerialization.html
index 1b03285c..1b3fcfa7 100644
--- a/examples/timeline/17_data_serialization.html
+++ b/examples/timeline/dataHandling/dataSerialization.html
@@ -23,9 +23,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/26_load_external_data.html b/examples/timeline/dataHandling/loadExternalData.html
similarity index 86%
rename from examples/timeline/26_load_external_data.html
rename to examples/timeline/dataHandling/loadExternalData.html
index d35bf19b..a5002726 100644
--- a/examples/timeline/26_load_external_data.html
+++ b/examples/timeline/dataHandling/loadExternalData.html
@@ -12,9 +12,9 @@
   <!-- Load jquery for ajax support -->
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
@@ -26,7 +26,7 @@
 <script type="text/javascript">
   // load data via an ajax request. When the data is in, load the timeline
   $.ajax({
-    url: 'data/basic.json',
+    url: '../resources/data/basic.json',
     success: function (data) {
       // hide the "loading..." message
       document.getElementById('loading').style.display = 'none';
diff --git a/examples/timeline/33_custom_snapping.html b/examples/timeline/editing/customSnappingOfItems.html
similarity index 88%
rename from examples/timeline/33_custom_snapping.html
rename to examples/timeline/editing/customSnappingOfItems.html
index aa79623d..65a9a510 100644
--- a/examples/timeline/33_custom_snapping.html
+++ b/examples/timeline/editing/customSnappingOfItems.html
@@ -3,9 +3,9 @@
 <head>
   <title>Timeline | Custom snapping</title>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/02_manipulation.html b/examples/timeline/editing/editingItems.html
similarity index 81%
rename from examples/timeline/02_manipulation.html
rename to examples/timeline/editing/editingItems.html
index 86e79682..41f6e7c0 100644
--- a/examples/timeline/02_manipulation.html
+++ b/examples/timeline/editing/editingItems.html
@@ -10,13 +10,13 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
-<p>An editable timeline allows to drag items around, create new items, and remove items.</p>
+<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>
 
 <div id="visualization"></div>
 
@@ -39,6 +39,11 @@
     {id: 6, content: 'item 6', start: '2014-01-26'}
   ]);
 
+  // log changes to the console
+  items.on('*', function (event, properties) {
+    console.log(event, properties.items);
+  });
+
   var container = document.getElementById('visualization');
   var options = {
     start: '2014-01-10',
diff --git a/examples/timeline/08_manipulation_callbacks.html b/examples/timeline/editing/editingItemsCallbacks.html
similarity index 95%
rename from examples/timeline/08_manipulation_callbacks.html
rename to examples/timeline/editing/editingItemsCallbacks.html
index 2308208d..8797683f 100644
--- a/examples/timeline/08_manipulation_callbacks.html
+++ b/examples/timeline/editing/editingItemsCallbacks.html
@@ -10,9 +10,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p style="max-width: 800px;">
diff --git a/examples/timeline/13_past_and_future.html b/examples/timeline/editing/updateDataOnEvent.html
similarity index 89%
rename from examples/timeline/13_past_and_future.html
rename to examples/timeline/editing/updateDataOnEvent.html
index 601533cf..aedb885f 100644
--- a/examples/timeline/13_past_and_future.html
+++ b/examples/timeline/editing/updateDataOnEvent.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <title>Timeline | Past and future</title>
+  <title>Timeline | Update data on event</title>
 
   <style type="text/css">
     body {
@@ -13,9 +13,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 
 <body>
diff --git a/examples/timeline/05_groups.html b/examples/timeline/groups/groups.html
similarity index 91%
rename from examples/timeline/05_groups.html
rename to examples/timeline/groups/groups.html
index bf0bce0b..1fe6938e 100644
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/groups/groups.html
@@ -19,9 +19,9 @@
   <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
   <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/09_groups_ordering.html b/examples/timeline/groups/groupsOrdering.html
similarity index 91%
rename from examples/timeline/09_groups_ordering.html
rename to examples/timeline/groups/groupsOrdering.html
index 508afc71..8b9d03e2 100644
--- a/examples/timeline/09_groups_ordering.html
+++ b/examples/timeline/groups/groupsOrdering.html
@@ -16,9 +16,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/30_subgroups.html b/examples/timeline/groups/subgroups.html
similarity index 94%
rename from examples/timeline/30_subgroups.html
rename to examples/timeline/groups/subgroups.html
index cfb5b02b..770a88d8 100644
--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/groups/subgroups.html
@@ -20,9 +20,9 @@
         }
     </style>
 
-    <script src="../../dist/vis.js"></script>
-    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-    <script src="../googleAnalytics.js"></script>
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/22_animate_window.html b/examples/timeline/interaction/animateWindow.html
similarity index 94%
rename from examples/timeline/22_animate_window.html
rename to examples/timeline/interaction/animateWindow.html
index 8ad73349..5ec8d7bd 100644
--- a/examples/timeline/22_animate_window.html
+++ b/examples/timeline/interaction/animateWindow.html
@@ -13,9 +13,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/20_click_to_use.html b/examples/timeline/interaction/clickToUse.html
similarity index 90%
rename from examples/timeline/20_click_to_use.html
rename to examples/timeline/interaction/clickToUse.html
index 8efa8e69..97d465f6 100644
--- a/examples/timeline/20_click_to_use.html
+++ b/examples/timeline/interaction/clickToUse.html
@@ -17,9 +17,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <div id="main">
diff --git a/examples/timeline/06_event_listeners.html b/examples/timeline/interaction/eventListeners.html
similarity index 91%
rename from examples/timeline/06_event_listeners.html
rename to examples/timeline/interaction/eventListeners.html
index 7026c833..53f94da6 100644
--- a/examples/timeline/06_event_listeners.html
+++ b/examples/timeline/interaction/eventListeners.html
@@ -9,9 +9,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
   <p>
diff --git a/examples/timeline/10_limit_move_and_zoom.html b/examples/timeline/interaction/limitMoveAndZoom.html
similarity index 89%
rename from examples/timeline/10_limit_move_and_zoom.html
rename to examples/timeline/interaction/limitMoveAndZoom.html
index b4743389..d6632187 100644
--- a/examples/timeline/10_limit_move_and_zoom.html
+++ b/examples/timeline/interaction/limitMoveAndZoom.html
@@ -10,9 +10,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/16_navigation_menu.html b/examples/timeline/interaction/navigationMenu.html
similarity index 93%
rename from examples/timeline/16_navigation_menu.html
rename to examples/timeline/interaction/navigationMenu.html
index 6494e776..07ec66c1 100755
--- a/examples/timeline/16_navigation_menu.html
+++ b/examples/timeline/interaction/navigationMenu.html
@@ -22,9 +22,9 @@
         }
     </style>
 
-    <script src="../../dist/vis.js"></script>
-    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-    <script src="../googleAnalytics.js"></script>
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/21_set_selection.html b/examples/timeline/interaction/setSelection.html
similarity index 91%
rename from examples/timeline/21_set_selection.html
rename to examples/timeline/interaction/setSelection.html
index 9abfe0ad..b68fb022 100644
--- a/examples/timeline/21_set_selection.html
+++ b/examples/timeline/interaction/setSelection.html
@@ -10,9 +10,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>Set selection</h1>
diff --git a/examples/timeline/25_background_areas.html b/examples/timeline/items/backgroundAreas.html
similarity index 88%
rename from examples/timeline/25_background_areas.html
rename to examples/timeline/items/backgroundAreas.html
index 9bc20c98..5f6d547c 100644
--- a/examples/timeline/25_background_areas.html
+++ b/examples/timeline/items/backgroundAreas.html
@@ -14,9 +14,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/31_background_areas_with_groups.html b/examples/timeline/items/backgroundAreasWithGroups.html
similarity index 91%
rename from examples/timeline/31_background_areas_with_groups.html
rename to examples/timeline/items/backgroundAreasWithGroups.html
index de19749c..409f3e54 100644
--- a/examples/timeline/31_background_areas_with_groups.html
+++ b/examples/timeline/items/backgroundAreasWithGroups.html
@@ -10,9 +10,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/04_html_data.html b/examples/timeline/items/htmlContents.html
similarity index 86%
rename from examples/timeline/04_html_data.html
rename to examples/timeline/items/htmlContents.html
index dbe47368..6a818c30 100644
--- a/examples/timeline/04_html_data.html
+++ b/examples/timeline/items/htmlContents.html
@@ -16,10 +16,10 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
@@ -53,7 +53,7 @@
   img5.style.height = '48px';
   item5.appendChild(img5);
 
-  var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
+  var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';
 
   var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
 
diff --git a/examples/timeline/28_item_ordering.html b/examples/timeline/items/itemOrdering.html
similarity index 91%
rename from examples/timeline/28_item_ordering.html
rename to examples/timeline/items/itemOrdering.html
index 5806dff8..e8cafdc9 100644
--- a/examples/timeline/28_item_ordering.html
+++ b/examples/timeline/items/itemOrdering.html
@@ -12,10 +12,10 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>Item ordering</h1>
diff --git a/examples/timeline/11_point_items.html b/examples/timeline/items/pointItems.html
similarity index 93%
rename from examples/timeline/11_point_items.html
rename to examples/timeline/items/pointItems.html
index 95cc8aa9..67082cc0 100755
--- a/examples/timeline/11_point_items.html
+++ b/examples/timeline/items/pointItems.html
@@ -9,9 +9,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>World War II timeline</h1>
diff --git a/examples/timeline/18_range_overflow.html b/examples/timeline/items/rangeOverflowItem.html
similarity index 89%
rename from examples/timeline/18_range_overflow.html
rename to examples/timeline/items/rangeOverflowItem.html
index 0abb1339..12582a69 100644
--- a/examples/timeline/18_range_overflow.html
+++ b/examples/timeline/items/rangeOverflowItem.html
@@ -3,8 +3,8 @@
 <head>
   <title>Timeline | Range overflow</title>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, html {
@@ -16,7 +16,7 @@
     }
   </style>
 
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/07_custom_time_bars.html b/examples/timeline/other/customTimeBars.html
similarity index 93%
rename from examples/timeline/07_custom_time_bars.html
rename to examples/timeline/other/customTimeBars.html
index b71a0515..4794904c 100644
--- a/examples/timeline/07_custom_time_bars.html
+++ b/examples/timeline/other/customTimeBars.html
@@ -10,9 +10,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/23_data_attributes.html b/examples/timeline/other/dataAttributes.html
similarity index 87%
rename from examples/timeline/23_data_attributes.html
rename to examples/timeline/other/dataAttributes.html
index 7f9af7cf..f852fffb 100644
--- a/examples/timeline/23_data_attributes.html
+++ b/examples/timeline/other/dataAttributes.html
@@ -9,9 +9,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/24_all_data_attributes.html b/examples/timeline/other/dataAttributesAll.html
similarity index 86%
rename from examples/timeline/24_all_data_attributes.html
rename to examples/timeline/other/dataAttributesAll.html
index 67d7f540..7938f0bd 100644
--- a/examples/timeline/24_all_data_attributes.html
+++ b/examples/timeline/other/dataAttributesAll.html
@@ -9,9 +9,9 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/14_performance_of_groups.html b/examples/timeline/other/groupsPerformance.html
similarity index 93%
rename from examples/timeline/14_performance_of_groups.html
rename to examples/timeline/other/groupsPerformance.html
index 82ec0536..58dc9ca1 100644
--- a/examples/timeline/14_performance_of_groups.html
+++ b/examples/timeline/other/groupsPerformance.html
@@ -2,8 +2,8 @@
 <head>
   <title>Timeline | A lot of grouped data</title>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body {
@@ -11,7 +11,7 @@
       font: 10pt arial;
     }
   </style>
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 
 <body onresize="/*timeline.checkResize();*/">
diff --git a/examples/timeline/29_hiding_periods.html b/examples/timeline/other/hidingPeriods.html
similarity index 87%
rename from examples/timeline/29_hiding_periods.html
rename to examples/timeline/other/hidingPeriods.html
index 8bef3ceb..9b2f359a 100644
--- a/examples/timeline/29_hiding_periods.html
+++ b/examples/timeline/other/hidingPeriods.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline | Hiding times demo</title>
+    <title>Timeline | Hiding periods</title>
 
     <style type="text/css">
         body, html {
@@ -9,9 +9,9 @@
         }
     </style>
 
-    <script src="../../dist/vis.js"></script>
-    <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
-    <script src="../googleAnalytics.js"></script>
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
+    <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/19_localization.html b/examples/timeline/other/localization.html
similarity index 90%
rename from examples/timeline/19_localization.html
rename to examples/timeline/other/localization.html
index e37bcc56..39080c89 100644
--- a/examples/timeline/19_localization.html
+++ b/examples/timeline/other/localization.html
@@ -11,9 +11,9 @@
   </style>
 
   <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/03_performance.html b/examples/timeline/other/performance.html
similarity index 91%
rename from examples/timeline/03_performance.html
rename to examples/timeline/other/performance.html
index ea62549a..4f914354 100644
--- a/examples/timeline/03_performance.html
+++ b/examples/timeline/other/performance.html
@@ -13,9 +13,9 @@
   <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
   <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
diff --git a/examples/timeline/other/requirejs/requirejs_example.html b/examples/timeline/other/requirejs/requirejs_example.html
new file mode 100644
index 00000000..d4531591
--- /dev/null
+++ b/examples/timeline/other/requirejs/requirejs_example.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline require.js demo</title>
+
+  <script data-main="scripts/main" src="scripts/require.js"></script>
+
+  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../googleAnalytics.js"></script>
+</head>
+<body>
+<p>
+  This example shows how to load the vis.js library using require.js.
+</p>
+<div id="visualization"></div>
+</body>
+</html>
diff --git a/examples/timeline/requirejs/scripts/main.js b/examples/timeline/other/requirejs/scripts/main.js
similarity index 94%
rename from examples/timeline/requirejs/scripts/main.js
rename to examples/timeline/other/requirejs/scripts/main.js
index 6549d024..f8148540 100644
--- a/examples/timeline/requirejs/scripts/main.js
+++ b/examples/timeline/other/requirejs/scripts/main.js
@@ -1,6 +1,6 @@
 require.config({
   paths: {
-    vis: '../../../../dist/vis'
+    vis: '../../../../../dist/vis'
   }
 });
 
diff --git a/examples/timeline/requirejs/scripts/require.js b/examples/timeline/other/requirejs/scripts/require.js
similarity index 100%
rename from examples/timeline/requirejs/scripts/require.js
rename to examples/timeline/other/requirejs/scripts/require.js
diff --git a/examples/timeline/requirejs/requirejs_example.html b/examples/timeline/requirejs/requirejs_example.html
deleted file mode 100644
index 5306b13b..00000000
--- a/examples/timeline/requirejs/requirejs_example.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <title>Timeline requirejs demo</title>
-
-  <script data-main="scripts/main" src="scripts/require.js"></script>
-
-  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../../googleAnalytics.js"></script>
-</head>
-<body>
-<div id="visualization"></div>
-</body>
-</html>
diff --git a/examples/timeline/data/basic.json b/examples/timeline/resources/data/basic.json
similarity index 100%
rename from examples/timeline/data/basic.json
rename to examples/timeline/resources/data/basic.json
diff --git a/examples/timeline/data/wk2014.json b/examples/timeline/resources/data/wk2014.json
similarity index 100%
rename from examples/timeline/data/wk2014.json
rename to examples/timeline/resources/data/wk2014.json
diff --git a/examples/timeline/img/Hardware-Mobile-Phone-icon.png b/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png
similarity index 100%
rename from examples/timeline/img/Hardware-Mobile-Phone-icon.png
rename to examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png
diff --git a/examples/timeline/img/attachment-icon.png b/examples/timeline/resources/img/attachment-icon.png
similarity index 100%
rename from examples/timeline/img/attachment-icon.png
rename to examples/timeline/resources/img/attachment-icon.png
diff --git a/examples/timeline/img/blog-post-edit-icon.png b/examples/timeline/resources/img/blog-post-edit-icon.png
similarity index 100%
rename from examples/timeline/img/blog-post-edit-icon.png
rename to examples/timeline/resources/img/blog-post-edit-icon.png
diff --git a/examples/timeline/img/comments-icon.png b/examples/timeline/resources/img/comments-icon.png
similarity index 100%
rename from examples/timeline/img/comments-icon.png
rename to examples/timeline/resources/img/comments-icon.png
diff --git a/examples/timeline/img/community-users-icon.png b/examples/timeline/resources/img/community-users-icon.png
similarity index 100%
rename from examples/timeline/img/community-users-icon.png
rename to examples/timeline/resources/img/community-users-icon.png
diff --git a/examples/timeline/img/license.txt b/examples/timeline/resources/img/license.txt
similarity index 100%
rename from examples/timeline/img/license.txt
rename to examples/timeline/resources/img/license.txt
diff --git a/examples/timeline/img/license_aesthetica-2.txt b/examples/timeline/resources/img/license_aesthetica-2.txt
similarity index 100%
rename from examples/timeline/img/license_aesthetica-2.txt
rename to examples/timeline/resources/img/license_aesthetica-2.txt
diff --git a/examples/timeline/img/license_refresh-cl.txt b/examples/timeline/resources/img/license_refresh-cl.txt
similarity index 100%
rename from examples/timeline/img/license_refresh-cl.txt
rename to examples/timeline/resources/img/license_refresh-cl.txt
diff --git a/examples/timeline/img/mail-icon.png b/examples/timeline/resources/img/mail-icon.png
similarity index 100%
rename from examples/timeline/img/mail-icon.png
rename to examples/timeline/resources/img/mail-icon.png
diff --git a/examples/timeline/img/notes-edit-icon.png b/examples/timeline/resources/img/notes-edit-icon.png
similarity index 100%
rename from examples/timeline/img/notes-edit-icon.png
rename to examples/timeline/resources/img/notes-edit-icon.png
diff --git a/examples/timeline/img/product-icon.png b/examples/timeline/resources/img/product-icon.png
similarity index 100%
rename from examples/timeline/img/product-icon.png
rename to examples/timeline/resources/img/product-icon.png
diff --git a/examples/timeline/img/truck-icon.png b/examples/timeline/resources/img/truck-icon.png
similarity index 100%
rename from examples/timeline/img/truck-icon.png
rename to examples/timeline/resources/img/truck-icon.png
diff --git a/examples/timeline/34_orientation.html b/examples/timeline/styling/axisOrientation.html
similarity index 91%
rename from examples/timeline/34_orientation.html
rename to examples/timeline/styling/axisOrientation.html
index 63f2bd9e..899a6bd2 100644
--- a/examples/timeline/34_orientation.html
+++ b/examples/timeline/styling/axisOrientation.html
@@ -9,10 +9,10 @@
     }
   </style>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
diff --git a/examples/timeline/styling/customCss.html b/examples/timeline/styling/customCss.html
new file mode 100644
index 00000000..906d44a6
--- /dev/null
+++ b/examples/timeline/styling/customCss.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Custom styling</title>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body {
+      font-family:  purisa, 'comic sans', cursive;
+    }
+
+    .vis-timeline {
+      border: 2px solid purple;
+      font-family:  purisa, 'comic sans', cursive;
+      font-size: 12pt;
+      background: #ffecea;
+    }
+
+    .vis-item {
+      border-color: #F991A3;
+      background-color: pink;
+      font-size: 15pt;
+      color: purple;
+      box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
+    }
+
+    .vis-item,
+    .vis-item.vis-line {
+      border-width: 3px;
+    }
+
+    .vis-item.vis-dot {
+      border-width: 10px;
+      border-radius: 10px;
+    }
+
+    .vis-item.vis-selected {
+      border-color: green;
+      background-color: lightgreen;
+    }
+
+    .vis-time-axis .vis-text {
+      color: purple;
+      padding-top: 10px;
+      padding-left: 10px;
+    }
+
+    .vis-time-axis .vis-text.vis-major {
+      font-weight: bold;
+    }
+
+    .vis-time-axis .vis-grid.vis-minor {
+      border-width: 2px;
+      border-color: pink;
+    }
+
+    .vis-time-axis .vis-grid.vis-major {
+      border-width: 2px;
+      border-color: #F991A3;
+    }
+  </style>
+
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body>
+
+<p>
+  The style of the Timeline can be fully customized via CSS:
+</p>
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+
+  // note that months are zero-based in the JavaScript Date object
+  var items = new vis.DataSet([
+    {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'},
+    {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
+    {start: new Date(2010,7,24,16,0,0), content: 'Report'},
+    {start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
+    {start: new Date(2010,7,28), content: '<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'},
+    {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
+    {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
+    {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'}
+  ]);
+
+  var options = {
+    editable: true,
+    margin: {
+      item: 20,
+      axis: 40
+    }
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/timeline/32_grid_styling.html b/examples/timeline/styling/gridStyling.html
similarity index 87%
rename from examples/timeline/32_grid_styling.html
rename to examples/timeline/styling/gridStyling.html
index 927ecfe8..aaa39c45 100644
--- a/examples/timeline/32_grid_styling.html
+++ b/examples/timeline/styling/gridStyling.html
@@ -3,8 +3,8 @@
 <head>
   <title>Timeline | Grid styling</title>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, html {
@@ -26,7 +26,7 @@
       color: white;
     }
   </style>
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <div id="visualization"></div>
diff --git a/examples/timeline/15_item_class_names.html b/examples/timeline/styling/itemClassNames.html
similarity index 93%
rename from examples/timeline/15_item_class_names.html
rename to examples/timeline/styling/itemClassNames.html
index 8e08eab7..38b2735d 100755
--- a/examples/timeline/15_item_class_names.html
+++ b/examples/timeline/styling/itemClassNames.html
@@ -2,8 +2,8 @@
 <head>
   <title>Timeline | Item class names</title>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, input {
@@ -65,7 +65,7 @@
     }
   </style>
 
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>This page demonstrates the Timeline with custom css classes for individual items.</p>
diff --git a/examples/timeline/27_templates.html b/examples/timeline/styling/itemTemplates.html
similarity index 96%
rename from examples/timeline/27_templates.html
rename to examples/timeline/styling/itemTemplates.html
index 8a66b242..a8772afa 100644
--- a/examples/timeline/27_templates.html
+++ b/examples/timeline/styling/itemTemplates.html
@@ -23,8 +23,8 @@
     </table>
   </script>
 
-  <script src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, html {
@@ -57,7 +57,7 @@
     }
   </style>
 
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>WK 2014</h1>