A fix for TIVI-2514, blank items in the list index. Checks that the album image...
[profile/ivi/MediaPlayer.git] / js / main.js
index da361c6..3f27f62 100644 (file)
@@ -16,637 +16,491 @@ var screenOrientation;
 var iconWidth;
 var padding;
 var contentType = "AUDIO";
-var audioContent;
-var videoContent;
-var imageContent;
-var currentContent;
 var currentPlayer;
-var currentPlayerType = "AUDIO";
-var currentPlayerControls;
+var currentMediaList = $("#audioMediaList");
+var audioMediaListLoaded = false;
+var videoMediaListLoaded = false;
+var imageMediaListLoaded = false;
 var audioPlayer;
 var videoPlayer;
-var listIndex = 0;
-var videoIndex = 0;
-var imageIndex = 0;
+var imagePlayer;
 var vidIcon = new Image();
 var imgIcon = new Image();
-var metalBar = new Image();
+var musicIcon = new Image();
 var imagesLoaded = false;
-
+var mediaListItemW;
+var mediaListItemH;
+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)"};
 
 var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt 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)"}; //150
+               "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
+
+var mainTrackTemplateLandscape = {"font" : "bold 20pt 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 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))"};
+               "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)"};
+               "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
 
 var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
 
 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "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 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"};
+
+
 var mediaTextTemplate = {"font" : "bold 20pt Arial", "fillStyle" : "", "textAlign" : "left",
-    "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
+               "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
 
 function onError()
 {
-    alert("Content discovery failed");
+       console.log("Content discovery failed");
 }
 
-function loadImages(callback)
+function setupSpeech()
 {
-    var loadedImages = 0;
-    var numImages = 0;
-
-    for (var src in audioContent)
-    {
-       numImages++;
-    }
-    for (var src in audioContent)
-    {
-       audioContent[src].coverArt = new Image();
-       audioContent[src].coverArt.onload = function(){
-           if (++loadedImages >= numImages) {
-               imagesLoaded = true;
-               callback(audioContent);
-           }
-       };
-
-       audioContent[src].coverArt.onerror = function(e){
-           audioContent[src].coverArt.src = "images/musicButton.png";
-       };
-
-       audioContent[src].coverArt.src = audioContent[src].coverArtURI;
-    }
-}
+       console.log("MediaPlayer in setupSpeech");
+
+       speechObj = tizen.speech;
+       speechObj.vocalizeString(" ");
+
+       try
+       {
+               var speechEventListener = {
+                       onaudiostart: function(){console.log("MediaPlayer: onaudiostart received");},
+                       onsoundstart: function(){console.log("MediaPlayer: onsoundstart received");},
+                       onspeechstart: function(){console.log("MediaPlayer: onspeechstart received");},
+                       onspeechend: function(){console.log("MediaPlayer: onspeechend received");},
+                       onsoundend: function(){console.log("MediaPlayer: onsoundend received");},
+                       onaudioend: function(){console.log("MediaPlayer: onaudioend received");},
+                       onresult: function(result){
+
+                               console.log("MediaPlayer: onresult received");
+
+                               for (var i = 0; i < result.length; i++)
+                               {
+                                       console.log("MediaPlayer: forloop, command = " + result[i]);
+                                       var commandFound = false;
+
+                                       switch(result[i])
+                                       {
+                                               case "play":
+                                                       playButtonClick();
+                                                       commandFound = true;
+                                               break;
+                                               case "next":
+                                                       nextButtonClick();
+                                                       commandFound = true;
+                                               break;
+                                               case "previous":
+                                                       backButtonClick();
+                                                       commandFound = true;
+                                               break;
+                                               case "stop":
+                                               case "pause":
+                                                       pauseButtonClick();
+                                                       commandFound = true;
+                                               break;
+                                               default:
+                                               break;
+                                       }
+
+                                       if (commandFound)
+                                               break;
+                               }
+                       },
+                       onnomatch: function(result){console.log("MediaPlayer: onnomatch received ");},
+                       onerror: function(error){console.log("MediaPlayer: onerror received");},
+                       onstart: function(){console.log("MediaPlayer: onstart received");},
+                       onend: function(){console.log("MediaPlayer: onend received");}
+               }
+
+               speechObj.setCBListener(speechEventListener);
+
+       }
+       catch(err)
+       {
+               console.log("MediaPlayer setupSpeech FAILED + " + err.message);
+       }
 
-function updateMediaName(newArtist, newTitle, newCover)
-{
-    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);
-       mediaNameCTX.drawImage(newCover, 20, 20, boxWidth, boxWidth);
-       var textStartX = boxWidth + 50;
-       var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
-       trackText.applyTemplate(mainMenuTitleTemplate);
-       var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70 + trackText.height, "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
-
-       mediaNameCTX.drawImage(newCover, 0, 0, mediaNameCanvas.height, mediaNameCanvas.height);
-    }
-
-    trackText.drawObj();
-    trackText.drawLargeShadow();
-
-    artistText.yLoc = 70 + trackText.height;
-    artistText.applyTemplate(mainTrackTemplate);
-    artistText.drawObj();
 }
 
