X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=js%2Fmain.js;h=3f27f62e22fe16d72a6c0474b135672b5fc8fd91;hb=262aecba0ffd07361b5ca6ac08bb881e68faf0ef;hp=5124c120d86b4f8bb139d1a12eca791aa1a53b70;hpb=9d31aab17fdea42274e57f28d1d614488c2d0a4c;p=profile%2Fivi%2FMediaPlayer.git

diff --git a/js/main.js b/js/main.js
index 5124c12..3f27f62 100644
--- a/js/main.js
+++ b/js/main.js
@@ -16,37 +16,32 @@ var screenOrientation;
 var iconWidth;
 var padding;
 var contentType = "AUDIO";
-var audioContent = new Array();
-var videoContent = new Array();
-var imageContent = new Array();
-var currentContent;
 var currentPlayer;
-var currentPlayerType = "AUDIO";
 var currentMediaList = $("#audioMediaList");
-var currentMediaListItems = $("#audioMediaListItems");
-var currentPlayerControls;
 var audioMediaListLoaded = false;
 var videoMediaListLoaded = false;
 var imageMediaListLoaded = false;
 var audioPlayer;
 var videoPlayer;
-var audioIndex = 0;
-var videoIndex = 0;
-var imageIndex = 0;
+var imagePlayer;
 var vidIcon = new Image();
 var imgIcon = new Image();
 var musicIcon = new Image();
 var imagesLoaded = false;
 var mediaListItemW;
 var mediaListItemH;
-var imageControls;
-var loadAndPlay = false;
-var currentFileLoaded = false;
+var playOnConnect = false;
 var mediaNameCanvas;
 var mediaNameCTX;
+var trackTimeCanvas;
+var trackTimeCTX;
 var speechObj;
 var nightMode = false;
 var waitingToResumeVideo = false;		//Media has been paused by exterior forces.  If set to true, resume previous media when given the signal.
+var stopServerSearch;
+var playBarHeight;
+var boxWidth;
+var textStartX;
 
 var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
 		"largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
@@ -60,6 +55,9 @@ var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5,
 var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
 		"largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
 
