merged: webinterface branch into trunk.

git-svn-id: https://xbmc.svn.sourceforge.net/svnroot/xbmc/trunk@33665 568bbfeb-2a22-0410-94d2-cc84cf5bfa90

12 files changed, 498 insertions, 171 deletions

diff --git a/addons/webinterface.default/css/core.css b/addons/webinterface.default/css/core.css
index 7dcbdf23b8..d276f8408b 100644
--- a/addons/webinterface.default/css/core.css
+++ b/addons/webinterface.default/css/core.css
@@ -6,23 +6,251 @@ body {
 

 #header {

 	position: relative;

-	height: 150px;

-	background: #333;

+	height: 50px;

+	border-bottom: 1px solid #000;

 	}

 

 #header .logo {

+	padding-top: 1px;

+	}

+

+#navigation {

+	float: right;

+	}

+

+#spinner {

+	float: right;

+	padding: 11px 10px;

+	}

+

+#navigation ul {

+	list-style-type: none;

+	border-right: 1px solid #969696;

+	margin: 0;

+	padding: 0;

+	}

+

+#navigation ul li {

+	float: left;

+	color: #000;

+	cursor: pointer;

+	line-height: 50px;

+	margin: 0;

+	padding: 0 24px;

+	border-left: 1px solid #969696;

+	font-family: Verdana, sans-serif;

+	font-size: 18px;

+	font-weight: 700;

+	}

+

+#navigation ul li.selected,

+#navigation ul li:hover {

+	background: url('/images/header-selected-bg.png') repeat-x;

+	color: #fff;

+	}

+

+.floatableAlbum {

+	float: left;

+	width: 130px;

+	height: 150px;

 	padding: 10px;

-	height: 100px;

 	}

 

-#nowPlayingPanel {

-	background: #333;

-	width: 480px;

+.floatableMovieCover {

+	float: left;

+	width: 130px;

+	height: 200px;

+	padding: 10px;

+	}

+

+.floatableTVShowCover {

+	float: left;

+	padding: 10px;

+	width: 379px;

+	height: 70px;

+	}

+

+#libraryContainer .floatableAlbum,

+#movieLibraryContainer .floatableMovieCover,

+#tvshowLibraryContainer .floatableTVShowCover {

+	cursor: pointer;

+	}

+

+.floatableAlbum div.imgWrapper,

+.floatableMovieCover div.imgWrapper,

+.floatableTVShowCover div.imgWrapper {

+	width: 130px;

 	height: 130px;

+	display: table-cell;

+	vertical-align: middle;

+	text-align: center;

+	}

+

+div.imgWrapper div.inner {

+	overflow: hidden;

+	width: 130px;

+	}

+

+.floatableMovieCover div.imgWrapper,

+.floatableMovieCover div.imgWrapper div.inner {

+	height: 190px;

+	}

+

+#overlay {

+	top: 50px;

+	left: 0;

+	right: 0;

+	bottom: 150px;

+	background: #3f3f3f;

+	position: fixed;

+	opacity: 0.8;

+	z-index: 2000; /* Above contentContainer's */

+	}

+

+.floatableTVShowCover div.imgWrapper,

+.floatableTVShowCover img,

+.floatableTVShowCover div.imgWrapper div.inner {

+	height: 70px;

+	width: 379px;

+	}

+

+.floatableAlbum img {

+	width: 130px;

+	}

+

+.floatableMovieCover img {

+	height: 180px;

+	}

+

+.floatableAlbum p.album,

+.floatableMovieCover p.album {

+	font-size: 12px;

+	font-weight: 700;

+	color: #000;

+	text-align: center;

+	margin: 0;

+	padding: 0;

+	width: 130px;

+	white-space: nowrap;

+	overflow: hidden;

+	}

+

+.floatableAlbum p.artist,

+.floatableMovieCover p.artist {

+	font-size: 11px;

+	color: #777;

+	text-align: center;

+	margin: 0;

+	padding: 0;

+	}

+

+.contentContainer {

+	overflow-x: hidden;

+	overflow-y: auto;

+	position: absolute;

+	top: 51px;

+	bottom: 0;

+	left: 0;

+	right: 0;

+	background: #fff;

+	padding-bottom: 150px;

+	}

+

+.albumView .track {

+	cursor: pointer;

+	line-height: 10px;

+	font-size: 14px;

+	padding: 1px 0;

+	}

+

+/* Movie Overlay */

+

+.moviePopoverContainer {

+	z-index: 3000; /* Above overlay */

+	border: 1px solid #000;

 	padding: 10px;

+	margin: 10px;

+	position: fixed;

+	background: #3f3f3f;

+	top: 50px;

+	bottom: 150px;

+	left: 10%;

+	right: 10%;

+	opacity: 0.9;

+	}

+

