update

css/style.css

@@ -4,9 +4,11 @@
 *{
     margin: 0px;
     padding: 0px;
-    font-family: Arial, sans-serif;
+    font-family: Helvetica,Arial, sans-serif;
     width: 100%;
     height: 100%;
+    color: black;
+    text-decoration: none;
 }
 
 html body{
@@ -77,8 +79,13 @@ html body{
     min-height: 50%;
     max-height: 100%;
 }
+
+#timeline section {
+     color: white;
+}
 #player {
     height: auto;
+    
 }
 
 #playerlistsec {
@@ -112,6 +119,11 @@ footer{
     float: left;
 
 }
+
+#playerlistsec .menu  li a{
+    color: black;
+    text-decoration: none;
+}
 #playerlistsec .menu  li.select{
     height: 5%;	
     min-height: 50px;
@@ -126,14 +138,9 @@ footer{
 }
 
 #sidenav li {
+    clear: both;
+    display: list-item;
     height: 30px;	
     width: 100px;
-}
-
-#sidenav li.subli {
-    list-style: circle;
-    margin-left: 50px;
-}
-#sidenav ul {
     margin-left: 50px;
 }

index.html

@@ -20,9 +20,7 @@
                     <ul>
                         <li>item1</li>
                         <li>item2</li>
-                        <li>item3</li>
-                        <li class="subli">subitem1</li>
-                        <li class="subli">subitem2</li>									
+                        <li><a href="#">item3</a>  
                         <li>item4</li>
                     </ul>
                 </nav>

js/mlib.js

@@ -19,10 +19,11 @@ function pageLoad() {
     actTrack = 0;
     actChapter = 0;
     createPlayList();
-    jumpById(actTrack, actChapter);
+    
 
     select = document.getElementById('list' + actTrack + '.' + actChapter);
     select.setAttribute("class", "select");
+    jumpById(actTrack, actChapter);
 }
 
 function createPlayList() {
@@ -34,10 +35,10 @@ function createPlayList() {
         if (trackObj.chapters) {
             for (var chapter in trackObj.chapters) {
                 var chapterObj = trackObj.chapters[chapter];
-                listEntries = listEntries + "<li id=\"list" + track + "." + chapter + "\" onclick=\"jumpById(" + track + "," + chapter + ");\">" + entryNumber++ + ": " + chapterObj.title + "</li>";
+                listEntries = listEntries + "<li id=\"list" + track + "." + chapter + "\" onclick=\"jumpById(" + track + "," + chapter + ");\"><a href=\"#\">" + entryNumber++ + ": " + chapterObj.title + "</a></li>";
             }
         } else {
-            listEntries = listEntries + "<li id=\"list" + track + ".0\" onclick=\"jumpById(" + track + ",0);\">" + entryNumber++ + ": " + trackObj.title + "</li>";
+            listEntries = listEntries + "<li id=\"list" + track + ".0\" onclick=\"jumpById(" + track + ",0);\"><a href=\"#\">" + entryNumber++ + ": " + trackObj.title + "</a></li>";
         }
     }
     playList.innerHTML = listEntries;
@@ -58,18 +59,21 @@ function jumpById(trackId, chapterId) {
 
     actTrack = trackId;
     actChapter = chapterId;
-
+    trackChapChanged(actTrack, actChapter);
 
     mediaSource.src = trackSrc + "#t=" + trackTime;
     player.load();
 }
 
 function timeUpdate() {
+    var oldChapter = actChapter;
     actChapter = calcChapterId(actTrack, player.currentTime);
-    bread.innerHTML = createBreadCrumb(actTrack, actChapter);
+    if (actChapter !== oldChapter) {
+        trackChapChanged(actTrack, actChapter);
+    }
 }
 
-function createBreadCrumb(trackId, chapterId) {
+function trackChapChanged(trackId, chapterId) {
     episodeInfo.innerHTML = "";
     trackInfo.innerHTML = "";
     chapterInfo.innerHTML = "";
@@ -87,7 +91,8 @@ function createBreadCrumb(trackId, chapterId) {
     select.setAttribute("class", "");
     select = document.getElementById('list' + actTrack + '.' + actChapter);
     select.setAttribute("class", "select");
-    return actNewTitle;
+
+    bread.innerHTML = actNewTitle;
 }
 function calcChapterId(trackId, time) {
     var trackObj = episodeObj.tracks[trackId];
@@ -104,5 +109,6 @@ function calcChapterId(trackId, time) {
 }
 
 function trackEnded() {
-    jumpById(actTrack + 1, 0);
+    
+    jumpById(actTrack+1, 0);
 }