diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip
index f135089df67215934ef7b883218c37a4b7999b11..40b7e727a0ccf08db83eb7b5c69648df3018fc90 100644
Binary files a/capsule-prototype/create.zip and b/capsule-prototype/create.zip differ
diff --git a/capsule-prototype/css/flatten_timeline.css b/capsule-prototype/css/flatten_timeline.css
new file mode 100644
index 0000000000000000000000000000000000000000..b92769b3d1a05f30111b1e048fcd336354a53669
--- /dev/null
+++ b/capsule-prototype/css/flatten_timeline.css
@@ -0,0 +1,349 @@
+
+#flattentimeline {
+	flex: 1 0 0;
+	color: white;
+	overflow-x: hidden;	
+	overflow-y: auto;	
+	min-width: 150px;
+}
+
+#flattentimeline.drag  {
+	/*background: rgba(2,212,255,.5);*/
+	box-shadow: 0 0 20px 20px rgba(63,223,255,.45) inset;
+}
+
+.flattentimeline_item.draggable  {
+	background: rgba(63,223,255,.25);
+}
+
+#flattentimeline_highlight {
+	margin-bottom: 0px;
+}
+
+
+#flattentimeline_main_title {
+	font-weight: 200;
+	/*height: 40px;*/
+	line-height: 20px;
+	padding: 10px 0;
+	text-align: center;
+	/*background: #2C3032;*/
+	/*background: #2C3033;*/
+	/*background: #57A5AF;*/
+	background: #EC8960;
+	/*background-image: -webkit-linear-gradient(left, #EC8960 0%, #57A5AF 100%);*/
+	/*background-image: -webkit-linear-gradient(left, #94CA6F 0%, #B495CC 100%);*/
+	text-transform: uppercase;
+	color: rgba(255,255,255,1);
+	font-size: 18px;
+	border-bottom: 2px solid #1B1D1E;
+}
+
+#flattentimeline_settings {
+	font-weight: 200;
+	height: 240px;
+	line-height: 40px;
+	text-align: center;
+	background: #26292B;
+	text-transform: uppercase;
+	color: #FFF;
+	font-size: 18px;
+	margin-top: 4px;
+	display: none;
+}
+
+#flattentimeline_items {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
+	background-color: rgba(255,255,255,.05);
+}
+
+.flattentimeline_item {
+	position: relative;
+	height: 40px;
+	color: white;
+	margin: 0px 0px;
+	cursor: pointer;
+	width: 100%;
+	display: none;
+	/*border-radius: 2px;*/
+}
+
+
+.flattentimeline_highlightitem {
+	position: relative;
+	/*height: 150px;*/
+	height: auto;
+	color: white;
+	margin: 3px 0px 0px 0px;
+	cursor: pointer;
+	/*background: rgba(255,255,255,.15);  */
+	width: 100%;
+	text-align: center;
+	padding: 2px 0 3px 0;
+	border-radius: 1px;
+
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+
+	/*display:block;*/
+}
+
+
+.flattentimeline_item:hover, .flattentimeline_highlightitem:hover {
+	background-color: rgba(255,255,255,.15);
+	opacity: 1;
+}
+
+.flattentimeline_opacifiant, .flattentimeline_bar {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	text-align: left;
+	overflow: hidden;
+
+	/*border-radius: 3px;
+	/*mix-blend-mode: overlay;*/
+}
+
+.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter {
+	top: 0px;
+	left: 0px;
+	/*position: absolute; */
+	background-position: center center;
+	background-repeat: no-repeat;
+	text-align: left;
+	overflow: hidden;
+	line-height: 20px;
+}
+
+
+.flattentimeline_item .flattentimeline_image {
+	height: 30px;
+	width: 30px;
+	margin: 4px 7px 4px 0px;
+	border-radius: 1px;
+	background-color: rgba(255,255,255,.25);
+	float: left;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+}
+
+
+.flattentimeline_highlightitem .flattentimeline_image {
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	border-radius: 1px;
+	position: absolute;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	background-blend-mode: normal;
+	opacity: .5;
+}
+
+/*.flattentimeline_highlightitem .flattentimeline_image {
+width: 170px;
+height: 60px;
+margin: 15px 15px 5px 15px;
+border-radius: 2px;
+background-color: #fff;
+display: inline-block;
+float: left;
+background-position: center center;
+}  */
+
+/*.flattentimeline_color {
+top: 0px;
+height: 100%;
+}*/
+.flattentimeline_opacifiant, .flattentimeline_bar {
+	background-color: rgba(0, 0, 0, 0.75);
+	height: 3px;
+	top: 37px;
+
+	/* box-shadow: 0px 0px 1px 1px rgba(20,46,51,.25);
+	/*	mix-blend-mode: luminosity;  */
+
+	/*  mix-blend-mode: multiply;
+	/*  height: 40px;
+	top: 0px;
+	opacity: .25;  */
+}
+
+.flattentimeline_highlightitem .flattentimeline_bar, .flattentimeline_highlightitem  .flattentimeline_opacifiant  {
+	top: auto;
+	display: block;
+}
+
+.flattentimeline_title {
+	font-weight: 400;
+	font-size: 10px;
+	line-height: 39px;
+	/* color: rgba(255,255,255,.5); */
+
+	/*width: 55%; */
+	/*max-width: 132px;*/
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	/*overflow: hidden;*/
+
+	/*color: #0C2D33; */
+	/*mix-blend-mode: screen;      */
+}
+
+.flattentimeline_highlightitem .flattentimeline_title {
+	line-height: 1.2em;
+	width: 170px;
+	font-size: 12px;
+	text-transform: uppercase;
+	padding: 20px 0 20px 0;
+	color: #FFF;/*rgba(255,255,255,1);*/
+	font-weight: 600;
+}
+
+.flattentimeline_highlightitem .flattentimeline_description {
+	font-weight: 400;
+	font-size: 11px;
+	line-height: 1.4em;
+	color: rgba(255,255,255,.9);
+	margin: -15px 15px 20px 15px;
+
+	width: 170px;
+	text-align: left;
+
+	display: inline-block;
+}
+
+.flattentimeline_highlightitem .flattentimeline_typeTxt, .flattentimeline_highlightitem .flattentimeline_author {
+	font-weight: 400;
+	font-size: 9px;
+	line-height: 1.2em;
+	margin: -13px 15px 20px 15px;
+
+	width: 170px;
+	text-align: left;
+	color: rgba(255,255,255,.75);
+
+	display: inline-block;
+	font-style: italic;
+	/*text-transform: uppercase; */
+}
+
+.flattentimeline_highlightitem .flattentimeline_author {
+	font-style: normal;
+}
+
+.flattentimeline_subtitle {
+	font-family: "OpenSans";
+	font-weight: 200;
+	top: 25px;
+	font-size: 10px;
+	left: 40px;
+	line-height: 20px;
+	height: 20px;
+	display: none;
+}
+/*.flattentimeline_type {
+top: 14px;
+left: 6px;
+width: 26px;
+height: 26px;
+background-position: center center;
+background-repeat: no-repeat;
+opacity: .5;
+}*/
+/*.flattentimeline_type {
+width:10px; height:10px;
+border-radius:10px;
+float:right;
+margin:20px 15px 20px 0;
+}*/
+.flattentimeline_type {
+	width: 20px;
+	height: 20px;
+	/*border-radius: 20px; */
+	float: right;
+	background-position: center center;
+	background-repeat: no-repeat;
+	margin: 9px 5px;
+	opacity: 0.75;
+	display: none;
+}
+
+.flattentimeline_highlightitem .flattentimeline_type {
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	border-radius: 30px;
+	background-color: rgba(0,0,0,.5);
+	margin: 25px 0 0 80px;
+}
+
+.flattentimeline_color {
+	width: 6px;
+	height: 6px;
+	border-radius: 10px;
+	float: right;
+	margin: 22px 5px;
+}
+
+.flattentimeline_counter {
+	font-weight: 600;
+	top: 5px;
+	left: 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 38px;
+	border-radius: 2px;
+
+	background-color: #000;
+
+	font-size: 18px;
+	text-align: center;
+	display: none;
+}
+
+.flattentimeline_bar {
+	/*width: 0%;*/
+	background-color: #26292B;	/*#2DCAE1;*/
+	opacity: 1;
+}
+
+.docLive, .docTocome, .docFaraway {
+	display: block;
+}
+
+.docLive {
+	opacity: 1;
+}
+
+.docTocome, .docFaraway {
+	opacity: 0.1;
+}
+
+.docFaraway {
+	opacity: 0.1;
+}
diff --git a/capsule-prototype/css/left_menu.css b/capsule-prototype/css/left_menu.css
new file mode 100644
index 0000000000000000000000000000000000000000..41803b28561ef85f54d8081bb4ed1cb88c101cd4
--- /dev/null
+++ b/capsule-prototype/css/left_menu.css
@@ -0,0 +1,83 @@
+
+#left_menu, #left_menu.div {
+	width: 80px;
+	justify-content: space-between;
+	background: var(--rk-light-blue);
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+
+.left_menu_item {
+	color: rgba(255,255,255,.5);
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	/*
+	font-size: 10px;
+	width: 70px;
+	margin: 0 5px;
+	height: 60px;
+	border-radius: 2px;
+	padding: 5px 0;
+	text-align: center;
+	display: inline-block;
+	 */
+}
+
+.left_menu_item:hover { background: rgba(0,0,0,.1); }
+
+.left_menu_item.selected { background: rgba(0,0,0,.15); }
+
+.left_menu_item:first-child { margin-bottom: 10px; }
+
+.left_menu_item_icn { width:40px; height:40px; }
+
+#left_menu_item_icn_presets { background:url("images/icn-menu-presets.png"); }
+
+#left_menu_item_icn_horizontal { background:url("images/icn-menu-horizontal.png"); }
+
+#left_menu_item_icn_vertical { background:url("images/icn-menu-vertical.png"); }
+
+#left_menu_item_icn_groups { background:url("images/icn-menu-groups.png"); }
+
+#left_menu_item_icn_colors { background:url("images/icn-menu-colors.png"); }
+
+#left_menu_item_icn_filter { background:url("images/icn-menu-filter.png"); }
+
+#left_menu_item_icn_highlight { background:url("images/icn-menu-highlight.png"); }
+
+#left_menu_item_icn_search { background:url("images/icn-menu-search.png"); }
+
+#left_menu_item_icn_keywords { background:url("images/icn-menu-keywords.png"); }
+
+#left_menu_item_icn_mosaic { background:url("images/icn-menu-mosaic.png"); }
+
+#left_menu_item_icn_preview { background:url("images/icn-menu-preview.png"); }
+
+#left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); }
+
+#left_menu_item_icn_addfile { background:url("images/icn-menu-addfile.png"); }
+
+#left_menu_item_icn_addnote { background:url("images/icn-menu-addnote.png"); }
+
+#left_menu_item_icn_addlink { background:url("images/icn-menu-addlink.png"); }
+
+.left_menu_item_title {
+	height:20px;
+	line-height:20px;
+}
+
+#left_menu .break {
+	width:40px; height:1px;
+	background:rgba(255,255,255,.2);
+	margin:5px 20px;
+}
+
+#left_menu_item_btn_addfile {
+	background: red;
+	opacity: 0;
+	cursor: pointer !important;
+}
diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css
new file mode 100644
index 0000000000000000000000000000000000000000..8ad8ce8598febfd58a700e69b9d0e024ad9e78e5
--- /dev/null
+++ b/capsule-prototype/css/mosaic.css
@@ -0,0 +1,94 @@
+
+:root {
+	--card-height: 150px;
+	--card-width: 150px;
+
+	--filter-width: 80px;
+	--filter-height: 25px;
+
+	--border-radius: 3px;
+	--base-spacing: 5px;
+	--little-spacing: 2px;
+
+	--filter-bg-size: 30px;
+}
+
+#mosaic_tab {
+	display: flex;
+	flex-direction: column;
+}
+
+.mosaic_filter, .mosaic_category > div {
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+
+	flex-wrap: wrap;
+}
+
+.mosaic_filter_item {
+	width: var(--filter-width);
+	height: var(--filter-height);
+	margin: var(--base-spacing);
+	padding: var(--base-spacing);
+	border-radius: var(--border-radius);
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+	padding-left: var(--filter-bg-size);
+	align-items: center;
+}
+
+.mosaic_category {
+	padding: var(--base-spacing);
+	margin: var(--base-spacing);
+	border-radius: var(--border-radius);
+	display: flex;
+	flex-direction: column;
+}
+
+.mosaic_item {
+	width: var(--card-width);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+}
+
+.mosaic_item span {
+	max-width: var(--card-width);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: var(--base-spacing);
+}
+
+.mosaic_item img {
+	width: 80%;
+	height: auto;
+	max-height: var(--card-height);
+	padding: var(--base-spacing);
+}
+
+.mosaic_filter_item:not(.mosaic_filter_item_all), .mosaic_category > h2 {
+	text-transform: uppercase;
+}
+
+.mosaic_filter > div {
+	background-repeat: no-repeat;
+	background-position: left;
+	background-size: var(--filter-bg-size);
+}
+
+.mosaic_filter > div.mosaic_filter_item_all { background-size: 20px; }
+
+.mosaic_filter_item:not(.mosaic_filter_disabled, .mosaic_filter_item_all) {
+	background-image: url('images/icn-menu-preview.png');
+}
+
+.mosaic_filter_disabled {
+	background-image: url('images/icn-menu-filter.png');
+}
+
+.mosaic_filter_item_all {
+	background-image: url('images/icn-reload.png');
+}
diff --git a/capsule-prototype/css/old_flatten_timeline.css b/capsule-prototype/css/old_flatten_timeline.css
new file mode 100644
index 0000000000000000000000000000000000000000..9d021add4923af01017fb2891f675e8435b7c1a0
--- /dev/null
+++ b/capsule-prototype/css/old_flatten_timeline.css
@@ -0,0 +1,350 @@
+
+#flattentimeline {
+	flex: 1;
+	color: white;
+	overflow-x: hidden;	
+	overflow-y: auto;	
+}
+
+#flattentimeline.drag  {
+	/*background: rgba(2,212,255,.5);*/
+	box-shadow: 0 0 20px 20px rgba(63,223,255,.45) inset;
+}
+
+.flattentimeline_item.draggable  {
+	background: rgba(63,223,255,.25);
+}
+
+#flattentimeline_highlight {
+	margin-bottom: 0px;
+}
+
+
+#flattentimeline_main_title {
+	font-weight: 200;
+	/*height: 40px;*/
+	line-height: 20px;
+	padding: 10px 0;
+	text-align: center;
+	/*background: #2C3032;*/
+	/*background: #2C3033;*/
+	/*background: #57A5AF;*/
+	background: #EC8960;
+	/*background-image: -webkit-linear-gradient(left, #EC8960 0%, #57A5AF 100%);*/
+	/*background-image: -webkit-linear-gradient(left, #94CA6F 0%, #B495CC 100%);*/
+	text-transform: uppercase;
+	color: rgba(255,255,255,1);
+	font-size: 18px;
+	border-bottom: 2px solid #1B1D1E;
+}
+
+#flattentimeline_settings {
+	font-weight: 200;
+	height: 240px;
+	line-height: 40px;
+	text-align: center;
+	background: #26292B;
+	text-transform: uppercase;
+	color: #FFF;
+	font-size: 18px;
+	margin-top: 4px;
+	display: none;
+}
+
+#flattentimeline_items {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
+	background-color: rgba(255,255,255,.05);
+}
+
+.flattentimeline_item {
+	position: relative;
+	height: 40px;
+	color: white;
+	margin: 0px 0px;
+	cursor: pointer;
+	width: 100%;
+	display: none;
+	/*border-radius: 2px;*/
+}
+
+
+.flattentimeline_highlightitem {
+	position: relative;
+	/*height: 150px;*/
+	height: auto;
+	color: white;
+	margin: 3px 0px 0px 0px;
+	cursor: pointer;
+	/*background: rgba(255,255,255,.15);  */
+	width: 100%;
+	text-align: center;
+	padding: 2px 0 3px 0;
+	border-radius: 1px;
+
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+
+	/*display:block;*/
+}
+
+
+.flattentimeline_item:hover, .flattentimeline_highlightitem:hover {
+	background-color: rgba(255,255,255,.15);
+	opacity: 1;
+}
+
+.flattentimeline_opacifiant, .flattentimeline_bar {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	text-align: left;
+	overflow: hidden;
+
+	/*border-radius: 3px;
+	/*mix-blend-mode: overlay;*/
+}
+
+.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter {
+	top: 0px;
+	left: 0px;
+	/*position: absolute; */
+	background-position: center center;
+	background-repeat: no-repeat;
+	text-align: left;
+	overflow: hidden;
+	line-height: 20px;
+}
+
+
+.flattentimeline_item .flattentimeline_image {
+	height: 30px;
+	width: 30px;
+	margin: 4px 7px 4px 0px;
+	border-radius: 1px;
+	background-color: rgba(255,255,255,.25);
+	float: left;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+}
+
+
+.flattentimeline_highlightitem .flattentimeline_image {
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	border-radius: 1px;
+	position: absolute;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-webkit-background-size:cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	background-blend-mode: normal;
+	opacity: .5;
+}
+
+/*.flattentimeline_highlightitem .flattentimeline_image {
+width: 170px;
+height: 60px;
+margin: 15px 15px 5px 15px;
+border-radius: 2px;
+background-color: #fff;
+display: inline-block;
+float: left;
+background-position: center center;
+}  */
+
+/*.flattentimeline_color {
+top: 0px;
+height: 100%;
+}*/
+.flattentimeline_opacifiant, .flattentimeline_bar {
+	background-color: rgba(0, 0, 0, 0.75);
+	height: 3px;
+	top: 37px;
+
+	/* box-shadow: 0px 0px 1px 1px rgba(20,46,51,.25);
+	/*	mix-blend-mode: luminosity;  */
+
+	/*  mix-blend-mode: multiply;
+	/*  height: 40px;
+	top: 0px;
+	opacity: .25;  */
+}
+
+.flattentimeline_highlightitem .flattentimeline_bar, .flattentimeline_highlightitem  .flattentimeline_opacifiant  {
+	top: auto;
+	display: block;
+}
+
+.flattentimeline_title {
+	font-weight: 400;
+	font-size: 10px;
+	line-height: 39px;
+	/* color: rgba(255,255,255,.5); */
+
+	/*width: 55%; */
+	max-width: 132px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+
+	display: inline-block;
+	/*color: #0C2D33; */
+	/*mix-blend-mode: screen;      */
+}
+
+.flattentimeline_highlightitem .flattentimeline_title {
+	line-height: 1.2em;
+	width: 170px;
+	font-size: 12px;
+	text-transform: uppercase;
+	padding: 20px 0 20px 0;
+	color: #FFF;/*rgba(255,255,255,1);*/
+	font-weight: 600;
+}
+
+.flattentimeline_highlightitem .flattentimeline_description {
+	font-weight: 400;
+	font-size: 11px;
+	line-height: 1.4em;
+	color: rgba(255,255,255,.9);
+	margin: -15px 15px 20px 15px;
+
+	width: 170px;
+	text-align: left;
+
+	display: inline-block;
+}
+
+.flattentimeline_highlightitem .flattentimeline_typeTxt, .flattentimeline_highlightitem .flattentimeline_author {
+	font-weight: 400;
+	font-size: 9px;
+	line-height: 1.2em;
+	margin: -13px 15px 20px 15px;
+
+	width: 170px;
+	text-align: left;
+	color: rgba(255,255,255,.75);
+
+	display: flex;
+	font-style: italic;
+	/*text-transform: uppercase; */
+}
+
+.flattentimeline_highlightitem .flattentimeline_author {
+	font-style: normal;
+}
+
+.flattentimeline_subtitle {
+	font-family: "OpenSans";
+	font-weight: 200;
+	top: 25px;
+	font-size: 10px;
+	left: 40px;
+	line-height: 20px;
+	height: 20px;
+	display: none;
+}
+/*.flattentimeline_type {
+top: 14px;
+left: 6px;
+width: 26px;
+height: 26px;
+background-position: center center;
+background-repeat: no-repeat;
+opacity: .5;
+}*/
+/*.flattentimeline_type {
+width:10px; height:10px;
+border-radius:10px;
+float:right;
+margin:20px 15px 20px 0;
+}*/
+.flattentimeline_type {
+	width: 20px;
+	height: 20px;
+	/*border-radius: 20px; */
+	float: right;
+	background-position: center center;
+	background-repeat: no-repeat;
+	margin: 9px 5px;
+	opacity: 0.75;
+	display: none;
+}
+
+.flattentimeline_highlightitem .flattentimeline_type {
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	border-radius: 30px;
+	background-color: rgba(0,0,0,.5);
+	margin: 25px 0 0 80px;
+}
+
+.flattentimeline_color {
+	width: 6px;
+	height: 6px;
+	border-radius: 10px;
+	float: right;
+	margin: 22px 5px;
+}
+
+.flattentimeline_counter {
+	font-weight: 600;
+	top: 5px;
+	left: 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 38px;
+	border-radius: 2px;
+
+	background-color: #000;
+
+	font-size: 18px;
+	text-align: center;
+	display: none;
+}
+
+.flattentimeline_bar {
+	/*width: 0%;*/
+	background-color: #26292B;	/*#2DCAE1;*/
+	opacity: 1;
+}
+
+.docLive, .docTocome, .docFaraway {
+	display: flex;
+	flex: 0;
+}
+
+.docLive {
+	opacity: 1;
+}
+
+.docTocome, .docFaraway {
+	opacity: 0.1;
+}
+
+.docFaraway {
+	opacity: 0.1;
+}
diff --git a/capsule-prototype/css/old_mosaic.css b/capsule-prototype/css/old_mosaic.css
new file mode 100644
index 0000000000000000000000000000000000000000..5900022308f739c1c07792322b2e069ea9e9433f
--- /dev/null
+++ b/capsule-prototype/css/old_mosaic.css
@@ -0,0 +1,82 @@
+
+#mosaic_tab {
+	background: #243538;
+	overflow: scroll;
+	padding: 20px;
+	display: none;
+}
+
+.mosaic_category {
+	padding: 1.0em 1vw;
+	margin: 2vh 0 1.5vh 0;
+	border-radius: 3px;
+	background: rgba(0,0,0,.15);
+}
+
+.mosaic_category_grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+	grid-auto-rows: 150px;
+}
+
+.mosaic_filter {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+}
+
+.mosaic_filter_item {
+	padding: 1.0em 1vw;
+	margin: 2vh 0.5vw 1.5vh 0.5vw;
+	border-radius: 3px;
+	cursor:pointer;
+}
+
+.mosaic_filter_disabled {
+	opacity: 0.5;
+}
+
+.mosaic_filter_disabled>h2:after {
+	background-image: url('images/icn-menu-filter.png');
+}
+
+.mosaic_filter_item > h2, .mosaic_category h2 {
+	text-transform: capitalize;
+}
+
+.mosaic_filter_item:not(.mosaic_filter_disabled) > h2:after{
+	background-image: url('images/icn-menu-preview.png');
+}
+
+.mosaic_filter_item > h2:after{
+	display:inline-block;
+	height:20px;
+	width:20px;
+	content: " ";
+	background-size: 20px 20px;
+	margin-left: 5px;
+	padding-top: 3px;
+	background-repeat: no-repeat;
+}
+
+.mosaic_filter_item_all > h2:after {
+	background-image: url('images/icn-reload.png') !important;
+}
+
+.mosaic_item img {
+	/* To correctly align image, regardless of content height: */
+	vertical-align: top;
+	display: inline-block;
+	/* To horizontally center images and caption */
+	text-align: center;
+	/* The width of the container also implies margin around the images. */
+	width: 100px;
+	margin: 2vh 0 1.5vh 0;
+	cursor:pointer;
+}
+
+.mosaic_item .caption {
+	/*
+	display:block;
+	*/
+}
+
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index a1eeef556ddc68d4e77e23994a463b9c5021fa02..2793e4ac11871ed2816a20ea8df5d48ecaa8e58d 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -1,1393 +1,223 @@
 @import url("font/stylesheet.css");