+.moviePopoverContainer .closeButton {

+	float: right;

+	cursor: pointer;

+	}

+

+.moviePopoverContainer .movieCover {

+	height: 100%;

+	padding-right: 20px;

+	float: left;

+	z-index: 3100;

+	}

+

+.moviePopoverContainer .movieTitle {

+	font-size: 24px;

+	font-weight: 700;

+	color: #fff;

+	margin: 0;

+	}

+

+.moviePopoverContainer .runtime,

+.moviePopoverContainer .director,

+.moviePopoverContainer .genre,

+.moviePopoverContainer .plot {

+	color: #fff;

+	}

+

+.movieTitle .year {

+	font-weight: 400;

+	font-size: 18px;

+	}

+

+.playIcon {

+	background: url('/images/play-icon.png') center center no-repeat;

 	position: absolute;

-	top: 0px;

-	right: 0px;

+	z-index: 3500;

+	cursor: pointer;

+	opacity: 0.8;

+	}

+

+.playIcon:hover {

+	opacity: 1;

+	}

+

+/* Effects */

+

+#topScrollFade {

+	position: fixed;

+	top: 51px;

+	height: 33px;

+	z-index: 101;

+	left: 0;

+	right: 0;

+	background: url('/images/top-fade.png') top left repeat-x;

+	}

+

+/* Now Playing */

+

+#footerPopover {

+	position: fixed;

+	height: 150px;

+	bottom: 0;

+	left: 0;

+	right: 0;

+	z-index: 10000; /* Top most always */

+	background: #333;

+	opacity: 0.98;

+	}

+

+#nowPlayingPanel {

+	height: 130px;

+	width: 480px;

+	padding: 10px;

 	}

 

 #audioCoverArt img {

@@ -119,6 +347,7 @@ body {
 	width: 416px;

 	float: right;

 	cursor: pointer;

+	z-index: 1000;

 	}

 

 #nowPlayingPlaylist {

@@ -244,91 +473,4 @@ body {
 

 #pbNext:hover {

 	background: url('/images/OSDNextTrackFO.png') no-repeat;

-	}

-

-#navigation {

-	position: absolute;

-	top: 100px;

-	left: 0;

-	}

-

-#navigation ul {

-	list-style-type: none;

-	}

-

-#navigation ul li {

-	float: left;

-	background: #ccc;

-	color: #fff;

-	cursor: pointer;

-	border: 2px solid #333;

-	margin: 2px;

-	padding: 4px;

-	}

-

-#navigation ul li.selected,

-#navigation ul li:hover {

-	background: #aaa;

-	color: #333;

-	}

-

-.floatableAlbum {

-	float: left;

-	width: 130px;

-	height: 150px;

-	padding: 10px;

-	}

-

-#libraryContainer .floatableAlbum {

-	cursor: pointer;

-	}

-

-.floatableAlbum div.imgWrapper {

-	width: 130px;

-	height: 130px;

-	display: table-cell;

-	vertical-align: middle;

-	}

-

-.floatableAlbum img {

-	width: 130px;

-	}

-

-.floatableAlbum p.album {

-	font-size: 12px;

-	font-weight: 700;

-	color: #000;

-	text-align: center;

-	margin: 0;

-	padding: 0;

-	width: 130px;

-	white-space: nowrap;

-	overflow: hidden;

-	}

-

-.floatableAlbum p.artist {

-	font-size: 11px;

-	color: #777;

-	text-align: center;

-	margin: 0;

-	padding: 0;

-	}

-

-.contentContainer {

-	overflow-x: hidden;

-	overflow-y: auto;

-	position: absolute;

-	top: 150px;

-	bottom: 0;

-	left: 0;

-	right: 0;

-	background: #fff;

-	}

-

-.albumView .track {

-	cursor: pointer;

-	line-height: 10px;

-	font-size: 14px;

-	padding: 1px 0;

-	}

-

