samples/web/Sample/Tizen/Web App/MediaPlayer/project/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 currentPlayer;
  20 var currentMediaList = $("#audioMediaList");
  21 var audioMediaListLoaded = false;
  22 var videoMediaListLoaded = false;
  23 var imageMediaListLoaded = false;
  24 var audioPlayer;
  25 var videoPlayer;
  26 var imagePlayer;
  27 var vidIcon = new Image();
  28 var imgIcon = new Image();
  29 var musicIcon = new Image();
  30 var imagesLoaded = false;
  31 var mediaListItemW;
  32 var mediaListItemH;
  33 var playOnConnect = false;
  34 var mediaNameCanvas;
  35 var mediaNameCTX;
  36 var trackTimeCanvas;
  37 var trackTimeCTX;
  38 var speechObj;
  39 var nightMode = false;
  40 var waitingToResumeVideo = false;               //Media has been paused by exterior forces.  If set to true, resume previous media when given the signal.
  41 var stopServerSearch;
  42 var playBarHeight;
  43 var boxWidth;
  44 var textStartX;
  45
  46 var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  47                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
  48
  49 var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  50                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
  51
  52 var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  53                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  54
  55 var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  56                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  57
  58 var timeTemplate = {"font" : "bold 25pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  59                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  60
  61 var mediaTextTemplate2 = {"font" : "bold 20pt 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 mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
  65
  66 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
  67
  68 var mediaTextTemplate2Landscape = {"font" : "bold 13pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
  69                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
  70
  71 var mediaTextTemplate3Landscape = {"font" : "bold 13pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
  72
  73 var trackTextTemplateLandscape  = {"font" : "bold 11pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
  74
  75
  76 var mediaTextTemplate = {"font" : "bold 20pt Arial", "fillStyle" : "", "textAlign" : "left",
  77                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
  78
  79 function onError()
  80 {
  81         console.log("Content discovery failed");
  82 }
  83
  84 function setupSpeech()
  85 {
  86         console.log("MediaPlayer in setupSpeech");
  87
  88         speechObj = tizen.speech;
  89         speechObj.vocalizeString(" ");
  90
  91         try
  92         {
  93                 var speechEventListener = {
  94                         onaudiostart: function(){console.log("MediaPlayer: onaudiostart received");},
  95                         onsoundstart: function(){console.log("MediaPlayer: onsoundstart received");},
  96                         onspeechstart: function(){console.log("MediaPlayer: onspeechstart received");},
  97                         onspeechend: function(){console.log("MediaPlayer: onspeechend received");},
  98                         onsoundend: function(){console.log("MediaPlayer: onsoundend received");},
  99                         onaudioend: function(){console.log("MediaPlayer: onaudioend received");},
 100                         onresult: function(result){
 101
 102                                 console.log("MediaPlayer: onresult received");
 103
 104                                 for (var i = 0; i < result.length; i++)
 105                                 {
 106                                         console.log("MediaPlayer: forloop, command = " + result[i]);
 107                                         var commandFound = false;
 108
 109                                         switch(result[i])
 110                                         {
 111                                                 case "play":
 112                                                         playButtonClick();
 113                                                         commandFound = true;
 114                                                 break;
 115                                                 case "next":
 116                                                         nextButtonClick();
 117                                                         commandFound = true;
 118                                                 break;
 119                                                 case "previous":
 120                                                         backButtonClick();
 121                                                         commandFound = true;
 122                                                 break;
 123                                                 case "stop":
 124                                                 case "pause":
 125                                                         pauseButtonClick();
 126                                                         commandFound = true;
 127                                                 break;
 128                                                 default:
 129                                                 break;
 130                                         }
 131
 132                                         if (commandFound)
 133                                                 break;
 134                                 }
 135                         },
 136                         onnomatch: function(result){console.log("MediaPlayer: onnomatch received ");},
 137                         onerror: function(error){console.log("MediaPlayer: onerror received");},
 138                         onstart: function(){console.log("MediaPlayer: onstart received");},
 139                         onend: function(){console.log("MediaPlayer: onend received");}
 140                 }
 141
 142                 speechObj.setCBListener(speechEventListener);
 143
 144         }
 145         catch(err)
 146         {
 147                 console.log("MediaPlayer setupSpeech FAILED + " + err.message);
 148         }
 149
 150 }
 151
 152 function onAudioContentLoaded(newContent)
 153 {
 154         if (!newContent || newContent.length === 0)
 155         {
 156                 console.log("MediaPlayer: some content failed to load, trying again for " + audioPlayer.type);
 157                 audioPlayer.clearContent();
 158                 setTimeout(function(){getMedia(onAudioContentLoaded, "AUDIO");}, 3000);
 159                 return;
 160         }
 161         else
 162         {
 163                 audioPlayer.updateContent(newContent, true);
 164                 audioPlayer.onContentLoaded();
 165         }
 166 }
 167
 168 function onVideoContentLoaded(newContent)
 169 {
 170         if (!newContent || newContent.length === 0)
 171         {
 172                 console.log("MediaPlayer: some content failed to load, trying again for " + videoPlayer.type);
 173                 videoPlayer.clearContent();
 174                 setTimeout(function(){getMedia(onVideoContentLoaded, "VIDEO");}, 3000);
 175                 return;
 176         }
 177         else
 178         {
 179                 videoPlayer.updateContent(newContent, true);
 180                 videoPlayer.onContentLoaded();
 181         }
 182 }
 183
 184 function onImageContentLoaded(newContent)
 185 {
 186         if (!newContent || newContent.length === 0)
 187         {
 188                 console.log("MediaPlayer: some content failed to load, trying again for " + imagePlayer.type);
 189                 imagePlayer.clearContent();
 190                 setTimeout(function(){getMedia(onImageContentLoaded, "IMAGE");}, 3000);
 191                 return;
 192         }
 193         else
 194         {
 195                 imagePlayer.updateContent(newContent, true);
 196                 imagePlayer.onContentLoaded();
 197         }
 198 }
 199
 200 function getMedia(callback, filterType)
 201 {
 202         console.log("MediaPlayer in getMedia");
 203         var manager = tizen.content;
 204         if (manager)
 205         {
 206                 var filter = new tizen.AttributeFilter("type", "EXACTLY", filterType);
 207                 manager.find(callback, onError, null, filter);
 208         }
 209         else
 210                 console.log("MediaPlayer failed to receive media, tizen.content is unavailable");
 211 }
 212
 213 function showMediaMenu()
 214 {
 215         console.log("MediaPlayer in showMediaMenu");
 216         $(".navButton").show();
 217
 218         switch(currentPlayer.type)
 219         {
 220                 case "audio":
 221                         $("#mediaName").show();
 222                         $("#trackTime").show();
 223                         $(".sortButton").show();
 224                         currentPlayer.show();
 225
 226                         if (screenOrientation === "landscape" )
 227                                 $("#audioMediaList").addClass("landscape");
 228                         else
 229                                 $("#audioMediaList").removeClass("landscape");
 230
 231                         $("#audioMediaList").show();
 232                         break;
 233
 234                 case "video":
 235                         //show video
 236                         currentPlayer.show();
 237                         //setTimeout(function(){currentPlayer.show()}, 800);            //The video element can't be faded, so wait a moment before showing
 238                         break;
 239
 240                 case "image":
 241                         //show image
 242                         currentPlayer.show();
 243                         break;
 244
 245                 default:
 246                         console.log("Invalid player type");
 247                 break;
 248         }
 249 }
 250
 251 function showMediaList()
 252 {
 253         console.log("MediaPlayer in showMediaList");
 254
 255         if (currentMediaList.is(":visible"))
 256                 currentMediaList.hide();
 257         else
 258         {
 259                 currentMediaList.show();
 260         }
 261 }
 262
 263 function changeMenu(menuButtonId)
 264 {
 265         console.log("MediaPlayer in changeMenu");
 266         var clickedButton  = $("#" + menuButtonId);
 267         var buttonWidth  = clickedButton.width();
 268         var buttonHeight = clickedButton.height();
 269         var buttonBottom = clickedButton.css("bottom");
 270         var buttonRight  = clickedButton.css("right");
 271
 272 /*
 273         //Animate the clicked button slightly
 274         clickedButton.animate({
 275                 bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
 276                                 right: screenOrientation === "portrait" ? "+=50" : "+=0",
 277                                                 opacity: "0"
 278         }, 300 ,
 279
 280         //Reset the size once done
 281         function() {
 282                 clickedButton.width(buttonWidth);
 283                 clickedButton.height(buttonHeight);
 284
 285                 if (screenOrientation === "portrait")
 286                         clickedButton.css({"right": buttonRight});
 287                 else
 288                         clickedButton.css({"bottom": buttonBottom});
 289         }
 290         );
 291 */
 292         $(".mainButton").hide();
 293
 294         switch(menuButtonId)
 295         {
 296                 case ("mainMusicButton"):
 297                         speechObj.vocalizeString("Music player");
 298                         currentMenu = "audio";
 299                         currentPlayer = audioPlayer;
 300                         currentMediaList = $("#audioMediaList");
 301                         localStorage.prevMenu = "mainMusicButton";
 302
 303                         if (audioPlayer.currentAudioContent && audioPlayer.currentAudioContent.contentURI)
 304                         {
 305                                 localStorage.prevAudioTrack = audioPlayer.currentAudioContent.contentURI
 306                                 localStorage.prevAudioTime = audioPlayer.playerControls.currentTime;
 307                         }
 308
 309                         localStorage.prevVideo = undefined;
 310                         localStorage.prevVideoTime = undefined;
 311
 312                         if (!audioMediaListLoaded)
 313                                 audioPlayer.fillMediaList();
 314
 315                         showMediaMenu();
 316                 break;
 317
 318                 case ("mainVideoButton"):
 319                         speechObj.vocalizeString("Video player");
 320                         currentMenu = "video";
 321                         currentPlayer = videoPlayer;
 322                         currentMediaList = $("#videoMediaList");
 323                         localStorage.prevMenu = "mainVideoButton";
 324
 325                         if (videoPlayer.currentVideoContent && videoPlayer.currentVideoContent.contentURI)
 326                         {
 327                                 localStorage.prevVideo = videoPlayer.currentVideoContent.contentURI
 328                                 localStorage.prevVideoTime = videoPlayer.playerControls.currentTime;
 329                         }
 330
 331                         localStorage.prevAudioTime = undefined;
 332                         localStorage.prevAudioTrack = undefined;
 333
 334                         if (!videoMediaListLoaded)
 335                                 videoPlayer.fillMediaList();
 336
 337                         showMediaMenu();
 338                 break;
 339
 340                 case ("mainImageButton"):
 341                         speechObj.vocalizeString("Picture viewer");
 342                         currentMenu = "image";
 343                         currentPlayer = imagePlayer;
 344                         currentMediaList = $("#imageMediaList");
 345                         localStorage.prevMenu = "mainImageButton";
 346
 347                         if (!imageMediaListLoaded)
 348                                 imagePlayer.fillMediaList();
 349
 350                         showMediaMenu();
 351                 break;
 352                 default:
 353                         console.log("Error: No menu by that name");
 354                 break;
 355         }
 356 }
 357
 358 function showMainMenu()
 359 {
 360         console.log("MediaPlayer in showMainMenu, clearing all localStorage...");
 361         currentMenu = "main";
 362         localStorage.prevMenu = "MAIN";
 363         localStorage.prevAudioTime = undefined;
 364         localStorage.prevAudioTrack = undefined;
 365         localStorage.prevVideo = undefined;
 366         localStorage.prevVideoTime = undefined;
 367         localStorage.prevImage = undefined;
 368
 369         currentPlayer.pause();
 370
 371         //If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
 372         if (currentMediaList.is(":visible"))
 373                 currentMediaList.hide();
 374
 375         $(".navButton").hide();
 376         $(".sortButton").hide();
 377         $("#mediaName").hide();
 378         $("#trackTime").hide();
 379         $(".player").hide();
 380         $(".mainButton").css({"opacity": "100"});
 381         $(".mainButton").show();
 382 }
 383
 384 function sortByAlpha(contentToSort)
 385 {
 386         currentPlayer.sortByAlpha();
 387 }
 388
 389 function sortByArtist(contentToSort)
 390 {
 391         currentPlayer.sortByArtist();
 392 }
 393
 394 function sortByAlbum(contentToSort)
 395 {
 396         currentPlayer.sortByAlbum();
 397 }
 398
 399 /**************************************** NAVIGATION FUNCTIONS *******************************************/
 400
 401 // This function is called once a file being loaded is ready to play
 402 function playLoadedMedia()
 403 {
 404         audioPlayer.playLoadedMedia();
 405 }
 406
 407 function videoLoaded()
 408 {
 409     videoPlayer.videoLoaded();
 410 }
 411
 412 function playButtonClick()
 413 {
 414         console.log("MediaPlayer in playButtonClick");
 415         if (!currentPlayer.playing())
 416                 currentPlayer.play();
 417         else
 418                 currentPlayer.pause();
 419 }
 420
 421 function pauseButtonClick()
 422 {
 423         console.log("MediaPlayer in pauseButtonClick");
 424         if (currentPlayer.playing())
 425         {
 426                 currentPlayer.pause();
 427         }
 428 }
 429
 430 function backButtonClick()
 431 {
 432         console.log("MediaPlayer in backButtonClick");
 433         currentPlayer.previous();
 434 }
 435
 436
 437 function nextButtonClick()
 438 {
 439         console.log("MediaPlayer in nextButtonClick");
 440         currentPlayer.next();
 441 }
 442
 443 /**************************************** END NAVIGATION FUNCTIONS *******************************************/
 444
 445 function resizeMainMenu()
 446 {
 447         console.log("MediaPlayer in resizeMainMenu");
 448
 449         currentMediaList.hide();
 450         screenWidth = window.innerWidth;
 451         screenHeight = window.innerHeight;
 452         screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
 453         iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
 454         var padding = 20;
 455
 456         $(".mainButton").width(iconWidth + "px");
 457         $(".mainButton").height(iconWidth + "px");
 458
 459         var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
 460
 461         if (screenOrientation === "portrait")
 462                 $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
 463         else
 464         {
 465                 $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
 466                 $("#sortButtons").addClass("landscape");
 467         }
 468 }
 469
 470 function resizePlayerPage()
 471 {
 472         console.log("MediaPlayer in resizePlayerPage");
 473
 474         screenWidth = window.innerWidth;
 475         screenHeight = window.innerHeight;
 476
 477         var padding = 15;
 478         var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
 479
 480         $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
 481         $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
 482         $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
 483         $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
 484         $("#playButton").css({"width": buttonWidth * 1.15 + "px", "height": buttonWidth * 1.15 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
 485
 486         trackTimeCanvas.width = mediaNameCanvas.width = (screenWidth);
 487         trackTimeCanvas.height = mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
 488         trackTimeCanvas.style.top = mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
 489         trackTimeCanvas.style.left = mediaNameCanvas.style.left = "0px";
 490
 491         var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
 492         var sortButtonWidth = buttonWidth * 2.5;
 493         var buttonSpacing = screenWidth / 5;
 494
 495         mediaListItemW = $("#videoMediaList").width() * 0.92;
 496         mediaListItemH = $("#videoMediaList").height() / 10;
 497 }
 498
 499 function resizeAll()
 500 {
 501         console.log("MediaPlayer in resizeAll");
 502         resizeMainMenu();
 503         resizePlayerPage();
 504 }
 505
 506 /*
 507  * swipe - Handles swipe events.  Currently it just acts as another way to hit the next / back buttons, but
 508  * it could be expanded to other things in the future.
 509  */
 510
 511 function swipe(direction, object)
 512 {
 513         console.log("MediaPlayer in swipe");
 514         switch (object)
 515         {
 516         case "mediaName":
 517                 if (direction === "right")
 518                         nextButtonClick();
 519                 else if (direction === "left")
 520                         backButtonClick();
 521                 break;
 522
 523         default:
 524                 break;
 525         }
 526 }
 527
 528 function toggleNightMode(nightModeValue)
 529 {
 530         if (nightMode !== nightModeValue)
 531         {
 532                 Array.prototype.forEach.call (document.querySelectorAll ('*'), function (el) {el.classList.toggle('night');});
 533                 nightMode = nightModeValue;
 534         }
 535 }
 536
 537 function init()
 538 {
 539         console.log("MediaPlayer in init");
 540
 541         musicIcon.src = "images/musicIcon.png";
 542         vidIcon.src = "images/videoIcon.png";
 543         imgIcon.src = "images/imageIcon.png";
 544         mediaNameCanvas = document.getElementById("mediaName");
 545         mediaNameCTX = mediaNameCanvas.getContext("2d");
 546         trackTimeCanvas = document.getElementById("trackTime");
 547         trackTimeCTX = trackTimeCanvas.getContext("2d");
 548         playBarHeight = mediaNameCanvas.height;
 549         boxWidth = playBarHeight * 0.75;
 550         textStartX = boxWidth + 50;
 551
 552         var vehicle = tizen.vehicle;
 553
 554
 555         /* Subscribe to AMB NightMode signal, and switch colors
 556          * upon receipt of the signal
 557          */
 558
 559         if (vehicle && vehicle !== undefined)
 560         {
 561                 var getVal = vehicle.get("NightMode");
 562
 563                 //Check that NightMode returned a value before trying to hook up to it
 564                 if (getVal)
 565                 {
 566                         toggleNightMode(getVal.nightMode);
 567                 }
 568
 569                 /* Subscribe to AMB NightMode signal, and switch colors
 570                 * upon receipt of the signal
 571                 */
 572
 573                 vehicle.subscribe("NightMode",function(value) {
 574                                 console.log("MediaPlayer: Day / Night mode changed to " + value.nightMode);
 575                                 toggleNightMode(value.nightMode);
 576                 });
 577
 578
 579                 /* Subscribe to AMB DrivingMode signal, and pause video
 580                  * upon receipt of the signal
 581                  */
 582
 583
 584                 vehicle.subscribe("DrivingMode",function(value) {
 585                         console.log("MediaPlayer: DrivingMode changed to " + value.drivingMode);
 586
 587                         if (value.drivingMode > 0 && currentPlayer.type === "video" && currentPlayer.playing())
 588                         {
 589                                 console.log("MediaPlayer: pausing video due to vehicle motion");
 590                                 currentPlayer.pause();
 591                                 waitingToResumeVideo = true;
 592                         }
 593                         else if (value.drivingMode === 0 && currentPlayer.type === "video" && waitingToResumeVideo)
 594                         {
 595                                 console.log("MediaPlayer: vehicle has stopped, resuming video");
 596                                 currentPlayer.play();
 597                                 waitingToResumeVideo = false;
 598                         }
 599                 });
 600         }
 601
 602         //Setup voice control
 603         if (tizen.speech)
 604                 setupSpeech();
 605         else {
 606                 console.log("MediaPlayer: Speech Recognition not running, voice control will be unavailable");
 607                 speechObj = {
 608                     vocalizeString: function(item) { console.log(item); }
 609                 };
 610         }
 611
 612         audioPlayer = new MediaPlayer("audio");
 613         videoPlayer = new MediaPlayer("video");
 614         imagePlayer = new MediaPlayer("image");
 615         currentPlayer = audioPlayer;
 616
 617         //Resize all items and search for local media
 618         resizeAll();
 619
 620         if (localStorage.prevMenu && localStorage.prevMenu !== "MAIN")
 621                 changeMenu(localStorage.prevMenu)
 622         else
 623                 showMainMenu();
 624
 625         getMedia(onAudioContentLoaded, "AUDIO");
 626         getMedia(onVideoContentLoaded, "VIDEO");
 627         getMedia(onImageContentLoaded, "IMAGE");
 628
 629         //Check if DLNA plugin is installed.  If so, scan for media.
 630         if (tizen.mediaserver)
 631         {
 632                 //Currently no success signal, so continue trying until a server is found.  Once that
 633                 //happens, clear the stopServerSearch interval
 634
 635                 stopServerSearch = setInterval(function(){console.log("MediaPlayer searching for remote media..."); tizen.mediaserver.scanNetwork(foundMediaServer);}, 5000);
 636         }
 637         else
 638                 console.log("MediaPlayer: No DLNA server running, using local media only...");
 639
 640         //Prevent highlighting
 641         window.ondragstart = function() { return false; }
 642
 643         $(window).bind('resize', resizeAll);
 644
 645         //Simple swipe detection
 646         $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
 647         $("#mediaName").mouseup(function(e){
 648                 if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
 649                 {
 650                         if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
 651                         {
 652                                 if (mouseDownEvent.clientX > e.clientX)
 653                                         swipe("left", "mediaName");
 654                                 else
 655                                         swipe("right", "mediaName");
 656                         }
 657                 }
 658         });
 659
 660     document.getElementById('videoPlayer').addEventListener("playing", function() {
 661         $("#playButton").toggleClass('playing', true);
 662         $("#navigationButtons").hide();
 663     }, false);
 664     document.getElementById('videoPlayer').addEventListener("pause", function() {
 665         $("#playButton").toggleClass('playing', false);
 666         $("#navigationButtons").show();
 667     }, false);
 668     document.getElementById('videoPlayer').addEventListener("ended", function() {
 669         $("#playButton").toggleClass('playing', false);
 670         $("#navigationButtons").show();
 671     }, false);
 672     document.getElementById('audioPlayer').addEventListener("playing", function() {
 673         $("#playButton").toggleClass('playing', true);
 674     }, false);
 675     document.getElementById('audioPlayer').addEventListener("pause", function() {
 676         $("#playButton").toggleClass('playing', false);
 677     }, false);
 678     document.getElementById('audioPlayer').addEventListener("ended", function() {
 679         $("#playButton").toggleClass('playing', false);
 680     }, false);
 681     document.getElementById('imagePlayer').addEventListener("click", function() {
 682         if (!imagePlayer.playing)
 683         {
 684             // next picture
 685             nextButtonClick();
 686         }
 687         else
 688         {
 689             // pause the slideshow and fade in the controls
 690             imagePlayer.pause();
 691             $("#navigationButtons").show();
 692         }
 693     }, false);
 694 }
 695
 696 $(document).ready(function () {
 697         init();
 698 });