TC
/
arozos


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329
							<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta name="theme-color" content="#4b75ff">
	<link rel="stylesheet" href="../script/tocas/tocas.css">
	<link rel="stylesheet" href="./main.css">
	<script src="../script/tocas/tocas.js"></script>
	<script src="../script/jquery.min.js"></script>
	<script src="../script/ao_module.js"></script>
	<!-- Handle native playback on Chrome Andoird-->
	<script src="native.js"></script>

	<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
	<title>AirMusic</title>
</head>
<body>
<div id="mainMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:80;position:fixed;position:top:0px;left:0px;width:100%;">
    <button class="ts item icon noBorder AMmenu button" onClick="toggleLeftMenu();"><i class="content icon"></i></button>
	<div class="item noBorder AMmenu" style="padding-right:0px;padding-top:12px;"><i id="AMmenuIcon" class="music icon large whiteFont"></i></div>
	<div class="item noBorder AMmenu" style="padding-left:3px;padding-top:3px;padding-bottom:5px;min-width:50%;">
		<div class="ts header whiteFont">
			<div id="interfaceTitle" style="display:inline;">Music</div>
			<div id="interfaceDetails" class="sub header" style="font-size:80%;line-height:1em;">[0 songs]</div>
		</div>
	</div>
	<button class="ts right item icon AMmenu noBorder button" onClick="enterSearchMode();"><i class="search icon"></i></button>
	<!-- <button class="ts right item icon AMmenu noBorder button"><i class="ellipsis vertical icon"></i></button> -->
</div>
<div id="searchModeMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:85;position:fixed;position:top:0px;left:0px;width:100%;height:51px;display:none;">
    <button class="ts item icon noBorder AMmenu button" onClick="exitSearchMode();"><i class="arrow left icon"></i></button>
	<div class="ts fluid input" >
		<input id="searchInputBar" type="text" style="background-color:rgb(48, 48, 48);border:0px !important;border-bottom:2px solid rgb(60, 60, 60) !important;margin-bottom:3px;color:white;" placeholder="Search Music">
	</div>
	<button class="ts right item icon AMmenu noBorder button" onClick="searchSong();"><i class="search icon"></i></button>
</div>
<!-- The main list that display the current information-->
<div id="mainList">

</div>

<!-- Advance functions config menu-->
<div id="showmoreUIcover" style="position:fixed;left:0px;top:0px;width:100%;height:100%;background:rgba(30,30,30,0.7);z-index:95;display:none;" onClick="hideShowMoreMenu();"></div>
<div id="showMoreUI" class="showMoreMenus" style="display:none;">
    <div class="ts large header whiteFont songTitle">N/A</div>
    <div class="showMoreMenuItem" onClick="playFromShowMoreMenu();">Play</div>
    <div class="showMoreMenuItem" onclick='addToPlaylistFromMoreMenu();'>Add to Playlist</div>
    <div class="showMoreMenuItem playlistonly" onclick="removeFromPlylistFromMoreMenu();">Remove from current Playlist</div>
    <div class="showMoreMenuItem" onClick="searchYoutubeViaShowMore();">Search on Youtube</div>
    <div class="showMoreMenuItem">Edit Tag</div>
    <div class="showMoreMenuItem">Share</div>
    <div class="showMoreMenuItem" onClick="startRelatedSearch();">Related Search</div>
    <div class="showMoreMenuItem" onClick="showFileInfo();">File Information</div>
    
    <div class="topRightCorner songID" align="center" style="margin-top:10px !important;padding-top:3px !important;">-1</div>
</div>
<div id="showFileInfo" class="showMoreMenus" style="display:none;">
    <div class="ts large header">
		<span class="filename whiteFont">Title</span>
		<div class="sub header rawname whiteFont" style="word-break: break-all !important; font-size:80%;">Storage Name</div>
	</div>
	<div class="ts list whiteFont">
		<div class="item whiteFont">Storage Location:   <span class="filepath" style="word-break:break-all;">N/A</span></div>
		<div class="item whiteFont">File Size:   <span class="filesize">N/A</span></div>
		<div class="item whiteFont">Last Modification Date:   <span class="filedate">N/A</span></div>
	</div>
</div>

<!-- Side bar -->
<div id="sideBarCover" style="position:fixed;left:0px;top:0px;width:100%;height:100%;background:rgba(30,30,30,0.7);z-index:50;display:none;" onClick="toggleLeftMenu();"></div>
<div id="leftSideBar" class="leftsb" style="max-width:60%;height:100%;z-index:90;display:none;">
	<div class="leftsbObject sidebarBanner">
		<img class="ts tiny middle aligned image" src="img/main_icon.png" style="max-width: 50px;"><h5 class="whiteFont" style="display:inline;padding-left:8px;">AirMusic</h5>
	</div>
	<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadSongList();setStorage('viewingTab','music');">
		<div class="ts header">
			<i class="music tiny icon whiteFont"></i>
			<div class="content whiteFont">
				Music
			</div>
		</div>
	</div>
	<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadFolderView();setStorage('viewingTab','folder');">
		<div class="ts header">
			<i class="folder tiny icon whiteFont"></i>
			<div class="content whiteFont">
				Folder
			</div>
		</div>
	</div>
	<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadPlaylistView(); setStorage('viewingTab','playlist');">
		<div class="ts header">
			<i class="align justify tiny icon whiteFont"></i>
			<div class="content whiteFont">
				Playlists
			</div>
		</div>
	</div>
	<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadNetworkView(); setStorage('viewingTab','network');">
		<div class="ts header">
			<i class="world tiny icon whiteFont"></i>
			<div class="content whiteFont">
				Network
			</div>
		</div>
	</div>
	<!-- 
	<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="">
		<div class="ts header">
			<i class="upload icon whiteFont"></i>
			<div class="content whiteFont">
				Upload
			</div>
		</div>
	</div>
	-->
	<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;border-top: 2px solid #4a4a4a;">
		<div class="ts header">
			<i class="setting tiny icon whiteFont"></i>
			<div class="content whiteFont">
				Settings
			</div>
		</div>
	</div>
</div>

<!-- Mini player controller put on the bottom side of the list interface-->
<div id="miniPlayer" class="hidden">
    <div style="padding-left:20px;padding-top:5px;" >
        <div class="ts header selectable" style="margin:0px !important;width:300px;cursor:pointer;" onClick="showMainPlayerInterface();">
            <i class="music icon whiteFont" style="overflow:hidden;"></i>
            <div class="content whiteFont" style="padding-top:5px;line-height:1em;">
                <div id="miniPlayerDisplayName" style="text-overflow: ellipsis;overflow: hidden;max-width:200px; white-space: nowrap;">N/A</div>
                <div id="miniPlayerInformation" class="sub header" style="color: #c7c7c7;size:95%;">No information</div>
            </div>
        </div> 
    </div>
    <div id="miniPlayerIDtab" class="miniPlayer minitab">
        0/0
    </div>
    <div class="miniPlayerControls">
        <button class="miniPlayer selectable" style="font-size:90%;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
        <button class="miniPlayer selectable" style="font-size:120%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
        <button class="miniPlayer selectable" style="font-size:90%;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
    </div>
</div>
<!-- Main interface for player and audio controller-->
<div id="playerInterface" style="display:none;">
    <div id="infoBar" class="whiteFont" style="padding:20px;" align="center">
        <!-- Top Information Bar-->
       
        <div class="whiteFont songTitleWrapper" style="margin:0px;display:inline-block;">
            <div id="mainPlayerSongTitle" class="whiteFont" style="font-weight: bold;font-size:120%;">Song Title</div>
            <small id="mainPlayerSongDesc">This is some small text for display</small>
        </div>
         <div style="position:absolute;left:20px;top:30px;cursor:pointer;" onClick="hideMainPlayerInterface();">
            <i class="large chevron left icon"></i>
        </div>
        <div style="position:absolute;right:20px;top:30px;cursor:pointer;" onClick='$("#dropdownSonglist").slideDown();'>
            <i class="large content icon"></i>
        </div>
    </div>
    <div style="padding-left:20px; padding-right:20px;padding-bottom:5px;" align="center">
        <!-- Function Menu Bar-->
        <div class="ts grid">
            <div class="two wide column"><button style="cursor: pointer;" onclick="showPlaylistInterface();"><i class="large plus icon whiteFont"></i></button></div>
            <div class="two wide column"><button id="downloadBtn" style="cursor: pointer;" onClick="downloadPlayingSong();"><i class="large download icon whiteFont"></i></button></div>
            <div class="two wide column"><button style="cursor: pointer;" onClick="openInFileExplorer();"><i class="large folder open icon whiteFont"></i></button></div>
            <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="mute();" ><i class="large volume off icon whiteFont"></i></button></div>
            <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="addAudioVolume(-0.05);"><i class="large volume down icon whiteFont"></i></button></div>
            <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="addAudioVolume(0.05);"><i class="large volume up icon whiteFont"></i></button></div>
            <div class="two wide column"><button style="cursor: pointer;" onClick="showTimerInterface();"><i class="large clock icon whiteFont"></i></button></div>
            <div class="two wide column"><button style="cursor: pointer;" onClick="showSettingInterface();"><i class="large setting icon whiteFont"></i></button></div>
        </div>
        <div id="volumeGUI">
            <i class="volume off large icon whiteFont" style="position:absolute;left:12%;top:10px;"></i>
            <div class="ts tiny progress">
                <div id="volBar" class="bar" style="width: 40%"></div>
            </div>
           <i class="volume up large icon whiteFont" style="position:absolute;right:12%;top:10px;"></i>
        </div>
    </div>
	<!-- Download progress bar-->
	<div id="downloadProgressBar" class="ts attached fluid tiny progress" style="background-color:rgba(20, 20, 20, 0.9);display:none;">
		<div class="bar" style="width: 0%;background-color:rgb(75, 117, 255) !important;"></div>
	</div>

    <div id="albumnArt" align="center">
        <img id="albumnArtImage" style="max-width: 80%;" src="img/default.png"> 
    </div>
    <div id="mainPlayerControlInterface">
        <!-- main control interface-->
        <div style="width:100%;" align="center">
            <div id="progressTime">
                0:00
            </div>
            <div id="mainPlayerMiniTab" class="mainPlayer minitab">
                0/0
            </div>
            <div id="remainTime">
                -0:00
            </div>
        </div>
        
        <div style="position:absolute;width:100%;left:0px;bottom:0px;">
            <div style="padding-left:10px;padding-right:10px;">
                <div class="ts small primary progress">
                    <div id="audioProgressBar" class="bar" style="width: 100%; background: #4b75ff;"></div>
                </div>
            </div>
            <div class="mainControlButtons">
                <button style="font-size:90%;padding:15px;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
                <button style="font-size:130%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
                <button style="font-size:90%;padding:15px;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
            </div>
            <div id="randomModeButton" style="position: absolute; left:30px;bottom:20px;" onClick="toggleRandomMode(this);">
                <i class="large random icon disabled"></i>
            </div>
            <div id="repeatModeButton" style="position: absolute; right:30px;bottom:20px;" onClick="toggleRepeatMode(this);">
                <i class="large retweet icon disabled"></i>
                <p class="whiteFont singleLoop" style="position:absolute;right:0px;bottom:0px;margin-bottom:-13px;margin-right:-2px;display:none;">1</p>
            </div>
        </div>
    </div>
    <audio id="mainAudioPlayer" style="display:none;" src=""></audio>
   
	<div id="dropdownSonglist" class="dropdownMusicList" style="display:none;">
			<div class="dropdownMusicListMiniMenu">
				<i class="icons" style="margin-right:8px;">
					<i class="content icon"></i>
				<i class="corner music icon" style='color:#333333'></i>
				</i>
				Now Playing
				<div style="position:absolute;top:3px;right:5px;">
					[ <span id="dropdownListSongCount">N/A</span> songs / <span id="dropdownListIDCount">N/A</span> MB ] <button onClick='$("#dropdownSonglist").slideUp();' style="cursor:pointer;"><i class="caret up icon whiteFont"></i></button>
				</div>
			</div>
			<div id="currentPlayingMainList" style="overflow-x:hidden;">
				
			</div>
			<div class="dropdownMusicListBottom" align="center" onClick='$("#dropdownSonglist").slideUp();'><i class="caret up icon"></i></div>
	</div>
    