+	}
\ No newline at end of file
diff --git a/addons/webinterface.default/images/ajax-loader.gif b/addons/webinterface.default/images/ajax-loader.gif
new file mode 100644
index 0000000000..4fb7c23522
--- /dev/null
+++ b/addons/webinterface.default/images/ajax-loader.gif
diff --git a/addons/webinterface.default/images/close-button.png b/addons/webinterface.default/images/close-button.png
new file mode 100644
index 0000000000..767727a701
--- /dev/null
+++ b/addons/webinterface.default/images/close-button.png
diff --git a/addons/webinterface.default/images/header-selected-bg.png b/addons/webinterface.default/images/header-selected-bg.png
new file mode 100644
index 0000000000..b60d4aed0b
--- /dev/null
+++ b/addons/webinterface.default/images/header-selected-bg.png
diff --git a/addons/webinterface.default/images/logo.png b/addons/webinterface.default/images/logo.png
index 8001cdb2f6..0f1b681877 100644
--- a/addons/webinterface.default/images/logo.png
+++ b/addons/webinterface.default/images/logo.png
diff --git a/addons/webinterface.default/images/play-icon.png b/addons/webinterface.default/images/play-icon.png
new file mode 100644
index 0000000000..e75fa97be2
--- /dev/null
+++ b/addons/webinterface.default/images/play-icon.png
diff --git a/addons/webinterface.default/images/subheader-selected-bg.png b/addons/webinterface.default/images/subheader-selected-bg.png
new file mode 100644
index 0000000000..83725c9f2c
--- /dev/null
+++ b/addons/webinterface.default/images/subheader-selected-bg.png
diff --git a/addons/webinterface.default/images/top-fade.png b/addons/webinterface.default/images/top-fade.png
new file mode 100644
index 0000000000..21cc82bb1a
--- /dev/null
+++ b/addons/webinterface.default/images/top-fade.png
diff --git a/addons/webinterface.default/index.html b/addons/webinterface.default/index.html
index 8dfa157b28..c4690a36e5 100644
--- a/addons/webinterface.default/index.html
+++ b/addons/webinterface.default/index.html
@@ -9,13 +9,30 @@
 		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 

 		<!-- <link href="/images/logo.png" rel="image_src" /> -->

 		<meta name="robots" content="NOINDEX, NOFOLLOW">

-		<link href="/css/core.css" rel="stylesheet" type="text/css">

+		<link href="/css/core.css?1.1.0" rel="stylesheet" type="text/css">

 		<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>

 		<script type="text/javascript" src="/js/Launcher.js?1.0.0"></script>

 	</head>

 	<body>

 		<div id="header">

 			<img src="/images/logo.png" alt="XBMC Logo" class="logo">

+			<div id="navigation">

+				<ul>

+					<li id="remoteControl">Remote</li>

+					<li id="movieLibrary">Movies</li>

+					<li id="tvshowLibrary">TV Shows</li>

+					<li id="musicLibrary">Music</li>

+					<li id="settingsPanel">Settings</li>

+				</ul>

+			</div>

+			<img src="/images/ajax-loader.gif" alt="Loading please wait" id="spinner" style="display: none">

+		</div>

+		<div id="body">

+			<div id="topScrollFade" style="display: none;"></div>

+			<div id="content"></div>

+			<div id="overlay" style="display: none;"></div>

+		</div>

+		<div id="footerPopover">

 			<div id="nowPlayingPanel" style="display: none;">

 				<div id="nowPlayingContent">

 					<div id="audioDescription">

@@ -48,23 +65,8 @@
 					</div>

 				</div>

 				<span id="nextText">Next:</span>

-				<div id="nextTrack" style="display: none;">

-					

-				</div>

-				<div id="nowPlayingPlaylist" style="display: none;">

-

-				</div>

-			</div>

-		</div>

-		<div id="body">

-			<div id="navigation">

-				<ul>

-					<li id="musicLibrary">Music</li>

-					<li id="videoLibrary">Videos</li>

-				</ul>

-			</div>

-			<div id="content">

-

+				<div id="nextTrack" style="display: none;"></div>

+				<div id="nowPlayingPlaylist" style="display: none;"></div>

 			</div>

 		</div>

 		<script type="text/javascript">

diff --git a/addons/webinterface.default/js/Launcher.js b/addons/webinterface.default/js/Launcher.js
index 07a984c3b3..9751704f23 100644
--- a/addons/webinterface.default/js/Launcher.js
+++ b/addons/webinterface.default/js/Launcher.js
@@ -44,33 +44,38 @@
 //

 // For details, see the script.aculo.us web site: http://script.aculo.us/

 

+var DEBUG_MODE = true; /* Set to false to enable cached javascript */

