diff -r 7de2652f7ee8 -r 2f35c2ae7de8 server/src/main/webapp/WEB-INF/templates/projectIndex.html
--- a/server/src/main/webapp/WEB-INF/templates/projectIndex.html	Sun May 18 10:31:12 2014 +0200
+++ b/server/src/main/webapp/WEB-INF/templates/projectIndex.html	Sun May 25 13:45:24 2014 +0900
@@ -14,7 +14,7 @@
         
         <script src="../../lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script>
         <script src="../../lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script>
-        <script src="../../js/main.js" th:src="@{/static/js/main.js}" ></script>
+        <script src="../../lib/URI.js" th:src="@{/static/lib/URI.js}" ></script>
 
         <link href="../../static/css/style.css" rel="stylesheet" th:href="@{/static/css/style.css}"/>
         <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> 
@@ -28,9 +28,12 @@
             </header>
             <div id="inner">
                 <div id="label" class="translate" th:text="#{renkanIndex.renkan_exp}">Create a Renkan</div> 
-                <form action="#" onsubmit="go2Title();return false;"> 
-                    <input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/> 
-                    <button type="submit">OK</button>
+                <form action="#" id="new-renkan-form">
+                    <fieldset id="form-fields">
+                        <div id="title-field"><label th:text="#{renkanIndex.renkan_title}" for="renkantitle">title</label><input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/></div>
+                        <div id="file-field"><label th:text="#{renkanIndex.renkan_file}" for="renkanfile">file</label><input type="file" id="renkanfile"/></div> 
+                    </fieldset>
+                    <div id="form-submit"><button type="submit">OK</button></div>
                 </form>
             </div>
             <div id="project-list-container">
@@ -39,11 +42,11 @@
                   <form method="get"> 
                       <input type="text" id="project-filter" name="filter" placeholder="filter title" th:placeholder="#{renkanIndex.project_filter}" th:value="${param['filter']}?${param['filter'][0]}:''" /> 
                       <button type="submit">OK</button>
-                  </form>                            
+                  </form>
               </div>
               <div th:include="fragment/paginationFragment :: paginationFragment" class="pagination-container">
-                  <div>               
-                      <a href="#?p.page=1">&lt;&lt;</a>                    
+                  <div>
+                      <a href="#?p.page=1">&lt;&lt;</a>
                       <a href="#?p.page=3">&lt;</a>
                       <span>...</span>
                       <a href="#?p.page=2">2</a>
@@ -74,13 +77,13 @@
                     <td th:text="${project.updated}?${#dates.format(project.updated, #messages.msg('date.format'))}:''">update</td>
                     <td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td>
                     <td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:text="#{renkanIndex.project_edit_link}">Edit project</a></td>
-                    <td><a href="#" th:text="#{renkanIndex.project_copy_link}" th:attr="data-project_id=${project.id}" class="copy_project">Copy project</a></td>
-                    <td><a href="#" th:text="#{renkanIndex.project_delete_link}" th:attr="data-project_id=${project.id},data-project_title=${project.title}" class="delete_project">Delete project</a></td>
+                    <td><a href="#" th:text="#{renkanIndex.project_copy_link}" th:attr="data-project_id=${project.id}" class="copy-project">Copy project</a></td>
+                    <td><a href="#" th:text="#{renkanIndex.project_delete_link}" th:attr="data-project_id=${project.id},data-project_title=${project.title}" class="delete-project">Delete project</a></td>
                     <td><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:text="#{renkanIndex.project_render_link}">View project</a></td>
                   </tr>
                 </tbody>
               </table>
-            </div>            
+            </div>
         </div>
         <footer id="footer" th:include="fragment/pageFragment :: footerFragment">
             <div id="version">© <span class="version-date">2014</span> <a href="http://www.iri.centrepompidou.fr" target="_blanck">IRI</a> - Version <span class="version-version">0.0</span></div>
