update

css/style.css

@@ -9,6 +9,7 @@
     height: 100%;
     color: black;
     text-decoration: none;
+    z-index: 0;
 }
 
 html body{
@@ -175,4 +176,22 @@ footer{
     height: 30px;	
     width: 100px;
     margin-left: 50px;
+}
+
+footer{
+    height: 25%;
+    vertical-align: middle;
+    text-align: center;
+    margin-top: 1%;
+
+}
+footer h3{
+height: auto;
+}
+#epiList{     
+    overflow: auto;  
+}
+
+#epiList li{     
+    height: auto;
 }

index.html

@@ -14,7 +14,9 @@
             <header id="mlibheader">
                 mlib5
             </header>
-            <div id="breadcrumb"></div>
+            <div id="breadcrumb">
+                <div id="breadcrumbTitle"></div>
+            </div>
             <div id="contentwrapper">
 
 
@@ -34,10 +36,17 @@
                     </ul>	
                 </nav>
             </div>
-            <footer></footer>
+            <footer>
+                <div>
+                    <h3>Episodenliste</h3>
+                    <ul id="epiList"></ul>
+                </div>
+            </footer>
         </div>
 
-        <object data="js/episode.json" type="application/json" id="episode"> 
+        <object data="js/episode.json" type="application/json" id="episode" > 
+        </object>
+        <object data="js/eList.json" type="application/json" id="eList" > 
         </object>
     </body>
 </html>	

js/eList.json

@@ -0,0 +1,77 @@
+{
+    "name": "user",
+    "episodes": [
+        {
+            "order": "1",
+            "title": "test2",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        },
+        {
+            "order": "2",
+            "title": "test3",
+            "href": "../index.html"
+        }
+
+
+    ]
+}

js/mlib.js

@@ -3,7 +3,7 @@
  * and open the template in the editor.
  */
 function pageLoad() {
-    bread = document.getElementById('breadcrumb');
+    breadTitle = document.getElementById('breadcrumbTitle');
     player = document.getElementById('player');
     mediaSource = document.getElementById('playersource');
     episodeInfo = document.getElementById('episodeInfo');
@@ -12,10 +12,18 @@ function pageLoad() {
 
     player.addEventListener('timeupdate', timeUpdate);
     player.addEventListener('ended', trackEnded);
+    
     var episodeHTML = document.getElementById('episode');
     var episodeJson = episodeHTML.contentDocument.body.firstChild.innerHTML;
     episodeObj = jsonParse(episodeJson);
     episodeHTML.style.display="none";
+
+    var eListHTML = document.getElementById('eList');
+    var eListJson = eListHTML.contentDocument.body.firstChild.innerHTML;
+    eListObj = jsonParse(eListJson);
+    eListHTML.style.display="none";
+    createEList();
+    
     actTitle = episodeObj.title;
     actTrack = 0;
     actChapter = 0;
@@ -93,7 +101,7 @@ function trackChapChanged(trackId, chapterId) {
     select = document.getElementById('list' + actTrack + '.' + actChapter);
     select.setAttribute("class", "select");
 
-    bread.innerHTML = actNewTitle;
+    breadTitle.innerHTML = actNewTitle;
 }
 function calcChapterId(trackId, time) {
     var trackObj = episodeObj.tracks[trackId];
@@ -112,4 +120,15 @@ function calcChapterId(trackId, time) {
 function trackEnded() {
     
     jumpById(actTrack+1, 0);
+}
+
+function createEList() {
+    var epiList = document.getElementById('epiList');
+    var entryNumber = 1;
+    var listEntries = "";
+    for (var item in eListObj.episodes) {
+        var itemObj = eListObj.episodes[item];
+            listEntries = listEntries + "<li><a href=\""+itemObj.href+"\">" + entryNumber++ + ": " + itemObj.title + "</a></li>";
+    }
+    epiList.innerHTML = listEntries;
 }