--- a/server/src/metaeducation/static/metaeducation/css/style.css	Fri May 13 13:11:24 2016 +0200
+++ b/server/src/metaeducation/static/metaeducation/css/style.css	Fri May 13 13:12:14 2016 +0200
@@ -1,3 +1,64 @@
 #navbar-user.navbar-right{
 	width: 200px;
+}
+
+.errorModal {
+    font-family: Arial, Helvetica, sans-serif;
+    display: none; 
+    position: fixed; 
+    z-index: 1000; 
+    padding-top: 100px; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(35,0,0,0.4); 
+}
+
+/* Modal Content */
+.errorModal-cnt {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+.errorModal-header {
+    padding: 2px 16px;
+    background-color: #cc0000;
+    color: white;
+}
+
+.errorModal-body {
+	padding: 2px 16px;
+}
+
+.errorModal-footer {
+    padding: 2px 16px;
+    background-color: #cc0000;
+    color: white;
+}
+
+#renkanErrorReload {
+	cursor: pointer;
 }
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/metaeducation/static/metaeducation/js/mtdc-save.js	Fri May 13 13:12:14 2016 +0200
@@ -0,0 +1,81 @@
+/* Saves the Full JSON at each modification */
+
+Rkns.mtdcJsonIO = function(_renkan, _opts) {
+      var _proj = _renkan.project;
+      if (typeof _opts.http_method === "undefined") {
+          _opts.http_method = 'PUT';
+      }
+      var _load = function() {
+          _proj.set({
+              loadingStatus : true
+          });
+          Rkns.$.getJSON(_opts.url, function(_data) {
+              _renkan.dataloader.load(_data);
+              _proj.set({
+                  loadingStatus : false,
+              });
+              _proj.set({
+                  saveStatus : 0
+              });
+              console.log(_proj.get("updated"))
+              _proj.on("add:nodes add:edges add:users add:views", function(_model) {
+                  _model.on("change remove", function(_model) {
+                      _thrSave();
+                  });
+                  _thrSave();
+              });
+              _proj.on("change", function() {
+                  if (!(_proj.changedAttributes.length === 1 && _proj
+                          .hasChanged('saveStatus'))) {
+                      _thrSave();
+                  }
+              });
+          }).fail(function( jqXHR, textStatus ) {
+              _showErrorModal(jqXHR.responseText);
+              console.log(textStatus)
+          });
+      };
+      var _save = function() {
+          _proj.set({
+              saveStatus : 2
+          });
+          var _data = _proj.toJSON();
+          if (!_renkan.read_only) {
+              Rkns.$.ajax({
+                  type : _opts.http_method,
+                  url : _opts.url,
+                  contentType : "application/json",
+                  data : JSON.stringify(_data),
+                  success : function(data, textStatus, jqXHR) {
+                      _proj.set({
+                          saveStatus : 0,
+                          updated : data.updated
+                      });
+                      //_showErrorModal("updated")
+                  },
+                  error: function (jqXHR, textStatus, errorThrown) {
+                      _showErrorModal(jqXHR.responseText);
+                      console.log(textStatus)
+                      console.log(errorThrown)
+                  }
+              });
+          }
+
+      };
+      var _thrSave = Rkns._.throttle(function() {
+          setTimeout(_save, 100);
+      }, 1000);
+      
+
+      Rkns.$("#renkanErrorReload").on("click", function(){
+         location.reload();
+      });
+      
+      var errorModal = document.getElementById('renkanErrorModal');
+      var _showErrorModal = function(message) {
+          errorModal.style.display = "block";
+          Rkns.$(".errorMsg").text(message);
+      }
+      
+      _load();
+  };
\ No newline at end of file

--- a/server/src/metaeducation/templates/renkan_edit.html	Fri May 13 13:11:24 2016 +0200
+++ b/server/src/metaeducation/templates/renkan_edit.html	Fri May 13 13:12:14 2016 +0200
@@ -14,8 +14,9 @@
   </script>
   <script src="{% static 'renkanmanager/lib/requirejs/require.js' %}"></script>
   <script src="{% static 'renkanmanager/lib/renkan/js/renkan.js' %}"></script>
+  <script src="{% static 'metaeducation/js/mtdc-save.js' %}"></script>
   <script type="text/javascript">
-
+      
       function startRenkan(){
           var _renkan = new Rkns.Renkan({
               static_url : "{% static 'renkanmanager/lib/renkan/' %}",
@@ -43,9 +44,9 @@
               show_bookmarklet: false,
               show_fullscreen_button: false,
               home_button_url: false,
-              popup_editor: false,
+              popup_editor: true,
           });
-          Rkns.jsonIO(_renkan, {
+          Rkns.mtdcJsonIO(_renkan, {
               url: "{% url 'v1.0:renkan_detail' renkan_guid=renkan_guid %}?content_only=true"
           });
       };
@@ -53,9 +54,23 @@
 {% endblock js_import %}
 {% block css_import %}
   <link rel="stylesheet" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
+  <link rel="stylesheet" href="{% static 'metaeducation/css/style.css' %}" />
 {% endblock css_import %}
 {% block navbar %}
 {% endblock navbar %}
 {% block main_content %}
   <div id="renkan"></div>
+  <div id="renkanErrorModal" class="errorModal">
+    <div class="errorModal-cnt">
+    <div class="errorModal-header">
+      <h2>Le serveur Renkan a renvoyé une erreur.</h2>
+    </div>
+    <div class="errorModal-body">
+      <p class="errorMsg"></p>
+    </div>
+    <div class="errorModal-footer">
+      <h4 id="renkanErrorReload">Recharger la page</h4>
+    </div>
+  </div>
+  </div>
 {% endblock main_content %}
\ No newline at end of file

--- a/server/src/metaeducation/templates/renkan_view.html	Fri May 13 13:11:24 2016 +0200
+++ b/server/src/metaeducation/templates/renkan_view.html	Fri May 13 13:12:14 2016 +0200
@@ -14,6 +14,7 @@
   </script>
   <script src="{% static 'renkanmanager/lib/requirejs/require.js' %}"></script>
   <script src="{% static 'renkanmanager/lib/renkan/js/renkan.js' %}"></script>
+  <script src="{% static 'metaeducation/js/mtdc-save.js' %}"></script>
   <script type="text/javascript">
 
       function startRenkan(){
@@ -44,7 +45,7 @@
               home_button_url: false,
               popup_editor: false,
           });
-          Rkns.jsonIO(_renkan, {
+          Rkns.mtdcJsonIO(_renkan, {
               url: "{% url 'v1.0:renkan_detail' renkan_guid=renkan_guid %}?content_only=true"
           });
       };
@@ -52,9 +53,23 @@
 {% endblock js_import %}
 {% block css_import %}
   <link rel="stylesheet" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
+  <link rel="stylesheet" href="{% static 'metaeducation/css/style.css' %}" />
 {% endblock css_import %}
 {% block navbar %}
 {% endblock navbar %}
 {% block main_content %}
   <div id="renkan"></div>
+  <div id="renkanErrorModal" class="errorModal">
+    <div class="errorModal-cnt">
+      <div class="errorModal-header">
+        <h2>Le serveur Renkan a renvoyé une erreur.</h2>
+      </div>
+      <div class="errorModal-body">
+        <p class="errorMsg"></p>
+      </div>
+      <div class="errorModal-footer">
+        <h4 id="renkanErrorReload">Recharger la page</h4>
+      </div>
+    </div>
+  </div>
 {% endblock main_content %}
\ No newline at end of file