+

 var Launcher = {

 	VERSION: '1.0.0',

 	REQUIRED_JQUERY: '1.4.2',

 	load: function(libraryName) {

-		document.write('<script type="text/javascript" src="' + libraryName + '?' + this.VERSION + '"><\/script>');

+		document.write('<script type="text/javascript" src="' + libraryName + '?' + (DEBUG_MODE ? this.randomValue() : this.VERSION) + '"><\/script>');

 	},

 	init: function() {

-	function convertVersionString(versionString) {

-		var v = versionString.replace(/_.*|\./g, '');

-		v = parseInt(v + (v.length == 4 ? '' : '0'));

-		return versionString.indexOf('_') > -1 ? v-1 : v;

-	}

+		function convertVersionString(versionString) {

+			var v = versionString.replace(/_.*|\./g, '');

+			v = parseInt(v + (v.length == 4 ? '' : '0'));

+			return versionString.indexOf('_') > -1 ? v-1 : v;

+		}

 

-	if(!jQuery || (convertVersionString(jQuery.fn.jquery) < convertVersionString(Launcher.REQUIRED_JQUERY)))

-		throw("XBMC Web Interface requires the jQuery JavaScript framework >= " + Launcher.REQUIRED_JQUERY);

+		if(!jQuery || (convertVersionString(jQuery.fn.jquery) < convertVersionString(Launcher.REQUIRED_JQUERY)))

+			throw("XBMC Web Interface requires the jQuery JavaScript framework >= " + Launcher.REQUIRED_JQUERY);

 

-	var js = /Launcher\.js(\?.*)?$/;

-	$('html').find('script[src]').each(

-		function(i, s) { 

-			if (s.src.match(js)) {

-				var path = s.src.replace(js, ''),

-				includes = s.src.match(/\?.*load=([a-z,]*)/);

-				$.each((includes ? includes[1] : 'jquery.lazyload,Core,MediaLibrary,NowPlayingManager').split(','), function(i, include) { 

-					Launcher.load(path + include + '.js') 

-				});

-			}

-		});

+		var js = /Launcher\.js(\?.*)?$/;

+		$('html').find('script[src]').each(

+			function(i, s) { 

+				if (s.src.match(js)) {

+					var path = s.src.replace(js, ''),

+					includes = s.src.match(/\?.*load=([a-z,]*)/);

+					$.each((includes ? includes[1] : 'jquery.lazyload,Core,MediaLibrary,NowPlayingManager').split(','), function(i, include) { 

+						Launcher.load(path + include + '.js') 

+					});

+				}

+			});

+	},

+	randomValue: function() {

+		return Math.random();

 	}

 }

 

diff --git a/addons/webinterface.default/js/MediaLibrary.js b/addons/webinterface.default/js/MediaLibrary.js
index c3375b21ae..20e0e0af66 100644
--- a/addons/webinterface.default/js/MediaLibrary.js
+++ b/addons/webinterface.default/js/MediaLibrary.js
@@ -30,14 +30,24 @@ MediaLibrary.prototype = {
 		},

 		bindControls: function() {

 			$('#musicLibrary').click(jQuery.proxy(this.musicLibraryOpen, this));

-			$('#videoLibrary').click(jQuery.proxy(this.videoLibraryOpen, this));

+			$('#movieLibrary').click(jQuery.proxy(this.movieLibraryOpen, this));

+			$('#tvshowLibrary').click(jQuery.proxy(this.tvshowLibraryOpen, this));

+			$('#overlay').click(jQuery.proxy(this.hideOverlay, this));

+			$(window).resize(jQuery.proxy(this.updatePlayButtonLocation, this));

+		},

+		resetPage: function() {

+			$('#musicLibrary').removeClass('selected');

+			$('#movieLibrary').removeClass('selected');

+			$('#tvshowLibrary').removeClass('selected');

+			this.hideOverlay();

 		},

 		musicLibraryOpen: function(event) {

+			this.resetPage();

 			$('#musicLibrary').addClass('selected');

-			$('#videoLibrary').removeClass('selected');

 			$('.contentContainer').css('z-index', 1);

 			var libraryContainer = $('#libraryContainer');

 			if (!libraryContainer || libraryContainer.length == 0) {

+				$('#spinner').show();

 				jQuery.post(JSON_RPC + '?GetAlbums', '{"jsonrpc": "2.0", "method": "AudioLibrary.GetAlbums", "params": { "start": 0, "fields": ["album_description", "album_theme", "album_mood", "album_style", "album_type", "album_label", "album_artist", "album_genre", "album_rating", "album_title"] }, "id": 1}', jQuery.proxy(function(data) {

 					if (data && data.result && data.result.albums) {

 							libraryContainer = $('<div>');

@@ -49,19 +59,26 @@ MediaLibrary.prototype = {
 						libraryContainer.html('');

 					}

 					$.each($(data.result.albums), jQuery.proxy(function(i, item) {

-						var floatableAlbum = this.generateAlbumThumb(item.thumbnail, item.album_title, item.album_artist);

-						floatableAlbum.bind('click', {album: item, }, jQuery.proxy(this.displayAlbumDetails, this));

+						var floatableAlbum = this.generateThumb('album', item.thumbnail, item.album_title, item.album_artist);

+						floatableAlbum.bind('click', { album: item }, jQuery.proxy(this.displayAlbumDetails, this));

 						libraryContainer.append(floatableAlbum);

 					}, this));

+					$('#spinner').hide();

 					//$('#libraryContainer img').lazyload();

+					libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));

+					libraryContainer.trigger('scroll');

 				}, this), 'json');

 			} else {

 				libraryContainer.css('z-index', 100);

+				libraryContainer.trigger('scroll');

 			}

 		},