</div>

<!-- Quick Menus and other tool windows-->

 <!-- Timer control interface-->
 <div id="timerInterface" class="quickMenu">
	<h4 class="whiteFont">Countdown Timer</h4>
	<br>
	<div id="timerSettingInterface" style="width:100%;" align="center">
		<div>
			<div class="ts statistic">
				<div class="label whiteFont">hours</div>
				<div id="timerHour" class="value whiteFont">0</div>
			</div>
			 <div class="ts statistic">
				<div class="label whiteFont">minutes</div>
				<div id="timerMinute" class="value whiteFont">0</div>
			</div>
		</div>
		<div>
			<div class="ts icon mini buttons">
				<button class="ts inverted button" onClick="addTimer('h',1);"><i class="add icon"></i></button>
				<button class="ts inverted button" onClick="addTimer('h','r');"><i class="refresh icon"></i></button>
				<button class="ts inverted button" onClick="addTimer('h',-1);"><i class="minus icon"></i></button>
			 </div>
			 <div class="ts icon mini buttons">
				<button class="ts inverted button" onClick="addTimer('m',10);"><i class="add icon"></i></button>
				<button class="ts inverted button" onClick="addTimer('m','r');"><i class="refresh icon"></i></button>
				<button class="ts inverted button" onClick="addTimer('m',-1);"><i class="minus icon"></i></button>
			 </div>
		</div>
	</div>
	<div id="timerCountingInterface" style="width:100%; display:none;" align="center">
		<div class="ts statistic">
			<div id="remainingUI" class="value whiteFont">0:00:00</div>
			<div class="label whiteFont">Remaining</div>
		</div>
	</div>
	<div class="ts divider"></div>
	<div>
		<div class="ts grid">
			<div class="eight wide column">
				Times up action
			</div>
			<div class="eight wide column">
				<select id="stopMode" class="ts basic inverted mini dropdown">
					<option>Fade Out & Stop</option>
					<option>Stop Playing</option>
				</select>
			</div>
		</div>
	</div>
	<div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;;" align="center">
		<div class="ts grid" >
			<div class="eight wide column" style="padding-right: 0px;" align="center"><button class="greenBtn" onClick='hideAllquickMenu();'>Close</button></div>
			<div class="eight wide column"  style="padding-left: 0px;" align="center"><button class="greenBtn" onClick="toggleCountDown(this);">Start</button></div>
		</div> 
	</div>
</div>

<!-- File properties interface-->
<div id="filepropInterface" class="quickMenu">
	<div class="ts header">
		<span class="filename whiteFont">Title</span>
		<div class="sub header rawname whiteFont"  style="word-break:break-all;">Storage Name</div>
	</div>
	<div class="ts list whiteFont">
		<div class="item whiteFont">Storage Location:   <span class="filepath"  style="word-break:break-all;">N/A</span></div>
		<div class="item whiteFont">File Size:   <span class="filesize">N/A</span></div>
		<div class="item whiteFont">Last Modification Date:   <span class="filedate">N/A</span></div>
	</div>
</div>
<!-- Setting interface-->
<div id="settingInterface" class="quickMenu">
	<div style="">
		<div class="ts relaxed list" style="padding:0px !important;">
			<div id="settingMenuTitle" class="item whiteFont" style="">N/A</div>
			<div class="item selectable whiteFont" onclick="showPlaylistInterface(); $('#settingInterface').fadeOut('fast');"><i class="add icon" style="margin-right:5px;"></i> Add to playlist</div>
			<div class="item selectable whiteFont" onClick="openInFileExplorer(); hideAllquickMenu();"><i class="folder open icon" style="margin-right:5px;"></i> Open in File Explorer</div>
			<div class="item selectable whiteFont" onClick="searchOnYoutube(); hideAllquickMenu();"><i class="youtube play icon" style="margin-right:5px;"></i>Search on Youtube</div>
			<div class="item selectable whiteFont" onClick="showFileInformation();"><i class="file icon" style="margin-right:5px;"></i> File Information</div>
			<div class="ts divider"></div>
			<div id="closeWebAppButton" class="item selectable whiteFont"  onClick="ao_module_close();"><i class="remove icon" style="margin-right:5px;"></i> Exit Application</div>
		</div>
	</div>
</div>


<!-- Playlist interface-->
<div id="playlistInterface" class="quickMenu">
	<div class="ts header">
		<span class="whiteFont">Add to Playlist</span>
	</div>
	<div class="playlist item selectable whiteFont" onclick="addToNewPlaylist();">
		<i class="add icon whiteFont"></i> New Playlist
	</div>
	<!-- playlist list-->
	<div id="existsingPlaylist" style="overflow-y: scroll; height: 50%; border: 1px solid white;">
		<div class="playlist item selectable whiteFont">
			<i class="list icon whiteFont"></i> Test Playlist
		</div>
	</div>
	<br>
	<div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;;" align="center">
	<button class="greenBtn" onClick='hideAllquickMenu();'>Close</button>
	</div>
	<div class="ts snackbar" id="succSnackBar">
		<div class="content">
			Action Completed
		</div>
	</div>
</div>

<!-- Utils Interfaces, usually hidden-->
<div id="fadeReturnScreen" class="fadeScreen whiteFont" onClick="hideAllquickMenu();"></div>

