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