-		generateAlbumThumb: function(thumbnail, album_title, album_artist) {

+		getThumbnailPath: function(thumbnail) {

+			return thumbnail ? ('/vfs/' + thumbnail) : DEFAULT_ALBUM_COVER;

+		},

+		generateThumb: function(type, thumbnail, album_title, album_artist) {

 			var floatableAlbum = $('<div>');

-			var path = thumbnail ? ('/vfs/' + thumbnail) : DEFAULT_ALBUM_COVER;

+			var path = this.getThumbnailPath(thumbnail);

 			var title = album_title;

 			var artist = album_artist;

 			if (title.length > 18 && !(title.length <= 21)) {

@@ -70,14 +87,29 @@ MediaLibrary.prototype = {
 			if (artist.length > 20 && !(artist.length <= 22)) {

 				artist = album_artist.substring(0, 20) + '...';

 			}

-			floatableAlbum.addClass('floatableAlbum')

-						  .html('<div class="imgWrapper"><img src="' + path + '" alt="" /></div><p class="album" title="' + album_title + '">' + title + '</p><p class="artist" title="' + album_artist + '">' + artist + '</p>');

-			return floatableAlbum

+			var className = '';

+			var code = '';

+			switch(type) {

+				case 'album':

+					className = 'floatableAlbum';

+					code = '<p class="album" title="' + album_title + '">' + title + '</p><p class="artist" title="' + album_artist + '">' + artist + '</p>';

+					break;

+				case 'movie':

+					className = 'floatableMovieCover';

+					code = '<p class="album" title="' + album_title + '">' + title + '</p>';

+					break;

+				case 'tvshow':

+					className = 'floatableTVShowCover';

+					break;

+			}

+			floatableAlbum.addClass(className).html('<div class="imgWrapper"><div class="inner"><img src="' + path + '" alt="" /></div></div>' + code);

+			return floatableAlbum;

 		},

 		displayAlbumDetails: function(event) {

-			

 			var albumDetailsContainer = $('#albumDetails' + event.data.album.albumid);

+			$('#topScrollFade').hide();

 			if (!albumDetailsContainer || albumDetailsContainer.length == 0) {

+				$('#spinner').show();

 				jQuery.post(JSON_RPC + '?GetSongs', '{"jsonrpc": "2.0", "method": "AudioLibrary.GetSongs", "params": { "fields": ["title", "artist", "genre", "tracknumber", "discnumber", "duration", "year"], "albumid" : ' + event.data.album.albumid + ' }, "id": 1}', jQuery.proxy(function(data) {

 					albumDetailsContainer = $('<div>');

 					albumDetailsContainer.attr('id', 'albumDetails' + event.data.album.albumid)

@@ -97,19 +129,19 @@ MediaLibrary.prototype = {
 							trackRow.append(albumTD);

 						}

 						var trackNumberTD = $('<td>');

-						trackNumberTD.html(item.tracknumber).addClass('track').bind('click', { song: item }, jQuery.proxy(this.playTrack, this));

+						trackNumberTD.html(item.tracknumber).addClass('track').bind('click', { song: item, album: event.data.album }, jQuery.proxy(this.playTrack, this));

 						trackRow.append(trackNumberTD);

 						var trackTitleTD = $('<td>');

-						trackTitleTD.html(item.title).addClass('track').bind('click', { song: item }, jQuery.proxy(this.playTrack, this));

+						trackTitleTD.html(item.title).addClass('track').bind('click', { song: item, album: event.data.album }, jQuery.proxy(this.playTrack, this));

 						trackRow.append(trackTitleTD);

 						var trackDurationTD = $('<td>');

-						trackDurationTD.html(durationToString(item.duration)).addClass('track').bind('click', { song: item }, jQuery.proxy(this.playTrack, this));

+						trackDurationTD.html(durationToString(item.duration)).addClass('track').bind('click', { song: item, album: event.data.album }, jQuery.proxy(this.playTrack, this));

 						trackRow.append(trackDurationTD);

 						var trackArtistTD = $('<td>');

-						trackArtistTD.html(item.artist).addClass('track').bind('click', { song: item }, jQuery.proxy(this.playTrack, this));

+						trackArtistTD.html(item.artist).addClass('track').bind('click', { song: item, album: event.data.album }, jQuery.proxy(this.playTrack, this));

 						trackRow.append(trackArtistTD);

 						var trackGenreTD = $('<td>');

-						trackGenreTD.html(item.genre).addClass('track').bind('click', { song: item }, jQuery.proxy(this.playTrack, this));

+						trackGenreTD.html(item.genre).addClass('track').bind('click', { song: item, album: event.data.album }, jQuery.proxy(this.playTrack, this));

 						trackRow.append(trackGenreTD);

 						$('#albumDetails' + event.data.album.albumid + ' .resultSet').append(trackRow);

 					}, this));

@@ -132,22 +164,167 @@ MediaLibrary.prototype = {
 						trackRow.append(trackGenreTD);

 						$('#albumDetails' + event.data.album.albumid + ' .resultSet').append(trackRow);

 					}

-					$('#albumDetails' + event.data.album.albumid + ' .albumThumb').append(this.generateAlbumThumb(albumThumbnail, albumTitle, albumArtist));

+					$('#albumDetails' + event.data.album.albumid + ' .albumThumb').append(this.generateThumb('album', albumThumbnail, albumTitle, albumArtist));

 					$('.contentContainer').css('z-index', 1);

+					$('#spinner').hide();

 				}, this), 'json');

 			} else {

 				$('.contentContainer').css('z-index', 1);

 				$('#albumDetails' + event.data.album.albumid).css('z-index', 100);

 			}

 		},

