--- a/cms/app-client/app/controllers/application.js	Thu Jan 21 00:11:10 2016 +0100
+++ b/cms/app-client/app/controllers/application.js	Thu Jan 21 21:07:02 2016 +0100
@@ -1,15 +1,26 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  queryParams: ['location', 'langue', 'discours', 'date', 'thematique'],
+  queryParams: ['location', 'langue', 'discours', 'date', 'thematique', 'detailId'],
   location: null,
   langue: null,
   discours: null,
   date: [],
   thematique: null,
-  isShowingModal: false,
-  currentDetails: null,
-  currentItem: {title: "example", master: 'http://www.noiseaddicts.com/samples_1w72b820/3921.mp3'},
+  detailId: null,
+
+  currentId: null,
+  currentItem: Ember.computed('currentId', function() {
+    Ember.$(".result-item").toggleClass("playing", false);
+    Ember.$("#"+this.get('currentId')).toggleClass("playing", true);
+    if (this.get('currentId') === null){
+      return null;
+    }
+    return this.store.findRecord('document', this.get('currentId'));
+  }),
+  modalItem: Ember.computed('detailId', function() {
+    return this.store.findRecord('document', this.get('detailId'));
+  }),
   filteredDocuments: Ember.computed('location', 'langue', 'discours', 'date', 'thematique', 'model', function() {
     var location = this.get('location');
     var langue = this.get('langue');
@@ -42,10 +53,6 @@
     }
     return documents;
   }),
-  currentItemChanged: Ember.observer('currentItem', function() {
-    Ember.$(".result-item").toggleClass("playing", false);
-    Ember.$("#"+this.get('currentItem').id).toggleClass("playing", true);
-  }),
   actions: {
     deleteTag: function(query, item){
       var newParams = null;
@@ -63,16 +70,17 @@
     },
     changeDocument: function(docDirection){
       var direction = (docDirection === "next") ? 1 : -1;
-      var index = this.get("filteredDocuments").indexOf(this.get("currentItem"));
-      if ( index !== -1){
-          if (typeof(this.get("filteredDocuments").objectAt(index+direction)) !== 'undefined'){
-            return this.set('currentItem', this.get("filteredDocuments").objectAt(index+direction));
+      var currentObject = this.get("filteredDocuments").findBy('id', this.get("currentItem").get('id'));
+      if ( currentObject !== 'undefined'){
+        var index = this.get("filteredDocuments").indexOf(currentObject);
+          if ( typeof(this.get("filteredDocuments").objectAt(index+direction)) !== 'undefined'){
+            return this.set('currentId', this.get("filteredDocuments").objectAt(index+direction).id);
           }
       }
-      return this.set('currentItem', this.get('filteredDocuments').get('firstObject'));
+      return this.set('currentId', this.get('filteredDocuments').get('firstObject').id);
     },
     play: function(item){
-      this.set("currentItem", item);
+      this.set("currentId", item.id);
     },
     details: function(item){
       if (Ember.$("#"+item.id).hasClass("details")){
@@ -83,8 +91,10 @@
       }
     },
     toggleModal: function(item){
-      this.set("isShowingModal", !this.isShowingModal);
-      this.set("currentDetails", item);
+      if (typeof(item) !== 'undefined'){
+        this.set("detailId", item.id);
+      }
+      this.set("detailId", null);
     }
   }
 });