From: brianjjones <brian.j.jones@intel.com>
Date: Wed, 26 Jun 2013 01:37:33 +0000 (-0700)
Subject: Check that the album cover art image is valid before using it. Removing some images... 
X-Git-Tag: accepted/tizen/20130626.175912^0
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=refs%2Fchanges%2F65%2F4265%2F1;p=profile%2Fivi%2FMediaPlayer.git

Check that the album cover art image is valid before using it. Removing some images due to renaming.
---

diff --git a/css/main.css b/css/main.css
index e9cd634..0817f8a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -69,7 +69,6 @@ html
 #imagePlayer
 {	
 	position:absolute;
-	background: url(../images/DPP_0103.JPG) no-repeat center;	
 	background-size: contain;
 	display:none;
 	width: 90%;
diff --git a/images/albumButton2.png b/images/albumButton2.png
deleted file mode 100644
index 5d2a650..0000000
Binary files a/images/albumButton2.png and /dev/null differ
diff --git a/images/allButton2.png b/images/allButton2.png
deleted file mode 100644
index 6ce7cb6..0000000
Binary files a/images/allButton2.png and /dev/null differ
diff --git a/images/artistButton3.png b/images/artistButton3.png
deleted file mode 100644
index 2883015..0000000
Binary files a/images/artistButton3.png and /dev/null differ
diff --git a/images/button3.png b/images/button3.png
deleted file mode 100644
index b6ac7f9..0000000
Binary files a/images/button3.png and /dev/null differ
diff --git a/js/main.js b/js/main.js
index 6db59d5..da361c6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2013, Intel Corporation.
+ *
+ * This program is licensed under the terms and conditions of the
+ * Apache License, version 2.0.  The full text of the Apache License is at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
 var currentMenu = "main";
 var mouseDownEvent;
 var resizeCB = resizeMainMenu;
@@ -28,15 +37,15 @@ var mediaNameCanvas;
 var mediaNameCTX;
 
 var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
-	    "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};	//150
+    "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};	//150
 
 var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
-	    "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
+    "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
 
 var mediaTextTemplate2 = {"font" : "bold 20pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
-    "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};	
+    "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
 
-var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};	
+var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
 
 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
 
@@ -45,593 +54,599 @@ var mediaTextTemplate = {"font" : "bold 20pt Arial", "fillStyle" : "", "textAlig
 
 function onError()
 {
-	alert("Content discovery failed");
+    alert("Content discovery failed");
 }
 
 function loadImages(callback)
 {
     var loadedImages = 0;
     var numImages = 0;
-    
+
     for (var src in audioContent)
     {
-        numImages++;
+	numImages++;
     }
     for (var src in audioContent)
     {
-    	audioContent[src].coverArt = new Image();
-        audioContent[src].coverArt.onload = function(){
-            if (++loadedImages >= numImages) {     
-            	imagesLoaded = true;
-                callback(audioContent);
-            }
-        };
-        audioContent[src].coverArt.src = audioContent[src].coverArtURI;        
+	audioContent[src].coverArt = new Image();
+	audioContent[src].coverArt.onload = function(){
+	    if (++loadedImages >= numImages) {
+		imagesLoaded = true;
+		callback(audioContent);
+	    }
+	};
+
+	audioContent[src].coverArt.onerror = function(e){
+	    audioContent[src].coverArt.src = "images/musicButton.png";
+	};
+
+	audioContent[src].coverArt.src = audioContent[src].coverArtURI;
     }
 }
 
 function updateMediaName(newArtist, newTitle, newCover)
-{		
-	var playBarHeight = mediaNameCanvas.height;
-	var boxWidth = playBarHeight * 0.75;
-	mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
-	
-	if (currentPlayerType === "AUDIO")
-	{
-		if (screenOrientation === "portrait")
-		{
-			var shadeJump = 10;
-			var alphaJump = 0.01;
-			var currColor = 255;
-			var currAlpha = 1.0;
-						
-			mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
-			mediaNameCTX.strokeStyle="rgba(130,130,130,1)";	
-			mediaNameCTX.lineWidth = 5;		
-			mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
-			mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
-			mediaNameCTX.drawImage(newCover, 20, 20, boxWidth, boxWidth);
-			var textStartX = boxWidth + 50;
-			var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
-			trackText.applyTemplate(mainMenuTitleTemplate);			
-			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});
-			
-		}
-		else
-			mediaNameCTX.drawImage(newCover, 0, 0, mediaNameCanvas.height, mediaNameCanvas.height);
-	}
-		
-	trackText.drawObj();
-	trackText.drawLargeShadow();
-		
-	artistText.yLoc = 70 + trackText.height;
-	artistText.applyTemplate(mainTrackTemplate);
-	artistText.drawObj();	
+{
+    var playBarHeight = mediaNameCanvas.height;
+    var boxWidth = playBarHeight * 0.75;
+    mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
+
+    if (currentPlayerType === "AUDIO")
+    {
+	var shadeJump = 10;
+	var alphaJump = 0.01;
+	var currColor = 255;
+	var currAlpha = 1.0;
+
+	mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
+	mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
+	mediaNameCTX.lineWidth = 5;
+	mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
+	mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
+	mediaNameCTX.drawImage(newCover, 20, 20, boxWidth, boxWidth);
+	var textStartX = boxWidth + 50;
+	var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
+	trackText.applyTemplate(mainMenuTitleTemplate);
+	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});
+
+	mediaNameCTX.drawImage(newCover, 0, 0, mediaNameCanvas.height, mediaNameCanvas.height);
+    }
+
+    trackText.drawObj();
+    trackText.drawLargeShadow();
+
+    artistText.yLoc = 70 + trackText.height;
+    artistText.applyTemplate(mainTrackTemplate);
+    artistText.drawObj();
 }
 
 function fillMediaList(contentList)