-		playTrack: function(event) {

-			jQuery.post(JSON_RPC + '?PlaySong', '{"jsonrpc": "2.0", "method": "XBMC.Play", "params": { "songid": ' + event.data.song.songid + ' }, "id": 1}', jQuery.proxy(function(data) {

+		hideOverlay: function(event) {

+			if (this.activeCover) {

+				$(this.activeCover).remove();

+				this.activeCover = null;

+			}

+			$('#overlay').hide();

+		},

+		updatePlayButtonLocation: function(event) {

+			var movieContainer = $('.movieCover');

+			if (movieContainer.length > 0) {

+				var playIcon = $('.playIcon');

+				if (playIcon.length > 0) {

+					playIcon.width($(movieContainer[0]).width());

+					playIcon.height($(movieContainer[0]).height());

+				}

+			}

+		},

+		playMovie: function(event) {

+			jQuery.post(JSON_RPC + '?PlayMovie', '{"jsonrpc": "2.0", "method": "XBMC.Play", "params": { "movieid": ' + event.data.movie.movieid + ' }, "id": 1}', jQuery.proxy(function(data) {

+				

+				this.hideOverlay();

+			}, this), 'json');

+		},

+		displayMovieDetails: function(event) {

+			var movieDetails = $('<div>');

+			movieDetails.attr('id', 'movie-' + event.data.movie.movieid);

+			movieDetails.addClass('moviePopoverContainer');

+			var closeButton = $('<img>');

+			closeButton.attr('src', '/images/close-button.png');

+			closeButton.addClass('closeButton').bind('click', jQuery.proxy(this.hideOverlay, this));

+			movieDetails.append(closeButton);

+			var movieCover = $('<img>');

+			movieCover.attr('src', this.getThumbnailPath(event.data.movie.thumbnail)).addClass('movieCover');

+			movieDetails.append(movieCover);

+			var playIcon = $('<div>');

+			playIcon.addClass('playIcon');

+			playIcon.bind('click', {movie: event.data.movie}, jQuery.proxy(this.playMovie, this));

+			movieDetails.append(playIcon);

+			var movieTitle = $('<p>');

+			movieTitle.addClass('movieTitle');

+			var yearText = event.data.movie.year ? ' <span class="year">(' + event.data.movie.year + ')</span>' : '';

+			movieTitle.html(event.data.movie.title + yearText);

+			movieDetails.append(movieTitle);

+			if (event.data.movie.runtime) {

+				var runtime = $('<p>');

+				runtime.addClass('runtime').html('<strong>Runtime:</strong> ' + event.data.movie.runtime + ' minutes');

+				movieDetails.append(runtime);

+			}

+			if (event.data.movie.plot) {

+				var plot = $('<p>');

+				plot.addClass('plot').html(event.data.movie.plot);

+				movieDetails.append(plot);

+			}

+			if (event.data.movie.genre) {

+				var genre = $('<p>');

+				genre.addClass('genre').html('<strong>Genre:</strong> ' + event.data.movie.genre);

+				movieDetails.append(genre);

+			}

+			if (event.data.movie.rating) {

+				//Todo

+			}

+			if (event.data.movie.director) {

+				var director = $('<p>');

+				director.addClass('director').html('<strong>Directed By:</strong> ' + event.data.movie.director);

+				movieDetails.append(director);

+			}

+			this.activeCover = movieDetails;

+			$('body').append(movieDetails);

+			$('#overlay').show();

+			this.updatePlayButtonLocation();

+		},

+		displayTVShowDetails: function(event) {

 

+		},

+		playTrack: function(event) {

+			jQuery.post(JSON_RPC + '?ClearPlaylist', '{"jsonrpc": "2.0", "method": "AudioPlaylist.Clear", "id": 1}', jQuery.proxy(function(data) {

+				//check that clear worked.

+				jQuery.post(JSON_RPC + '?AddAlbumToPlaylist', '{"jsonrpc": "2.0", "method": "AudioPlaylist.Add", "params": { "albumid": ' + event.data.album.albumid + ' }, "id": 1}', jQuery.proxy(function(data) {

+					//play specific song in playlist

+					jQuery.post(JSON_RPC + '?PlaylistItemPlay', '{"jsonrpc": "2.0", "method": "AudioPlaylist.Play", "params": { "songid": ' + event.data.song.songid + ' }, "id": 1}', function() {}, 'json');

+				}, this), 'json');

 			}, this), 'json');

 		},

-		videoLibraryOpen: function() {

-			$('#musicLibrary').removeClass('selected');

-			$('#videoLibrary').addClass('selected');

-			$('#content').html('');

+		movieLibraryOpen: function() {

+			this.resetPage();

+			$('#movieLibrary').addClass('selected');

+			$('.contentContainer').css('z-index', 1);

+			var libraryContainer = $('#movieLibraryContainer');

+			if (!libraryContainer || libraryContainer.length == 0) {

+				$('#spinner').show();

+				jQuery.post(JSON_RPC + '?GetMovies', '{"jsonrpc": "2.0", "method": "VideoLibrary.GetMovies", "params": { "start": 0, "fields": ["genre", "director", "trailer", "tagline", "plot", "plotoutline", "title", "originaltitle", "lastplayed", "showtitle", "firstaired", "duration", "season", "episode", "runtime", "year", "playcount", "rating"] }, "id": 1}', jQuery.proxy(function(data) {

+					if (data && data.result && data.result.movies) {

+							libraryContainer = $('<div>');

+							libraryContainer.css('z-index', 100)

+											.attr('id', 'movieLibraryContainer')

+											.addClass('contentContainer');

+							$('#content').append(libraryContainer);

+					} else {

+						libraryContainer.html('');

+					}

+					$.each($(data.result.movies), jQuery.proxy(function(i, item) {

+						var floatableMovieCover = this.generateThumb('movie', item.thumbnail, item.title, "");

+						floatableMovieCover.bind('click', { movie: item }, jQuery.proxy(this.displayMovieDetails, this));

+						libraryContainer.append(floatableMovieCover);

+					}, this));

+					$('#spinner').hide();

+					libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));

+					libraryContainer.trigger('scroll');

+					//$('#libraryContainer img').lazyload();

+				}, this), 'json');

+			} else {

+				libraryContainer.css('z-index', 100);

+				libraryContainer.trigger('scroll');

+			}

+		},

+		tvshowLibraryOpen: function() {

+			this.resetPage();

+			$('#tvshowLibrary').addClass('selected');

+			$('.contentContainer').css('z-index', 1);

+			var libraryContainer = $('#tvshowLibraryContainer');

+			if (!libraryContainer || libraryContainer.length == 0) {

+				$('#spinner').show();

+				jQuery.post(JSON_RPC + '?GetTVShows', '{"jsonrpc": "2.0", "method": "VideoLibrary.GetTVShows", "params": { "start": 0, "fields": ["genre", "director", "trailer", "tagline", "plot", "plotoutline", "title", "originaltitle", "lastplayed", "showtitle", "firstaired", "duration", "season", "episode", "runtime", "year", "playcount", "rating"] }, "id": 1}', jQuery.proxy(function(data) {

+					if (data && data.result && data.result.tvshows) {

+							libraryContainer = $('<div>');

+							libraryContainer.css('z-index', 100)

+											.attr('id', 'tvshowLibraryContainer')

+											.addClass('contentContainer');

+							$('#content').append(libraryContainer);

+					} else {

+						libraryContainer.html('');

+					}

+					$.each($(data.result.tvshows), jQuery.proxy(function(i, item) {

+						var floatableTVShowCover = this.generateThumb('tvshow', item.thumbnail, item.title, "");

+						floatableTVShowCover.bind('click', { tvshow: item }, jQuery.proxy(this.displayTVShowDetails, this));

+						libraryContainer.append(floatableTVShowCover);

+					}, this));

+					//$('#libraryContainer img').lazyload();

+					$('#spinner').hide();

+					libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));

+					libraryContainer.trigger('scroll');

+				}, this), 'json');

+			} else {

+				libraryContainer.css('z-index', 100);

+				libraryContainer.trigger('scroll');

+			}

+		},

+		updateScrollEffects: function(event) {

+			if (event.data.activeLibrary && $(event.data.activeLibrary).scrollTop() > 0) {

+				$('#topScrollFade').fadeIn();

+			} else {

+				$('#topScrollFade').fadeOut();

+			}

 		}

 	}