<script>
	var leftMenuShown = false;
	var currentPath = "";
	var currentMode = "music";
	var rootPaths = [];
	var totalMusicCount = 0;
	var currentPlaying = false;
	var audioElement = $("#mainAudioPlayer");
	var audioElementObject = document.getElementById("mainAudioPlayer"); //Directly expose the audio object
	var playingFileDetail = []; //[id, filepath]
	var displayList = []; //This is the list where the current UI is displaying.
	var playingList = []; //This is the list where the player last clicked on an item to play
	var randomMode = false;
	var repeatMode = 0; //Repeat mode 0 -> No repeat, 1 -> Repeat all 2 -> Repeat one
	var updateSystemVolume = true;
	var timerMode = false;
	var timerRemaining = 0;
	var playlistAddPendingFile = ""; //The filepath of the file that is pending to be added to playlist
	var timerEndMode = "fade"; //Fade or End, Provide volume fadeout or end immediately while times up
	var ua =  navigator.userAgent.toLowerCase();
	var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
	var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

	//Embed native mediaSession for any device that supports it 
	initNativeMediaPlayer();

	//Update implementatio nof user agent detection
	if (typeof InstallTrigger !== 'undefined'){
		ua = "firefox";
	}

	if (!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime)){
		ua = "chrome";
	}

	var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
	if (isSafari == true){
		ua = "safari";
	}


	$(document).ready(function(){
		$("#leftSideBar").animate({left: $("#leftSideBar").width() * -1}, 300);
		//Update 7-8-2019, default loading tab is handled over to the returnToPreviousState() function.
		//loadSongList(); 
		//Initiate the module's volume to the system's
		syncSystemVol();
		initAudioListeners();
        resizeQuickAdjust(); //Adjust all the DOM items position according to window size
        restoreAllSettings(); //Restore all user prefered settings from storage
        hideMainPlayerInterface();//Hide the main interface
        setTimeout(function(){
            $("#playerInterface").show(); //Only show this interface after it has been out of the working area.
        },500);
        
        //Hide the exit application button if it is not in Virtual Desktop Mode
        if (!ao_module_virtualDesktop){
            $("#closeWebAppButton").hide();
        }
		returnToPreviousState(); //Try to return to previous state using the window hash value
	});

	function returnToPreviousState(){
		var hash = window.location.hash;
		if (hash != ""){
			//There are state to restore. Restore using the given hash value
			hash = decodeURIComponent(hash.substring(1));
			var previousState = JSON.parse(hash);
			console.log(previousState);
			var currentPath = previousState.path;
			var playingFileDetail = previousState.pfp;
			var initPauseState = previousState.pause;
			if (currentPath != ""){
				//Create a dummy folder and trick the system to load to the previous states
				var a = '<div></div>';
				a = $(a).attr("filepath",currentPath);
				openFolder(a[0],{playIDAfterOpen: playingFileDetail[0],startPaused: initPauseState});
			}else{
				//currentpath is empty, aka Music Mode
				loadSongList();
			}

			
		}else{
			//No state to restore. Restore Viewing Tab instead.
			var vt = loadStorage("viewingTab");
			if (vt != ""){
				if (vt == "music"){
					loadSongList();
					
				}else if(vt == "folder"){
					loadFolderView();
					
				}else if(vt == "playlist"){
					loadPlaylistView();
					
				}else if(vt == "network"){
					loadNetworkView();
					
				}
			}else{
				//Default action
				loadSongList();
			}
		}
	}

	function loadNetworkView(){
		currentMode = "network";
	}
	
	function initAudioListeners(){
		//Initiate audio progress bar and link it to the progress bar on the main player interface
		audioElement[0].addEventListener("timeupdate", function() {
            var currentTime = audioElement[0].currentTime;
            var duration = audioElement[0].duration;
            $('#audioProgressBar').css('width',((currentTime +.25)/duration)*100 + '%');
            updatePlaybackDisplayTime(currentTime,duration);
        });
        audioElement[0].onended = function() {
            nextSongHandler(); 
        }; 
        
        //Handle clicks on progress bar to skip through the playback
        $("#audioProgressBar").parent().on("click",function(e){
           var duration = audioElement[0].duration;
           var jumpTo = (e.offsetX / $(this).width()) * duration;
           if (!audioElement[0].paused){
                audioElement[0].pause();
                audioElement[0].currentTime = jumpTo;
	            audioElement[0].play();
           }else{
               audioElement[0].currentTime = jumpTo;
           }
          
	      
        });
	}
	
	function restoreAllSettings(){
	    //Repeat mode setting
	    var strRmode = loadStorage("repeatMode");
	    if (strRmode != ""){
	        repeatMode = parseInt(strRmode);
	        setRepeatMode(repeatMode,$("#repeatModeButton")[0]);
	    }
	    //Random Mode setting
	    var random = loadStorage("randomMode");
	    if (random != ""){
	        if (random == "true"){
	            //random Mode is true when loaded from configuration. Toggle once to match the setting
	            toggleRandomMode($("#randomModeButton")[0]);
	        }
	    }
	    //Timer mode setting
	    var TEM = loadStorage("timerEndMode");
	    if (TEM != ""){
	        if (TEM == "fade"){
	            $("#stopMode").val("Fade Out & Stop");
    	    }else{
    	        $("#stopMode").val("Stop Playing");
    	    }
	    }
	  
	}
	
	//Setting menu function
	function searchOnYoutube(filename = ""){
		if (filename == ""){
			var filename = $("#mainPlayerSongTitle").text().trim();
		}
	    
	    var url = "https://www.youtube.com/results?search_query=" + filename ;
	    window.open(url);
	}
	
	//Searching related functions
	var preSearchItemBuffer = "";
	var searchModeEnabled = false;
	function enterSearchMode(){
		if (searchModeEnabled){
			//Search mode already enabled
			return;
		}
		$("#searchModeMenu").show();
		$("#mainMenu").hide();
		preSearchItemBuffer = [$("#mainList").html(),$("#interfaceTitle").text(),$("#AMmenuIcon").attr("class")];
		searchModeEnabled = true;
	}

	function exitSearchMode(){
		$("#searchModeMenu").hide();
		$("#mainMenu").show();
		$("#searchInputBar").val("");
		if (preSearchItemBuffer != ""){
			//If previous record exists, recover the previous view from storage
			$("#mainList").html(preSearchItemBuffer[0]);
			$("#interfaceTitle").text(preSearchItemBuffer[1]);
			$("#AMmenuIcon").attr("class",preSearchItemBuffer[2])
			preSearchItemBuffer = "";
		}
		searchModeEnabled = false;
	}

	$("#searchInputBar").on("keyup",function(e){
		if(e.keyCode == 13){
			//Enter pressed. start searching
			searchSong();
		}
	});

	function searchSong(){
		var keyword = $("#searchInputBar").val();
		if (keyword.includes("?") || keyword.includes("&")){
			alert("Search keyword cannot contains & or ? symbol.");
			return;
		}
		//Clear the mainList, replace with a dummy loading screen
		$("#mainList").html('<div class="mainList item whiteFont">\
			<div class="ts header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
			<i class="loading spinner icon whiteFont" style="overflow:hidden;margin-top:5px;"></i>\
				<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
					Searching...\
				</div>\
			</div>\
			<div class="topRightCorner" align="center">\
				-1\
			</div>\
			</div>');

		ao_module_agirun("Music/functions/listSong.js", {
			listSong: "search:" + keyword
		}, function(data){
			currentPath = "";
			var template = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
			<div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
				<i class="music icon whiteFont" style="overflow:hidden;"></i>\
				<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
					{songtitle}\
					<div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
				</div>\
			</div>\
			<div class="topRightCorner" align="center">\
				{id}\
			</div>\
			<div class="mainList rightFunctionBar" align="center" onClick="showMore(this);">\
				<i class="ellipsis vertical icon" style="top:30%;"></i>\
			</div>\
		</div>';

		if ($("#searchModeMenu").is(":hidden")){
			//The user exited search mode before the search results come back
			//Dispose the search result
			return;
		}
		
		if (data.length == 0){
			//No search results.
			$("#mainList").html("");
			$("#mainList").append('<div class="mainList item whiteFont">\
			<div class="ts header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
			<i class="remove icon whiteFont" style="overflow:hidden;margin-top:5px;"></i>\
				<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
					No result for keyword: ' + keyword + '.\
				</div>\
			</div>\
			<div class="topRightCorner" align="center">\
				-1\
			</div>\
			</div>');
			return;
		}

        $("#interfaceTitle").text("Search");
        $("#AMmenuIcon").attr("class","search icon large whiteFont")
		//Initialize the song list
		displayList = data;
		if (playingList == []){
			playingList = Array.from(displayList);
		}
		$("#mainList").html("");
		for ( var i =0; i < data.length; i++){
			var songInfo = data[i];
			var path = songInfo[0];
			var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
			var ext = songInfo[2];
			var size = songInfo[3];
			var box = template;
			box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
			box = replaceAll("{id}",i + 1,box); //User count from 1
			box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
			box = replaceAll("{songtitle}",displayname,box);
			box = replaceAll("{ext}",ext,box);
			box = replaceAll("{size}",size,box);
			$("#mainList").append(box);
		}
		totalMusicCount = data.length;
		$("#mainList").append("<br><br><br><br><br><br><br>");
		$("#interfaceDetails").text("[" + i + " songs]");
		highLightPlayingMusic();
	});
	}
	
	function enterRemotePlayID(object){
	    var id = $(object).text().trim();
	    $("#remotePlayID").val($("#remotePlayID").val() + id);
	}
	
	function ridOpr(opr){
	    if (opr == 'backspace'){
	        var currentText = $("#remotePlayID").val();
	        var newText = currentText.substring(0,currentText.length - 1);
	        $("#remotePlayID").val(newText);
	    }else if (opr == 'reset'){
	        $("#remotePlayID").val("");
	    }
	}
	
	function openInFileExplorer(){
	    var dirname = playingFileDetail[1].split("/");
	    var fname = dirname.pop(); //Pop away the filename
	    dirname = dirname.join("/") + "/";
	    var path = dirname;
	    if (dirname.substring(0,1) != "/"){
	        //This is not absolute path. Start the path from airMusic
	        path = "AirMusic/" + dirname;
	    }
	    
		path = path.replace("media?file=","");
		if (path.substring(0,1) == "/"){
			path = path.substring(1)
		}
	    ao_module_openPath(path, fname);
	}
	
	
	//quickmenu Functions
	function hideAllquickMenu(){
	    $(".quickMenu").fadeOut('fast');
	    $("#fadeReturnScreen").fadeOut('fast');
	}

	
	//Setting related function
	function showSettingInterface(){
	    $("#settingInterface").fadeIn('fast');
	    $("#fadeReturnScreen").fadeIn('fast');
	    //Update contents in the setting menu
	    $("#settingMenuTitle").text($("#mainPlayerSongTitle").text());
	}
	
	
	//Timer related functions
	function showTimerInterface(){
	    $("#timerInterface").fadeIn('fast');
	    $("#fadeReturnScreen").fadeIn('fast');
	}

	function initPlaylistInterfaceList(){
		$("#existsingPlaylist").html("");
		//Get the playlist list from server side
		ao_module_agirun("Music/functions/playlist.js", {
			opr: "root"
		}, function(data){
			data.forEach(playlist => {
				$("#existsingPlaylist").append(`<div class="playlist item selectable whiteFont" name="${playlist.name}" onclick="addSongToSelectedPlaylist(this);">
					<i class="list icon whiteFont"></i> ${playlist.name} [${playlist.count} files]
				</div>`);
			})
		});
	}

	function showPlaylistInterface(){
		initPlaylistInterfaceList();
		$("#playlistInterface").fadeIn('fast');
	    $("#fadeReturnScreen").fadeIn('fast');
	}

	function addToThisPlaylist(){

	}
	
	$("#stopMode").change(function () {
        var end = this.value;
        if (end.includes("Fade Out & Stop")){
            //Start fading out the volume
            timerEndMode = "fade";
            setStorage("timerEndMode","fade");
        }else{
            //End immediately
            timerEndMode = "end";
            setStorage("timerEndMode","end");
        }
    });
    
    var fadeOutStepping = 0.1; //The steps size for fading out during timer countdown
    var defaultVolumeBeforeFadeout = 0;
    function toggleCountDown(button){
        if (!timerMode){
            //Start count down
            timerMode = true;
            $(button).text("Stop");
            timerRemaining = ((parseInt($("#timerHour").text()) * 60) + parseInt($("#timerMinute").text())) * 60; //in seconds
            //Update the value on the remaining counter
            $("#remainingUI").text(parseTimer(timerRemaining));
            $("#timerSettingInterface").slideUp('fast');
            $("#timerCountingInterface").slideDown('fast');
            $("#stopMode").attr("disabled","");
            defaultVolumeBeforeFadeout = audioElement[0].volume;
            fadeOutStepping = (audioElement[0].volume) / timerRemaining;
            progressCounter();
        }else{
            //Stop count down
            timerMode = false;
            $(button).text("Start");
            timerRemaining = 0;
            $("#timerSettingInterface").slideDown('fast');
            $("#timerCountingInterface").slideUp('fast');
            $("#stopMode").removeAttr("disabled");
        }
    }
    
    function progressCounter(){
        //Update the timer
        timerRemaining = timerRemaining - 1;
        $("#remainingUI").text(parseTimer(timerRemaining));
        if (timerRemaining > 0){
            //Continues
            if (timerEndMode == "fade"){
                var newvol = audioElement[0].volume - fadeOutStepping;
                audioElement[0].volume = Math.max(0,newvol);
            }
            setTimeout(progressCounter,1000);
        }else{
            //Times up
            handleTimerEnd();
        }
        
    }
    
    function handleTimerEnd(){
        //Stop the playback
        originalVol = audioElement[0].volume;
	    fadeAudio();
	    setPlaying(false);
	    audioElement[0].pause();
	    setTimeout(function(){
	        audioElement[0].volume = defaultVolumeBeforeFadeout;
	    },500);
	    
    }
    
    function parseTimer(remainingTime){
        //remainingTime in seconds, prase to HH:mm:ss
        var hours = Math.floor(remainingTime / 3600);
        var remainingTime = remainingTime % 3600;
        var minutes = Math.floor(remainingTime / 60);
        var seconds = remainingTime % 60;
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
        var formatted = hours + ":" + minutes + ":" + seconds;
        return formatted;
    }
    
    function addTimer(unit,value){
        if (unit == "h"){
            if (value == "r"){
                $("#timerHour").text("0");
            }else{
                $("#timerHour").text($("#timerHour").text() - -1 * value); 
            }
           
        }else if (unit == "m"){
            if (value == "r"){
                $("#timerMinute").text("0");
            }else{
               $("#timerMinute").text($("#timerMinute").text() - -1 * value); 
            }
        }
        if (parseInt($("#timerHour").text()) < 0){
            $("#timerHour").text("0");
        }
        if (parseInt($("#timerMinute").text()) < 0){
            if (parseInt($("#timerHour").text()) > 0){
                //subtract 1 from the hour
                 $("#timerHour").text($("#timerHour").text() - 1); 
                 $("#timerMinute").text(parseInt($("#timerMinute").text()) + 60);
            }else{
                //There is no hours to subtract
                $("#timerMinute").text("0");
            }
            
        }
        if (parseInt($("#timerMinute").text()) > 59){
            $("#timerMinute").text(parseInt($("#timerMinute").text()) - 60);
            $("#timerHour").text($("#timerHour").text() - -1); 
        }
    }
    
	//Download function
	function downloadPlayingSong(){
	    var url = audioElement.attr("src");
	    var ext = url.split(".").pop();
	    var filename = $("#mainPlayerSongTitle").text().trim();
		generateDownloadElement(url,filename);
		/*
		if (url.includes("/media")){
			blobDownloadElement(url,filename);
		}else{
			generateDownloadElement(url,filename);
		}
		*/
	}
	
	var downloadInProgress = false;
	function blobDownloadElement(filepath,filename){
		if (downloadInProgress){
			alert("Please wait until another download finished.");
			return;
		}
		downloadInProgress = true;
		$("#downloadBtn").find("i").addClass("disabled");
		$("#downloadProgressBar").find(".bar").css("width","0%");
		$("#downloadProgressBar").show();
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if (this.readyState == 4 && this.status == 200){
				//handler(this.response);
				//console.log(this.response, typeof this.response);
				var url = window.URL || window.webkitURL;
				//Open the downloaded data in new window for testing
				//window.open(url.createObjectURL(this.response));
				generateDownloadElement(url.createObjectURL(this.response),filename);
				$("#downloadBtn").find("i").removeClass("disabled");
				$("#downloadProgressBar").hide();
				downloadInProgress = false;
			}
			
		}
		xhr.onprogress = function (event) {
			console.log("[AirMusic] Download Progress: " + event.loaded + " / " + event.total + "Bytes");
			$("#downloadProgressBar").find(".bar").css("width",(event.loaded / event.total) * 100 + "%");
		};
		xhr.open('GET', filepath);
		xhr.responseType = 'blob';
		xhr.send();      
	}

	function generateDownloadElement(filepath, filename){
	    var link = document.createElement('a');
        link.href = filepath + "&download=true";
        link.setAttribute('download', filename);
        document.getElementsByTagName("body")[0].appendChild(link);
        // Firefox
        if (document.createEvent) {
            var event = document.createEvent("MouseEvents");
            event.initEvent("click", true, true);
            link.dispatchEvent(event);
        }
        // IE
        else if (link.click) {
            link.click();
        }
        link.parentNode.removeChild(link);
	}
	
	//Volume control related features
	var previousAudioVolume = 0;
	function mute(){
	    if (audioElement[0].volume != 0){
	        //Set to mute
	        previousAudioVolume = audioElement[0].volume;
	        audioElement[0].volume = 0;
	    }else{
	        //Restore from mute
	        audioElement[0].volume = previousAudioVolume;
	    }
	    $("#volBar").css("width",audioElement[0].volume * 100 + "%");
	}
	var volbarTimeoutEvt;
	function addAudioVolume(value){
	    $("#volumeGUI").slideDown('fast');
	    if (volbarTimeoutEvt !== undefined){
	        clearTimeout(volbarTimeoutEvt);
	    }
	    volbarTimeoutEvt = setTimeout(function(){
	        $("#volumeGUI").slideUp('fast');
	    },3000);
	    $("#volumeGUI")
	    if (audioElement[0].volume + value >= 1){
	        audioElement[0].volume = 1;
	    }else if (audioElement[0].volume + value <= 0){
	        audioElement[0].volume = 0;
	    }else{
	        audioElement[0].volume += value; 
		}
	    
	    $("#volBar").css("width",Math.min(100,audioElement[0].volume * 100) + "%");
	}
	
	function updatePlaybackDisplayTime(currentTime,duration){
	    let progress = Math.round(currentTime);
	    let remainTime = Math.round(duration - currentTime);
	    $("#progressTime").text(secondsToHms(progress));
	    if (!isNaN(remainTime)){
	        $("#remainTime").text("-" + secondsToHms(remainTime));
	    }

	}
	
	function nextSongHandler(){
	    console.log("Next song");
	    if (repeatMode == 1){
			//Next song in the playlist
	        if (randomMode){
	            var randomTrackID = Math.floor(Math.random() * (playingList.length - 1));
	            //console.log(randomTrackID, playingList[randomTrackID]);
	            nextSong(randomTrackID,true);
	        }else{
				var playingSongIndex = playingFileDetail[0];
				var nextSongIndex = playingSongIndex;
				if (nextSongIndex >= playingList.length){
					nextSongIndex = 0;
				}
				//console.log(playingSongIndex, nextSongIndex);
	            nextSong(nextSongIndex,true);
	        }
	    }else if (repeatMode == 2){
			//Loop this song only
	       audioElement[0].pause();
	       audioElement[0].currentTime = 0;
	       audioElement[0].play();
	    }else if (repeatMode == 0){
			//Pause after finish this song
	       setPlaying(false);
	       audioElement[0].pause();
	       audioElement[0].currentTime = 0;
	    }
	}
	
	function mainPlayerShown(){
	    if ($("#playerInterface").offset().left == 0){
	        return true;
	    }
	    return false;
	}
	
	function toggleRandomMode(button){
	    var btn = $(button).find("i");
	    if (randomMode){
	        //Set the random mode to false
	        btn.removeClass("enabled").addClass("disabled");
	        randomMode = false;
	    }else{
	        btn.removeClass("disabled").addClass("enabled");
	        randomMode = true;
	    }
	    setStorage("randomMode",randomMode);
	}
	
	function toggleRepeatMode(button){
	    if (repeatMode == 0){
	       setRepeatMode(1,button);
	       setStorage("repeatMode",1);
	    }else if (repeatMode == 1){
	       setRepeatMode(2,button);
	       setStorage("repeatMode",2);
	    }else if (repeatMode == 2){
	       setRepeatMode(0,button);
	       setStorage("repeatMode",0);
	    }
	}
	
	function setRepeatMode(modeCode,button){
	    if (modeCode == 1){
	        //Set repeat mode to "Repeat all"
	        $(button).find(".singleLoop").hide();
	        $(button).find("i").removeClass("disabled").addClass("enabled");
	        repeatMode = 1;
	    }else if (modeCode == 2){
	        //Set repeat mode to "Repeat one"
	        $(button).find(".singleLoop").show();
	        $(button).find("i").removeClass("disabled").addClass("enabled");
	        repeatMode = 2;
	    }else if (modeCode == 0){
	        //Set repeat mode to "None"
	        $(button).find(".singleLoop").hide();
	        $(button).find("i").removeClass("enabled").addClass("disabled");
	        repeatMode = 0;
	    }
	}
	
	
	function hideMainPlayerInterface(){
	    $("#playerInterface").animate({left: window.innerWidth},300);
	    $("body").css("overflow-y","auto");
	}
	
	function showMainPlayerInterface(){
	    $("#playerInterface").animate({left:0},300);
	    $("body").css("overflow-y","hidden");
	}
	
	function syncSystemVol(){
        //Initiate the module's volume to the system's
        var globalvol = localStorage.getItem("global_volume");
        //console.log("Global Volume" + globalvol.toString());
        if (!globalvol){
            globalvol = 0.1;
		}
		
		//Check if it is mobile. If yes, always 100% and leave volume to system
		if (isMobile()){
			globalvol = 1;
			$(".desktopOnly").addClass("disabled");
		}

		audioElement[0].volume = parseFloat(globalvol);
        $("#volBar").css("width",audioElement[0].volume * 100 + "%");
	}
	
	function replaceAll(target, replace, original){
	  return original.split(target).join(replace);  
	};
	
	function playSong(object, startPaused = false){
	    if ($(object).parent().hasClass("playingTrack")){
	        //This is already the song that is currently playing. Show the main player interface instead.
	        showMainPlayerInterface();
	        resizeQuickAdjust();
	        return;
	    }

	    //$(".playingTrack").removeClass("playingTrack");
		//$(object).parent().addClass("playingTrack");
		var filepath = ao_module_utils.attrToObject($(object).parent().attr('filepath'));
	    var rawname = ao_module_utils.attrToObject($(object).parent().attr('rawname'));
	    var displayName = ao_module_codec.decodeUmFilename(rawname);
	    var info = $(object).parent().find(".fileinfo").text();
		var id = $(object).parent().attr('id');
		if (id === undefined){
			//This might be a file from dropdown list. use listid instead
			id = $(object).parent().attr('listid');
		}

	    updateMiniPlayerUI(displayName,info,id);

		//Seperate out the filepath without media server path
		var fileVpath = filepath.split("=")[1];
	    updateMainPlayerUI(displayName,info,id, fileVpath);
	    loadAndPlayAudioFile(filepath, !startPaused);
	    if (!currentPlaying && !startPaused){
	        setPlaying(true);
	    }
		playingFileDetail = [parseInt(id),filepath];

		//If the user play this file, assume the next file to be added to playlist is this file
		playlistAddPendingFile = filepath;
	    //Have a backup of the current list just incase the user open another directory while a list is playing
		//Only backup when it is not call from dropdown list
		if (!$(object).parent().hasClass("dropdownList")){
			playingList = Array.from(displayList);
		}
	    parsePlayingSongList();
	    if ($("#miniPlayer").hasClass("hidden")){
	        //This is the first song that has played after the UI init
	        $("#miniPlayer").css("display","none").removeClass("hidden").slideDown();
	    }
	    showMainPlayerInterface();
	    
	    //Just in case the albumn image changed, albumn art css is also updated.
	    resizeQuickAdjust();

		updateStateReferingURL();
		highLightPlayingMusic();
	}

	function loadThumbnail(filepath){
		//Load the thumbnail
		var realVpath = filepath.split("=");
		realVpath.shift();
		realVpath = realVpath.join("=");
		ao_module_agirun("Music/functions/getThumbnail.js", {
			file: realVpath,
		}, function(data){
			if (data.error !== undefined){
				console.log(data.error)
				$("#albumnArtImage").attr("src","img/default.png");
				if (navigator.mediaSession.metadata){
					navigator.mediaSession.metadata.artwork = [
						{ src: "img/default.png",   sizes: '512x512',   type: 'image/png' }
					]
				}
			}else{
				$("#albumnArtImage").attr("src","data:image/jpg;base64," + data);
				if (isAndroid && navigator.mediaSession.metadata){
					//Android
					navigator.mediaSession.metadata.artwork = [
						{ src: "data:image/jpg;base64," + data,   sizes: '480x480',   type: 'image/jpg' }
					]
				}
			}

			
			resizeQuickAdjust();
		});
	}
	
	function nextSong(id = false,forcePlayEvenStopped = false){
	    //Check if the current playlist has more than one songs.
	    var currentPaused =  audioElement[0].paused;
	    if (playingList.length > 1){
	        var nextSongIndex = playingFileDetail[0];
	        if (id != false){
	            //Allow manual overwrite for this function
	            nextSongIndex = id;
	            var nextSong = playingList[nextSongIndex]; 
	        }else{
	           if (playingFileDetail[0] >= playingList.length){
    	            var nextSong = playingList[0]; //Back to the first song in list
    	            nextSongIndex = 0;
    	        }else{
    	             var nextSong = playingList[nextSongIndex]; //Index of the playList + 1 as the index for the files is alrady i+1. (User count from one)
    	        } 
	        }
	        //The songs has to be play via background services instead of relying on DOM 
	        var filepath = nextSong[0];
    	    var rawname = nextSong[1];
    	    var displayName = ao_module_codec.decodeUmFilename(rawname);
    	    var info = nextSong[2] + " / " + nextSong[3];
    	    var id = nextSongIndex + 1;
    	    updateMiniPlayerUI(displayName,info,id);

			//Seperate out the filepath without media server path
			var fileVpath = filepath.split("=")[1];
    	    updateMainPlayerUI(displayName,info,id, fileVpath);
    	    if (forcePlayEvenStopped){
    	        loadAndPlayAudioFile(filepath,true);
    	    }else{
    	       loadAndPlayAudioFile(filepath,!currentPaused); 
    	    }
    	    
    	    if (currentPlaying){
    	        setPlaying(true);
    	    }
    	    playingFileDetail = [id,filepath];
    	    //Need not to update the playlist because it is the same
    	    highLightPlayingMusic();
	    }else{
	        //This is the only song in playlist. Play again from start
	        audioElement[0].pause();
	        audioElement[0].currentTime = 0;
	        if (!currentPaused){
	             audioElement[0].play();
	        }
	       
	    }
		updateStateReferingURL();
	}
	
	function previousSong(){
	    var currentPaused =  audioElement[0].paused;
	    if (playingList.length > 1){
	        var nextSongIndex = playingFileDetail[0] - 1;
	        if (nextSongIndex == 0){
	            nextSongIndex = playingList.length;
	            var nextSong = playingList[nextSongIndex - 1]; //Back to the last song in list
	        }else{
	             var nextSong = playingList[playingFileDetail[0] - 2]; //Index of the playList - 1 as the index for the files is alrady i+1. (User count from one)
	        }
	        //The songs has to be play via background services instead of relying on DOM 
	        var filepath = nextSong[0];
    	    var rawname = nextSong[1];
    	    var displayName = ao_module_codec.decodeUmFilename(rawname);
    	    var info = nextSong[2] + " / " + nextSong[3];
    	    var id = nextSongIndex;
    	    updateMiniPlayerUI(displayName,info,id);

			//Seperate out the filepath without media server path
			var fileVpath = filepath.split("=")[1];
    	    updateMainPlayerUI(displayName,info,id, fileVpath);
    	    loadAndPlayAudioFile(filepath,!currentPaused);
    	    if (currentPlaying){
    	        setPlaying(true);
    	    }
    	    playingFileDetail = [id,filepath];
    	    //Need not to update the playlist because it is the same
    	    highLightPlayingMusic();
	    }else{
	        //This is the only song in playlist. Play again from start
	        audioElement[0].pause();
	        audioElement[0].currentTime = 0;
	        audioElement[0].play();
	    }
		updateStateReferingURL();
	}
	
	var originalVol = 0;
	function togglePlayMode(){
	    if (currentPlaying){
	        originalVol = audioElement[0].volume;
	        fadeAudio();
	        setPlaying(false);
	    }else{
	        gainAudio();
	        setPlaying(true);
	    }
	}


	let audioTransitioning = false;
	function fadeAudio(){
		audioTransitioning = true;
		if(audioElement[0].volume > 0){
			var testval = audioElement[0].volume - 0.1;
			audioElement[0].volume = Math.max(0,testval);
			setTimeout(fadeAudio, 50);
		}else{
			audioElement[0].pause();
			setTimeout(function(){
				audioElement[0].volume = originalVol;
				updateStateReferingURL();
				audioTransitioning = false;
			}, 100);
		}
	}
    
    
    var targetVol = 0;
    function gainAudio(){
		targetVol = audioElement[0].volume;
		audioElement[0].volume = 0;
		setTimeout(function(){
			audioElement[0].play();
			recursiveGainAudio();
		}, 100);
    }
    
    function recursiveGainAudio(){
		audioTransitioning = true;
        if(audioElement[0].volume < targetVol){
            if (audioElement[0].volume + 0.1 < 1){
				audioElement[0].volume += 0.1
			}else{
				//Audio volume larger than 1, make it 1
				audioElement[0].volume = 1
			}
            setTimeout(recursiveGainAudio, 50);
        }else{
            setTimeout(function(){
                audioElement[0].volume = targetVol;
				updateStateReferingURL();
				audioTransitioning = false;
            }, 100);
        }
    }
	
	//Update all icons on play and pause buttons
	function setPlaying(playing){
	    if (playing == true){
	        $(".PlayButton").attr("class","pause icon whiteFont PlayButton");
	        currentPlaying = true;
	    }else{
	        $(".PlayButton").attr("class","play icon whiteFont PlayButton");
	        currentPlaying = false;
	    }
	}

	function loadAndPlayAudioFile(sourceURL,playAfterLoad = true){
		var audio = audioElement;
		sourceURL = "../" + sourceURL; //Convert absolute dir to relative
		$("#mainAudioPlayer").attr("src", sourceURL);
		//console.log(encodeURIComponent(sourceURL));
        audio[0].pause();
        audio[0].load();
        if(playAfterLoad){
            audio[0].oncanplaythrough = audio[0].play();
        }else{
            var currentTime = audioElement[0].currentTime;
            var duration = audioElement[0].duration;
            $('#audioProgressBar').css('width','0%');
            updatePlaybackDisplayTime(currentTime,duration);
		}
		
		loadThumbnail(sourceURL);
	}
	
	function updateMiniPlayerUI(displayName, fileinfo,id){
	    $("#miniPlayerDisplayName").text(displayName);
	    $("#miniPlayerInformation").text(fileinfo);
	    $("#miniPlayerIDtab").text(id + "/" + totalMusicCount);
	}
	
	function updateMainPlayerUI(songname, fileinfo, id, filepath){
	    $("#mainPlayerSongTitle").text(songname);
	    $("#mainPlayerSongDesc").text(fileinfo);
	    $("#mainPlayerMiniTab").text(id + "/" + totalMusicCount);
		if ('mediaSession' in navigator){
			var infoRewrite = fileinfo.split(" / ")
			updateTitle(songname, infoRewrite[1] + " (" + infoRewrite[0] + ")", id + "/" + totalMusicCount, filepath);
		}
	}

	
	/*
		Playlist related functions

	*/

	function renderPlaylistByName(listname){
		$("#interfaceTitle").text(listname);
		ao_module_agirun("Music/functions/playlist.js", {
			opr: "list",
			playlistname: listname
		}, function(data){
			$("#mainList").html("");
			if (data.error !== undefined){
				//This playlist no longer exists. Back to main
				loadPlaylistView();
			}else{
				//Updat ethe global values
				displayList = data;
    	        totalMusicCount = data.length;
				currentPath = listname;
				//Add the back btn for back to playlist view
				$("#mainList").append(`<div class="mainList item extrapadding" onClick="loadPlaylistView();">
					<div class="ts header selectable" style="margin:0px !important;">
						<i class="angle left icon whiteFont" style="overflow:hidden;"></i>
						<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
							../
						</div>
					</div>
				</div>`);


				//List the resulting song list 
				for (var i = 0; i < data.length; i++){
					var songInfo = data[i];
					
					$("#mainList").append(`<div class="mainList item" filepath=${ao_module_utils.objectToAttr(songInfo[0])} id=${i+1} rawname=${ao_module_utils.objectToAttr(songInfo[1])}>
						<div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">
							<i class="music icon whiteFont" style="overflow:hidden;"></i>
							<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
								${songInfo[1]}
								<div class="sub header fileinfo" style="color: #c7c7c7;">${songInfo[2]} / ${songInfo[3]}</div>
							</div>
						</div>\
						<div class="topRightCorner" align="center">
							${i + 1}
						</div>
						<div class="mainList rightFunctionBar" type="file" align="center" onclick="showMore(this);">
							<i class="ellipsis vertical icon" style="top:30%;"></i>
						</div>
					</div>`);

					//Update the interface Detail
					$("#interfaceDetails").text("[" + data.length + " files]");
				};
				//Fix some legacy css isseus
				$("#mainList").append("<br><br><br><br><br><br><br>");
			}
		});
	}
	//Open a given playlist
	function openPlaylist(object){
		var listname = $(object).attr("listname");
		renderPlaylistByName(listname);
	}

	function addToNewPlaylist(){
		var playlistname = prompt("Enter new playlist name");
		if (playlistname != null && playlistname != ""){
			//Add to playlist
			addSongToPlayList(playlistname);
		}else{
			$("#succSnackBar").find(".content").html(`<i class="remove icon"></i> Invalid playlist name`);
			$("#succSnackBar").slideDown("fast").delay(3000).slideUp("fast");
			
		}
	}

	function addToPlaylistFromMoreMenu(){
		$(".showMoreMenus").fadeOut('fast');
		$("#showmoreUIcover").fadeOut('fast');
		showPlaylistInterface();
	}

	//Remove the curernt file from the current playlist
	function removeFromPlylistFromMoreMenu(){
		if (currentMode == "playlist"){
			//Remvoe the playlistAddPendingFile
			//In playlist mode, the currentPath is used to store the plylist name
			ao_module_agirun("Music/functions/playlist.js", {
			opr: "remove",
			playlistname: currentPath,
			musicpath: playlistAddPendingFile.replace("/media?file=","")
			}, function(data){
				if (data.error !== undefined){
					alert(data.error);
				}else{
					//Removed. Reload playlist
					renderPlaylistByName(currentPath);

					//Hide the MoreMenu
					hideShowMoreMenu();
				}
			});
		}
	}

	function addSongToSelectedPlaylist(object){
		var playlistName = $(object).attr("name").trim();
		addSongToPlayList(playlistName);
	}

	function addSongToPlayList(listname){
		//Get current music file name
		var currentSongPath = "";
		if (playlistAddPendingFile !== ""){
			currentSongPath = playlistAddPendingFile.replace("/media?file=","");
		}else{
			$("#succSnackBar").find(".content").html(`<i class="remove icon"></i> No song selected`);
			$("#succSnackBar").slideDown("fast").delay(3000).slideUp("fast");
			return;
		}
		
		//Add to playlist
		ao_module_agirun("Music/functions/playlist.js", {
			opr: "add",
			playlistname: listname,
			musicpath: currentSongPath
		},function(data){
			//Show success
			$("#succSnackBar").find(".content").html(`<i class="checkmark icon"></i> Added to playlist ${listname}`);
			$("#succSnackBar").slideDown("fast").delay(3000).slideUp("fast");

			//Reload the playlist
			initPlaylistInterfaceList();
		});
	}

	//List the number of playlist stored in this database
	function loadPlaylistView(){
		currentMode = "playlist";
		//Clear the main list
		$("#mainList").html("");
		ao_module_agirun("Music/functions/playlist.js", {
			opr: "root",
		},function(data){
			//Get the list of playlist
			console.log(data);

			//Render the elements
			data.forEach(playlist => {
				$("#mainList").append(`<div class="mainList item" listname="${playlist.name}" tag="playlist" onClick="openPlaylist(this);">
					<div class="ts header selectable" style="margin:0px !important;" >
						<i class="folder open icon whiteFont" style="overflow:hidden;"></i>
						<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
							${playlist.name}
							<div class="sub header fileinfo" style="color: #c7c7c7;">[${playlist.count} files]</div>
						</div>
					</div>
					<div class="mainList rightFunctionBar" tag="moreInfo" align="center" onClick="openPlaylist(this);">
						<i class="chevron right icon" style="top:30%;"></i>
					</div>
				</div>`);
			});
			hideLeftMenu();

			//Update the headers
			$("#interfaceTitle").text("Playlist");
			$("#AMmenuIcon").attr("class","list icon large whiteFont");
			$("#interfaceDetails").text("[" + data.length + " playlist]");
		});
		
	}
	
	function loadFolderView(){
		currentMode = "folder";
	    currentPath = "";
	    var tempalte = '<div class="mainList item" filepath={filepath} id={id} tag="folder" onClick="openFolder(this);">\
        <div class="ts header selectable" style="margin:0px !important;" >\
            <i class="folder open icon whiteFont" style="overflow:hidden;"></i>\
            <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
                {foldername}\
                <div class="sub header fileinfo" style="color: #c7c7c7;">{fileinfo}</div>\
            </div>\
        </div>\
        <div class="mainList rightFunctionBar" tag="moreInfo" align="center" onClick="moreFolder(this);">\
            <i class="chevron right icon" style="top:30%;"></i>\
        </div>\
    </div>';
        $("#interfaceTitle").text("Storage");
		$("#AMmenuIcon").attr("class","folder open icon large whiteFont");
		ao_module_agirun("Music/functions/listSong.js", {
			listdir: "root",
		},function(data){
	        $("#mainList").html("");
	        for (var i =0; i < data.length; i++){
	            var folderName = data[i][0];
	            var folderPath = data[i][1];
	            var fileCount = data[i][2];
	            var folderCount = data[i][3];
	            var box = tempalte;
	            box = replaceAll("{filepath}",folderPath,box);
				box = replaceAll("{id}",i + 1,box);
				
				if (folderName == ".cache" || folderName == ".trash"){
					//Hidden folders
					continue;
				}
	            if (folderPath.includes("/media")){
	                //This is from external storage devices. List its number as well.
	                var tmp = folderPath.split("/");
	                var extStoragePath = "/" + tmp[1] + "/" + tmp[2];
	                box = replaceAll("{foldername}",folderName + " ( " + extStoragePath + " )",box);
	            }else{
	                //This is directory inside normal folders. 
	                box = replaceAll("{foldername}",folderName,box);
	            }
	            var fileinfo = "[" + fileCount + " files]"
	            if (folderCount > 0){
	                fileinfo = "[" + fileCount + " files, " + folderCount  +" folders]"
	            }
	            box = replaceAll("{fileinfo}",fileinfo,box);
				rootPaths.push(folderPath);
	            $("#mainList").append(box);
	        }
	        $("#interfaceDetails").text("[" + data.length + " folders]");
	    });
	    hideLeftMenu();
	}
	
	function isMobile(){
		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			return true
		}
		return false
	}

	function setWindowHash(hashValue){
		hashValue = JSON.stringify(hashValue);

		if (!isAndroid){
			return;
		}
		
		if(history.pushState) {
			window.history.pushState(null, null, '#' + hashValue);
		}else {
			location.hash =  '#' + hashValue;
		}
		if(ao_module_virtualDesktop && !isMobile()){
		    //Update the iframe src as well
		    var newsrc =  window.frameElement.getAttribute("src");
		    if (newsrc.includes("#")){
		      newsrc = newsrc.split("#")
		      newsrc.pop();
		      newsrc = newsrc.join("#");
		    }
		    newsrc = newsrc + "#" + hashValue;
		    $(window.frameElement).attr("src",newsrc);
		    //console.log(window.frameElement.getAttribute("src"));
		}
	}

	function updateStateReferingURL(){
		var paused = audioElement[0].paused; //Check the current playing state of the player
		setWindowHash({path: currentPath, pfp:playingFileDetail,pause:paused});
	}
	
	function openFolder(object, playParameters=null){
		var playIDAfterOpen = -1;
		var startPaused = false;
		if (playParameters !== null){
			playIDAfterOpen = playParameters.playIDAfterOpen;
			startPaused = playParameters.startPaused;
		}
	    var backbtnTemplate = '<div class="mainList item extrapadding" filepath={filepath} id={id} onClick="openFolder(this);">\
        <div class="ts header selectable" style="margin:0px !important;">\
            <i class="angle left icon whiteFont" style="overflow:hidden;"></i>\
            <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
                ../\
            </div>\
        </div>\
    </div>';
	    
	    var folderTemplate = '<div class="mainList item" filepath={filepath} tag="folder" id={id} onClick="openFolder(this);">\
        <div class="ts header selectable" style="margin:0px !important;">\
            <i class="folder open icon whiteFont" style="overflow:hidden;"></i>\
            <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
                {foldername}\
                <div class="sub header fileinfo" style="color: #c7c7c7;">{fileinfo}</div>\
            </div>\
        </div>\
        <div class="mainList rightFunctionBar" type="folder" align="center">\
            <i class="chevron right icon" style="top:30%;"></i>\
        </div>\
    </div>';
    var fileTemplate = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
        <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
            <i class="music icon whiteFont" style="overflow:hidden;"></i>\
            <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
                {songtitle}\
                <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
            </div>\
        </div>\
        <div class="topRightCorner" align="center">\
            {id}\
        </div>\
        <div class="mainList rightFunctionBar" type="file" align="center">\
            <i class="ellipsis vertical icon" style="top:30%;"></i>\
        </div>\
    </div>';

        var targetPath = decodeURIComponent($(object).attr("filepath"));
        if (targetPath == "root" || targetPath == "/"){
            //User request to go back to storage root
            loadFolderView();
            return;
        }
		currentPath = targetPath.split("/./").join("/");
		currentPath = currentPath.split("//").join("/");
	    $("#interfaceTitle").text(ao_module_codec.decodeHexFoldername(targetPath.substring(0,targetPath.length -1).split("/").pop()));
		var parentDir = currentPath.split("/");
	    parentDir.pop();parentDir.pop();
	    parentDir = (parentDir.join("/") + "/");
	    //console.log(currentPath);
		var backbtn;
	    if (rootPaths.includes(currentPath) == false){
	        //We are currently not at root
	        backbtn = backbtnTemplate;
            backbtn = replaceAll("{filepath}",encodeURIComponent(parentDir),backbtn);
            backbtn = replaceAll("{id}",0,backbtn);
	    }else{
	        //Create a back button to go back to root of storage
	        backbtn = backbtnTemplate;
            backbtn = replaceAll("{filepath}","root",backbtn);
            backbtn = replaceAll("{id}",0,backbtn);
	    }
	    
	    //Request the server for a list of folders and file in this directory
		ao_module_agirun("Music/functions/listSong.js", {
			listdir: targetPath.split("//").join("/"),
		},function(data){
	        $("#mainList").html("");
	        $("#mainList").append(backbtn);
            if (Array.isArray(data)){
                var folders = data[0];
                var files = data[1];
                //List all folders
                for (var i =0; i < folders.length; i++){
    	            var folderName = folders[i][0];
    	            var folderPath = folders[i][1];
    	            var fileCount = folders[i][2];
    	            var folderCount = folders[i][3];
					var box = folderTemplate;
					if (folderName == ".cache" || folderName == ".trash"){
						//Hidden folders
						continue;
					}
    	            box = replaceAll("{filepath}",encodeURIComponent(folderPath),box);
    	            box = replaceAll("{id}",i + 1,box);
    	            box = replaceAll("{foldername}",ao_module_codec.decodeHexFoldername(folderName),box);
    	            var fileinfo = "[" + fileCount + " files]"
    	            if (folderCount > 0){
    	                fileinfo = "[" + fileCount + " files, " + folderCount  +" folders]"
    	            }
    	            box = replaceAll("{fileinfo}",fileinfo,box);
    	             $("#mainList").append(box);
    	        }
                
                //List all files
                for ( var i =0; i < files.length; i++){
					var songInfo = files[i];
    	            var path = songInfo[0];
					var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
    	            var ext = songInfo[2];
    	            var size = songInfo[3];
    	            var box = fileTemplate;
    	            box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
    	            box = replaceAll("{id}",i + 1,box); //User count from 1
    	            box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
    	            box = replaceAll("{songtitle}",displayname,box);
    	            box = replaceAll("{ext}",ext,box);
    	            box = replaceAll("{size}",size,box);
    	            $("#mainList").append(box);
    	        }
    	        displayList = files;
    	        totalMusicCount = files.length;
    	        $("#mainList").append("<br><br><br><br><br><br><br>");
                
            }else{
                //Something went wrong
                //console.log('[AirMusic] Something went wrong: ' + data);
				loadFolderView();
				return;
            }
            if (folders.length > 0 && files.length > 0){
                $("#interfaceDetails").text("[" + files.length + " files, " + folders.length+ " folders]");
            }else if (folders.length > 0){
                 $("#interfaceDetails").text("[" + folders.length + " folders]");
            }else if (files.length > 0){
                 $("#interfaceDetails").text("[" + files.length + " files]");
            }else{
                $("#interfaceDetails").text("[0 files or folders]");
            }
            //Hook all the events for the moreinfo on folders
            hookMoreFolderInfoClickEvent();
            
            //Check if the current playing file is located inside this list. 
            highLightPlayingMusic();

			//Check if auto playback is required. If yes, play it with the given filepath.
			if (playIDAfterOpen != -1){
				$(".mainList.item").each(function(){
					if ($(this).attr("id") == playIDAfterOpen){
						//This is the file that require to playback after the folder loaded
						playSong($(this).find(".ts.header.selectable"),startPaused);
						setTimeout(resizeQuickAdjust,500);
					}
				});
			}
	    });
	}
	
	function moreInfo(object){
		if ($(object).parent().attr('tag') == "folder"){
			//This is a folder. Ask if play as playlist
			alert("Folder playback work in progress");
		}else{
			showMore(object);
		}
	    
	}
	
	function hookMoreFolderInfoClickEvent(){
	    $(".mainList.rightFunctionBar").on("click", function(e){
	        e.stopPropagation();
	        moreInfo(this);
	    });
	}
	
	function highLightPlayingMusic(){
	    //This function is used for highlighting the current playing music if the music piece is found inside the current list
	    $(".mainList.item").removeClass("playingTrack");
	    $(".mainList.item").each(function(){
			var id = parseInt($(this).attr("id"));
			try{
				var filepath = ao_module_utils.attrToObject($(this).attr("filepath"));
			}catch{
				//Use back the previous method of filepath storage for compatibility
				var filepath = $(this).attr("filepath");
			}
	        
			/*
	        if (id == playingFileDetail[0] && filepath == playingFileDetail[1]){
	            //This piece of music is playing in the current list
	            $(this).addClass("playingTrack");
	        }else if (playingFileDetail[0] == -1 && filepath == playingFileDetail[1]){
				//This is for external accessed music playback. Music file might or might not exists in the current playlist. Try to highlight anyway
				$(this).addClass("playingTrack");
			}*/
			//Id is ignored in the 9/9/2019 updates and only check if the path matches.
			if (filepath == playingFileDetail[1]){
				$(this).addClass("playingTrack");
			}
	        //console.log([id,filepath], playingFileDetail);
	    });

		//Update dropdownList as well if exists
		$(".dropdownList.item").removeClass("playingTrack");
		$(".dropdownList.item").each(function(){
			try{
				var filepath = ao_module_utils.attrToObject($(this).attr("filepath"));
			}catch{
				//Use back the previous method of filepath storage for compatibility
				var filepath = $(this).attr("filepath");
			}
	        //var filepath = $(this).attr("filepath");
			if (filepath == playingFileDetail[1]){
				$(this).addClass("playingTrack");
			}
		});
	}
	

	function monitorFileChangeForUpload(){
	    if ($("#interfaceTitle").text() == "Upload"){
	        //It is still in upload Mode. Continue monitor file change and move them if needed
	        $.post("listenUploadChange.php",{fileList: JSON.stringify(currentUploadTargetFileList),directory: currentUploadTargetFilepath}).done(function(data){
	           if (data.includes("ERROR")){
	               console.log(data);
	           }
	        });
	        setTimeout(monitorFileChangeForUpload,1000);
	    }
	}
	
	
	function hideShowMoreMenu(){
	    $(".showMoreMenus").fadeOut('fast');
		$("#showmoreUIcover").fadeOut('fast');
		
		//Return the playlistAddPendingFile object back to the playing one
		if (playingFileDetail !== undefined){
			playlistAddPendingFile = playingFileDetail[1];
		}else{
			//No song is being play back
			playlistAddPendingFile = "";
		}
		
	}
	
	function playFromShowMoreMenu(){
		nextSong(showMoreOprPlayID - 1);
		$(".showMoreMenus").fadeOut('fast');
	}

	function showFileInfo(){
	    $("#showFileInfo").show();
	    $("#showMoreUI").hide();
	}

	function startRelatedSearch(){
		enterSearchMode();
		$("#searchInputBar").val(showMoreoprDisplayName);
		$("#searchInputBar").focus();
		hideShowMoreMenu();
	}

	function searchYoutubeViaShowMore(){
		if (showMoreoprDisplayName != "" || showMoreoprDisplayName != undefined){
			var filename = showMoreoprDisplayName;
			searchOnYoutube(filename);
		}
	}
	
	var showMoreOprPlayID,showMoreOprFilepath, showMoreoprDisplayName;
	function showMore(object){
	    var filepath = $(object).parent().attr("filepath");
		filepath = JSON.parse(decodeURIComponent(filepath));
		//User want more action on this file. assume this is the file to add
		playlistAddPendingFile = filepath;
	    var id = $(object).parent().attr('id');
	    var rawname = $(object).parent().attr("rawname");
	    var displayName = JSON.parse(decodeURIComponent(ao_module_codec.decodeUmFilename(rawname)));
	    //Update global variable for quick operations
	    showMoreOprPlayID = id;
	    showMoreOprFilepath = filepath;
	    showMoreoprDisplayName = displayName; 
	    $("#showMoreUI").find(".songTitle").text(displayName);
	    $("#showMoreUI").find(".songID").text(id);
	    $("#showFileInfo").find(".songTitle").text(displayName);
	    $("#showMoreUI").fadeIn('fast');
	    $("#showmoreUIcover").fadeIn('fast');
	    //Update fileinformation as well
		if (filepath.substring(0, 12) == "/media?file="){
			filepath = filepath.substring(12);
		}
		
		//Pre-render the file info
		ao_module_agirun("Music/functions/getFileInfo.js", {
			filepath: filepath,
		}, function(data){
			$("#showFileInfo").find(".filename").text(ao_module_codec.decodeUmFilename(data[0]));
    		$("#showFileInfo").find(".rawname").text(data[0]);
    		$("#showFileInfo").find(".filepath").text(data[1]);
    		$("#showFileInfo").find(".filesize").text(data[2] + " (" + data[3] + " Bytes)");
    		$("#showFileInfo").find(".filedate").text(data[4]);
		});

		if (currentMode != "playlist"){
			$(".playlistonly").hide();
		}else{
			$(".playlistonly").show();
		}
	}

	function playSongFromDropdownList(object){
		//Play song from dropdown list. Hence, no need to update dropdownList
		if ($(object).parent().hasClass("playingTrack")){
			//This song already playing. Ignore play request.
			return;
		}
		playSong(object);
		//Check if the song is also in main list. If yes, highlight it as well
		/*
		$(".mainList.item").each(function(){
			if ($(this).attr("filepath") == $(object).parent().attr("filepath")){
				$(".mainList.item.playingTrack").removeClass("playingTrack");
				$(this).addClass("playingTrack");
			}
		});
		*/
		$("#dropdownSonglist").delay(500).slideUp();
		highLightPlayingMusic();
	}

	//Move the playing song list into the dropdown song list. This list might not be the same as the one in the main list.
	function parsePlayingSongList(){
		var template = '<div class="dropdownList item" filepath={filepath} listid={id} rawname={rawname}>\
			<div class="ts header selectable" style="margin:0px !important;" onClick="playSongFromDropdownList(this);">\
				<i class="music icon whiteFont" style="overflow:hidden;"></i>\
				<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
					{songtitle}\
					<div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
				</div>\
			</div>\
			<div class="topRightCorner" align="center">\
				{id}\
			</div>\
		</div>';
		$("#currentPlayingMainList").html("");
		var counter = playingList.length;
		var totalSize = 0.0;
		for (var i = 0; i < playingList.length; i++){
			var displayname = ao_module_codec.decodeUmFilename(playingList[i][1]);
			var box = template;
			box = replaceAll("{filepath}",ao_module_utils.objectToAttr(playingList[i][0]),box);
			box = replaceAll("{id}",i + 1,box); //User count from 1
			box = replaceAll("{rawname}",ao_module_utils.objectToAttr(playingList[i][1]),box);
			box = replaceAll("{songtitle}",displayname,box);
			box = replaceAll("{ext}",playingList[i][2],box);
			box = replaceAll("{size}",playingList[i][3],box);
			if (playingList[i][3].includes("MB")){
				totalSize += parseFloat(playingList[i][3].split(" ")[0]);
			}else if (playingList[i][3].includes("KB")){
				totalSize += parseFloat(playingList[i][3].split(" ")[0]) / 1000;
			}else if (playingList[i][3].includes("GB")){
				totalSize += parseFloat(playingList[i][3].split(" ")[0]) * 1000;
			}
			$("#currentPlayingMainList").append(box);
			$("#dropdownListSongCount").text(counter);
			$("#dropdownListIDCount").text(parseInt(totalSize) + "");
		}
		$(".dropdownList.item").each(function(){
			if ($(this).attr('filepath') == playingFileDetail[1]){
				$(this).addClass("playingTrack");
			}
		});

	}
	
	function loadSongList(type = "all"){
		currentPath = "";
		currentMode = "music";
	    var template = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
        <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
            <i class="music icon whiteFont" style="overflow:hidden;"></i>\
            <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
                {songtitle}\
                <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
            </div>\
        </div>\
        <div class="topRightCorner" align="center">\
            {id}\
        </div>\
        <div class="mainList rightFunctionBar" align="center" onClick="showMore(this);">\
            <i class="ellipsis vertical icon" style="top:30%;"></i>\
        </div>\
    </div>';
    
        $("#interfaceTitle").text("Music");
		$("#AMmenuIcon").attr("class","music icon large whiteFont")
		
		ao_module_agirun("Music/functions/listSong.js", {
			listSong: type,
		},function(data){
			//Initialize the song list
			displayList = data;
			if (type == "all"){
				//Caching is used in here
				displayList = data.list;
				if (data.cached == true){
					//This is a cached version of the music list. 
					console.log("Updating cached song list");
					ao_module_agirun("Music/functions/buildCache.js", {}, function(data){
						console.log("Cache updated: ", data);
					});
				}
			}
			console.log(displayList);
	        
	        if (playingList == []){
	            playingList = Array.from(displayList);
	        }
	        $("#mainList").html("");
	        for ( var i =0; i < displayList.length; i++){
	            var songInfo = displayList[i];
	            var path = songInfo[0];
	            var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
	            var ext = songInfo[2];
	            var size = songInfo[3];
	            var box = template;
	            box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
	            box = replaceAll("{id}",i + 1,box); //User count from 1
	            box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
	            box = replaceAll("{songtitle}",displayname,box);
	            box = replaceAll("{ext}",ext,box);
	            box = replaceAll("{size}",size,box);
	            $("#mainList").append(box);
	        }
	        totalMusicCount = displayList.length;
	        $("#mainList").append("<br><br><br><br><br><br><br>");
	        $("#interfaceDetails").text("[" + i + " songs]");
	        highLightPlayingMusic();
	    }, function(){
			alert("Failed to access listSong API with type: " + type)
		});
	    hideLeftMenu();
	}
	
	
	function toggleLeftMenu(){
		if (leftMenuShown){
			$("#leftSideBar").animate({left: $("#leftSideBar").width() * -1}, 300,function(){
				$("#leftSideBar").hide();
			});
			$("#sideBarCover").fadeOut();
			leftMenuShown = false;
		}else{
			$("#leftSideBar").show();
			$("#leftSideBar").animate({left:0}, 300);
			$("#sideBarCover").fadeIn();
			leftMenuShown = true;
		}
		
	}
	
	function hideLeftMenu(){
	    if (leftMenuShown){
	        $("#leftSideBar").animate({left: $("#leftSideBar").width() * -1}, 300,function(){
				$("#leftSideBar").hide();
			});
			$("#sideBarCover").fadeOut();
			leftMenuShown = false;
	    }
	}
	
	function showFileInformation(){
		ao_module_agirun("Music/functions/getFileInfo.js", {
			filepath: playingFileDetail[1],
		},function(data){
			//console.log(data);
			$("#settingInterface").hide();
			$("#filepropInterface").show();
			$("#filepropInterface").find(".filename").text(ao_module_codec.decodeUmFilename(data[0]));
			$("#filepropInterface").find(".rawname").text(data[0]);
			$("#filepropInterface").find(".filepath").text(data[1]);
			$("#filepropInterface").find(".filesize").text(data[2] + " (" + data[3] + " Bytes)");
			$("#filepropInterface").find(".filedate").text(data[4]);
		});
	}
	
	function resizeQuickAdjust(){
	  //Resize the position of the leftMenu
	  if (!leftMenuShown){
		  $("#leftSideBar").css("left", $("#leftSideBar").width() * -1);
	  }
	  if ($("#playerInterface").offset().left != 0){
	      $("#playerInterface").css("left",window.innerWidth);
	  }

	  $("#albumnArtImage").css("max-height",window.innerHeight - 255);

	  setTimeout(function(){
		$("#albumnArt").css({
			"height": window.innerHeight - 255,
			"top": (window.innerHeight / 2 -  $("#albumnArtImage").height()/2)
		});
	  },50);
	 
	
	  //var imageTop = (window.innerHeight - 255 - $("#albumnArtImage").height()) / 2;
	  //$("#albumnArtImage").css("top",imageTop + "px");
	}
	
	function setStorage(configName,configValue){
		ao_module_storage.setStorage("AirMusic",configName,configValue);
		/*
    	$.ajax({
    	  type: 'GET',
    	  url: "../system/file_system/preference",
    	  data: {key: "AirMusic/" + configName,value:configValue},
    	  success: function(data){},
    	  async:true
		});
		*/
    	return true;
    }
    
    function loadStorage(configName){
		/*
    	var result = "";
    	$.ajax({
    	  type: 'GET',
    	  url: "../system/file_system/preference",
    	  data: {key: "AirMusic/" + configName},
    	  success: function(data){
				if (data.error !== undefined){
					result = "";
				}else{
					result = data;
				}
			  },
    	  error: function(data){result = "";},
    	  async:false,
    	  timeout: 3000
    	});
		return result;
		*/

		return ao_module_storage.loadStorage("AirMusic",configName);
    }

	
	//Wipe controller for mobile users
	$("#albumnArt")[0].addEventListener('touchstart', handleTouchStart, false);        
    $("#albumnArt")[0].addEventListener('touchmove', handleTouchMove, false);
    
    var xDown = null;                                                        
    var yDown = null;
    
    function getTouches(evt) {
      return evt.touches ||             // browser API
             evt.originalEvent.touches; // jQuery
    }                                                     
    
    function handleTouchStart(evt) {
        const firstTouch = getTouches(evt)[0];                                      
        xDown = firstTouch.clientX;                                      
        yDown = firstTouch.clientY;                                      
    };                                                
    
    function handleTouchMove(evt) {
        if ( ! xDown || ! yDown ) {
            return;
        }
    
        var xUp = evt.touches[0].clientX;                                    
        var yUp = evt.touches[0].clientY;
    
        var xDiff = xDown - xUp;
        var yDiff = yDown - yUp;
    
        if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
            if ( xDiff > 0 ) {
                /* left swipe */ 
                //Going to the next song
                nextSong();
            } else {
                /* right swipe */
                //Going back one song
                previousSong();
            }                       
        } else {
            if ( yDiff > 0 ) {
                /* up swipe */ 
            } else { 
                /* down swipe */
            }                                                                 
        }
        /* reset values */
        xDown = null;
        yDown = null;                                             
    };
	
	//Handle audio progress to time conversion
	function secondsToHms(d) {
        d = Number(d);
        var h = Math.floor(d / 3600);
        var m = Math.floor(d % 3600 / 60);
        var s = Math.floor(d % 3600 % 60);
        
        if (h > 0 && h < 10){
            dh = "0" + h + ":";
        }else if (h == 0){
            dh = "";
        }else{
            dh = h + ":";
        }
        
        if (m > 0 && m < 10){
            dm = "0" + m + ":";
        }else if (m == 0){
            if (h > 0){
                dm = "00:";
            }else{
                dm = "0:";
            }
        }else{
            dm = m + ":";
        }
        
        if (s > 0 && s < 10){
            ds = "0" + s;
        }else if (s == 0){
            if (m > 0 || h > 0){
                ds = "00";
            }else{
                ds = "00";
            }
        }else{
            ds = s;
        }
        
        return dh + dm + ds; 
    }

	//Handle window resize events
	$(window).on("resize", function(){
		resizeQuickAdjust();
	});
	
	function AllQuickMenuHidden(){
	    var result = true;
	    $(".quickMenu").each(function(){
	        if ( $(this).is(':visible') ){
	            result = false;
	        }
	    });
	    return result;
	}
	
	
	function AllSubMenuHidden(){
	    var result = true;
	    $(".showMoreMenus").each(function(){
	        if ( $(this).is(':visible') ){
	            result = false;
	        }
	    });
	    return result;
	}
	
	//Handle back button press on mobile devices
    function handleBackButton() {
        if (!AllQuickMenuHidden()){
            hideAllquickMenu();
            window.history.pushState({}, '');
        }else if (mainPlayerShown()){
            //Close the main Menu
            hideMainPlayerInterface();
            window.history.pushState({}, '');
        }else if (!AllSubMenuHidden()){
             $(".showMoreMenus").fadeOut('fast');
             $("#showmoreUIcover").fadeOut('fast');
             window.history.pushState({}, '');
        }else{
            window.history.back();
        }
        
    }
    window.addEventListener('popstate', handleBackButton);
    window.history.pushState({}, '');
</script>
</body>
</html>