--- a/timeline/css/timeline.css	Tue Aug 13 11:14:25 2013 +0200
+++ b/timeline/css/timeline.css	Tue Aug 13 13:16:26 2013 +0200
@@ -137,7 +137,8 @@
 }
 
 .Tl-MainPart {
-    position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px solid #ccc;
+    position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px solid #ccc; overflow: hidden;
+    box-shadow: 0 0 20px #999999 inset
 }
 
 .Tl-UniversLabels {
@@ -148,10 +149,6 @@
     font-size: 13px; margin: 2px 0;
 }
 
-.Tl-Line-Even {
-    background: #e0e0e0;
-}
-
 .Tl-Layer {
     position: absolute; top: 0; left: 0; height: 100%;
 }

--- a/timeline/js/timeline.js	Tue Aug 13 11:14:25 2013 +0200
+++ b/timeline/js/timeline.js	Tue Aug 13 13:16:26 2013 +0200
@@ -126,13 +126,15 @@
 /* Defaults */
 
 Tlns.Defaults.Timeline = {
+    email: "",
+    token: "",
     container : "timeline",
-    width : 950,
-    height : 200,
-    url_univers : '',
+    width : 780,
+    height : 225,
     min_width : 400,
     min_height : 100,
-    main_width : 800,
+    main_width : 700,
+    linelabels : [],
     timescales : [{
         label : "Mois",
         span : 32 * 86400 * 1000,
@@ -179,7 +181,8 @@
     level: 0,
     central_time: 0,
     sync_now: true,
-    urls_occurrences: [],
+    api_endpoint: "",
+    api_method: "fetchAll",
     occurrences: [],
     cluster_spacing: 12,
     tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}',
@@ -201,7 +204,7 @@
     + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-SyncButton"></div></div><div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-NextButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'
     + '<div class="Tl-TopBar-Timescales">{{#timescales}}<div class="Tl-TopBar-Button Tl-TopBar-TextBtn Tl-Border-Right" data-level="{{level}}">{{label}}</div>{{/timescales}}</div></div>'
     + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
-    + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div>'
+    + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><div class="Tl-Layer Tl-Occurrences"></div>'
     + '</div>'
     + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div></div>'
     
@@ -228,7 +231,7 @@
     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}</div>{{/occurrences}}</div>{{/open_cluster}}';
 
 Tlns.Templates.Occurrence_List = '{{#occurrences}}<li class="Ls-Occurrence" data-id="{{id}}"><div class="Ls-OccIcon Tl-Occ{{type}} Tl-Occ{{status}}"></div><h4 class="Ls-Occurrence-Title"><a href="#">{{title}}</a></h4>'
-    + '<p class="Ls-Occ-More">{{formatted_date}} &mdash; {{univers.title}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p><div style="clear:both;"></div></li>{{/occurrences}}';
+    + '<p class="Ls-Occ-More">{{formatted_date}} &mdash; {{univers.title}} &mdash; {{translated_status}}{{#format}} &mdash; {{format}}{{/format}}</p><div style="clear:both;"></div></li>{{/occurrences}}';
 
 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p>'
     + '<p class="Tl-Tooltip-Description">{{description}}</p>'
@@ -253,10 +256,7 @@
     this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
     this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
     this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
-    this.$.find('canvas.Tl-Layer').attr({
-        width: this.main_width,
-        height: this.main_height
-    });
+    
     var _o = this.$.find('.Tl-MainPart').offset();
     this.dragging_bounds = {
         left: _o.left,
@@ -264,6 +264,9 @@
         right: _o.left + this.$.find('.Tl-MainPart').outerWidth(),
         bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(),
     };
+    this.$.find('.Tl-UniversLabels').css({
+        width: this.width - this.main_width
+    });
     
     var _this = this;
     
@@ -329,10 +332,6 @@
         $(this).hide();
     });
         
-    /* Loading Univers */
-    $.getJSON(this.url_univers, function(_data) {
-        _this.onUniversLoaded(_data);
-    });
     
     /* LIST */
     
@@ -397,6 +396,7 @@
         _this.throttledDrawList();
     });
        