\ No newline at end of file
diff --git a/addons/webinterface.default/js/NowPlayingManager.js b/addons/webinterface.default/js/NowPlayingManager.js
index d608bd86f6..29278ece3f 100644
--- a/addons/webinterface.default/js/NowPlayingManager.js
+++ b/addons/webinterface.default/js/NowPlayingManager.js
@@ -35,7 +35,7 @@ NowPlayingManager.prototype = {
 			$(window).bind('click', jQuery.proxy(this.hidePlaylist, this));

 		},

 		updateState: function() {

-			jQuery.post(JSON_RPC, '{"jsonrpc": "2.0", "method": "Player.GetActivePlayers", "id": 1}', jQuery.proxy(function(data) {

+			jQuery.post(JSON_RPC + '?UpdateState', '{"jsonrpc": "2.0", "method": "Player.GetActivePlayers", "id": 1}', jQuery.proxy(function(data) {

 				if (data && data.result) {

 					if (data.result.audio) {

 						this.activePlayer = 'Audio';

@@ -166,8 +166,8 @@ NowPlayingManager.prototype = {
 				data: '{"jsonrpc": "2.0", "method": "AudioPlaylist.GetItems", "params": { "fields": ["title", "album", "artist", "duration"] }, "id": 1}', 

 				success: jQuery.proxy(function(data) {

 					if (data && data.result && data.result.items && data.result.total > 0) {

-						//Compare new playlist to active playlist, only redraw if a change is noticed.

-						if (this.playlistChanged(data.result.items) || (this.activePlaylistItem && (this.activePlaylistItem.seq != data.result.current))) {

+						//Compare new playlist to active playlist, only redraw if a change is noticed

+						if (!this.activePlaylistItem || this.playlistChanged(data.result.items) || (this.activePlaylistItem && (this.activePlaylistItem.seq != data.result.current))) {

 							var ul = $('<ul>');

 							var activeItem;

 							$.each($(data.result.items), jQuery.proxy(function(i, item) {

@@ -179,16 +179,17 @@ NowPlayingManager.prototype = {
 									li.addClass('activeItem');

 								}

 								if (i == (data.result.current + 1)) {

-									$('#nextTrack').html(code);

-									$('#nextTrack').show();

+									$('#nextTrack').html(code).show();

 								}

 								li.bind('click', jQuery.proxy(this.playPlaylistItem, this));

 								ul.append(li.attr('seq', i).html(code));

 							}, this));

 							if (data.result.total > 1) {

+								if (activeItem && data.result.total-1 == activeItem.seq) {

+									$('#nextTrack').html('<div class="trackInfo">Last track in playlist</div>').show();

+								}

 								$('#nextText').show();

-								$('#nowPlayingPlaylist').html('')

-														.append(ul);

+								$('#nowPlayingPlaylist').html('').append(ul);

 							} else {

 								$('#nextText').hide();

 								$('#nowPlayingPlaylist').hide();

@@ -226,12 +227,10 @@ NowPlayingManager.prototype = {
 			});

 		},

 		stopAudioPlaylistUpdate: function() {

-			this.stopRefreshTime();

 			this.autoRefreshAudioPlaylist = false;

 			this.updateActiveItemDurationRunOnce = false;

 		},

 		stopVideoPlaylistUpdate: function() {

-			this.stopRefreshTime();

 			this.autoRefreshVideoPlaylist = false;

 			this.updateActiveItemDurationRunOnce = false;

 		},

@@ -255,10 +254,10 @@ NowPlayingManager.prototype = {
 							this.refreshVideoData();

 						}

 					}

-					if (this.autoRefreshData && !this.activeItemTimer) {

-						this.activeItemTimer = 1;

-						setTimeout(jQuery.proxy(this.updateActiveItemDurationLoop, this), 1000);

-					}

+				}

+				if (this.autoRefreshData && !this.activeItemTimer) {

+					this.activeItemTimer = 1;

+					setTimeout(jQuery.proxy(this.updateActiveItemDurationLoop, this), 1000);

 				}

 			}, this), 'json');

 		},

@@ -409,15 +408,17 @@ NowPlayingManager.prototype = {
 									li.addClass('activeItem');

 								}

 								if (i == (data.result.current + 1)) {

-									$('#nextTrack').html(code);

+									$('#nextTrack').html(code).show();

 								}

 								li.bind('click', jQuery.proxy(this.playPlaylistItem, this));

 								ul.append(li.attr('seq', i).html(code));

 							}, this));

 							if (data.result.total > 1) {

 								$('#nextText').show();

-								$('#nowPlayingPlaylist').html('')

-														.append(ul);

+								if (activeItem && data.result.total == activeItem.seq) {

+									$('#nextTrack').html('<div class="trackInfo">Last track in playlist</div>').show();

+								}

+								$('#nowPlayingPlaylist').html('').append(ul);

 							} else {

 								$('#nextText').hide();

 								$('#nowPlayingPlaylist').hide();