@@ -91,62 +94,100 @@
     
           function go2Title()
           {
-              var renkantitle = $("#renkantitle").val();
-              if(renkantitle.length == 0) {
-              	var alert_message = /*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a title"; 
+              var renkantitle = $("#renkantitle").val(),
+                  renkanfiles = $("#renkanfile").prop("files");
+              
+              if(renkantitle.length == 0 && renkanfiles.length == 0) {
+              	var alert_message = /*[[#{renkanIndex.js.empty_form_error}]]*/"Please enter a title or a file"; 
               	alert(alert_message);
               	return false;
               }
-              
-              new_renkan = {
-              	title: renkantitle,
-              	description: "(empty description)",
-              	uri: null,
-              	space_id: /*[[${space.id}]]*/"_",
-              };
+              var post_url = /*[[@{/rest/projects/}]]*/"/rest/projects/",
+                  deferred = $.Deferred();
               
-              var post_url = /*[[@{/rest/projects/}]]*/"/rest/projects/"; 
-              $.ajax(post_url, {
-                  data:JSON.stringify(new_renkan),
-                  type: "POST",
-                  dataType: "json",
-                  contentType: "application/json; charset=UTF-8"
-              }).done(function(project){
-              	window.location.reload();
+              deferred.done(function(new_renkan) {
+                  new_renkan.space_id = /*[[${space.id}]]*/"_";
+                  $.ajax(post_url, {
+                      data:JSON.stringify(new_renkan),
+                      type: "POST",
+                      dataType: "json",
+                      contentType: "application/json; charset=UTF-8"
+                  }).done(function(project){
+                      var uri = new URI(window.location);
+                      window.location = uri.setSearch("p.sort","created").setSearch("p.sort.dir", "desc").href();
+                  });
               });
-              
+
+              if(renkanfiles.length == 0) {
+                  deferred.resolve({
+                      title: renkantitle,
+                      description: "",
+                      uri: null,
+                  });
+              }
+              else {
+                  fr = new FileReader();
+                  fr.onload = function() {
+                      var new_renkan = JSON.parse(fr.result);
+                      if(renkantitle.length > 0) {
+                          new_renkan.title = renkantitle;
+                      }
+                      if(typeof new_renkan.created !== "undefined") {
+                          delete new_renkan.created;
+                      }
+                      if(typeof new_renkan.updated !== "undefined") {
+                          delete new_renkan.updated;
+                      }
+                      deferred.resolve(new_renkan);
+                  };
+                  fr.readAsText(renkanfiles[0]);
+              }
+          }
+
+          function copyProject(project_id)
+          {
+          	var post_url = /*[[@{/p/copy}]]*/"#";
+              $.post(post_url, {"project_id": project_id})
+                  .done(function(p){
+                      window.location.reload();
+              });
           }
       
-      function copyProject(project_id)
-      {
-      	var post_url = /*[[@{/p/copy}]]*/"#";
-          $.post(post_url, {"project_id": project_id})
-              .done(function(p){
-                  window.location.reload();
+          function deleteProject(project_id, project_title)
+          {
+          	var message = /*[[#{renkanIndex.project_delete_confirm}]]*/"Delete project \"<%= title %>\"";
+          	if(confirm(_.template(message, {title: project_title}))) {
+                  var delete_url = /*[[@{/rest/projects}]]*/"#";
+                  $.ajax(delete_url+"/"+project_id, {
+                      type: "DELETE"	
+                  }).done(function(){
+                  	window.location.reload();
+                  });
+          	}
+          }
+          
+          $(function(){
+             
+              $(".copy-project").click(function(event) {
+                  copyProject($(event.target).data("project_id"));
+              });
+
+              $(".delete-project").click(function(event) {
+                  deleteProject($(event.target).data("project_id"), $(event.target).data("project_title"));
+              });
+
+              
+              $("#new-renkan-form").submit(function(e) {
+                  e.preventDefault();
+                  go2Title();
+                  return false;
+              });
+              
+              $("#import-renkan-form").submit(function(e) {
+                  e.preventDefault();
+                  console.log("import form event :", e);
+              });
           });
-      }
-      
-      function deleteProject(project_id, project_title)
-      {
-      	var message = /*[[#{renkanIndex.project_delete_confirm}]]*/"Delete project \"<%= title %>\"";
-      	if(confirm(_.template(message, {title: project_title}))) {
-              var delete_url = /*[[@{/rest/projects}]]*/"#";
-              $.ajax(delete_url+"/"+project_id, {
-                  type: "DELETE"	
-              }).done(function(){
-              	window.location.reload();
-              });
-      	}
-      }
-      
-      $(function(){
-      	$(".copy_project").click(function(event) {
-      		copyProject($(event.target).data("project_id"));
-      	});
-          $(".delete_project").click(function(event) {
-              deleteProject($(event.target).data("project_id"), $(event.target).data("project_title"));
-          });
-      });
 
       /*]]>*/
       </script>