-function fillMediaList(contentList)
+function onAudioContentLoaded(newContent)
 {
-    if (!imagesLoaded)
-       return false;
-
-    var iconURI;
-    var currentCanvas;
-    var iconImg = new Image();
-    var mediaListItemW = $("#mediaList").width() * 0.92;
-    var mediaListItemH = $("#mediaList").height() / 10;
-    var canvasW = mediaListItemW;// * 0.9;
-    var canvasH = mediaListItemH * 0.95 ;
-
-    $("#mediaListItems").empty();
-    var lightColor = false;
-    for (var i=0; i < contentList.length; i++)
-    {
-       if (!lightColor)
+       if (!newContent || newContent.length === 0)
        {
-           $("#mediaListItems").append("<li><a href='#'>" +
-                   "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
-                   "</a></li>"
-                   );
+               console.log("MediaPlayer: some content failed to load, trying again for " + audioPlayer.type);
+               audioPlayer.clearContent();
+               setTimeout(function(){getMedia(onAudioContentLoaded, "AUDIO");}, 3000);
+               return;
        }
        else
        {
-           $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
-                   "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
-                   "</a></li>"
-                   );
+               audioPlayer.updateContent(newContent, true);
+               audioPlayer.onContentLoaded();
        }
+}
 
-       lightColor = !lightColor;
-
-       currentCanvas = document.getElementById("canvasNum"+ i);
-       currentCTX = currentCanvas.getContext("2d");
-
-       // Set callback function for the new list item
-       $("#canvasNum"+i).click(function () {
-               listIndex = $(this).parent().parent().index();
-
-               switch (currentPlayerType)
-               {
-               case "AUDIO":
-               updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
-               $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
-               audioPlayer.load();
-               break;
-               case "VIDEO":
-               updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
-               $("#videoSrc").attr("src", videoContent[listIndex].contentURI);
-               videoPlayer.load();
-               $("#mediaList").fadeOut(300);
-               break;
-               case "IMAGE":
-               $("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
-               $("#imagePlayer").css("background-size", "contain");
-               $("#mediaList").fadeOut(300);
-               break;
-               default:
-               break;
-               }
-       });
-
-       switch (currentPlayerType)
+function onVideoContentLoaded(newContent)
+{
+       if (!newContent || newContent.length === 0)
        {
-           case "AUDIO":
-               currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
-               var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
-               var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
-
-               break;
-           case "VIDEO":
-               currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
-               var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
-               var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
-
-               break;
-           case "IMAGE":
-               currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
-               var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
-               var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
-               break;
-           default:
-               break;
+               console.log("MediaPlayer: some content failed to load, trying again for " + videoPlayer.type);
+               videoPlayer.clearContent();
+               setTimeout(function(){getMedia(onVideoContentLoaded, "VIDEO");}, 3000);
+               return;
+       }
+       else
+       {
+               videoPlayer.updateContent(newContent, true);
+               videoPlayer.onContentLoaded();
        }
-
-       trackText.applyTemplate(mediaTextTemplate2);
-       trackText.drawObj();
-       trackText.applyTemplate(mediaTextTemplate3);
-       trackText.drawObj();
-
-       artistText.applyTemplate(trackTextTemplate);
-       artistText.drawObj();
-    }
-
-    $("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});
 }
 
-function onContentItemArraySuccess(content)
+function onImageContentLoaded(newContent)
 {
-    var emptyContent = true;
-
-    if (!content || content === undefined || content.length <= 0)
-       alert("Invalid content");
-    else
-    {
-       emptyContent = false;
-    }
-
-    switch (contentType)
-    {
-       case "AUDIO":
-           if (!emptyContent)
-           {
-               audioContent = content;
-               sortByAlpha(audioContent);
-
-               $("#audioSrc").attr("src", audioContent[0].contentURI);
-
-               var imgSources = [];
-               for (var i=0; i < audioContent.length; i++)
-               {
-                   if (i == 0)
-                       audioContent[i].coverArtURI = "images/musicButton.png";
-                   else
-                   {
-                       var iconURI = audioContent[i].thumbnailURIs[0].length > 1 ? audioContent[i].thumbnailURIs[0] :  "images/musicButton.png";
-                       audioContent[i].coverArtURI = iconURI;
-                   }
-               }
-
-               loadImages(fillMediaList);
-           }
-           contentType = "VIDEO";
-           break;
-       case "VIDEO":
-           if (!emptyContent)
-           {
-               videoContent = content;
-               $("#videoSrc").attr("src", videoContent[0].contentURI);
-           }
-           contentType = "IMAGE";
-           break;
-       case "IMAGE":
-           if (!emptyContent)
-           {
-               imageContent = 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;
-    }
-
-    if (contentType !== undefined)
-       getMedia(contentType);
+       if (!newContent || newContent.length === 0)
+       {
+               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();
+       }
 }
 
-function getMedia(mediaType)
+function getMedia(callback, filterType)
 {
-    var manager = tizen.content;
-
-    var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
-    manager.find(onContentItemArraySuccess, onError, null, filter);
+       console.log("MediaPlayer in getMedia");
+       var manager = tizen.content;
+       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()
 {
-    $(".navButton").fadeIn(800);
-
-    switch(currentPlayerType)
-    {
-       case "AUDIO":
-           //show audio player
-           updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
-           $("#mediaName").fadeIn(800);
-           $(".sortButton").fadeIn(800);
-           currentPlayer.fadeIn(800);
-           $("#mediaList").addClass("mediaListAudioList");
-           $("#mediaList").fadeIn(800);
-           break;
-       case "VIDEO":
-           //show video
-           setTimeout(function(){currentPlayer.show()}, 800);          //The video element can't be faded, so wait a moment before showing
-           break;
-       case "IMAGE":
-           //show image
-           currentPlayer.fadeIn(800);
-           break;
-       default:0
-               console.log("Invalid player type");
+       console.log("MediaPlayer in showMediaMenu");
+       $(".navButton").show();
+
+       switch(currentPlayer.type)
+       {
+               case "audio":
+                       $("#mediaName").show();
+                       $("#trackTime").show();
+                       $(".sortButton").show();
+                       currentPlayer.show();
+
+                       if (screenOrientation === "landscape" )
+                               $("#audioMediaList").addClass("landscape");
+                       else
+                               $("#audioMediaList").removeClass("landscape");
+
+                       $("#audioMediaList").show();
+                       break;
+
+               case "video":
+                       //show video
+                       currentPlayer.show();
+                       //setTimeout(function(){currentPlayer.show()}, 800);            //The video element can't be faded, so wait a moment before showing
+                       break;
+
+               case "image":
+                       //show image
+                       currentPlayer.show();
+                       break;
+
+               default:
+                       console.log("Invalid player type");
                break;
-    }
+       }
 }
 
 function showMediaList()
 {
-    if ($("#mediaList").is(":visible"))
-       $("#mediaList").fadeOut(300);
-    else
-    {
-       fillMediaList(currentContent);
-       $("#mediaList").fadeIn(300);
-    }
+       console.log("MediaPlayer in showMediaList");
+
+       if (currentMediaList.is(":visible"))
+               currentMediaList.hide();
+       else
+       {
+               currentMediaList.show();
+       }
 }
 
 function changeMenu(menuButtonId)
 {
-    var clickedButton  = $("#" + menuButtonId);
-    var buttonWidth  = clickedButton.width();
-    var buttonHeight = clickedButton.height();
-    var buttonBottom = clickedButton.css("bottom");
-    var buttonRight  = clickedButton.css("right");
-
-    //Animate the clicked button slightly
-    clickedButton.animate({
-bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
-right: screenOrientation === "portrait" ? "+=50" : "+=0",
-opacity: "0"
-}, 300 ,
-
-//Reset the size once done
-function() {
-clickedButton.width(buttonWidth);
-clickedButton.height(buttonHeight);
-
-if (screenOrientation === "portrait")
-clickedButton.css({"right": buttonRight});
-else
-clickedButton.css({"bottom": buttonBottom});
-}
-);
-
-    $(".mainButton").fadeOut(300);
+       console.log("MediaPlayer in changeMenu");
+       var clickedButton  = $("#" + menuButtonId);
+       var buttonWidth  = clickedButton.width();
+       var buttonHeight = clickedButton.height();
+       var buttonBottom = clickedButton.css("bottom");
+       var buttonRight  = clickedButton.css("right");
 
-switch(menuButtonId)
-{
-    case ("mainMusicButton"):
-       currentPlayer = $("#audioPlayer");
-       currentPlayerControls = document.getElementById("audioPlayer");
-       currentPlayerType = "AUDIO";
-       currentContent = audioContent;
-       showMediaMenu();
-       break;
-    case ("mainVideoButton"):
-       currentPlayer = $("#videoPlayer");
-       currentPlayerControls = document.getElementById("videoPlayer");
-       currentPlayerType = "VIDEO";
-       currentContent = videoContent;
-       showMediaMenu();
-       break;
-    case ("mainImageButton"):
-       currentPlayer = $("#imagePlayer");
-       currentPlayerType = "IMAGE";
-       currentContent = imageContent;
-       showMediaMenu();
-       break;
-    default:
-       console.log("Error: No menu by that name");
-       break;
-}
-}
+/*
+       //Animate the clicked button slightly
+       clickedButton.animate({
+               bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
+                               right: screenOrientation === "portrait" ? "+=50" : "+=0",
+                                               opacity: "0"
+       }, 300 ,
+
+       //Reset the size once done
+       function() {
+               clickedButton.width(buttonWidth);
+               clickedButton.height(buttonHeight);
+
+               if (screenOrientation === "portrait")
+                       clickedButton.css({"right": buttonRight});
+               else
+                       clickedButton.css({"bottom": buttonBottom});
+       }
+       );
+*/
+       $(".mainButton").hide();
 
-function showMainMenu()
-{
-    audioPlayer.pause();
-    videoPlayer.pause();
-    $("#playButton").attr("src","images/playButton.png");
+       switch(menuButtonId)
+       {
+               case ("mainMusicButton"):
+                       speechObj.vocalizeString("Music player");
+                       currentMenu = "audio";
+                       currentPlayer = audioPlayer;
+                       currentMediaList = $("#audioMediaList");
+                       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)
+                               audioPlayer.fillMediaList();
+
+                       showMediaMenu();
+               break;
 
-    //If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
-    if ($("#mediaList").is(":visible"))
-       $("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
+               case ("mainVideoButton"):
+                       speechObj.vocalizeString("Video player");
+                       currentMenu = "video";
+                       currentPlayer = videoPlayer;
+                       currentMediaList = $("#videoMediaList");
+                       localStorage.prevMenu = "mainVideoButton";
 
-    $(".navButton").fadeOut(300);
-    $(".sortButton").fadeOut(300);
-    $("#mediaName").fadeOut(300);
+                       if (videoPlayer.currentVideoContent && videoPlayer.currentVideoContent.contentURI)
+                       {
+                               localStorage.prevVideo = videoPlayer.currentVideoContent.contentURI
+                               localStorage.prevVideoTime = videoPlayer.playerControls.currentTime;
+                       }
 
-    if (currentPlayerType !== "VIDEO")
-       currentPlayer.fadeOut(300);
-    else
-       currentPlayer.hide();
+                       localStorage.prevAudioTime = undefined;
+                       localStorage.prevAudioTrack = undefined;
 
+                       if (!videoMediaListLoaded)
+                               videoPlayer.fillMediaList();
 
-    $(".mainButton").css({"opacity": "100"});
-    $(".mainButton").fadeIn(800);
-}
+                       showMediaMenu();
+               break;
 
-function sortByAlpha(contentToSort)
-{
-    //If contentToSort is undefined it's because the request came from the sortBy buttons
-    if (contentToSort === undefined)
-       contentToSort = audioContent;
+               case ("mainImageButton"):
+                       speechObj.vocalizeString("Picture viewer");
+                       currentMenu = "image";
+                       currentPlayer = imagePlayer;
+                       currentMediaList = $("#imageMediaList");
+                       localStorage.prevMenu = "mainImageButton";
 
-    contentToSort.sort(function (a,b) {
-           var first = a.title.toLowerCase();
-           var second = b.title.toLowerCase();
+                       if (!imageMediaListLoaded)
+                               imagePlayer.fillMediaList();
 
-           if (first < second)
-           return -1;
-           if (first > second)
-           return 1;
+                       showMediaMenu();
+               break;
+               default:
+                       console.log("Error: No menu by that name");
+               break;
+       }
+}
 
-           return 0;
-           });
+function showMainMenu()
+{
+       console.log("MediaPlayer in showMainMenu, clearing all localStorage...");
+       currentMenu = "main";
+       localStorage.prevMenu = "MAIN";
+       localStorage.prevAudioTime = undefined;
+       localStorage.prevAudioTrack = undefined;
+       localStorage.prevVideo = undefined;
+       localStorage.prevVideoTime = undefined;
+       localStorage.prevImage = undefined;
+
+       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.hide();
+
+       $(".navButton").hide();
+       $(".sortButton").hide();
+       $("#mediaName").hide();
+       $("#trackTime").hide();
+       $(".player").hide();
+       $(".mainButton").css({"opacity": "100"});
+       $(".mainButton").show();
+}
 
-    fillMediaList(contentToSort);
+function sortByAlpha(contentToSort)
+{
+       currentPlayer.sortByAlpha();
 }
 
 function sortByArtist(contentToSort)
 {
-    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 (contentToSort === undefined)
-       contentToSort = audioContent;
-
-    contentToSort.sort(function (a,b) {
-           var first = a.album.toLowerCase();
-           var second = b.album.toLowerCase();
+       currentPlayer.sortByAlbum();
+}
 
-           if (first < second)
-           return -1;
-           if (first > second)
-           return 1;
+/**************************************** NAVIGATION FUNCTIONS *******************************************/
 
-           return 0;
-           });
+// This function is called once a file being loaded is ready to play
+function playLoadedMedia()
+{
+       audioPlayer.playLoadedMedia();
+}
 
-    fillMediaList(contentToSort);
+function videoLoaded()
+{
+    videoPlayer.videoLoaded();
 }
-/**************************************** NAVIGATION FUNCTIONS *******************************************/
 
 function playButtonClick()
 {
-    if (currentPlayerControls.paused)
-    {
-       currentPlayerControls.play();
-       $("#playButton").attr("src","images/pauseButton.png");
-    }
-    else
-    {
-       currentPlayerControls.pause();
-       $("#playButton").attr("src","images/playButton.png");
-    }
+       console.log("MediaPlayer in playButtonClick");
+       if (!currentPlayer.playing())
+               currentPlayer.play();
+       else
+               currentPlayer.pause();
 }
 
-function backButtonClick()
+function pauseButtonClick()
 {
-    switch (currentPlayerType)
-    {
-       case "AUDIO":
-           if (audioContent)
-           {
-               if (listIndex > 0 )
-                   listIndex--;
-               else
-                   listIndex = imageContent.length - 1;
-
-               audioPlayer.pause();
-               $("#playButton").attr("src","images/playButton.png");
-
-               $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
-               updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
-               audioPlayer.load();
-           }
-           break;
-       case "VIDEO":
-           if (videoContent)
-           {
-               if (videoIndex > 0 )
-                   videoIndex--;
-               else
-                   videoIndex = imageContent.length - 1;
-
-               if ($("#mediaList").is(":visible"))
-                   videoPlayer.pause();
-               $("#playButton").attr("src","images/playButton.png");
-               $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
-               videoPlayer.load();
-           }
-           break;
-       case "IMAGE":
-           if (imageContent)
-           {
-               if (imageIndex > 0 )
-                   imageIndex--;
-               else
-                   imageIndex = imageContent.length - 1;
+       console.log("MediaPlayer in pauseButtonClick");
+       if (currentPlayer.playing())
+       {
+               currentPlayer.pause();
+       }
+}
 
-               $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
-               $("#imagePlayer").css("background-size", "contain");
-           }
-           break;
-       default:
-           console.log("Content failure");
-           break;
-    }
+function backButtonClick()
+{
+       console.log("MediaPlayer in backButtonClick");
+       currentPlayer.previous();
 }
 
 
 function nextButtonClick()
 {
-    switch (currentPlayerType)
-    {
-       case "AUDIO":
-           if (audioContent)
-           {
-               if (audioContent.length > (listIndex + 1))
-                   listIndex++;
-               else
-                   listIndex = 0;
-
-               audioPlayer.pause();
-               $("#playButton").attr("src","images/playButton.png");
-
-               $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
-               updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
-               audioPlayer.load();
-           }
-           break;
-       case "VIDEO":
-           if (videoContent)
-           {
-               if (videoContent.length > (videoIndex + 1))
-                   videoIndex++;
-               else
-                   videoIndex = 0;
-
-               videoPlayer.pause();
-               $("#playButton").attr("src","images/playButton.png");
-
-               $("#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;
-    }
+       console.log("MediaPlayer in nextButtonClick");
+       currentPlayer.next();
 }
 
 /**************************************** END NAVIGATION FUNCTIONS *******************************************/
 
 function resizeMainMenu()
 {
-    $("#mediaList").fadeOut(0);
-    screenWidth = window.innerWidth;
-    screenHeight = window.innerHeight;
-    screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
-    iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
-    var padding = 20;
-
-    $(".mainButton").width(iconWidth + "px");
-    $(".mainButton").height(iconWidth + "px");
-
-    var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
-
-    if (screenOrientation === "portrait")
-       $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
-    else
-       $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
+       console.log("MediaPlayer in resizeMainMenu");
+
+       currentMediaList.hide();
+       screenWidth = window.innerWidth;
+       screenHeight = window.innerHeight;
+       screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
+       iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
+       var padding = 20;
+
+       $(".mainButton").width(iconWidth + "px");
+       $(".mainButton").height(iconWidth + "px");
+
+       var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
+
+       if (screenOrientation === "portrait")
+               $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
+       else
+       {
+               $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
+               $("#sortButtons").addClass("landscape");
+       }
 }
 
 function resizePlayerPage()
 {
-    audioPlayer = document.getElementById("audioPlayer");
-    videoPlayer = document.getElementById("videoPlayer");
-    screenWidth = window.innerWidth;
-    screenHeight = window.innerHeight;
-
-    var padding = 15;
-    var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
-
-    $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
-    $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
-    $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
-    $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
-    $("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "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";
-
-    var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
-    var sortButtonWidth = buttonWidth * 2.5;
-    var buttonSpacing = screenWidth / 5;
-    $(".player").css({"height": (screenHeight - (buttonWidth * 2) - (padding * 2)) + "px", "top": buttonWidth + padding + "px"});
+       console.log("MediaPlayer in resizePlayerPage");
+
+       screenWidth = window.innerWidth;
+       screenHeight = window.innerHeight;
+
+       var padding = 15;
+       var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
+
+       $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
+       $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
+       $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
+       $("#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"});
+
+       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;
+       var buttonSpacing = screenWidth / 5;
+
+       mediaListItemW = $("#videoMediaList").width() * 0.92;
+       mediaListItemH = $("#videoMediaList").height() / 10;
 }
 
 function resizeAll()
 {
-    resizeMainMenu();
-    resizePlayerPage();
+       console.log("MediaPlayer in resizeAll");
+       resizeMainMenu();
+       resizePlayerPage();
 }
 
 /*
@@ -656,54 +510,189 @@ function resizeAll()
 
 function swipe(direction, object)
 {
-
-    switch (object)
-    {
+       console.log("MediaPlayer in swipe");
+       switch (object)
+       {
        case "mediaName":
-           if (direction === "right")
-               nextButtonClick();
-           else if (direction === "left")
-               backButtonClick();
-           break;
+               if (direction === "right")
+                       nextButtonClick();
+               else if (direction === "left")
+                       backButtonClick();
+               break;
 
        default:
-           break;
-    }
+               break;
+       }
+}
+
+function toggleNightMode(nightModeValue)
+{
+       if (nightMode !== nightModeValue)
+       {
+               Array.prototype.forEach.call (document.querySelectorAll ('*'), function (el) {el.classList.toggle('night');});
+               nightMode = nightModeValue;
+       }
 }
 
 function init()
 {
-    vidIcon.src = "images/videoButton.png";
-    imgIcon.src = "images/imageButton.png";
-
-    mediaNameCanvas = document.getElementById("mediaName");
-    mediaNameCTX = mediaNameCanvas.getContext("2d");
-
-    //Resize all items and search for local media
-    resizeAll();
-    getMedia(contentType);
-
-    //Prevent highlighting
-    window.ondragstart = function() { return false; }
-
-    $(window).bind('resize', resizeAll);
-
-    //Simple swipe detection
-    $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
-    $("#mediaName").mouseup(function(e){
-           if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
-           {
-           if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
-           {
-           if (mouseDownEvent.clientX > e.clientX)
-           swipe("left", "mediaName");
-           else
-           swipe("right", "mediaName");
-           }
-           }
-           });
+       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;
+
+
+       /* Subscribe to AMB NightMode signal, and switch colors
+        * upon receipt of the signal
+        */
+
+       if (vehicle && vehicle !== undefined)
+       {
+               var getVal = vehicle.get("NightMode");
+
+               //Check that NightMode returned a value before trying to hook up to it
+               if (getVal)
+               {
+                       toggleNightMode(getVal.nightMode);
+               }
+
+               /* Subscribe to AMB NightMode signal, and switch colors
+               * upon receipt of the signal
+               */
+
+               vehicle.subscribe("NightMode",function(value) {
+                                console.log("MediaPlayer: Day / Night mode changed to " + value.nightMode);
+                               toggleNightMode(value.nightMode);
+                });
+
+
+               /* Subscribe to AMB DrivingMode signal, and pause video
+                * upon receipt of the signal
+                */
+
+
+               vehicle.subscribe("DrivingMode",function(value) {
+                       console.log("MediaPlayer: DrivingMode changed to " + value.drivingMode);
+
+                       if (value.drivingMode > 0 && currentPlayer.type === "video" && currentPlayer.playing())
+                       {
+                               console.log("MediaPlayer: pausing video due to vehicle motion");
+                               currentPlayer.pause();
+                               waitingToResumeVideo = true;
+                       }
+                       else if (value.drivingMode === 0 && currentPlayer.type === "video" && waitingToResumeVideo)
+                       {
+                               console.log("MediaPlayer: vehicle has stopped, resuming video");
+                               currentPlayer.play();
+                               waitingToResumeVideo = false;
+                       }
+               });
+       }
+
+       //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); }
+                };
+        }
+
+       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)
+       {
+               //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...");
+
+       //Prevent highlighting
+       window.ondragstart = function() { return false; }
+
+       $(window).bind('resize', resizeAll);
+
+       //Simple swipe detection
+       $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
+       $("#mediaName").mouseup(function(e){
+               if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
+               {
+                       if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
+                       {
+                               if (mouseDownEvent.clientX > e.clientX)
+                                       swipe("left", "mediaName");
+                               else
+                                       swipe("right", "mediaName");
+                       }
+               }
+       });
+
+    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 () {
        init();
-       });
+});