update

css/style.css

@@ -68,16 +68,18 @@ html body{
     float:left;
     margin-left: 1%;
     margin-right : 1%;
-    margin-bottom: auto;
+    height: auto;
     background: linear-gradient(to bottom, rgba(155,155,155,1) 0%,rgba(14,14,14,1) 100%);
-    vertical-align: bottom;
 }
 #timeline {
-    height: 90%; 
+    color: white;
+    height: auto;
+    min-height: 50%;
 }
 #player {
-    height: 10%;
+    height: auto;
 }
+
 #playerlistsec {
     width: 29%;
     float:left;
@@ -109,16 +111,17 @@ footer{
     float: left;
 
 }
-#playerlistsec .menu  li.subli{
-    width: auto;	
-    height: 3%;	
-    min-height: 30px;
-    line-height: 30px;
-    margin: 1%;
-    padding-left: 5px;
-    padding-right: 5px;
+#playerlistsec .menu  li.select{
+    height: 5%;	
+    min-height: 50px;
+    line-height: 50px;
+    list-style-type: none;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 1%;
+    background: linear-gradient(to bottom, rgba(250,207,207,1) 0%,rgba(198,99,99,1) 100%);;
+    cursor: pointer; 
     float: left;
-    background: linear-gradient(to left, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
 }
 
 #sidenav li {

index.html

@@ -28,7 +28,11 @@
                 </nav>
 
                 <section id="playersec">
-                    <div id="timeline">test</div>
+                    <div id="timeline">
+                        <section id="episodeInfo"></section>
+                        <section id="trackInfo"></section>
+                        <section id="chapterInfo"></section>
+                    </div>
                     <audio controls autoplay id="player">
                         <source id ="playersource" src="">;
                     </audio> 
@@ -43,7 +47,6 @@
         </div>
 
         <object data="js/test.json" type="application/json" id="episode" hidden> 
-            <param name="src" value="js/test.json">
         </object>
     </body>
 </html>	

js/mlib.js

@@ -6,10 +6,12 @@ function pageLoad() {
     bread = document.getElementById('breadcrumb');
     player = document.getElementById('player');
     mediaSource = document.getElementById('playersource');
+    episodeInfo = document.getElementById('episodeInfo');
+    trackInfo = document.getElementById('trackInfo');
+    chapterInfo = document.getElementById('chapterInfo');
 
     player.addEventListener('timeupdate', timeUpdate);
     player.addEventListener('ended', trackEnded);
-
     var episodeHTML = document.getElementById('episode');
     var episodeJson = episodeHTML.contentDocument.body.firstChild.innerHTML;
     episodeObj = jsonParse(episodeJson);
@@ -18,6 +20,9 @@ function pageLoad() {
     actChapter = 0;
     createPlayList();
     jumpById(actTrack, actChapter);
+
+    select = document.getElementById('list' + actTrack + '.' + actChapter);
+    select.setAttribute("class", "select");
 }
 
 function createPlayList() {
@@ -29,10 +34,10 @@ function createPlayList() {
         if (trackObj.chapters) {
             for (var chapter in trackObj.chapters) {
                 var chapterObj = trackObj.chapters[chapter];
-                listEntries = listEntries + "<li onclick=\"jumpById(" + track + "," + chapter + ");\">" + entryNumber++ + ": " + chapterObj.title + "</li>";
+                listEntries = listEntries + "<li id=\"list" + track + "." + chapter + "\" onclick=\"jumpById(" + track + "," + chapter + ");\">" + entryNumber++ + ": " + chapterObj.title + "</li>";
             }
         } else {
-            listEntries = listEntries + "<li onclick=\"jumpById(" + track + ",0);\">" + entryNumber++ + ": " + trackObj.title + "</li>";
+            listEntries = listEntries + "<li id=\"list" + track + ".0\" onclick=\"jumpById(" + track + ",0);\">" + entryNumber++ + ": " + trackObj.title + "</li>";
         }
     }
     playList.innerHTML = listEntries;
@@ -50,24 +55,35 @@ function jumpById(trackId, chapterId) {
         var chapterObj = trackObj.chapters[chapterId];
         trackTime = chapterObj.time;
     }
+
     actTrack = trackId;
     actChapter = chapterId;
+
+
     mediaSource.src = trackSrc + "#t=" + trackTime;
     player.load();
 }
 
 function timeUpdate() {
     actChapter = calcChapterId(actTrack, player.currentTime);
-    bread.innerHTML = createBreadCrumb(actTrack,actChapter);
+    bread.innerHTML = createBreadCrumb(actTrack, actChapter);
+    select.setAttribute("class", "");
+    select = document.getElementById('list' + actTrack + '.' + actChapter);
+    select.setAttribute("class", "select");
+    
+   
+    
 }
 
 function createBreadCrumb(trackId, chapterId) {
+    episodeInfo.innerHTML = episodeObj.info;
     var trackObj = episodeObj.tracks[trackId];
-
+    trackInfo.innerHTML = trackObj.info;
     var actNewTitle = episodeObj.title + " -> " + trackObj.title;
     if (trackObj.chapters && chapterId < trackObj.chapters.length) {
         var chapterObj = trackObj.chapters[chapterId];
-        actNewTitle = actNewTitle +  " -> "+chapterObj.title;
+        chapterInfo.innerHTML = chapterObj.info;
+        actNewTitle = actNewTitle + " -> " + chapterObj.title;
     }
     return actNewTitle;
 }
@@ -86,5 +102,5 @@ function calcChapterId(trackId, time) {
 }
 
 function trackEnded() {
-   jumpById(actTrack+1, 0);
+    jumpById(actTrack + 1, 0);
 }