js/main.js

   1 /*
   2  * Copyright (c) 2013, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 var currentMenu = "main";
  11 var mouseDownEvent;
  12 var resizeCB = resizeMainMenu;
  13 var screenWidth;
  14 var screenHeight;
  15 var screenOrientation;
  16 var iconWidth;
  17 var padding;
  18 var contentType = "AUDIO";
  19 var audioContent;
  20 var videoContent;
  21 var imageContent;
  22 var currentContent;
  23 var currentPlayer;
  24 var currentPlayerType = "AUDIO";
  25 var currentPlayerControls;
  26 var audioPlayer;
  27 var videoPlayer;
  28 var listIndex = 0;
  29 var videoIndex = 0;
  30 var imageIndex = 0;
  31 var vidIcon = new Image();
  32 var imgIcon = new Image();
  33 var musicIcon = new Image();
  34 var imagesLoaded = false;
  35 var mediaListItemW;
  36 var mediaListItemH;
  37 var imageControls;
  38
  39 var mediaNameCanvas;
  40 var mediaNameCTX;
  41
  42 var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  43                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
  44
  45 var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  46                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
  47
  48 var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  49                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  50
  51 var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  52                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  53
  54 var mediaTextTemplate2 = {"font" : "bold 20pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
  55                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
  56
  57 var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
  58
  59 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
  60
  61 var mediaTextTemplate2Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
  62                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
  63
  64 var mediaTextTemplate3Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
  65
  66 var trackTextTemplateLandscape  = {"font" : "bold 11pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
  67
  68
  69 var mediaTextTemplate = {"font" : "bold 20pt Arial", "fillStyle" : "", "textAlign" : "left",
  70                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
  71
  72 function onError()
  73 {
  74         console.log("Content discovery failed");
  75 }
  76
  77 function loadImages(callback)
  78 {
  79         var loadedImages = 0;
  80         var numImages = 0;
  81
  82         for (var src in audioContent)
  83         {
  84                 numImages++;
  85         }
  86         for (var src in audioContent)
  87         {
  88                 try
  89                 {
  90                 audioContent[src].coverArt = new Image();
  91                 audioContent[src].coverArt.onload = function(){
  92
  93                         if (++loadedImages >= numImages) {
  94                                 imagesLoaded = true;
  95                                 callback(audioContent);
  96                         }
  97                 };
  98
  99                 audioContent[src].coverArt.onerror = function(e){
 100                         audioContent[src].coverArt.src = "images/musicButton.png";
 101                 };
 102
 103                 audioContent[src].coverArt.src = (audioContent[src].coverArtURI !== undefined && audioContent[src].coverArtURI !== "") ? audioContent[src].coverArtURI : "images/musicButton.png";
 104                 }
 105                 catch(err)
 106                 {
 107                         console.log("Failed to load audio cover image");
 108                 }
 109         }
 110 }
 111
 112 function updateMediaName(newArtist, newTitle, newCover)
 113 {
 114         var playBarHeight = mediaNameCanvas.height;
 115         var boxWidth = playBarHeight * 0.75;
 116         mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
 117
 118         if (currentPlayerType === "AUDIO")
 119         {
 120                 var shadeJump = 10;
 121                 var alphaJump = 0.01;
 122                 var currColor = 255;
 123                 var currAlpha = 1.0;
 124
 125                 mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
 126                 mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
 127                 mediaNameCTX.lineWidth = 5;
 128                 mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
 129                 mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
 130
 131                 if (newCover === undefined || newCover.naturalWidth === undefined || newCover.naturalWidth <= 0)
 132                 {
 133                         newCover = musicIcon;
 134                 }
 135
 136                 mediaNameCTX.drawImage(newCover, 20, (playBarHeight - boxWidth) / 2, boxWidth, boxWidth);
 137
 138                 if (screenOrientation === "portrait")
 139                 {
 140                         var textStartX = boxWidth + 50;
 141                         var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
 142                         trackText.applyTemplate(mainMenuTitleTemplate);
 143                         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});
 144                         artistText.applyTemplate(mainTrackTemplate);
 145                         artistText.yLoc = 70 + trackText.height;
 146                 }
 147                 else
 148                 {
 149                         var textStartX = boxWidth + 50;
 150                         var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 50 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
 151                         trackText.applyTemplate(mainMenuTitleTemplateLandscape);
 152                         var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
 153                         artistText.applyTemplate(mainTrackTemplateLandscape);
 154                         artistText.yLoc = 50 + trackText.height;
 155                 }
 156
 157                 trackText.drawObj();
 158                 trackText.drawLargeShadow();
 159                 artistText.drawObj();
 160
 161         }
 162 }
 163
 164 function fillMediaList(contentList)
 165 {
 166         //Don't try and fill an empty content list or an audio list that hasn't finished loading the thumbnails
 167         if (contentList.length <=0 || (contentList === audioContent && !imagesLoaded))
 168                 return false;
 169
 170         var iconURI;
 171         var currentCanvas;
 172         var iconImg = new Image();
 173         var canvasW = mediaListItemW;
 174         var canvasH = mediaListItemH * 0.95 ;
 175
 176         $("#mediaListItems").empty();
 177         var lightColor = false;
 178         for (var i=0; i < contentList.length; i++)
 179         {
 180                 if (!lightColor)
 181                 {
 182                         $("#mediaListItems").append("<li><a href='#'>" +
 183                                         "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 184                                         "</a></li>"
 185                         );
 186                 }
 187                 else
 188                 {
 189                         $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
 190                                         "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 191                                         "</a></li>"
 192                         );
 193                 }
 194
 195                 lightColor = !lightColor;
 196
 197                 currentCanvas = document.getElementById("canvasNum"+ i);
 198                 currentCTX = currentCanvas.getContext("2d");
 199
 200                 // Set callback function for the new list item
 201                 $("#canvasNum"+i).click(function () {
 202                         listIndex = $(this).parent().parent().index();
 203
 204                         switch (currentPlayerType)
 205                         {
 206                         case "AUDIO":
 207                                 try
 208                                 {
 209                                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 210                                         $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
 211                                         audioPlayer.load();
 212                                 }
 213                                 catch(err)
 214                                 {
 215                                         console.log("updateMediaName error: " + err.message);
 216                                 }
 217                                 break;
 218
 219                         case "VIDEO":
 220                                 try
 221                                 {
 222                                         updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
 223                                         $("#videoSrc").attr("src", videoContent[listIndex].contentURI);
 224                                         videoPlayer.load();
 225                                         $("#mediaList").fadeOut(300);
 226                                 }
 227                                 catch(err)
 228                                 {
 229                                         console.log("updateMediaName error: " + err.message);
 230                                 }
 231                                 break;
 232
 233                         case "IMAGE":
 234                                 try
 235                                 {
 236                                         $("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
 237                                         $("#imagePlayer").css("background-size", "contain");
 238                                         $("#mediaList").fadeOut(300);
 239                                 }
 240                                 catch(err)
 241                                 {
 242                                         console.log("updateMediaName error: " + err.message);
 243                                 }
 244                                 break;
 245
 246                         default:
 247                                 break;
 248                         }
 249                 });
 250
 251                 switch (currentPlayerType)
 252                 {
 253                 case "AUDIO":
 254                         currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
 255                         var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 256                         var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 257
 258                         break;
 259                 case "VIDEO":
 260                         currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
 261                         var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 262                         var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 263
 264                         break;
 265                 case "IMAGE":
 266                         currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
 267                         var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 268                         var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 269                         break;
 270
 271                 default:
 272                         break;
 273                 }
 274
 275                 var mediaTextTemp1 = screenOrientation === "portrait" ? mediaTextTemplate2 : mediaTextTemplate2Landscape;
 276                 var mediaTextTemp2 = screenOrientation === "portrait" ? mediaTextTemplate3 : mediaTextTemplate3Landscape;
 277                 var trackTextTemp = screenOrientation === "portrait" ? trackTextTemplate : trackTextTemplateLandscape;
 278
 279                 trackText.applyTemplate(mediaTextTemp1);
 280                 trackText.drawObj();
 281                 trackText.applyTemplate(mediaTextTemp2);
 282                 trackText.drawObj();
 283
 284                 artistText.applyTemplate(trackTextTemp);
 285                 artistText.drawObj();
 286         }
 287
 288         $("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});
 289 }
 290
 291 function onContentItemArraySuccess(content)
 292 {
 293         var emptyContent = true;
 294
 295         if (!content || content === undefined || content.length <= 0)
 296                 console.log("Invalid content for " + contentType);
 297         else
 298         {
 299                 emptyContent = false;
 300         }
 301
 302         switch (contentType)
 303         {
 304         case "AUDIO":
 305
 306                         if (!emptyContent)
 307                         {
 308                                 try
 309                                 {
 310                                         audioContent = content;
 311                                         sortByAlpha(audioContent);
 312
 313                                         $("#audioSrc").attr("src", audioContent[0].contentURI);
 314
 315                                         var imgSources = [];
 316                                         for (var i = 0; i < audioContent.length; i++)
 317                                         {
 318                                                 var iconURI = (audioContent[i].thumbnailURIs !== undefined && audioContent[i].thumbnailURIs !== null) ? audioContent[i].thumbnailURIs[0] : "images/musicButton.png";
 319                                                 audioContent[i].coverArtURI = iconURI;
 320                                         }
 321
 322                                         loadImages(fillMediaList);
 323                                 }
 324
 325                                 catch (err)
 326                                 {
 327                                         console.log("Error when parsing audioContent");
 328                                 }
 329                         }
 330
 331                 contentType = "VIDEO";
 332                 break;
 333
 334         case "VIDEO":
 335                 if (!emptyContent)
 336                 {
 337                         videoContent = content;
 338                         $("#videoSrc").attr("src", videoContent[0].contentURI);
 339                 }
 340                 contentType = "IMAGE";
 341                 break;
 342
 343         case "IMAGE":
 344                 if (!emptyContent)
 345                 {
 346                         imageContent = content;
 347                         $("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
 348                         $("#imagePlayer").css("background-size", "contain");
 349                 }
 350                 contentType = undefined;
 351                 break;
 352
 353         default:
 354                 console.log("Undefined content search type");
 355         nextContentType = undefined;
 356         break;
 357         }
 358
 359         if (contentType !== undefined)
 360                 getMedia(contentType);
 361 }
 362
 363 function getMedia(mediaType)
 364 {
 365         var manager = tizen.content;
 366
 367         var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
 368         manager.find(onContentItemArraySuccess, onError, null, filter);
 369 }
 370
 371 function showMediaMenu()
 372 {
 373         $(".navButton").fadeIn(800);
 374
 375         switch(currentPlayerType)
 376         {
 377         case "AUDIO":
 378                 //show audio player
 379                 try
 380                 {
 381                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 382                 }
 383                 catch(err)
 384                 {
 385                         console.log("updateMediaName failed for showMediaMenu (audio) : " + err.message);
 386                 }
 387
 388                 $("#mediaName").fadeIn(800);
 389                 $(".sortButton").fadeIn(800);
 390                 currentPlayer.fadeIn(800);
 391
 392                 $("#mediaList").addClass("mediaListAudioList");
 393
 394                 if (screenOrientation === "landscape" )
 395                         $("#mediaList").addClass("landscape");
 396                 else
 397                         $("#mediaList").removeClass("landscape");
 398
 399                 $("#mediaList").fadeIn(800);
 400                 break;
 401
 402         case "VIDEO":
 403                 //show video
 404                 setTimeout(function(){currentPlayer.show()}, 800);              //The video element can't be faded, so wait a moment before showing
 405                 break;
 406
 407         case "IMAGE":
 408                 //show image
 409                 currentPlayer.fadeIn(800);
 410                 break;
 411
 412         default:
 413                 console.log("Invalid player type");
 414         break;
 415         }
 416 }
 417
 418 function showMediaList()
 419 {
 420         if ($("#mediaList").is(":visible"))
 421                 $("#mediaList").fadeOut(300);
 422         else
 423         {
 424                 fillMediaList(currentContent);
 425                 $("#mediaList").fadeIn(300);
 426         }
 427 }
 428
 429 function changeMenu(menuButtonId)
 430 {
 431         var clickedButton  = $("#" + menuButtonId);
 432         var buttonWidth  = clickedButton.width();
 433         var buttonHeight = clickedButton.height();
 434         var buttonBottom = clickedButton.css("bottom");
 435         var buttonRight  = clickedButton.css("right");
 436
 437         //Animate the clicked button slightly
 438         clickedButton.animate({
 439                 bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
 440                                 right: screenOrientation === "portrait" ? "+=50" : "+=0",
 441                                                 opacity: "0"
 442         }, 300 ,
 443
 444         //Reset the size once done
 445         function() {
 446                 clickedButton.width(buttonWidth);
 447                 clickedButton.height(buttonHeight);
 448
 449                 if (screenOrientation === "portrait")
 450                         clickedButton.css({"right": buttonRight});
 451                 else
 452                         clickedButton.css({"bottom": buttonBottom});
 453         }
 454         );
 455
 456         $(".mainButton").fadeOut(300);
 457
 458         switch(menuButtonId)
 459         {
 460         case ("mainMusicButton"):
 461                 currentPlayer = $("#audioPlayer");
 462                 currentPlayerControls = document.getElementById("audioPlayer");
 463                 currentPlayerType = "AUDIO";
 464                 currentContent = audioContent;
 465                 showMediaMenu();
 466         break;
 467
 468         case ("mainVideoButton"):
 469                 currentPlayer = $("#videoPlayer");
 470                 currentPlayerControls = document.getElementById("videoPlayer");
 471                 currentPlayerType = "VIDEO";
 472                 currentContent = videoContent;
 473                 showMediaMenu();
 474         break;
 475
 476         case ("mainImageButton"):
 477                 currentPlayer = $("#imagePlayer");
 478                 currentPlayerControls = imageControls;
 479                 currentPlayerType = "IMAGE";
 480                 currentContent = imageContent;
 481                 showMediaMenu();
 482         break;
 483         default:
 484                 console.log("Error: No menu by that name");
 485         break;
 486         }
 487 }
 488
 489 function showMainMenu()
 490 {
 491         currentPlayerControls.pause();
 492
 493         $("#playButton").attr("src","images/playButton.png");
 494
 495         //If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
 496         if ($("#mediaList").is(":visible"))
 497                 $("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
 498
 499         $(".navButton").fadeOut(300);
 500         $(".sortButton").fadeOut(300);
 501         $("#mediaName").fadeOut(300);
 502
 503         if (currentPlayerType !== "VIDEO")
 504                 currentPlayer.fadeOut(300);
 505         else
 506                 currentPlayer.hide();
 507
 508
 509         $(".mainButton").css({"opacity": "100"});
 510         $(".mainButton").fadeIn(800);
 511 }
 512
 513 function sortByAlpha(contentToSort)
 514 {
 515         //If contentToSort is undefined it's because the request came from the sortBy buttons
 516         if (contentToSort === undefined)
 517                 contentToSort = audioContent;
 518
 519         contentToSort.sort(function (a,b) {
 520                 var first = a.title.toLowerCase();
 521                 var second = b.title.toLowerCase();
 522
 523                 if (first < second)
 524                         return -1;
 525                 if (first > second)
 526                         return 1;
 527
 528                 return 0;
 529         });
 530
 531         fillMediaList(contentToSort);
 532 }
 533
 534 function sortByArtist(contentToSort)
 535 {
 536         if (contentToSort === undefined)
 537                 contentToSort = audioContent;
 538
 539         contentToSort.sort(function (a,b) {
 540                 var first = a.artists[0].toLowerCase();
 541                 var second = b.artists[0].toLowerCase();
 542
 543                 if (first < second)
 544                         return -1;
 545                 if (first > second)
 546                         return 1;
 547
 548                 return 0;
 549         });
 550
 551         fillMediaList(contentToSort);
 552 }
 553
 554 function sortByAlbum(contentToSort)
 555 {
 556         if (contentToSort === undefined)
 557                 contentToSort = audioContent;
 558
 559         contentToSort.sort(function (a,b) {
 560                 var first = a.album.toLowerCase();
 561                 var second = b.album.toLowerCase();
 562
 563                 if (first < second)
 564                         return -1;
 565                 if (first > second)
 566                         return 1;
 567
 568                 return 0;
 569         });
 570
 571         fillMediaList(contentToSort);
 572 }
 573 /**************************************** NAVIGATION FUNCTIONS *******************************************/
 574
 575 function playButtonClick()
 576 {
 577         if (currentPlayerControls.paused)
 578         {
 579                 currentPlayerControls.play();
 580                 $("#playButton").attr("src","images/pauseButton.png");
 581         }
 582         else
 583         {
 584                 currentPlayerControls.pause();
 585                 $("#playButton").attr("src","images/playButton.png");
 586         }
 587 }
 588
 589 function backButtonClick()
 590 {
 591         switch (currentPlayerType)
 592         {
 593         case "AUDIO":
 594                 if (audioContent)
 595                 {
 596                         if (listIndex > 0 )
 597                                 listIndex--;
 598                         else
 599                                 listIndex = imageContent.length - 1;
 600
 601                         audioPlayer.pause();
 602                         $("#playButton").attr("src","images/playButton.png");
 603
 604                         $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
 605                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 606                         audioPlayer.load();
 607                 }
 608                 break;
 609
 610         case "VIDEO":
 611                 if (videoContent)
 612                 {
 613                         if (videoIndex > 0 )
 614                                 videoIndex--;
 615                         else
 616                                 videoIndex = imageContent.length - 1;
 617
 618                         if ($("#mediaList").is(":visible"))
 619                                 videoPlayer.pause();
 620
 621                         $("#playButton").attr("src","images/playButton.png");
 622                         $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
 623                         videoPlayer.load();
 624                 }
 625                 break;
 626
 627         case "IMAGE":
 628                 if (imageContent)
 629                 {
 630                         if (imageIndex > 0 )
 631                                 imageIndex--;
 632                         else
 633                                 imageIndex = imageContent.length - 1;
 634
 635                         $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
 636                         $("#imagePlayer").css("background-size", "contain");
 637                 }
 638                 break;
 639
 640         default:
 641                 console.log("Content failure");
 642         break;
 643         }
 644 }
 645
 646
 647 function nextButtonClick()
 648 {
 649         switch (currentPlayerType)
 650         {
 651         case "AUDIO":
 652                 if (audioContent)
 653                 {
 654                         if (audioContent.length > (listIndex + 1))
 655                                 listIndex++;
 656                         else
 657                                 listIndex = 0;
 658
 659                         audioPlayer.pause();
 660                         $("#playButton").attr("src","images/playButton.png");
 661                         $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
 662                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 663                         audioPlayer.load();
 664                 }
 665                 break;
 666
 667         case "VIDEO":
 668                 if (videoContent)
 669                 {
 670                         if (videoContent.length > (videoIndex + 1))
 671                                 videoIndex++;
 672                         else
 673                                 videoIndex = 0;
 674
 675                         videoPlayer.pause();
 676                         $("#playButton").attr("src","images/playButton.png");
 677                         $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
 678                         videoPlayer.load();
 679                 }
 680                 break;
 681
 682         case "IMAGE":
 683                 if (imageContent)
 684                 {
 685                         if (imageContent.length > (imageIndex + 1))
 686                                 imageIndex++;
 687                         else
 688                                 imageIndex = 0;
 689
 690                         $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
 691                         $("#imagePlayer").css("background-size", "contain");
 692                 }
 693                 break;
 694
 695         default:
 696                 console.log("Content failure");
 697         break;
 698         }
 699 }
 700
 701 /**************************************** END NAVIGATION FUNCTIONS *******************************************/
 702
 703 function resizeMainMenu()
 704 {
 705         $("#mediaList").fadeOut(0);
 706         screenWidth = window.innerWidth;
 707         screenHeight = window.innerHeight;
 708         screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
 709         iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
 710         var padding = 20;
 711
 712         $(".mainButton").width(iconWidth + "px");
 713         $(".mainButton").height(iconWidth + "px");
 714
 715         var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
 716
 717         if (screenOrientation === "portrait")
 718                 $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
 719         else
 720         {
 721                 $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
 722                 $("#sortButtons").addClass("landscape");
 723         }
 724 }
 725
 726 function resizePlayerPage()
 727 {
 728         audioPlayer = document.getElementById("audioPlayer");
 729         videoPlayer = document.getElementById("videoPlayer");
 730         screenWidth = window.innerWidth;
 731         screenHeight = window.innerHeight;
 732
 733         var padding = 15;
 734         var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
 735
 736         $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
 737         $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
 738         $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
 739         $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
 740         $("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
 741
 742         mediaNameCanvas.width = (screenWidth);
 743         mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
 744         mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
 745         mediaNameCanvas.style.left = "0px";
 746
 747         var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
 748         var sortButtonWidth = buttonWidth * 2.5;
 749         var buttonSpacing = screenWidth / 5;
 750
 751         mediaListItemW = $("#mediaList").width() * 0.92;
 752         mediaListItemH = $("#mediaList").height() / 10;
 753 }
 754
 755 function resizeAll()
 756 {
 757         resizeMainMenu();
 758         resizePlayerPage();
 759 }
 760
 761 /*
 762  * swipe - Handles swipe events.  Currently it just acts as another way to hit the next / back buttons, but
 763  * it could be expanded to other things in the future.
 764  */
 765
 766 function swipe(direction, object)
 767 {
 768
 769         switch (object)
 770         {
 771         case "mediaName":
 772                 if (direction === "right")
 773                         nextButtonClick();
 774                 else if (direction === "left")
 775                         backButtonClick();
 776                 break;
 777
 778         default:
 779                 break;
 780         }
 781 }
 782
 783 function init()
 784 {
 785         musicIcon.src = "images/musicButton.png";
 786         vidIcon.src = "images/videoButton.png";
 787         imgIcon.src = "images/imageButton.png";
 788         imageControls = new ImageControls();
 789
 790         mediaNameCanvas = document.getElementById("mediaName");
 791         mediaNameCTX = mediaNameCanvas.getContext("2d");
 792
 793         //Resize all items and search for local media
 794         resizeAll();
 795         getMedia(contentType);
 796
 797         //Prevent highlighting
 798         window.ondragstart = function() { return false; }
 799
 800         $(window).bind('resize', resizeAll);
 801
 802         //Simple swipe detection
 803         $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
 804         $("#mediaName").mouseup(function(e){
 805                 if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
 806                 {
 807                         if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
 808                         {
 809                                 if (mouseDownEvent.clientX > e.clientX)
 810                                         swipe("left", "mediaName");
 811                                 else
 812                                         swipe("right", "mediaName");
 813                         }
 814                 }
 815         });
 816 }
 817
 818 $(document).ready(function () {
 819         init();
 820 });