js/main.js

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