--- a/web/res/metadataplayer/SlideVideoPlayer.js	Fri Dec 11 18:11:13 2015 +0100
+++ b/web/res/metadataplayer/SlideVideoPlayer.js	Tue Dec 29 13:25:14 2015 +0100
@@ -7,12 +7,16 @@
 
 
 IriSP.Widgets.SlideVideoPlayer.prototype.defaults = {
+    playerModule: "HtmlPlayer",
+    // mode is either "sidebyside" or "pip"
+    mode: "sidebyside"
 };
 
 IriSP.Widgets.SlideVideoPlayer.prototype.template = '<div class="Ldt-SlideVideoPlayer">\
-<div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\
-</div>\
-<div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel"></div>\
+  <div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\
+  </div>\
+  <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\
+  </div>\
 </div>';
 
 IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
@@ -23,24 +27,60 @@
         _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"),
             {
                 type: "ImageDisplay",
-                annotation_type: _this.annotation_type,
-                width: '100%'
+                annotation_type: _this.annotation_type
             },
             "slide"
         );
     this.insertSubwidget(
         _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"),
             {
-                type: "HtmlPlayer",
+                type: _this.playerModule,
                 video: _this.video,
                 width: '100%',
                 url_transform: _this.url_transform
             },
             "player"
-        );
-    // FIXME: this should be better implemented through a signal sent
-    // when widgets are ready (and not just loaded)
-    window.setTimeout(function () {
-        _this.$.find(".Ldt-SlideVideoPlayer").split({ orientation: 'vertical' });
-    }, 1000);
+    );
+
+    if (_this.mode == 'pip') {
+        _this.$.find(".Ldt-SlideVideoPlayer-panel").append('<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>');
+        _this.$.on("click", ".Ldt-SlideVideoPlayer-pip-menu-toggle", function () {
+            _this.toggleMainDisplay();
+        });
+        window.setTimeout(function () {
+            _this.setMainDisplay('video');
+        }, 1500);
+    } else {
+        // Default : side by side
+        // FIXME: this should be better implemented through a signal sent
+        // when widgets are ready (and not just loaded)
+        window.setTimeout(function () {
+            _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({ orientation: (screen.height > screen.width) ? 'vertical' : 'horizontal',
+                                                               leftMin: 20,
+                                                               topMin: 20
+                                                             });
+        }, 1500);
+    }
+};
+
+IriSP.Widgets.SlideVideoPlayer.prototype.toggleMainDisplay = function() {
+    if (this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video").hasClass("Ldt-SlideVideoPlayer-pip-main")) {
+        this.setMainDisplay('slides');
+    } else {
+        this.setMainDisplay('video');
+    }
+};
+
+// Set main display (in case of a "switch" display mode)
+// main is either 'video' or 'slides'
+IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slides) {
+    var main = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video");
+    var pip = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide");
+    if (video_or_slides == 'slides') {
+        var temp = main;
+        main = pip;
+        pip = temp;
+    };
+    main.removeClass('Ldt-SlideVideoPlayer-pip-pip').addClass('Ldt-SlideVideoPlayer-pip-main');
+    pip.removeClass('Ldt-SlideVideoPlayer-pip-main').addClass('Ldt-SlideVideoPlayer-pip-pip');
 }