TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226
							<html>
    <head>
        <title>File Manager</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/tocas/tocas.css">
        <link rel="icon" type="image/png" href="./img/small_icon.png">
        <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
        <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/ao_module.js"></script>
        <script type="text/javascript" src="../../script/forge-sha256.min.js"></script>
        <script type="text/javascript" src="../../script/qrcode.min.js"></script>
        <script type="text/javascript" src="../../script/applocale.js"></script>
        <script>
             window.mobilecheck = function() {
                var check = false;
                (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
                return check;
            };
        </script>
        <style>
            body{
                color:black;
                height:100%;
            }
            h1, h2, h3, p, span, div { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
            html{
                height:100%;
                overflow:hidden;
            }
            body.whiteTheme{
                background-color:rgb(250, 250, 250);
            }
            .darkTheme{
                background-color:#242330 !important;
                color:white;
            }
            .whiteTheme{
                color:#0d0d0d
            }
            .navibar{
                position:fixed;
                width:100%;
                padding-left:12px;
                padding-right:12px;
                padding-top:6px;
                padding-bottom:3px;
                z-index: 99;
            }
            .navibar.darkTheme{
                background-color:#17161f !important;
                border-bottom:2px solid #34b7eb;

            }
            .navibar.whiteTheme{
                /*box-shadow: 0 2px 4px 2px rgb(224, 224, 224);*/
                background-color:#fcfcfc;
                border-bottom:2px solid #34b7eb;
            }
            .whiteTheme .button.standard{
                box-shadow: 0 1px 1px 0px rgb(190, 190, 190);
                border: 0px;
            }

            .whiteTheme .button.standard:hover{
                background-color:#82c2f0 !important;
                color:white !important;
            }

            .ts.button{
                margin-bottom:2px;
            }

            .ts.button.darkTheme{
                background-color:#17161f !important;
                border: 1px solid #262533;
                color:white;
            }

            .ts.button.active.darkTheme{
                background-color:#312f42 !important;
                border: 1px solid #262533;
                color:white;
            }

            .ts.button.darkTheme:hover{
                background-color:#312f42 !important;
                color:white !important;
            }

            .rightPad{
                margin-right:37px;
            }
            .addressBar{
                width:100%;
                padding:3px;
                padding-left: 0px;
                padding-right: 0px;
                min-height: 35px;
                padding-top:6px;
            }
            .breadcrumb.darkTheme{
                background-color:transparent;
            }
            .section.darkTheme{
                color:white !important;
                background-color:transparent;
            }
            .selectable{
                cursor:pointer;
            }
            .rightAlign{
                position:absolute;
                right:0px;
                top:3px;
            }
            .addressText{
                padding:5px;
                border-radius: 3px;
            }
            .addressText.darkTheme{
                border: 1px solid #262533;
            }
            .addressText.whiteTheme{
                border: 1px solid #cfcfcf;
            }
            .divider.whiteTheme{
                color:#262533 !important;
                background-color:transparent;
            }
            .divider.darkTheme{
                background-color:transparent;
                color: white !important;
            }
            #directorySidebar{
                padding:12px;
                overflow-y:auto;
                padding-bottom:20px;
            }
            #directorySidebar.darkTheme{
                border-right:2px solid rgb(25, 24, 31);
                color:white;
                position:absolute;
            }
            #directorySidebar.whiteTheme{
                border-right:2px solid rgba(219, 226, 241, 0.7);
                background-color:#f5f5f5;
                color:rgb(44, 44, 44);
                position:absolute;
            }
            #folderView{
                position:absolute;
                padding-left:2em;
                padding-right:2em;
                padding-top:2em;
                overflow-y:auto;
            }
            #folderView.whiteTheme{
                background-color:white;
            }
            .item.darkTheme{
                color:white;
            }
            .rightmargin.icon{
                margin-right:8px !important;
            }
            .dir{
                cursor:pointer;
            }
            .dir:hover{
                color:#d1d1d1 !important;
            }
            .dir.item.whiteTheme{
                color:rgb(78, 78, 78);
            }
            .device{
                cursor:pointer;
            }
            .device:hover{
                color:#d1d1d1;
            }
            .accordion.darkTheme{
                color:white !important;
            }
            .accordion.whiteTheme{
                background-color:transparent !important;
            }
            .fileObject{
                display:block !important;
                cursor:pointer;
                overflow-wrap: break-word !important;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .fileObject.darkTheme{
                border:1px solid rgb(72, 69, 88) !important;
            }
            .segmented.list.darkTheme{
                border:1px solid rgb(8, 8, 10) !important;
                box-shadow: 0 0 0 0;
                border-radius: 0px;
            }
            .fileObject.darkTheme:hover{
                background-color:#17161f !important;
            }
            .fileObject.darkTheme:hover span{
                background-color:#17161f !important;
            }
            .fileObject.whiteTheme:hover{
                background-color:#f2f2f2 !important;
            }
            .fileObject.darkTheme.selected{
                background-color:#100f16 !important;
                
            }
            .fileObject.darkTheme.selected span{
                background-color:#100f16 !important;
                
            }
            .fileObject.whiteTheme.selected{
                background-color:#d2f2f7 !important;
                color:black !important;
            }
            .mobilePathDisplayWrapper{
                width:100%;
                margin-bottom:5px;
            }
            .ts.card.darkTheme{
                border:1px solid rgb(72, 69, 88) !important;
                box-shadow: 0 0 0 0 transparent;
            }
            .darkTheme.header{
                color:white !important;
                background-color:transparent !important;
            }
            .darkTheme.meta{
                color:rgba(255, 255, 255, 0.836) !important;
                background-color:transparent !important;
            }
            .darkTheme.description{
                color:white !important;
                background-color:transparent !important;
            }
            .whiteTheme.header{
                background-color:transparent;
            }
            .whiteTheme.meta{
                background-color:transparent;
            }
            .whiteTheme.description{
                background-color:transparent;
            }
            #folderList{
                margin-bottom:16px;
            }
            .msgbox{
                padding:3px;
            }
            .closeMsgButton{
                position:absolute;
                top:8px;
                right:12px;

            }
            .closeMsgButton{
                cursor:pointer;
            }
            .popup{
                position:fixed;
                top:30px;
                z-index:110;
                left:34%;
                right:34%;
                bottom:30px;
                padding-bottom:24px;
                border: 0px solid transparent !important;
            }

            .popup.wide{
                left:24%;
                right:24%;
            }

            .popup.darkTheme{
                -webkit-box-shadow: 3px 4px 5px 0px rgb(35, 33, 46) ;
                -moz-box-shadow: 3px 4px 5px 0px rgb(35, 33, 46);
                box-shadow: 3px 4px 5px 0px rgb(35, 33, 46) ;
                border: 1px solid rgb(22, 21, 29);
            }

            .popup.whiteTheme{
                -webkit-box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
                -moz-box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
                box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
                border: 1px solid rgb(226, 226, 226);
                background-color:white;
            }

            @media only screen and (max-width: 1920px) {
                .popup{
                    left:35em;
                    right:35em;
                }

                .popup.wide{
                    left:20em;
                    right:20em;
                }
            }

            @media only screen and (max-width: 1500px) {
                .popup{
                    left:20em;
                    right:20em;
                }
                .popup.wide{
                    left:14em;
                    right:14em;
                }
            }
            
            
            @media only screen and (max-width: 1200px) {
                .popup{
                    left:14em;
                    right:14em;
                }
                .popup.wide{
                    left:5em;
                    right:5em;
                }
            }

            @media only screen and (max-width: 800px) {
                .popup{
                    left:5em;
                    right:5em;
                }
                .popup.wide{
                    left:2em;
                    right:2em;
                }
            }

            @media only screen and (max-width: 600px) {
                .popup{
                    position:fixed;
                    top:5%;
                    z-index:100;
                    left:1em;
                    right:1em;
                }
            }

            .popupheader{
                width:100%;
                padding:3px;
                padding-left:12px;
                border-bottom:2px solid #34b7eb;
                background-color: #171719;
                color: white;
                height:29px;
            }

            .popupcontent{
                height: calc(100% - 29px);
                overflow:auto;
            }

            .popupcloser{
                position:absolute;
                top:5px;
                right:0px;
                font-size: 120%;
                cursor:pointer;
            }

            .popupbuttons{
                cursor:pointer;
                padding:5px;
                padding-left:12px;
                margin-bottom:4px;
                border: 1px solid #dedede;
                border-radius: 4px;
            }

            .popupbuttons.primary.whiteTheme{
                background-color:#51aded;
                box-shadow: 0 2px 1px 0px #34a2ee !important;
                border: 1px solid transparent;
                color:white;
            }

            .popupbuttons.negative{
                background-color:#ed5151;
                box-shadow: 0 2px 1px 0px #ee3434 !important;
                border: 1px solid transparent;
                color:white;
            }

            .popupbuttons.primary.darkTheme{
                background-color:#413f57 !important;
                box-shadow: 0 2px 1px 0px #3c3b50 !important;
                border: 1px solid transparent;
                color:white;
            }

            .popupbuttons.negative.darkTheme{
                background-color:#ed5151 !important;
            }

            .popupbuttons.disabled{
               opacity: 0.4;
               pointer-events: none;
            }

            .popupbuttons.primary.disabled{
                opacity: 0.4;
                pointer-events: none;
            }

            .whiteTheme.allowHover:hover{
                background-color:rgba(238, 238, 238, 0.932);
            }

            .whiteTheme.allowHover.primary:hover{
                background-color:#76c0f5;
            }

            .allowHover.negative:hover{
                background-color:#f57676;
            }

            .allowHover.negative.darkTheme:hover{
                background-color:#f57676 !important;
            }

            .darkTheme.allowHover:hover{
                background-color:#111017 !important;
            }

            .ts.list.darkTheme{
                background-color:#464457 !important;
            }

            input.darkTheme{
                color:white !important;
            }

            .ts.segmented.list.darkTheme .item{
                color:white !important;
            }
            .newFileFormat{
                cursor:pointer;
            }
          
            .popupWrapper{
                position:fixed;
                top:0px;
                left:0px;
                width:100%;
                height:100%;
                z-index:99;
                background-color:rgba(27,27,27,0.5);
                display:none;
            }
            @supports (backdrop-filter: none) {
                .popupWrapper {
                    backdrop-filter: blur(5px);
                }
            }
            .breadcrumb.whiteTheme{
                background-color:white;
            }

            #openWithModuleList{
                height:250px;
                overflow-y:auto;
            }

            #openWith .segment.darkTheme{
                color:white !important;
            }

            #openWithModuleList .item{
                padding:8px;
                padding-left:22px;
                border-radius: 2px;
                display: flex;
                flex-wrap: wrap;        
            }

            #openWithModuleList.darkTheme .item.selected{
                background-color:#100f16 !important;
            }
            #openWithModuleList.whiteTheme .item.selected{
                background-color:#51aded !important;
                color:white;
            }
     
            #openWithModuleList.darkTheme .item.selectable:hover{
                background-color:rgba(250,250,250,0.05);
            }
            #openWithModuleList.whiteTheme .item.selectable:hover{
                background-color:rgba(35,35,35,0.14);
            }
            .contextmenu.darkTheme .item{
                color:white !important;
            }

            .contextmenu .item{
                font-size:90% !important;
            }

            #uploadTab{
                position:fixed;
                right:0px;
                bottom: 0px;
                width:300px;
                margin-bottom:0px !important;
                padding:0px !important;
            }

            #uploadTab.darkTheme{
               color:white;
               background-color:rgba(35,35,35,0.14);
               border: 1px solid #17161f !important;
               box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
            }

            .statusBar{
                height:32px;
                background-color:#f5f5f5;
                padding:8px;
            }

            .statusBar.whiteTheme{
                color:rgb(78, 78, 78);
            }

            .statusBar.darkTheme{
                background-color:#181720 !important;
            }

            .hideUploadButton{
                float: right;
                cursor:pointer;
            }

            .uploadList{
                margin:8px;
                padding-bottom:3px;
                margin-bottom:0px;
                max-height: 250px;
                overflow-y:auto;
            }

            .uploadTask{
                margin-top:6px;
            }
            .uploadTaskRemoveIcon{
                position:absolute;
                top:0px;
                right:0px;
                cursor:pointer;
            }
            .clearallButton{
                padding:8px;
                cursor:pointer;
            }

            .normal.object.whiteTheme{
                color:#303030;
            }

            .normal.object.darkTheme{
                color:white;
            }

            .sub.header.darkTheme{
                color:rgb(190, 190, 190) !important;
            }

            .hex.foldername{
                color:#2b9447 !important;
            }

            .um.filename{
                color: #69aaff !important;
            }

            .dropdown.inverted:not(.icon){
                background-color: #17161f !important;
            }

            .sharebtn{
                cursor: pointer;

            }

            .sharebtn.darkTheme {
                color: white !important;
                background-color: transparent !important;
            }

            .sharebtn.whiteTheme:hover{
                opacity: 0.5;
            }
            .sharebtn.darkTheme:hover{
                opacity: 0.5;
            }

            i.blue{
                color: #345eeb;
            }

            .fileObject.whiteTheme.hotSearchHighlight{
                background-color: #d2f2f7 !important;
            }
            .fileObject.darkTheme.hotSearchHighlight span{
                background-color: #d2f2f7 !important;
            }

            .fileObject.darkTheme.hotSearchHighlight{
                background-color: #100f16 !important;
            }
            .fileObject.darkTheme.hotSearchHighlight span{
                background-color: #100f16 !important;
            }
        </style>
    </head>
    <body class="whiteTheme">
        <div id="navibar" class="navibar whiteTheme">
            <!-- Directoy navigations -->
            <button id="backbtn" class="ts icon tiny button standard whiteTheme" onclick="previosPath();" title="Back"><i class="left arrow icon"></i></button>
            <button id="ppbtn" class="ts icon tiny button standard whiteTheme rightPad" onclick="parentDir();" title="Parent Folder"><i class="up arrow icon"></i></button>
            
            <!-- File Read Operations -->
            <button class="ts icon tiny button standard whiteTheme" title="Open" onclick="openViaButton();"><i class="folder open icon"></i></button>
            <button class="ts icon tiny button standard whiteTheme" title="Open with" onclick="openWith();"><i class="external icon"></i></button>
            <button class="ts icon tiny button standard whiteTheme singleObjectOnly" title="Share File" onclick="shareFile();"><i class="share alternate icon"></i></button>
            <button class="ts labeled icon tiny button standard whiteTheme" style="width:154px;"  title="Download" onclick="downloadFile();">
                <i class="download icon"></i>
                <span locale="menu/button/download">Download</span>
            </button>

             <!-- File Edit Operations -->
             <button class="ts icon tiny button standard whiteTheme" title="Copy" onclick="copy();"><i class="copy icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="Paste" onclick="paste();"><i class="paste icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="Cut" onclick="cut();"><i class="cut icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="New File" onclick="newfile();"><i class="file outline icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="New Folder" onclick="newFolder();"><i class="folder outline icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="Upload" onclick="upload();"><i class="upload icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="Create Zip" onclick="zipFile();"><i class="zip file icon"></i></button>

             <button class="ts icon tiny button standard whiteTheme" title="Rename" onclick="rename();"><i class="i cursor icon"></i></button>
             <button class="ts icon tiny negative button" title="Delete" onclick="deleteFile();"><i class="trash outline icon"></i></button>

             <button class="ts icon tiny button standard whiteTheme" title="Refresh" onclick="refreshList();"><i class="refresh icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="Home" onclick="openHomeDir();"><i class="home icon"></i></button>
             <button class="ts icon tiny button standard whiteTheme" title="File Info" onclick="showFileProperties();"><i class="notice icon"></i></button>
             
             
             <div class="addressBar">
                <button class="ts icon tiny button standard whiteTheme" onclick="toggleSidebar();"  title="Toggle Folder List"><i class="content icon"></i></button>
                <button  class="ts icon tiny button inverted" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
                <button class="ts tiny icon button standard whiteTheme" title="Edit Path" onclick="showEditCurrentPathInput(event)"><i class="ui edit icon"></i></button>
                <div id="pathDisplayField" class="ts breadcrumb whiteTheme addressText pathDisplay desktopOnly" ondblclick="showEditCurrentPathInput(event);">
                    <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
                    <div class="divider whiteTheme">:/</div>
                    <div class="section whiteTheme selectable">Desktop</div>
                </div>
                
                <div id="pathInputField" class="ts action mini input whiteTheme" style="display:none;">
                    <input type="text" style="min-width: 200px;" class="whiteTheme" placeholder="Type a path and press enter" onkeydown="handleOpenPathKeydown(event);">
                    <button class="ts icon button" title="Open" onclick="openEnteredPath(this);">
                        <i class="checkmark icon"></i>
                    </button>
                </div>
                <div class="rightAlign">
                    <select id="sortingMethodSelector" title="Sorting Method" class="ts basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off">
                        <option value="default" locale="menu/sort/asc">Ascending</option>
                        <option value="reverse" locale="menu/sort/desc">Descending</option>
                        <option value="smallToLarge" locale="menu/sort/small">Smallest</option>
                        <option value="largeToSmall" locale="menu/sort/large"> Largest</option>
                        <option value="mostRecent" locale="menu/sort/mostrecent">Most Recent</option>
                        <option value="leastRecent" locale="menu/sort/leastrecent">Least Recent</option>
                    </select>
                    <button id="searhbtn" class="ts icon tiny button standard whiteTheme"  title="Search" onclick="toggleSearch();"><i class="search icon"></i></button>
                    <button class="ts icon tiny button standard whiteTheme videmode" mode="grid" title="Block View" onclick="changeViewMode(this);"><i class="block layout icon"></i></button>
                    <button class="ts icon tiny button standard whiteTheme videmode" mode="list" title="List View" onclick="changeViewMode(this);"><i class="align justify icon"></i></button>
                </div>
             </div>
             <div class="mobilePathDisplayWrapper">
                <div id="mobilePathDisplay" style="width:100%;" class="ts pathDisplay breadcrumb whiteTheme addressText mobileOnly">
                    <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
                    <div class="divider whiteTheme">:/</div>
                    <div class="section whiteTheme selectable">Desktop</div>
                </div>
             </div>
             <div class="searchbar" style="z-index:999; display:none;">
                <div style="width: 80%; display:inline-block; margin-top:-4px;">
                    <div class="ts mini fluid input">
                        <input autocomplete="off" id="searchInput" type="text" class="whiteTheme" placeholder="File Search (Start wildcard search with / , e.g. /*.mp3)" onkeypress="handleSearchBarPress(event);">
                    </div>
                </div>
                <button class="ts icon tiny button standard whiteTheme" title="Case Sensitive" onclick="toggleCaseSensitive(this);">Aa</button>
                <button class="ts icon tiny button standard whiteTheme" title="Search" onclick="handleSearch();"><i class="search icon"></i></button>
                <button class="ts icon tiny button standard whiteTheme" title="Clear Search" onclick="hideSearchBar();"><i class="remove icon"></i></button>
            </div>
             <div class="msgbox" style="z-index:999; display:none;">
                <i class="checkmark icon"></i> <span>No Message</span>
                <div class="closeMsgButton" onclick="$(this).parent().slideUp('fast');"><i class="remove icon"></i></div>
            </div>
        </div>
       
        <div id="mainWindow">
            <div id="directorySidebar" class="whiteTheme">
                <div class="ts list">
                    <details class="ts accordion fluid whiteTheme" open>
                        <summary>
                            <i class="dropdown icon"></i> <span locale="sidebar/vroot/user">User</span>
                        </summary>
                        <div id="userroot" class="ts list" style="padding-top:0px !important;">
                            <div class="dir item whiteTheme"><i class="loading circle notched rightmargin icon"></i> <span locale="message/initiating">Initiating</span></div>
                        </div>
                    </details>
                    <details class="ts accordion fluid whiteTheme" open>
                        <summary>
                            <i class="dropdown icon"></i> <span locale="sidebar/vroot/fsh">Storage</span>
                        </summary>
                        <div id="storageroot" class="ts list" style="padding-top:0px !important;">
                            <div class="dir item whiteTheme"><i class="loading circle notched rightmargin icon"></i> <span locale="message/initiating">Initiating</span></div>
                        </div>
                    </details>
                    <!-- 
                    <details class="ts accordion fluid whiteTheme" open>
                        <summary>
                            <i class="caret down icon"></i>Disks
                        </summary>
                        <div id="deviceList" class="ts list" style="padding-top:0px !important;">
                            <div class="dir item whiteTheme"><i class="loading circle notched rightmargin icon"></i> Initiating</div>
                        </div>
                    </details>
                    -->
                    <!-- >
                    <div class="item fluid whiteTheme">
                        <i class="world icon"></i>Network
                    </div>
                     -->     
                    <br>
                </div>
            </div>
            <div id="folderView" class="whiteTheme" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="folderList" class="ts segmented fluid list whiteTheme">

                </div>
                <div id="fileList" class="ts segmented fluid list whiteTheme">

                </div>
                <br>
            </div>
        </div>
        <!-- Other popup windows -->
        <div class="popupWrapper"></div>
        <!-- Overwrite Selection Box-->
        <div id="overwriteModeSelection" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="paste icon"></i> <span locale="opr/overwrite/title">Replace, Keep or Skip Files</span> 
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <small style="font-size:80%;"><span locale="opr/overwrite/copying">Copying</span> <span class="owm-fc"></span> <span locale="opr/overwrite/files">files from</span> <span class="owm-srcdir"></span> <span locale="opr/overwrite/to">to</span> <span class="owm-destdir"></span></small>
                <p><span locale="opr/overwrite/dest">The destination has </span><span class="owm-fc"></span> <span locale="opr/overwrite/samename">files with the same names.</span></p>

                <div class="popupbuttons whiteTheme allowHover primary" onclick="changeOverwriteRule(0,true);">
                    <i class="checkmark icon"></i> <span locale="opr/overwrite/replace">Replace the files in the destination</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="changeOverwriteRule(1,true);">
                    <i class="reply icon"></i> <span locale="opr/overwrite/skip">Skip these files</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="changeOverwriteRule(2,true);">
                    <i class="undo icon"></i> <span locale="opr/overwrite/keep">Rename and keep the files</span>
                </div>
            </div>
        </div>
        <!-- Force delete confirmation box -->
        <div id="forceDeleteConfirmBox" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="trash icon"></i> <span locale="opr/per-remove/title">Permanently Remove Files</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <p locale="opr/per-remove/questions">Are you sure you want to remove these files <u>permanently?</u><br>This action is <u>irreversible</u>.</p>
                <div class="ts list whiteTheme deleteFilelist" style="max-height:350px;overflow-y:auto; ">

                </div>
                <div class="popupbuttons whiteTheme allowHover" style="background-color: #eb4034 !important;" onclick="forceDelete(true);";>
                <i class="trash icon"></i> <span locale="opr/per-remove/confirm">Confirm</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="cancelForceDelete();hideAllPopupWindows();">
                    <i class="remove icon"></i> <span locale="opr/per-remove/cancel">Cancel</span>
                </div>

            </div>
        </div>

        <!-- Delete confirm box -->
        <div id="deleteConfirmBox" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="recycle icon"></i> <span locale="opr/remove/title">Move files to Trash Bin</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <p locale="opr/remove/question">Are you sure you want to move these files to trash bin?</p>
                <div class="ts list whiteTheme deleteFilelist" style="max-height:350px;overflow-y:auto; ">

                </div>
                <div class="popupbuttons whiteTheme allowHover" style="color: #2bbbdf !important;" onclick="deleteFile(true);";>
                <i class="recycle icon"></i> <span locale="opr/remove/confirm">Move to Trash</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="cancelDelete();hideAllPopupWindows();">
                    <i class="remove icon"></i> <span locale="opr/remove/cancel">Cancel</span>
                </div>

            </div>
        </div>

        <!-- Rename tool box -->
        <div id="renameBox" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="text cursor icon"></i> <span locale="opr/rename/title">Rename Files</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <p locale="opr/rename/instruction">Enter the new filename for renaming. </p>
                <p class="multifileWarning"><i class="notice icon"></i> Other files will be named as file(#)</p>
                <div class="ts left icon small fluid input" style="margin-bottom:12px;">
                    <input type="text" class="whiteTheme orgfn" placeholder="Original Filename" readonly="true">
                    <i class="minus square icon" style="color:rgb(122, 176, 247)"></i>
                </div>
                <div class="ts left icon small fluid input" style="margin-bottom:12px;">
                    <input type="text" class="whiteTheme newfn" placeholder="New Filename" onkeydown="handleEnterKeyDown(event, function(){confirmRename(true);})">
                    <i class="add square icon" style="color:rgb(122, 176, 247)"></i>
                </div>
                <div class="popupbuttons whiteTheme allowHover primary"  onclick="confirmRename(true);";>
                <i class="checkmark icon"></i> <span locale="opr/rename/ok">OK</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i> <span locale="opr/rename/cancel">Cancel</span>
                </div>

            </div>
        </div>

        <!-- New File Dialog-->
        <div id="newFile" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="add icon"></i> <span locale="opr/newfile/title">New File</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <p locale="opr/newfile/instruction">Select a type of file to be created.</p>
                <div class="ts segmented list whiteTheme newfilelist" style="max-height:18em; overflow-y:scroll">
                    <div class="item newFileFormat" ext="php">No Item</div>
                </div>
                <p locale="opr/newfile/newempty">Or create an empty file with given filename:</p>
                <div class="ts left icon small fluid input" style="margin-bottom:12px;">
                    <input id="createNewFileName" type="text" class="whiteTheme" placeholder="New Filename" onkeydown="handleEnterKeyDown(event, confirmNewFile);">
                    <i class="add square icon" style="color:rgb(122, 176, 247)"></i>
                </div>
                <p class="duplicateWarning" style="color:#CE5F58; display:none;"><i class="caution sign icon"></i> The given filename already exist.</p>
                <div class="popupbuttons whiteTheme allowHover primary"  onclick="confirmNewFile();";>
                    <i class="add icon"></i> <span locale="opr/newfile/create">Create</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i> <span locale="opr/newfile/cancel">Cancel</span>
                </div>
            </div>
        </div>

        <!-- New Folder Dialog-->
        <div id="newFolder" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="folder icon"></i> <span locale="opr/newfolder/title">New Folder</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <p locale="opr/newfolder/desc">Enter the new folder name to be created.</p>
                <div class="ts left icon small fluid input" style="margin-bottom:12px;">
                    <input id="createNewFolder" type="text" class="whiteTheme" placeholder="New Folder Name" onkeydown="handleEnterKeyDown(event, function(){newFolder(true);});">
                    <i class="add square icon" style="color:rgb(122, 176, 247)"></i>
                </div>
                <p class="duplicateWarning" style="color:#CE5F58; display:none;"><i class="caution sign icon"></i> <span locale="opr/newfolder/alreadyExists">The given folder already exist.</span></p>
                <div class="popupbuttons whiteTheme allowHover primary"  onclick="newFolder(true);";>
                    <i class="add icon"></i> <span locale="opr/newfolder/create">Create</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i> <span locale="opr/newfolder/cancel">Cancel</span>
                </div>
            </div>
        </div>

        <!-- Share File Dialog-->
        <div id="shareFile" class="popup wide whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="external icon"></i> <span locale="opr/share/title">Share File</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
                <div class="ts stackable grid">
                    <div class="eight wide column">
                        <div class="width: 100%; ">
                            <div style="display: block; margin-left: auto; margin-right: auto;" align="center">
                                <div id="qrcode" style="border: 10px solid white; background-color: white;"></div>
                            </div>
                            <a id="sharelink" href="" target="_blank" style="margin-top:8px; font-size: 120%; padding-left: 20px; padding-right: 20px; word-break: break-all;">Scan this QR Code to copy the share link</a>
                        </div>
                    </div>
                    <div class="eight wide column" style="padding-left: 12px;">
                        <div class="ts header whiteTheme">
                            <span locale="opr/share/settings">Share Settings</span>
                            <div class="sub header whiteTheme" locale="opr/share/setdesc">Change who can see this file</div>
                        </div>
                        <div id="shareSettingForm" class="ts form">
                            <div class="field">
                                <label><p class="whiteTheme" locale="opr/share/visableoption">Visable options:</p></label>
                                <div class="ts checkboxes">
                                    <div class="ts radio checkbox">
                                        <input id="anyone" type="radio" class="shareoption" name="shareopt" value="anyone" checked="true">
                                        <label for="anyone">
                                            <div class="ts header">
                                                <div class="content whiteTheme">
                                                    <i class="globe icon"></i> <span locale= "opr/share/anyone">Anyone with the link</span>
                                                    <div class="sub header whiteTheme" locale="opr/share/anyonedesc">Anyone who has the link can access this file</div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="ts radio disabled checkbox">
                                        <input id="signedin" type="radio" class="shareoption" value="signedin" name="shareopt">
                                        <label for="signedin">
                                            <div class="ts header">
                                                <div class="content whiteTheme">
                                                    <i class="user circle outline icon"></i> <span locale="opr/share/signedin">Anyone signed in</span>
                                                    <div class="sub header whiteTheme" locale="opr/share/signedindesc">Anyone who has signed in can access this file</div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="ts radio disabled checkbox">
                                        <input id="samegroup" type="radio" class="shareoption" value="samegroup" name="shareopt">
                                        <label for="samegroup">
                                            <div class="ts header">
                                                <div class="content whiteTheme">
                                                    <i class="users icon"></i> <span locale="opr/share/samegroup">Users in the same group</span>
                                                    <div class="sub header whiteTheme" locale="opr/share/samegroupdesc">Anyone who is in the same group as you do</div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    <br>
                                    <button class="ts small button" onclick="updateShareSettings(this)" locale="opr/share/update" style="border: 0px solid transparent;">Update</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="ts divider"></div>
                <div id="sharingRemoveBtn" class="popupbuttons negative whiteTheme allowHover" onclick="removeSharing()">
                    <i class="remove icon"></i> <span locale="opr/share/remove">Remove Sharing</span>
                </div> 
                <div class="popupbuttons whiteTheme allowHover" onclick="hideShare()">
                    <i class="checkmark icon"></i> <span locale="opr/share/ok">OK</span>
                </div> 
            </div>
        </div>

        <!-- Open With Dialog-->
        <div id="openWith" class="popup whiteTheme" style="display:none;">
            <div class="popupheader whiteTheme">
                <i class="external icon"></i> <span locale="opr/openwith/title">Open File With</span>
                <div class="popupcloser" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i>
                </div>
            </div>
            <div class="popupcontent" style="padding:12px;">
               <p locale="opr/openwith/desc">Select a module from the list below:</p>
                <div id="openWithModuleList" class="ts segment whiteTheme" style="padding:0px;">
                    <div class="item selectable">
                        <div class="content" style="padding-left:12px;">
                            <div class="header" locale="opr/openwith/loading">Loading...</div>
                        </div>
                    </div>
                </div>
                <div class="openWithModule popupbuttons whiteTheme allowHover primary" onclick="openWithSelectedModule(this);";>
                    <i class="external icon"></i> <span locale="opr/openwith/openWithWebApp">Open with Selected Module</span>
                </div> 
                <div class="openWithModule popupbuttons whiteTheme allowHover" onclick="openFileWithModuleInNewTab(this);">
                    <i class="add icon"></i> <span locale="opr/openwith/openWithWebAppInNewWindow">Open in new tab</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover vdonly" onclick="openRawFileInFloatWindow(this);">
                    <i class="window restore outline icon"></i> <span locale="opr/openwith/openInNewWindow">Open File directly in floatWindow</span>
                </div>
                <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
                    <i class="remove icon"></i> <span locale="opr/openwith/cancel">Cancel</span>
                </div>
            </div>
        </div>

        <!-- Context Menu -->
        <div id="contextmenu" class="ts small contextmenu visible whiteTheme" style="min-width:250px;">
            <div class="item" onclick="openViaButton();">
                <i class="folder open icon"></i> <span locale="contextmenu/open">Open</span>
            </div>
            <div class="item fileonly" onclick="openWith();">
                <i class="external icon"></i> <span locale="contextmenu/openWith">Open With</span>
            </div>
            <div class="item folderonly" onclick="openSelectedFolderInNewWindow();">
                <i class="external icon"></i> <span locale="contextmenu/openNewWindow">Open In New Window</span>
            </div>
            <!-- This is the vroot alternative new windows-->
            <div class="item vrootonly" onclick="openSelectedVroot();">
                <i class="external icon"></i> <span locale="contextmenu/openNewWindowVroot">Open In New Window</span>
            </div>
            <div class="item shareonly" onclick="openFileLocation();">
                <i class="folder outline icon"></i> <span locale="contextmenu/openFileLocation">Open File Location</span>
            </div>
            <div class="item singleObjectOnlyHide" onclick="shareFile();">
                <i class="share alternate icon"></i> <span locale="contextmenu/Share">Share</span>
            </div>
            <div class="item mobileonly" onclick="toggleCtrl();">
                <i class="mouse pointer icon"></i> <span locale="contextmenu/MuitSelect">Multi-select</span>
            </div>
            <div class="item" onclick="copy();">
                <i class="copy icon"></i> <span locale="contextmenu/copy">Copy</span>
                <span class="description">Ctrl + C</span>
            </div>
            <div class="item allowNoSelection" onclick="paste();">
                <i class="paste icon"></i> <span locale="contextmenu/paste">Paste</span>
                <span class="description">Ctrl + V</span>
            </div>
            <div class="item" onclick="cut();">
                <i class="cut icon"></i> <span locale="contextmenu/cut">Cut</span>
                <span class="description">Ctrl + X</span>
            </div>
            <div class="divider vroothide noSelectionOnly"></div>
            <div class="item noSelectionOnly" onclick="newfile();">
                <i class="file outline icon"></i>  <span locale="contextmenu/newFile">New File</span>
            </div>
            <div class="item noSelectionOnly" onclick="newFolder();">
                <i class="folder outline icon"></i> <span locale="contextmenu/newFolder">New Folder</span>
            </div>
            <div class="divider vroothide"></div>
            <div class="item noSelectionOnly" onclick="upload();">
                <i class="upload icon"></i>  <span locale="contextmenu/upload">Upload</span>
            </div>
            <div class="item" onclick="zipFile();">
                <i class="zip file icon"></i> <span locale="contextmenu/zip">Create Zip</span>
            </div>
            <div class="item" onclick="rename();">
                <i class="i cursor icon"></i> <span locale="contextmenu/rename">Rename</span>
            </div>
            <div class="item" onclick="deleteFile();">
                <i class="trash icon"></i> <span locale="contextmenu/delete">Delete</span>
            </div>
            <div class="item backuponly" onclick="openBackupManager();">
                <i class="block layout icon"></i> <span locale="contextmenu/backup">Backup & Restore</span>
            </div>
            <div class="divider vroothide"></div>
            <div class="item noSelectionOnly" onclick="refreshList();">
                <i class="refresh icon"></i> <span locale="contextmenu/refresh">Refresh</span>
            </div>
            <div class="item" onclick="downloadFile();">
                <i class="download icon"></i> <span locale="contextmenu/download">Download</span>
            </div>
            <div class="item" onclick="showFileProperties();">
                <i class="notice icon"></i> <span locale="contextmenu/properties">Properties</span>
            </div>
            <!-- This properties shows the currentDirectory properties instead of the selected file properties-->
            <div class="item noSelectionOnly" onclick="showCurrentDirectoryProperties();">
                <i class="notice icon"></i> <span locale="contextmenu/properties">Properties</span>
            </div>
            <!-- This properties show the vroot properties -->
             <!-- This properties shows the currentDirectory properties instead of the selected file properties-->
             <div class="item vrootonly" onclick="showVrootProperties();">
                <i class="notice icon"></i> <span locale="contextmenu/properties">Properties</span>
            </div>
        </div>

        <!-- Upload Progress Bars-->
        <div id="uploadTab" class="ts segment whiteTheme" style="display:none;">
            <div class="statusBar whiteTheme">
                <i class="upload icon"></i><span id="uploadCount">0</span> <span locale="upload/count/uploading">Files</span> / <i class="wait icon"></i> <span id="waitingCount">0</span> <span locale="upload/count/pending">Files</span>
                <div class="hideUploadButton" onclick="toggleUploadList();">
                    <i class="caret down icon"></i>
                </div>
            </div>
            <div class="uploadList" id="uploadProgressList">
              
            </div>
            <br>
        </div>

           
        <script>
            let directorySidebarWidth = 250; //Width of the sidebar
            let sideBarShown = true; //Indicate if sidebar is shown
            let rootDirs = [];  //Storage location for rootDirs
            let currentTheme = "whiteTheme"; //Default theme
            let viewMode = "list"; //Viewmode, support {list, grid, detail}
            let sortMode = "default"; //Sortmode, support {default, reverse, smallToLarge, largeToSmall, mostRecent, leastRecent}
            let currentPath = "user:/"
            let viewHistory = []; //View history
            let enableBetaFilename = false; //Enable beta filename conversion from "inith..." to "normal"
            let currentFilelist = []; //The current file list in the currentPath
            let currentPathHash = "";   //The folder content hash
            let enableAutoRefresh = true; //Enable directory updates on file change
            let filesIconTheme = "default";

            //File operations
            let clipboard = []; //System clipboard
            let cutMode = false; //If set to true, this is cut mode. Else copy mode
            let useLocalstorage = lscheck();
            let overwriteMode = "keep"; //Overwrite mode, support {skip, overwrite, keep}
            let thumbRenderWebSocket = null;

            //Searching related
            let searchCaseSensitive = false;
            let searchMode = false;
            let hotSearchBuffer = "";
            let hotSearchTimer = null;
            let hotSearchOffsetIndex = 0;

            //Keypress listeners
            let ctrlHold = false;
            let shiftHold = false;

            //Upload related
            let uploadingFileCount = 0;
            let maxConcurrentUpload = 4; //Maxmium number of oncurrent upload
            let uploadPendingList = []; //Upload pending queue for mass upoad
            let lowMemoryMode = true;   //Upload with low memory mode channel
            let uploadFileChunkSize = 1024 * 512; //512KB, 4MB not working quite well on slow network

            //File Sharing related
            let shareEditingObject = ""; 
            let shareEditingUUID = "";

            //System Information
            let systemUUID = "";
            let systemIP = "";

            //Browser detection
            let isMobile = window.mobilecheck();
            let isChromium = window.chrome;
            let isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
            let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
            let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

            //Intiiation functions
            $(document).ready(function(){
                if (applocale){
                    //Applocale found. Do localization
                    applocale.init("../locale/file_explorer.json", function(){
                        applocale.translate();
                        initRootDirs();
                        initSystemInfo();
                        initUploadMode();
                    });
                }else{
                    //Applocale not found. Is this a trim down version of ArozOS?
                    applocale = {
                        getString: function(key, original){
                            return original;
                        }
                    }
                    initRootDirs();
                    initSystemInfo();
                    initUploadMode();
                }
           
                if (isMobile){
                    //Mobile css adjustment
                    sideBarShown = false;
                    $("#directorySidebar").hide();
                    $("#directorySidebar").css("width",window.innerWidth + "px");
                    $("body").css("overflow","hidden");
                    directorySidebarWidth = window.innerWidth;
                    $("#folderView").css({
                        "padding-right":"1em",
                        "padding-left":"1em",
                        "padding-top":"1em",
                    });
                    $(".desktopOnly").hide();
                    $(".mobileOnly").show();

                    //Adjust minor css on mobile devices
                    $(".rightPad").css("margin-right", "37px");
                }else{
                    $(".mobileOnly").hide();
                    $(".desktopOnly").show();

                    $(".rightPad").css("margin-right", "37px");
                }
                //Initialize view mode buttons
                updateViewmodeButtons();
                loadListModeFromDB();

                //Initialize system theme
                loadPreference("file_explorer/theme",function(data){
                    if (data.error === undefined){
                        if (data == "darkTheme"){
                            toggleDarkTheme();
                        }else{
                            //White theme
                        
                        }
                    }
                });

                if (window.location.hash != ""){
                    //Check if the hash is standard open protocol. If yes, translate it
                    if (ao_module_loadInputFiles() === null){
                        //Window location hash set. List the desire directory
                        currentPath = window.location.hash.substring(1,window.location.hash.length);
                        if (currentPath.substring(currentPath.length -1) != "/"){
                            currentPath = currentPath + "/";
                        }
                        currentPath = decodeURIComponent(currentPath);
                        loadListModeFromDB(function(){
                            listDirectory(currentPath);
                        });
                        
                    }else{
                        //This is ao_module load file input. Handle the file opening
                        var filelist = ao_module_loadInputFiles();
                        if (filelist.length > 0){
                            filelist = filelist[0];
                            //Check if this is folder or file. Only opendir when it is folder
                            //Updates 27-12-2020: Open folder and highlight the file if it is file
                            if (filelist.filename.includes(".") == false){
                                //Try to open it and overwrite the hash to filesystem hash
                                loadListModeFromDB(function(){
                                    listDirectory(filelist.filepath);
                                });
                            }else{
                                //File. Open its parent folder and highlight the target file if exists
                                var parentdir = filelist.filepath.split("/");
                                let focusFilename = JSON.parse(JSON.stringify(filelist.filename));
                                parentdir.pop();
                                parentdir = parentdir.join("/");
                                loadListModeFromDB(function(){
                                    listDirectory(parentdir, function(){
                                        focusFileObject(focusFilename);
                                    });
                                });
                            }
                        }
                    }
                }else{

                    //Initialized directory views
                    loadListModeFromDB(function(){
                        listDirectory(currentPath);
                    });
                }
                

                //Create a timer to check change in current folder
                setInterval(function(){
                    if (enableAutoRefresh == false){
                        return;
                    }
                    getDirHash(function(hash){
                        if (hash.error !== undefined){
                            //Something went wrong. Ignore this request
                            console.log(hash.error)
                        }else{
                            //Check if the hash match with the last hash.
                            if (hash != currentPathHash){
                                //console.log(currentPathHash, hash);
                                refreshList();
                                currentPathHash = hash;
                                if (currentPath == "user:/"){
                                    //Reload the User root folder list
                                    initRootDirs();
                                }
                            }
                        }

                    });
                }, 5000)

            });

            //END OF INIT FUNCTIONS

            //Get the system ID and ip address from the system id services
            function initSystemInfo(){
                $.get("../../system/id/requestInfo",function(data){
                    if (data.error !== undefined){
                        msgbox("remove", data.error);
                    }else{
                        systemUUID = data.SystemUUID;
                        systemIP = data.IpAddress;
                    }
                });
            }

            //Initiate the sidebar contents 
            function initRootDirs(){
                //Load user directories
                $.ajax({
                    url:"../../system/file_system/listRoots?user=true",
                    success: function(data){
                        $("#userroot").html("");
                        for (var i =0; i < data.length; i++){
                            var thisRootObject = data[i];
                            if (thisRootObject.IsDir == true && !(thisRootObject.Filename == ".cache" || thisRootObject.Filename == ".trash")){
                                //Files will not be listed in the root directory list
                                var specifcRootInfo = getUserRootIcons(thisRootObject.Filename);
                                var icon = specifcRootInfo[0];
                                var displayName = specifcRootInfo[1];
                                var vpath = thisRootObject.Filepath;
                                $("#userroot").append(`<div class="dir item ${currentTheme}" filepath="${vpath}" type="folder" onclick="openthis(this);"><i class="${icon} rightmargin icon"></i> ${displayName}</div>`);
                            }
                        }
                    }   
                });

                //Load other storage devices
                $.ajax({
                    url:"../../system/file_system/listRoots",
                    success: function(data){
                        $("#storageroot").html("");
                        for (var i =0; i < data.length; i++){
                            var thisRoot = data[i];
                            var displayName = thisRoot.RootName;
                            var rootPath = thisRoot.RootPath;
                            var containBackup = thisRoot.RootBackups;
                            $("#storageroot").append(`<div class="dir item ${currentTheme}" contain-backup="${containBackup}" filepath="${rootPath}" type="folder" rootname="${displayName}" onclick="openthis(this);"><i class="disk outline rightmargin icon"></i> ${displayName} (${rootPath})</div>`);
                        }
                    }
                });

                //Initial Host device drives
                /*
                $.ajax({
                    url: "../../system/file_system/listDrives",
                    success: function(data){
                        $("#deviceList").html("");
                        for (var i =0; i < data.length; i++){
                            var drivePath = data[i].Drivepath;
                            var usagePercentage = ((data[i].DriveTotalSpace - data[i].DriveFreeSpace) / data[i].DriveTotalSpace) * 100;
                            var className = "primary";
                            if (usagePercentage > 90){
                                className = "negative";
                            }
                            $("#deviceList").append(`<div class="dir item ${currentTheme}" filepath="${drivePath}" ><i class="disk outline rightmargin icon"></i> ${drivePath} 
                                <div style="width:100px;height:15px !important; position:absolute;right:3px;top:6px;"">
                                    <div class="ts ${className} tiny progress">
                                        <div class="bar" style="width: ${usagePercentage}%"></div>
                                    </div>
                                </div>
                                </div>`);
                        }
                    }
                });
                */
            }

          
            function getUserRootIcons(foldername){
                var icon = "folder open";
                var name = foldername;
                foldername = foldername.toLowerCase();
                if (foldername == "desktop"){
                    icon = "computer";
                    name = applocale.getString("sidebar/vroot/desktop", name);
                }else if (foldername == "document"){
                    icon = "file text outline";
                    name = applocale.getString("sidebar/vroot/document", name);
                }else if (foldername == "music" || foldername == "audio"){
                    icon = "music";
                    name = applocale.getString("sidebar/vroot/music", name);
                }else if (foldername == "photo" || foldername == "picture"){
                    icon = "image";
                    name = applocale.getString("sidebar/vroot/photo", name);
                }else if (foldername == "video" || foldername == "film"){
                    icon = "video";
                    name = applocale.getString("sidebar/vroot/video", name);
                }else if (foldername == "trash" || foldername == "bin" || foldername == "rubbish"){
                    icon = "trash"
                    name = applocale.getString("sidebar/vroot/trash", name);
                }else if (foldername == "download"){
                    icon = "download"
                    name = applocale.getString("sidebar/vroot/download", name);
                }else if (foldername == "www" || foldername == "web" || foldername == "mysite"){
                    icon = "globe"
                    name = applocale.getString("sidebar/vroot/web", name);
                }else if (foldername == "model"){
                    icon = "cube"
                    name = applocale.getString("sidebar/vroot/model", name);
                }else if (foldername == "appdata"){
                    icon = "code"
                    name = applocale.getString("sidebar/vroot/appdata", name);
                }
                return [icon, name];
            }

            // ============================== FOLDER LISTING FUNCTIONS ====================
            function listDirectory(path, callback=undefined, recordUndo=true){
                var recordPreviousPage = true;
                if (recordUndo == false){
                    recordPreviousPage = false;
                }

                if (searchMode){
                    hideSearchBar(true);
                }

                //Backup the current selected files if it is an refresh operation
                let selectedFiles = [];
                if (path == currentPath){
                    $(".fileObject.item.selected").each(function(){
                        selectedFiles.push($(this).attr("filename"));
                    });

                    //Set record histroy to false on refresh
                    recordPreviousPage = false;
                }
               
                //Always pad slash to the end of path
                if (path.substring(path.length - 1) != "/"){
                    path = path + "/";
                }

                //Clean the path if there are any malformat
                if (path.indexOf("//") != -1){
                    path = path.split("//").join("/");
                }

                if (recordPreviousPage){
                    viewHistory.push(currentPath);
                }
               
                window.location.hash = path;
                updatePathDisplay(path);
                currentPath = path;

                //Update floatWindow title if exists
                if (ao_module_virtualDesktop){
                    var tmp = path.split("/");
                    tmp.pop();
                    ao_module_setWindowTitle(applocale.getString("title/title", "File Manager") + " - " + tmp.pop());
                }

                //Check if there are parent path for curret path
                if (checkIfParentDirExists(currentPath)){
                    $("#ppbtn").removeClass("disabled");
                }else{
                    $("#ppbtn").addClass("disabled");
                }
                if (viewHistory.length < 1){
                    $("#backbtn").addClass("disabled");
                }else{
                    $("#backbtn").removeClass("disabled");
                }

                //Add loading screen to the folderlists and fileList
                $("#fileList").html("");
                if (currentTheme == "darkTheme"){
                    $("#folderList").html(`<div style="height: 100px;">
                        <div class="ts active dimmer">
                            <div class="ts text loader">${applocale.getString("message/loading", "Loading")}</div>
                        </div>
                    </div>`);
                }else{
                    $("#folderList").html(`<div style="height: 100px;">
                        <div class="ts active inverted dimmer">
                            <div class="ts text loader">${applocale.getString("message/loading", "Loading")}</div>
                        </div>
                    </div>`);
                }
               
                //Get sort mode from server side
                $.ajax({
                    url: "../../system/file_system/sortMode",
                    data: {opr: "get", folder: currentPath},
                    success: function(data){
                        if (data.error == undefined){
                            sortMode = data;
                        }
                        $("#sortingMethodSelector").val(sortMode);
                        //Start listdir event
                        $.ajax({
                            url: "../../system/file_system/listDir",
                            method: "POST",
                            data: {dir: decodeURIComponent(path), sort: sortMode},
                            success: function(data){
                                //Parse the filelist into global variable
                                currentFilelist = [];
                                if (data === null){
                                    //There is nothing is this folder.
                                    $("#folderList").hide();
                                    $("#fileList").hide();
                                    return;
                                }

                                if (data.error !== undefined){
                                    //Parse path error. Try to refresh the page
                                    if (data.error.length >= "Redirect:".length && data.error.substr(0,9) == "Redirect:"){
                                        var redirectAction = data.error.substr(9).trim();
                                        if (redirectAction == "parent"){
                                            var pdir = currentPath.split("/");
                                            pdir.pop(); pdir.pop();
                                            pdir = pdir.join("/");
                                            currentPath = pdir;
                                            listDirectory(currentPath);
                                        }else if (redirectAction == "root"){
                                            var currentRoot = currentPath.split("/").shift();
                                            listDirectory(currentRoot);
                                        }else if (redirectAction == "userroot"){
                                            listDirectory("user:/")
                                        }
                                        return
                                    }
                                    //console.log("Path parse error! Redirecting to parent directory.", data.error);
                                    //var pdir = currentPath.split("/");
                                    //pdir.pop(); pdir.pop();
                                    //pdir = pdir.join("/");
                                    //currentPath = pdir;
                                    enableAutoRefresh = false;
                                    //Check if it is already rooted and no more parent ahead
                                    if (currentPath == ""){
                                        currentPath = "user:/";
                                    }
                                    
                                    //Print folder not found exceotion
                                    $("#folderList").show();
                                    $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
                                        <div class="ts header">
                                            <i class="remove icon ${currentTheme}"></i> <span class="${currentTheme}">This Folder Cannot Be Opened</span>
                                            <div class="sub header ${currentTheme}" style="margin-top:12px;">The server return the following error message: <br><code>${data.error.toUpperCase()}</code><br>
                                                ${ao_module_utils.timeConverter(Date.now()/1000)}</div>
                                        </div>
                                    </div>`);
                                    $("#fileList").hide();

                                    //listDirectory(currentPath, function(){
                                    //    window.location.reload();
                                    //});
                                    return;
                                }else{
                                    enableAutoRefresh = true;
                                    //Filelist returned. Render it
                                    renderDirectory(data,function(){
                                        //Restore the selected file list
                                        $(".fileObject.item").each(function(){
                                            for (var i = 0; i < selectedFiles.length; i++){
                                                var thisFilename = selectedFiles[i];
                                                if (thisFilename == $(this).attr("filename")){
                                                    $(this).addClass("selected");
                                                }
                                            }
                                        });
                                        
                                        //Perform the callback
                                        if (callback !== undefined){
                                            callback();
                                        }
                                    });
                                }
                            } 
                        });
                    }
                });
            }

            //Render filelist --> Convert a file list object into the visable form of file list
            function renderDirectory(filelist, callback=undefined){
                var data = filelist;
                $("#fileList").html("");
                $("#folderList").html("");
                //Build the css strcture of the list
                if (viewMode == "list"){
                    $("#fileList").attr("class",`ts segmented fluid list ${currentTheme}`);
                    $("#folderList").attr("class",`ts segmented fluid list ${currentTheme}`);
                }else if (viewMode == "details"){
                    
                }else if (viewMode == "grid"){
                    $("#fileList").attr("class",`${currentTheme}`).css("vertical-align","top");
                    $("#folderList").attr("class",`${currentTheme}`).css("vertical-align","top");
                }
            
                var files = [];
                var folders = [];
                for (var i =0; i < data.length; i++){
                    if (data[i].IsDir == true){
                        //This is folder
                        folders.push(data[i]);
                    }else{
                        //This is file
                        files.push(data[i]);
                    }
                    currentFilelist.push(JSON.parse(JSON.stringify(data[i].Filename)));
                }
                //Define the grid size for the interface
                var gridSize = 150 ;

                if (isMobile){
                    //Update 3/5/2021: Optimize the width calculation method to best fit
                    //A hack to align the divs to center of the container
                    $("#folderView").attr("align", "center");
                    $("#folderList").attr("align", "left");
                    $("#fileList").attr("align", "left");

                    //Calculate the best width to fit all the grids
                    var bestCount = Math.floor(parseFloat($("#folderView").width()) / parseFloat(gridSize));
                    var bestOffset = $("#folderView").width() % gridSize;
                    gridSize = gridSize + (bestOffset / bestCount) - (window.innerWidth - $("#folderView").width()) / bestCount;
                }
                
                //List all folders
                for (var i =0; i < folders.length; i++){
                    var filename = folders[i].Filename;
                    var filepath = folders[i].Filepath;
                    var realpath = folders[i].Realpath;
                    var isDir = folders[i].IsDir;
                    var filesize = folders[i].Filesize;
                    var Displaysize = folders[i].Displaysize;
                    var isShared = folders[i].IsShared;
                    var ext = getExtFromPath(filepath);
                    //var icon = ao_module_utils.getIconFromExt(ext);
                    var icon = "folder";
                    var shareicon = "";
                    if (isShared == true){
                        shareicon = `<button class="sharebtn ${currentTheme}" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
                            <i class='share alternate icon'></i>
                        </button>`
                    }
                    if (viewMode == "list"){
                        var textclass = "normal object";
                        if (currentTheme == "darkTheme"){
                            textclass += " darkTheme";
                        }
                        var displayName = filename;
                        try{
                            //Try to decode it using ArozOS Beta naming scheme
                            if (enableBetaFilename && ao_module_codec.decodeHexFoldername(displayName) != displayName){
                                displayName = ao_module_codec.decodeHexFoldername(displayName, false);
                                textclass = "hex foldername";
                            }
                        }catch(ex){
                            //Codec decode failed. Fallback to default name

                        }
                       
                        $("#folderList").append(`<div class="fileObject item ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
                            <span style="display:inline-block !important;word-break: break-all;" class="${textclass}">
                                <i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i>  ${displayName} ${shareicon}
                            </span></div>`);
                    }else if (viewMode == "grid"){
                        var displayName = JSON.parse(JSON.stringify(filename));
                        var textclass = "normal object";
                         try{
                             //Try to decode it using ArozOS Beta naming scheme
                            if (enableBetaFilename && ao_module_codec.decodeHexFoldername(displayName) != displayName){
                                displayName = ao_module_codec.decodeHexFoldername(displayName, false);
                                textclass = "hex foldername";
                            }
                        }catch(ex){
                            //Codec decode failed. Fallback to default name
                            
                        }
                        if (displayName.length > 16){
                            displayName = displayName.substring(0,16) + "...";
                        }
                        $("#folderList").append(`
                        <div class="ts card fileObject ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:15em; margin-top:0px !important; overflow:hidden;">
                            <div class="image" style="text-align: center;">
                                <img draggable="true"ondragstart="disableDrag(event);" src="../../img/desktop/files_icon/${filesIconTheme}/folder.png" style="height: 148px; width: 148px; display: inline-block;">
                            </div>
                            <div class="content" style="font-size: 12px;">
                                <div class="header ${currentTheme} ${textclass}" title="${filename}">${displayName} ${shareicon}</div>
                            </div>
                        </div>`);
                    }
                }

                if (folders.length == 0){
                    $("#folderList").hide();
                }else{
                    $("#folderList").show();
                }
            
                //List all files
                var fl = folders.length;
                for (var i =0; i < files.length; i++){
                    var filename = files[i].Filename;
                    var filepath = files[i].Filepath;
                    var realpath = files[i].Realpath;
                    var filesize = files[i].Filesize;
                    var Displaysize = files[i].Displaysize;
                    var isShared = files[i].IsShared;
                    var ext = getExtFromPath(filepath);
                    var icon = "file outline";
                    if (ext == ""){
                        icon = "file outline";
                    }else if (ext == "shortcut"){
                        //Use the default shortcut icon
                        icon = ao_module_utils.getIconFromExt(ext);

                        //Check if the shortcut object exists
                        if (files[i].Shortcut != undefined){
                            icon = files[i].Shortcut.Icon;
                        }

                    }else{
                        icon = ao_module_utils.getIconFromExt(ext);
                    }

                    var shareicon = "";
                    if (isShared){
                        shareicon = `<button class="sharebtn ${currentTheme}" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
                            <i class='share alternate icon'></i>
                        </button>`
                    }
                    
                    var fileType = "file";
                    if (ext == "shortcut"){
                        fileType = "shortcut";
                    }

                    if (viewMode == "list"){
                        var displayName = filename;
                        var textclass = "normal object";
                        if (currentTheme == "darkTheme"){
                            textclass += " darkTheme";
                        }

                        if (ext == "shortcut"){
                            //This is a shortcut file
                            displayName = files[i].Shortcut.Name;

                            //Adjust the icon based on its shortcut ype
                            switch(files[i].Shortcut.Type){
                                case "folder":
                                    icon = "blue folder";
                                    break;
                                case "module":
                                    icon = "play circle";
                                    break;
                                default: 
                                    icon = "external";
                            }
                        }

                        if (enableBetaFilename){
                            decodedName = ao_module_codec.decodeUmFilename(displayName);
                            if (decodedName != displayName){
                                displayName = decodedName;
                                textclass = "um filename";
                            }
                            filename = ao_module_codec.decodeUmFilename(filename);
                        }
                        $("#fileList").append(`<div class="fileObject item ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);"  fileID="${fl + i}"  filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);"  type="${fileType}" filesize="${filesize}" displaysize="${Displaysize}">
                            <span style="display:inline-block !important;word-break: break-all;text-overflow: ellipsis !important;overflow: hidden;" class="${textclass}">
                                <i class="${icon} icon" style="margin-right:12px;"></i>  
                                ${displayName}  ${shareicon}
                            </span>
                        </div>`);
                    }else if (viewMode == "grid"){
                        //Update the icon path depends on the type of file
                        var imagePath = "../../img/desktop/files_icon/" + filesIconTheme + "/" + icon + ".png";
                        var displayName = JSON.parse(JSON.stringify(filename));
                        if (ext == "shortcut"){
                            //This is a shortcut file. Treat it specially
                            imagePath = "../../" + icon;
                            displayName = files[i].Shortcut.Name;
                            ext = files[i].Shortcut.Type;
                            ext = ext.charAt(0).toUpperCase() + ext.slice(1);
                        }else{
                            ext = "." + ext;
                        }

                        var textclass = "normal object";
                        if (enableBetaFilename){
                            decodedName = ao_module_codec.decodeUmFilename(displayName);
                            if (decodedName != displayName){
                                textclass = "um filename";
                                displayName = decodedName;
                            }
                            filename = ao_module_codec.decodeUmFilename(filename);
                        }
                        
                        if (displayName.length > 20){
                            displayName = displayName.substring(0,20) + "...";
                        }

                       
                        $("#fileList").append(`
                        <div class="ts card fileObject ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:20em;  margin-top:0px !important;  overflow:hidden;">
                            <div class="image" style="text-align: center !important;">
                                <img draggable="true"ondragstart="disableDrag(event);" style="height: 148px; width: 148px; display:inline-block;" src="${imagePath}">
                            </div>
                            <div class="content">
                                <div class="header ${currentTheme} ${textclass}" title="${filename}" style="text-overflow: ellipsis; font-size: 100%">${displayName} ${shareicon}</div>
                                <div class="meta ${currentTheme}">
                                    <div>${ext}</div>
                                </div>
                                <div class="description ${currentTheme}">
                                    ${Displaysize}
                                </div>
                            </div>
                        </div>
                        `);
                    }
                }
                if (files.length == 0){
                    $("#fileList").hide();
                }else{
                    $("#fileList").show();
                }

                bindFileObjectEvents();
                currentFilelist.sort();
                //Update the filelist hash
                enableAutoRefresh = false;
                getDirHash(function(hash){
                    currentPathHash = hash;
                    enableAutoRefresh = true;
                });

                //If viewmode is grid, load file thumbnails
                if (viewMode == "grid"){
                    startThumbnailLoader();
                }

                if (callback !== undefined){
                    callback();
                }
            }

            function startThumbnailLoader(){
                let path = currentPath;
                let protocol = "wss://";
                if (location.protocol !== 'https:') {
                    protocol = "ws://";
                }

                var port = window.location.port;
                if (window.location.port == ""){
                    if (location.protocol !== 'https:') {
                        port = "80";
                    }else{
                        port = "443";
                    }
                }

                thumbRenderWebSocket = new WebSocket(protocol + window.location.hostname + ":" + port + "/system/file_system/handleCacheRender?folder=" + path);

                thumbRenderWebSocket.onopen = function(e) {

                };

                thumbRenderWebSocket.onmessage = function(event) {
                    //Find the correct file in the current directory and place its image
                    if (path == currentPath){
                        var thumbData = JSON.parse(event.data);
                        $(".fileObject").each(function(){
                            if (thumbData[1].length > 0){
                                //Extract image type from base64
                                let ext = getThumbnailExtensionFromBase64String(thumbData[1]);
                                //Put the image data to image element
                                if ($(this).attr("filename") == thumbData[0]){
                                    $(this).find("img").attr("src","data:image/" + ext + ";base64," + thumbData[1]);
                                }
                            }
                          
                        });
                    }
                };


                thumbRenderWebSocket.onclose = function(event) {
                    //Transfer ended
                };

                thumbRenderWebSocket.onerror = function(error) {
                    //Cache render on websocket failed. Fallback to AJAX request
                    console.log("Cannot connect to WebSocket cache renderer. Falling back to AJAX request");
                    startFallbackThumbnailLoader();
                };
            }

            function getThumbnailExtensionFromBase64String(base64String){
                let tid = base64String.charAt(0);
                let ext = "jpg";
                if (tid == "i"){
                    ext = "png";
                }else if (tid == "R"){
                    ext = "gif";
                }else if (tid == "U"){
                    ext = "webp";
                }

                return ext;
            }

            
            function startFallbackThumbnailLoader(){
                let startingCurrentDir = currentPath;
                let fallbackRenderList = [];
                $(".fileObject").each(function(){
                    let filepath = $(this).attr("filepath");
                    let targetDOM = $(this);
                    if ($(this).attr("type") != "folder"){
                        fallbackRenderList.push([filepath, targetDOM]);
                    }
                });

                doThumbnailSequentialLoading(startingCurrentDir, fallbackRenderList, 0);
            }

            function doThumbnailSequentialLoading(startingCurrentDir, renderlist, index){
                if (renderlist[index] == undefined){
                    //Starting index out of range
                    return;
                }
                let filepath = renderlist[index][0];
                let targetDOM = renderlist[index][1];
                $.ajax({
                    url: "../../system/file_system/loadThumbnail",
                    data: {vpath: filepath},
                    success: function(data){
                        if (startingCurrentDir == currentPath){
                            //User still not changed page
                            let ext = getThumbnailExtensionFromBase64String(data);
                            if (data.error == undefined && typeof data != "undefined" && data != ""){
                                $(targetDOM).find("img").attr("src","data:image/" + ext + ";base64," + data);
                            }
                            
                            if (index + 1 < renderlist.length){
                                doThumbnailSequentialLoading(startingCurrentDir, renderlist, index + 1);
                            }
                        }else{
                            //User changed page. End the sequence
                        }
                    }
                });
            }

            //Make an div not draggable
            function disableDrag(event){
                event.preventDefault();
                event.stopPropagation();
            }

            //Make fileObject draggable
            function onFileObjectDragStart(object, event){
                if ((ctrlHold) &&  $(object).hasClass("selected") == false){
                    $(object).addClass("selected");
                }else if ($(object).hasClass("selected") == false){
                    $(".fileObject.selected").removeClass("selected");
                    $(object).addClass("selected");
                }

                var fileList = [];
                $(".selected.fileObject").each(function(){
                    var filename = $(this).attr('filename');
                    var filepath = $(this).attr('filepath');
                    var sourceSystemUUID = systemUUID;
                    //Extra information is passed in due to the need for cross cluster communication in the future
                    fileList.push({
                        filename: filename,
                        filepath: filepath,
                        hostUUID: sourceSystemUUID
                    });
                });
               
                event.dataTransfer.setData("filedata", JSON.stringify(fileList));
            }

            //Bind onclicke events for fileObjects
            var lastClickedFileID = 0;
            function bindFileObjectEvents(){
                $(".fileObject").off("click").on('click',function(evt){
                    if (!ctrlHold && isMobile && !ctrlHold){
                        //If on mobile, click means open (only on not muilti selection mode)
                        openthis(this,evt);
                        return
                    }

                    if (ctrlHold == true){
                        if ($(this).hasClass("selected")){
                            $(this).removeClass("selected");
                        }else{
                            $(this).addClass("selected");
                        }
                       
                        lastClickedFileID = parseInt($(this).attr("fileid"));
                    }else if (shiftHold == true){
                        //Select everything in range lastClicked to this
                        var thisFileID = $(this).attr("fileid");
                        let start = parseInt(thisFileID);
                        let end = parseInt(lastClickedFileID);
                        if (start > end){
                            start = parseInt(lastClickedFileID);
                            end = parseInt(thisFileID);
                        }
                        //Select all fileObject in range.
                        $(".fileObject").each(function(){
                            let currentItemFileID = $(this).attr('fileid');
                            currentItemFileID = currentItemFileID - 0;
                            if (currentItemFileID >= start && currentItemFileID <= end){
                                $(this).addClass("selected");
                            }
                        });

                    }else{
                        //Nothing is pressed. Deselect everything and add this only
                        $(".fileObject.selected").removeClass("selected");
                        $(this).addClass("selected");
                        lastClickedFileID = $(this).attr("fileID");
                    }

                    if ($(".fileObject.selected").length != 1){
                        //Multiple object selected
                        $(".singleObjectOnly").addClass("disabled");
                        $(".singleObjectOnlyHide").hide();
                    }else{
                        //Single object
                        $(".singleObjectOnly").removeClass("disabled");
                        $(".singleObjectOnlyHide").show();
                    }

                });

                //Bind right click select on items
                $(".fileObject").off("mousedown").on("mousedown",function(evt){
                    if (evt.which == 3){
                        //Right click on this file
                        if ($(this).hasClass('selected') == false){
                            $(".fileObject.selected").removeClass("selected");
                            $(this).addClass("selected");
                        }
                    }
                });

                //This function calculate and offset the context menu to not go out of the window area
                function calculateContextMenuOffsets(evt){
                    var defaultLeftPost = evt.pageX;
                    var defaultTopPost =evt.pageY;
                    
                    if (evt.pageX > window.innerWidth / 2){
                        defaultLeftPost = evt.pageX - $("#contextmenu").width() + "px";
                    }

                    if (evt.pageY > window.innerHeight / 2){
                        defaultTopPost = evt.pageY - $("#contextmenu").height() + "px";
                    }

                    $("#contextmenu").css({
                        left: defaultLeftPost,
                        top: defaultTopPost
                    });

                }  

                //Rightclick on a file object
                $(".fileObject").off("contextmenu").on("contextmenu", function(evt){
                    evt.preventDefault();
                   
                    if (isMobile){
                        //Firefox Mobile. Fix select with context menu not working bug
                        var selectedObject = $(evt.target);
                        
                       if ($(selectedObject).hasClass("fileObject")){
                           if (!ctrlHold){
                                $(".fileObject.selected").removeClass("selected");
                           }
                            $(selectedObject).addClass("selected");
                       }else{
                           //Uptrace 5 layers for fileObject
                           for (var i = 0; i < 5; i++){
                                if ($(selectedObject).hasClass("fileObject") == false){
                                    selectedObject = $(selectedObject).parent();
                                }else{
                                    break;
                                }
                           }

                           if (!ctrlHold){
                                $(".fileObject.selected").removeClass("selected");
                           }
                            $(selectedObject).addClass("selected");
                       }

                    }


                    calculateContextMenuOffsets(evt);

                    //Show all options by defaults
                    $("#contextmenu").find(".item").show();
                    $("#contextmenu").find(".vroothide").show();
                    $("#contextmenu").find(".noSelectionOnly").hide();
                    $("#contextmenu").find(".vrootonly").hide();
                    
                    //Hide backup manual
                    $("#contextmenu").find(".backuponly").hide();

                    //Check if this is folder or file. Replace the suitable selections
                    if ($(this).attr("type") == "folder"){
                        //Use folder mode
                        $("#contextmenu").find(".folderonly").show();
                        $("#contextmenu").find(".fileonly").hide();
                    }else{ 
                        //Use file mode
                        $("#contextmenu").find(".folderonly").hide();
                        $("#contextmenu").find(".fileonly").show();
                    }

                    if (searchMode == true){
                        $("#contextmenu").find(".shareonly").show();
                    }else{
                        $("#contextmenu").find(".shareonly").hide();
                    }

                    $("#contextmenu").addClass("visible");
                    //Handle CSS offset of the contextmenu
                    if ($("#contextmenu").offset().top < 0){
                        $("#contextmenu").css("top","0px");
                    }else if($("#contextmenu").offset().top + $("#contextmenu").height() > window.innerHeight){
                        $("#contextmenu").css("top",window.innerHeight - $("#contextmenu").height() + "px");
                    }

                    if (isMobile){
                        $("#contextmenu").find(".mobileonly").show();
                    }else{
                        $("#contextmenu").find(".mobileonly").hide();
                    }

                });

                //Right click on empty space of the file selector
               $("#folderView").off("contextmenu").on("contextmenu", function(e){
                   if ($(e.target).attr("id") == "folderView" || $(e.target).attr("id") == "fileList" || $(e.target).attr("id") == "folderList"){
                       //Context menu on the empty space of the folder / file list
                        e.preventDefault();
                        $("#contextmenu").find(".item").hide();
                        $("#contextmenu").find(".noSelectionOnly").show();
                        $("#contextmenu").find(".allowNoSelection").show();
                        $("#contextmenu").find(".vroothide").show();

                        //Calculate the position of the context menu
                        calculateContextMenuOffsets(e);

                        //Show context menu
                        $("#contextmenu").addClass("visible");
                        //Handle CSS offset of the contextmenu
                        if ($("#contextmenu").offset().top < 0){
                            $("#contextmenu").css("top","0px");
                        }else if($("#contextmenu").offset().top + $("#contextmenu").height() > window.innerHeight){
                            $("#contextmenu").css("top",window.innerHeight - $("#contextmenu").height() + "px");
                        }

                   }
               });

               //Handle right click on storage roots
               $("#storageroot").off("contextmenu").on("contextmenu", function(e){
                    if ($(e.target).is("i")){
                        e.target = e.target.parentElement;
                    }

                    $("#storageroot").find(".dir.item").each(function(){
                        if ($(this).attr("rootname") != undefined){
                            $(this).removeClass("active");
                        }
                    });

                    if ($(e.target).attr("rootname") != undefined){
                        //Correct one. Show vroot functions
                        e.preventDefault();
                        var rootname = $(e.target).attr("rootname");
                        var containBackup = $(e.target).attr("contain-backup") == "true";
                        $(e.target).addClass("active");
                        $("#contextmenu").find(".item").hide();
                        $("#contextmenu").find(".vroothide").hide();
                        $("#contextmenu").find(".vrootonly").show();

                        //Check if this is a backup drive
                        if (containBackup == true){
                            $("#contextmenu").find(".backuponly").show();
                        }else{
                            $("#contextmenu").find(".backuponly").hide();
                        }

                        //Show context menu
                        calculateContextMenuOffsets(e);

                        $("#contextmenu").addClass("visible");
                        //Handle CSS offset of the contextmenu
                        if ($("#contextmenu").offset().top < 0){
                            $("#contextmenu").css("top","0px");
                        }else if($("#contextmenu").offset().top + $("#contextmenu").height() > window.innerHeight){
                            $("#contextmenu").css("top",window.innerHeight - $("#contextmenu").height() + "px");
                        }
                    }
               });

               $(document).on("click",function(evt){
                   $(".contextmenu").removeClass("visible");
               });
            }

            //Change the current view mode
            function changeViewMode(object){
                var targetMode = $(object).attr("mode");
                viewMode = targetMode;
                listDirectory(currentPath);
                updateViewmodeButtons();
                setPreference("file_explorer/listmode",targetMode)
            }

            function updateViewmodeButtons(){
                $(".videmode").removeClass('disabled');
                $(".videmode").each(function(){
                    if ($(this).attr("mode") == viewMode){
                        $(this).addClass("disabled");
                    }
                });
            }

            function previosPath(){
                //Remove the current directory from history
                if (viewHistory.length == 0){
                    //This is already the first page
                    return;
                }
                var previousPath = viewHistory.pop();
                listDirectory(previousPath, undefined, false);
            }

            function parentDir(){
                //If under searchmode, parentDir go back to the currentPath
                if (searchMode){
                    hideSearchBar();
                    return;
                }
                //Check if there are any parent dir for this path
                if (checkIfParentDirExists(currentPath)){
                    //There are parent path. Get it from currentPath
                    pathInfo = currentPath.split("/");
                    pathInfo.pop();
                    var parentFolderName = pathInfo.pop();
                    parentPath = pathInfo.join("/") + "/"
                    
                    //List the parentDir
                    listDirectory(parentPath, function(){
                        focusFileObject(parentFolderName);
                    });
                   
                }

            }

            //Move the page focus to the given fileobject
            function focusFileObject(targetFileName){
                $(".fileObject").each(function(){
                    if ($(this).attr("filename") == targetFileName){
                        $(this).addClass("selected");
                        scrollToFileLocation(this);
                    }
                });
            }

            function scrollToFileLocation(DOMElement){
                if (DOMElement === undefined || $(DOMElement).offset() == undefined){
                    //DOM Element no longer exists
                    return;
                }
                //Trying to vertically align the directory from its parent list
                let topPos = $("#folderView").scrollTop() + $(DOMElement).offset().top - $("#folderView").height()/2 - $(DOMElement).height()/2 - 28;
                window.debug = $(DOMElement);
                $("#folderView").stop().animate({
                    scrollTop: topPos
                }, 300);
            }

            function loadListModeFromDB(callback = undefined){
                 //Get list mode from storage
                 loadPreference("file_explorer/listmode",function(data){
                    if (data != "" && data.error === undefined){
                        viewMode = data;
                        updateViewmodeButtons();
                    }

                    if (callback !== undefined){
                        callback();
                    }
                });
            }

            function rootDir(){
                //Go to the root dir of the current path
                var rootDir = currentPath.split("/").shift();
                rootDir = rootDir + "/";
                listDirectory(rootDir);
            }

            function showEditCurrentPathInput(e){
                e.preventDefault();
                $("#pathInputField").find("input").val(currentPath);
                if (isMobile){
                    $("#mobilePathDisplay").hide();
                    $(".mobilePathDisplayWrapper").append($("#pathInputField"));
                    $("#pathInputField").find("input").css("width", window.innerWidth - 54 + "px");
                }else{
                    //Desktop
                    $("#pathInputField").find("input").css("width", $("#pathDisplayField").width() - 24+ "px");
                    $("#pathDisplayField").hide();
                }
                $("#pathInputField").show();
            }

            function handleOpenPathKeydown(e){
                if (e.key == "enter" | e.keyCode == 13){
                    //Etner pressed
                    openEnteredPath($("#pathInputField").find("button"));
                }
            }
            function openEnteredPath(object){
                var newPath = $(object).parent().find("input").val();
                //Filter out the path
                newPath = newPath.split("\\").join("/");
                listDirectory(newPath);
                hideManualOpenPathInput();
            }

            function hideManualOpenPathInput(){
                $("#pathInputField").hide();
                if (isMobile){
                    $("#mobilePathDisplay").show();
                }else{
                    $("#pathDisplayField").show();
                }
            }

            function checkIfParentDirExists(path){
                if (path.includes("/")){
                    pathInfo = path.split("/");
                    if (pathInfo[1] == ""){
                        return false;
                    }else{
                        return true;
                    }
                }else{
                    return false;
                }
            }

            function getDirHash(callback){
                $.ajax({
                    url: "../../system/file_system/listDirHash",
                    data: {dir: currentPath},
                    success: function(data){
                        if (data.error !== undefined){
                            if (data.error == "Invalid dir given"){
                                //Storage has been unmounted. Back to parent
                                var pdir = currentPath.split("/");
                                pdir.pop();pdir.pop();
                                pdir = pdir.join("/");
                                currentPath = pdir;
                                listDirectory(currentPath, function(){
                                    window.location.reload();
                                });
                                return;
                            }
                        }
                        callback(data);
                    }
                })
            }

            function openHomeDir(){
                listDirectory("user:/", function(){
                    hideManualOpenPathInput();
                    hideSearchBar();
                })
            }

            //=================================== FILE OPERATIONS ========================

            function refreshList(){
                if (searchMode == true){
                    //Refresh the search result
                    if ($("#searchInput").val().length >  0){
                        handleSearch();
                    }
                    return;
                }

                shiftHold = false;
                ctrlHold = false;
                updateCtrlDisplay();
                let currentScrollTop = JSON.parse(JSON.stringify($("#folderView").scrollTop()));
                listDirectory(currentPath, function(){
                    //Scroll back to the original height
                    $("#folderView").scrollTop(currentScrollTop);
                });
            }

           function zipFile(){
                $(".popup").fadeOut('fast');
                var zippingFiles = [];
                $(".fileObject.selected").each(function(){
                    var filepath = $(this).attr("filepath");
                    zippingFiles.push(filepath);
                });

                console.log(zippingFiles);

                //Request to create a zip file, named with the parent dir name
                var oprConfig = {
                    opr: "zip",
                    src: zippingFiles,
                    dest: currentPath,
                    overwriteMode: "overwrite",
                    callbackWindowID: ao_module_windowID,
                    callbackFunction: `callRefresh("${currentPath}")`
                }
                var configHash = encodeURIComponent(JSON.stringify(oprConfig));
                var title = applocale.getString("opr/zip/zipping","Zipping ") +  zippingFiles.length;
                if (fileList.length > 1){
                    title += applocale.getString("opr/zip/files", " files");
                }else{
                    title += applocale.getString("opr/zip/file"," file");
                }
                parent.newFloatWindow({
                    url: "SystemAO/file_system/file_operation.html#" + configHash,
                    width: 400,
                    height: 220,
                    appicon: "SystemAO/file_system/img/selector.png",
                    title: title
                });
           }

            let renameFileObjects = [];
            function rename(){
                $(".popup").fadeOut('fast');
                renameFileObjects = [];
                var filenames = [];
                $(".fileObject.selected").each(function(){
                    var fileObjectType = $(this).attr("type");
                    let fileObject = {
                        filename: $(this).attr('filename'),
                        filepath: $(this).attr("filepath"),
                        filetype: fileObjectType
                    }
                    renameFileObjects.push(JSON.parse(JSON.stringify(fileObject)));
                    filenames.push($(this).attr('filename'));
                });
                var oldname = "unknown file.txt";
                if (renameFileObjects.length == 0){
                    return;
                }else if (renameFileObjects.length > 0){
                    $("#renameBox").find(".multifileWarning").hide();
                    oldname = filenames[0];
                }
                $("#renameBox").find(".orgfn").val(oldname);
                $("#renameBox").find(".newfn").val(oldname);
                showPopupWrapper();
                $("#renameBox").fadeIn(100);
            }

            function confirmRename(){
                var oldName = $("#renameBox").find(".orgfn").val();
                var newName = $("#renameBox").find(".newfn").val();
                if (newName == oldName){
                    msgbox("remove",applocale.getString("message/newFilenameIdentical", "New filename is identical to the original filename."));
                    $("#renameBox").fadeOut(100);
                    $(".popupWrapper").fadeOut(100);
                    return;
                }
                var newNameWithoutExt = newName;
                var newnameExt = "";
                if (newName.includes(".")){
                    tmp = newName.split(".");
                    newnameExt = tmp.pop();
                    newNameWithoutExt = tmp.join(".");
                }

                var counter = 0;
                var srclist = [];
                var newnamelist = [];

                for (var i =0; i < renameFileObjects.length; i++){
                    var thisFilepath = renameFileObjects[i].filepath;
                    var thisFiletype = renameFileObjects[i].filetype;
                    var thisFilename = renameFileObjects[i].filename;
                    
                    var newFilename = newName;
                    if ( i > 0){
                        if (thisFiletype == "file"){
                            var thisFileExt = thisFilename.split(".").pop();
                            newFilename = newNameWithoutExt + "(" + i + ")." + thisFileExt;
                        }else if (thisFiletype == "folder"){
                            newFilename = newNameWithoutExt + "(" + i + ")";
                        }
                    }
                    srclist.push(thisFilepath);
                    newnamelist.push(newFilename);
                   
                }
                console.log(srclist, newnamelist);
                //Send the request to serverside
                requestCSRFToken(function(token){
                    $.ajax({
                        url: "../../system/file_system/fileOpr",
                        method: "POST",
                        data: {opr: "rename", src: JSON.stringify(srclist), new: JSON.stringify(newnamelist), csrft: token},
                        success: function(data){
                            if (data.error !== undefined){
                                msgbox("remove",data.error);
                            }else{
                                refreshList();
                                msgbox("checkmark",applocale.getString("message/rename/success", "Rename suceed"));
                            }
                            $("#renameBox").fadeOut(100);
                            $(".popupWrapper").fadeOut(100);
                        },
                        error: function(){
                            $("#renameBox").fadeOut(100);
                            $(".popupWrapper").fadeOut(100);
                        }
                    });
                    renameFileObjects = [];
                });
               
                hideAllPopupWindows();
            }

            function changeOverwriteRule(mode, doPasteAgain=false){
                switch (mode){
                    case 0:
                        overwriteMode = "overwrite";
                        break;
                    case 1:
                        overwriteMode = "skip";
                        break;
                    case 2:
                        overwriteMode = "keep";
                        break;
                    default:
                    overwriteMode = "keep";
                }

                if (doPasteAgain){
                    //Initiate paste without checking and close the overwritemode selector
                    paste(undefined, true);
                    $("#overwriteModeSelection").fadeOut(100);
                }
            }


            function copy(){
                cutMode = false;
                clipboard = [];
                if ($(".fileObject.selected").length == 0){
                    return;
                }
                $(".fileObject.selected").each(function(){
                    var thisFilepath = $(this).attr("filepath");
                    clipboard.push(thisFilepath);
                });
                if (useLocalstorage){
                    localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
                    localStorage.setItem("ao/file_system/cutmode","false");
                }
                msgbox("copy",clipboard.length + applocale.getString("message/copy/success", " objects copied."))
            }

            function cut(){
                cutMode = true;
                clipboard = [];
                if ($(".fileObject.selected").length == 0){
                    return;
                }
                $(".fileObject.selected").each(function(){
                    var thisFilepath = $(this).attr("filepath");
                    clipboard.push(thisFilepath);
                });
                if (useLocalstorage){
                    localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
                    localStorage.setItem("ao/file_system/cutmode","true");
                }
                msgbox("cut",clipboard.length + applocale.getString("message/move/success", " objects ready to be moved."))
            }

            function paste(redirectPasteTarget="", nocheck=false){
                let thisOprCutMode = cutMode;
                let fileList = clipboard;
                let targetDir = currentPath;
                if (redirectPasteTarget != ""){
                    //Allow redirection of paste target if necessary
                    targetDir = redirectPasteTarget;
                }
                if (useLocalstorage){
                    //There are localStorage. Always use localStorage if exists.
                    var crossFrameClipboard = localStorage.getItem("ao/file_system/clipboard");
                    var useCutMode = localStorage.getItem("ao/file_system/cutmode");
                    if (crossFrameClipboard !== "" && crossFrameClipboard !== undefined && crossFrameClipboard !== null){
                        fileList = JSON.parse(crossFrameClipboard);
                    }
                    if (useCutMode !== "" && useCutMode !== undefined && useCutMode !== null){
                        thisOprCutMode = (useCutMode == "true");
                    }
                }
                if (fileList.length == 0){
                    //There are nothing to paste
                    msgbox("question",applocale.getString("message/paste/nothing", "There are nothing to paste."))
                    return;
                }
                //console.log(fileList,JSON.stringify(fileList));
                if (thisOprCutMode == true){
                    //Cut and paste
                    $.ajax({
                        type: 'POST',
                        url: `../../system/file_system/validateFileOpr`,
                        data: {src: JSON.stringify(fileList), dest: targetDir},
                        success: function(data){
                           if (!nocheck && data.length > 0){
                               //There are problem with the copy target. Pop up overwrite rule selector
                                showDuplicateHandler(data);
                           }else{
                               //OK!
                               //Clear clipboard settings
                               localStorage.setItem("ao/file_system/clipboard", "");
                               clipboard = "";

                               //Stsart operations
                               if (!ao_module_virtualDesktop){
                                   //Not under desktop mode. Use direct copy API
                                   requestCSRFToken(function(token){
                                        $.ajax({
                                            type: 'POST',
                                            url: `../../system/file_system/fileOpr`,
                                            data: {opr: "move" ,src: JSON.stringify(fileList), dest: targetDir,existsresp: overwriteMode, csrft: token},
                                            success: function(data){
                                                if (data.error !== undefined){
                                                    msgbox("remove",data.error);
                                                }else{
                                                    //OK
                                                    msgbox("checkmark",fileList.length + applocale.getString("message/move/success", " objects moved."))
                                                    refreshList();
                                                }
                                                hideAllPopupWindows();
                                            }
                                        });
                                   });
                                   
                               }else{
                                    //Pass the request to operation handler
                                    var oprConfig = {
                                        opr: "move",
                                        src: fileList,
                                        dest: targetDir,
                                        overwriteMode: overwriteMode,
                                        callbackWindowID: ao_module_windowID,
                                        callbackFunction: `callRefresh("${targetDir}")`
                                    }
                                    var configHash = encodeURIComponent(JSON.stringify(oprConfig));
                                    var title = "Moving " + fileList.length;
                                    if (fileList.length > 1){
                                        title += " files";
                                    }else{
                                        title += " file";
                                    }
                                    parent.newFloatWindow({
                                        url: "SystemAO/file_system/file_operation.html#" + configHash,
                                        width: 400,
                                        height: 220,
                                        appicon: "SystemAO/file_system/img/selector.png",
                                        title: title
                                    });
                                    hideAllPopupWindows();
                               }
                           }
                        }
                    });
                }else{
                    //Copy and paste
                    //Check if the file list is OK for continue without the need for overwrite
                    $.ajax({
                        type: 'POST',
                        url: `../../system/file_system/validateFileOpr`,
                        data: {src: JSON.stringify(fileList), dest: targetDir},
                        success: function(data){
                           if (!nocheck && data.length > 0){
                               //There are problem with the copy target. Pop up overwrite rule selector
                                showDuplicateHandler(data);
                           }else{
                               //OK!
                               if (!ao_module_virtualDesktop){
                                    requestCSRFToken(function(token){
                                        $.ajax({
                                            type: 'POST',
                                            url: `../../system/file_system/fileOpr`,
                                            data: {opr: "copy" ,src: JSON.stringify(fileList), dest: targetDir,existsresp: overwriteMode, csrft: token},
                                            success: function(data){
                                                if (data.error !== undefined){
                                                    msgbox("remove",data.error);
                                                }else{
                                                    //OK
                                                    msgbox("checkmark",fileList.length + applocale.getString("message/copy/success", " objects copied."))
                                                    refreshList();
                                                }
                                                hideAllPopupWindows();
                                            }
                                        });
                                    });
                                    
                               }else{
                                    //Pass the request to operation handler
                                     var oprConfig = {
                                        opr: "copy",
                                        src: fileList,
                                        dest: targetDir,
                                        overwriteMode: overwriteMode,
                                        callbackWindowID: ao_module_windowID,
                                        callbackFunction: `callRefresh("${targetDir}")`
                                    }
                                    var configHash = encodeURIComponent(JSON.stringify(oprConfig));
                                    var title = "Copying " + fileList.length;
                                    if (fileList.length > 1){
                                        title += " files";
                                    }else{
                                        title += " file";
                                    }
                                    parent.newFloatWindow({
                                        url: "SystemAO/file_system/file_operation.html#" + configHash,
                                        width: 400,
                                        height: 220,
                                        appicon: "SystemAO/file_system/img/selector.png",
                                        title: title
                                    });
                                    hideAllPopupWindows();
                               }
                               
                           }
                        }
                    });
                }
            }

            //Callback function for file operation display
            window.callRefresh = function(targetdir){
                console.log(currentPath, targetdir);
                if (currentPath == targetdir){
                    refreshList();
                }
            }

            //This action may duplicate files. Show handler
            function showDuplicateHandler(duplicateFileList){
                $(".popup").fadeOut(100);
                var duplicatedFileCounts = duplicateFileList.length;
                showPopupWrapper();
                $("#overwriteModeSelection").fadeIn(100);
                $("#overwriteModeSelection").find(".owm-fc").text(duplicatedFileCounts);
                var srcpath = duplicateFileList[0];
                srcpath = srcpath.split("/");
                srcpath.pop();
                srcpath = srcpath.join("/");
                $("#overwriteModeSelection").find(".owm-srcdir").text(srcpath);
                $("#overwriteModeSelection").find(".owm-destdir").text(currentPath);
            }

            //Force delete. Use normal delete fucntion if you want to move things to recycle bin instead.
            let forceDeleteList = [];
            function forceDelete(confirmed=false){
                if (confirmed == false){
                    //Show confirm box
                    let deletePendingList = [];
                    var listObject = $("#forceDeleteConfirmBox").find(".deleteFilelist")[0];
                    $(listObject).html("");
                    $(".selected.fileObject").each(function(data){
                        var thispath = $(this).attr("filepath");
                        var thisfilename = $(this).attr("filename");
                        var ext = thisfilename.split(".").pop();
                        var icon = ao_module_utils.getIconFromExt(ext);
                        deletePendingList.push(thispath);
                        $(listObject).append(`<div class="item ${currentTheme}" ><span style="display:inline-block;">${thisfilename}</span></div>`);
                    });
                    showPopupWrapper();
                    $("#forceDeleteConfirmBox").fadeIn(100);
                    forceDeleteList = deletePendingList;
                }else{
                    //Start force delete function
                    $("#forceDeleteConfirmBox").fadeOut(100);
                    let fdlistLength = forceDeleteList.length;
                    requestCSRFToken(function(token){
                        $.ajax({
                            url: "../../system/file_system/fileOpr",
                            method:"POST",
                            data: {opr: "delete", src: JSON.stringify(forceDeleteList), csrft: token},
                            success: function(data){
                                if (data.error !== undefined){
                                    msgbox("caution",data.error);
                                }else{
                                    refreshList();
                                    msgbox("checkmark",fdlistLength + applocale.getString("message/remove/success", " objects removed."))
                                }
                                hideAllPopupWindows();
                            }
                        });
                        //Finishing up delete sequence
                        forceDeleteList = [];
                    });
                    
                }
            }

            let deleteFileList = [];
            function deleteFile(confirmed = false){
                if (!confirmed){
                    //Show the confirm dialog
                    $("#deleteConfirmBox").find(".deleteFilelist").html("");
                    $(".fileObject.selected").each(function(data){
                        var thisfilename = $(this).attr('filename');
                        var thisFilepath = $(this).attr('filepath');
                        deleteFileList.push(thisFilepath);
                        $("#deleteConfirmBox").find(".deleteFilelist").append(`<div class="item ${currentTheme}" ><span style="display:inline-block;">${thisfilename}</span></div>`);
                    });
                    if (deleteFileList.length == 0){
                        //No files selected
                        return;
                    }else{
                        //File selected. Continue to delete
                        showPopupWrapper();
                        $("#deleteConfirmBox").fadeIn(100);
                    }
                }else{
                    //Continue to delete files
                    let fdlistLength = deleteFileList.length;
                    requestCSRFToken(function(token){
                        $.ajax({
                            url: "../../system/file_system/fileOpr",
                            method:"POST",
                            data: {opr: "recycle", src: JSON.stringify(deleteFileList), csrft: token},
                            success: function(data){
                                if (data.error !== undefined){
                                    msgbox("caution",data.error);
                                }else{
                                    refreshList();
                                    msgbox("checkmark",fdlistLength + applocale.getString("message/recycle/success", " objects moved to trash bin."))
                                }

                                if (currentPath == "user:/"){
                                    //Reload the User root folder list
                                    initRootDirs();
                                }
                            }
                        });
                        console.log(deleteFileList);
                        deleteFileList = [];
                        hideAllPopupWindows();
                    });
                   
                }
            }

            function cancelDelete(){
                deleteFileList=[];
                
            }

            function cancelForceDelete(){
                $("#forceDeleteConfirmBox").fadeOut(100);
                forceDeleteList = [];
            }

            function upload(){
                var input = document.createElement('input');
                input.type = 'file';
                input.multiple = true;
                input.onchange = e => { 
                    var files = e.target.files; 
                    msgbox("upload",applocale.getString("message/upload/started", "Upload Started"));
                    for (var i = 0; i < files.length; i++){
                        uploadFile(files[i]);
                    }
                }
                input.click();
            }


            function updatePathDisplay(path){
                var pathInfo = path.split("/");
                var vdID = pathInfo[0];
                //As path always end with /, pop the empty pathinfo from array
                pathInfo.pop();
                var l = pathInfo.length;
                //Append the starting vdir
                $(".pathDisplay").html("");
                $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="rootDir();"><i class="folder icon"></i> ${vdID}</div>`);
                $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
                //console.log(pathInfo);
                if (l > 3){
                    //E.g. user:/Desktop/test/boo/ => Display as user:/.../test/boo/
                    $(".pathDisplay").append(`<div class="section ${currentTheme}">...</div>`);
                    $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
                    $(".pathDisplay").append(`<div class="section ${currentTheme} selectable"  onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
                    $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
                    $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
                }else if (l == 3){
                    $(".pathDisplay").append(`<div class="section ${currentTheme} selectable"  onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
                    $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
                    $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
                }else if (l == 2){
                    //E.g. user:/Desktop or user:/
                    $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[1], 80)}</div>`);
                }

                //Update the manual input field as well
                $("#pathInputField").find("input").val(path);
            }

            function shortenLongFoldername(name, maxchar = 20){
                var resultname = name;
                if (name.length > maxchar){
                    //Shorten it
                    var offset = parseInt((maxchar - 2) / 2);
                    resultname = name.substr(0, offset) + "..." + name.substr(name.length - offset)
                }

                return resultname
            }

            function getExtFromPath(path){
                if (path.includes(".") == false){
                    return "";
                }
                return path.split(".").pop();
            }

            function getFileObjectFromFID(fid){
                var targetFileObject = null;
                $(".fileObject").each(function(){
                    if ($(this).attr("fileid") == fid){
                        targetFileObject = $(this);
                    }
                });
                return targetFileObject;
            }

            function openViaButton(){
                let fileOpenList = [];
                let foldersToBeOpened=[];
                $(".fileObject.selected").each(function(){
                    let type = $(this).attr("type");
                    let filepath = $(this).attr("filepath");
                    if (type == "file"){
                        fileOpenList.push(filepath);
                    }else if (type == "folder"){
                        foldersToBeOpened.push(filepath);
                    }
                });
                //Open files
                openPathWithDefaultOpener(fileOpenList);

                //Open folders
                openFolderInNewWindow(foldersToBeOpened);
            }

            function openthis(object,evt=null){
                if (evt !== null){
                    evt.preventDefault();
                }
                var objType = $(object).attr("type");
                if ( objType == "file"){
                    //Open this file. Generate the access path from filepath
                    var filepath = $(object).attr("filepath");
                    //Only one path to be opened. Pass in as a single object array
                    openPathWithDefaultOpener([filepath]);
                }else if (objType == "folder"){
                    //Open this folder
                    var folderPath = $(object).attr('filepath');
                    listDirectory(folderPath, function(){
                        //Scroll to top of the list
                        $("#folderView").stop().finish().animate({
                            scrollTop: 0
                        }, 300);

                        if ($(object).hasClass('dir') && isMobile){
                            toggleSidebar();
                        }
                    });
                }else if (objType == "shortcut"){
                    //Load the shortcut information
                    
                    getShortcutInfo($(object).attr('filepath'), function(shortcutInfo){
                        /*
                            Shortcut Info format
                            0: Shortcut type
                            1: Shortcut Name
                            2: Shortcut target 
                            3: Shortcut icon image
                        */
                        if (shortcutInfo[0] == "module"){
                            //This is a module
                            if (ao_module_virtualDesktop){
                                //Open Module with VDI API
                                parent.openModule(shortcutInfo[2]);
                            }else{
                                //Open module in new tab
                                $.get("../../system/modules/getLaunchPara?module=" + shortcutInfo[2], function(data) {
                                    window.open("../../" + data.StartDir);
                                });
                            }
                        }else if (shortcutInfo[0] == "folder"){
                            //This is a folder
                            listDirectory(shortcutInfo[2]);
                        }else if (shortcutInfo[0] == "url"){
                            //This is a url shortcut
                            window.open(shortcutInfo[2]);
                        }
                        console.log(shortcutInfo);
                    });
                    
                    
                }

                //Check if this opened in sidebar and in mobile mode. Close sidebar if yes
               
            }

            /*
                Shortcut Info format
                0: Shortcut type
                1: Shortcut Name
                2: Shortcut target 
                3: Shortcut icon image
            */
            function getShortcutInfo(filepath, callback){
                $.get("../../media?file=" + filepath, function(data){
                    //This return the shortcut information. Split it and see what shortcut is this
                    data = data.split("\r\n").join("\n");
                    var shortcutInfo = data.trim().split("\n");
                    callback(shortcutInfo);
                });
            }

            //Download the selected files.
            function downloadFile(){
                var fileList = [];
                if ($(".fileObject.selected").length == 1 && $(".fileObject.selected").attr("type") == "file"){
                    //One file. Download directly.
                    var downloadURL = "../../media?file=" + encodeURIComponent($(".fileObject.selected").attr("filepath")) + "&download=true";
                    var filename = $(".fileObject.selected").attr("filename");
                    generateDownloadFromURL(downloadURL,escape(filename));
                }else if ($(".fileObject.selected").length > 1 || ($(".fileObject.selected").length == 1 && $(".fileObject.selected").attr("type") == "folder")){
                    //Do zip and download for multiple files
                    $(".fileObject.selected").each(function(){
                        fileList.push($(this).attr("filepath"));
                    });
                    console.log("Zipping: ", fileList);

                    //Add a display for file compression
                    var fileCount = $(".fileObject.selected").length;
                    
                    var displayString = applocale.getString("opr/zip/zipping", "Zipping ") + fileCount + applocale.getString("opr/zip/files", " files");
                    if (fileCount == 1){
                        //Use the filename as task name
                        displayString = applocale.getString("opr/zip/zipping", "Zipping ") + $(".fileObject.selected").attr("filename");
                    }
         
                    var taskUUID = appendUploadFileItem(displayString, -1);
                    $("#uploadTab").show();

                    //Set the progress bar to intermediate mode
                    let targetTaskDisplayObject =  getUploadTaskByID(taskUUID);
                    targetTaskDisplayObject.find(".progress").addClass("preparing");

                    //Zip the file or folder
                    $.ajax({
                        url: "../../system/file_system/zipHandler",
                        data: {opr: "tmpzip", src: JSON.stringify(fileList), dest: ""},
                        method: "POST",
                        success: function(data){
                            if (data.error !== undefined){
                                //Error
                                targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("negative");
                               
                                msgbox("remove",data.error);
                            }else{
                                //Zip completed.
                                targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("positive");

                                //Open the zip file
                                window.open("../../media?file=" + data + "&download=true");
                            }

                           
                            targetTaskDisplayObject.find(".bar").css("width", "100%");

                            //Hide the taskbar after 5 secs
                            setTimeout(function(){
                                //Fade out this task
                                $(targetTaskDisplayObject).fadeOut('fast',
                                    function(){
                                        $(this).remove();
                                        if ($(".uploadTask").length == 0){
                                            $("#uploadTab").hide();
                                        }
                                    }
                                );
                               
                            }, 3000);
                            
                        }, 
                        error: function(){
                            targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("negative");
                            targetTaskDisplayObject.find(".bar").css("width", "100%");
                            msgbox("remove",applocale.getString("message/zip/fail", "Zipping failed due to unknown reason"));

                            setTimeout(function(){
                                if ($(".uploadTask").length == 0){
                                    $("#uploadTab").hide();
                                }
                            }, 3000);
                        }
                    });
                    
                }else{
                    alert("No file selected!")
                }
                
            }

            //Create a new file
            function newfile(){
                $(".popup").fadeOut('fast');
                showPopupWrapper();
                $("#newFile").fadeIn('fast');
                $("#newFile").find(".duplicateWarning").hide();
                $("#createNewFileName").parent().removeClass("error");
                //Update the newfile list
                $("#newFile").find(".newfilelist").html("");
                requestCSRFToken(function(token){
                    $.ajax({
                        url: "../../system/file_system/newItem",
                        data: {csrft: token},
                        success: function(data){
                            if (data.error !== undefined){
                                return;
                            }
                            for (var i =0; i < data.length; i++){
                                var desc = data[i].Desc;
                                var ext = data[i].Ext;
                                var icon = ao_module_utils.getIconFromExt(ext);
                                $("#newFile").find(".newfilelist").append(`<div class="item newFileFormat" ext="${ext}"><i class="${icon} icon" style="margin-right:12px;"></i> ${desc}</div>`);
                            }
                            //Initialize the new file as txt
                            var filename = "newfile";
                            var finalFilename = filename; 
                            var i = 0;
                            while (currentFilelist.includes(finalFilename)){
                                finalFilename = finalFilename + "(" + i + ")";
                                i++;
                            }  
                            $("#createNewFileName").val(finalFilename + ".txt");

                            //Hook events for on click
                            $(".newFileFormat").off("click").on("click",function(data){
                                $(".newFileFormat").removeClass("selected");
                                $(this).addClass("selected");

                                //Parse the newfilename
                                var selectedExt = $(this).attr("ext");
                                var filename = "newfile";
                                var finalFilename = filename; 
                                var i = 0;
                                while (currentFilelist.includes(finalFilename)){
                                    finalFilename = finalFilename + "(" + i + ")";
                                    i++;
                                }  
                                $("#createNewFileName").val(filename + "." + selectedExt);
                            });
                        }
                    });
                });
            }

            function filePermission(){
                //Open file permission window
                if ($(".fileObject.selected").length > 0){
                    //Build the filelist
                    var fileList = [];
                    $(".fileObject.selected").each(function(){
                        var filepath = $(this).attr("filepath");
                        fileList.push(filepath);
                    });

                    var hashPassthrough = encodeURIComponent(JSON.stringify(fileList));

                    ao_module_newfw({
                        url: "SystemAO/file_system/file_permission.html#" + hashPassthrough,
                        width: 340,
                        height: 480,
                        appicon: "SystemAO/file_system/img/properties.png",
                        title: "File Permissions",
                    })
                }
            }

            function newFolder(confirmed = false){
                if (confirmed == false){
                    //Launch the dialog for newFolder
                    $(".popup").fadeOut(100);
                    $("#createNewFolder").val("");
                    $("#createNewFolder").parent().removeClass("error").removeClass("success");
                    $("#newFolder").find(".duplicateWarning").hide();
                    showPopupWrapper();
                    $("#newFolder").fadeIn(100);
                }else{
                    //Create new folder
                    var newFoldername = $("#createNewFolder").val();
                    if (newFoldername == ""){
                        $("#createNewFolder").parent().addClass("error");
                        return;
                    }
                    if (currentFilelist.includes(newFoldername)){
                        //Current filelist already contain a folder with the same name
                        $("#createNewFolder").parent().addClass("error");
                        $("#newFolder").find(".duplicateWarning").show();
                        return;
                    }
                    //OK to proceed.
                    $("#createNewFolder").parent().removeClass("error").addClass("success");
                    $("#newFolder").find(".duplicateWarning").hide();
                    requestCSRFToken(function(token){
                        $.ajax({
                            url: "../../system/file_system/newItem",
                            data: {type: "folder", src: currentPath, filename: newFoldername, csrft: token},
                            success: function(data){
                                if (data.error !== undefined){
                                    msgbox("remove", data.error);
                                }else{
                                    msgbox("checkmark",applocale.getString("message/newfolder/success", "New folder created."));
                                    refreshList();
                                }
                                $("#newFolder").fadeOut('fast');
                                hideAllPopupWindows();
                                if (currentPath == "user:/"){
                                    //Reload the User root folder list
                                    initRootDirs();
                                }
                            }
                        });
                    });
                    
                }
            }


            function confirmNewFile(){
                var filename = $("#createNewFileName").val();
                if (filename == ""){
                    //Filename not set
                    $("#createNewFileName").parent().addClass("error");
                    return;
                }else if(currentFilelist.includes(filename)){
                    //File with this name already exists
                    $("#createNewFileName").parent().addClass("error");
                    $("#newFile").find(".duplicateWarning").show();
                    return;
                }
                $("#createNewFileName").parent().removeClass("error");
                //Ok to proceed
                requestCSRFToken(function(token){
                    $.ajax({
                        url: "../../system/file_system/newItem",
                        data: {type: "file", src: currentPath, filename:filename,csrft: token},
                        success: function(data){
                            if (data.error !== undefined){
                                msgbox("remove",data.error);
                            }else{
                                msgbox("checkmark",filename + applocale.getString("message/newItem/success", " created."));
                                refreshList();
                            }
                        }
                    });
                });
                
                hideAllPopupWindows();
                $("#newFile").fadeOut('fast');
            }

            //Open File Location
            function openFileLocation(){
                var folders = [];
                $(".selected.fileObject").each(function(){
                    var thisFilepath = $(this).attr('filepath');
                    var thisFilename = $(this).attr('filename');
                    openPathInNewWindow(encodeURIComponent(JSON.stringify([{
                        filename: thisFilename,
                        filepath: thisFilepath
                    }])))
                });
                
            }

            //OpenWith dialog
            function openWith(){
                if ($(".selected.fileObject").length == 0){
                    msgbox("question",applocale.getString("message/nofileSelected", "No file selected"));
                    return;
                }
                //Get a list of modules and append it into the selection list
                $.get("../../system/modules/list",function(data){
                    if (data.error !== undefined){
                        console.log(data.error);
                    }else{
                        $("#openWithModuleList").html("");
                        for (var i =0; i < data.length; i++){
                            var thisModule = data[i];
                            var supportFW = `<div class="ts horizontal mini label"><i class="checkmark icon"></i>floatWindow Window</div>`;
                            var supportEmb = `<div class="ts horizontal mini label"><i class="checkmark icon"></i>Embedded Window</div>`;
                            if (!thisModule.SupportFW){
                                supportFW = "";
                            }
                            if (!thisModule.LaunchEmb){
                                supportEmb = "";
                            }
                            var launchInfo = encodeURIComponent(JSON.stringify(thisModule));
                            $("#openWithModuleList").append(`<div class="item selectable openWithModule" launchInfo="${launchInfo}" onclick="selectOpenWithModule(this, event);" ondblclick="selectOpenWithModule(this, event); openWithSelectedModule();">
                                <img class="ts avatar image" src="../../${thisModule.IconPath}">
                                <div class="content" style="padding-left:12px;">
                                    <div class="header">${thisModule.Name}</div>
                                    <div class="description">
                                        ${supportFW}
                                        ${supportEmb}
                                    </div>
                                </div>
                            </div>`);
                        }
                    }
                });
                $(".openWithModule.popupbuttons").addClass("disabled");

                if (!ao_module_virtualDesktop){
                    $("#openWith").find(".vdonly").hide();
                }
                showPopupWrapper();
                $("#openWith").fadeIn('fast');

            }

            //Functions for handling open with module selection and file opening
            function selectOpenWithModule(object, event){
                event.preventDefault();
                $(".openWithModule.popupbuttons").removeClass("disabled");
                $(".openWithModule.selected").removeClass("selected");
                $(object).addClass("selected");
            }

            function openWithSelectedModule(btn){
                if ($(btn).hasClass("disabled")){
                    return false;
                }
                var targetModuleInfo = JSON.parse(decodeURIComponent($(".openWithModule.selected").attr("launchInfo")));
                var targetObjects = $(".selected.fileObject");
                console.log(targetModuleInfo);

                //Phrase launch mode from the module info
                var launchURL = targetModuleInfo.StartDir
                var launchSize = [undefined, undefined];
                var iconPath = targetModuleInfo.IconPath;
                var title = targetModuleInfo.Name;
                if (targetModuleInfo.SupportEmb){
                    //Launch with embedded mode
                    launchURL = targetModuleInfo.LaunchEmb;
                    if (targetModuleInfo.InitEmbSize !== null){
                        launchSize = targetModuleInfo.InitEmbSize
                    }
                   
                }else if (targetModuleInfo.SupportFW){
                    //Launch with floatWindow mode
                    launchURL = targetModuleInfo.LaunchFWDir;
                    if (targetModuleInfo.InitFWSize !== null){
                        launchSize = targetModuleInfo.InitFWSize
                    }
                }else if (targetModuleInfo.StartDir !== ""){
                    //Launch with default mode

                }else{
                    msgbox("remove",applocale.getString("message/moduleNotSupport", "This module has no endpoint for opening a file."));
                    return;
                }   

                //Parse the filelist
                var filelist = [];
                $(targetObjects).each(function(){
                    var filename = $(this).attr("filename");
                    var filepath = $(this).attr("filepath");
                    filelist.push({
                        filename: filename,
                        filepath: filepath
                    });
                });

                fileHash = encodeURIComponent(JSON.stringify(filelist));
                if (ao_module_virtualDesktop){
                    //Open the target module in a new fw
                    parent.newFloatWindow({
                        url: launchURL + "#" + fileHash,
                        width: launchSize[0],
                        height: launchSize[1],
                        appicon: iconPath,
                        title: title
                    });
                }else{
                    //Redirect current window to the target module
                    window.location.href = "../../" + launchURL + "#" + fileHash;
                }

                hideAllPopupWindows();
            }

            function openFileWithModuleInNewTab(btn){
                if ($(btn).hasClass("disabled")){
                    return false;
                }
                var targetModuleInfo = JSON.parse(decodeURIComponent($(".openWithModule.selected").attr("launchInfo")));
                var targetObjects = $(".selected.fileObject");

                //Parse the filelist
                var filelist = [];
                $(targetObjects).each(function(){
                    var filename = $(this).attr("filename");
                    var filepath = $(this).attr("filepath");
                    filelist.push({
                        filename: filename,
                        filepath: filepath
                    });
                });

                //Directly passing the file information to the startdir
                fileHash = encodeURIComponent(JSON.stringify(filelist));
                window.open("../../" + targetModuleInfo.StartDir + "#" + fileHash);
                hideAllPopupWindows();
            }

            function openRawFileInFloatWindow(btn){
                //Directly open this (or more than one) files / folder in floatWindow
                var targetObjects = $(".selected.fileObject");
                $(targetObjects).each(function(){
                    if ($(this).attr("type") == "file"){
                        var launchURL = "media?file=" + $(this).attr('filepath');
                        parent.newFloatWindow({
                            url: launchURL,
                            appicon: "img/system/file.png",
                            title: $(this).attr('filename'),
                            "background-color": "#1f1f1f"
                        });
                    }else if ($(this).attr("type") == "folder"){
                        var launchURL = "SystemAO/file_system/file_explorer.html#" + $(this).attr("filepath");
                        parent.newFloatWindow({
                            url: launchURL,
                            appicon: "SystemAO/file_system/img/small_icon.png",
                            title: "File Manager - "  + $(this).attr('filename'),
                        });
                    }else{
                        //Not supported openeing type.
                        console.log("Failed to open file " + $(this).attr('filepath') + " . WIP")
                    }
                });
                hideAllPopupWindows();
            }

            //Open the filepaths in the given paramters
            function openPathWithDefaultOpener(filepaths){
                console.log("Opening: ", filepaths);
                for (var i =0; i < filepaths.length; i++){
                    let filepath = JSON.parse(JSON.stringify(filepaths[i]));
                    var ext = "." + filepath.split(".").pop();
                    $.ajax({
                        url: "../../system/modules/getDefault",
                        method: "GET",
                        data: {opr: "launch", ext: ext, mode: "launch"},
                        success: function(data){
                            if (data.error !== undefined){
                                //No default opener assigned. Launch it with opener selector
                                var url = "SystemAO/file_system/defaultOpener.html";
                                var icon = "SystemAO/file_system/img/opener.png";
                                var title = "Select an opener WebApp: "
                                var openFileList = [];
                                var openFileObject = {
                                    filepath: filepath,
                                    filename: filepath.split("/").pop()
                                }
                                openFileList.push(openFileObject);
                                var openParamter = encodeURIComponent(JSON.stringify(openFileObject));
                                var ao_module_virtualDesktop = !(!parent.isDesktopMode);
                                console.log(window.innerHeight/2 - 510/20);
                                if (ao_module_virtualDesktop){
                                    parent.newFloatWindow({
                                        url: url + "#" + openParamter,
                                        width: 320,
                                        height: 510,
                                        appicon: icon,
                                        title: title
                                    });
                                }else{
                                    url = "defaultOpener.html";
                                    window.open(url + "#" + openParamter);
                                }
                            }else{
                                //Assigned. Launch with given paramter
                                var url = data["StartDir"];
                                var size = [undefined, undefined];
                                var title = data["Name"];
                                var icon = "img/system/favicon.png";
                                if (data["IconPath"] != ""){
                                    icon = data["IconPath"];
                                }
                                //Use floatWindow if exists
                                if (data["SupportFW"] == true && data["LaunchFWDir"] != ""){
                                    url = data["LaunchFWDir"];
                                    if (data["InitFWSize"] !== null){
                                        size = data["InitFWSize"]
                                    }
                                }
                                //Use embedded mode if exists
                                if (data["SupportEmb"] == true && data["LaunchEmb"] != ""){
                                    url = data["LaunchEmb"];
                                    if (data["InitEmbSize"] !== null){
                                        size = data["InitEmbSize"]
                                    }
                                }

                                //Build open File Hash Data Format
                                var openFileList = [];
                                var openFileObject = {
                                    filepath: filepath,
                                    filename: filepath.split("/").pop()
                                }
                                openFileList.push(openFileObject);
                                var openParamter = encodeURIComponent(JSON.stringify(openFileList));
                                
                                //Add launch files info and launch floatWindow
                                var ao_module_virtualDesktop = !(!parent.isDesktopMode);
                                if (ao_module_virtualDesktop){
                                    parent.newFloatWindow({
                                        url: url + "#" + openParamter,
                                        width: size[0],
                                        height: size[1],
                                        appicon: icon,
                                        title: title
                                    });
                                }else{
                                    window.open("../../" + url + "#" + openParamter);
                                }
                                
                            }
                        }
                    });
                }
            }

            function openSelectedFolderInNewWindow(){
                $(".fileObject.selected").each(function(){
                    if ($(this).attr("type") == "folder"){
                        console.log($(this).attr('filepath'));
                        openPathInNewWindow([$(this).attr('filepath')]);
                    }
                })
            }

            function openSelectedVroot(){
                $("#storageroot").find(".dir.item").each(function(){
                    if ($(this).hasClass("active")){
                        var thisRootPath = $(this).attr('filepath');
                        openPathInNewWindow([$(this).attr('filepath')]);
                    }
                });
            }

            //Always open the first object locally, and open others in new floatWindows
            function openFolderInNewWindow(paths){
                if (paths.length > 0){
                    listDirectory(paths[0]);
                    for (var i = 1; i < paths.length; i++){
                        //newFloatWindow(location.href.replace(location.hash,"") + "#" + path[i])
                        openPathInNewWindow(paths[i]);
                    }
                }
            }

            function openPathInNewWindow(path){
                console.log("Opening in new File Maanger: ", window.location.pathname + "#" + path);
                ao_module_newfw({
                    url: window.location.pathname + "#" + path,
                    appicon: "SystemAO/file_system/img/small_icon.png",
                    title: "File Manager",
                    width: 1080,
                    height: 580,
                    parent: ao_module_windowID,
                });
            }

            //Preference setting and loading functions.
            function setPreference(key, value){
                $.ajax({
                    url:"../../system/file_system/preference?key=" + key + "&value=" + value,
                    success: function(data){
                        if (data.error !== undefined){
                            console.log(data);
                        }
                    }
                });
            }

            function loadPreference(key, callback){
                $.get("../../system/file_system/preference?key=" + key,function(data){
                    callback(data);
                });
            }

            // ============================== WINDOW RESIZE FUNCTIONS =====================
            $(document).ready(function(data){
                if (window.innerWidth < 620 && !isMobile){
                    toggleSidebar(false);
                }
                initWindowSizes(false);
            });

            $(window).on("resize",function(){
                initWindowSizes(false);
                if (!isMobile && window.innerWidth < 620 && sideBarShown == true){
                    toggleSidebar(false);
                }else if (!isMobile && window.innerWidth > 650 && sideBarShown == false){
                    toggleSidebar(false);
                }

                if (isMobile){
                    refreshList();
                }
            });


            function handleShareFilebuttonClick(event, object){
                event.preventDefault(); 
                event.stopImmediatePropagation();
                $(".fileObject.selected").removeClass("selected");
                if (viewMode == "list"){
                    $(object).parent().parent().addClass("selected");
                }else if (viewMode == "grid"){
                    $(object).parent().parent().parent().addClass("selected");
                }
               
                shareFile();
            }

            
            function shareFile(){
                var selectedFiles = [];
                $(".fileObject.selected").each(function(){
                    var thisFilepath = $(this).attr("filepath");
                    selectedFiles.push(thisFilepath);
                });

                if (selectedFiles.length != 1){
                    //Try to share more than 1 files, which is not supported
                    console.log("Multi share is current not supported");
                    return
                }

                //OK! Continue to generate link
                var selectedFile = selectedFiles[0];
                shareEditingObject = selectedFile;
                $.ajax({
                    url: "../../system/file_system/share/new",
                    data: {path: selectedFile},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            //Build the predicted share endpoint
                            let protocol = "https://";
                            if (location.protocol !== 'https:') {
                                protocol = "http://";
                            }

                            //Continue to render QR Code and UI contents
                            $("#qrcode").html("");
                            var port = ":" + window.location.port;
                            if (window.location.port == ""){
                                port = "";
                            }
                            var shareURL = protocol + window.location.hostname + port + "/share/" + data.UUID;
                            shareEditingUUID = data.UUID;
                            new QRCode(document.getElementById("qrcode"), shareURL);
                            $("#sharelink").text(shareURL);
                            $("#sharelink").attr("href", shareURL);
                            $(".shareoption").parent().removeClass("disabled");
                            $("#sharingRemoveBtn").show();

                            //Check the correct checkbox
                            var tagetCheckbox = data.Permission;
                            if (tagetCheckbox == "anyone"){
                                $("#anyone")[0].checked = true;
                            }else if (tagetCheckbox == "signedin"){
                                $("#signedin")[0].checked = true;
                            }else if (tagetCheckbox == "samegroup"){
                                $("#samegroup")[0].checked = true;
                            }

                            //Show the share file interface
                            $(".popup").fadeOut('fast');
                            showPopupWrapper();
                            $("#shareFile").fadeIn("fast");

                            //Reload the list
                            listDirectory(currentPath);
                        }
                      
                    }
                });
               
            }

            function removeSharing(){
                if (shareEditingObject == ""){
                    return
                }
                //The target file to remove
                var selectedFile = shareEditingObject;

                $.ajax({
                    url: "../../system/file_system/share/delete",
                    data: {path: selectedFile},
                    success: function(data){
                        console.log(data);
                        $("#qrcode").html(`<img src="img/private.png">`);
                        $(".shareoption").parent().addClass("disabled");
                        $("#sharelink").text("(Sharing Removed)");
                        $("#sharelink").removeAttr("href");
                        $("#sharingRemoveBtn").hide();
                        //Reload the current filelist and hide the share interface
                        listDirectory(currentPath);

                        //Reset sharing file settings
                        shareEditingObject = ""
                        shareEditingUUID = ""
                    }
                });

            }

            function updateShareSettings(object){
                $(object).addClass("loading");
                var shareMode = $("#shareSettingForm [name='shareopt']:checked").val();
                $.ajax({
                    url: "../../system/file_system/share/edit",
                    data: {uuid: shareEditingUUID, mode: shareMode},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }
                        $(object).removeClass("loading");
                        $(object).html(`<i class="checkmark icon"></i> Updated`);
                        $(object).addClass("positive");
                        setTimeout(function(){
                            $(object).html("Update");
                            $(object).removeClass("positive");
                        }, 3000);
                    }
                })
            }

            function hideShare(){
                hideAllPopupWindows();
            }

            function toggleSidebar(useAnimation=true){
                //Fixing desktop bugs on showing the sidebar
                if (isMobile){
                    $("#directorySidebar").stop().finish().animate({left: "toggle"},200);
                }else{
                    if ($("#directorySidebar").offset().left < 0){
                        $("#directorySidebar").stop().finish().animate({left: 0},200);
                    }else{
                        $("#directorySidebar").stop().finish().animate({left: -1 * directorySidebarWidth},200);
                    }
                }
               
                sideBarShown = !sideBarShown;
                initWindowSizes(useAnimation);
            }

            function initWindowSizes(animate=true){
                var h = $("#navibar").css("height");
                var hint = $("#navibar").height();
                //$("#mainWindow").css("padding-top",h);
                var windowHeight = window.innerHeight - hint - 12;
                //console.log(windowHeight);
                if (sideBarShown){
                    //Resize the sidebar 
                    $("#directorySidebar").css("top",h);
                    $("#directorySidebar").css("width",directorySidebarWidth);
                    $("#directorySidebar").css("height",windowHeight + "px");
                    //Resize the file viewer
                    $("#folderView").css("top",h);
                    if (window.innerWidth > 650){
                        if (animate){
                            $("#folderView").stop().finish().animate({
                                left: directorySidebarWidth + 'px',
                                width: window.innerWidth - directorySidebarWidth - 2 + "px"
                            },200);
                        }else{
                            $("#folderView").css({
                                left: directorySidebarWidth + 'px',
                                width: window.innerWidth - directorySidebarWidth - 2 + "px"
                            });
                        }
                    }else{
                        //Window width too small to allow resizing sidebar shown. Overlap it
                        if (animate){
                            $("#folderView").stop().finish().animate({
                                left: directorySidebarWidth + 'px',
                                width: window.innerWidth + "px"
                            },200);
                        }else{
                            $("#folderView").css({
                                left: directorySidebarWidth + 'px',
                                width: window.innerWidth + "px"
                            });
                        }
                    }
                   
                    if (isChromium){
                        //$("#mainWindow").css("height", window.innerWidth);
                    }
                    //$("#folderView").css("left",directorySidebarWidth + "px");
                    $("#folderView").css("height",windowHeight + "px");
                }else{
                    $("#folderView").css("top",h);
                    if (animate){
                        $("#folderView").stop().finish().animate({
                            left:'0px',
                            width:(window.innerWidth - 2 + "px")
                        },200);
                    }else{
                        $("#folderView").css({
                            left:'0px',
                            width:(window.innerWidth - 2 + "px")
                        });
                    }
                    $("#folderView").css("height",windowHeight + "px");
                    
                }
            }

            function toggleDarkTheme(){
                if ($(".darkTheme").length > 0){
                    //Set To Whitetheme
                    $(".darkTheme").removeClass("darkTheme").addClass("whiteTheme");
                    currentTheme = "whiteTheme";
                    $("#darkthemebtn").attr("class","moon icon");
                    $("#darkthemebtn").parent().addClass("inverted");
                    $(".dropdown").removeClass("inverted");
                    setPreference("file_explorer/theme","whiteTheme");

                    //If in vdi mode, update desktop's listMenu as well
                    if (ao_module_virtualDesktop){
                        parent.initTheme("whiteTheme");
                    }

                    $(".rightPad").css("margin-right", "37px");
                    
                }else{
                    //Set to DarkTheme
                    $(".whiteTheme").removeClass("whiteTheme").addClass("darkTheme");
                    currentTheme = "darkTheme";
                    $("#darkthemebtn").attr("class","sun icon");
                    $("#darkthemebtn").parent().removeClass("inverted");
                    $(".dropdown").addClass("inverted");
                    setPreference("file_explorer/theme","darkTheme");

                     //If in vdi mode, update desktop's listMenu as well
                     if (ao_module_virtualDesktop){
                        parent.initTheme("darkTheme");
                    }

                    $(".rightPad").css("margin-right", "40px");
                }
               
            }

            function msgbox(icon, text){
                $($(".msgbox").find("span")[0]).text(text);
                $($(".msgbox").find("i")[0]).attr("class", icon + " icon");
                $(".msgbox").stop().finish().slideDown('fast').delay(3000).slideUp('fast', function(){
                    initWindowSizes(false);
                });
            }

            //Keyboard hotkey events
            $(document).keydown(function(event){
                if ($(':focus').is("input")){
                    //Do not block operations on input fields.
                    return;
                }
                if(event.which==17 || event.which == 91){
                    ctrlHold = true;
                    updateCtrlDisplay();
                }else if (event.which == 16){
                    shiftHold = true;
                    updateCtrlDisplay();
                }else if (event.which == 67 && ctrlHold == true){
                    //Ctrl + C
                    if (!$(".popup").is(":visible")){
                        event.preventDefault();
                        copy();
                    } 
                }else if (event.which == 88 && ctrlHold == true){
                    //Ctrl + X
                    if (!$(".popup").is(":visible")){
                        event.preventDefault();
                        cut();
                    }
                }else if (event.which == 65 && ctrlHold == true){
                    //Ctrl + A
                    event.preventDefault();
                    $(".fileObject").addClass("selected");
                }else if (event.which == 78 && shiftHold == true){
                    //Shift + N, Open new file manager window with current path
                    event.preventDefault();
                    openPathInNewWindow(currentPath);

                }else if (event.which == 86 && ctrlHold == true){
                    if (!$(".popup").is(":visible")){
                        paste();
                    } 
                }else if (event.which == 46 && shiftHold == true){
                    //Shift + delete
                    forceDelete();
                }else if (event.which == 46){
                    //Delete
                    deleteFile();
                }else if (event.which == 38){
                    //Up Arrow
                    if ($(".popup:visible").length == 0){
                        //No popup visiable
                        if (ctrlHold == true){
                            //Parenet path
                            parentDir();
                        }else{
                            //Select the file on the upper
                            selectPreviousFile(event);
                        }
                    }
                }else if (event.which == 40){
                    //Down arrow
                    if ($(".popup:visible").length == 0){
                        //No popup visiable
                        selectNextFile(event);
                    }
                }else if (event.which == 39){
                    //Right arrow
                    if ($(".popup:visible").length == 0 && viewMode == "grid"){
                        //No popup visiable and grid mode
                        selectRightFile(event);
                    }
                }else if (event.which == 37){
                    //Left arrow
                    if ($(".popup:visible").length == 0 && viewMode == "grid"){
                        //No popup visiable and grid mode
                        selectLeftFile(event);
                    }
                }else if (event.which == 13){
                    //Enter key
                    if ($(".fileObject.selected").length > 0){
                        openViaButton();
                    }else if ($(".fileObject.hotSearchHighlight").length > 0 && $(".fileObject.selected").length == 0){
                        //Hot search selection mode

                    }
                }else if (event.which == 27){
                    //Esc key
                    hideAllPopupWindows();
                    $(".fileObject.selected").removeClass("selected");
                }else{
                    //Handle generic file search by consecutive typing
                    if (hotSearchTimer != null){
                        clearTimeout(hotSearchTimer);
                    }
                    $(".fileObject.selected").removeClass("selected");
                    hotSearchTimer = setTimeout(function(){
                        exitHotSearch();
                    }, 1000);

                    if (hotSearchBuffer.length > 0 && event.key == hotSearchBuffer.substr(hotSearchBuffer.length - 1, 1)){
                        //Jump to next result
                        hotSearchOffsetIndex++;
                    }else{
                        hotSearchOffsetIndex = 0;
                        hotSearchBuffer+= event.key;
                    }
                   
                    handleHotSearch(hotSearchBuffer, hotSearchOffsetIndex);
                }
            });

            $(document).keyup(function(event){
                if(event.which==17 || event.which == 91){
                    ctrlHold = false;
                    updateCtrlDisplay();
                }else if (event.which == 16){
                    shiftHold = false;
                }
            });

            $("#directorySidebar").on("click",function(evt){
                //Clear the button holding
                $(".fileObject.selected").removeClass("selected");
                shiftHold = false;
                ctrlHold = false;
                updateCtrlDisplay();
            });

            //Check if localstorage is availble
            function lscheck(){
                var test = 'test';
                try {
                    localStorage.setItem(test, test);
                    localStorage.removeItem(test);
                    return true;
                } catch(e) {
                    return false;
                }
            }

            function selectNextFile(e){
                e.preventDefault();
                //Check if there are no selection. If yes, select the first file object
                if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
                    //Select the first file object
                    $($(".fileObject")[0]).addClass("selected");
                    return
                }else if ( $(".fileObject").length == 0){
                    //No file in this folder
                    return
                }

                //Already contain selected file on the interface. Seleect it
                var baseObject = $($(".fileObject.selected")[0]);
                if ($(".fileObject.selected").length > 1){
                    $(".fileObject.selected").removeClass("selected");
                }
                if (viewMode == "list"){
                    //Select the next file
                    var nextObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) + 1 );
                    if (nextObject.length > 0){
                        nextObject.addClass("selected");
                        scrollToFileObject(nextObject);
                        $(baseObject).removeClass("selected");
                    }
                }else if (viewMode == "grid"){
                    var colobj = getFileObjectInTheSameCol(baseObject);
                    var nextObject = baseObject;
                    for (var i = 0; i < colobj.length; i++){
                        if ($(colobj[i]).hasClass("selected") && i != colobj.length - 1){
                            nextObject = colobj[i + 1];
                        }
                    }

                    $(baseObject).removeClass("selected");
                    nextObject.addClass("selected");
                    scrollToFileObject(nextObject);
                }
            }

            function selectPreviousFile(e){
                e.preventDefault();
                //Check if there are no selection. If yes, select the first file object
                if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
                    //Select the first file object
                    $($(".fileObject")[$(".fileObject").length - 1]).addClass("selected");
                    return
                }else if ( $(".fileObject").length == 0){
                    //No file in this folder
                    return
                }

                var baseObject = $($(".fileObject.selected")[0]);
                if ($(".fileObject.selected").length > 1){
                    $(".fileObject.selected").removeClass("selected");
                }
                if (viewMode == "list"){
                    //Select the previous file
                    if ($(".fileObject").index( $(baseObject) ) -1 < 0){
                        return;
                    }
                    var previousObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) -1 );
                    if (previousObject.length > 0){
                        previousObject.addClass("selected");
                        scrollToFileObject(previousObject);
                        $(baseObject).removeClass("selected");
                    }
                    
                
                }else if (viewMode == "grid"){
                    var colobj = getFileObjectInTheSameCol(baseObject);
                    var prevObj = baseObject;
                    for (var i = 0; i < colobj.length; i++){
                        if ($(colobj[i]).hasClass("selected") && i > 0){
                            prevObj = colobj[i - 1];
                        }
                    }

                    $(baseObject).removeClass("selected");
                    prevObj.addClass("selected");
                    scrollToFileObject(prevObj);
                }
            }

            function scrollToFileObject(fileObject){
                if (viewMode == "grid"){
                    $('#folderView').scrollTop($(fileObject)[0].offsetTop - ($("#directorySidebar").height()/2 - 340));
                }else{
                    $('#folderView').scrollTop($(fileObject)[0].offsetTop - ($("#directorySidebar").height()/2 - 140));
                }
            }

            //Grid mode left right opr
            function selectLeftFile(e){
                e.preventDefault();
                if (viewMode != "grid"){
                    return;
                }

                if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
                    //Select the first file object
                    $($(".fileObject")[$(".fileObject").length - 1]).addClass("selected");
                    return
                }else if ( $(".fileObject").length == 0){
                    //No file in this folder
                    return
                }

                var baseObject = $($(".fileObject.selected")[0]);
                if ($(".fileObject").index( $(baseObject) ) -1 < 0){
                    return;
                }
                var previousObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) -1 );
                if (previousObject.length > 0){
                    previousObject.addClass("selected");
                    scrollToFileObject(previousObject);
                    $(baseObject).removeClass("selected");
                }

            }

            function selectRightFile(e){
                e.preventDefault();
                if (viewMode != "grid"){
                    return;
                }
                
                if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
                    //Select the first file object
                    $($(".fileObject")[0]).addClass("selected");
                    return
                }else if ( $(".fileObject").length == 0){
                    //No file in this folder
                    return
                }

                var baseObject = $($(".fileObject.selected")[0]);
                var nextObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) + 1 );
                if (nextObject.length > 0){
                    nextObject.addClass("selected");
                    scrollToFileObject(nextObject);
                    $(baseObject).removeClass("selected");
                }

            }

            //Functions for getting file objects in the same collume
            function getFileObjectInTheSameCol(baseFileObject){
                if (viewMode != "grid"){
                    return;
                }

                var baseOffset = $(baseFileObject).offset().left;
                var fileObjectInTheSameCol = [];
                $(".fileObject").each(function(){
                    if ($(this).offset().left == baseOffset){
                        let thisFileObject = $(this);
                        fileObjectInTheSameCol.push(thisFileObject);
                    }
                });

                return fileObjectInTheSameCol;

            }

            //Function for getting file objects in the same row
            function getFileObjectInTheSameRow(baseFileObject){
                if (viewMode != "grid"){
                    return;
                }

                var baseOffset = $(baseFileObject).offset().top;
                var fileObjectInTheSameRow = [];
                $(".fileObject").each(function(){
                    if ($(this).offset().top == baseOffset){
                        let thisFileObject = $(this);
                        fileObjectInTheSameRow.push(thisFileObject);
                    }
                });
                
                return fileObjectInTheSameRow;
            }

            //Handle drag drop upload
           function drop(event){
                event.preventDefault();
                console.log(event, event.target)
                //Check if this is file upload or file move / copy function
                let dt = event.dataTransfer
                let files = dt.files
                if (files.length > 0){
                    //Upload file via dragdrop
                    msgbox("upload",applocale.getString("message/upload/started", "Upload Started"));
                    let items = event.dataTransfer.items;
                    for (let i=0; i<items.length; i++) {
                        let item = items[i].webkitGetAsEntry();
                        if (item) {
                            recursiveScanFilesUpload(item);
                        }
                    }
                    
                }else{
                    //File transfer within system
                    let filedata = event.dataTransfer.getData("filedata");
                    if (filedata != ""){
                        try{
                            let fileList = JSON.parse(filedata);
                            //Check if the file objects are from the same host
                            let localFiles = [];
                            let remoteFiles = [];
                            fileList.forEach(file => {
                                if (file.hostUUID == systemUUID){
                                    //Local file
                                    localFiles.push(file);
                                }else{
                                    //Remote files
                                    remoteFiles.push(file);
                                }
                            });

                            //Start processing the local files
                            let currentVroot = currentPath.split(":/").shift();
                            clipboard = [];

                            //Assume all files are from the same directory
                            if (localFiles.length > 0){
                                //Check if drag drop from the same directory
                                let currentDirname = currentPath.split("/")
                                currentDirname.pop();
                                currentDirname = currentDirname.join("/");
                                let firstFileDirname = localFiles[0].filepath.split("/")
                                firstFileDirname.pop();
                                firstFileDirname = firstFileDirname.join("/");
                                if (currentDirname == firstFileDirname){
                                    //Drag start and drop location are the same directory
                                    msgbox("remove",applocale.getString("message/destIdentical", "Source and destination file names are the same"));
                                    return;
                                }

                                let fileVroot = localFiles[0].filepath.split(":/").shift();
                                if (currentVroot == fileVroot){
                                    //Same device same root. Move the file
                                    cutMode = true;
                                }else{
                                    //Same device differnet root. Copy the file
                                    cutMode = false;
                                }

                                //Move all localFiles into clipboard
                                localFiles.forEach(file => {
                                    clipboard.push(file.filepath);
                                });

                                if (useLocalstorage){
                                    localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
                                    if (cutMode){
                                        localStorage.setItem("ao/file_system/cutmode","true");
                                    }else{
                                        localStorage.setItem("ao/file_system/cutmode","false");
                                    }
                                    
                                }

                                //Paste all the files to the current path
                                console.log(clipboard);
                                paste();
                            }
                           
                            
                        }catch(ex){
                            console.log(ex);
                            msgbox("remove",applocale.getString("message/decodeFilelistFail", "File drop failed. Unable to decode filelist."));
                        }
                    }
                    
                    
                }
                
           }


           function recursiveScanFilesUpload(item, rootpath="", base=""){
               var filesInside = [];
                if (item.isDirectory) {
                    //This is a directory
                    let directoryReader = item.createReader();
                        directoryReader.readEntries(function(entries) {
                        entries.forEach(function(entry) {
                            recursiveScanFilesUpload(entry, rootpath + item.name + "/", base);
                        });
                    });
                }else{
                    //This is a file. Upload it
                    item.file(function(fileObject){
                        if (isChrome || isSafari){
                            //WebKits
                            console.log("Upload Target", fileObject, rootpath);
                            uploadFile(fileObject, undefined, currentPath + rootpath);
                        
                        }else{
                            //Firefox. Special handling for root path.
                           
                            //Updates for Firefox 84.0.2 (64-bit), which changed minor implementation on relative path in folder updates
                            //This section of code is deprecated since then
                            /*
                                //As firefox will keep its file input relative path, we need to remove the root folder
                                //name from the rootpath passed in by the webkit API
                                
                                if (rootpath.substr(rootpath.length - 1, 1) == "/"){
                                    rootpath = rootpath.substr(0, rootpath.length - 1);
                                }
                                var rootpathInfo = rootpath.split("/");
                                if (rootpathInfo.length > 1){
                                    //Uploading folder to folder. Extract the folder root name
                                    rootpathInfo.pop();
                                }else{
                                    //Uploading file to folder. Do nothing
                                }
                                rootpath = rootpathInfo.join("/") + "/";

                                console.log("Upload Target", fileObject, rootpath);
                                uploadFile(fileObject, undefined, currentPath + rootpath);
                            */
                            console.log(currentPath + rootpath);
                            uploadFile(fileObject, undefined, currentPath + base);
                        }
                        
                    });
                }
                return filesInside;
            }

        function showCurrentDirectoryProperties(){
            var fileList = [currentPath];
            console.log(fileList);
            var hashPassthrough = encodeURIComponent(JSON.stringify(fileList));
            ao_module_newfw({
                url: "SystemAO/file_system/file_properties.html#" + hashPassthrough,
                width: 340,
                height: 480,
                appicon: "SystemAO/file_system/img/properties.png",
                title: "File Properties",
            });
        }

        function showVrootProperties(){
            var rootname = [$("#storageroot").find(".dir.item.active").attr("filepath")];
            var hashPassthrough = encodeURIComponent(JSON.stringify(rootname));
            ao_module_newfw({
                url: "SystemAO/disk/diskprop.html#" + hashPassthrough,
                width: 420,
                height: 580,
                appicon: "img/system/drive.svg",
                title: "Disk Properties",
            });
        }

        function openBackupManager(){
            var rootname = [$("#storageroot").find(".dir.item.active").attr("filepath")];
            var hashPassthrough = encodeURIComponent(JSON.stringify(rootname));
            ao_module_newfw({
                url: "SystemAO/disk/disk_restore.html#" + hashPassthrough,
                width: 410,
                height: 580,
                appicon: "img/system/backup.svg",
                title: "Backup & Restore",
            });
        }

        function showFileProperties(){
            //Show the file list of the selected files
            if ($(".fileObject.selected").length > 0){
                //Build the filelist
                var fileList = [];
                $(".fileObject.selected").each(function(){
                    var filepath = $(this).attr("filepath");
                    fileList.push(filepath);
                });

                var hashPassthrough = encodeURIComponent(JSON.stringify(fileList));
                ao_module_newfw({
                    url: "SystemAO/file_system/file_properties.html#" + hashPassthrough,
                    width: 340,
                    height: 480,
                    appicon: "SystemAO/file_system/img/properties.png",
                    title: "File Properties",
                });
            }

            
        }

        function initUploadMode(){
            //Get the amount of RAM on the server side to check if low memory mode should be used.
            $.ajax({
                url: "../../system/info/getRAMinfo",
                success: function(data){
                    if (data.error !== undefined){
                        //Permission denied or other reasons that cannot access harwdare info. Use default mode
                        lowMemoryMode = true;
                    }else{
                        //Check if ramsize > 1.8 GB (2GB). If yes, switch to large memory upload mode
                        var memsize = JSON.parse(data);
                        if (parseFloat(memsize)/ 1024 / 1024 / 1024 >= 3.8){
                            console.log("[File Explorer] Entering large memory upload mode")
                            lowMemoryMode = false;
                        }
                    }
                },
                error: function(){
                    //Hardware mode disabled. Always use low memory upload mode instead
                    lowMemoryMode = true;
                }
            });
        }

        let uploadBufferedRefreshTimer;
       
        function uploadFile(file, uuid=undefined, targetDir=undefined) {
            if (lowMemoryMode){
                 /*
                    Low Memory Upload Mode
                */
                var filename = encodeURIComponent(file.name);
                var filesize = file.size;

                //Generate a new file item
                let taskUUID = uuid;    //For queueing objects
                if (taskUUID == undefined){
                    //If this is a new file to be uploaded
                    taskUUID = appendUploadFileItem(file.name, file.size);
                }

                //Push to upload pending list if the max concurrent upload is reached
                if (uploadingFileCount >= maxConcurrentUpload){
                    let uploadDir = currentPath;
                    if (targetDir !== undefined){
                        uploadDir = targetDir;
                    }else if (isFirefox && uploadDir == currentPath && file.webkitRelativePath != ""){
                        //Use the webkitRelativePath instead of the name, this is a folder upload
                        //Deprecated for Firefox 84.0.2 updates
                        /*
                        let pathinfo = file.webkitRelativePath.split("/");
                        pathinfo.pop();
                        let subpath = pathinfo.join("/");
                        uploadDir = uploadDir + subpath;
                        */
                        uploadDir = targetDir;
                    }
                    uploadPendingList.push({
                        File: file,
                        UUID: taskUUID,
                        TargetDir: JSON.parse(JSON.stringify(uploadDir)),
                    });
                    return
                }

                function updateProgressForWebSocketUpload(uuid, progress){
                    $(".uploadTask").each(function(){
                        if ($(this).attr("taskID") == uuid){
                            //Update this progress bar
                            $(this).find(".bar").css("width",progress + "%");

                            if (progress == 100){
                                //When progress = 100 and the server is not response with 200,
                                //That means the upload has finish and server is processing the upload
                                $(this).find(".progress").addClass("indeterminate");

                            }
                        }
                    });
                }

                //Open the websocket
                let path = currentPath;
                let protocol = "wss://";
                if (location.protocol !== 'https:') {
                    protocol = "ws://";
                }

                var port = window.location.port;
                if (window.location.port == ""){
                    if (location.protocol !== 'https:') {
                        port = "80";
                    }else{
                        port = "443";
                    }
                }

                let uploadDir = currentPath;
                if (targetDir !== undefined){
                    //Not uploading to current directory. Change upload path to target
                    uploadDir = targetDir;
                }

                //Fixing Firefox path issues on or above FF48.0
                if (isFirefox && file.webkitRelativePath != ""){
                    //Use the webkitRelativePath instead of the name, this is a folder upload
                    let pathinfo = file.webkitRelativePath.split("/");
                    pathinfo.pop();
                    let subpath = pathinfo.join("/");
                    uploadDir = uploadDir + subpath;
                    //console.log("Firefox Mode: ", uploadDir, "Target Dir", targetDir)
                }

                let socket = new WebSocket(protocol + window.location.hostname + ":" + port + "/system/file_system/lowmemUpload?filename=" + filename + "&path=" + uploadDir);
                let currentSendingIndex = 0;
                let chunks = Math.ceil(file.size/uploadFileChunkSize,uploadFileChunkSize);
                
                //Define a function for sending a particular chunk
                function sendChunk(id){
                    var offsetStart = id*uploadFileChunkSize;
                    var offsetEnd = id*uploadFileChunkSize + uploadFileChunkSize;
                    var thisblob = file.slice(offsetStart,offsetEnd);
                    socket.send(thisblob);
                    //console.log(id + "/" + chunks);

                    //Update progress to first percentage
                    var progress = id / (chunks-1) * 100.0;
                    if (progress > 100){
                        progress = 100;
                    }
                    updateProgressForWebSocketUpload(taskUUID, progress)
                    
                }

                //Update all UI elements
                updateUploadFileCount();
                uploadingFileCount++;

                //Start sending
                socket.onopen = function(e) {
                    if (filesize < uploadFileChunkSize){
                        //This file is smaller than chunk size, set it to somwhere within 10% - 20% so it doesn't look like it is stuck
                        updateProgressForWebSocketUpload(taskUUID, 10 +  Math.floor(Math.random() * Math.floor(10)))
                    }
                    
                    //Send the first chunk
                    sendChunk(0);
                    currentSendingIndex++;
                };

                socket.onmessage = function(event) {
                    //Append to the send index
                    var incomingValue = event.data;

                    if (incomingValue == "next"){
                        if (currentSendingIndex == chunks + 1){
                            //Already finished
                            socket.send("done");
                        }else{
                            //Send next chunk
                            sendChunk(currentSendingIndex);
                            currentSendingIndex++;
                        }
                      
                    }else if (incomingValue == "OK"){
                        //Merge completed
                        $(".uploadTask").each(function(){
                            if ($(this).attr("taskID") == taskUUID){
                                //Update this progress bar to completed
                                $(this).find(".bar").css("width","100%");
                                $(this).find(".progress").attr("class","ts tiny positive progress");
                                $(this).find(".uploadTaskRemoveIcon").show();
                                $(this).addClass("ended");

                                $.when($(this).delay(1000).fadeOut("fast")).then(function(){
                                    $(this).remove();
                                    updateUploadFileCount();
                                });
                                
                            }
                        });
                    }else{
                        //Try to parse it as JSON
                        try{
                            var resp = JSON.parse(incomingValue.split('\\' + '"').join("\""));
                            console.log(resp);
                            if (resp.error !== undefined){
                                //This is an error message
                                msgbox("remove",resp.error);

                                //Update the progress bar to error
                                $(".uploadTask").each(function(){
                                    if ($(this).attr("taskID") == taskUUID){
                                        //Update this progress bar to completed
                                        $(this).find(".bar").css("width","100%");
                                        $(this).find(".progress").attr("class","ts tiny negative progress");
                                        $(this).find(".uploadTaskRemoveIcon").show();
                                        $(this).addClass("ended");
                                    }
                                });
                            }
                        }catch(ex){
                            //Something else
                            console.log(incomingValue);
                            console.log(ex);
                        }
                    }

                };

                socket.onclose = function(event) {
                    uploadingFileCount--;
                    updateUploadFileCount();
                     //After the previous file has uploaded / errored, check if there are another file needed to be uploaded
                    setTimeout(function(){
                        if (uploadPendingList.length > 0){
                            let nextFile = uploadPendingList.shift();
                            uploadFile(nextFile.File, nextFile.UUID, nextFile.TargetDir);
                        }
                    }, 100)
                };

                socket.onerror = function(error) {
                    console.log(error.message);
                    console.log("Unable to open WebSocket connection. Fall back to FORM POST upload mode. (Check your nginx / reverse proxy settings!!!)")
                    //Try to fallback to FORM POST upload mode
                    lowMemoryMode = false;
                   
                    uploadPendingList.push({
                        File: file,
                        UUID: taskUUID,
                        TargetDir: JSON.parse(JSON.stringify(targetDir)),
                    });
                    
                   
                    return

                    /*
                    msgbox("caution","Upload failed due to unknown reason");
                    //Something went wrong. Set the color to red
                    $(".uploadTask").each(function(){
                        if ($(this).attr("taskID") == taskUUID){
                            //Update this progress bar to completed
                            $(this).find(".bar").css("width","100%");
                            $(this).find(".progress").attr("class","ts tiny negative progress");
                            $(this).find(".uploadTaskRemoveIcon").show();
                            $(this).addClass("ended");
                        }
                    });
                    */
                };

            }else{
                /*
                    Standard Upload Mode
                    (For host with RAM >= 2GB)
                */

                //Create the task progress Object
                let taskUUID = uuid;    //For queueing objects
                if (taskUUID == undefined){
                    //If this is a new file to be uploaded
                    taskUUID = appendUploadFileItem(file.name, file.size);
                }
                
                //Updates 22-10-2020
                //Added file upload queuing system to prevent too many request on-the-fly at the same time
                if (uploadingFileCount >= maxConcurrentUpload){
                    //Push to upload pending list
                    //Sometime files will be recursively uploaded (aka retry multiple time), hence the targetDir needed to be copied as well
                    let uploadDir = currentPath;
                    if (targetDir !== undefined){
                        uploadDir = targetDir;
                    }
                    uploadPendingList.push({
                        File: file,
                        UUID: taskUUID,
                        TargetDir: JSON.parse(JSON.stringify(uploadDir)),
                    });
                    return
                }

                //Prase upload Form
                let uploadCurrentPath = JSON.parse(JSON.stringify(currentPath));
                if (targetDir !== undefined){
                    //The upload paramter supplied targetDir
                    uploadCurrentPath = targetDir;
                }
                let url = '../../system/file_system/upload?path=' + uploadCurrentPath
                //console.log("Uploading To => ", uploadCurrentPath, targetDir, currentPath);
                let formData = new FormData()
                let xhr = new XMLHttpRequest()
                formData.append('file', file);
                formData.append('path', uploadCurrentPath);

                xhr.open('POST', url, true)
                xhr.upload.addEventListener("progress", function(e) {
                    var progress = (e.loaded * 100.0 / e.total) || 100;
                    $(".uploadTask").each(function(){
                        if ($(this).attr("taskID") == taskUUID){
                            //Update this progress bar
                            $(this).find(".bar").css("width",progress + "%");

                            if (progress == 100){
                                //When progress = 100 and the server is not response with 200,
                                //That means the upload has finish and server is processing the upload
                                $(this).find(".progress").addClass("indeterminate");

                            }
                        }
                    });
                })

                xhr.addEventListener('readystatechange', function(e) {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //Upload process ended
                        //Update task status
                        $(".uploadTask").each(function(){
                            if ($(this).attr("taskID") == taskUUID){
                                //Update this progress bar to completed
                                $(this).find(".bar").css("width","100%");
                                $(this).find(".progress").attr("class","ts tiny positive progress");
                                $(this).find(".uploadTaskRemoveIcon").show();
                                $(this).addClass("ended");

                                //Update 15-11-2020
                                //Remove this taskbar after 3 secounds to prevent lags during > 2000 uploads
                                $.when($(this).delay(1000).fadeOut("fast")).then(function(){
                                    $(this).remove();
                                    updateUploadFileCount();
                                });
                                
                            }
                        });

                        var resp = JSON.parse(e.target.response);
                        if (resp.error !== undefined){
                            msgbox("caution",resp.error);
                            //Something went wrong. Set the color to red
                            $(".uploadTask").each(function(){
                                if ($(this).attr("taskID") == taskUUID){
                                    //Update this progress bar to completed
                                    $(this).find(".bar").css("width","100%");
                                    $(this).find(".progress").attr("class","ts tiny negative progress");
                                    $(this).find(".uploadTaskRemoveIcon").show();
                                    $(this).addClass("ended");
                                }
                            });
                        }
                        uploadingFileCount--;

                        //After the previous file has uploaded / errored, check if there are another file needed to be uploaded
                        setTimeout(function(){
                            if (uploadPendingList.length > 0){
                                let nextFile = uploadPendingList.shift();
                                uploadFile(nextFile.File, nextFile.UUID, nextFile.TargetDir);
                            }
                        }, 100)
                        
                    }else if (xhr.readyState == 4 && xhr.status != 200) {
                        msgbox("remove",applocale.getString( "message/uploadFailed", "File too big or the target disk is fulled"));
                        console.log(xhr);
                        $(".uploadTask").each(function(){
                            if ($(this).attr("taskID") == taskUUID){
                                //Upload screwed up. Show negative
                                $(this).find(".progress").attr("class","ts tiny negative progress");
                                $(this).find(".uploadTaskRemoveIcon").show();
                                $(this).addClass("ended");
                            }
                        });
                        uploadingFileCount--;

                        //After the previous file has uploaded / errored, check if there are another file needed to be uploaded
                        setTimeout(function(){
                            if (uploadPendingList.length > 0){
                                let nextFile = uploadPendingList.shift();
                                uploadFile(nextFile.File, nextFile.UUID, nextFile.TargetDir);
                            }
                        }, 100)
                    }

                
                    updateUploadFileCount();
                })

                xhr.send(formData);
                uploadingFileCount++;
                updateUploadFileCount();
            }
        }

        //Clear all finished upload tasks
        function clearAllUploadTask(){
            $(".uploadTask.ended").slideUp('300',function(){
                $(this).remove();
                updateUploadFileCount();
            });
            
        }

        function toggleSearch(){
            //Start search mode
            $(".searchbar").slideDown("fast", function(){
                initWindowSizes(true);
            });
            $("#searhbtn").addClass("disabled");

            //Force videmode to list
            viewMode = "list"
            $(".videmode.button").each(function(){
                 $(this).addClass('disabled');
            });
            searchMode = true;
            
            //Adjust the css for mobile interface
            if (isMobile){
                $("#searchInput").parent().parent().css("width", window.innerWidth - 135 + "px");
            }

            //Clear current folderlist
            $("#folderList").show();
            $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
                <div class="ts header">
                    <i class="arrow up icon ${currentTheme}"></i> <span class="${currentTheme}">${applocale.getString("func/search/typeToStart", "Type to Start Search")}</span>
                    <div class="sub header ${currentTheme}" style="margin-top:12px;">${applocale.getString("func/search/tip1", "Type something in the search bar to start searching.")}<br>
                        ${applocale.getString("func/search/tip2", `Start wildcard matching with "/" (slash) and your wildcard string (e.g. /*.mp3)`)}</div>
                </div>
            </div>`);
            $("#fileList").hide();
        }

        function hideSearchBar(skipFilelistRefresh = false){
            $(".searchbar").slideUp("fast", function(){
                initWindowSizes(true);
            });
            $("#searchInput").val("");
            $("#searhbtn").removeClass("disabled");
            $(".videmode.button").each(function(){
                if ($(this).attr("mode") != "list"){
                    $(this).removeClass('disabled');
                }
            });
            if (skipFilelistRefresh == false){
                listDirectory(currentPath);
            }
            searchMode = false;
        }
        
        //Handle case sensitive in keyword searching
        function toggleCaseSensitive(btn){
            if ($(btn).hasClass("active")){
                $(btn).removeClass("active");
                searchCaseSensitive = false;
            }else{
                $(btn).addClass("active");
                searchCaseSensitive = true;
            }
        }

        function exitHotSearch(){
            hotSearchBuffer = "";
            hotSearchTimer = null;
            //Move the file to "selected" mode
            $(".hotSearchHighlight").addClass("selected");
            $(".hotSearchHighlight").removeClass("hotSearchHighlight");
        }

        function handleHotSearch(starting, offset){
            if (offset < 0){
                offset = 0;
            }

            starting = starting.toLowerCase();
            console.log(starting);
            $(".hotSearchHighlight").removeClass("hotSearchHighlight");
            let files =  $(".fileObject");
            let matchingFiles = [];
            for (var i = 0; i < files.length; i++){
                let thisFile = files[i];
                if ($(thisFile).attr("filename") != undefined && $(thisFile).attr("filename").length > starting.length && $(thisFile).attr("filename").substr(0, starting.length).toLowerCase() == starting){
                    matchingFiles.push(thisFile);
                }
            }

            //Loopback if offset overflow
            let newOffset = offset;
            if (offset > matchingFiles.length - 1){
                newOffset =offset % matchingFiles.length;
            }

            var targetHighlightingFile = matchingFiles[newOffset];
            $(targetHighlightingFile).addClass("hotSearchHighlight");
            scrollToFileLocation($(targetHighlightingFile));
            return;
            
        }

        function handleSearch(){
            var keyword = $("#searchInput").val();
            $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
                <i class="loading spinner icon ${currentTheme}"></i> <span class="${currentTheme}">Searching</span>
            </div>`);
            $("#fileList").hide();
            $("#fileList").html("");
           
            $.ajax({
                url: "../../system/file_system/search",
                data: {path: currentPath, keyword: keyword, casesensitive: searchCaseSensitive},
                success: function(data){
                    if (data.error !== undefined){
                        msgbox("remove", data.error);
                    }else{
                        //Render the filelist
                        console.log(data);
                        if (data.length == 0){
                            $("#folderList").show();
                            $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
                                <div class="ts header ${currentTheme}">
                                    <i class="question icon" ${currentTheme}></i> <span class="${currentTheme}">No Matching Results</span>
                                    <div class="sub header ${currentTheme}">The host return no matching results for your keyword "${keyword}". <br>Check your spelling and if your wildcard are valid.</div>
                                </div>
                            </div>`);
                        }else{
                            renderDirectory(data);
                        }
                        
                    }
                }, error: function(){
                    $("#folderList").html(`<div class="ts basic segment">
                    <div class="ts header">
                        <i class="remove icon"></i> Search Error
                        <div class="sub header">Search timeout</div>
                    </div>
                </div>`);
                }
            })
        }

        function handleSearchBarPress(e){
            if (e.keyCode == 13 || e.key == "Enter"){
                e.preventDefault();
                handleSearch();
            }
        }

        function toggleCtrl(){
            ctrlHold = !ctrlHold;
            updateCtrlDisplay();
        }

        function updateCtrlDisplay(){
            if (isMobile){
                //Change color of the navibar based on selection mode
                if (ctrlHold){
                    $("#navibar").css("border-bottom","2px solid #6c06ba");
                }else{
                    $("#navibar").css("border-bottom","2px solid #34b7eb");
                }
            }
        }

        function getUploadTaskByID(taskUUID){
            var task = undefined;
            $("#uploadTab").find(".uploadTask").each(function(){
                if ($(this).attr("taskid") == taskUUID){
                    task = $(this);
                }
            });

            return task;
        }

        function appendUploadFileItem(filename, filesize){
            var newuuid = uuidv4();
            var humanReadableFilesize = 0;
            if (filesize < 0){
                humanReadableFilesize = applocale.getString("message/unknownSize", "Unknown Size")
            }else{
                humanReadableFilesize = bytesToSize(filesize);
            }
            
            $("#uploadProgressList").append(`<div class="uploadTask" taskID="${newuuid}">
                <p style="width: calc(100% - 15px);">${filename} (${humanReadableFilesize})</p>
                <div class="ts tiny primary progress" style="margin-top:-12px;">
                    <div class="bar" style="width: 0%"></div>
                </div>
                <div class="uploadTaskRemoveIcon" onclick="removeThisTask(this);" style="display:none;">
                    <i class="remove icon"></i>
                </div>
            </div>`);
            return newuuid;
        }

        function removeThisTask(object){
            $(object).parent().fadeOut('fast',
                function(){
                    $(this).remove();
                    updateUploadFileCount();
                }
            );
            
        }

        function toggleUploadList(){
            $("#uploadProgressList").toggle();
            if ($("#uploadProgressList").is(":visible")){
                $("#hideUploadButton").html('<i class="caret down icon"></i>');
            }else{
                $("#hideUploadButton").html('<i class="caret up icon"></i>');
            }
        }

        function updateUploadFileCount(){
            $("#uploadCount").text(uploadingFileCount);
            $("#waitingCount").text(uploadPendingList.length);
            if (uploadingFileCount == 0 && $(".uploadTask").length == 0){
                $("#uploadTab").hide();
            }else{
                $("#uploadTab").show();
            }
        }

        function bytesToSize(bytes) {
            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
            if (bytes == 0) return '0 Byte';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return Math.round(bytes / Math.pow(1024, i) * 100, 2) / 100 + ' ' + sizes[i];
        }

        function uuidv4() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        function dropToFolder(event){
            event.preventDefault();
            event.stopImmediatePropagation();
            console.log("Drop to folder detected");

            //Extract target folder path from object
            var targetPath = $(event.target).attr("filepath");
            if (targetPath == ""){
                return
            }
            
            //Check if this is upload or file move drag
            var files = event.dataTransfer.files;
            if (files.length > 0){
                //Upload mode. Extract the target folder basename from path
                if (targetPath.substr(targetPath.length -1,1) == "/"){
                    targetPath = targetPath.substr(0, targetPath.length-1);
                }
                var folderBase = targetPath.split("/").pop() + "/";
                var items = event.dataTransfer.items;
                for (let i=0; i<items.length; i++) {
                    let item = items[i].webkitGetAsEntry();
                    if (item) {
                        recursiveScanFilesUpload(item, folderBase, folderBase);
                    }
                }
            }else if (event.dataTransfer.getData("filedata") != ""){
                var targetVroot = targetPath.split(":/").shift();
                //Get the source files
                var filelist = JSON.parse(event.dataTransfer.getData("filedata"));
                if (filelist.length > 0){
                    var srcVroot = filelist[0].filepath.split(":/").shift();
                    if (srcVroot == targetVroot){
                        //Use move mode
                        cutMode = true;
                        
                    }else{
                        //Use copy mode
                        cutMode = false;
                    }

                    //Parse the filelist
                    clipboard = [];
                    filelist.forEach(file=>{
                        clipboard.push(file.filepath);
                    });
                    if (useLocalstorage){
                        localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
                        localStorage.setItem("ao/file_system/cutmode","true");
                    }
                    
                    //Perform operations
                    paste(targetPath, false)
                }
            }
        }

        function allowDrop(event){
            event.preventDefault();
        }

        $(".popupWrapper").on("click",function(){
            hideAllPopupWindows();
        });

        function hideAllPopupWindows(){
            $(".popup").fadeOut(100);
            $(".popupWrapper").fadeOut(100);
            $('body').css("overflow","");
        }

        function showPopupWrapper(){
            $(".popupWrapper").fadeIn('fast');
            $('body').css("overflow","hidden");
        }

        //Handle keydown of enter on certain input boxes
        function handleEnterKeyDown(event, handler){
            if (event.which == 13){
                handler();
            }
        }

        //Generate a download link and press it
        function generateDownloadFromURL(url, filename){
            let a = document.createElement('a')
            a.href = url;
            a.download = filename;
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }

        //Update sorting method for file listing
        function updateSortingMethods(){
            var method = $("#sortingMethodSelector").val();
            sortMode = method;

            //Save it to server side
            $.ajax({
                url: "../../system/file_system/sortMode",
                method: "POST",
                data: {opr: "set", folder: currentPath, mode: sortMode},
                success: function(data){
                    //console.log("Sort mode saved: " + data)
                    refreshList();
                }
            });
        }

        function requestCSRFToken(callback){
            $.ajax({
                url: "../../system/csrf/new",
                success: function(token){
                    callback(token);
                }
            })
        }

        </script>
    </body>
</html>