+@import 'left_menu.css';
+@import 'popup.css';
+@import 'mosaic.css';
+@import 'flatten_timeline.css';
 
-html, body {
-	width:  	 			100%;
-  	height: 	 			100%;
-  	margin: 	 			0px;
-	color: 		 			white;
-    font-family:    		'OpenSans';
-  	font-weight: 			400;
-	font-size:	 			12px;
-	/*background-color: 		white;
-	background-color:		#061619; */ 
-	background:				#142E33;
-	-webkit-touch-callout: 	none;
-	-webkit-user-select: 	none;
-	-khtml-user-select: 	none;
-	-moz-user-select: 		none;
-	-ms-user-select: 		none;
-	user-select: 			none;
-}    
-
-#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace, #popupMosaicSpace {
-	width:					100%;
-	height:					100%;
-	background:				rgba(0,0,0,.25);
-	position:				absolute; 
-	z-index:				10000000;    	  
-	text-align:				center;     
-	display:				none;
-	top:					0px;
-}     
-#popupAlertSpace {           
-	z-index:				100000000;     
-}  
-             
-/*#popupSettings {                                         
-	width:					40vw;                       
-	margin-top:				25vh;   
-	padding:				5vh 0 6vh 0;                
-	border-radius:			2px;                        
-	box-shadow:				0 5px 25px #000;      
-  	font-weight: 			400;
-	font-size:	 			1vw; 
-	display:				inline-block;  
-	text-align:				center;       
-	background:				#243538;                    
-}    */     
-
-#popupSettings {                                         
-	margin-top:				15vh;                     
-	border-radius:			2px;                   
-	box-shadow:				0 5px 25px #000;      
-  	font-weight: 			400;
-	font-size:	 			1vw; 
-	display:				inline-block;  
-	text-align:				left;       
-	background:				#243538;                                             
-}                                         
-     
-#popupSettingsLeft {                                 
-	width:					25vw;       
-	min-height:				50vh;                          
-	padding:				6vh 3vw 6vh 3vw;    
-	vertical-align:			top;  
-	background:				rgba(0,0,0,.15);              
-}     
-
-#popupSettingsRight {                               
-	width:					18vw;       
-	min-height:				50vh;       
-	padding:				6vh 0 6vh 0;    
-	vertical-align:		    top;  
-	text-align:				center;               
-	border-radius:			2px 0 0 2px;         
-
-	background:				#559299;
-	background:				-o-linear-gradient(left bottom,  rgba(20,46,51,1) 0%, #559299 100%);
-	background:				-moz-linear-gradient(left bottom,  rgba(20,46,51,1) 0%, #559299 100%);          
-	background:				-webkit-linear-gradient(left bottom,  rgba(20,46,51,1) 0%, #559299 100%); 
-} 
-
-.popupSettingsBtn {
-	font-weight:			400;
-	color:					rgba(255,255,255,.75);    
-	font-size:				0.6em;  
-	cursor:					pointer;  
-	text-transform:			uppercase;           
-	text-align:				center;
-	display:				inline-block;        
-	bottom:					0;
-	margin:					1vh 0 1vh 0;     
-	line-height:			1.2em;                                                                                      
-	padding:				1.2em 2.4em 1.2em 2.4em;     
-	padding:				1.2em 0;     
-	width:					9vw;
-	border-radius:			3px;           
-	border:					1px solid rgba(255,255,255,.15);                                                                                                                    
-	             
-} 
-.popupSettingsBtn:hover {        
-	background:				rgba(255,255,255,.05);/*rgba(20,46,51,.75);/*rgba(20,46,51,.75);  */
-	color:					#fff; 
-}   
-
-.popupSettingsA {
-	font-weight:			400;
-	color:					rgba(255,255,255,.5);    
-	font-size:				.8em;  
-	cursor:					pointer;          
-	text-align:				center;
-	display:				inline-block;   
-	text-decoration:		underline;     
-	bottom:					0;
-	margin:					1vh 0;     
-	line-height:			1.2em;       
-	padding:				1.2em 0;     
-	width:					9vw;      
-}      
-.popupSettingsA:hover {
-	color:					rgba(255,255,255,.75);  
-}
-      
-.popupSettingsTxt {              
-	font-weight:			200;
-	width:					25vw;                   
-	display:				inline-block;      
-	margin-bottom:			1vh;          
-	font-size:				.9em; 
-	line-height:			1.2em;   
-	color:					rgba(255,255,255,.75); 
-	padding:				.5vh 0 .5vh 0;   
-	cursor:					pointer;
-}         
-.popupSettingsLabel {
-	color:					rgba(255,255,255,.25);    
-	font-size:				.9em;
-}
-
-.popupSettingsInput {                         
-	width:					23vw;                   
-	display:				inline-block;      
-	margin-bottom:			1vh;          
-	font-size:				.9em; 
-	line-height:			1.2em;                  
-	
-	font-weight:			200;
-	
-    background:				rgba(0,0,0,.05);  
-	box-shadow:				0 1px 3px rgba(0,0,0,.2) inset;  
-	border:					0;   
-	border-radius:			3px;     
-	color:					rgba(255,255,255,.85);    
-	padding:				.5vh .5vw;          
-	display:				none;
-}   
-
-#popupSettingsTitle {
-	text-transform:			uppercase; 
-	font-size:				1.2em;     
-	padding:				0 0 1vh 0;  
-}            
-#popupSettingsTitleInput {             
-	font-size:				1.2em;            
-}                                     
-#popupSettingsCredits, #popupSettingsCreationDate {   
-}
-
-
-
-
-
-
-
-#popupAlert {
-	width:					46vw;           
-	background:				#142E33;/*rgb(50,50,50); */
-	/*margin:					20vh 0 0 0;  */ 
-	padding:				5vh 2vw;         
-	border-radius:			3px;                    
-	box-shadow:				0 5px 25px #000;      
-  	font-weight: 			400;
-	font-size:	 			1vw; 
-	display:				inline-block;  
-	text-align:				center;  
-	color:					rgba(255,255,255,.75); 
-}   
-#popupAlertMessage {
-	font-size:				.9em;
-	font-weight:			200;
-}                              
-
-#popupAlertInput, #popupAlertTextarea {
-	background:				rgba(0,0,0,.05);/*gba(255,255,255,.15);*/   
-	box-shadow:				0 1px 3px rgba(0,0,0,.2) inset;  
-	border:					0;   
-	border-radius:			3px;     
-	color:					rgba(255,255,255,.85); 
-	width:					30vw; 
-	  
-	display:				inline-block;   
-	
-	font-weight:			200;
-	font-size:				0.9em;      
-	cursor:					pointer;  
-	padding-bottom:			0;    
-	
-	line-height:			1.4em;  
-	padding:				2vh 1vw;
-	
-	margin:					3vh 0 1.5vh 0;
-}        
-
-
-
-#popupAlertButtons, #popupAddLinkButtons {      	       
-	width:					100%;
-	text-align:				center;   
+:root {
+	--tab_selector_height: 30px;
+	--rk-light-blue: #559299;
 }
 
-.popupAlertButton, .popupAddLinkButton, .popupSettingsButton { 
-	width:					9vw;       
-	
-	font-weight:			400;
-  /*  color:					rgba(255,255,255,.75);  */
-	font-size:				0.7em;            
-	line-height:			1.2em;      
-	
-	cursor:					pointer;  
-	text-transform:			uppercase;           
-	text-align:				center;
-	display:				inline-block;     
- /*   border:					1px solid rgba(255,255,255,.15); */ 
-	border-radius:			3px;                    
-	padding:				1.1em 0;
-	                                   
-    color:					rgba(255,255,255,.5);
-	background:				rgba(255,255,255,.15);   
-	box-shadow:				0 1px 3px rgba(0,0,0,.1);
-	
-	margin:					3vh 1vw 0vh 1vw !important;      
-	font-family:			'OpenSans' !important;  
-}   
-.popupAlertButton:hover, .popupAddLinkButton:hover, .popupSettingsButton:hover {        
-	background:				rgba(255,255,255,.05);
-	color:					#fff 
-}   
-#popupAlertButtonOk, #popupAlertButtonYesdelete, #popupAlertButtonCancel, #popupAlertButtonYesdeleteproject  { 
-		display:				inline-block;
-}
-
-          
-#popupAddLink {
-	
-	width:					40vw;       
-	/*background:				rgb(102,202,138);
-	/*background:				rgb(100,100,100);*/ 
-	margin-top:				25vh;   
-	padding:				5vh 0 6vh 0;
-	/*left:					20%;
-	position:				absolute;  */  
-	border-radius:			2px;  
-	/*border:					2px solid #333;*/  
-	box-shadow:				0 5px 25px #000;      
-  	font-weight: 			400;
-	font-size:	 			1vw; 
-	display:				inline-block;  
-	text-align:				center;       
-	background:				#243538;
-	/*background-image:		-webkit-linear-gradient(right bottom,  rgb(20,46,51) 0%, #475457 150%);
-	/*box-shadow:				0px 0px 2px 3px rgba(255,255,255,.1) inset;  */
-	
-}       
-
-#popupAddLinkMessage, #popupMosaicMessage {    
-	font-weight:			100;        
-	color:					rgba(255,255,255,.75);  
-	text-align:				center;  
-	display:				inline-block;     
-	font-size:				1em;
-	width:					30vw;    
-	margin:					0vh 0vw 2vh 0vw !important;
-}
-
-#popupAddLinkInput {
-	background:				rgba(0,0,0,.05);/*gba(255,255,255,.15);*/   
-	box-shadow:				0 1px 3px rgba(0,0,0,.2) inset;  
-	border:					0;   
-	border-radius:			3px;     
-	color:					rgba(255,255,255,.85); 
-	width:					30vw;   
-	display:				inline-block;   
-	
-	font-weight:			200;
-	font-size:				0.9em;      
-	cursor:					pointer;  
-	padding-bottom:			0;    
-	
-	line-height:			1.2em;  
-	padding:				1.0em 1vw;
-	
-	margin:					2vh 0 1.5vh 0;
-}
+.flex-col, .flex-row, .flex-center, .flex { display: flex; }
 
-#popupMosaic {
-	background: #243538;
-	box-shadow:				0 1px 3px rgba(0,0,0,.2) inset;  
-	border:					0;   
-	border-radius:			3px;     
-	color:					rgba(255,255,255,.85); 
-	width:					70vw;
-	display:				inline-block;   
-	
-	font-weight:			200;
-	font-size:				0.9em;      
-	padding-bottom:			0;    
-	
-	line-height:			1.2em;  
-	padding:				1.0em 1vw;
-	
-	margin:					2vh 0 1.5vh -10vw;
-	overflow: scroll;
-	height: 90vh;
-}
-
-.mosaic_category {
-	padding: 1.0em 1vw;
-	margin: 2vh 0 1.5vh 0;
-	border-radius: 3px;
-	background:				rgba(0,0,0,.15); 
-}
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-center { justify-content: center; align-items: center; }
+.flex-space-around { justify-content: space-around; }
+.flex { flex: 1; }
 
-.mosaic_category_grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-	grid-auto-rows: 150px;
-}
-
-.mosaic_filter {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-}
-
-.mosaic_filter_item {
-	padding: 1.0em 1vw;
-	margin: 2vh 0.5vw 1.5vh 0.5vw;
-	border-radius: 3px;
-    cursor:pointer;
-}
-.mosaic_filter_disabled {
-    opacity: 0.5;
-}
-.mosaic_filter_disabled>h2:after {
-    background-image: url('images/icn-menu-filter.png');
-}
-.mosaic_filter_item>h2, .mosaic_category h2 {
-    text-transform: capitalize;
-}
-
-.mosaic_filter_item:not(.mosaic_filter_disabled)>h2:after{
-    background-image: url('images/icn-menu-preview.png');
-}
-.mosaic_filter_item>h2:after{
-    display:inline-block;
-    height:20px;
-    width:20px;
-    content: " ";
-    background-size: 20px 20px;
-    margin-left: 5px;
-    padding-top: 3px;
-    background-repeat: no-repeat;
-}
-.mosaic_filter_item_all>h2:after {
-    background-image: url('images/icn-reload.png') !important;
-}
-
-.mosaic_item img {
-	/* To correctly align image, regardless of content height: */
-	vertical-align: top;
-	display: inline-block;
-	/* To horizontally center images and caption */
-	text-align: center;
-	/* The width of the container also implies margin around the images. */
+html, body {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	color: white;
+	font-family: 'OpenSans';
+	font-weight: 400;
+	font-size: 12px;
+	/*background-color: white;
+	background-color: #061619; */
+	background: #142E33;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#tab_selector {
+	background-color: var(--rk-light-blue);
+}
+
+#tab_selector_form {
+	height: var(--tab_selector_height);
+}
+
+#tab_selector_form label {
+	padding: 5px;
+	cursor: pointer;
 	width: 100px;
-	margin: 2vh 0 1.5vh 0;
-    cursor:pointer;
-}
-.mosaic_item .caption {
-	display:block;
-}
-
-
-
-#popupEdit {
-	margin-top:				15vh;
-	border-radius:			2px;  
-	box-shadow:				0 5px 25px #000;      
-  	font-weight: 			400;
-	font-size:	 			1vw; 
-	display:				inline-block;  
-	text-align:				left;       
-	background:				#243538;
-}    
-
-#popupLeft {                               
-	width:					18vw;       
-	min-height:				50vh;       
-	padding:				5vh 0 3vh 0;    
-	vertical-align:		    top;  
-	text-align:				center; 
-	background:				rgba(0,0,0,.15); 
-	border-radius:			2px 0 0 2px;
-}
-#popupRight {                                 
-	width:					25vw;       
-	min-height:				50vh;                          
-	padding:				5vh 3vw 4vh 3vw;    
-	vertical-align:			top;      
-	background:				rgba(0,0,0,.15);
-}
-
-
-
-#popupEdit tr, #popupEdit td {    
-	background:				rgba(0,0,0,.15); 
-}
-   
-.popupLeftItem {
-	width:					100%;   
-	text-align:				center;                          
-	display:				inline-block;  
-}  
-.popupLeftButton {                      
-	font-weight:			400;
-	color:					rgba(0,0,0,.35);  
-	background:				rgba(255,255,255,.15);   
-	box-shadow:				0 1px 3px rgba(0,0,0,.1); 
-	border-radius:			3px;                           
-	font-size:				1.0em; 
-	line-height:			2.0em;  
-	padding:				0 4%;
-	cursor:					pointer;  
-	text-transform:			uppercase;  
-	display:				inline-block; 
-	margin-top:				1vh;  
-}      
-.popupLeftButton:hover {                                
-	background:				rgba(255,255,255,.35);
-}               
-
-     
-
-
-#popupImgBox {              
-	margin-bottom:			3vh;    
-	cursor:					pointer;  
-	height:					100%;      
-}        
-#popupImg {
-	max-width:				15vw;
-	max-height:				15vw; 
-	background:				rgba(255,255,255,.1);    
-	display:				inline-block;  
-	border-radius:			3px;     
-	box-shadow: 			0 1px 3px rgba(0,0,0,.35);
-}   
-
-       
-#closePopupEdit {                  
-	width:					40px; 
-	height:					40px;    
-	font-weight:			200;    
-	color:					rgba(255,255,255,.25);     
-	font-size:				30px;                       
-	text-align:				center;
-	line-height:			40px;   
-	cursor:					pointer;           
-	border-radius:			3px;  
-	position:				fixed;
-	top:					15vh;
-	right:					25.5vw;
-	z-index:				110;   
-} 
-
-#closePopupMosaic {                  
-	width:					40px; 
-	height:					40px;    
-	font-weight:			200;    
-	color:					rgba(255,255,255,.25);     
-	font-size:				30px;                       
-	text-align:				center;
-	line-height:			40px;   
-	cursor:					pointer;           
-	border-radius:			3px;  
-	position:				fixed;
-	top:					2vh;
-	right:					34vw;
-	z-index:				110;   
-} 
-#closePopupEdit:hover, #closePopupMosaic:hover {            	 
-	color:					rgba(255,255,255,.75);
-}
-
-.popupRightItem {
-	width:					25vw;                   
-	display:				inline-block;      
-	margin-bottom:			1vh;          
-	font-size:				1.2em; 
-	line-height:			1.2em;   
-	color:					rgba(255,255,255,.75);  
-}        
-.popupInput {
-    background:				rgba(0,0,0,.25);
-	box-shadow:				0 1px 3px rgba(0,0,0,.5) inset;  
-	border:					0;   
-	border-radius:			3px;     
-	color:					rgba(255,255,255,.85); 
-	width:					25vw;        
-	padding:				0 2%;  
-	display:				inline-block;  
-	display:				none;
-}
-#popupType {                  
-	font-size:				0.8em; 
-	font-weight:			400; 
-	color:					#FFF;     
-	display:				inline-block; 
-	margin:					3vh 0 0 0;   
-}                       
-
-
-#popupNom {
-	font-weight:			400;
-	font-size:				1.2em; 
-	color:					#FFF;   
-	cursor:					pointer; 
-	padding:				0;  
-	line-height:			1.2em;  
-	text-transform:			uppercase;   
-	margin-bottom:			1.5vh;
-}     
-#popupNomInput {
-	font-weight:			200;
-	font-size:				1.2em;      
-	cursor:					pointer;  
-	padding-bottom:			0;    
-	line-height:			1.6em;
-}       
-
-
-#popupTC {
-	font-size:				1em;
-	line-height:			1.8em;    
-	box-shadow:				0 1px 3px rgba(0,0,0,.15);
-	padding:				0;
-	border-radius:			2px;            
-	cursor:					pointer;
-	text-align:				center;    
-	margin-bottom:			3vh;     
-	font-weight:			600;
-}
-#popupTCin {                          
-	float:					left;   
-	color:					#142E33; 
-	margin-left:			3%;
-}           
-#popupTCout {                          
-	float:					right;   
-	color:					#142E33; 
-	margin-right:			3%;
-}
-#popupTC:hover { 
-	/*background:				rgba(255,255,255,.25);*/
-	background:				rgba(255,255,255,.1); 
-}      
-.popupTClabel {
-	width:					4vw;      
-	padding-right:			0.5vw;
-	text-align:				right;
-	display:				inline-block;   
-	font-size:				0.8em;
-	text-transform:			uppercase;
-}              
-#popupTCedit {  
-	font-size:				1.0em;  
-	line-height:			1.2em;
-	margin-bottom:			5%;   
-	font-weight:			200;    
-	/*background:				rgba(0,0,0,.05);  */
-	/*background:				rgba(255,255,255,.05); */ 
-	background:				none;
-	border:					1px solid #000;  
-	padding:				1vh 0;
-	color:					rgba(255,255,255,.5);    
-	display:				none;                
-}
-.popupTCeditfield {
-	background:				rgba(0,0,0,.25);/*gba(255,255,255,.15);*/   
-	box-shadow:				0 1px 3px rgba(0,0,0,.5) inset;  
-	border:					0;   
-	border-radius:			3px;     
-	color:					rgba(255,255,255,.85); 
-	width:					1.5vw;        
-	padding:				0 2%;  
-	display:				inline-block;
-	font-size:				1.0em;    
-	line-height:			1.8em;    
-	text-align:				center;
-}          
-.nowTCbtn {                                             
-	text-decoration:		underline;  
-	padding:				0 1%;  
-	display:				inline-block;   
-	color:					rgba(255,255,255,.75);   
-	cursor:					pointer;     
-	font-size: 				0.8em;
-	font-weight:			500;
-}      
-.TCvalidBtn {
-	padding:				0 1%;    
-	margin:					0 1%;    
-	float:					right;    
-	line-height:			1.8em;  
-	color:					rgba(255,255,255,.75);  
-	cursor:					pointer;
-}            
-
-#popupLegende {                     
-	cursor:					pointer;   
-	font-weight:			200;  
-	line-height:			1.2em;    
-	font-size:				0.9em; 
-	padding:				0;      
-	margin:					0 0 2vh 0;
-	/*font-style:				italic; */ 
-}   
-
-#popupLegendeInput {
-	font-weight:			200;     
-	min-height:				10vh;    
-	cursor:					pointer;  
-	padding:				2%; 
-	margin-bottom:			3%;
-	font-size:				1.0em; 
-	line-height:			1.2em;       
-}     
-
-
-#popupAuthorInput, #popupLinkInput {
-	font-weight:			200;     
-	height:					1.2em;    
-	cursor:					pointer;  
-	padding:				2%; 
-	margin-bottom:			3%;
-	font-size:				1.0em; 
-	line-height:			1.2em;       
+	text-align: center;
+	font-weight: bold;
+	font-size: 15px;
+	text-transform: capitalize;
 }
 