+var timeTemplate = {"font" : "bold 25pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
+		"largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
+
 var mediaTextTemplate2 = {"font" : "bold 20pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
 		"shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
 
@@ -67,10 +65,10 @@ var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillSt
 
 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
 
-var mediaTextTemplate2Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
+var mediaTextTemplate2Landscape = {"font" : "bold 13pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
 		"shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
 
-var mediaTextTemplate3Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
+var mediaTextTemplate3Landscape = {"font" : "bold 13pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
 
 var trackTextTemplateLandscape  = {"font" : "bold 11pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
 
@@ -151,191 +149,97 @@ function setupSpeech()
 
 }
 
-function updateMediaName(newArtist, newTitle, newCover)
+function onAudioContentLoaded(newContent)
 {
-	if (currentMenu === "audio")
+	if (!newContent || newContent.length === 0)
 	{
-		var playBarHeight = mediaNameCanvas.height;
-		var boxWidth = playBarHeight * 0.75;
-		mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
-
-		if (currentPlayerType === "AUDIO")
-		{
-			var shadeJump = 10;
-			var alphaJump = 0.01;
-			var currColor = 255;
-			var currAlpha = 1.0;
-
-			mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
-			mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
-			mediaNameCTX.lineWidth = 5;
-			mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
-			mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
-
-			if (newCover === undefined || newCover.naturalWidth === undefined || newCover.naturalWidth <= 0)
-			{
-				newCover = musicIcon;
-			}
-
-			mediaNameCTX.drawImage(newCover, 20, (playBarHeight - boxWidth) / 2, boxWidth, boxWidth);
-
-			if (screenOrientation === "portrait")
-			{
-				var textStartX = boxWidth + 50;
-
-				var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0,
-									"width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 65, "wordWrap" : true});
-				trackText.applyTemplate(mainMenuTitleTemplate);
-
-				var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70, "zLoc" : 0,
-										"width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
-				artistText.applyTemplate(mainTrackTemplate);
-			}
-			else
-			{
-				var textStartX = boxWidth + 50;
-				var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 50 , "zLoc" : 0,
-										"width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
-				trackText.applyTemplate(mainMenuTitleTemplateLandscape);
-				var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0,
-										"width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
-				artistText.applyTemplate(mainTrackTemplateLandscape);
-			}
-
-			trackText.drawObj();
-			trackText.drawLargeShadow();
-
-			artistText.yLoc += trackText.height;
-			artistText.drawObj();
-		}
+		console.log("MediaPlayer: some content failed to load, trying again for " + audioPlayer.type);
+		audioPlayer.clearContent();
+		setTimeout(function(){getMedia(onAudioContentLoaded, "AUDIO");}, 3000);
+		return;
+	}
+	else
+	{
+		audioPlayer.updateContent(newContent, true);
+		audioPlayer.onContentLoaded();
 	}
 }
 
-function onContentItemArraySuccess(content)
+function onVideoContentLoaded(newContent)
 {
-	console.log("MediaPlayer in onContentItemArraySuccess");
-	var emptyContent = true;
-
-	if (!content || content === undefined || content.length <= 0)
-		console.log("Invalid content for " + contentType);
+	if (!newContent || newContent.length === 0)
+	{
+		console.log("MediaPlayer: some content failed to load, trying again for " + videoPlayer.type);
+		videoPlayer.clearContent();
+		setTimeout(function(){getMedia(onVideoContentLoaded, "VIDEO");}, 3000);
+		return;
+	}
 	else
 	{
-		emptyContent = false;
+		videoPlayer.updateContent(newContent, true);
+		videoPlayer.onContentLoaded();
 	}
+}
 
-	switch (contentType)
+function onImageContentLoaded(newContent)
+{
+	if (!newContent || newContent.length === 0)
 	{
-	case "AUDIO":
-
-			if (!emptyContent)
-			{
-				try
-				{
-					audioContent = audioContent.concat(content);
-
-					$("#audioSrc").attr("src", audioContent[0].contentURI);
-					audioPlayer.load();
-
-					var imgSources = [];
-					for (var i = 0; i < audioContent.length; i++)
-					{
-						var iconURI = (audioContent[i].thumbnailURIs !== undefined && audioContent[i].thumbnailURIs !== null) ? audioContent[i].thumbnailURIs[0] : "images/musicIcon.png";
-						audioContent[i].coverArtURI = iconURI;
-					}
-
-					loadImages();
-
-					audioMediaListLoaded = true;
-					currentMediaListItems = $("#audioMediaListItems");
-					fillMediaList(audioContent);
-				}
-
-				catch (err)
-				{
-					console.log("Error when parsing audioContent");
-				}
-			}
-
-		contentType = "VIDEO";
-		break;
-
-	case "VIDEO":
-		if (!emptyContent)
-		{
-			videoContent = videoContent.concat(content);
-			$("#videoSrc").attr("src", videoContent[0].contentURI);
-		}
-		contentType = "IMAGE";
-		break;
-
-	case "IMAGE":
-		if (!emptyContent)
-		{
-			imageContent = imageContent.concat(content);
-			$("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
-			$("#imagePlayer").css("background-size", "contain");
-		}
-		contentType = undefined;
-		break;
-
-	default:
-		console.log("Undefined content search type");
-	nextContentType = undefined;
-	break;
+		console.log("MediaPlayer: some content failed to load, trying again for " + imagePlayer.type);
+		imagePlayer.clearContent();
+		setTimeout(function(){getMedia(onImageContentLoaded, "IMAGE");}, 3000);
+		return;
+	}
+	else
+	{
+		imagePlayer.updateContent(newContent, true);
+		imagePlayer.onContentLoaded();
 	}
-
-	if (contentType !== undefined)
-		getMedia(contentType);
 }
 
-function getMedia(mediaType)
+function getMedia(callback, filterType)
 {
 	console.log("MediaPlayer in getMedia");
 	var manager = tizen.content;
-
-	var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
-	manager.find(onContentItemArraySuccess, onError, null, filter);
+	if (manager)
+	{
+		var filter = new tizen.AttributeFilter("type", "EXACTLY", filterType);
+		manager.find(callback, onError, null, filter);
+	}
+	else
+		console.log("MediaPlayer failed to receive media, tizen.content is unavailable");
 }
 
 function showMediaMenu()
 {
 	console.log("MediaPlayer in showMediaMenu");
-	$(".navButton").fadeIn(800);
+	$(".navButton").show();
 
-	switch(currentPlayerType)
+	switch(currentPlayer.type)
 	{
-		case "AUDIO":
-			//show audio player
-			try
-			{
-				if (audioContent.length > 0)
-					updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
-			}
-			catch(err)
-			{
-				console.log("updateMediaName failed for showMediaMenu (audio) : " + err.message);
-			}
-
-			$("#mediaName").fadeIn(800);
-			$(".sortButton").fadeIn(800);
-			currentPlayer.fadeIn(800);
+		case "audio":
+			$("#mediaName").show();
+			$("#trackTime").show();
+			$(".sortButton").show();
+			currentPlayer.show();
 
 			if (screenOrientation === "landscape" )
 				$("#audioMediaList").addClass("landscape");
 			else
 				$("#audioMediaList").removeClass("landscape");
 
-			$("#audioMediaList").fadeIn(800);
+			$("#audioMediaList").show();
 			break;
 
-		case "VIDEO":
+		case "video":
 			//show video
-			setTimeout(function(){currentPlayer.show()}, 800); 		//The video element can't be faded, so wait a moment before showing
+			currentPlayer.show();
+			//setTimeout(function(){currentPlayer.show()}, 800); 		//The video element can't be faded, so wait a moment before showing
 			break;
 
-		case "IMAGE":
+		case "image":
 			//show image
-			currentPlayer.fadeIn(800);
+			currentPlayer.show();
 			break;
 
 		default:
@@ -349,10 +253,10 @@ function showMediaList()
 	console.log("MediaPlayer in showMediaList");
 
 	if (currentMediaList.is(":visible"))
-		currentMediaList.fadeOut(300);
+		currentMediaList.hide();
 	else
 	{
-		currentMediaList.fadeIn(300);
+		currentMediaList.show();
 	}
 }
 
@@ -365,6 +269,7 @@ function changeMenu(menuButtonId)
 	var buttonBottom = clickedButton.css("bottom");
 	var buttonRight  = clickedButton.css("right");
 
+/*
 	//Animate the clicked button slightly
 	clickedButton.animate({
 		bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
@@ -383,23 +288,29 @@ function changeMenu(menuButtonId)
 			clickedButton.css({"bottom": buttonBottom});
 	}
 	);
-
-	$(".mainButton").fadeOut(300);
+*/
+	$(".mainButton").hide();
 
 	switch(menuButtonId)
 	{
 		case ("mainMusicButton"):
 			speechObj.vocalizeString("Music player");
 			currentMenu = "audio";
-			currentPlayer = $("#audioPlayer");
-			currentPlayerControls = document.getElementById("audioPlayer");
-			currentPlayerType = "AUDIO";
+			currentPlayer = audioPlayer;
 			currentMediaList = $("#audioMediaList");
-			currentMediaListItems = $("#audioMediaListItems");
-			currentContent = audioContent;
+			localStorage.prevMenu = "mainMusicButton";
+
+			if (audioPlayer.currentAudioContent && audioPlayer.currentAudioContent.contentURI)
+			{
+				localStorage.prevAudioTrack = audioPlayer.currentAudioContent.contentURI
+				localStorage.prevAudioTime = audioPlayer.playerControls.currentTime;
+			}
+
+			localStorage.prevVideo = undefined;
+			localStorage.prevVideoTime = undefined;
 
 			if (!audioMediaListLoaded)
-				fillMediaList(currentContent);
+				audioPlayer.fillMediaList();
 
 			showMediaMenu();
 		break;
@@ -407,15 +318,21 @@ function changeMenu(menuButtonId)
 		case ("mainVideoButton"):
 			speechObj.vocalizeString("Video player");
 			currentMenu = "video";
-			currentPlayer = $("#videoPlayer");
-			currentPlayerControls = document.getElementById("videoPlayer");
-			currentPlayerType = "VIDEO";
+			currentPlayer = videoPlayer;
 			currentMediaList = $("#videoMediaList");
-			currentMediaListItems = $("#videoMediaListItems");
-			currentContent = videoContent;
+			localStorage.prevMenu = "mainVideoButton";
+
+			if (videoPlayer.currentVideoContent && videoPlayer.currentVideoContent.contentURI)
+			{
+				localStorage.prevVideo = videoPlayer.currentVideoContent.contentURI
+				localStorage.prevVideoTime = videoPlayer.playerControls.currentTime;
+			}
+
+			localStorage.prevAudioTime = undefined;
+			localStorage.prevAudioTrack = undefined;
 
 			if (!videoMediaListLoaded)
-				fillMediaList(currentContent);
+				videoPlayer.fillMediaList();
 
 			showMediaMenu();
 		break;
@@ -423,15 +340,12 @@ function changeMenu(menuButtonId)
 		case ("mainImageButton"):
 			speechObj.vocalizeString("Picture viewer");
 			currentMenu = "image";
-			currentPlayer = $("#imagePlayer");
-			currentPlayerControls = imageControls;
-			currentPlayerType = "IMAGE";
+			currentPlayer = imagePlayer;
 			currentMediaList = $("#imageMediaList");
-			currentMediaListItems = $("#imageMediaListItems");
-			currentContent = imageContent;
+			localStorage.prevMenu = "mainImageButton";
 
 			if (!imageMediaListLoaded)
-				fillMediaList(currentContent);
+				imagePlayer.fillMediaList();
 
 			showMediaMenu();
 		break;
@@ -443,103 +357,43 @@ function changeMenu(menuButtonId)
 
 function showMainMenu()
 {
-	console.log("MediaPlayer in showMainMenu");
+	console.log("MediaPlayer in showMainMenu, clearing all localStorage...");
 	currentMenu = "main";
-	currentPlayerControls.pause();
+	localStorage.prevMenu = "MAIN";
+	localStorage.prevAudioTime = undefined;
+	localStorage.prevAudioTrack = undefined;
+	localStorage.prevVideo = undefined;
+	localStorage.prevVideoTime = undefined;
+	localStorage.prevImage = undefined;
 
-	$("#playButton").toggleClass('playing', false);
+	currentPlayer.pause();
 
 	//If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
 	if (currentMediaList.is(":visible"))
-		currentMediaList.fadeOut(300);
-
-	$(".navButton").fadeOut(300);
-	$(".sortButton").fadeOut(300);
-	$("#mediaName").fadeOut(300);
-
-	if (currentPlayerType !== "VIDEO")
-		currentPlayer.fadeOut(300);
-	else
-		currentPlayer.hide();
-
+		currentMediaList.hide();
 
+	$(".navButton").hide();
+	$(".sortButton").hide();
+	$("#mediaName").hide();
+	$("#trackTime").hide();
+	$(".player").hide();
 	$(".mainButton").css({"opacity": "100"});
-	$(".mainButton").fadeIn(800);
+	$(".mainButton").show();
 }
 
 function sortByAlpha(contentToSort)
 {
-	console.log("MediaPlayer in sortByAlpha");
-
-	if (currentPlayerType === "AUDIO")
-		emptyTimeouts();
-
-	//If contentToSort is undefined it's because the request came from the sortBy buttons
-	if (contentToSort === undefined)
-		contentToSort = audioContent;
-
-	contentToSort.sort(function (a,b) {
-		var first = a.title.toLowerCase();
-		var second = b.title.toLowerCase();
-
-		if (first < second)
-			return -1;
-		if (first > second)
-			return 1;
-
-		return 0;
-	});
-
-	fillMediaList(contentToSort);
+	currentPlayer.sortByAlpha();
 }
 
 function sortByArtist(contentToSort)
 {
-	console.log("MediaPlayer in sortByArtist");
-
-	if (currentPlayerType === "AUDIO")
-		emptyTimeouts();
-
-	if (contentToSort === undefined)
-		contentToSort = audioContent;
-
-	contentToSort.sort(function (a,b) {
-		var first = a.artists[0].toLowerCase();
-		var second = b.artists[0].toLowerCase();
-
-		if (first < second)
-			return -1;
-		if (first > second)
-			return 1;
-
-		return 0;
-	});
-
-	fillMediaList(contentToSort);
+	currentPlayer.sortByArtist();
 }
 
 function sortByAlbum(contentToSort)
 {
-	if (currentPlayerType === "AUDIO")
-		emptyTimeouts();
-
-	console.log("MediaPlayer in sortByAlbum");
-	if (contentToSort === undefined)
-		contentToSort = audioContent;
-
-	contentToSort.sort(function (a,b) {
-		var first = a.album.toLowerCase();
-		var second = b.album.toLowerCase();
-
-		if (first < second)
-			return -1;
-		if (first > second)
-			return 1;
-
-		return 0;
-	});
-
-	fillMediaList(contentToSort);
+	currentPlayer.sortByAlbum();
 }
 
 /**************************************** NAVIGATION FUNCTIONS *******************************************/
@@ -547,163 +401,43 @@ function sortByAlbum(contentToSort)
 // This function is called once a file being loaded is ready to play
 function playLoadedMedia()
 {
-	console.log("MediaPlayer in playLoadedMedia");
-	currentFileLoaded = true;
-
-	if (loadAndPlay)
-	{
-		currentPlayerControls.play();
+	audioPlayer.playLoadedMedia();
+}
 
-		$("#playButton").toggleClass('playing', true);
-		loadAndPlay = false;
-	}
+function videoLoaded()
+{
+    videoPlayer.videoLoaded();
 }
 
 function playButtonClick()
 {
 	console.log("MediaPlayer in playButtonClick");
-	if (currentPlayerType !== "AUDIO" || currentFileLoaded)
-	{
-		if (currentPlayerControls.paused)
-		{
-			$("#playButton").toggleClass('playing', true);
-			currentPlayerControls.play();
-		}
-		else
-		{
-			$("#playButton").toggleClass('playing', false);
-			currentPlayerControls.pause();
-		}
-	}
+	if (!currentPlayer.playing())
+		currentPlayer.play();
 	else
-		console.log(audioContent[audioIndex].artists[0] + " : " + audioContent[audioIndex].title + " can't play yet, it hasn't loaded");
+		currentPlayer.pause();
 }
 
 function pauseButtonClick()
 {
 	console.log("MediaPlayer in pauseButtonClick");
-	if (!currentPlayerControls.paused)
+	if (currentPlayer.playing())
 	{
-		currentPlayerControls.pause();
-		$("#playButton").toggleClass('playing', false);
+		currentPlayer.pause();
 	}
 }
 
 function backButtonClick()
 {
 	console.log("MediaPlayer in backButtonClick");
-	switch (currentPlayerType)
-	{
-	case "AUDIO":
-		if (audioContent)
-		{
-			if (audioIndex > 0 )
-				audioIndex--;
-			else
-				audioIndex = audioContent.length - 1;
-
-			loadAndPlay = true;
-			audioPlayer.pause();
-
-			$("#playButton").toggleClass('playing', false);
-
-			$("#audioSrc").attr("src", audioContent[audioIndex].contentURI);
-			updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
-			audioPlayer.load();
-		}
-		break;
-
-	case "VIDEO":
-		if (videoContent)
-		{
-			if (videoIndex > 0 )
-				videoIndex--;
-			else
-				videoIndex = videoContent.length - 1;
-
-			videoPlayer.pause();
-			$("#playButton").toggleClass('playing', false);
-			$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
-			videoPlayer.load();
-		}
-		break;
-
-	case "IMAGE":
-		if (imageContent)
-		{
-			if (imageIndex > 0 )
-				imageIndex--;
-			else
-				imageIndex = imageContent.length - 1;
-
-			$("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
-			$("#imagePlayer").css("background-size", "contain");
-		}
-		break;
-
-	default:
-		console.log("Content failure");
-	break;
-	}
+	currentPlayer.previous();
 }
 
 
 function nextButtonClick()
 {
 	console.log("MediaPlayer in nextButtonClick");
-	switch (currentPlayerType)
-	{
-	case "AUDIO":
-		if (audioContent)
-		{
-			if (audioContent.length > (audioIndex + 1))
-				audioIndex++;
-			else
-				audioIndex = 0;
-
-			loadAndPlay = true;
-			audioPlayer.pause();
-
-			$("#playButton").toggleClass('playing', false);
-
-			$("#audioSrc").attr("src", audioContent[audioIndex].contentURI);
-			updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
-			audioPlayer.load();
-		}
-		break;
-
-	case "VIDEO":
-		if (videoContent)
-		{
-			if (videoContent.length > (videoIndex + 1))
-				videoIndex++;
-			else
-				videoIndex = 0;
-
-			videoPlayer.pause();
-			$("#playButton").toggleClass('playing', false);
-			$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
-			videoPlayer.load();
-		}
-		break;
-
-	case "IMAGE":
-		if (imageContent)
-		{
-			if (imageContent.length > (imageIndex + 1))
-				imageIndex++;
-			else
-				imageIndex = 0;
-
-			$("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
-			$("#imagePlayer").css("background-size", "contain");
-		}
-		break;
-
-	default:
-		console.log("Content failure");
-	break;
-	}
+	currentPlayer.next();
 }
 
 /**************************************** END NAVIGATION FUNCTIONS *******************************************/
@@ -712,7 +446,7 @@ function resizeMainMenu()
 {
 	console.log("MediaPlayer in resizeMainMenu");
 
-	currentMediaList.fadeOut(0);
+	currentMediaList.hide();
 	screenWidth = window.innerWidth;
 	screenHeight = window.innerHeight;
 	screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
@@ -737,8 +471,6 @@ function resizePlayerPage()
 {
 	console.log("MediaPlayer in resizePlayerPage");
 
-	audioPlayer = document.getElementById("audioPlayer");
-	videoPlayer = document.getElementById("videoPlayer");
 	screenWidth = window.innerWidth;
 	screenHeight = window.innerHeight;
 
@@ -751,10 +483,10 @@ function resizePlayerPage()
 	$("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
 	$("#playButton").css({"width": buttonWidth * 1.15 + "px", "height": buttonWidth * 1.15 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
 
-	mediaNameCanvas.width = (screenWidth);
-	mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
-	mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
-	mediaNameCanvas.style.left = "0px";
+	trackTimeCanvas.width = mediaNameCanvas.width = (screenWidth);
+	trackTimeCanvas.height = mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
+	trackTimeCanvas.style.top = mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
+	trackTimeCanvas.style.left = mediaNameCanvas.style.left = "0px";
 
 	var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
 	var sortButtonWidth = buttonWidth * 2.5;
@@ -805,6 +537,18 @@ function toggleNightMode(nightModeValue)
 function init()
 {
 	console.log("MediaPlayer in init");
+
+	musicIcon.src = "images/musicIcon.png";
+	vidIcon.src = "images/videoIcon.png";
+	imgIcon.src = "images/imageIcon.png";
+	mediaNameCanvas = document.getElementById("mediaName");
+	mediaNameCTX = mediaNameCanvas.getContext("2d");
+	trackTimeCanvas = document.getElementById("trackTime");
+	trackTimeCTX = trackTimeCanvas.getContext("2d");
+	playBarHeight = mediaNameCanvas.height;
+	boxWidth = playBarHeight * 0.75;
+	textStartX = boxWidth + 50;
+
 	var vehicle = tizen.vehicle;
 
 
@@ -840,49 +584,59 @@ function init()
 		vehicle.subscribe("DrivingMode",function(value) {
                 	console.log("MediaPlayer: DrivingMode changed to " + value.drivingMode);
 
-	                if (value.drivingMode > 0 && currentPlayerType === "VIDEO" && !currentPlayerControls.paused)
+	                if (value.drivingMode > 0 && currentPlayer.type === "video" && currentPlayer.playing())
         	        {
                 	        console.log("MediaPlayer: pausing video due to vehicle motion");
-                        	currentPlayerControls.pause();
+                        	currentPlayer.pause();
 	                        waitingToResumeVideo = true;
         	        }
-                	else if (value.drivingMode === 0 && currentPlayerType === "VIDEO" && waitingToResumeVideo)
+                	else if (value.drivingMode === 0 && currentPlayer.type === "video" && waitingToResumeVideo)
 	                {
         	                console.log("MediaPlayer: vehicle has stopped, resuming video");
-                	        currentPlayerControls.play();
+                	        currentPlayer.play();
                         	waitingToResumeVideo = false;
 	                }
         	});
 	}
 
-	musicIcon.src = "images/musicIcon.png";
-	vidIcon.src = "images/videoIcon.png";
-	imgIcon.src = "images/imageIcon.png";
-	imageControls = new ImageControls();
+	//Setup voice control
+	if (tizen.speech)
+		setupSpeech();
+	else {
+		console.log("MediaPlayer: Speech Recognition not running, voice control will be unavailable");
+                speechObj = {
+                    vocalizeString: function(item) { console.log(item); }
+                };
+        }
 
-	mediaNameCanvas = document.getElementById("mediaName");
-	mediaNameCTX = mediaNameCanvas.getContext("2d");
+	audioPlayer = new MediaPlayer("audio");
+	videoPlayer = new MediaPlayer("video");
+	imagePlayer = new MediaPlayer("image");
+	currentPlayer = audioPlayer;
 
 	//Resize all items and search for local media
 	resizeAll();
 
+	if (localStorage.prevMenu && localStorage.prevMenu !== "MAIN")
+		changeMenu(localStorage.prevMenu)
+	else
+		showMainMenu();
+
+	getMedia(onAudioContentLoaded, "AUDIO");
+	getMedia(onVideoContentLoaded, "VIDEO");
+	getMedia(onImageContentLoaded, "IMAGE");
+
 	//Check if DLNA plugin is installed.  If so, scan for media.
 	if (tizen.mediaserver)
 	{
-		tizen.mediaserver.scanNetwork(foundMediaServer);
+		//Currently no success signal, so continue trying until a server is found.  Once that
+		//happens, clear the stopServerSearch interval
+
+		stopServerSearch = setInterval(function(){console.log("MediaPlayer searching for remote media..."); tizen.mediaserver.scanNetwork(foundMediaServer);}, 5000);
 	}
 	else
 		console.log("MediaPlayer: No DLNA server running, using local media only...");
 
-	//Setup voice control
-	if (tizen.speech)
-		setupSpeech();
-	else
-		console.log("MediaPlayer: Speech Recognition not running, voice control will be unavailable");
-
-	//Get local media
-	setTimeout(function(){getMedia(contentType);}, 500);
-
 	//Prevent highlighting
 	window.ondragstart = function() { return false; }
 
@@ -904,11 +658,39 @@ function init()
 	});
 
     document.getElementById('videoPlayer').addEventListener("playing", function() {
+        $("#playButton").toggleClass('playing', true);
         $("#navigationButtons").hide();
     }, false);
     document.getElementById('videoPlayer').addEventListener("pause", function() {
+        $("#playButton").toggleClass('playing', false);
         $("#navigationButtons").show();
     }, false);
+    document.getElementById('videoPlayer').addEventListener("ended", function() {
+        $("#playButton").toggleClass('playing', false);
+        $("#navigationButtons").show();
+    }, false);
+    document.getElementById('audioPlayer').addEventListener("playing", function() {
+        $("#playButton").toggleClass('playing', true);
+    }, false);
+    document.getElementById('audioPlayer').addEventListener("pause", function() {
+        $("#playButton").toggleClass('playing', false);
+    }, false);
+    document.getElementById('audioPlayer').addEventListener("ended", function() {
+        $("#playButton").toggleClass('playing', false);
+    }, false);
+    document.getElementById('imagePlayer').addEventListener("click", function() {
+	if (!imagePlayer.playing)
+        {
+            // next picture
+            nextButtonClick();
+        }
+        else
+        {
+            // pause the slideshow and fade in the controls
+            imagePlayer.pause();
+            $("#navigationButtons").show();
+        }
+    }, false);
 }
 
 $(document).ready(function () {