clean up navigation

load artwork for first 3 shows immediately

css/mediarack.css

+html { 
+	overflow: -moz-scrollbars-vertical; 
+	overflow: scroll; 
+	/* overflow-y: scroll; *doesnt work with firefox*/ 
+}
+
 body {
 	padding-top: 70px;
 }
@@ -30,8 +36,12 @@ body {
 	height: 220px;
 }
 
-.episodes {
-	margin-top: 5px;
+table.episodes {
+	margin-top: 10px;
+}
+
+table.episodes  tr td{
+	font-weight: bold;
 }
 
 .panel-title {
@@ -42,3 +52,7 @@ div.panel-body.lazy {
 	background: repeat-y top center;
 	background-size: 100% auto;
 }
+
+div#shows {
+	display: none;
+}
\ No newline at end of file

index.php

@@ -40,30 +40,16 @@
         </div>
         <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Nav header</li>
-                <li><a href="#">Separated link</a></li>
-                <li><a href="#">One more separated link</a></li>
-              </ul>
-            </li>
-          </ul>
-          <ul class="nav navbar-nav navbar-right">
-            <li class="active"><a href="./">foobar</a></li>
+			<li class="active"><a href="#home">Home</a></li>
+            <li><a href="#shows">TV Shows</a></li>
+            <li><a href="#movies">Movies</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
     </div>
 
     <div class="container">
-		<div id="shows"></div>
+		<div class="content" id="shows"></div>
     </div> <!-- /container -->
 
 

js/mediarack.js

@@ -2,6 +2,14 @@ $(document).ready(function() {
 
 	getShows();
 	
+	$(".nav a").on('click',function(e) {
+		e.preventDefault();
+		$('.content').hide();
+		$(".nav li").removeClass('active');
+		$(this).parent().addClass('active');
+		$($(this).attr('href')).show();
+	});
+
 });
 
 function getShows() {
@@ -10,6 +18,7 @@ function getShows() {
 		}, function(data) {
 			var divShows = $("#shows");
 			divShows.empty();
+			var i = 0;
 			$.each(data, function (key, show) {
 				var divShowContainer = $('<div class="show panel panel-default" data-showid="'+show.id+'" id="show_'+show.id+'"></div>');
 				var divShowHeader = $('<div class="showName panel-heading"><h2 class="panel-title text-center"><img class="showLogo lazy" style="min-height: 50px; height: 50px;" alt="'+show.name+'" data-original="api.php?get=logo&show='+escape(show.folder)+'" src="" /></h2></div>');
@@ -32,8 +41,6 @@ function getShows() {
 				divShowContainer.append(divShowHeader);
 				divShowBody.append(divShowPoster);
 				divShowBody.append(ulSeasons);
-				//divShowBody.css('background', 'url(api.php?get=fanart&show='+escape(show.folder)+') repeat-y top center');
-				//divShowHeader.append('<img class="showLogo" alt="'+show.name+'" src="api.php?get=logo&show='+escape(show.folder)+'" />');
 				$("img.showLogo.lazy").lazyload({
 					event: "scrollstop",
 					effect: "fadeIn",
@@ -52,6 +59,12 @@ function getShows() {
 				divShowContainer.append(divShowBody);
 				divShowContainer.append(divShowFooter);
 				divShows.append(divShowContainer);
+				if(i < 3) {
+					divShowHeader.find("img.showLogo").attr('src', 'api.php?get=logo&show='+escape(show.folder));
+					divShowBody.css('background-image', 'url(api.php?get=fanart&show='+escape(show.folder)+')');
+					divShowPoster.find("img.showPoster").attr('src', 'api.php?get=poster&show='+escape(show.folder));
+				}
+				i++;
 			});
 		}
 	);
@@ -89,7 +102,7 @@ function getEpisodes(show, season) {
 						status = "text-default";
 					
 				}
-				var liEpisode = $('<tr class="episode '+status+'"><td>'+episode.episode+'</td><td>'+episode.name+'</td><td class="text-right">'+episode.airdate+'</td></tr>');
+				var liEpisode = $('<tr class="episode text-'+status+'"><td>'+episode.episode+'</td><td>'+episode.name+'</td><td class="text-right">'+episode.airdate+'</td></tr>');
 				olEpisodes.append(liEpisode);
 			});
 			liSeason.append(olEpisodes);