-                                          
-  
+#tab_selector_form input { display: none; }
 
-#popupLink {                     
-	cursor:					pointer;   
-	font-weight:			200;  
-	line-height:			1.2em;    
-	font-size:				0.9em; 
-	padding:				0;      
-	margin:					0 0 2vh 0;   
-	color:					rgba(255,255,255,.5);  
-}            
-#popupLink a:hover {
-	color:					#fff;  
-	text-decoration:		underline;
+#tab_selector_form input:checked + label {
+	background-color: rgba(255, 255, 255, .25);
 }
 
-#popupAuthor {                     
-	cursor:					pointer;   
-	font-weight:			200;  
-	line-height:			1.2em;    
-	font-size:				0.9em; 
-	padding:				0;      
-	margin:					0 0 3vh 0;               
+#tabs {
+	overflow: auto;
 }
-                 
 
-#popupSetHighlight {
-	font-weight:			400;
-	color:					rgba(0,0,0,.75);/*#142E33;*/       
-	font-size:				0.75em;  
-	cursor:					pointer;        
-	text-transform:			uppercase;      
-	text-align:				center;       
-	margin:					-3vh 2vh 2vh 2vh;  
-	line-height:			2.0em;
-	/*background:				rgba(255,255,255,.1); 
-	/*background:				rgba(0,0,0,.1);  */ 
-	padding:				.8em 1.8em .8em 1.8em;
-	border-radius:			2px 0 0 0;
-} 
-#popupSetHighlight.selected {      
-	/*color:					rgba(255,255,255,.75);   
-	background:				rgba(0,0,0,.15);        */
-   /* background:				rgba(255,255,255,.15);   */
-	color:					#FFF;   
-}  
-#popupSetHighlight:hover {       
-	/*background:				rgba(0,0,0,.25); 
-	color:					#FFF;   */
-	/*background:				rgba(255,255,255,.2);  */
-	color:				    rgba(255,255,255,.25);  /*#142E33;  */          
-}    
-#popupSetHighlight.selected:hover {      
-	/*color:					rgba(255,255,255,.75);   
-	background:				rgba(0,0,0,.15);        */
-	/*background:				rgba(255,255,255,.25);    */
-	color:					rgba(255,255,255,.75);   /*#FFF; */  
-}
-
-
-#popupEditSupprimer {
-	font-weight:			400;
-	color:					rgba(255,255,255,.75);/*#142E33;/*#FFF;/*rgba(255,255,255,.5); */        
-	font-size:				0.6em;  
-	cursor:					pointer;  
-	text-transform:			uppercase;           
-	text-align:				center;
-	display:				inline-block;        
-	bottom:					0;
-	margin:					2vh 0 1vh 0;     
-	line-height:			1.2em;
-	/*background:				#142E33;/*rgba(20,46,51,.8);/*rgba(0,0,0,.2);   */      
-	/*background-image:		-webkit-linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.10) 100%);   */
-	padding:				1.2em 2.4em 1.2em 2.4em;     
-	padding:				1.2em 0;     
-	width:					9vw;
-	border-radius:			3px;           
-	border:					1px solid rgba(255,255,255,.15);
-	/*border-bottom:			1px solid #142E33;   */                     
-} 
-#popupEditSupprimer:hover {        
-	background:				rgba(255,255,255,.05);/*rgba(20,46,51,.75);/*rgba(20,46,51,.75);  */
-	color:					#fff 
-}      
-
-
-
-
-
-@media screen and (max-width: 1000px) {
-	#popupEdit {
-		margin-top:				5vh;
-		font-size:	 			2.4vw; 
-	}    
-	#popupLeft {                               
-		width:					30vw;       
-		min-height:				60vh;       
-		padding:				5vh 0 3vh 0;    
-	}
-	#popupRight {                                 
-		width:					56vw;       
-		min-height:				60vh;                          
-		padding:				5vh 3vw 4vh 3vw;    
-	}
-	#popupImg {
-		max-width:				25vw;
-		max-height:				25vw; 
-	}
-	#closePopupEdit {                  
-		top:					5vh;
-		right:					4vw;
-		z-index:				110;   
-	}
-	.popupRightItem {
-		width:					56vw;              
-		margin-bottom:			2vh;          
-		font-size:				1em; 
-		line-height:			1.2em;   
-	}
+#container {
+	width: 100%;
+	height: 100%;
+	vertical-align: top;
+	overflow: hidden;
+	display: flex;
+	flex-direction: row;
 }
-                 
-
 
 .empty, .empty#popupAuthor, .empty#popupLink {
-	/*font-style:				italic; */
-	color:					rgba(255,255,255,.25);  
-	text-decoration:		none !important;  
-	display:				none;
+	/*font-style: italic; */
+	color: rgba(255,255,255,.25);
+	text-decoration: none !important;
+	display: none;
 }
- 
-           
 
 .separationHDark {
-	height:					1px;  
-	/*background:				rgba(0,0,0,.25);  
-	/*background:				rgba(255,255,255,.1);  */ 
-	border-bottom:			1px solid rgba(0,0,0,.1);
-	margin:					1vh 0 0vh 0;   
-	width:					100%;
-	display:				none;
-}
-
-
-
-
-
-
-
-#container {
-	width: 			  		100%;
-	height: 		  		100%;
-	vertical-align:			top;
-	overflow:				hidden;
-} 
-
-#left_menu { 
-	width:					80px;        
-	height: 		  		100vh;    
-	background:				#559299; 
-	display:				inline-block;  
-}   
-#left_menu_top {                    
-	height: 		  		50vh;
-	vertical-align:			top;  
-	text-align:				center; 
-	/*background:				rgba(0,0,0,.1);  */
-}       
-#left_menu_bottom {                 
-	height: 		  		50vh;
-	vertical-align:			bottom;  
-	text-align:				center;  
-	/*background:				rgba(0,0,0,.05); */
-}  
-
-.left_menu_item {
-	color:					rgba(255,255,255,.5);
-	font-size:				10px;
-	width:					70px;
-	margin:					0 5px;
-	height:					60px;
-	border-radius:			2px;
-	padding:				5px 0;
-	text-align:				center;
-	cursor:					pointer;    
-	display:				inline-block;
-}
-.left_menu_item:hover {
-	background:				rgba(0,0,0,.1);
-}
-.left_menu_item.selected {
-	background:				rgba(0,0,0,.15);
-}         
-.left_menu_item:first-child { 
-	margin-top:			   	10px;           
-} 
-.left_menu_item:last-child { 
-	margin-bottom:		   	10px;           
-}
-
-.left_menu_item_icn {
-	width:40px; height:40px;
-	margin:0px 15px;
-}
-#left_menu_item_icn_presets { background:url("images/icn-menu-presets.png"); }
-#left_menu_item_icn_horizontal { background:url("images/icn-menu-horizontal.png"); }
-#left_menu_item_icn_vertical { background:url("images/icn-menu-vertical.png"); }
-#left_menu_item_icn_groups { background:url("images/icn-menu-groups.png"); }
-#left_menu_item_icn_colors { background:url("images/icn-menu-colors.png"); }
-#left_menu_item_icn_filter { background:url("images/icn-menu-filter.png"); }
-#left_menu_item_icn_highlight { background:url("images/icn-menu-highlight.png"); }
-#left_menu_item_icn_search { background:url("images/icn-menu-search.png"); }
-#left_menu_item_icn_keywords { background:url("images/icn-menu-keywords.png"); }  
-#left_menu_item_icn_mosaic { background:url("images/icn-menu-mosaic.png"); }
-
-#left_menu_item_icn_preview { background:url("images/icn-menu-preview.png"); }
-#left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); }  
-#left_menu_item_icn_addfile { background:url("images/icn-menu-addfile.png"); }  
-#left_menu_item_icn_addnote { background:url("images/icn-menu-addnote.png"); }     
-#left_menu_item_icn_addlink { background:url("images/icn-menu-addlink.png"); }     
-
-.left_menu_item_title {
-	height:20px;
-	line-height:20px;
-}
-
-#left_menu .break {
-	width:40px; height:1px;
-	background:rgba(255,255,255,.2);
-	margin:5px 20px;
-}          
-
-#left_menu_item_btn_addfile {   
-	width:					70px;   
-	height:					70px;
-	margin:					-5px 0 0 0;
-	background:				red;
-	opacity:				0;       
-	position:				absolute; 
-	display:				block; 
-	cursor:					pointer !important;
+	height: 1px;
+	/*background: rgba(0,0,0,.25);
+	/*background: rgba(255,255,255,.1);  */
+	border-bottom: 1px solid rgba(0,0,0,.1);
+	margin: 1vh 0 0vh 0;
+	width: 100%;
+	display: none;
 }
 
-
 #video {
-	display:				inline-block;
-	vertical-align:			top;         
-}
-
-#flattentimeline {
-	width:					200px;
-	height: 		  		100%;
-	/*background-color:		#061619;  
-	background-color:		#FFF;*/  
-	display:				inline-block;
-	vertical-align:			top;
-	color:					white;  
-	overflow-x:				hidden;	
-	overflow-y:				scroll;	 
-	/*background:				red;        
-	background:				#092126;  
-	background:				#0F1C1E;      */
-}    
-#flattentimeline.drag  {
-	/*background:				rgba(2,212,255,.5);*/
-	box-shadow:				0 0 20px 20px rgba(63,223,255,.45) inset;
-}  
-.flattentimeline_item.draggable  {
-	background:				rgba(63,223,255,.25); 
-}
-
-#flattentimeline_highlight {
-	margin-bottom:			0px;
-}
- 
-
-#flattentimeline_main_title {             
-	font-weight:			200;
-	/*height:				40px;*/
-	line-height:			20px;
-	padding:				10px 0;
-	text-align:				center;
-	/*background:			#2C3032;*/
-	/*background:			#2C3033;*/
-	/*background:			#57A5AF;*/
-	background:				#EC8960;
-	/*background-image: -webkit-linear-gradient(left, #EC8960 0%, #57A5AF 100%);*/
-	/*background-image: -webkit-linear-gradient(left, #94CA6F 0%, #B495CC 100%);*/
-	text-transform:			uppercase;
-	color:					rgba(255,255,255,1);
-	font-size:				18px;
-	border-bottom:			2px solid #1B1D1E;
-}         
-#flattentimeline_settings {                
-	font-weight:			200;
-	height:					240px;
-	line-height:			40px;
-	text-align:				center;
-	background:				#26292B;
-	text-transform:			uppercase;
-	color:					#FFF;
-	font-size:				18px;
-	margin-top:				4px;
-	display:				none;
-}
-#flattentimeline_items {
-	width:					100%;
-	height:					100%;
-	overflow:				hidden;
-	overflow-y:				auto;
-	background-color:		rgba(255,255,255,.05);
-}
-.flattentimeline_item {
-	position:				relative;
-	height: 		  		40px; 
-	color:			  		white;
-	margin:					0px 0px; 
-	cursor:					pointer;                              
-	width:					100%;     
-	display:				none;  
-	/*border-radius:			2px;*/           
-}
- 
-
-.flattentimeline_highlightitem {
-	position:				relative;
-	/*height: 		  		150px;*/  
-	height: 		  		auto; 
-	color:			  		white;
-	margin:					3px 0px 0px 0px;
-	cursor:					pointer;
-	/*background:				rgba(255,255,255,.15);  */
-	width:					100%;   
-	text-align:				center;  
-	padding:				2px 0 3px 0;    
-	border-radius:			1px;  
-	
-	background-position:	center center;
-	background-repeat:		no-repeat; 
-    -webkit-background-size:cover;
-    -moz-background-size: 	cover;
-    -o-background-size: 	cover;
-    background-size: 		cover;     
-                                         
-	/*display:block;*/ 
-}  
-
- 
-.flattentimeline_item:hover, .flattentimeline_highlightitem:hover { 
-	background-color:   	rgba(255,255,255,.15);      
-	opacity:				1; 
-}
-
-.flattentimeline_opacifiant, .flattentimeline_bar {
-	top:					0px;
-	left:					0px;
-	width:					100%;
-	height:					100%;
-	position:				absolute;
-	background-position:	center center;
-	background-repeat:		no-repeat; 
-    -webkit-background-size:cover;
-    -moz-background-size: 	cover;
-    -o-background-size: 	cover;
-    background-size: 		cover;
-	text-align:				left;
-	overflow:				hidden; 
-	                           
-	/*border-radius:			3px;
-    /*mix-blend-mode: 		overlay;*/ 
-}
-.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter {
-	top:					0px;
-	left:					0px;
-	/*position:		 	   	absolute; */
-	background-position:	center center;
-	background-repeat:		no-repeat; 
-	text-align:				left;
-	overflow:				hidden; 
-	line-height:			20px;     
-}
-              
-
-.flattentimeline_item .flattentimeline_image {         
-	height:					30px;
-	width:					30px; 
-	margin:					4px 7px 4px 0px;
-	border-radius:			1px;     
-	background-color:		rgba(255,255,255,.25);
-	float:					left;
-	background-position:	center center;
-	background-repeat:		no-repeat; 
-    -webkit-background-size:cover;
-    -moz-background-size: 	cover;
-    -o-background-size: 	cover;
-    background-size: 		cover;      
-}                                       
-
-
-.flattentimeline_highlightitem .flattentimeline_image {         
-	height:					100%;
-	width:					100%; 
-	margin:					0;
-	border-radius:			1px;    
-	position:				absolute;       
-	background-position:	center center;
-	background-repeat:		no-repeat; 
-    -webkit-background-size:cover;
-    -moz-background-size: 	cover;
-    -o-background-size: 	cover;
-    background-size: 		cover;  
-	background-blend-mode: 		normal;    
-	opacity:				.5;
+	width: 80vw;
+	height: 100%;
 }
 
-/*.flattentimeline_highlightitem .flattentimeline_image {
-	width:					170px; 
-	height:					60px;   
-	margin:					15px 15px 5px 15px;    
-	border-radius:			2px;                       
-	background-color:		#fff;   
-	display:				inline-block;  
-	float:					left; 
-	background-position:	center center;          
-}  */
-
-/*.flattentimeline_color {
-	top:					0px;
-	height:					100%;
-}*/
-.flattentimeline_opacifiant, .flattentimeline_bar {
-	background-color:		rgba(0, 0, 0, 0.75);  
-	height:					3px;
-	top:					37px;      
-	                                       
-   /* box-shadow:				0px 0px 1px 1px rgba(20,46,51,.25);
-/*	mix-blend-mode: 		luminosity;  */
-	
-  /*  mix-blend-mode: multiply;
-  /*  height:					40px;
-	top:					0px; 
-	opacity:				.25;  */
-}  
-.flattentimeline_highlightitem .flattentimeline_bar, .flattentimeline_highlightitem  .flattentimeline_opacifiant  {
-	top:					auto;   
-	display:				block;   
+.vjs-big-play-button {
+	border-radius: 100% !important;
+	border: none !important;
+	color: #fff !important;
+	background: rgba(0,0,0,.5) !important;
+	height: 50px !important;
+	width: 50px !important;
+	line-height: 50px !important;
+	margin-left: -25px !important;
+	margin-top: -25px !important;
 }
 
-.flattentimeline_title {                   
-	font-weight:			400;
-	font-size:				10px;  
-	line-height:			39px;   
-   /* color:					rgba(255,255,255,.5); */
-
-	/*width:					55%; */
-	max-width: 					132px;
-	text-overflow: 			ellipsis;
-	white-space: 			nowrap; 
-	overflow: 				hidden;    
-	
-	display:				inline-block; 
-	/*color:					#0C2D33; */    
-	/*mix-blend-mode: 		screen;      */
-}  
-
-.flattentimeline_highlightitem .flattentimeline_title {    
-	line-height:			1.2em; 
-	width: 					170px;  
-	font-size:				12px;      
-	text-transform:			uppercase;
-	padding:				20px 0 20px 0; 
-	color:					#FFF;/*rgba(255,255,255,1);*/
-	font-weight:			600; 
-}           
-
-.flattentimeline_highlightitem .flattentimeline_description {    
-	font-weight:			400;
-	font-size:				11px;  
-	line-height:			1.4em;   
-	color:					rgba(255,255,255,.9);    
-	margin:					-15px 15px 20px 15px;  
-	  
-	width: 					170px;  
-	text-align:				left;          
-	
-	display:				inline-block;
-} 
-
-.flattentimeline_highlightitem .flattentimeline_typeTxt, .flattentimeline_highlightitem .flattentimeline_author {    
-	font-weight:			400;
-	font-size:				9px;  
-	line-height:			1.2em;                  
-	margin:					-13px 15px 20px 15px;  
-	  
-	width: 					170px;  
-	text-align:				left;   
-	color:					rgba(255,255,255,.75);    
-	
-	display:				inline-block;   
-	font-style:				italic;   
-	/*text-transform:			uppercase; */
-}
-.flattentimeline_highlightitem .flattentimeline_author {    
-	font-style:				normal;   
+.vjs-marker {
+	border: none !important;
+	border-radius: 0 !important;
+	width: 2px !important;
+	margin: 0 !important;
 }
 
-.flattentimeline_subtitle {
-	font-family:			"OpenSans";   
-	font-weight:			200;
-	top:					25px;
-	font-size:				10px;
-	left: 					40px;
-	line-height:			20px;
-	height:					20px;
-	display:				none;
+.vjs-tip {
+	margin-bottom: 40px !important;
+	font-weight: 500 !important;
 }
-/*.flattentimeline_type {
-	top:					14px;
-	left:					6px;
-	width:					26px;
-	height:					26px;
-	background-position:	center center;
-	background-repeat:		no-repeat;
-	opacity:				.5;
-}*/
-/*.flattentimeline_type {
-	width:10px; height:10px;
-	border-radius:10px;
-	float:right;
-	margin:20px 15px 20px 0;
-}*/
-.flattentimeline_type {
-	width:					20px; 
-	height:					20px;
-	/*border-radius:			20px; */
-	float:					right;
-	background-position:	center center;
-	background-repeat:		no-repeat;
-	margin:					9px 5px;
-	opacity:				0.75;
-	display: none;
-}                 
-
-.flattentimeline_highlightitem .flattentimeline_type {  
-	width:					40px; 
-	height:					40px;
-	position:				absolute;
-	border-radius:			30px;
-	background-color:		rgba(0,0,0,.5);
-	margin:					25px 0 0 80px; 
-}   
 
-.flattentimeline_color {
-	width:					6px; 
-	height:					6px;
-	border-radius:			10px;
-	float:					right;
-	margin:					22px 5px;
-}
-.flattentimeline_counter {
-	font-weight:			600;
-	top:					5px;
-	left:					5px;
-	width:					40px;
-	height:					40px;
-	line-height:			38px;
-	border-radius:			2px;
-	
-	background-color:		#000;
-	
-	font-size:				18px;
-	text-align: 			center; 
-	display:				none;
-}
-.flattentimeline_bar {
-	/*width: 			  	0%;*/
-	background-color:		#26292B;	/*#2DCAE1;*/
-	opacity:				1;
-}    
-
-.docLive {
-	opacity:				1;  
-	display:				block;
-}     
-
-.docTocome {
-	opacity:				0.1;                
-	display:				block;
-}
-
-.docFaraway {
-	opacity:				0.1;                 
-	display:				block;
-}           
-
-
-
-
-
-     
-.vjs-big-play-button {                        
-	border-radius:			100% !important;
-	border:					none !important;
-	color:					#fff !important; 
-	background:				rgba(0,0,0,.5) !important;  
-	height:					50px !important;
-	width:					50px !important;
-	line-height:			50px !important;
-	margin-left:			-25px !important;
-	margin-top:				-25px !important;
-}
-
-.vjs-marker {                         
-	border:					none !important; 
-	border-radius:			0 !important; 
-	width:					2px !important; 
-	margin:					0 !important;
-}
-.vjs-tip {                         
-	margin-bottom:			40px !important;  
-	font-weight:			500 !important; 
-}
-.vjs-mouse-display {                         
-	/*z-index:				1 !important; */
+.vjs-mouse-display {
+	/*z-index: 1 !important; */
 }
 
 .editmode {
-	display:none !important;   
+	display:none !important;
 	width:0 !important;
-}      
+}
 
 @media screen and (min-width: 1001px) {
-  	#watermark {                  
-		display:			none;              
+	#watermark {
+		display: none;
 	}
 	/*#projectInfoBtn {
-		position:			absolute;
-		display:			none;
-		}*/
+	position: absolute;
+	display: none;
+	}*/
 }
 
 @media screen and (max-width: 1000px) {
-  	#watermark {                  
-		width:				40px; 
-		height:				40px;
-		position:			absolute;
-		z-index:			100000;     
-		bottom:				50px;
-		left:				20px; 
-		opacity:			.5;                 
+	#watermark {
+		width: 40px;
+		height: 40px;
+		position: absolute;
+		z-index: 100000;
+		bottom: 50px;
+		left: 20px;
+		opacity: .5;
 	}
-	#watermark:hover {   
-	    opacity:			1;  
+
+	#watermark:hover {
+		opacity: 1;
 	}