-{		
-	if (!imagesLoaded)
-		return false;
-	
-	var iconURI;
-	var currentCanvas;
-	var iconImg = new Image();
-	var mediaListItemW = $("#mediaList").width() * 0.92;
-	var mediaListItemH = $("#mediaList").height() / 10;
-	var canvasW = mediaListItemW;// * 0.9;
-	var canvasH = mediaListItemH * 0.95 ;		
-		
-	$("#mediaListItems").empty();
-	var lightColor = false;
-	for (var i=0; i < contentList.length; i++)	
-	{			
-		if (!lightColor)
-		{	
-		$("#mediaListItems").append("<li><a href='#'>" +				
-				"<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +		
-				"</a></li>"
-				);
-		}
-		else
-		{
-			$("#mediaListItems").append("<li><a href='#' class='lightColor'>" +				
-					"<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +		
-					"</a></li>"
-					);
-		}
-	    
-		lightColor = !lightColor;
-		
-		currentCanvas = document.getElementById("canvasNum"+ i);
-		currentCTX = currentCanvas.getContext("2d");
-		
-		// Set callback function for the new list item
-		$("#canvasNum"+i).click(function () {			
-			listIndex = $(this).parent().parent().index();
-			
-			switch (currentPlayerType)
-			{
-				case "AUDIO":
-					updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);		   
-					$("#audioSrc").attr("src", audioContent[listIndex].contentURI); 
-				    audioPlayer.load();					
-				break;
-				case "VIDEO":				
-					updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);		   
-					$("#videoSrc").attr("src", videoContent[listIndex].contentURI); 
-				    videoPlayer.load();
-				    $("#mediaList").fadeOut(300);
-				break;
-				case "IMAGE":
-					$("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
-					$("#imagePlayer").css("background-size", "contain");
-					$("#mediaList").fadeOut(300);
-				break;
-				default:
-				break;			
-			}
-		});
+{
+    if (!imagesLoaded)
+	return false;
+
+    var iconURI;
+    var currentCanvas;
+    var iconImg = new Image();
+    var mediaListItemW = $("#mediaList").width() * 0.92;
+    var mediaListItemH = $("#mediaList").height() / 10;
+    var canvasW = mediaListItemW;// * 0.9;
+    var canvasH = mediaListItemH * 0.95 ;
+
+    $("#mediaListItems").empty();
+    var lightColor = false;
+    for (var i=0; i < contentList.length; i++)
+    {
+	if (!lightColor)
+	{
+	    $("#mediaListItems").append("<li><a href='#'>" +
+		    "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+		    "</a></li>"
+		    );
+	}
+	else
+	{
+	    $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
+		    "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+		    "</a></li>"
+		    );
+	}
+
+	lightColor = !lightColor;
+
+	currentCanvas = document.getElementById("canvasNum"+ i);
+	currentCTX = currentCanvas.getContext("2d");
+
+	// Set callback function for the new list item
+	$("#canvasNum"+i).click(function () {
+		listIndex = $(this).parent().parent().index();
 
 		switch (currentPlayerType)
 		{
-			case "AUDIO":
-				currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
-				var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
-				var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
-								
-			break;
-			case "VIDEO":				
-				currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
-				var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
-				var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
-				
-			break;
-			case "IMAGE":
-				currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
-				var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
-				var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
-			break;
-			default:
-			break;			
+		case "AUDIO":
+		updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+		$("#audioSrc").attr("src", audioContent[listIndex].contentURI);
+		audioPlayer.load();
+		break;
+		case "VIDEO":
+		updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
+		$("#videoSrc").attr("src", videoContent[listIndex].contentURI);
+		videoPlayer.load();
+		$("#mediaList").fadeOut(300);
+		break;
+		case "IMAGE":
+		$("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
+		$("#imagePlayer").css("background-size", "contain");
+		$("#mediaList").fadeOut(300);
+		break;
+		default:
+		break;
 		}
+	});
+
+	switch (currentPlayerType)
+	{
+	    case "AUDIO":
+		currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
+		var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
+		var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 
-		trackText.applyTemplate(mediaTextTemplate2);
-		trackText.drawObj();		
-		trackText.applyTemplate(mediaTextTemplate3);
-		trackText.drawObj();
-		
-		artistText.applyTemplate(trackTextTemplate);
-		artistText.drawObj();		
-	}	
-	
-	$("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});	
+		break;
+	    case "VIDEO":
+		currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
+		var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
+		var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+
+		break;
+	    case "IMAGE":
+		currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
+		var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
+		var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+		break;
+	    default:
+		break;
+	}
+
+	trackText.applyTemplate(mediaTextTemplate2);
+	trackText.drawObj();
+	trackText.applyTemplate(mediaTextTemplate3);
+	trackText.drawObj();
+
+	artistText.applyTemplate(trackTextTemplate);
+	artistText.drawObj();
+    }
+
+    $("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});
 }
 
 function onContentItemArraySuccess(content)
 {
-	var emptyContent = true;
-		
-	if (!content || content === undefined || content.length <= 0)
-		alert("Invalid content");
-	else
+    var emptyContent = true;
+
+    if (!content || content === undefined || content.length <= 0)
+	alert("Invalid content");
+    else
+    {
+	emptyContent = false;
+    }
+
+    switch (contentType)
+    {
+	case "AUDIO":
+	    if (!emptyContent)
+	    {
+		audioContent = content;
+		sortByAlpha(audioContent);
+
+		$("#audioSrc").attr("src", audioContent[0].contentURI);
+
+		var imgSources = [];
+		for (var i=0; i < audioContent.length; i++)
 		{
-		emptyContent = false;
+		    if (i == 0)
+			audioContent[i].coverArtURI = "images/musicButton.png";
+		    else
+		    {
+			var iconURI = audioContent[i].thumbnailURIs[0].length > 1 ? audioContent[i].thumbnailURIs[0] :  "images/musicButton.png";
+			audioContent[i].coverArtURI = iconURI;
+		    }
 		}
 
-	switch (contentType)
-	{
-		case "AUDIO":
-			if (!emptyContent)
-			{
-				audioContent = content;
-				sortByAlpha(audioContent);
-								
-				$("#audioSrc").attr("src", audioContent[0].contentURI);
-				
-				var imgSources = [];
-				for (var i=0; i < audioContent.length; i++)	
-				{						
-					var iconURI = audioContent[i].thumbnailURIs[0].length > 1 ? audioContent[i].thumbnailURIs[0] :  "images/musicButton.png";	
-					audioContent[i].coverArtURI = iconURI;					
-				}
-			
-				loadImages(fillMediaList);
-			}
-			contentType = "VIDEO";			
-			break;
-		case "VIDEO":
-			if (!emptyContent)
-			{
-				videoContent = content;
-				$("#videoSrc").attr("src", videoContent[0].contentURI);
-			}
-			contentType = "IMAGE";
-			break;
-		case "IMAGE":
-			if (!emptyContent)
-			{
-				imageContent = content;
-				$("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
-				$("#imagePlayer").css("background-size", "contain");
-			}
-			contentType = undefined;			
-			break;
-		default:
-			console.log("Undefined content search type");
-			nextContentType = undefined;
-			break;			
-	}
-	
-	if (contentType !== undefined)
-		getMedia(contentType);	
+		loadImages(fillMediaList);
+	    }
+	    contentType = "VIDEO";
+	    break;
+	case "VIDEO":
+	    if (!emptyContent)
+	    {
+		videoContent = content;
+		$("#videoSrc").attr("src", videoContent[0].contentURI);
+	    }
+	    contentType = "IMAGE";
+	    break;
+	case "IMAGE":
+	    if (!emptyContent)
+	    {
+		imageContent = content;
+		$("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
+		$("#imagePlayer").css("background-size", "contain");
+	    }
+	    contentType = undefined;
+	    break;
+	default:
+	    console.log("Undefined content search type");
+	    nextContentType = undefined;
+	    break;
+    }
+
+    if (contentType !== undefined)
+	getMedia(contentType);
 }
 
 function getMedia(mediaType)
 {
-	var manager = tizen.content;
+    var manager = tizen.content;
 
-	var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
-	manager.find(onContentItemArraySuccess, onError, null, filter);	
+    var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
+    manager.find(onContentItemArraySuccess, onError, null, filter);
 }
 
 function showMediaMenu()
-{		
-	$(".navButton").fadeIn(800);
-	
-	switch(currentPlayerType)
-	{
-		case "AUDIO":
-			//show audio player
-			updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
-			$("#mediaName").fadeIn(800);
-			$(".sortButton").fadeIn(800);
-			currentPlayer.fadeIn(800);
-			$("#mediaList").addClass("mediaListAudioList");
-			$("#mediaList").fadeIn(800);			
-			break;
-		case "VIDEO":
-			//show video
-			setTimeout(function(){currentPlayer.show()}, 800); 		//The video element can't be faded, so wait a moment before showing
-			break;
-		case "IMAGE":
-			//show image
-			currentPlayer.fadeIn(800);
-			break;
-		default:0
-			console.log("Invalid player type");
-			break;
-	}		
+{
+    $(".navButton").fadeIn(800);
+
+    switch(currentPlayerType)
+    {
+	case "AUDIO":
+	    //show audio player
+	    updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+	    $("#mediaName").fadeIn(800);
+	    $(".sortButton").fadeIn(800);
+	    currentPlayer.fadeIn(800);
+	    $("#mediaList").addClass("mediaListAudioList");
+	    $("#mediaList").fadeIn(800);
+	    break;
+	case "VIDEO":
+	    //show video
+	    setTimeout(function(){currentPlayer.show()}, 800); 		//The video element can't be faded, so wait a moment before showing
+	    break;
+	case "IMAGE":
+	    //show image
+	    currentPlayer.fadeIn(800);
+	    break;
+	default:0
+		console.log("Invalid player type");
+		break;
+    }
 }
 
 function showMediaList()
 {
-	if ($("#mediaList").is(":visible"))		
-		$("#mediaList").fadeOut(300);
-	else
-	{
-		fillMediaList(currentContent);		
-		$("#mediaList").fadeIn(300);
-	}
+    if ($("#mediaList").is(":visible"))
+	$("#mediaList").fadeOut(300);
+    else
+    {
+	fillMediaList(currentContent);
+	$("#mediaList").fadeIn(300);
+    }
 }
 
 function changeMenu(menuButtonId)
 {
-	var clickedButton  = $("#" + menuButtonId);
-	var buttonWidth  = clickedButton.width();
-	var buttonHeight = clickedButton.height();
-	var buttonBottom = clickedButton.css("bottom");
-	var buttonRight  = clickedButton.css("right");
-	
-	//Animate the clicked button slightly
-	clickedButton.animate({
-		bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
-		right: screenOrientation === "portrait" ? "+=50" : "+=0",		
-		opacity: "0"
-		}, 300 , 
-		
-		//Reset the size once done
-	    function() {		
-			clickedButton.width(buttonWidth);
-			clickedButton.height(buttonHeight);	
-					
-			if (screenOrientation === "portrait")
-				clickedButton.css({"right": buttonRight});
-			else
-				clickedButton.css({"bottom": buttonBottom});			
-		} 
-	);
-	
-	$(".mainButton").fadeOut(300);
-
-	switch(menuButtonId)
-	{
-		case ("mainMusicButton"):
-			currentPlayer = $("#audioPlayer");
-			currentPlayerControls = document.getElementById("audioPlayer");
-			currentPlayerType = "AUDIO";	
-			currentContent = audioContent;			
-			showMediaMenu();			
-			break;
-		case ("mainVideoButton"):
-			currentPlayer = $("#videoPlayer");
-			currentPlayerControls = document.getElementById("videoPlayer");
-			currentPlayerType = "VIDEO";
-			currentContent = videoContent;			
-			showMediaMenu();
-			break;
-		case ("mainImageButton"):			
-			currentPlayer = $("#imagePlayer");
-			currentPlayerType = "IMAGE";
-			currentContent = imageContent;			
-			showMediaMenu();			
-			break;
-		default:
-			console.log("Error: No menu by that name");
-			break;
-	}
+    var clickedButton  = $("#" + menuButtonId);
+    var buttonWidth  = clickedButton.width();
+    var buttonHeight = clickedButton.height();
+    var buttonBottom = clickedButton.css("bottom");
+    var buttonRight  = clickedButton.css("right");
+
+    //Animate the clicked button slightly
+    clickedButton.animate({
+bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
+right: screenOrientation === "portrait" ? "+=50" : "+=0",
+opacity: "0"
+}, 300 ,
+
+//Reset the size once done
+function() {
+clickedButton.width(buttonWidth);
+clickedButton.height(buttonHeight);
+
+if (screenOrientation === "portrait")
+clickedButton.css({"right": buttonRight});
+else
+clickedButton.css({"bottom": buttonBottom});
+}
+);
+
+    $(".mainButton").fadeOut(300);
+
+switch(menuButtonId)
+{
+    case ("mainMusicButton"):
+	currentPlayer = $("#audioPlayer");
+	currentPlayerControls = document.getElementById("audioPlayer");
+	currentPlayerType = "AUDIO";
+	currentContent = audioContent;
+	showMediaMenu();
+	break;
+    case ("mainVideoButton"):
+	currentPlayer = $("#videoPlayer");
+	currentPlayerControls = document.getElementById("videoPlayer");
+	currentPlayerType = "VIDEO";
+	currentContent = videoContent;
+	showMediaMenu();
+	break;
+    case ("mainImageButton"):
+	currentPlayer = $("#imagePlayer");
+	currentPlayerType = "IMAGE";
+	currentContent = imageContent;
+	showMediaMenu();
+	break;
+    default:
+	console.log("Error: No menu by that name");
+	break;
+}
 }
 
 function showMainMenu()
-{  	
-	audioPlayer.pause();
-	videoPlayer.pause();
-	$("#playButton").attr("src","images/playButton.png");
-	
-	//If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
-	if ($("#mediaList").is(":visible"))		
-		$("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
-	
-	$(".navButton").fadeOut(300);
-	$(".sortButton").fadeOut(300);
-	$("#mediaName").fadeOut(300);
-	
-	if (currentPlayerType !== "VIDEO")
-		currentPlayer.fadeOut(300);
-	else
-		currentPlayer.hide();
-	
-	
-	$(".mainButton").css({"opacity": "100"});
-	$(".mainButton").fadeIn(800);
+{
+    audioPlayer.pause();
+    videoPlayer.pause();
+    $("#playButton").attr("src","images/playButton.png");
+
+    //If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
+    if ($("#mediaList").is(":visible"))
+	$("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
+
+    $(".navButton").fadeOut(300);
+    $(".sortButton").fadeOut(300);
+    $("#mediaName").fadeOut(300);
+
+    if (currentPlayerType !== "VIDEO")
+	currentPlayer.fadeOut(300);
+    else
+	currentPlayer.hide();
+
+
+    $(".mainButton").css({"opacity": "100"});
+    $(".mainButton").fadeIn(800);
 }
 
 function sortByAlpha(contentToSort)
 {
-	//If contentToSort is undefined it's because the request came from the sortBy buttons
-	if (contentToSort === undefined)
-		contentToSort = audioContent;
-	
-	contentToSort.sort(function (a,b) {
-		var first = a.title.toLowerCase();
-		var second = b.title.toLowerCase();
-		
-		if (first < second)
-			return -1;
-		if (first > second)
-			return 1;
-		
-		return 0;			
-	});	
-	
-	fillMediaList(contentToSort);
+    //If contentToSort is undefined it's because the request came from the sortBy buttons
+    if (contentToSort === undefined)
+	contentToSort = audioContent;
+
+    contentToSort.sort(function (a,b) {
+	    var first = a.title.toLowerCase();
+	    var second = b.title.toLowerCase();
+
+	    if (first < second)
+	    return -1;
+	    if (first > second)
+	    return 1;
+
+	    return 0;
+	    });
+
+    fillMediaList(contentToSort);
 }
 
 function sortByArtist(contentToSort)
 {
-	if (contentToSort === undefined)
-		contentToSort = audioContent;
-	
-	contentToSort.sort(function (a,b) {
-		var first = a.artists[0].toLowerCase();
-		var second = b.artists[0].toLowerCase();
-		
-		if (first < second)
-			return -1;
-		if (first > second)
-			return 1;
-		
-		return 0;			
-	});	
-	
-	fillMediaList(contentToSort);	
+    if (contentToSort === undefined)
+	contentToSort = audioContent;
+
+    contentToSort.sort(function (a,b) {
+	    var first = a.artists[0].toLowerCase();
+	    var second = b.artists[0].toLowerCase();
+
+	    if (first < second)
+	    return -1;
+	    if (first > second)
+	    return 1;
+
+	    return 0;
+	    });
+
+    fillMediaList(contentToSort);
 }
 
 function sortByAlbum(contentToSort)
 {
-	if (contentToSort === undefined)
-		contentToSort = audioContent;
-	
-	contentToSort.sort(function (a,b) {
-		var first = a.album.toLowerCase();
-		var second = b.album.toLowerCase();
-		
-		if (first < second)
-			return -1;
-		if (first > second)
-			return 1;
-		
-		return 0;			
-	});
-	
-	fillMediaList(contentToSort);
+    if (contentToSort === undefined)
+	contentToSort = audioContent;
+
+    contentToSort.sort(function (a,b) {
+	    var first = a.album.toLowerCase();
+	    var second = b.album.toLowerCase();
+
+	    if (first < second)
+	    return -1;
+	    if (first > second)
+	    return 1;
+
+	    return 0;
+	    });
+
+    fillMediaList(contentToSort);
 }
 /**************************************** NAVIGATION FUNCTIONS *******************************************/
 
 function playButtonClick()
-{		
-	if (currentPlayerControls.paused)
-	{
-		currentPlayerControls.play();
-		$("#playButton").attr("src","images/pauseButton.png");
-	}
-	else
-	{
-		currentPlayerControls.pause();
-		$("#playButton").attr("src","images/playButton.png");
-	}
+{
+    if (currentPlayerControls.paused)
+    {
+	currentPlayerControls.play();
+	$("#playButton").attr("src","images/pauseButton.png");
+    }
+    else
+    {
+	currentPlayerControls.pause();
+	$("#playButton").attr("src","images/playButton.png");
+    }
 }
 
 function backButtonClick()
-{	
-	switch (currentPlayerType)
-	{
-		case "AUDIO":
-			if (audioContent)
-			{
-				if (listIndex > 0 )
-					listIndex--;
-				else
-					listIndex = imageContent.length - 1;
-				
-				audioPlayer.pause();
-				$("#playButton").attr("src","images/playButton.png");
-								
-				$("#audioSrc").attr("src", audioContent[listIndex].contentURI);
-				updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
-				audioPlayer.load();				
-			}
-			break;
-		case "VIDEO":			
-			if (videoContent)
-			{
-				if (videoIndex > 0 )
-					videoIndex--;
-				else
-					videoIndex = imageContent.length - 1;
-
-				if ($("#mediaList").is(":visible"))		
-				videoPlayer.pause();	
-				$("#playButton").attr("src","images/playButton.png");
-				$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
-				videoPlayer.load();
-			}
-			break;
-		case "IMAGE":
-			if (imageContent)
-			{				
-				if (imageIndex > 0 )
-					imageIndex--;
-				else
-					imageIndex = imageContent.length - 1;				
-
-				$("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
-				$("#imagePlayer").css("background-size", "contain");
-			}
-			break;
-		default:
-			console.log("Content failure");
-			break;			
-	}
+{
+    switch (currentPlayerType)
+    {
+	case "AUDIO":
+	    if (audioContent)
+	    {
+		if (listIndex > 0 )
+		    listIndex--;
+		else
+		    listIndex = imageContent.length - 1;
+
+		audioPlayer.pause();
+		$("#playButton").attr("src","images/playButton.png");
+
+		$("#audioSrc").attr("src", audioContent[listIndex].contentURI);
+		updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+		audioPlayer.load();
+	    }
+	    break;
+	case "VIDEO":
+	    if (videoContent)
+	    {
+		if (videoIndex > 0 )
+		    videoIndex--;
+		else
+		    videoIndex = imageContent.length - 1;
+
+		if ($("#mediaList").is(":visible"))
+		    videoPlayer.pause();
+		$("#playButton").attr("src","images/playButton.png");
+		$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
+		videoPlayer.load();
+	    }
+	    break;
+	case "IMAGE":
+	    if (imageContent)
+	    {
+		if (imageIndex > 0 )
+		    imageIndex--;
+		else
+		    imageIndex = imageContent.length - 1;
+
+		$("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
+		$("#imagePlayer").css("background-size", "contain");
+	    }
+	    break;
+	default:
+	    console.log("Content failure");
+	    break;
+    }
 }
 
 
 function nextButtonClick()
-{	
-	switch (currentPlayerType)
-	{
-		case "AUDIO":
-			if (audioContent)
-			{
-				if (audioContent.length > (listIndex + 1))
-					listIndex++;
-				else
-					listIndex = 0;
-				
-				audioPlayer.pause();
-				$("#playButton").attr("src","images/playButton.png");
-				
-				$("#audioSrc").attr("src", audioContent[listIndex].contentURI);
-				updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);				
-				audioPlayer.load();
-			}
-			break;
-		case "VIDEO":			
-			if (videoContent)
-			{
-				if (videoContent.length > (videoIndex + 1))
-					videoIndex++;
-				else
-					videoIndex = 0;
-				
-				videoPlayer.pause();				
-				$("#playButton").attr("src","images/playButton.png");
-				
-				$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
-				videoPlayer.load();
-			}
-			break;
-		case "IMAGE":
-			if (imageContent)
-			{				
-				if (imageContent.length > (imageIndex + 1))
-					imageIndex++;
-				else
-					imageIndex = 0;				
-				
-				$("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
-				$("#imagePlayer").css("background-size", "contain");
-			}
-			break;
-		default:
-			console.log("Content failure");
-			break;			
-	}
+{
+    switch (currentPlayerType)
+    {
+	case "AUDIO":
+	    if (audioContent)
+	    {
+		if (audioContent.length > (listIndex + 1))
+		    listIndex++;
+		else
+		    listIndex = 0;
+
+		audioPlayer.pause();
+		$("#playButton").attr("src","images/playButton.png");
+
+		$("#audioSrc").attr("src", audioContent[listIndex].contentURI);
+		updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+		audioPlayer.load();
+	    }
+	    break;
+	case "VIDEO":
+	    if (videoContent)
+	    {
+		if (videoContent.length > (videoIndex + 1))
+		    videoIndex++;
+		else
+		    videoIndex = 0;
+
+		videoPlayer.pause();
+		$("#playButton").attr("src","images/playButton.png");
+
+		$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
+		videoPlayer.load();
+	    }
+	    break;
+	case "IMAGE":
+	    if (imageContent)
+	    {
+		if (imageContent.length > (imageIndex + 1))
+		    imageIndex++;
+		else
+		    imageIndex = 0;
+
+		$("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
+		$("#imagePlayer").css("background-size", "contain");
+	    }
+	    break;
+	default:
+	    console.log("Content failure");
+	    break;
+    }
 }
 
 /**************************************** END NAVIGATION FUNCTIONS *******************************************/
 
 function resizeMainMenu()
 {
-	$("#mediaList").fadeOut(0);
-	screenWidth = window.innerWidth;
-	screenHeight = window.innerHeight;	
-	screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";	
-	iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
-	var padding = 20;
-	
-	$(".mainButton").width(iconWidth + "px");
-	$(".mainButton").height(iconWidth + "px");
-		
-	var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;	
-	
-	if (screenOrientation === "portrait")	
-		$("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
-	else
-		$("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - S(padding * 3)) + "px", "width" : "100%"});
+    $("#mediaList").fadeOut(0);
+    screenWidth = window.innerWidth;
+    screenHeight = window.innerHeight;
+    screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
+    iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
+    var padding = 20;
+
+    $(".mainButton").width(iconWidth + "px");
+    $(".mainButton").height(iconWidth + "px");
+
+    var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
+
+    if (screenOrientation === "portrait")
+	$("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
+    else
+	$("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
 }
 
 function resizePlayerPage()
 {
-	audioPlayer = document.getElementById("audioPlayer");
-	videoPlayer = document.getElementById("videoPlayer");
-	screenWidth = window.innerWidth;
-	screenHeight = window.innerHeight;
-		
-	var padding = 15;	
-	var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
-		
-	$("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});	
-	$("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
-	$("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
-	$("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
-	$("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
-		
-	mediaNameCanvas.width = (screenWidth);
-	mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
-	mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
-	mediaNameCanvas.style.left = "0px";
-	
-	var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
-	var sortButtonWidth = buttonWidth * 2.5;
-	var buttonSpacing = screenWidth / 5; 
-	$(".player").css({"height": (screenHeight - (buttonWidth * 2) - (padding * 2)) + "px", "top": buttonWidth + padding + "px"});	
+    audioPlayer = document.getElementById("audioPlayer");
+    videoPlayer = document.getElementById("videoPlayer");
+    screenWidth = window.innerWidth;
+    screenHeight = window.innerHeight;
+
+    var padding = 15;
+    var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
+
+    $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
+    $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
+    $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
+    $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
+    $("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
+
+    mediaNameCanvas.width = (screenWidth);
+    mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
+    mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
+    mediaNameCanvas.style.left = "0px";
+
+    var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
+    var sortButtonWidth = buttonWidth * 2.5;
+    var buttonSpacing = screenWidth / 5;
+    $(".player").css({"height": (screenHeight - (buttonWidth * 2) - (padding * 2)) + "px", "top": buttonWidth + padding + "px"});
 }
 
 function resizeAll()
 {
-	resizeMainMenu();
-	resizePlayerPage();	
+    resizeMainMenu();
+    resizePlayerPage();
 }
 
 /*
@@ -641,55 +656,54 @@ function resizeAll()
 
 function swipe(direction, object)
 {
-	
-	switch (object)
-	{
-		case "mediaName":
-			if (direction === "right")
-				nextButtonClick();
-			else if (direction === "left")
-				backButtonClick();
-		break;
-		
-		default:
-		break;		
-	}
+
+    switch (object)
+    {
+	case "mediaName":
+	    if (direction === "right")
+		nextButtonClick();
+	    else if (direction === "left")
+		backButtonClick();
+	    break;
+
+	default:
+	    break;
+    }
 }
 
-function init() 
-{	
-	vidIcon.src = "images/videoButton.png";
-	imgIcon.src = "images/imageButton.png";
-	metalBar.src = "images/metalBarH.png";
-	
-	mediaNameCanvas = document.getElementById("mediaName");
-	mediaNameCTX = mediaNameCanvas.getContext("2d");
-	
-	//Resize all items and search for local media
-	resizeAll();
-	getMedia(contentType);
-	
-	//Prevent highlighting
-	window.ondragstart = function() { return false; }
-	
-	$(window).bind('resize', resizeAll);
-	
-	//Simple swipe detection
-	$("#mediaName").mousedown(function(e){mouseDownEvent = e;});
-	$("#mediaName").mouseup(function(e){
-			if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
-			{
-				if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
-				{
-					if (mouseDownEvent.clientX > e.clientX)
-						swipe("left", "mediaName");
-					else
-						swipe("right", "mediaName");
-				}
-			}
-		});
+function init()
+{
+    vidIcon.src = "images/videoButton.png";
+    imgIcon.src = "images/imageButton.png";
+
+    mediaNameCanvas = document.getElementById("mediaName");
+    mediaNameCTX = mediaNameCanvas.getContext("2d");
+
+    //Resize all items and search for local media
+    resizeAll();
+    getMedia(contentType);
+
+    //Prevent highlighting
+    window.ondragstart = function() { return false; }
+
+    $(window).bind('resize', resizeAll);
+
+    //Simple swipe detection
+    $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
+    $("#mediaName").mouseup(function(e){
+	    if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
+	    {
+	    if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
+	    {
+	    if (mouseDownEvent.clientX > e.clientX)
+	    swipe("left", "mediaName");
+	    else
+	    swipe("right", "mediaName");
+	    }
+	    }
+	    });
 }
 
 $(document).ready(function () {
 	init();
-});
+	});