--- a/integration/js/edition.js	Tue May 28 11:54:04 2013 +0200
+++ b/integration/js/edition.js	Tue May 28 16:27:45 2013 +0200
@@ -7,7 +7,6 @@
 $(function(){
 
 var global = {
-    diaporama : null,
     idAnnotation : null,
     colorsIndex : 0,
     colors : 
@@ -26,7 +25,7 @@
     
     //chargement des chapitres et annotations existants
     loadInitChapters();
-    loadInitAnnotation()
+    loadInitAnnotation();
 
     IriSP.htmlPlayer(
         myMedia,
@@ -115,12 +114,9 @@
 //########### modal
 
     $(document).on('click', 'a.open-modal', function(e){
-        var diaporama = $(this).attr('data-diaporama'),
-            idAnnotation = $(this).attr('data-id');
+        var idAnnotation = $(this).attr('data-id');
 
-        if(diaporama !== undefined){
-            global.diaporama = diaporama;
-        }
+
         if(idAnnotation !== undefined){
             global.idAnnotation = idAnnotation;
         }
@@ -133,7 +129,8 @@
         $('.input-image-'+typeImage).show();
     });
 
-//bibliotheque
+//select on bibliotheque
+
     //video
     $('.popup').on('click', '.bibliotheque-video a', function(e){
         e.preventDefault();
@@ -149,14 +146,6 @@
         });
         
     });
-    //image
-    $('.popup').on('click', '.bibliotheque-image a', function(e){
-        e.preventDefault();
-        var listDiaporama = $('#'+global.diaporama);
-        addImageToDiaporama(listDiaporama);
-        $('.popup').modal('hide');
-    });
-
     
 
     //confirmation suppression
@@ -555,12 +544,20 @@
                     break;
 
                 case 'slideshow': 
+
                     $(tabContent).find('.number-spin').spin(spinParam);
                     $(tabContent).find('.ui-sortable').sortable({
                         stop : function(event, ui){
                             disabledBtnSortable($(this));
                         }
                     });
+                    var diaporama = $(tabContent).find('#diaporama-'+idAnnotation),
+                        images = viewType.content.images;
+                    if(images.length){
+                        $.each(images, function(k,v){
+                            addImageToDiaporama(diaporama, v);
+                        });
+                    }
                     break;
             }
 
@@ -624,12 +621,29 @@
     }
 
 //diaporama
-    function addImageToDiaporama(diaporama){
+
+    //bibliotheque
+    $('.popup').on('click', '.bibliotheque-image a', function(e){
+        e.preventDefault();
+
+        var url = $(this).attr('href'),
+            image = {
+                id : currentAnnotation.id,
+                url : url,
+                title : 'titre image',
+                description : 'description azerty'
+            };
+        currentAnnotation.content.images.push(image);
+
+        var listDiaporama = $('#diaporama-'+currentAnnotation.id);
+        addImageToDiaporama(listDiaporama, image);
+        $('.popup').modal('hide'); 
+    });
+
+    function addImageToDiaporama(diaporama, dataView){
         $.get('template.html', function(templates){
-            var tplDiapo = $(templates).filter('#tpl-diaporama-row').html(),
-                uniqId = 'id' + (new Date()).getTime(),
-                viewDiapo = { ridid : uniqId};
-            tplDiapo = Mustache.render(tplDiapo, viewDiapo);
+            var tplDiapo = $(templates).filter('#tpl-diaporama-row').html();
+            tplDiapo = Mustache.render(tplDiapo, dataView);
             diaporama.append(tplDiapo);
             disabledBtnSortable(diaporama);
         });
@@ -716,8 +730,23 @@
     currentAnnotation.content[name] = value;
 });
 
+//annotation slideshow
+$('.tab-content').on('click', '.btn-autostart', function(){
+    var autostart = $(this).attr('data-autostart');
+    if(autostart == "true"){ autostart = true;}
+    else {autostart = false;}
+    currentAnnotation.content.autostart = autostart;
+});
+
+
+$('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
+    var value = $(this).val();
+    if(!isNaN(value)){
+        currentAnnotation.content.duration = value;
+    }
+});
+
 //################ config
-
 //tagit
 function onTagItChange(e, ui) {
     var tagitType = $(this).attr('data-type'), 

--- a/integration/template.html	Tue May 28 11:54:04 2013 +0200
+++ b/integration/template.html	Tue May 28 16:27:45 2013 +0200
@@ -128,13 +128,13 @@
 		<div class="span3">
 			<label for="">Diaporama :</label>
 		    <div class="btn-group" data-toggle="buttons-radio">
-			    <button type="button" class="btn btn-primary">Manuel</button>
-			    <button type="button" class="btn btn-primary active">Auto</button>
+			    <button type="button" data-autostart="false" class="{{^content.autostart}}active{{/content.autostart}} btn btn-primary btn-autostart">Manuel</button>
+			    <button type="button" class="{{#content.autostart}}active{{/content.autostart}} btn btn-primary  btn-autostart" data-autostart="true">Auto</button>
 		    </div>	
 		</div>
 		<div class="span3">
 			<label for="">Durée image : </label>
-			<input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
+			<input pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="1"> sec
 		</div>
 	</form>
 </div>
@@ -198,14 +198,14 @@
 
 <script id="tpl-diaporama-row" type="text/html">
 <tr id="rid-{{ridid}}" class="row-image-diaporama">
-	<td><img src="img/60x60.gif" alt=""> </td>
-	<td>Titre annotation 1</td>
-	<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+	<td class="image-slideshow-row"><img data-url="{{url}}" src="img/60x60.gif" alt=""> </td>
+	<td class="title-slideshow-row">{{title}}</td>
+	<td class="description-slideshow-row">{{description}}</td>
 	<td>
 		<table>
 			<tr>
 				<td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
-				<td><a data-title="une image" href="#rid-{{ridid}}" class="btn btn-delete"><i class="icon-trash"></i></a></td>
+				<td><a data-title="une image" href="#rid-{{id}}" class="btn btn-delete"><i class="icon-trash"></i></a></td>
 			</tr>
 			<tr>
 				<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>