--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/visu-chrono.js	Thu Dec 10 17:00:02 2015 +0100
@@ -0,0 +1,28 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  didInsertElement: function(){
+    var isMouseDown = false,
+      isHighlighted;
+    $("#our_table li")
+      .mousedown(function () {
+        isMouseDown = true;
+        $(this).toggleClass("highlighted");
+        isHighlighted = $(this).hasClass("highlighted");
+        return false; // prevent text selection
+      })
+      .mouseover(function () {
+        if (isMouseDown) {
+          $(this).toggleClass("highlighted", isHighlighted);
+        }
+      })
+      .bind("selectstart", function () {
+        return false;
+      })
+
+    $(document)
+      .mouseup(function () {
+        isMouseDown = false;
+      });
+  }
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/components/visu-chrono.hbs	Thu Dec 10 17:00:02 2015 +0100
@@ -0,0 +1,74 @@
+<div cellpadding="0" cellspacing="0" id="our_table">
+  <ul> 1960 -
+    <li>0</li>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+  <ul> 1970 -
+    <li>0</li>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+  <ul> 1980 -
+    <li>0</li>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+  <ul> 1990 -
+    <li>0</li>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+  <ul> 2000 -
+    <li>0</li>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+  <ul> 2010 -
+    <li>0</li>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+</div>

--- a/cms/app-client/app/templates/tabs/chrono.hbs	Thu Dec 10 16:59:35 2015 +0100
+++ b/cms/app-client/app/templates/tabs/chrono.hbs	Thu Dec 10 17:00:02 2015 +0100
@@ -1,1 +1,2 @@
 <h2>Recherche par chronologie</h2>
+{{visu-chrono}}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/integration/components/visu-chrono-test.js	Thu Dec 10 17:00:02 2015 +0100
@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('visu-chrono', 'Integration | Component | visu chrono', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{visu-chrono}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#visu-chrono}}
+      template block text
+    {{/visu-chrono}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});