-	
+
 	/*#projectInfoBtn {
-		width:				30px; 
-		height:				30px;
-		background:			#FFF;  
-		position:			absolute;
-		z-index:			100000;   
-		top:				20px; 
-		left:				20px;
-		opacity:			.25;  
-		border-radius:		200px;    
-		font-family:		serif;
-		font-style:			italic;
-		font-weight:		bold;
-		color:				#000;   
-		font-size:			24px;  
-		text-align:			center;   
-		line-height:		30px;   
-		cursor:				pointer;
-	}    
-	#projectInfoBtn:hover {   
-	    opacity:			.5;  
+	width: 30px;
+	height: 30px;
+	background: #FFF;
+	position: absolute;
+	z-index: 100000;
+	top: 20px;
+	left: 20px;
+	opacity: .25;
+	border-radius: 200px;
+	font-family: serif;
+	font-style: italic;
+	font-weight: bold;
+	color: #000;
+	font-size: 24px;
+	text-align: center;
+	line-height: 30px;
+	cursor: pointer;
+	}
+	#projectInfoBtn:hover {
+	opacity: .5;
 	}*/
 }
 
 #projectInfoBtn {
-	width:				30px; 
-	height:				30px;
-	background:			#FFF;  
-	position:			absolute;
-	z-index:			100000;   
-	top:				20px; 
-	left:				20px;
-	opacity:			.25;  
-	border-radius:		200px;    
-	font-family:		serif;
-	font-style:			italic;
-	font-weight:		bold;
-	color:				#000;   
-	font-size:			24px;  
-	text-align:			center;   
-	line-height:		30px;   
-	cursor:				pointer;
-}    
-#projectInfoBtn:hover {   
-    opacity:			.5;  
+	width: 30px;
+	height: 30px;
+	background: #FFF;
+	position: absolute;
+	z-index: 100000;
+	top: 20px;
+	left: 20px;
+	opacity: .25;
+	border-radius: 200px;
+	font-family: serif;
+	font-style: italic;
+	font-weight: bold;
+	color: #000;
+	font-size: 24px;
+	text-align: center;
+	line-height: 30px;
+	cursor: pointer;
 }
 
-#openFullScreen {                  
-	width:				30px; 
-	height:				30px; 
-	min-width:			25px; 
-	min-height:			25px;
-	position:			absolute;
-	z-index:			100000;   
-	bottom:				40px; 
-	right:				220px; 
-	opacity:			.5;    
-	display:			none;             
+#projectInfoBtn:hover {
+	opacity: .5;
 }
-#openFullScreen:hover {   
-    opacity:			1;  
-}
-   
-                        
 
-.displayMode {
-   /* display:			none;   */
+#openFullScreen {
+	width: 30px;
+	height: 30px;
+	min-width: 25px;
+	min-height: 25px;
+	position: absolute;
+	z-index: 100000;
+	bottom: 40px;
+	right: 220px;
+	opacity: .5;
+	display: none;
 }
 
-
-
-.video-js:not(.resized) {
-	width:		100vw;
-	height:		100vh;
+#openFullScreen:hover {
+	opacity: 1;
 }
 
-                 
-
-
-
-
+.displayMode {
+	/* display: none;   */
+}
diff --git a/capsule-prototype/css/popup.css b/capsule-prototype/css/popup.css
new file mode 100644
index 0000000000000000000000000000000000000000..8dc528e120ffd1579efbee467872d398e362e2aa
--- /dev/null
+++ b/capsule-prototype/css/popup.css
@@ -0,0 +1,714 @@
+
+
+#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace {
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,.25);
+	position: absolute;
+	z-index: 10000000;    	
+	text-align: center;
+	display: none;
+	top: 0px;
+}
+
+#popupAlertSpace {
+	z-index: 100000000;
+}
+
+/*#popupSettings {
+width: 40vw;
+margin-top: 25vh;
+padding: 5vh 0 6vh 0;
+border-radius: 2px;
+box-shadow: 0 5px 25px #000;
+font-weight: 400;
+font-size: 1vw;
+display: inline-block;
+text-align: center;
+background: #243538;
+}    */
+
+#popupSettings {
+	margin-top: 15vh;
+	border-radius: 2px;
+	box-shadow: 0 5px 25px #000;
+	font-weight: 400;
+	font-size: 1vw;
+	display: inline-block;
+	text-align: left;
+	background: #243538;
+}
+
+#popupSettingsLeft {
+	width: 25vw;
+	min-height: 50vh;
+	padding: 6vh 3vw 6vh 3vw;
+	vertical-align: top;
+	background: rgba(0,0,0,.15);
+}
+
+#popupSettingsRight {
+	width: 18vw;
+	min-height: 50vh;
+	padding: 6vh 0 6vh 0;
+	vertical-align: top;
+	text-align: center;
+	border-radius: 2px 0 0 2px;
+
+	background: var(--rk-light-blue);
+	background: -o-linear-gradient(left bottom,  rgba(20,46,51,1) 0%, var(--rk-light-blue) 100%);
+	background: -moz-linear-gradient(left bottom,  rgba(20,46,51,1) 0%, var(--rk-light-blue) 100%);
+	background: -webkit-linear-gradient(left bottom,  rgba(20,46,51,1) 0%, var(--rk-light-blue) 100%);
+}
+
+.popupSettingsBtn {
+	font-weight: 400;
+	color: rgba(255,255,255,.75);
+	font-size: 0.6em;
+	cursor: pointer;
+	text-transform: uppercase;
+	text-align: center;
+	display: inline-block;
+	bottom: 0;
+	margin: 1vh 0 1vh 0;
+	line-height: 1.2em;
+	padding: 1.2em 2.4em 1.2em 2.4em;
+	padding: 1.2em 0;
+	width: 9vw;
+	border-radius: 3px;
+	border: 1px solid rgba(255,255,255,.15);
+
+}
+
+.popupSettingsBtn:hover {
+	background: rgba(255,255,255,.05);/*rgba(20,46,51,.75);/*rgba(20,46,51,.75);  */
+	color: #fff;
+}
+
+.popupSettingsA {
+	font-weight: 400;
+	color: rgba(255,255,255,.5);
+	font-size: .8em;
+	cursor: pointer;
+	text-align: center;
+	display: inline-block;
+	text-decoration: underline;
+	bottom: 0;
+	margin: 1vh 0;
+	line-height: 1.2em;
+	padding: 1.2em 0;
+	width: 9vw;
+}
+
+.popupSettingsA:hover {
+	color: rgba(255,255,255,.75);
+}
+
+.popupSettingsTxt {
+	font-weight: 200;
+	width: 25vw;
+	display: inline-block;
+	margin-bottom: 1vh;
+	font-size: .9em;
+	line-height: 1.2em;
+	color: rgba(255,255,255,.75);
+	padding: .5vh 0 .5vh 0;
+	cursor: pointer;
+}
+
+.popupSettingsLabel {
+	color: rgba(255,255,255,.25);
+	font-size: .9em;
+}
+
+.popupSettingsInput {
+	width: 23vw;
+	display: inline-block;
+	margin-bottom: 1vh;
+	font-size: .9em;
+	line-height: 1.2em;
+
+	font-weight: 200;
+
+	background: rgba(0,0,0,.05);
+	box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
+	border: 0;
+	border-radius: 3px;
+	color: rgba(255,255,255,.85);
+	padding: .5vh .5vw;
+	display: none;
+}
+
+#popupSettingsTitle {
+	text-transform: uppercase;
+	font-size: 1.2em;
+	padding: 0 0 1vh 0;
+}
+
+#popupSettingsTitleInput {
+	font-size: 1.2em;
+}
+
+#popupSettingsCredits, #popupSettingsCreationDate {
+}
+
+#popupAlert {
+	width: 46vw;
+	background: #142E33;/*rgb(50,50,50); */
+	/*margin: 20vh 0 0 0;  */
+	padding: 5vh 2vw;
+	border-radius: 3px;
+	box-shadow: 0 5px 25px #000;
+	font-weight: 400;
+	font-size: 1vw;
+	display: inline-block;
+	text-align: center;
+	color: rgba(255,255,255,.75);
+}
+
+#popupAlertMessage {
+	font-size: .9em;
+	font-weight: 200;
+}
+
+#popupAlertInput, #popupAlertTextarea {
+	background: rgba(0,0,0,.05);/*gba(255,255,255,.15);*/
+	box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
+	border: 0;
+	border-radius: 3px;
+	color: rgba(255,255,255,.85);
+	width: 30vw;
+
+	display: inline-block;
+
+	font-weight: 200;
+	font-size: 0.9em;
+	cursor: pointer;
+	padding-bottom: 0;
+
+	line-height: 1.4em;
+	padding: 2vh 1vw;
+
+	margin: 3vh 0 1.5vh 0;
+}
+
+#popupAlertButtons, #popupAddLinkButtons {
+	width: 100%;
+	text-align: center;
+}
+
+.popupAlertButton, .popupAddLinkButton, .popupSettingsButton {
+	width: 9vw;
+
+	font-weight: 400;
+	/*  color: rgba(255,255,255,.75);  */
+	font-size: 0.7em;
+	line-height: 1.2em;
+
+	cursor: pointer;
+	text-transform: uppercase;
+	text-align: center;
+	display: inline-block;
+	/*   border: 1px solid rgba(255,255,255,.15); */
+	border-radius: 3px;
+	padding: 1.1em 0;
+
+	color: rgba(255,255,255,.5);
+	background: rgba(255,255,255,.15);
+	box-shadow: 0 1px 3px rgba(0,0,0,.1);
+
+	margin: 3vh 1vw 0vh 1vw !important;
+	font-family: 'OpenSans' !important;
+}
+
+.popupAlertButton:hover, .popupAddLinkButton:hover, .popupSettingsButton:hover {
+	background: rgba(255,255,255,.05);
+	color: #fff
+}
+
+#popupAlertButtonOk, #popupAlertButtonYesdelete, #popupAlertButtonCancel, #popupAlertButtonYesdeleteproject  {
+	display: inline-block;
+}
+
+#popupAddLink {
+
+	width: 40vw;
+	/*background: rgb(102,202,138);
+	/*background: rgb(100,100,100);*/
+	margin-top: 25vh;
+	padding: 5vh 0 6vh 0;
+	/*left: 20%;
+	position: absolute;  */
+border-radius: 2px;
+/*border: 2px solid #333;*/
+box-shadow: 0 5px 25px #000;
+font-weight: 400;
+font-size: 1vw;
+display: inline-block;
+text-align: center;
+background: #243538;
+/*background-image: -webkit-linear-gradient(right bottom,  rgb(20,46,51) 0%, #475457 150%);
+/*box-shadow: 0px 0px 2px 3px rgba(255,255,255,.1) inset;  */
+
+}
+
+#popupAddLinkMessage, #popupMosaicMessage {
+	font-weight: 100;
+	color: rgba(255,255,255,.75);
+	text-align: center;
+	display: inline-block;
+	font-size: 1em;
+	width: 30vw;
+	margin: 0vh 0vw 2vh 0vw !important;
+}
+
+#popupAddLinkInput {
+	background: rgba(0,0,0,.05);/*gba(255,255,255,.15);*/
+	box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
+	border: 0;
+	border-radius: 3px;
+	color: rgba(255,255,255,.85);
+	width: 30vw;
+	display: inline-block;
+
+	font-weight: 200;
+	font-size: 0.9em;
+	cursor: pointer;
+	padding-bottom: 0;
+
+	line-height: 1.2em;
+	padding: 1.0em 1vw;
+
+	margin: 2vh 0 1.5vh 0;
+}
+
+
+#popupEdit {
+	margin-top: 15vh;
+	border-radius: 2px;
+	box-shadow: 0 5px 25px #000;
+	font-weight: 400;
+	font-size: 1vw;
+	display: inline-block;
+	text-align: left;
+	background: #243538;
+}
+
+#popupLeft {
+	width: 18vw;
+	min-height: 50vh;
+	padding: 5vh 0 3vh 0;
+	vertical-align: top;
+	text-align: center;
+	background: rgba(0,0,0,.15);
+	border-radius: 2px 0 0 2px;
+}
+
+#popupRight {
+	width: 25vw;
+	min-height: 50vh;
+	padding: 5vh 3vw 4vh 3vw;
+	vertical-align: top;
+	background: rgba(0,0,0,.15);
+}
+
+#popupEdit tr, #popupEdit td {
+	background: rgba(0,0,0,.15);
+}
+
+.popupLeftItem {
+	width: 100%;
+	text-align: center;
+	display: inline-block;
+}
+
+.popupLeftButton {
+	font-weight: 400;
+	color: rgba(0,0,0,.35);
+	background: rgba(255,255,255,.15);
+	box-shadow: 0 1px 3px rgba(0,0,0,.1);
+	border-radius: 3px;
+	font-size: 1.0em;
+	line-height: 2.0em;
+	padding: 0 4%;
+	cursor: pointer;
+	text-transform: uppercase;
+	display: inline-block;
+	margin-top: 1vh;
+}
+
+.popupLeftButton:hover {
+	background: rgba(255,255,255,.35);
+}
+
+#popupImgBox {
+	margin-bottom: 3vh;
+	cursor: pointer;
+	height: 100%;
+}
+
+#popupImg {
+	max-width: 15vw;
+	max-height: 15vw;
+	background: rgba(255,255,255,.1);
+	display: inline-block;
+	border-radius: 3px;
+	box-shadow: 0 1px 3px rgba(0,0,0,.35);
+}
+
+#closePopupEdit {
+	width: 40px;
+	height: 40px;
+	font-weight: 200;
+	color: rgba(255,255,255,.25);
+	font-size: 30px;
+	text-align: center;
+	line-height: 40px;
+	cursor: pointer;
+	border-radius: 3px;
+	position: fixed;
+	top: 15vh;
+	right: 25.5vw;
+	z-index: 110;
+}
+
+#closePopupMosaic {
+	width: 40px;
+	height: 40px;
+	font-weight: 200;
+	color: rgba(255,255,255,.25);
+	font-size: 30px;
+	text-align: center;
+	line-height: 40px;
+	cursor: pointer;
+	border-radius: 3px;
+	position: fixed;
+	top: 2vh;
+	right: 34vw;
+	z-index: 110;
+}
+
+#closePopupEdit:hover, #closePopupMosaic:hover {            	
+	color: rgba(255,255,255,.75);
+}
+
+.popupRightItem {
+	width: 25vw;
+	display: inline-block;
+	margin-bottom: 1vh;
+	font-size: 1.2em;
+	line-height: 1.2em;
+	color: rgba(255,255,255,.75);
+}
+
+.popupInput {
+	background: rgba(0,0,0,.25);
+	box-shadow: 0 1px 3px rgba(0,0,0,.5) inset;
+	border: 0;
+	border-radius: 3px;
+	color: rgba(255,255,255,.85);
+	width: 25vw;
+	padding: 0 2%;
+	display: inline-block;
+	display: none;
+}
+
+#popupType {
+	font-size: 0.8em;
+	font-weight: 400;
+	color: #FFF;
+	display: inline-block;
+	margin: 3vh 0 0 0;
+}
+
+#popupNom {
+	font-weight: 400;
+	font-size: 1.2em;
+	color: #FFF;
+	cursor: pointer;
+	padding: 0;
+	line-height: 1.2em;
+	text-transform: uppercase;
+	margin-bottom: 1.5vh;
+}
+
+#popupNomInput {
+	font-weight: 200;
+	font-size: 1.2em;
+	cursor: pointer;
+	padding-bottom: 0;
+	line-height: 1.6em;
+}
+
+#popupTC {
+	font-size: 1em;
+	line-height: 1.8em;
+	box-shadow: 0 1px 3px rgba(0,0,0,.15);
+	padding: 0;
+	border-radius: 2px;
+	cursor: pointer;
+	text-align: center;
+	margin-bottom: 3vh;
+	font-weight: 600;
+}
+
+#popupTCin {
+	float: left;
+	color: #142E33;
+	margin-left: 3%;
+}
+
+#popupTCout {
+	float: right;
+	color: #142E33;
+	margin-right: 3%;
+}
+
+#popupTC:hover {
+	/*background: rgba(255,255,255,.25);*/
+	background: rgba(255,255,255,.1);
+}
+
+.popupTClabel {
+	width: 4vw;
+	padding-right: 0.5vw;
+	text-align: right;
+	display: inline-block;
+	font-size: 0.8em;
+	text-transform: uppercase;
+}
+
+#popupTCedit {
+	font-size: 1.0em;
+	line-height: 1.2em;
+	margin-bottom: 5%;
+	font-weight: 200;
+	/*background: rgba(0,0,0,.05);  */
+	/*background: rgba(255,255,255,.05); */
+	background: none;
+	border: 1px solid #000;
+	padding: 1vh 0;
+	color: rgba(255,255,255,.5);
+	display: none;
+}
+
+.popupTCeditfield {
+	background: rgba(0,0,0,.25);/*gba(255,255,255,.15);*/
+	box-shadow: 0 1px 3px rgba(0,0,0,.5) inset;
+	border: 0;
+	border-radius: 3px;
+	color: rgba(255,255,255,.85);
+	width: 1.5vw;
+	padding: 0 2%;
+	display: inline-block;
+	font-size: 1.0em;
+	line-height: 1.8em;
+	text-align: center;
+}
+
+.nowTCbtn {
+	text-decoration: underline;
+	padding: 0 1%;
+	display: inline-block;
+	color: rgba(255,255,255,.75);
+	cursor: pointer;
+	font-size: 0.8em;
+	font-weight: 500;
+}
+
+.TCvalidBtn {
+	padding: 0 1%;
+	margin: 0 1%;
+	float: right;
+	line-height: 1.8em;
+	color: rgba(255,255,255,.75);
+	cursor: pointer;
+}
+
+#popupLegende {
+	cursor: pointer;
+	font-weight: 200;
+	line-height: 1.2em;
+	font-size: 0.9em;
+	padding: 0;
+	margin: 0 0 2vh 0;
+	/*font-style: italic; */
+}
+
+#popupLegendeInput {
+	font-weight: 200;
+	min-height: 10vh;
+	cursor: pointer;
+	padding: 2%;
+	margin-bottom: 3%;
+	font-size: 1.0em;
+	line-height: 1.2em;
+}
+
+
+#popupAuthorInput, #popupLinkInput {
+	font-weight: 200;
+	height: 1.2em;
+	cursor: pointer;
+	padding: 2%;
+	margin-bottom: 3%;
+	font-size: 1.0em;
+	line-height: 1.2em;
+}
+
+
+
+
+#popupLink {
+	cursor: pointer;
+	font-weight: 200;
+	line-height: 1.2em;
+	font-size: 0.9em;
+	padding: 0;
+	margin: 0 0 2vh 0;
+	color: rgba(255,255,255,.5);
+}
+
+#popupLink a:hover {
+	color: #fff;
+	text-decoration: underline;
+}
+
+#popupAuthor {
+	cursor: pointer;
+	font-weight: 200;
+	line-height: 1.2em;
+	font-size: 0.9em;
+	padding: 0;
+	margin: 0 0 3vh 0;
+}
+
+
+#popupSetHighlight {
+	font-weight: 400;
+	color: rgba(0,0,0,.75);/*#142E33;*/
+	font-size: 0.75em;
+	cursor: pointer;
+	text-transform: uppercase;
+	text-align: center;
+	margin: -3vh 2vh 2vh 2vh;
+	line-height: 2.0em;
+	/*background: rgba(255,255,255,.1);
+	/*background: rgba(0,0,0,.1);  */
+	padding: .8em 1.8em .8em 1.8em;
+	border-radius: 2px 0 0 0;
+}
+
+#popupSetHighlight.selected {
+	/*color: rgba(255,255,255,.75);
+	background: rgba(0,0,0,.15);        */
+/* background: rgba(255,255,255,.15);   */
+color: #FFF;
+}
+
+#popupSetHighlight:hover {
+	/*background: rgba(0,0,0,.25);
+	color: #FFF;   */
+/*background: rgba(255,255,255,.2);  */
+color: rgba(255,255,255,.25);  /*#142E33;  */
+}
+
+#popupSetHighlight.selected:hover {
+	/*color: rgba(255,255,255,.75);
+	background: rgba(0,0,0,.15);        */
+/*background: rgba(255,255,255,.25);    */
+color: rgba(255,255,255,.75);   /*#FFF; */
+}
+
+
+#popupEditSupprimer {
+	font-weight: 400;
+	color: rgba(255,255,255,.75);/*#142E33;/*#FFF;/*rgba(255,255,255,.5); */
+	font-size: 0.6em;
+	cursor: pointer;
+	text-transform: uppercase;
+	text-align: center;
+	display: inline-block;
+	bottom: 0;
+	margin: 2vh 0 1vh 0;
+	line-height: 1.2em;
+	/*background: #142E33;/*rgba(20,46,51,.8);/*rgba(0,0,0,.2);   */
+	/*background-image: -webkit-linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.10) 100%);   */
+	padding: 1.2em 2.4em 1.2em 2.4em;
+	padding: 1.2em 0;
+	width: 9vw;
+	border-radius: 3px;
+	border: 1px solid rgba(255,255,255,.15);
+	/*border-bottom: 1px solid #142E33;   */
+}
+
+#popupEditSupprimer:hover {
+	background: rgba(255,255,255,.05);/*rgba(20,46,51,.75);/*rgba(20,46,51,.75);  */
+	color: #fff
+}
+
+@media screen and (max-width: 1000px) {
+	#popupEdit {
+		margin-top: 5vh;
+		font-size: 2.4vw;
+	}
+	#popupLeft {
+		width: 30vw;
+		min-height: 60vh;
+		padding: 5vh 0 3vh 0;
+	}
+	#popupRight {
+		width: 56vw;
+		min-height: 60vh;
+		padding: 5vh 3vw 4vh 3vw;
+	}
+	#popupImg {
+		max-width: 25vw;
+		max-height: 25vw;
+	}
+	#closePopupEdit {
+		top: 5vh;
+		right: 4vw;
+		z-index: 110;
+	}
+	.popupRightItem {
+		width: 56vw;
+		margin-bottom: 2vh;
+		font-size: 1em;
+		line-height: 1.2em;
+	}
+}
+
+
+@media screen and (max-width: 1000px) {
+	#popupEdit {
+		margin-top: 5vh;
+		font-size: 2.4vw;
+	}
+	#popupLeft {
+		width: 30vw;
+		min-height: 60vh;
+		padding: 5vh 0 3vh 0;
+	}
+	#popupRight {
+		width: 56vw;
+		min-height: 60vh;
+		padding: 5vh 3vw 4vh 3vw;
+	}
+	#popupImg {
+		max-width: 25vw;
+		max-height: 25vw;
+	}
+	#closePopupEdit {
+		top: 5vh;
+		right: 4vw;
+		z-index: 110;
+	}
+	.popupRightItem {
+		width: 56vw;
+		margin-bottom: 2vh;
+		font-size: 1em;
+		line-height: 1.2em;
+	}
+}
+
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index cf06a103a947121e72f8400440510a3fb8f6f9ba..acdd48571737bcbdc4247225a7af438bb9a73928 100644
--- a/capsule-prototype/index.html
+++ b/capsule-prototype/index.html
@@ -4,7 +4,7 @@
 	<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
 	<meta http-equiv="Content-Language" content="fr">
 	<meta name="language" content="fr">
