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