+    this.onUniversLoaded(this.linelabels);
     
 }
 
@@ -555,17 +555,20 @@
 
 Tlns.Classes.Timeline.prototype.loadOccurrences = function() {
     var _this = this;
-    _(this.urls_occurrences).each(function(_url_occ) {
-        $.getJSON(_url_occ.url, function(_data) {
-            _this.onOccurrencesLoaded(_data, _url_occ.type);
-        });
+    $.getJSON(this.api_endpoint, {
+        method: this.api_method,
+        api_key: this.token,
+        mail: this.email
+    }, function(_data) {
+        console.log(_data);
+        _this.onOccurrencesLoaded(_data);
     });
     
 }
 
-Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data, _type) {
-    for (var _i = 0; _i < _data.length; _i++) {
-        this.createOrUpdateOccurrence(_type, _data[_i]);
+Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) {
+    for (var _i = 0; _i < _data.data.length; _i++) {
+        this.createOrUpdateOccurrence(_data.data[_i]);
     }
     if (!this.mouse_down) {
         this.drawOccurrences();
@@ -598,14 +601,14 @@
     });
 }
 
-Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_type, _data) {
-    var _id = _type + "_" + _data.id,
+Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_data) {
+    var _id = _data.id,
         _occurrence = this.getOccurrence(_id);
     if (typeof _occurrence === "undefined") {
         _occurrence = new Tlns.Classes.Occurrence(this);
         this.occurrences.push(_occurrence);
     }
-    _occurrence.update(_type, _data);
+    _occurrence.update(_data);
     return _occurrence;
 }
 
@@ -831,24 +834,17 @@
  */
 
 Tlns.Classes.Univers = function(_data, _timeline, _index) {
-    this.id = _data.idUnivers;
+    this.id = "u_" + _index;
     this.index = _index;
-    this.title = _data.nomUnivers;
+    this.title = _data;
 //    this.mainCharacter = _data.personnage;
     this.y = (_timeline.univers_height * _index);
 
     this.$label = $('<li>').css({
         height : _timeline.univers_height + "px"
-    }).html(Mustache.to_html(Tlns.Templates.Univers, this))
-      .addClass((_index % 2) ? 'Tl-Line-Odd' : 'Tl-Line-Even');
+    }).html(Mustache.to_html(Tlns.Templates.Univers, this));
     
     _timeline.$.find('.Tl-UniversLabels').append(this.$label);