-	<meta name="designer" content="buzzing light">  
+	<meta name="designer" content="buzzing light">
 	<meta name="copyright" content="buzzing light">
 	<meta name="HandheldFriendly" content="true" />
 	<meta name="viewport" content="width=device-width, user-scalable=no"><!--, minimum-scale=1.0, maximum-scale=1.0-->
@@ -17,17 +17,15 @@
 	<link href="../shared/css/all.min.css" rel="stylesheet" />
 
 	<title>MemoRekall</title>
-	
-    <script language="javascript" type='text/javascript' src='../shared/js/libs/jquery.min.js'></script>
-    <script language="javascript" type='text/javascript' src='../shared/js/libs/jquery-migrate.js'></script>
+
+	<script language="javascript" type='text/javascript' src='../shared/js/libs/jquery.min.js'></script>
+	<script language="javascript" type='text/javascript' src='../shared/js/libs/jquery-migrate.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/libs/url.min.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/libs/tinycolor.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/libs/sha1.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/libs/fastdom.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/libs/moment-with-langs.min.js'></script>
 
-	<script type="module" src="../shared/php/rekallApp.js.php"></script>
-
 	<script language="javascript" type='text/javascript' src='../shared/js/rekall/Utils.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/online-rekall/Rekall.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/rekall/Source.js'></script>
@@ -40,6 +38,7 @@
 
 	<script language="javascript" type='text/javascript' src='../shared/js/iannix.js'></script>
 	<script language="javascript" type='text/javascript' src='../shared/js/online-script.js'></script>
+	<script type="module" src="../shared/php/rekallApp.js.php"></script>
 
 	<script language="javascript" type='text/javascript' src="../shared/js/libs/video-js/video.min.js"></script>
 	<link        rel="stylesheet" type="text/css"       href="../shared/js/libs/video-js/video-js.min.css" />
@@ -72,191 +71,188 @@
 			window.PubSub = PubSub;
 		}
 	</script>
-	
+
 	<link rel="stylesheet" type="text/css" href="../shared/css/online-theme.css" />
 </head>
-<body>     
-	
-		       
-	<div id='container'>  
-		<div id="ruban"></div>     
-	   <!-- <div id="popupFormSpace">   
-			<div id="popupForm">                                                    
-				<div id="popupFormMessage"></div>                  
-				<div class="popupFormButton" id="popupFormButtonCancel">Cancel</div> 
-			    <input class="popupFormButton" id="popupFormButtonUpload" type="submit" value="Upload" name="submit">   
-			</div>  
-		</div>     -->   
-		<a class="displayMode" id="watermarkBox" href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)" title="Open in MemoRekall" target="_parent"><img id="watermark" src="../shared/css/images/watermark.png" /></a>
-		<!--<a class="displayMode" id="openFullScreenBox" href="http://www.memorekall.fr" alt="Open in MemoRekall" target="_blank"><img id="openFullScreen" src="../shared/css/images/expand.png" /></a>-->
-		<div class="displayMode" id="projectInfoBtn" title="Project informations">i</div> 
-		<div id="popupAlertSpace">
-			<div id="popupAlert">    
-				<div id="popupAlertMessage"></div>
-				<input type="text" id="popupAlertInput" />
-				<textarea rows="5" id="popupAlertTextarea"></textarea>
-				<div id="popupAlertButtons">
-					<div class="popupAlertButton" id="popupAlertButtonOk">OK</div>
-					<div class="popupAlertButton" id="popupAlertButtonCancel">Cancel</div>
-					<div class="popupAlertButton" id="popupAlertButtonYesdelete">Delete</div>   
-					<div class="popupAlertButton" id="popupAlertButtonYesdeleteproject">Delete</div>
-				</div>  
+<body>
+
+
+<div id='container'>
+	<div id="ruban"></div>
+	<!-- <div id="popupFormSpace">
+         <div id="popupForm">
+             <div id="popupFormMessage"></div>
+             <div class="popupFormButton" id="popupFormButtonCancel">Cancel</div>
+             <input class="popupFormButton" id="popupFormButtonUpload" type="submit" value="Upload" name="submit">
+         </div>
+     </div>     -->
+	<a class="displayMode" id="watermarkBox" href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)" title="Open in MemoRekall" target="_parent"><img id="watermark" src="../shared/css/images/watermark.png" /></a>
+	<!--<a class="displayMode" id="openFullScreenBox" href="http://www.memorekall.fr" alt="Open in MemoRekall" target="_blank"><img id="openFullScreen" src="../shared/css/images/expand.png" /></a>-->
+	<div class="displayMode" id="projectInfoBtn" title="Project informations">i</div>
+	<div id="popupAlertSpace">
+		<div id="popupAlert">
+			<div id="popupAlertMessage"></div>
+			<input type="text" id="popupAlertInput" />
+			<textarea rows="5" id="popupAlertTextarea"></textarea>
+			<div id="popupAlertButtons">
+				<div class="popupAlertButton" id="popupAlertButtonOk">OK</div>
+				<div class="popupAlertButton" id="popupAlertButtonCancel">Cancel</div>
+				<div class="popupAlertButton" id="popupAlertButtonYesdelete">Delete</div>
+				<div class="popupAlertButton" id="popupAlertButtonYesdeleteproject">Delete</div>
 			</div>
 		</div>
-		<div id="popupAddLinkSpace">                        
-			<div id="popupAddLink">                          
-				<div id="popupAddLinkMessage">Add a link</div>                                      
-				<input id="popupAddLinkInput" type="text" value="" placeHolder="Paste URL here"/>     
-				<div id="popupAddLinkButtons">                                             
-					<div class="popupAddLinkButton" id="popupAddLinkButtonCancel">Cancel</div>
-					<div class="popupAddLinkButton" id="popupAddLinkButtonOk">Add Link</div>    
-				</div>
+	</div>
+	<div id="popupAddLinkSpace">
+		<div id="popupAddLink">
+			<div id="popupAddLinkMessage">Add a link</div>
+			<input id="popupAddLinkInput" type="text" value="" placeHolder="Paste URL here"/>
+			<div id="popupAddLinkButtons">
+				<div class="popupAddLinkButton" id="popupAddLinkButtonCancel">Cancel</div>
+				<div class="popupAddLinkButton" id="popupAddLinkButtonOk">Add Link</div>
 			</div>
-		</div>  
-		<div id="popupMosaicSpace">                        
-			<div id="popupMosaic">                          
-				<div id="popupMosaicMessage">Notes and documents</div>                                      
-				<div id="closePopupMosaic">&#10005;</div> 
-				<div id="popupMosaicMosaic"></div>
-			</div>
-		</div>  
-		<div id="popupSettingsSpace">  
-			<table id="popupSettings">  
-				<tr>
-					<td id="popupSettingsLeft">                       
-						<div class="popupSettingsTxt" id="popupSettingsTitleDiv" title="Project title"><span class="popupSettingsLabel" id="popupSettingsTitleLabel">Project</span>&nbsp;&nbsp;<span id="popupSettingsTitle"></span></div>   
-						<input class="popupSettingsInput" id="popupSettingsTitleInput" type="text"></input>
-						 
-						<div class="popupSettingsTxt" id="popupSettingsAuthorDiv" title="Project author"><span class="popupSettingsLabel" id="popupSettingsAuthorLabel">By</span>&nbsp;&nbsp;<span id="popupSettingsAuthor"></span></div>     
-						<input class="popupSettingsInput" id="popupSettingsAuthorInput" type="text"></input>
-						
-						<div class="popupSettingsTxt" id="popupSettingsEmailDiv" title="Project author email"><span class="popupSettingsLabel" id="popupSettingsEmailLabel">@</span>&nbsp;&nbsp;<span id="popupSettingsEmail"></span></div>  
-						<input class="popupSettingsInput" id="popupSettingsEmailInput" type="text"></input>
-						            
-						<div class="popupSettingsTxt" id="popupSettingsCreditsDiv" title="Project credits"><span class="popupSettingsLabel" id="popupSettingsCreditsLabel">Credits</span><br/><span id="popupSettingsCredits"></span></div> 
-						<textarea rows="3" class="popupSettingsInput" id="popupSettingsCreditsInput" type="text"></textarea> 
-					</td>
-					<td id="popupSettingsRight">                                      
-						<div class="popupSettingsBtn" id="popupSettingsBtnShare">Share</div>        
-						<div class="popupSettingsBtn" id="popupSettingsBtnEmbed">Embed</div>    
-						<div class="popupSettingsBtn editmode" id="popupSettingsBtnDownloadXml">Download XML</div>    
-						<a class="popupSettingsA" href="http://www.memorekall.com" target="_blank">www.memorekall.com</a>
-						
-				   <!-- 	<input id="popupSettingsShare" type="text" value="http://projects.rekall.com/monprojet" placeHolder=""/>  
-						<textarea id="popupSettingsEmbed" type="text"></textarea>  
-						<div id="popupSettingsDownloadXml">Download project XML</div>     -->
-					</td>
-				</tr>
-			</table>
 		</div>
-		<div id="popupSpace">  
-			<table id="popupEdit">  
-				<tr>
-					<td id="popupLeft">            
-						<div class="editmode" id="popupSetHighlight">&#9733;&nbsp;Highlight</div>                                               
-						<div class="popupLeftItem" id="popupImgBox">
-							<img id="popupImg" src="file/rekall_cache/568261E53001FA741A069C684C6E25E7571006E8-45972424CDE1275C6FDD9DD7D52216C878F04AB8.jpg"/>
-							<div class="popupLeftItem" id="popupType"></div>  
-						</div>          
-						<!--<div class="popupRightItem separationHDark editmode"></div>-->         
-						<div class="editmode" id="popupEditSupprimer">Delete file</div>                                                       
-					</td>   
-					<td id="popupRight">    
-						<div id="closePopupEdit">&#10005;</div> 
-						
-						<div class="popupRightItem" id="popupNom"></div> 
-						<input class="popupInput" id="popupNomInput" type="text" value=""/>  
-						
-						<div class="popupRightItem" id="popupAuthor" title="Author"></div>
-						<input class="popupInput" id="popupAuthorInput" type="text"></input> 
-						                                                                               
-						<div class="popupRightItem" id="popupTC">
-							<div class="popupTCdisplay" id="popupTCin"></div>
-							<div class="popupTCdisplay" id="popupTCout"></div>
-						</div>
-						<div class="popupInput" id="popupTCedit">
-							<span class="popupTClabel">start</span>
-							<input class="popupTCeditfield" id="popupTCinMin" maxlength="2"  type="text" value=""/>&nbsp;:&nbsp;<input class="popupTCeditfield" id="popupTCinSec" maxlength="2"  type="text" value=""/>
-							&nbsp;&nbsp;&nbsp;&nbsp;<div class="nowTCbtn" id="nowTCin">now</div>   
-							<br/>
-							<span class="popupTClabel">end</span>
-							<input class="popupTCeditfield" id="popupTCoutMin" maxlength="2" type="text" value=""/>&nbsp;:&nbsp;<input class="popupTCeditfield" id="popupTCoutSec" maxlength="2" type="text" value=""/> 
-							&nbsp;&nbsp;&nbsp;&nbsp;<div class="nowTCbtn" id="nowTCout">now</div> / <div class="nowTCbtn" id="eovTCout">end of video</div>    
-							<!--<div class="TCvalidBtn" id="TCvalidModif">&check;</div>
-							<div class="TCvalidBtn" id="TCinvalidModif">&cross;</div> -->   
-						</div>                                                                    
+	</div>
+	<div id="popupSettingsSpace">
+		<table id="popupSettings">
+			<tr>
+				<td id="popupSettingsLeft">
+					<div class="popupSettingsTxt" id="popupSettingsTitleDiv" title="Project title"><span class="popupSettingsLabel" id="popupSettingsTitleLabel">Project</span>&nbsp;&nbsp;<span id="popupSettingsTitle"></span></div>
+					<input class="popupSettingsInput" id="popupSettingsTitleInput" type="text"></input>
+
+					<div class="popupSettingsTxt" id="popupSettingsAuthorDiv" title="Project author"><span class="popupSettingsLabel" id="popupSettingsAuthorLabel">By</span>&nbsp;&nbsp;<span id="popupSettingsAuthor"></span></div>
+					<input class="popupSettingsInput" id="popupSettingsAuthorInput" type="text"></input>
 
-						<div class="popupRightItem" id="popupLegende" title="Comment"></div>  
-						<textarea class="popupInput" id="popupLegendeInput" type="text"></textarea>  
-				   		
-						<div class="popupRightItem" id="popupLink" title="Link"></div>  
-						<textarea class="popupInput" id="popupLinkInput" type="text"></textarea>      
-						                                                                            
-					   <!-- <div class="popupRightItem separationHDark editmode"></div> -->                 
-					</td>
-				</tr>          
-			</table>
-		</div>     
-		<table id='left_menu' class="editmode">  
-			<tr><td id="left_menu_top">
-				<div class="left_menu_item dropable">
-					<a href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)" >
-						<div><i class="fas fa-home fa-3x left_menu_item_icn"></i></div>
-						Go back to my capsules
-					</a>
-				</div>
-				<div class="left_menu_item dropable" id="left_menu_item_settings" title="Settings">
-					<div class="left_menu_item_icn" id="left_menu_item_icn_settings"></div>
-					<div class="left_menu_item_title">Settings</div>
-					<div class="left_menu_item_value"></div>
-				</div>    
-			    <div class="left_menu_item dropable" id="left_menu_item_preview" title="Preview">
-					<div class="left_menu_item_icn" id="left_menu_item_icn_preview"></div>
-					<div class="left_menu_item_title">Preview</div>
-					<div class="left_menu_item_value"></div>
-				</div>             
-			</tr></td>
-			<tr><td id="left_menu_bottom">                                     
-				                     
-				<div class="left_menu_item dropable" id="left_menu_item_addlink" title="AddLink">
-					<div class="left_menu_item_icn" id="left_menu_item_icn_addlink"></div>
-					<div class="left_menu_item_title">Add Link</div>
-					<div class="left_menu_item_value"></div>
-				</div>
-				
-				<div class="left_menu_item dropable" id="left_menu_item_addnote" title="AddNote">
-					<div class="left_menu_item_icn" id="left_menu_item_icn_addnote"></div>
-					<div class="left_menu_item_title">Add Note</div>
-					<div class="left_menu_item_value"></div>
-				</div>
-				     	
-				<div class="left_menu_item dropable" id="left_menu_item_addfile" title="AddFile">  
-						<form id="uploadForm" action="php/upload.php" method="post" enctype="multipart/form-data">    
-							<input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile">
-						</form>
-						<div class="left_menu_item_icn" id="left_menu_item_icn_addfile"></div>
-						<div class="left_menu_item_title">Add File</div>
-						<div class="left_menu_item_value"></div>
+					<div class="popupSettingsTxt" id="popupSettingsEmailDiv" title="Project author email"><span class="popupSettingsLabel" id="popupSettingsEmailLabel">@</span>&nbsp;&nbsp;<span id="popupSettingsEmail"></span></div>
+					<input class="popupSettingsInput" id="popupSettingsEmailInput" type="text"></input>
+
+					<div class="popupSettingsTxt" id="popupSettingsCreditsDiv" title="Project credits"><span class="popupSettingsLabel" id="popupSettingsCreditsLabel">Credits</span><br/><span id="popupSettingsCredits"></span></div>
+					<textarea rows="3" class="popupSettingsInput" id="popupSettingsCreditsInput" type="text"></textarea>
+				</td>
+				<td id="popupSettingsRight">
+					<div class="popupSettingsBtn" id="popupSettingsBtnShare">Share</div>
+					<div class="popupSettingsBtn" id="popupSettingsBtnEmbed">Embed</div>
+					<div class="popupSettingsBtn editmode" id="popupSettingsBtnDownloadXml">Download XML</div>
+					<div class="popupSettingsBtn editmode" id="popupSettingsBtnDelete">Delete project</div>
+					<a class="popupSettingsA" href="http://www.memorekall.com" target="_blank">www.memorekall.com</a>
+
+					<!-- 	<input id="popupSettingsShare" type="text" value="http://projects.rekall.com/monprojet" placeHolder=""/>
+                         <textarea id="popupSettingsEmbed" type="text"></textarea>
+                         <div id="popupSettingsDownloadXml">Download project XML</div>     -->
+				</td>
+			</tr>
+		</table>
+	</div>
+	<div id="popupSpace">
+		<table id="popupEdit">
+			<tr>
+				<td id="popupLeft">
+					<div class="editmode" id="popupSetHighlight">&#9733;&nbsp;Highlight</div>
+					<div class="popupLeftItem" id="popupImgBox">
+						<img id="popupImg" src="file/rekall_cache/568261E53001FA741A069C684C6E25E7571006E8-45972424CDE1275C6FDD9DD7D52216C878F04AB8.jpg"/>
+						<div class="popupLeftItem" id="popupType"></div>
+					</div>
+					<!--<div class="popupRightItem separationHDark editmode"></div>-->
+					<div class="editmode" id="popupEditSupprimer">Delete file</div>
+				</td>
+				<td id="popupRight">
+					<div id="closePopupEdit">&#10005;</div>
+
+					<div class="popupRightItem" id="popupNom"></div>
+					<input class="popupInput" id="popupNomInput" type="text" value=""/>
+
+					<div class="popupRightItem" id="popupAuthor" title="Author"></div>
+					<input class="popupInput" id="popupAuthorInput" type="text"></input>
+
+					<div class="popupRightItem" id="popupTC">
+						<div class="popupTCdisplay" id="popupTCin"></div>
+						<div class="popupTCdisplay" id="popupTCout"></div>
+					</div>
+					<div class="popupInput" id="popupTCedit">
+						<span class="popupTClabel">start</span>
+						<input class="popupTCeditfield" id="popupTCinMin" maxlength="2"  type="text" value=""/>&nbsp;:&nbsp;<input class="popupTCeditfield" id="popupTCinSec" maxlength="2"  type="text" value=""/>
+						&nbsp;&nbsp;&nbsp;&nbsp;<div class="nowTCbtn" id="nowTCin">now</div>
+						<br/>
+						<span class="popupTClabel">end</span>
+						<input class="popupTCeditfield" id="popupTCoutMin" maxlength="2" type="text" value=""/>&nbsp;:&nbsp;<input class="popupTCeditfield" id="popupTCoutSec" maxlength="2" type="text" value=""/>
+						&nbsp;&nbsp;&nbsp;&nbsp;<div class="nowTCbtn" id="nowTCout">now</div> / <div class="nowTCbtn" id="eovTCout">end of video</div>
+						<!--<div class="TCvalidBtn" id="TCvalidModif">&check;</div>
+                        <div class="TCvalidBtn" id="TCinvalidModif">&cross;</div> -->
 					</div>
