--- a/cms/app-client/app/components/toolbar-component.js	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/components/toolbar-component.js	Mon Jul 04 12:26:19 2016 +0200
@@ -2,6 +2,20 @@
 
 export default Ember.Component.extend({
 
-	classNames: ['toolbar-component']
+	player: Ember.inject.service(),
+
+	classNames: ['toolbar-component'],
+
+	actions: {
+
+		display: function(element) {
+			if(this.get('player').get('window') !== element) {
+				this.get('player').set('window', element);
+			} else {
+				this.get('player').set('window', '');
+			}
+		}
+
+	}
 
 });

--- a/cms/app-client/app/services/player.js	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/services/player.js	Mon Jul 04 12:26:19 2016 +0200
@@ -6,6 +6,7 @@
     item: null,
 
     model: null,
+    window: '', // Values are 'notice' or 'transcript' or ''
 
     init: function() {
         this.on('reset', Ember.run.bind(this, this.get('reset')));

--- a/cms/app-client/app/styles/app.scss	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Mon Jul 04 12:26:19 2016 +0200
@@ -62,6 +62,7 @@
 
 .corpus-window {
     overflow: hidden;
+    position: relative;
 }
 
 body.tabs-discours .corpus-app-container,
@@ -82,6 +83,7 @@
     box-shadow: -4px 0px 8px -4px #59626b;
 }
 
+.corpus-app-modal,
 .corpus-app-container,
 .corpus-app-wrapper {
     box-sizing: border-box;
@@ -89,11 +91,21 @@
     width: 50%;
 }
 
+.corpus-app-modal,
 .corpus-app-container {
     overflow: hidden;
     display: block;
+    border-top: none;
+}
+
+.corpus-app-modal {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.corpus-app-container {
     float: left;
-    border-top: none;
 }
 
 .corpus-app-wrapper {

--- a/cms/app-client/app/styles/components/notice-component.scss	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/styles/components/notice-component.scss	Mon Jul 04 12:26:19 2016 +0200
@@ -1,5 +1,5 @@
 .notice-component {
-
+    padding: 20px;
 }
 
 .notice-component h2 {
@@ -7,6 +7,7 @@
     text-align: left;
     font-size: 14px;
     text-transform: uppercase;
+    padding: 0px;
 }
 
 .notice-component h3 {

--- a/cms/app-client/app/styles/components/toolbar-component.scss	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/styles/components/toolbar-component.scss	Mon Jul 04 12:26:19 2016 +0200
@@ -25,7 +25,7 @@
 	cursor: pointer;
 }
 
-.toolbar-component ul li:hover {
+.toolbar-component ul li.active {
 	background-color: #ffffff;
 	color: #13212d;
 }
\ No newline at end of file

--- a/cms/app-client/app/templates/application.hbs	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Mon Jul 04 12:26:19 2016 +0200
@@ -8,12 +8,17 @@
 
 <div class="corpus-window">
 
-    <!--<div class="corpus-app-modal">
-    {{ notice-component }}
-    </div>-->
-
     <div class="corpus-app-container">
+    {{#if player.window}}
+        {{#if (eq player.window 'notice')}}
+            {{ notice-component }}
+        {{/if}}
+        {{#if (eq player.window 'transcript')}}
+            {{ transcript-component }}
+        {{/if}}
+    {{else}}
         {{ outlet }}
+    {{/if}}
     </div>
 
     <div class="corpus-app-wrapper">

--- a/cms/app-client/app/templates/components/toolbar-component.hbs	Mon Jul 04 11:15:25 2016 +0200
+++ b/cms/app-client/app/templates/components/toolbar-component.hbs	Mon Jul 04 12:26:19 2016 +0200
@@ -1,5 +1,5 @@
 <ul>
-	<li>Notice</li>
-	<li>Transcript</li>
+	<li {{ action 'display' 'notice'}} class="{{if (eq player.window 'notice') 'active'}}">Notice</li>
+	<li {{ action 'display' 'transcript'}} class="{{if (eq player.window 'transcript') 'active'}}">Transcript</li>
 	<li>Video</li>
 </ul>
\ No newline at end of file