-    var _txt = this.title,
-        _span = this.$label.find('span');
-    while (_span.outerWidth() > (_timeline.width - _timeline.main_width) && _txt) {
-        _txt = _txt.substr(0, _txt.length - 1);
-        _span.html(_txt + '&hellip;');
-    }
 }
 
 /*
@@ -859,27 +855,15 @@
     this.timeline = _timeline;
 }
 
-Tlns.Classes.Occurrence.prototype.update = function(_type, _data) {
-    this.type = _type;
-    if (typeof _data.idOccurrenceNarrative !== "undefined" || typeof _data.idOccurrencePublication !== "undefined" || typeof _data.id !== "undefined" || typeof this.original_id === "undefined") {
-        this.original_id = _data.idOccurrenceNarrative || _data.idOccurrencePublication || _data.id || Tlns.Utils.guid();
-    }
-    this.id = _type + "_" + this.original_id;
-    if (typeof _data.date !== "undefined" || typeof _data.datePublication !== "undefined") {
-        this.date = 1000 * (_data.datePublication || _data.date);
-    } else {
-        if (typeof this.date === "undefined") {
-            this.date = new Date().valueOf();
-        }
-    }
+Tlns.Classes.Occurrence.prototype.update = function(_data) {
+    this.original_data = _data;
+    this.id = _data.id;
+    this.date = new Date(1000 * (_data.dateFirstPublication || _data.dateCreate) || Date.now);
     this.formatted_date = Tlns.Utils.dateFormat(this.date,Tlns.Defaults.Timeline.tooltip_date_format);
-    if (typeof _data.titre !== "undefined" || typeof this.title === "undefined") {
-        this.title = _data.titre || "<untitled>";
-    }
-    if (typeof _data.idUnivers !== "undefined") {
-        this.univers_id = _data.idUnivers;
-    }
+    this.title = _data.title;
+    this.univers_id = this.timeline.univers[Math.floor(this.timeline.univers.length * Math.random())].id;
     this.univers = this.timeline.getUnivers(this.univers_id);
+    this.type = "publication";
     if (typeof _data.statut !== "undefined" || typeof this.status === "undefined") {
         switch(_data.statut) {
             case "Validée":
@@ -899,25 +883,11 @@
     if (typeof _data.typeOccurrencePublication !== "undefined" || typeof this.format === "undefined") {
         this.format = _data.typeOccurrencePublication || 'Format non défini';
     }
-    if (typeof _data.JT !== "undefined") {
-        this.jt = !!+_data.JT;
-    }
     this.translated_status = Tlns.Defaults.Timeline.statuses[this.status];
 //    this.published = (_data.publication && _data.publication == "En ligne");
 //    this.locked = _data.verrouille || false;
 //    this.characters = _data.personnagesSecondaires || [];
-    this.dependsOn = [];
-    if (_data.dependanceNarrative) {
-        for (var _i = 0; _i < _data.dependanceNarrative.length; _i++) {
-            this.dependsOn.push("narrative_" + _data.dependanceNarrative[_i])
-        }
-    }
-    if (_data.dependancePublication) {
-        for (var _i = 0; _i < _data.dependancePublication.length; _i++) {
-            this.dependsOn.push("publication_" + _data.dependancePublication[_i])
-        }
-    }
-    var _tmp = $('<p>').html(_data.accroche || "");
+    var _tmp = $('<p>').html(_data.resume || "");
     this.description = _tmp.text().trim().replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{60,80})[\s].+$/m,'$1&hellip;');
 }
 

--- a/timeline/timeline.html	Tue Aug 13 11:14:25 2013 +0200
+++ b/timeline/timeline.html	Tue Aug 13 13:16:26 2013 +0200
@@ -6,14 +6,14 @@
         <title>Tests Timeline</title>
         <meta name="description" content="" />
         <meta name="author" content="Institut de Recherche et d'Innovation (IRI)" />
-        <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
+        <link rel="stylesheet" type="text/css" href="lib/jquery-ui.min.css" />
         <link rel="stylesheet" type="text/css" href="css/timeline.css" />
         <style type="text/css">
             h1 {
                 text-align: center; font-size: 20px; font-weight: bold; margin: 5px;
             }
             #timeline {
-                width: 950px; margin: 5px auto; text-align: center;
+                width: 780px; margin: 5px auto; text-align: center;
             }
         </style>
         <script type="text/javascript" src="lib/jquery.min.js"> </script>
@@ -24,22 +24,25 @@
         <script type="text/javascript" src="js/timeline.js"> </script>
         <script type="text/javascript">
             var _tl;
-            $(function() {
+            $.getJSON(
+                'http://anarchy2.solicis.fr/api/back/user?process=orm_entity_authenticate&login=anarchy@solicis.fr&password=anarchy&callback=?',
+                function(data) {
+                    var token = data.data[0].token;
+                    console.log(token);
                 _tl = new Tlns.Classes.Timeline({
-                    url_univers: 'data/api_univers.json',
-                    urls_occurrences: [
-                        {
-                            url: 'data/api_occurrence_publication.json',
-                            type: 'publication'
-                        },
-                        {
-                            url: 'data/api_occurrence_narrative.json',
-                            type: 'narrative'
-                        }],
+                    email: 'anarchy@solicis.fr',
+                    token: token,
+                    linelabels: [
+                        "Les jalons de l'histoire",
+                        "L'actualité",
+                        "Les appels à contribuer",
+                        "Les Persos d'Anarchy"
+                    ],
+                    api_endpoint: "http://anarchy2.solicis.fr/api/cms/content?callback=?",
                     container: "timeline",
                     level: 1,
                     sync_now: false,
-                    central_time: Date.parse("2012-07-26T00:00:00Z")
+                    central_time: Date.parse("2013-07-18T00:00:00Z")
                 });
             }); 
         </script>