-				<div class="left_menu_item dropable" id="left_menu_item_open_mosaic" title="Mosaic">
-					<div class="left_menu_item_icn" id="left_menu_item_icn_mosaic"></div>
-					<div class="left_menu_item_title">Open Mosaic</div>
-					<div class="left_menu_item_value"></div>
-				</div>
-			</tr></td>
+
+					<div class="popupRightItem" id="popupLegende" title="Comment"></div>
+					<textarea class="popupInput" id="popupLegendeInput" type="text"></textarea>
+
+					<div class="popupRightItem" id="popupLink" title="Link"></div>
+					<textarea class="popupInput" id="popupLinkInput" type="text"></textarea>
+
+					<!-- <div class="popupRightItem separationHDark editmode"></div> -->
+				</td>
+			</tr>
 		</table>
-		<video id="video" class="video-js vjs-default-skin vjs-big-play-centered">
-		<p class="vjs-no-js">Your browser is not compatible with HTML5. Please upgrade!</p>
-		<!--
-		<track kind="captions"  src="demo.captions.vtt" srclang="en" label="English"></track>
-		<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
-		-->
-		</video>
-		<div id='flattentimeline'>
-			<div id="flattentimeline_highlight">        
+	</div>
+
+	<form id="uploadForm" action="php/upload.php" method="post" enctype="multipart/form-data" style='display: none;'>
+		<input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile">
+	</form>
+
+	<div id='left_menu' class='flex-col editmode'>
+		<div class='top'>
+			<a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)">
+				<i class="fas fa-home fa-3x left_menu_item_icn"></i>
+				<p>Go back to my capsules</p>
+			</a>
+			<div class="left_menu_item dropable" id="left_menu_item_settings" title="Settings">
+				<div class="left_menu_item_icn" id="left_menu_item_icn_settings"></div>
+				<div class="left_menu_item_title">Settings</div>
+			</div>
+			<div class="left_menu_item dropable" id="left_menu_item_preview" title="Preview">
+				<div class="left_menu_item_icn" id="left_menu_item_icn_preview"></div>
+				<div class="left_menu_item_title">Preview</div>
+			</div>
+		</div>
+		<div class='bottom'>
+			<div class="left_menu_item dropable" id="left_menu_item_addlink" title="AddLink">
+				<div class="left_menu_item_icn" id="left_menu_item_icn_addlink"></div>
+				<div class="left_menu_item_title">Add Link</div>
+			</div>
+			<div class="left_menu_item dropable" id="left_menu_item_addnote" title="AddNote">
+				<div class="left_menu_item_icn" id="left_menu_item_icn_addnote"></div>
+				<div class="left_menu_item_title">Add Note</div>
+			</div>
+			<div class="left_menu_item dropable" id="left_menu_item_addfile" title="AddFile">
+				<div class="left_menu_item_icn" id="left_menu_item_icn_addfile"></div>
+				<div class="left_menu_item_title">Add File</div>
+			</div>
+		</div>
+	</div>
+
+	<div id='tabs' class='flex flex-col'>
+
+		<div id='tab_selector' class='flex-row flex-center editmode'>
+			<form id='tab_selector_form' class='flex-row flex-space-around'>
+				<input id='inp_vid' name='tab' value='video' type='radio' checked />
+				<label for='inp_vid'>video</label>
+				<input id='inp_tab' name='tab' value='mosaic' type='radio' />
+				<label for='inp_tab'>mosaic</label>
+			</form>
+
+		</div>
+
+		<div id='mosaic_tab' style='display: none;'></div>
+		<div id='video_tab' class='flex flex-row'>
+			<video id="video" class="video-js vjs-default-skin vjs-big-play-centered">
+				<p class="vjs-no-js">Your browser is not compatible with HTML5. Please upgrade!</p>
+				<!--
+                <track kind="captions"  src="demo.captions.vtt" srclang="en" label="English"></track>
+                <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
+                -->
+			</video>
+			<div id='flattentimeline' class='flex-col'>
+				<div id="flattentimeline_highlight"></div>
+				<p id='videoProgress'>&nbsp;</p>
 			</div>
-			<p id='videoProgress'>&nbsp;</p>
 		</div>
-	</div>      
+	</div>
+</div>
 </body>
 </html>
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 94ac3ec79b0f0898f9447caeef045e1719f0e392..710b59551216bcca234155e95fb234c5f7250318 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -1,11 +1,19 @@
 var rekall = new Rekall();
 var rekall_common = new Object();
