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