+var pubSub = null;
+
+window.onload = function() {
+	pubSub = window.top.PubSub;
+	pubSub.subscribe('mosaic', openMosaic);
+	pubSub.subscribe('video', openVideo);
+};
+
 $(document).ready(function() {
 
 	rekall.allowProjectDeletion(window.app.Settings.Project.ProjectDeletionEnabled)
 	Utils.actionPrefix = "php/";
 	Utils.actionSuffix = ".php?r=";
-	
+
 	rekall_common.owner = {"canEdit": false, "author": "", "locationGps": "", "locationName": ""};
 
 	rouletteStart();
@@ -15,7 +23,7 @@ $(document).ready(function() {
 		if(httpGetData.p.length != 40)
 			httpGetData.p = (CryptoJS.SHA1(getParameterByName("p").toUpperCase()) + "").toUpperCase();
 	}
-	
+
 	$.ajax("php/project.php", {
 		type: "POST",
 		dataType: "json",
@@ -25,16 +33,16 @@ $(document).ready(function() {
 			if(getParameterByName("w") != "")
 				rekall_common.owner.canEdit = false;
 //
-//rekall_common.owner.canEdit = true;			
-							
+//rekall_common.owner.canEdit = true;		
+						
 			if(rekall_common.owner.canEdit) {
 				//Mode preview or not
 				$(".editmode").removeClass("editmode");
 				$(".empty").show();
 				$(".displayMode").hide();
-				
+			
 				setEditionControls();
-				
+			
 				//Geoloc en mode édition
 				if((false) && (navigator.geolocation)) {
 					navigator.geolocation.getCurrentPosition(function(position) {
@@ -49,39 +57,39 @@ $(document).ready(function() {
 							},
 							error: function() {
 							}
-						});	
+						});
 					});
 				}
 
-			} else {                                                    
+			} else {
 				$(".empty").hide();
 				$(".displayMode").show();
-			
-				$("#projectInfoBtn").click(function(event){  
-					event.stopPropagation(); 
-					$("#popupSettingsSpace").show();         
+		
+				$("#projectInfoBtn").click(function(event){
+					event.stopPropagation();
+					$("#popupSettingsSpace").show();
 
-					$("#popupSettingsTitle").html(rekall.project.metadata["Title"]).removeClass("empty"); 
+					$("#popupSettingsTitle").html(rekall.project.metadata["Title"]).removeClass("empty");
 					$("#popupSettingsAuthor").html(rekall.project.metadata["Author"]).removeClass("empty");
-					$("#popupSettingsEmail").html(rekall.project.metadata["Email"]).removeClass("empty");      
-					$("#popupSettingsCredits").html(rekall.project.metadata["Comments"].replace(/\n/gi, "<br/>")).removeClass("empty");             
+					$("#popupSettingsEmail").html(rekall.project.metadata["Email"]).removeClass("empty");
+					$("#popupSettingsCredits").html(rekall.project.metadata["Comments"].replace(/\n/gi, "<br/>")).removeClass("empty");
 
-				});  
-				
-				$("#popupSettings").click(function(event){  
-					event.stopPropagation(); 
+				});
+			
+				$("#popupSettings").click(function(event){
+					event.stopPropagation();
 					closeSettingsPopup();
 				});
-                             
-				$("#popupSettingsSpace").click(function(event){  
-					event.stopPropagation(); 
+
+				$("#popupSettingsSpace").click(function(event){
+					event.stopPropagation();
 					closeSettingsPopup();
 				});
-			} 
-			
+			}
+		
 			rouletteEnd();
-			rekall.loadXMLFile();  
-			
+			rekall.loadXMLFile();
+		
 			var tmpUrl = shareLink();
 			$("#watermarkBox").attr("href",tmpUrl);
 
@@ -93,181 +101,171 @@ $(document).ready(function() {
 	});
 
 	$("#popupAlertSpace").click(function(event){
-		event.stopPropagation();      
+		event.stopPropagation();
 	});
-	$("#popupAlertButtonOk").click(function(event){  
-		event.stopPropagation(); 
+	$("#popupAlertButtonOk").click(function(event){
+		event.stopPropagation();
 		$("#popupAlertSpace").hide();
 	});
 
 	$("#popupSpace").click(function(event){
-		event.stopPropagation();  
-		closeEdit();              
-	});                    
+		event.stopPropagation();
+		closeEdit();
+	});
 	$("#closePopupEdit").click(function(event){
-		event.stopPropagation();  
-		closeEdit(); 
+		event.stopPropagation();
+		closeEdit();
 	});
-	
+
 	$("#popupAlertButtonCancel").click(function(){
 		closeAlert();
-	});      
-	
+	});
+
 	$("#popupAlertButtonYesdelete").click(function(){
 		var keyDoc = $("#popupRight").attr("keyDoc");
 		deleteFromDom(keyDoc);
-	});  
-	
-	$("#popupAlertButtonYesdeleteproject").click(function(){   
+	});
+
+	$("#popupAlertButtonYesdeleteproject").click(function(){
 		//alert("pouf");
 		removeProject();
-	});  
-	
-	$("#popupSettingsBtnEmbed").click(function(event){  
+	});
+
+	$("#popupSettingsBtnEmbed").click(function(event){
 		event.stopPropagation();
-		var tmp = shareEmbed();  
+		var tmp = shareEmbed();
 		openAlert("textarea",tmp);
 	});
-	$("#popupSettingsBtnShare").click(function(event){  
-		event.stopPropagation();    
-		var tmp = shareLink();  
+	$("#popupSettingsBtnShare").click(function(event){
+		event.stopPropagation();
+		var tmp = shareLink();
 		openAlert("input",tmp);
 	});
 });
 
-function setEditionControls() {  
+function setEditionControls() {
 	//Drag&drop files
 	$(document).on({
-		dragenter: function(event) {          
+		dragenter: function(event) {
 			event.stopImmediatePropagation();
-			event.preventDefault();    
+			event.preventDefault();
 		},
-		dragleave: function(event) {               
+		dragleave: function(event) {
 			event.stopImmediatePropagation();
-			event.preventDefault();      
+			event.preventDefault();
 		},
-		dragover: function(event) {            
+		dragover: function(event) {
 			event.stopImmediatePropagation();
-			event.preventDefault();       
+			event.preventDefault();
 		},
-		drop: function(event) {                
+		drop: function(event) {
 			if(event.originalEvent.dataTransfer.files.length) {
 				event.stopImmediatePropagation();
 				event.preventDefault();
 				uploadFiles(event.originalEvent.dataTransfer.files);
-			}        
+			}
 		}
-	});   
+	});
 
 	$("#flattentimeline").on({
-		dragenter: function(event) {
-			//$(".flattentimeline_item").removeClass("draggable").addClass("drag");
-		},
-		dragleave: function(event) {  
-			$("#flattentimeline").removeClass("draggable").removeClass("drag"); 
-		},
-		dragover: function(event) {
-			$("#flattentimeline").removeClass("draggable").addClass("drag"); 
-		},
-		drop: function(event) {
-			$("#flattentimeline").removeClass("draggable").removeClass("drag");  
-		}
+		dragenter: function(event) { /*$(".flattentimeline_item").removeClass("draggable").addClass("drag");*/ },
+		dragleave: function(event) {  $("#flattentimeline").removeClass("draggable").removeClass("drag"); },
+		dragover: function(event) { $("#flattentimeline").removeClass("draggable").addClass("drag"); },
+		drop: function(event) { $("#flattentimeline").removeClass("draggable").removeClass("drag");  }
 	});
 
 	$("#left_menu_bottom").click(function(event){
 		//var tmp = $(".vjs-marker").css("z-index");
 		//alert("val = "+tmp);
 	});
-	
-	$("#left_menu_item_settings").click(function(event){  
-		event.stopPropagation(); 
+
+	$("#left_menu_item_settings").click(function(event){
+		event.stopPropagation();
 		rekall.timeline.pause();
-		$("#popupSettingsSpace").show();         
+		$("#popupSettingsSpace").show();
 
 		if(rekall.project.metadata["Title"]!="") {
-			$("#popupSettingsTitle").html(rekall.project.metadata["Title"]).removeClass("empty"); 
+			$("#popupSettingsTitle").html(rekall.project.metadata["Title"]).removeClass("empty");
 			$("#popupSettingsTitleLabel").show();
 		} else {
-			$("#popupSettingsTitle").html("+ Add project name").addClass("empty");   
+			$("#popupSettingsTitle").html("+ Add project name").addClass("empty");
 			$("#popupSettingsTitleLabel").hide();
 		}
-		
+	
 		if(rekall.project.metadata["Author"]!="") {
-			$("#popupSettingsAuthor").html(rekall.project.metadata["Author"]).removeClass("empty");   
+			$("#popupSettingsAuthor").html(rekall.project.metadata["Author"]).removeClass("empty");
 			$("#popupSettingsAuthorLabel").show();
-		} else {  
-			$("#popupSettingsAuthor").html("+ Add project author").addClass("empty");     
+		} else {
+			$("#popupSettingsAuthor").html("+ Add project author").addClass("empty");
 			$("#popupSettingsAuthorLabel").hide();
 		}
-		
+	
 		if(rekall.project.metadata["Email"]!="") {
-			$("#popupSettingsEmail").html(rekall.project.metadata["Email"]).removeClass("empty");   
+			$("#popupSettingsEmail").html(rekall.project.metadata["Email"]).removeClass("empty");
 			$("#popupSettingsEmailLabel").show();
-		} else {  
-			$("#popupSettingsEmail").html("+ Add email address").addClass("empty");   
+		} else {
+			$("#popupSettingsEmail").html("+ Add email address").addClass("empty");
 			$("#popupSettingsEmailLabel").hide();
 		}
-		
+	
 		if(rekall.project.metadata["Comments"]!="") {
-			$("#popupSettingsCredits").html(rekall.project.metadata["Comments"].replace(/\n/gi, "<br/>")).removeClass("empty");   
+			$("#popupSettingsCredits").html(rekall.project.metadata["Comments"].replace(/\n/gi, "<br/>")).removeClass("empty");
 			$("#popupSettingsCreditsLabel").show();
 		} else {
-			$("#popupSettingsCredits").html("+ Add project credits").addClass("empty");    
+			$("#popupSettingsCredits").html("+ Add project credits").addClass("empty");
 			$("#popupSettingsCreditsLabel").hide();
-		}     
-		
+		}
+	
 		if(rekall_common.owner.canEdit) {
 			$(".empty").show();
 		}
-	});  
-	
+	});
 
-	
-	$("#popupSettingsTitleDiv").click(function(event){  
-		event.stopPropagation();     
+	$("#popupSettingsTitleDiv").click(function(event){
+		event.stopPropagation();
 		closeSettingsInputs();
-		$(this).hide();   
+		$(this).hide();
 		if(!$("#popupSettingsTitle").hasClass("empty")) $("#popupSettingsTitleInput").val($("#popupSettingsTitle").html());
-		$("#popupSettingsTitleInput").show().focus(); 
-	});    
-	$("#popupSettingsAuthorDiv").click(function(event){  
-		event.stopPropagation();     
+		$("#popupSettingsTitleInput").show().focus();
+	});
+	$("#popupSettingsAuthorDiv").click(function(event){
+		event.stopPropagation();
 		closeSettingsInputs();
-		$(this).hide();          
+		$(this).hide();
 		if(!$("#popupSettingsAuthor").hasClass("empty")) $("#popupSettingsAuthorInput").val($("#popupSettingsAuthor").html());
-		$("#popupSettingsAuthorInput").show().focus(); 
-	});  
-	$("#popupSettingsEmailDiv").click(function(event){  
-		event.stopPropagation();     
+		$("#popupSettingsAuthorInput").show().focus();
+	});
+	$("#popupSettingsEmailDiv").click(function(event){
+		event.stopPropagation();
 		closeSettingsInputs();
-		$(this).hide();            
+		$(this).hide();
 		if(!$("#popupSettingsEmail").hasClass("empty")) $("#popupSettingsEmailInput").val($("#popupSettingsEmail").html());
-		$("#popupSettingsEmailInput").show().focus(); 
-	});       
-	$("#popupSettingsCreditsDiv").click(function(event){  
-		event.stopPropagation();     
+		$("#popupSettingsEmailInput").show().focus();
+	});
+	$("#popupSettingsCreditsDiv").click(function(event){
+		event.stopPropagation();
 		closeSettingsInputs();
-		$(this).hide();      
+		$(this).hide();
 		if(!$("#popupSettingsCredits").hasClass("empty")) $("#popupSettingsCreditsInput").val($("#popupSettingsCredits").html());
-		$("#popupSettingsCreditsInput").show().focus(); 
-	});                
-	
-	$(".popupSettingsInput").keyup(function(event){  
-		event.stopPropagation();              
-		if(event.which == 13) {                                                                 
+		$("#popupSettingsCreditsInput").show().focus();
+	});
+
+	$(".popupSettingsInput").keyup(function(event){
+		event.stopPropagation();
+		if(event.which == 13) {
 			closeSettingsInputs();
 		}
-	}); 
-	
-	$(".popupSettingsInput").click(function(event){       
+	});
+
+	$(".popupSettingsInput").click(function(event){
 			event.stopPropagation();
-	}); 
-	
+	});
+
 	$("#popupSettingsCreditsInput").unbind( "keyup" );
-	$("#popupSettingsCreditsInput").keyup(function(event){    
-		event.stopPropagation(); 
-		
-		var isEnter = false;        
+	$("#popupSettingsCreditsInput").keyup(function(event){
+		event.stopPropagation();
+	
+		var isEnter = false;
 		if (event.key !== undefined) {
 			if (event.key === 'Enter' && event.altKey) {
 				//openAlert('Alt + Enter pressed!');
@@ -283,272 +281,260 @@ function setEditionControls() {
 		}
 
 		if(isEnter == true) {
-			closeSettingsInputs(); 
+			closeSettingsInputs();
 		}
 	});
-	
-	$("#popupSettings").click(function(event){  
-		event.stopPropagation(); 
+
+	$("#popupSettings").click(function(event){
+		event.stopPropagation();
 		closeSettingsInputs();
 	});
-	
-	
-	$("#popupSettingsSpace").click(function(event){  
-		event.stopPropagation(); 
+
+	$("#popupSettingsSpace").click(function(event){
+		event.stopPropagation();
 		closeSettingsPopup();
-	});  
-	
-	$("#left_menu_item_preview").click(function(event){  
+	});
+
+	$("#left_menu_item_preview").click(function(event){
 		event.stopPropagation();
 		window.open(window.app.urls.memberHome + 'capsule/preview/' + window.location.pathname.replace('/legacy/', '').slice(0, -1), '_blank');
 		/*window.open("?w=1", "Preview Rekall", "menubar=no, status=no, scrollbars=no, menubar=no, width=1150, height=560");  */
 	});
 
-	$("#popupSettingsBtnDownloadXml").click(function(event){  
+	$("#popupSettingsBtnDownloadXml").click(function(event){
 		event.stopPropagation();
-		window.open("php/project.php?downloadXML=1", '_self'); 
+		window.open("php/project.php?downloadXML=1", '_self');
 	});
-	$("#popupSettingsBtnDelete").click(function(event){  
+	$("#popupSettingsBtnDelete").click(function(event){
 		event.stopPropagation();
-		//alert("DELETE");
-		openAlert("Do you really want to delete this project ?", "yesnodeleteproject"); 
-	});                               
+		openAlert("Do you really want to delete this project ?", "yesnodeleteproject");
+	});
 
 	$("#left_menu_item_addnote").click(function(event){
-		event.stopPropagation();   
+		event.stopPropagation();
 		rekall.timeline.pause();
-		uploadFiles(["New note"]);   
-	}); 
+		uploadFiles(["New note"]);
+	});
 
 	$("#left_menu_item_addfile").mousedown(function(event) {
 		rekall.timeline.pause();
+		$("#left_menu_item_btn_addfile").click();
 	});
-	$("#left_menu_item_btn_addfile").change(function(event){   
-		event.stopPropagation();                   
-		uploadFiles($("#left_menu_item_btn_addfile").get(0).files);  
-	});      
-	
-	$("#left_menu_item_addlink").click(function(event){   
-		event.stopPropagation();   
+	$("#left_menu_item_btn_addfile").change(function(event){
+		event.stopPropagation();
+		uploadFiles($("#left_menu_item_btn_addfile").get(0).files);
+	});
+
+	$("#left_menu_item_addlink").click(function(event){
+		event.stopPropagation();
 		rekall.timeline.pause();
-		$("#popupAddLinkSpace").show();  
+		$("#popupAddLinkSpace").show();
 		$("#popupAddLinkInput").focus();
-	});       
+	});
 
 	$("#popupAddLinkButtonCancel").click(function(event){
-		event.stopPropagation();            
+		event.stopPropagation();
 		closeAddLinkPopup();
-	});    
-	$("#popupAddLinkSpace").click(function(event){   
-		event.stopPropagation();            
+	});
+	$("#popupAddLinkSpace").click(function(event){
+		event.stopPropagation();
 		closeAddLinkPopup();
 	});
-	
-	$("#popupAddLinkButtonOk").click(function(event){ 
-		var myLink = $("#popupAddLinkInput").val();    
+
+	$("#popupAddLinkButtonOk").click(function(event){
+		var myLink = $("#popupAddLinkInput").val();
 		addLink(myLink);
-	}); 
-	
-	$("#popupAddLinkInput").keyup(function(event){  
-		event.stopPropagation();              
-		if(event.which == 13) {     
+	});
+
+	$("#popupAddLinkInput").keyup(function(event){
+		event.stopPropagation();
+		if(event.which == 13) {
 			var myLink = $("#popupAddLinkInput").val();
 			addLink(myLink);
 		}
 	});
 
-	$("#left_menu_item_open_mosaic").click(function(event){   
-		event.stopPropagation();   
-		rekall.timeline.pause();
-        openMosaic();
-	});       
+	$('#tab_selector_form').change(function(event) { pubSub.publish(event.target.value) });
 
-	$("#closePopupMosaic").click(function(event){
-		event.stopPropagation();  
-		closeMosaic(); 
-	});
-                            
-	
-	$("#popupEdit").click(function(event){  
-		event.stopPropagation(); 
+	$("#popupEdit").click(function(event){
+		event.stopPropagation();
 		closeInputs();
 	});
 
 	$("#popupNom").click(function(event){
-		event.stopPropagation();     
+		event.stopPropagation();
 		closeInputs();
 		$(this).hide();
-		$("#popupNomInput").show().focus(); 
-	});       
-	
-	$("#popupTC").click(function(event){        
-		event.stopPropagation();     
+		$("#popupNomInput").show().focus();
+	});
+
+	$("#popupTC").click(function(event){
+		event.stopPropagation();
 		closeInputs();
 		$("#popupTC").hide();
-		$("#popupTCedit").show();//.focus(); 
-	});     
-	
+		$("#popupTCedit").show();//.focus();
+	});
+
 	$(".popupTCeditfield").click(function(event){
 		event.stopPropagation();
-	});     
+	});
 	$("#nowTCin").click(function(event){
-		event.stopPropagation();                                                            
-		var timeCurrent = convertToTime(Math.round(rekall.timeline.timeCurrent));   
-		$("#popupTCinMin").val(timeCurrent.split(":")[0]); 
-		$("#popupTCinSec").val(timeCurrent.split(":")[1]); 
-	});         
+		event.stopPropagation();
+		var timeCurrent = convertToTime(Math.round(rekall.timeline.timeCurrent));
+		$("#popupTCinMin").val(timeCurrent.split(":")[0]);
+		$("#popupTCinSec").val(timeCurrent.split(":")[1]);
+	});
 	$("#nowTCout").click(function(event){
-		event.stopPropagation();                                                             
+		event.stopPropagation();
 		var timeCurrent = convertToTime(Math.round(rekall.timeline.timeCurrent));
-		$("#popupTCoutMin").val(timeCurrent.split(":")[0]); 
-		$("#popupTCoutSec").val(timeCurrent.split(":")[1]); 
-	});   
+		$("#popupTCoutMin").val(timeCurrent.split(":")[0]);
+		$("#popupTCoutSec").val(timeCurrent.split(":")[1]);
+	});
 	$("#eovTCout").click(function(event){
-		event.stopPropagation();                 
-		var endVideo = rekall.videoPlayer.duration();                                             
+		event.stopPropagation();
+		var endVideo = rekall.videoPlayer.duration();
 		var timeEnd = convertToTime(Math.round(endVideo));
-		$("#popupTCoutMin").val(timeEnd.split(":")[0]); 
-		$("#popupTCoutSec").val(timeEnd.split(":")[1]); 
-	});                                             
-	
+		$("#popupTCoutMin").val(timeEnd.split(":")[0]);
+		$("#popupTCoutSec").val(timeEnd.split(":")[1]);
+	});
+
 	$("#TCvalidModif").click(function(event){
-		event.stopPropagation();      
-		var keyDoc = $(this).parent().parent().attr("keydoc");    
+		event.stopPropagation();
+		var keyDoc = $(this).parent().parent().attr("keydoc");
 		var inMin = $("#popupTCinMin").val();
 		var inSec = $("#popupTCinSec").val();
 		var outMin = $("#popupTCoutMin").val();
 		var outSec = $("#popupTCoutSec").val();
-		var TCin = (inMin*60)+(inSec*1);   
-		var TCout = (outMin*60)+(outSec*1);   
+		var TCin = (inMin*60)+(inSec*1);
+		var TCout = (outMin*60)+(outSec*1);
 
 		var endVideo = Math.ceil(rekall.videoPlayer.duration());
-		
-		if(TCin>TCout) 			openAlert("Start time must be set before end time", "ok"); 
-		else if(TCout>endVideo) openAlert("End time must not be set after " + convertToTime(endVideo) + " (end of the video)", "ok");  
+	
+		if(TCin>TCout) 			openAlert("Start time must be set before end time", "ok");
+		else if(TCout>endVideo) openAlert("End time must not be set after " + convertToTime(endVideo) + " (end of the video)", "ok");
 		else {
-			setTCFromDom(keyDoc, TCin, TCout); 
+			setTCFromDom(keyDoc, TCin, TCout);
+	
+			$("#popupTCin").html(inMin+":"+inSec);
+			$("#popupTCout").html(outMin+":"+outSec);
 		
-			$("#popupTCin").html(inMin+":"+inSec);  
-			$("#popupTCout").html(outMin+":"+outSec);  
-			
-			closeInputs();   
+			closeInputs();
 		}
 	});
 	$("#TCinvalidModif").click(function(event){
-		event.stopPropagation();  
-		var TCin = $("#popupTCin").html().split(":"); 
-		var TCout = $("#popupTCout").html().split(":");   
+		event.stopPropagation();
+		var TCin = $("#popupTCin").html().split(":");
+		var TCout = $("#popupTCout").html().split(":");
 		$("#popupTCinMin").val(TCin[0]);
 		$("#popupTCinSec").val(TCin[1]);
 		$("#popupTCoutMin").val(TCout[0]);
 		$("#popupTCoutSec").val(TCout[1]);
-		closeInputs();  
+		closeInputs();
 	});
 
 	$("#popupLegende").click(function(event){
-		event.stopPropagation();     
+		event.stopPropagation();
 		closeInputs();
 		$(this).hide();
-		$("#popupLegendeInput").show().focus(); 
-	});    
-	
-	$("#popupAuthor").click(function(event){  
-		event.stopPropagation();     
+		$("#popupLegendeInput").show().focus();
+	});
+
+	$("#popupAuthor").click(function(event){
+		event.stopPropagation();
 		closeInputs();
 		$(this).hide();
-		$("#popupAuthorInput").show().focus(); 
-	});      
-	
-	$("#popupLink").click(function(event){         
-		event.stopPropagation();     
+		$("#popupAuthorInput").show().focus();
+	});
+
+	$("#popupLink").click(function(event){
+		event.stopPropagation();
 		closeInputs();
 		$(this).hide();
-		$("#popupLinkInput").show().focus();    
-	});  
-	
-	
+		$("#popupLinkInput").show().focus();
+	});
+
 	$(".popupInput").click(function(event){
 		event.stopPropagation();
-	});   
+	});
 
 	$("#popupNomInput").keyup(function(event){
-		event.stopPropagation();              
-		if(event.which == 13) {                                                      
-			closeInputs(); 
+		event.stopPropagation();
+		if(event.which == 13) {
+			closeInputs();
 		}
 	});
 
 	//Validation du commentaire avec Entrée = désactivé
-	/*$("#popupLegendeInput").keyup(function(event){    
-		event.stopPropagation(); 
-		
-		var isEnter = false;        
+	/*$("#popupLegendeInput").keyup(function(event){
+		event.stopPropagation();
+	
+		var isEnter = false;
 		if (event.key !== undefined) {
 		       if (event.key === 'Enter' && event.altKey) {
 		          //openAlert('Alt + Enter pressed!');
-		       } else if(event.key === 'Enter') isEnter = true;  
+		       } else if(event.key === 'Enter') isEnter = true;
 		    } else if (event.keyIdentifier !== undefined) {
 		       if (event.keyIdentifier === "Enter" && event.altKey) {
 		          //openAlert('Alt + Enter pressed!');
-		       } else if(event.keyIdentifier === 'Enter') isEnter = true;    
+		       } else if(event.keyIdentifier === 'Enter') isEnter = true;
 		    } else if (event.keyCode !== undefined) {
 		       if (event.keyCode === 13 && event.altKey) {
 		          //openAlert('Alt + Enter pressed!');
-		    } else if(event.keyCode === 13) isEnter = true; 
+		    } else if(event.keyCode === 13) isEnter = true;
 		}
-		             
-		if(isEnter == true) {                                                              
-			closeInputs(); 
-		}
-	}); */        
 	
-	$("#popupAuthorInput").keyup(function(event){  
-		event.stopPropagation();              
-		if(event.which == 13) {                                                       
-			closeInputs(); 
+		if(isEnter == true) {
+			closeInputs();
+		}
+	}); */
+
+	$("#popupAuthorInput").keyup(function(event){
+		event.stopPropagation();
+		if(event.which == 13) {
+			closeInputs();
 		}
 	});
-	
-	$("#popupLinkInput").keyup(function(event){       
-		event.stopPropagation();              
-		if(event.which == 13) {                                                        
-			closeInputs(); 
-		}                                         
+
+	$("#popupLinkInput").keyup(function(event){
+		event.stopPropagation();
+		if(event.which == 13) {
+			closeInputs();
+		}
 	});
 
 	$("#popupSetHighlight").click(function(event){
 		event.stopPropagation();
 		var keyDoc = $(this).parent().attr("keydoc");
-		var isHL = $(this).attr("isHighlight");  
+		var isHL = $(this).attr("isHighlight");
 		if(isHL=="true") {
-			setMetaFromDom(keyDoc, "Rekall->Highlight", "");  
-			$(this).attr("isHighlight", "false").removeClass("selected");  
+			setMetaFromDom(keyDoc, "Rekall->Highlight", "");
+			$(this).attr("isHighlight", "false").removeClass("selected");
 			$("#popupEdit").removeClass("highlightPopup");
-		} else { 
-			setMetaFromDom(keyDoc, "Rekall->Highlight", "true");     
-			var tmpColor = $("#popupNom").css("color");             
+		} else {
+			setMetaFromDom(keyDoc, "Rekall->Highlight", "true");
+			var tmpColor = $("#popupNom").css("color");
 			$(this).attr("isHighlight", "true").addClass("selected");
-			$("#popupEdit").addClass("highlightPopup"); 	
-		}              
+			$("#popupEdit").addClass("highlightPopup"); 
+		}
 	});
-	
+
 	$("#popupEditSupprimer").click(function(){
 		openAlert("Do you really want to delete this file from the project ?", "yesnodelete");
 	});
-}  
-      
+}
+
 /*var rubanTimeout = 0;
 var rubanMessage = "";
 var rubanTimeoutTime = 0;
 function openAlert(message, duration) {
 	alert("ça passe ?");
-	if(message == undefined) {     
+	if(message == undefined) {
 		clearInterval(rubanTimeout);
 		$("#ruban").slideUp(function() {
 			$("#ruban").html("");
 		});
 	}
-	else if($("#ruban").text().length == 0) {   
+	else if($("#ruban").text().length == 0) {
 		openAlert();
 		messageWithClose = message;
 		if(duration == undefined)
@@ -569,248 +555,252 @@ function openAlert(message, duration) {
 		}, 1000);
 	}
 }*/
-   
 
-function closeSettingsPopup() {    
+function closeSettingsPopup() {
 	closeSettingsInputs();
 	$("#popupSettingsSpace").hide();
 }
 
 function addLink(url) {
-	
+
 	if(url.trim()=="") openAlert("Invalid URL");
 	else {
 		if(url!="") if(url.indexOf("http")!=0) url = "http://"+url;
-		uploadFiles(["NewLink"+url]); 
+		uploadFiles(["NewLink"+url]);
 		closeAddLinkPopup();
 	}
-}    
+}
 
 function closeAddLinkPopup() {
-	$("#popupAddLinkInput").val("");  
+	$("#popupAddLinkInput").val("");
 	$("#popupAddLinkSpace").hide();
 }
 
-
-             
 function openAlert(message, buttons) {
 	//Rétro-compatibilité Rekall-Pro
 	if((message == undefined) && (buttons == undefined))
-		closeAlert();      
-		
-	if(message=="input"){      
-		$("#popupAlertMessage").html("Copy this link to share <i>"+rekall.project.metadata["Title"]+"</i>");      
-		$(".popupAlertButton").hide();  
-		$("#popupAlertButtonOk").show(); 
-		
+		closeAlert();
+	
+	if(message=="input"){
+		$("#popupAlertMessage").html("Copy this link to share <i>"+rekall.project.metadata["Title"]+"</i>");
+		$(".popupAlertButton").hide();
+		$("#popupAlertButtonOk").show();
+	
 		$("#popupAlertInput").val(buttons);
-		$("#popupAlertInput").show();           
-		$("#popupAlertTextarea").hide(); 
+		$("#popupAlertInput").show();
+		$("#popupAlertTextarea").hide();
 
 		$("#popupAlertSpace").show();
 		$("#popupAlertInput").focus().select();
-		
-	} else if(message=="textarea"){  
+	
+	} else if(message=="textarea"){
 		$("#popupAlertMessage").html("Embed <i>"+rekall.project.metadata["Title"]+"</i> on your webpage");
-		$(".popupAlertButton").hide();  
-		$("#popupAlertButtonOk").show(); 
+		$(".popupAlertButton").hide();
+		$("#popupAlertButtonOk").show();
 
 		$("#popupAlertTextarea").val(buttons);
-		$("#popupAlertInput").hide(); 
-		$("#popupAlertTextarea").show();               
+		$("#popupAlertInput").hide();
+		$("#popupAlertTextarea").show();
 
 		$("#popupAlertSpace").show();
 		$("#popupAlertTextarea").focus().select();
-		
-	} else {            
-		$("#popupAlertInput").hide(); 
-		$("#popupAlertTextarea").hide(); 
-		
-		$("#popupAlertMessage").html(message);  
+	
+	} else {
+		$("#popupAlertInput").hide();
+		$("#popupAlertTextarea").hide();
+	
+		$("#popupAlertMessage").html(message);
 		if(buttons == "nobuttons") {
 			$(".popupAlertButton").hide();
 		}
-		else if(buttons == "yesnodelete") {   
-			$(".popupAlertButton").hide();  
-			$("#popupAlertButtonYesdelete").show(); 
-			$("#popupAlertButtonCancel").show(); 
-		} 
-		else if(buttons == "yesnodeleteproject") {   
-			$(".popupAlertButton").hide();  
-			$("#popupAlertButtonYesdeleteproject").show(); 
-			$("#popupAlertButtonCancel").show(); 
-		}     
+		else if(buttons == "yesnodelete") {
+			$(".popupAlertButton").hide();
+			$("#popupAlertButtonYesdelete").show();
+			$("#popupAlertButtonCancel").show();
+		}
+		else if(buttons == "yesnodeleteproject") {
+			$(".popupAlertButton").hide();
+			$("#popupAlertButtonYesdeleteproject").show();
+			$("#popupAlertButtonCancel").show();
+		}
 		else {
-			$(".popupAlertButton").hide();  
-			$("#popupAlertButtonOk").show(); 
+			$(".popupAlertButton").hide();
+			$("#popupAlertButtonOk").show();
 		}
-		$("#popupAlertSpace").show();     
+		$("#popupAlertSpace").show();
 	}
-}       
+}
+
 function closeAlert() {
-	$("#popupAlertMessage").html(""); 
-	$(".popupAlertButton").hide();         
-	$("#popupAlertSpace").hide(); 
-}     
+	$("#popupAlertMessage").html("");
+	$(".popupAlertButton").hide();
+	$("#popupAlertSpace").hide();
+}
 
-function closeSettingsInputs() {     
-	$.each($(".popupSettingsInput"), function() { 
+function closeSettingsInputs() {
+	$.each($(".popupSettingsInput"), function() {
 		if($(this).css("display") != "none") {
-			if($(this).attr("id")=="popupSettingsTitleInput") {                                           
+			if($(this).attr("id")=="popupSettingsTitleInput") {
 
 				var newName = $(this).val().trim();
-				$(this).val(newName);                                
+				$(this).val(newName);
 				setProjectMeta("Title", newName);
 
 				if(newName!="") {
-					$("#popupSettingsTitle").html(newName).removeClass("empty"); 
+					$("#popupSettingsTitle").html(newName).removeClass("empty");
 					$("#popupSettingsTitleLabel").show();
-				} else { 
-					$("#popupSettingsTitle").html("+ Add project name").addClass("empty").show();   
+				} else {
+					$("#popupSettingsTitle").html("+ Add project name").addClass("empty").show();
 					$("#popupSettingsTitleLabel").hide();
 				}
 
 			} else if($(this).attr("id")=="popupSettingsAuthorInput") {
 
 				var newAuthor = $(this).val().trim();
-				$(this).val(newAuthor);                                                        
-				setProjectMeta("Author", newAuthor); 
+				$(this).val(newAuthor);
+				setProjectMeta("Author", newAuthor);
 
 				if(newAuthor!="") {
-					$("#popupSettingsAuthor").html(newAuthor).removeClass("empty"); 
+					$("#popupSettingsAuthor").html(newAuthor).removeClass("empty");
 					$("#popupSettingsAuthorLabel").show();
 				} else {
 					$("#popupSettingsAuthor").html("+ Add project author").addClass("empty").show();
-					$("#popupSettingsAuthorLabel").hide();   
+					$("#popupSettingsAuthorLabel").hide();
 				}
 
 			} else if($(this).attr("id")=="popupSettingsEmailInput") {
 
 				var newEmail = $(this).val().trim();
-				$(this).val(newEmail);                                 
+				$(this).val(newEmail);
 				setProjectMeta("Email", newEmail);
 
 				if(newEmail!="") {
-					$("#popupSettingsEmail").html(newEmail).removeClass("empty");      
+					$("#popupSettingsEmail").html(newEmail).removeClass("empty");
 					$("#popupSettingsEmailLabel").show();
 				} else {
-					$("#popupSettingsEmail").html("+ Add email address").addClass("empty").show(); 
+					$("#popupSettingsEmail").html("+ Add email address").addClass("empty").show();
 					$("#popupSettingsEmailLabel").hide();
-				}  
+				}
 
 			} else if($(this).attr("id")=="popupSettingsCreditsInput") {
 
 				var newCredits = $(this).val().trim();
-				$(this).val(newCredits);                               
+				$(this).val(newCredits);
 				setProjectMeta("Comments", newCredits);
 
 				if(newCredits!="") {
-					$("#popupSettingsCredits").html(newCredits.replace(/\n/gi, "<br/>")).removeClass("empty");     
+					$("#popupSettingsCredits").html(newCredits.replace(/\n/gi, "<br/>")).removeClass("empty");
 					$("#popupSettingsCreditsLabel").show();
 				} else {
-					$("#popupSettingsCredits").html("+ Add project credits").addClass("empty").show(); 
+					$("#popupSettingsCredits").html("+ Add project credits").addClass("empty").show();
 					$("#popupSettingsCreditsLabel").hide();
 				}
-			
+		
 			}
 		}
-		
-		//alert("ok"); 
+	
+		//alert("ok");
 	});
 	$(".popupSettingsInput").hide();
-	$(".popupSettingsTxt").show();  
+	$(".popupSettingsTxt").show();
 }
 
-function closeInputs() {  
-	$.each($(".popupInput"), function() { 
+function closeInputs() {
+	$.each($(".popupInput"), function() {
 		if($(this).css("display") != "none") {
-			if($(this).attr("id")=="popupNomInput") { 
-				
-				var keyDoc = $(this).parent().attr("keydoc"); 
-				var newName = $(this).val().trim();        
+			if($(this).attr("id")=="popupNomInput") {
+			
+				var keyDoc = $(this).parent().attr("keydoc");
+				var newName = $(this).val().trim();
 				$(this).val(newName);
-				setMetaFromDom(keyDoc, "Rekall->Name", newName); 
+				setMetaFromDom(keyDoc, "Rekall->Name", newName);
 
-				if(newName!="") $("#popupNom").html(newName).removeClass("empty"); 
+				if(newName!="") $("#popupNom").html(newName).removeClass("empty");
 				else $("#popupNom").html("+ Add a name").addClass("empty");
 
 			} else if($(this).attr("id")=="popupLegendeInput") {
-				
-				var keyDoc = $(this).parent().attr("keydoc"); 
-				var newComment = $(this).val().trim();    
+			
+				var keyDoc = $(this).parent().attr("keydoc");
+				var newComment = $(this).val().trim();
 				$(this).val(newComment);
-				setMetaFromDom(keyDoc, "Rekall->Comments", newComment.replace(/\n/gi, "<br/>")); 
+				setMetaFromDom(keyDoc, "Rekall->Comments", newComment.replace(/\n/gi, "<br/>"));
 
-				if(newComment!="") $("#popupLegende").html(newComment.replace(/\n/gi, "<br/>")).removeClass("empty"); 
-				else $("#popupLegende").html("+ Add a comment").addClass("empty"); 
+				if(newComment!="") $("#popupLegende").html(newComment.replace(/\n/gi, "<br/>")).removeClass("empty");
+				else $("#popupLegende").html("+ Add a comment").addClass("empty");
 
 			} else if($(this).attr("id")=="popupAuthorInput") {
-				
-				var keyDoc = $(this).parent().attr("keydoc"); 
-				var newAuthor = $(this).val().trim();        
+			
+				var keyDoc = $(this).parent().attr("keydoc");
+				var newAuthor = $(this).val().trim();
 				$(this).val(newAuthor);
-				setMetaFromDom(keyDoc, "Rekall->Author", newAuthor); 
+				setMetaFromDom(keyDoc, "Rekall->Author", newAuthor);
 
-				if(newAuthor!="") $("#popupAuthor").html(newAuthor).removeClass("empty"); 
-				else $("#popupAuthor").html("+ Add an author").addClass("empty");   
+				if(newAuthor!="") $("#popupAuthor").html(newAuthor).removeClass("empty");
+				else $("#popupAuthor").html("+ Add an author").addClass("empty");
 
 			} else if($(this).attr("id")=="popupLinkInput") {
+		
+				var keyDoc = $(this).parent().attr("keydoc");
+				var newLink = $(this).val().trim();
 			
-				var keyDoc = $(this).parent().attr("keydoc"); 
-				var newLink = $(this).val().trim();    
-				
 				if(newLink!="") if(newLink.indexOf("http")!=0) newLink = "http://"+newLink;
 
 				$(this).val(newLink);
-				setMetaFromDom(keyDoc, "Rekall->Link", newLink); 
+				setMetaFromDom(keyDoc, "Rekall->Link", newLink);
 
 				if(newLink!="") {
-					if(rekall_common.owner.canEdit) $("#popupLink").html(newLink).removeClass("empty");   
+					if(rekall_common.owner.canEdit) $("#popupLink").html(newLink).removeClass("empty");
 					else $("#popupLink").html("<a href='"+newLink+"' target='_blank'>"+newLink+"</a>").removeClass("empty");
 				}
 				else $("#popupLink").html("+ Add a link").addClass("empty");
-			
+		
 			} else if($(this).attr("id")=="popupTCedit") {
-				var keyDoc = $("#popupRight").attr("keydoc");    
+				var keyDoc = $("#popupRight").attr("keydoc");
 				var inMin = $("#popupTCinMin").val();
 				var inSec = $("#popupTCinSec").val();
 				var outMin = $("#popupTCoutMin").val();
 				var outSec = $("#popupTCoutSec").val();
-				var TCin = (inMin*60)+(inSec*1);   
-				var TCout = (outMin*60)+(outSec*1);   
+				var TCin = (inMin*60)+(inSec*1);
+				var TCout = (outMin*60)+(outSec*1);
 
 				var endVideo = Math.ceil(rekall.videoPlayer.duration());
-                
-                var isReturn = true;
+
+				var isReturn = true;
 
 				if((inMin>=120)||(inSec>=60)||(outMin>=120)||(outSec>=60)||(inMin<0)||(inSec<0)||(outMin<0)||(outSec<0)) openAlert("Invalid time code", "ok");
-				else if(TCin>TCout) 			openAlert("Start time must be set before end time", "ok"); 
-				else if(TCout>endVideo)			openAlert("End time must not be set after " + convertToTime(endVideo) + " (end of the video)", "ok");  
-				else {                                                                   
-					setTCFromDom(keyDoc, TCin, TCout);           
-					$("#popupTCin").html(inMin+":"+inSec);  
-					$("#popupTCout").html(outMin+":"+outSec);    
+				else if(TCin>TCout) 			openAlert("Start time must be set before end time", "ok");
+				else if(TCout>endVideo)			openAlert("End time must not be set after " + convertToTime(endVideo) + " (end of the video)", "ok");
+				else {
+					setTCFromDom(keyDoc, TCin, TCout);
+					$("#popupTCin").html(inMin+":"+inSec);
+					$("#popupTCout").html(outMin+":"+outSec);
 					isReturn = false;
-				}          
+				}
 				if(isReturn) return true;
 			}
 		}
-		
-		//alert("ok"); 
+	
+		//alert("ok");
 	});
 	$(".popupInput").hide();
-	$(".popupRightItem").show();  
+	$(".popupRightItem").show();
 	$("#popupTC").show();
 	$("#popupTCedit").hide();
-}       
+}
 
 function closeEdit() {
-	closeInputs();   
-	var isPaused = $("#popupEdit").attr("isPaused");   
+	closeInputs();
+	var isPaused = $("#popupEdit").attr("isPaused");
 	if(isPaused=="false") rekall.timeline.play();
-	$("#popupSpace").hide();   
+	$("#popupSpace").hide();
 	$("#popupEdit").hide();
-}                      
+}
+
+function openVideo() {
+		$('#mosaic_tab').hide();
+		$('#video_tab').show();
+		$('#left_menu .bottom').show();
+}
 
 function openMosaic() {
     function getMosaicItem(tagOrDoc) {
@@ -818,13 +808,16 @@ function openMosaic() {
         let name = tagOrDoc.getMetadata("Rekall->Name");
         let url ='';
         if ('undefined' === typeof path) {
-            let icon = ('rekall/link' === tagOrDoc.getMetadata("Rekall->Type")) ? "link" : "note";
-            url = "../shared/css/images/img-"+icon+".png";
+          let [reg, type] = tagOrDoc.getMetadata("Rekall->Type").split('/');
+          if (reg === 'rekall') {
+            if (type === 'marker') type = 'note';
+          }
+          url = "../shared/css/images/img-"+type+".png";
         } else {
             url = path;
         }
         let div=$('<div/>').addClass('mosaic_item').on('click', function() {tagOrDoc.openPopupEdit();});
-        div.append($('<img/>').attr('src', url));
+        div.append($('<img/>').attr('src', url).attr('onerror', "this.src='../shared/css/images/img-document.png';"));
         div.append($('<span/>').addClass('caption').text(name));
         return div;
     }
@@ -833,12 +826,17 @@ function openMosaic() {
             .addClass('mosaic_filter_item')
             .addClass(css_class)
             .on('click', callback)
-            .css('background', color)
+            .css('background-color', color)
             .append($('<h2/>').text(text));
     }
 
-	$("#popupMosaicSpace").show();  
-    let container = $('#popupMosaicMosaic');
+		
+		rekall.timeline.pause();
+		$('#mosaic_tab').show();
+		$('#video_tab').hide();
+		$('#left_menu .bottom').hide();
+
+    let container = $('#mosaic_tab');
     container.html('');
     let filterdiv = $('<div/>').addClass('mosaic_filter');
     filterdiv.append(getFilterElement(
@@ -888,46 +886,42 @@ function getTagGradientColor(tag) {
         return  "-o-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";
     }
     if(isFirefox) {
-        return "-moz-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";          
+        return "-moz-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";
     }
     if((isSafari)||(isChrome)){
-        return "-webkit-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)"; 
+        return "-webkit-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";
     }
 }
 
-function closeMosaic() {
-	$("#popupMosaicSpace").hide();  
-}
-                           
-function fillPopupEdit(tag) {                
-	
-	//if(rekall_common.owner.canEdit) { alert("edit mode !"); }      
-	var isPaused = rekall.timeline.isPaused();  
-	rekall.timeline.pause();   
-                         
+function fillPopupEdit(tag) {
+
+	//if(rekall_common.owner.canEdit) { alert("edit mode !"); }
+	var isPaused = rekall.timeline.isPaused();
+	rekall.timeline.pause();
+
  //   var bgColor = "-webkit-linear-gradient(right bottom,  rgb(20,46,51) 0%, #757F81 150%)" ; //"rgb(20,46,51)";
 
-	$("#popupEdit").attr("isPaused",isPaused);//.css("background",bgColor); 
-	$("#popupTC").css("background",tag.color); 
+	$("#popupEdit").attr("isPaused",isPaused);//.css("background",bgColor);
+	$("#popupTC").css("background",tag.color);
 	/*$("#popupType").css("color",tag.color);*/
 
 	var bgColorLeft = tag.color.replace(/rgb/g, "rgba").replace(/\)/g, ",.35)");
-	
-    bgColorLeft = getTagGradientColor(tag);
-	
+
+bgColorLeft = getTagGradientColor(tag);
+
 	$("#popupLeft").css("background",bgColorLeft);
 
-	if(tag.isMarker()==true){         
-		$("#popupImg").show();   
+	if(tag.isMarker()==true){
+		$("#popupImg").show();
 		$("#popupImg").attr("src","../shared/css/images/img-note.png");
-		$("#popupImg").unbind( "click" );   
-		
-	} else {                
+		$("#popupImg").unbind( "click" );
+	
+	} else {
 		if(tag.thumbnail.url){
 			$("#popupImg").attr("src",tag.thumbnail.url);
-		} else {                   
+		} else {
 			var type = tag.getMetadata("Rekall->Type");
-			//alert(type);        
+			//alert(type);
 			if(type.indexOf("image") > -1) $("#popupImg").attr("src","../shared/css/images/img-image.png");  //alert("image");
 			else if(type.indexOf("pdf") > -1) $("#popupImg").attr("src","../shared/css/images/img-pdf.png");  //alert("pdf");
 			else if(type.indexOf("audio") > -1) $("#popupImg").attr("src","../shared/css/images/img-music.png");  //alert("son");
@@ -936,96 +930,95 @@ function fillPopupEdit(tag) {
 			else if(type.indexOf("msword") > -1) $("#popupImg").attr("src","../shared/css/images/img-word.png");  //alert("word");
 			else if(type.indexOf("link") > -1) $("#popupImg").attr("src","../shared/css/images/img-link.png");  //alert("son");
 			else $("#popupImg").attr("src","../shared/css/images/img-document.png");  //alert(type);
-		}    
+		}
 		$("#popupImg").unbind( "click" );
-		$("#popupImg").click(function(event){ 
-			event.stopPropagation();        
+		$("#popupImg").click(function(event){
+			event.stopPropagation();
 			if(tag.isLink()) {
 				if(link != "")
-				window.open(link,'_blank');  
+				window.open(link,'_blank');
 			}
 			else
-				tag.openBrowser(); 
-		});                               
-	}                        
-	
-	$("#popupNom").css("color",tag.color); 
+				tag.openBrowser();
+		});
+	}
+
+	$("#popupNom").css("color",tag.color);
 
 	$("#popupType").html(tag.getMetadata("Rekall->Type")).css("color",tag.color);
-	var name = tag.getMetadata("Rekall->Name");    
+	var name = tag.getMetadata("Rekall->Name");
 	if(name!="") $("#popupNom").html(name).removeClass("empty");
-	else $("#popupNom").html("+ Add a name").addClass("empty");    
+	else $("#popupNom").html("+ Add a name").addClass("empty");
 
 	var startVerb = convertToTime(tag.getTimeStart());
-	$("#popupTCin").html(startVerb);       
+	$("#popupTCin").html(startVerb);
 
 	var endVerb = convertToTime(tag.getTimeEnd());
 	$("#popupTCout").html(endVerb);
 
 	var comments = tag.getMetadata("Rekall->Comments");
 	if((comments)&&(comments!="")) $("#popupLegende").html(comments).removeClass("empty");
-	else $("#popupLegende").html("+ Add a comment").addClass("empty"); 
-	
+	else $("#popupLegende").html("+ Add a comment").addClass("empty");
+
 	var author = tag.getMetadata("Rekall->Author");
 	if((author)&&(author!="")) $("#popupAuthor").html(author).removeClass("empty");
-	else $("#popupAuthor").html("+ Add an author").addClass("empty"); 
-    
-	var link = tag.getMetadata("Rekall->Link"); 
+	else $("#popupAuthor").html("+ Add an author").addClass("empty");
+
+	var link = tag.getMetadata("Rekall->Link");
 	if((link)&&(link!="")) {
-		if(rekall_common.owner.canEdit) $("#popupLink").html(link).removeClass("empty");   
+		if(rekall_common.owner.canEdit) $("#popupLink").html(link).removeClass("empty");
 		else $("#popupLink").html("<a href='"+link+"' target='_blank'>"+link+"</a>").removeClass("empty");
 	}
-	else $("#popupLink").html("+ Add a link").addClass("empty");      
+	else $("#popupLink").html("+ Add a link").addClass("empty");
 
 	if(rekall_common.owner.canEdit) {
-		if(tag.isMarker()==true) $("#popupEditSupprimer").html("Delete Note");  
-		else $("#popupEditSupprimer").html("Delete File");  
+		if(tag.isMarker()==true) $("#popupEditSupprimer").html("Delete Note");
+		else $("#popupEditSupprimer").html("Delete File");
 
 		$(".empty").show();
 		$(".displayMode").hide();
-		$("#popupNomInput").val(tag.getMetadata("Rekall->Name")); 
-		
+		$("#popupNomInput").val(tag.getMetadata("Rekall->Name"));
+	
 		$("#popupTCinMin").val(startVerb.split(":")[0]);
 		$("#popupTCinSec").val(startVerb.split(":")[1]);
-		
+	
 		$("#popupTCoutMin").val(endVerb.split(":")[0]);
 		$("#popupTCoutSec").val(endVerb.split(":")[1]);
-		
-		$("#popupLegendeInput").val(""+comments.replace(/<br\/>/gi, '\n'));    
-		$("#popupAuthorInput").val(""+author); 
-		$("#popupLinkInput").val(""+link); 
-		
-		var highlight = tag.getMetadata("Rekall->Highlight");        
+	
+		$("#popupLegendeInput").val(""+comments.replace(/<br\/>/gi, '\n'));
+		$("#popupAuthorInput").val(""+author);
+		$("#popupLinkInput").val(""+link);
+	
+		var highlight = tag.getMetadata("Rekall->Highlight");
 		if(highlight=="true") {
-			$("#popupSetHighlight").attr("isHighlight","true").addClass("selected");   
-			$("#popupEdit").addClass("highlightPopup"); 
+			$("#popupSetHighlight").attr("isHighlight","true").addClass("selected");
+			$("#popupEdit").addClass("highlightPopup");
 		}
 		else {
-			$("#popupSetHighlight").attr("isHighlight","false").removeClass("selected");  
-			$("#popupEdit").removeClass("highlightPopup"); 
+			$("#popupSetHighlight").attr("isHighlight","false").removeClass("selected");
+			$("#popupEdit").removeClass("highlightPopup");
 		}
 	} else {
 		$(".empty").hide();
 		$(".editmode").hide();
 		$(".displayMode").show();
 	}
-	
-	$("#popupLeft") .attr("keydoc", tag.document.key); 
-	$("#popupRight").attr("keydoc", tag.document.key);        
 
-	$("#popupSpace").show();   
+	$("#popupLeft") .attr("keydoc", tag.document.key);
+	$("#popupRight").attr("keydoc", tag.document.key);
+
+	$("#popupSpace").show();
 	$("#popupEdit").show();
 }
-          
-function convertToTime(seconds) {    
-	var minutes = Math.floor(seconds/60); 
-	seconds = Math.floor(seconds-(minutes*60));   
+
+function convertToTime(seconds) {
+	var minutes = Math.floor(seconds/60);
+	seconds = Math.floor(seconds-(minutes*60));
 	if(minutes<10) minutes="0"+minutes;
-	if(seconds<10) seconds="0"+seconds;   
+	if(seconds<10) seconds="0"+seconds;
 	var time = minutes+":"+seconds;
 	return time;
-}       
-
+}
 
 function removeProject() {
 	rouletteStart();
@@ -1041,7 +1034,7 @@ function removeProject() {
 			openAlert("Server error. Try again.");
 			rouletteEnd();
 		}
-	});	
+	});
 }
 
 function setProjectMeta(metaType, meta) {
@@ -1058,8 +1051,9 @@ function setProjectMeta(metaType, meta) {
 			openAlert("Server error. Try again.");
 			rouletteEnd();
 		}
-	});	
+	});
 }
+
 function setMetaFromDom(keyDoc, metaType, meta) {
 	rouletteStart();
 	$.ajax("php/project.php", {
@@ -1074,8 +1068,9 @@ function setMetaFromDom(keyDoc, metaType, meta) {
 			openAlert("Server error. Try again.");
 			rouletteEnd();
 		}
-	});	
+	});
 }
+
 function setTCFromDom(keyDoc, TCin, TCout) {
 	rouletteStart();
 	$.ajax("php/project.php", {
@@ -1091,8 +1086,8 @@ function setTCFromDom(keyDoc, TCin, TCout) {
 			openAlert("Server error. Try again.");
 			rouletteEnd();
 		}
-	});	
-}  
+	});
+}
 
 function deleteFromDom(keyDoc) {
 	rouletteStart();
@@ -1109,32 +1104,32 @@ function deleteFromDom(keyDoc) {
 			openAlert("Server error. Try again.");
 			rouletteEnd();
 		}
-	});	
+	});
 }
+
 function deleteFromDomFinished() {
-	closeAlert(); 
+	closeAlert();
 	closeEdit();
 }
-        
-                  
-//Gestion d'upload        
+
+//Gestion d'upload
 var filesToUpload = [], fileIsUploading = false;
 function uploadFiles(files) {
 	$.each(files, function(index, file) {
 		var formData = new FormData();
-		
+	
 		if(file.name != undefined) {
 			var colorCategory = rekall.sortings["colors"].categories[Sorting.prefix + file.type];
 			if(colorCategory != undefined) {
 			}
 			var fileType     = (file.type.split("/"))[0];
 			var fileDateTime = moment(file.lastModifiedDate);
-			
+		
 			if (file.size > rekall_common.uploadMax) {
 				openAlert("File size is too large! Maximum is " + rekall_common.uploadMax + " bytes.");
 				return;
 			}
-			
+		
 			//Données du formulaire
 			if($("uploadForm")[0] != undefined)
 				formData = new FormData($('form')[0]); //à vérifier
@@ -1144,23 +1139,23 @@ function uploadFiles(files) {
 			}
 		}
 		else if(file.indexOf("NewLink") == 0){
-			formData.append("name", "NewLink");      
+			formData.append("name", "NewLink");
 			formData.append("link", file.replace("NewLink",""));
 			formData.append("type", "rekall/link");
 		}
 		else {
 			formData.append("name", file);
 		}
-		
+	
 		var tcOut = rekall.timeline.timeCurrent + 15;
 		if(tcOut>=rekall.videoPlayer.duration()) tcOut = rekall.videoPlayer.duration();
-		
+	
 		formData.append("tcIn", 		rekall.timeline.timeCurrent);
 		formData.append("tcOut", 		tcOut);
 		formData.append("author",       rekall_common.owner.author);
 		formData.append("locationGps",  rekall_common.owner.locationGps);
 		formData.append("locationName", rekall_common.owner.locationName);
-		
+	
 		if(formData != undefined) {
 			filesToUpload.push({
 				file: 		 file,
@@ -1211,18 +1206,19 @@ function uploadFiles(files) {
 		}
 	});
 }
+
 function uploadFilesNext() {
 	if(!fileIsUploading) {
 		if(filesToUpload.length > 0) {
 			fileIsUploading = true;
 			rouletteStart(true);
 			$.ajax(filesToUpload[0]);
-			
+		
 			if(filesToUpload[0].file.name != undefined)
 				openAlert("Starting upload of " + filesToUpload[0].file.name);
 			else
 				openAlert("Creation of " + filesToUpload[0].file + " in progress");
-			
+		
 			filesToUpload.splice(0, 1);
 			uploadFilesNext();
 		}
@@ -1241,6 +1237,7 @@ function shareEmbed() {
 //	openAlert("Embed code in console");
 	return embedUrl;
 }
+
 function shareLink() {
 	var width = 960, height = round(width * 0.44);
 	var embedUrl = rekall.baseUrl + "?w=1";
@@ -1254,10 +1251,12 @@ function rouletteStart(isProgress) {
 	else
 		console.log("Début de la roulette avec progression");
 }
+
 function rouletteProgress(progress) {
 	console.log("Progression de la roulette @ " + progress + "%");
 	window.document.title = "Téléchargement " + progress + "%";
 }
+
 function rouletteEnd() {
 	console.log("Fin de la roulette");
 	closeAlert();
@@ -1276,6 +1275,5 @@ $(window).resize(function(e) {
 		rekall.videoPlayer.height(($("#container").height()) + "px");
 		$("#video").addClass("resized");
 	}
-}); 
+});
 $(window).trigger("resize");
-	
diff --git a/capsule-prototype/js/rekall/Sorting.js b/capsule-prototype/js/rekall/Sorting.js
index 2e527cbd3c7d69d16763c5fcd1acbb6a9ef05394..799f5a9956d05c782ab21e250e181826c9f867f0 100644
--- a/capsule-prototype/js/rekall/Sorting.js
+++ b/capsule-prototype/js/rekall/Sorting.js
@@ -261,9 +261,9 @@ Sorting.prototype.analyseEnd = function(minTagCount) {
 	else {
 		this.categories = Utils.sortObj(this.categories, this.valAreFloats);
 		if(this.analyse) {
-			console.log("----------------------------------------------------------------");
+			console.debug("----------------------------------------------------------------");
 			for (var key in this.categories)
-				console.log(key);
+				console.debug(key);
 		}
 		
 		
diff --git a/legacy/create.zip b/legacy/create.zip
index 3b6e843b53835f01ea7fdefbde2685d730eba1fa..40b7e727a0ccf08db83eb7b5c69648df3018fc90 100644
Binary files a/legacy/create.zip and b/legacy/create.zip differ
diff --git a/templates/project/edit.html.twig b/templates/project/edit.html.twig
index 82a101839135fd026f977e33e49a9cae2d3ebad4..258695da5bea6714aac4860af2885645e53d7d1e 100644
--- a/templates/project/edit.html.twig
+++ b/templates/project/edit.html.twig
@@ -16,7 +16,7 @@
   <script>
       window.onload = function (){
           const iframe = document.getElementById('legacyContent').contentWindow;
-          iframe.init('init', PubSub);
+          iframe.rekall.Rekall('init', PubSub);
       }
   </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/tools/update_capsule_html.sh b/tools/update_capsule_html.sh
new file mode 100755
index 0000000000000000000000000000000000000000..ff2f0c910f4958a04f28cb8ceb26969d361ce8ff
--- /dev/null
+++ b/tools/update_capsule_html.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+( cd capsule-prototype && zip -ru ../legacy/create.zip .htaccess * )
+find legacy -type f -name 'index.html' -exec cp capsule-prototype/index.html {} \;