TC
/
arozos


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280
							<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <title>NotepadA</title>
        <meta name="theme-color" content="#4b75ff">
        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
        <link rel="stylesheet" href="notepadA.css">
        <script src="../script/jquery.min.js"></script>
        <script src="../script/semantic/semantic.min.js"></script>
        <script src="../script/ao_module.js"></script>
        <link data-name="vs/editor/editor.main" rel="stylesheet" href="script/monaco/vs/editor/editor.main.css">
       <style>
           html{
               height:100%;
           }
           body{
               height:100%;
               overflow-y:hidden;
               padding:1px;
               background-color:#292929;
           }
          
       </style>
    </head>
    <body>
        <!-- Main Menu -->
        <div class="npa menu">
            <div class="item"><img class="ui image" src="img/module_icon.png" style="height:20px;"></img></div>
            <div class="item selectable" onclick="initContextMenu('file',this);">File</div>
            <div class="item selectable" onclick="initContextMenu('edit',this);">Edit</div>
            <div class="item selectable" onclick="initContextMenu('view',this);">View</div>
            <div class="item selectable" onclick="initContextMenu('fontsize',this);">Font Size</div>
            <div class="item selectable" onclick="initContextMenu('help',this);">Help</div>
        </div>
        <div id="directoryList" onclick="hideContextMenu();">
            <div class="banner">Directory Listing</div>
            <div class="title item" onclick="event.preventDefault(); $('#openeditors').stop().finish().slideToggle('fast');"><i class="caret down icon"></i> OPEN EDITORS</div>
            <div class="subgroup" id="openeditors">
                
            </div>
            <div class="title item" onclick="toggleDirectoryExplorer(this);"><i class="caret down icon"></i><span id="openFolderTitle">NO FOLDER</span></div>
            <div class="subgroup" id="directoryExplorer">
              
            </div>
        </div>
        <div id="codeArea" onclick="hideContextMenu();">

            <div id="ca1" class="codeBoard">
                <div class="tabs">
                  
                </div>
                <div class="editor" editorUID="mainEditor" onclick="focusThisEditor(this);"></div>
                <div class="editorcover" editorUID="mainEditor" onclick="focusThisEditor(this);"></div>
            </div>
            <div id="ca2" class="codeBoard splitMode right" style="display:none;">
                <div class="tabs">

                </div>
                <div class="editor"  editorUID="subEditor" onclick="focusThisEditor(this);"></div>
                <div class="editorcover" editorUID="subEditor" onclick="focusThisEditor(this);"></div>
            </div>
            <div id="terminals" style="display:none;">
                <div class="menubar"> 
                    <p>TERMINAL</p> 
                    <div style="position: absolute; right: 12px;">
                        <i style="cursor: pointer;" onclick="restartTerminal();" class="refresh icon"></i>
                        <i style="cursor: pointer;" onclick="closeTerminal();" class="remove icon"></i>
                    </div>
                    
                </div>
                <div class="terminalWindow focused">
                    <iframe id="initTerminal" src="../SystemAO/wstty/console.html">

                    </iframe>
                </div>
            </div>
        </div>
        <div class="bottommenu">
            <div class="item"><i class="exchange icon"></i><span id="pingStatus"></span></div>
            <div class="item extrapadding" id="messageField" style="display:none;"><i class="checkmark icon"></i>Connected</div>
            <div class="rightpadded">
                <div class="item" id="filepath"><i class="code file icon"></i> user:/</div>
                <div class="item" id="fileExt">N/A</div>
                <div class="item">NotepadA</div>
            </div>
        </div>
         <!-- Context Menu -->
        <div id="contextMenu" class="contextMenu">
            
        </div>

        <!-- Licnese information -->
        <div id="licenseInfo" class="ui modal">
            <i class="close icon"></i>
            <div class="header">
                NotepadA License
            </div>
            <div class="content">
              <div class="description">
                <div class="ui header">Copyright 2020-2021 Toby Chui</div>
                <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

                    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
                    <br>
                    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                    </p>
              </div>
            </div>
            <div class="actions">
              <div class="ui positive right labeled icon button">
                OK
                <i class="checkmark icon"></i>
              </div>
            </div>
          </div>

          <!-- NotepadA Info-->
        <div id="aboutnpa" class="ui basic modal">
            <div class="ui icon header">
                <i class="code icon"></i>
                NotepadA Code Editor
            </div>
            <div class="content" align="center">
                <p>The default code editor for ArOZ Online 1.0<br>Developed by Toby Chui</p>
            </div>
            <div class="actions">
                <div class="ui green ok inverted button">
                    <i class="checkmark icon"></i>
                    OK
                </div>
            </div>
        </div>

        <!-- Copy and Paste menu reminder-->
        <div id="clipboardReminder" class="ui basic modal">
            <div class="ui icon header">
                <i id="clipboardReminderIcon" class="archive icon"></i>
                Keyboard Only
            </div>
            <div class="content" style="text-align:center;">
                <p id="clipboardReminderText"></p>
            </div>
            <div class="actions">
                <div class="ui green ok inverted button">
                <i class="checkmark icon"></i>
                OK
                </div>
            </div>
        </div>

        <script src="script/monaco/vs/loader.js"></script>
        <script>
            //Environment Paramters
            let editors = [];                       //List of opened editor
            let splitMode = false;                   //Split the screen into two half
            let focusedEditor = "mainEditor";       //The editor currently is focused
            let loadedModels = [];                  //Loaded models. Prevent duplicate loading problem
            let focusedFileInfo = [];
            let files = ao_module_loadInputFiles(); //Files imported from file system

            //Terminal realted
            let terminalStartingEndpoint = "../SystemAO/wstty/console.html";

            //Initiation functions  
            initEditor($("#ca1").find(".editor")[0], "mainEditor", files, restoreEditorState);
            initEditor($("#ca2").find(".editor")[0],"subEditor");

            //Load ready page into the editorCover
            $(".editorcover").load("home.html");

            //Get system info to determind the terminal endpoint
            $.get("../system/info/getArOZInfo", function(data){
                if (data.HostOS == "windows"){
                    terminalStartingEndpoint = "../SystemAO/wstty/console.html";
                }else if (data.HostOS == "linux"){
                    terminalStartingEndpoint = "../wstty/";
                    $("#initTerminal").attr('src', terminalStartingEndpoint);

                }
            });
           

            //Restore the previous editor state
            function restoreEditorState(editor){
                //Load previous state if exists
                if (window.location.hash.length > 1){
                    var stateString = window.location.hash.substr(1);
                    var oldState = JSON.parse(decodeURIComponent(stateString));

                    //Load the previous statue opened folder
                    if (oldState.folder !== undefined){
                        //Load the previous opened folder
                        var predictedName = oldState.folder.split("/").pop();
                        if (oldState.folder.substr(oldState.folder.length -1) == "/"){
                            var tmp = oldState.folder.split("/");
                            tmp.pop();
                            predictedName = tmp.pop();
                        }
                        
                        openProjectFolder([{
                            filename: predictedName,
                            filepath: oldState.folder
                        }], false);
                    }

                    //Open previous opened files
                    if (oldState.files !== undefined){
                        oldState.files.forEach(filepath => {
                            openFile(filepath, false);
                        })
                    }

                    //Open terminal if it is enabled previously
                    if (oldState.terminal !== undefined && oldState.terminal == true){
                        openTerminal();
                    }
                }
            }
            
            //Restore previous editor states
            function restoreUserPreference(){
                getStorage("fontsize",function(fontsize){
                    setFontSize(fontsize);
                });

                getStorage("splitmode",function(splitSetting){
                    if (splitSetting.error !== undefined){
                        return;
                    }
                    splitSetting = splitSetting.trim();
                     if (splitSetting == "true"){
                        splitMode = true;
                        $("#ca1").attr("class","codeBoard splitMode left")
                        $("#ca2").show();
                     }else{
                        splitMode = false;
                        $("#ca1").attr("class","codeBoard")
                        $("#ca2").hide();
                     }

                    //Update all editor's size
                    for (var i =0; i < editors.length; i++){
                        editors[i].editor.layout();
                    }
                });
            }
        
            //Check if it is run under vdi mode. If not, establish checkauth ping to keep session alive
            if (!ao_module_virtualDesktop){
                setInterval(function(){
                    $.get("../system/auth/checkLogin",function(data){
                        if (data.error != undefined){
                            $("#pingStatus").text(data.error);
                        }else{
                            var x = Date()
                            $("#pingStatus").text(x);
                        }
                        
                    });
                },30000);
            }else{
                $("#pingStatus").text("Web Desktop Mode");
            }

            $.get("../system/auth/checkLogin",function(data){
                var x = Date()
                $("#pingStatus").text(x);
            });

            //Bind the events of the tab objects
            function bindTabItemEvents(){
                $(".tabs .item").off("click").on('click',function(evt){
                    if ($(this).hasClass("selected")){
                        //This tab is already in focus.
                        return;
                    }
                    //Add focused class to the tab
                    $(this).parent().find(".item.selected").removeClass("selected");
                    $(this).addClass("selected");

                    //Check which editor this tab belongs to
                    var editorUUID = $(this).parent().parent().find(".editor").attr("editoruid");
                    var tabUUID = $(this).attr("uuid");
                    var targetEditor;
                    
                    for (var i =0; i < editors.length; i++){
                        if (editors[i].uuid == editorUUID){
                            targetEditor = editors[i];
                        }
                    }
                    if (typeof targetEditor === undefined){
                        console.log("Error when loading tab");
                        return;
                    }
                    changeTab(targetEditor,tabUUID);

                    //Update the selected item in opened editor as well
                    $("#openeditors .item.selected").removeClass("selected");
                    $("#openeditors .item").each(function(){
                        if ($(this).attr("uuid") == tabUUID){
                            $(this).addClass("selected");
                        }
                    });
                });

                $("#openeditors .item").off("click").on("click",function(evt){
                    //Update UI to match selected tab
                    $("#openeditors .item.selected").removeClass('selected');
                    $(this).addClass("selected");

                    //Get the target editor UUID
                    var tabID = $(this).attr("uuid");
                    var editorUUID = $(this).attr("editorUUID");
                    var targetEditorObject;
                    for (var i =0; i < editors.length; i++){
                        if (editors[i].uuid == editorUUID){
                            targetEditorObject = editors[i];
                        }
                    }
                    if (typeof targetEditorObject === undefined){
                        console.log("Error when loading tab");
                        return;
                    }

                    changeTab(targetEditorObject,tabID);

                    //Also highlight the tab menu as well
                    $(targetEditorObject.tabsMenu).find(".item.selected").removeClass('selected');
                    $(targetEditorObject.tabsMenu).find(".item").each(function(){
                        if ($(this).attr("uuid") == tabID){
                            $(this).addClass("selected");
                        }
                    });

                });

                $(".tabs .item .closebtn").off("click").on('click',function(evt){
                    evt.preventDefault();
                    evt.stopImmediatePropagation();
                    var tabUUID = $(this).parent().attr("uuid");
                    var editorUUID = $(this).parent().attr("editorUUID");

                    closeTabWithUUIDAndEditorID(tabUUID, editorUUID);
                });

                $("#openeditors .closebtn").off("click").on("click",function(evt){
                    evt.stopImmediatePropagation();
                    evt.preventDefault();
                    var tabUUID = $(this).parent().attr("uuid");
                    var editorUUID = $(this).parent().attr("editorUUID");

                    closeTabWithUUIDAndEditorID(tabUUID, editorUUID);
                });
            }

            //Close a tab given the editorUUID and the tabUUID.
            function closeTabWithUUIDAndEditorID(tabUUID, editorUUID){
                 //Find the editor object related to this tab
                 let targetEditorObject;
                for (var i =0; i < editors.length; i++){
                    if (editors[i].uuid == editorUUID){
                        targetEditorObject = editors[i];
                    }
                }
                if (targetEditorObject === undefined){
                    console.log("Error when closing tab");
                    return;
                }
                //Remove state and models from the editor object
                delete targetEditorObject.state[tabUUID];
                delete targetEditorObject.model[tabUUID];

                //Remove this tab from the list
                tabs = JSON.parse(JSON.stringify(targetEditorObject.tabs));
                for (var i =0; i < tabs.length; i++){
                    if (tabUUID == tabs[i].tabUUID){
                        targetEditorObject.tabs.splice(i,1);
                    }
                }

                //Remove the tab objects from DOM
                removeTabFromDOMWithUUID(tabUUID);
                
                if (targetEditorObject.tabs.length > 0){
                    //Switch to the first tab of the editor
                    var newFocusedTabUUID = targetEditorObject.tabs[0].tabUUID;
                    changeTab(targetEditorObject, newFocusedTabUUID);
                    focusTabWithUUID(newFocusedTabUUID);
                }else{
                    //No more tab lefts. Show the editor cover
                    $(targetEditorObject.tabsMenu).parent().find(".editorcover").show();
                    $(targetEditorObject.tabsMenu).parent().find(".editorcover").load("home.html");
                }
            }

            function getFocusedTabInfo(){
                var focusedEditorObject = getFocusedEditorObject();
                var focusedTabUUID = focusedEditorObject.currentTabUUID;
                for (var i =0; i < focusedEditorObject.tabs.length; i++){
                    var thistab = focusedEditorObject.tabs[i];
                    if (thistab.tabUUID == focusedTabUUID){
                         //Update the global focused tab info as the current working-on file
                        focusedFileInfo = thistab;
                        return thistab;
                    }
                }
               
            }

            function getCodeAreaFromEditorUUID(editorUUID){
                for (var i =0; i < editors.length; i++){
                    if (editors[i].uuid == editorUUID){
                        var tabsMenu = editors[i].tabsMenu;
                        return $(tabsMenu).parent();
                    }
                }
            }

            function updateFileStatusDisplay(filepath){
                $("#filepath").html(`<i class="code file icon"></i> ${filepath}`);
                var ext = filepath.split(".").pop();
                $("#fileExt").text(ext.toUpperCase());
            }

            function getFocusedEditorObject(){
                for (var i =0; i < editors.length; i++){
                    if (editors[i].uuid == focusedEditor){
                        return editors[i];
                    }
                }
            }

            function focusThisEditor(object){
                var editorUUID = $(object).attr("editorUID");
                focusedEditor = editorUUID;
                //Update the target file info
                var tabInfo = getFocusedTabInfo();
                if (tabInfo !== undefined){
                    updateFileStatusDisplay(tabInfo.filepath);
                }
            }

            function focusTabWithUUID(tabUUID){
                $(".tabs .item.selected").removeClass("selected");
                $(".tabs .item").each(function(){
                    if ($(this).attr("uuid") == tabUUID){
                        $(this).addClass("selected");
                    }
                });
                $("#openeditors .item.selected").removeClass("selected");
                 $("#openeditors .item").each(function(){
                    if ($(this).attr("uuid") == tabUUID){
                        $(this).addClass("selected");
                    }
                });
            }

            function removeTabFromDOMWithUUID(tabUUID){
                $(".tabs .item").each(function(){
                    if ($(this).attr("uuid") == tabUUID){
                        $(this).remove();
                    }
                });
                 //Remove the tab from OPEN EDITORS
                 $("#openeditors .item").each(function(){
                    if ($(this).attr("uuid") == tabUUID){
                        $(this).remove();
                    }
                });
            }

            function focusTab(uuid){
                $(".tabs .item").each(function(){
                    if ($(this).attr("uuid") == uuid){
                        $(this).addClass("selected");
                    }
                });

                $("#openeditors .item.selected").removeClass("selected");
                $("#openeditors .item").each(function(){
                    if ($(this).attr("uuid") == uuid){
                        $(this).addClass("selected");
                    }
                });
            }

            //Main script section for UI handling

            
            //Load context menu
            function initContextMenu(target, object){
                if (target == "file"){
                    //List items in files
                    $("#contextMenu").html(`
                    <div class="item">New File 
                        <div class="tips">Ctrl + N</div>
                    </div>
                    <div class="divider"></div>
                    <div class="item" onclick="openFileWithSelector();">Open File
                        <div class="tips">Ctrl + O</div>
                    </div>
                    <div class="item" onclick="openFolderWithSelector();">Open Folder
                        <div class="tips">Ctrl + Shift + O</div>
                    </div>
                    <div class="divider"></div>
                    <div class="item" onclick="saveCurrentFile();">Save</div>
                    <div class="item">Save As</div>
                    <div class="item" onclick="saveAllFiles();">Save All</div>
                    <!--<div class="divider"></div>
                    <div class="item">Preference</div>-->
                    <div class="divider"></div>
                    <div class="item" onclick="closeFileCurrentlyFocused();">Close File</div>
                    <div class="item" onclick="closeAllFiles();">Close All Files</div>
                    `);

                    if (ao_module_virtualDesktop){
                        $("#contextMenu").append(`<div class="item" onclick="hanleUserExit();">Exit</div>`);
                    }
                }else if (target == "edit"){
                    $("#contextMenu").html(`
                    <div class="item" onclick="undo();">Undo 
                        <div class="tips">Ctrl + Z</div>
                    </div>
                    <div class="item" onclick="redo();">Redo 
                        <div class="tips">Ctrl + Y</div>
                    </div>
                    <div class="divider"></div>
                    <div class="item" onclick="showClipboardReminders(1);">Cut
                        <div class="tips">Ctrl + X</div>
                    </div>
                    <div class="item" onclick="showClipboardReminders(2);">Copy
                        <div class="tips">Ctrl + C</div>
                    </div>
                    <div class="item" onclick="showClipboardReminders(3);">Paste
                        <div class="tips">Ctrl + V</div>
                    </div>
                    <div class="item" onclick="showClipboardReminders(4);">Find
                        <div class="tips">Ctrl + F</div>
                    </div>
                    <div class="item" onclick="showClipboardReminders(5);">Replace
                        <div class="tips">Ctrl + H</div>
                    </div>
                    <div class="divider"></div>
                    <div class="item" onclick="toggleSplit(true);">Split WorkSpace</div>
                    <div class="item" onclick="toggleSplit(false);">Merge WorkSpace</div>
                   
                    `);
                }else if (target == "view"){
                    $("#contextMenu").html(`
                        <div class="item">New Editor
                            <div class="tips"><i class="add icon"></i></div>
                        </div>
                        <div class="item">Open in new Tab
                            <div class="tips"><i class="external icon"></i></div>    
                        </div>
                        <div class="item">Open in floatWindow
                            <div class="tips"><i class="window restore outline icon"></i></div>
                        </div>
                        <div class="item" onclick="openFileInFileManager();">Reveal in File Manager 
                            <div class="tips"><i class="folder outline icon"></i></div>
                        </div>
                        <div class="item" onclick="openTerminal();">Open Terminal
                            <div class="tips"><i class="code icon"></i></div>
                        </div>
                        <div class="divider"></div>
                        <div class="item">Download
                            <div class="tips"><i class="download icon"></i></div>    
                        </div>
                    `);
                }else if (target == "fontsize"){
                    $("#contextMenu").html('');
                    for (var i = 8; i < 26; i++ ){
                        $("#contextMenu").append(`<div class="item" style="font-size:${i}px;" onclick="setFontSize(${i});">${i} px</div>`);
                    }
                    
                }else if (target == "help"){
                    $("#contextMenu").html(`
                    <div class="item" onclick="window.open('https://microsoft.github.io/monaco-editor/'); hideContextMenu();">About Monaco Editor</div>
                    <div class="divider"></div>
                    <div class="item" onclick="showLicense();">License</div>
                    <div class="item" onclick="showAboutNotepadA();">About NotepadA</div>
                    `);
                }

                $("#contextMenu").show();
                $("#contextMenu").css({
                    left: $(object).offset().left,
                    top: "28px"
                })

            }

            function showLicense(){
                $("#licenseInfo").modal("show");
                hideContextMenu();
            }

            function showAboutNotepadA(){
                $("#aboutnpa").modal("show");
                hideContextMenu();
            }

            function closeFileCurrentlyFocused(){
                var focusedEditor = getFocusedEditorObject();
                var editorUUID = focusedEditor.uuid;
                var tabsMenu = focusedEditor.tabsMenu;
                var focusedTabID = $(tabsMenu).find(".item.selected").attr("uuid");
                closeTabWithUUIDAndEditorID(focusedTabID,editorUUID);
                hideContextMenu();
            }

          
            function saveAllFiles(){
                //Store the editor object before saveall
                let beforeTabInfo = getFocusedTabInfo();
                let beforeEditor = getFocusedEditorObject();

                //Iterate through all editors and all tabs to save
                for (var i = 0; i < editors.length; i++){
                    var thisEditor = editors[i];
                    for (var j =0; j < thisEditor.tabs.length; j++){
                        var tabUUID = thisEditor.tabs[j].tabUUID;
                        changeTab(thisEditor, tabUUID);
                        saveCurrentFile();
                    }
                }

                //Restore the editor view
                changeTab(beforeEditor, beforeTabInfo.tabUUID);
                hideContextMenu();
            }


            function setFontSize(fontsize){
                for (var i =0; i < editors.length; i++){
                    var thisEditor = editors[i].editor;
                    thisEditor.updateOptions({
                        fontSize: fontsize
                    });
                }
                setStorage("fontsize",fontsize);
                hideContextMenu();
            }

            function toggleSplit(useSplitMode){
                if (useSplitMode){
                    $("#ca1").attr("class","codeBoard splitMode left")
                    $("#ca2").show();
                    setStorage("splitmode","true");
                }else{
                    $("#ca1").attr("class","codeBoard")
                    $("#ca2").hide();
                    setStorage("splitmode","false");
                }

                //Update all editor's size
                for (var i =0; i < editors.length; i++){
                    editors[i].editor.layout();
                }
                
                hideContextMenu();
            }
            
            //Hide all the context menus
            function hideContextMenu(){
                $("#contextMenu").hide();
            }

            //open a file with a new editor by the given filepath
            function openFile(filepath, updateHashStatus=true){
                //Get the focused editor
                var targetEditorGroup = undefined;
                for (var i =0; i < editors.length; i++){
                    if (editors[i].uuid == focusedEditor){
                        targetEditorGroup = editors[i];
                    }
                }

                if (targetEditorGroup === undefined){
                    alert("Unable to load editor.");
                    return;
                }

                //Check if the file is already loaded in this editor
                for (var i = 0; i < targetEditorGroup.tabs.length; i++){
                    var thisTab = targetEditorGroup.tabs[i];
                    if (thisTab.filepath == filepath){
                        //Focus this tab
                        changeTab(targetEditorGroup, thisTab.tabUUID);
                        return;
                    }
                }

                //Get the file
                ao_module_agirun("NotepadA/backend/read.agi",{
                    file: filepath
                }, function(filecontent){
                    //Get the target Opening Editor
                    let targetOpeningEditor;
                    for (var i = 0; i < editors.length; i++){
                        if (editors[i].uuid == focusedEditor){
                            targetOpeningEditor = editors[i];
                        }
                    }
                    if (typeof targetOpeningEditor === undefined){
                        console.log("Error when trying to get editor info")
                        return;
                    }
                    //Load the editor instances
                    var editor = targetOpeningEditor.editor;
                    var editorUUID = targetOpeningEditor.uuid;
                    var models = targetOpeningEditor.model;
                    var states = targetOpeningEditor.state;
                    var currentTabUUID = targetOpeningEditor.currentTabUUID;
                    var targetTabMenu =  targetOpeningEditor.tabsMenu;

                    //Save the current editor status into the data
                    var currentState = editor.saveViewState();
                    var currentModel = editor.getModel();
                    states[currentTabUUID] = currentState;
                    models[currentTabUUID] = currentModel;
                    
                    //Create a tab for this file
                    var tabUUID = new Date().getTime();
                    var filename = filepath.split("/").pop();
                    $(targetTabMenu).find(".item.selected").removeClass("selected");
                    $(targetTabMenu).append(`<div class="item selected" uuid="${tabUUID}"  editorUUID="${editorUUID}"><i class="code file icon"></i> ${filename} <div class="closebtn"><i class="remove icon"></i></i></div></div>`);

                    //Add this tab into the open editor list
                    $("#openeditors .item").removeClass("selected");
                    $("#openeditors").append(`<div class="item selected" uuid="${tabUUID}" editorUUID="${editorUUID}"><div class="closebtn" style="display:inline-block;"><i class="remove icon"></i></div> <i class="code file icon"></i> ${filename} </div>`);

                    //Update the current tag information
                    targetOpeningEditor.currentTabUUID = tabUUID

                    //Push the current tab into the array of tabs
                    targetOpeningEditor.tabs.push({
                        filename: filename,
                        filepath: filepath,
                        tabUUID: tabUUID,
                        saveHash: filecontent.hashCode()
                    });

                        //Update title if nonVDI or update floatWindow title if under fdi
                    if (ao_module_virtualDesktop){
                        ao_module_setWindowTitle("NotepadA - " + filename);
                    }else{
                        document.title = "NotepadA - " + filename;
                    }


                    //Check if model is loaded before
                    var model;
                    if (loadedModels[filepath] === undefined){
                            //Set the editor value and do model auto lanuage detection
                        model = monaco.editor.createModel(
                            filecontent,
                            undefined,
                            monaco.Uri.file("../media?file=" + encodeURIComponent(filepath))
                        )
                        loadedModels[filepath] = model;
                    }else{
                        //Load the already loaded model
                        model = loadedModels[filepath];
                    }
                    editor.setModel(model)

                    //Bind tab events
                    bindTabItemEvents();

                    //Update file info tab
                    var tabInfo = getFocusedTabInfo();
                    updateFileStatusDisplay(tabInfo.filepath);

                    //Hide the editorCover
                    var ca = getCodeAreaFromEditorUUID(editorUUID);
                    $(ca).find(".editorcover").hide();

                    //Write the opened filelist to window hash
                    if (updateHashStatus){
                        var currentState = getHashObject();
                        currentState["files"] = getOpenedFiles();
                        console.log(currentState);
                        writeHashObject(currentState);
                    }
                  
                });
            }

            function hash(s){
                return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);              
            }

            //Open fileSelector
            function openFileWithSelector(){
                ao_module_openFileSelector(externalFileLoader, "user:/Document", "file",true);
                hideContextMenu();
            }

            //Open folderSelector
            function openFolderWithSelector(){
                ao_module_openFileSelector(openProjectFolder, "user:/Document", "folder");
                hideContextMenu();
            }

            //Handle fileSelector return value
            function externalFileLoader(filedata){
                if (filedata.length > 0){
                    for (var i=0; i < filedata.length; i++){
                        filepath = filedata[i].filepath;
                        openFile(filepath);
                    }
                }
            }

            function openProjectFolder(filedata, rewriteHash=true){
                for (var i=0; i < filedata.length; i++){
                    folderpath = filedata[i].filepath;
                    foldername = filedata[i].filename;
                    //Load this as the folder 
                    $("#openFolderTitle").text(foldername.toUpperCase());
                    $("#directoryExplorer").html("");
                    $.get("../system/file_system/listDir?dir=" + encodeURIComponent(folderpath),function(data){
                        var folders = [];
                        var files = [];
                        if (data === null){
                            data = [];
                        }
                        for (var i =0; i < data.length; i++){
                            var filename = data[i].Filename;
                            var ext = filename.split(".").pop();
                            var icon = ao_module_utils.getIconFromExt(ext);
                            var filepath = data[i].Filepath;
                            if (data[i].IsDir){
                                icon = "folder";
                                folders.push(`
                                <div class="folderObjectWrapper">
                                    <div class="item" title="${filepath}" style="overflow:hidden;" onclick="listfolder(this);">
                                        <div class="showmore" style="display:inline-block;"><i class="caret right icon"></i></div>
                                        <i class="${icon} icon"></i> ${filename} 
                                    </div>
                                </div>
                                `);
                            }else{
                                files.push(`
                                <div class="item" title="${filepath}" style="overflow:hidden;" onclick="openFileViaDirectoryExplorer(this, event);">
                                    <i class="${icon} icon"></i> ${filename} 
                                </div>
                                `);
                            }
                           
                        }
                        $("#directoryExplorer").append(folders.join(""));
                        $("#directoryExplorer").append(files.join(""));
                    });

                    if (rewriteHash){
                        var currentState = getHashObject();
                        currentState["folder"] = foldername;
                        writeHashObject(currentState);
                    }

                }
            }

            function listfolder(folder){
                var folderPath = $(folder).attr("title");

                //Check if the folder is already list. If yes, toggle the list
                if ($(folder).parent().find(".dirlist").length == 0){
                    //Folder is not listed. Load from file system
                    $(folder).parent().append(`<div class="dirlist"></div>`);
                    $(folder).find(".showmore i").attr("class","caret down icon");
                    var targetListObject = $(folder).parent().find(".dirlist");
                    $.get("../system/file_system/listDir?dir=" + encodeURIComponent(folderPath),function(data){
                        var folders = [];
                        var files = [];
                        if (data === null){
                            data = [];
                        }
                        for (var i =0; i < data.length; i++){
                            var filename = data[i].Filename;
                            var ext = filename.split(".").pop();
                            var icon = ao_module_utils.getIconFromExt(ext);
                            var filepath = data[i].Filepath;
                            if (data[i].IsDir){
                                icon = "folder";
                                folders.push(`
                                <div class="folderObjectWrapper">
                                    <div class="subitem" title="${filepath}" style="overflow:hidden;" onclick="listfolder(this);">
                                        <div class="showmore" style="display:inline-block;"><i class="caret right icon"></i></div>
                                        <i class="${icon} icon"></i> ${filename} 
                                    </div>
                                </div>
                                `);
                            }else{
                                files.push(`
                                <div class="subitem" title="${filepath}" style="overflow:hidden;" onclick="openFileViaDirectoryExplorer(this,event);">
                                    <i class="${icon} icon"></i> ${filename} 
                                </div>
                                `);
                            }
                        }

                        //Push the items into the list
                        $(targetListObject).append(folders.join(""));
                        $(targetListObject).append(files.join(""));

                    });
                }else{
                    //Folder is already listed. Toggle show of filelist
                    if ($(folder).find(".caret.down.icon").length > 0){
                        //Folder list visiable. Hide it
                        $(folder).parent().find(".dirlist").slideUp('fast');
                        $(folder).find(".showmore i").attr("class","caret right icon");
                    }else{
                        //Folder list hidden. Show it
                        $(folder).parent().find(".dirlist").slideDown('fast');
                        $(folder).find(".showmore i").attr("class","caret down icon");
                    }
                }
            }

            function openFileViaDirectoryExplorer(object, event){
                var filepath = $(object).attr('title');
                openFile(filepath);
            }

            function toggleDirectoryExplorer(btn){
                if ($(btn).find("i").hasClass("right")){
                    $(btn).find("i").attr("class","caret down icon");
                    $("#directoryExplorer").slideDown('fast'); 
                }else{
                    $(btn).find("i").attr("class","caret right icon");
                    $("#directoryExplorer").slideUp('fast');
                }
            }

            //Initiate an editor with the given uuid and targetDOM
            function initEditor(targetDOM, editorUUID, loadPendingFiles = [], callback=undefined){
                require.config({ paths: { 'vs': 'script/monaco/vs' }});
                window.GlobalEnvironment = { getWorkerUrl: () => proxy };

                let proxy = URL.createObjectURL(new Blob([`
                    self.GlobalEnvironment = {
                        baseUrl: 'script/monaco/'
                    };
                    
                    importScripts('script/monaco/vs/base/worker/workerMain.js');
                `], { type: 'text/javascript' }));
                
                require(["vs/editor/editor.main"], function () {
                   let editor = monaco.editor.create(targetDOM, {
                        value: "",
                        language: 'javascript',
                        automaticLayout: true,
                        theme: 'vs-dark'
                    });

                    //Bind save event for this editor
                    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function() {
                        let thisEditor = editor;
                        //Save this editor text to the current editor focused tab folder
                        var tabInfo = getFocusedTabInfo();
                        var filepath = tabInfo.filepath;
                        var content = thisEditor.getValue();
                        //console.log(filepath, content);
                        saveContentToFile(tabInfo.tabUUID, filepath, content, function(data){
                            if (data.error !== undefined){
                                alert(data.error);
                            }else{
                                //OK
                                console.log("File saved");
                                msgbox("save","File Saved")
                            }
                        });
                    });

                    editors.push({
                        uuid: editorUUID,
                        tabsMenu: $(targetDOM).parent().find(".tabs"),
                        editor: editor,
                        currentTabUUID: "default",
                        model: [],
                        state: [],
                        tabs: []
                    });

                    //Check if there are load pending files. If yes, load them into this editor
                    if (loadPendingFiles !== null && loadPendingFiles.length > 0){
                        for (var i =0; i < loadPendingFiles.length; i++){
                            openFile(loadPendingFiles[i].filepath);
                        }
                    }

                    //Initialize user settings
                    restoreUserPreference();

                    //Perform callback with editor object if required
                    if (callback !== undefined){
                        callback(editor);
                    }
                });
                
              
            }

            /*
                Terminal Function Related

            */

            function terminalInit(){
                $(".ui.dropdown").dropdown();
            }

            var codeAreaBottomOffset = 0;
            function openTerminal(){
                //Open WsTTY on the editor
                codeAreaBottomOffset = 300;
                $("#terminals").show();
                updateCodeAreaSize();
                hideContextMenu();
                updateStatusHash("terminal",true);
            }

            function closeTerminal(){
                codeAreaBottomOffset = 0;
                $("#terminals").hide();
                updateCodeAreaSize();
                updateStatusHash("terminal",false);
            }

            function restartTerminal(){
                $("#terminals").find(".terminalWindow.focused").find("iframe").attr("src","");
                setTimeout(function(){
                    $("#terminals").find(".terminalWindow.focused").find("iframe").attr("src",terminalStartingEndpoint);
                }, 1000);
                
            }

            $(window).on("resize", function(data){
                updateCodeAreaSize();
            });

            updateCodeAreaSize();
            function updateCodeAreaSize(){
                $("#codeArea").css({
                    "height":window.innerHeight - 52 - codeAreaBottomOffset
                });

                editors.forEach(editor => {
                    editor.editor.layout();
                })
                
            }

            function openFileInFileManager(){
                var tabInfo = getFocusedTabInfo();
                var filepath = tabInfo.filepath;
                //Extract the parent dir
                var folderPath = "";
                if (filepath.substr(filepath.length -1) == "/"){
                    var tmp = filepath.split("/");
                    tmp.pop();
                    folderPath = tmp.pop();
                }else{
                    folderPath = filepath.split("/").pop();
                }
                ao_module_openPath(folderPath);
            }

            function getHashObject(){
                if (window.location.hash.length > 1){
                    var stateString = window.location.hash.substr(1);
                    var currentState = JSON.parse(decodeURIComponent(stateString));
                    return currentState
                }else{
                    return {};
                }
            }

            function writeHashObject(newStateObject){
                window.location.hash = JSON.stringify(newStateObject);
            }

            function updateStatusHash(key, value){
                var currentState = getHashObject();
                currentState[key] = value;
                writeHashObject(currentState);
            }

            function getOpenedFiles(){
                var openedFilepaths = [];
                editors.forEach(editor => {
                    editor.tabs.forEach(tab => {
                        openedFilepaths.push(tab.filepath);
                    })
                });

                return openedFilepaths;
            }

            function changeTab(editorObject, targettabUUID) {
                //Move focus to the selected editor
                focusedEditor = editorObject.uuid;
                //Get the basic information for the editor object
                var editor = editorObject.editor;
                var models = editorObject.model;
                var states = editorObject.state;
                var currentTabUUID = editorObject.currentTabUUID;

                //save the current editor states
                var currentState = editor.saveViewState();
                var currentModel = editor.getModel();
                states[currentTabUUID] = currentState;
                models[currentTabUUID] = currentModel;

                //Update the current Tab UUID
                editorObject.currentTabUUID = targettabUUID;

                //Load the content from the given uuid tab
                editor.setModel(models[targettabUUID]);
                editor.restoreViewState(states[targettabUUID]);
                editor.focus();

                //Update the target file info
                var tabInfo = getFocusedTabInfo();
                updateFileStatusDisplay(tabInfo.filepath);

                //Update title if nonVDI or update floatWindow title if under fdi
                if (ao_module_virtualDesktop){
                    ao_module_setWindowTitle("NotepadA - " + tabInfo.filename);
                }else{
                    document.title = "NotepadA - " + tabInfo.filename
                }

                //Focus this tab
                focusTabWithUUID(targettabUUID);
            }

            //Show clipboard reminders
            function showClipboardReminders(rt){
                var reminderText = "This function is keyboard shortcut only.";
                var iconClass = "keyboard icon";
                if (rt == 1){
                    reminderText = "Use the keyboard shortcut Ctrl + X to cut text from the editor.";
                    iconClass = "cut icon";
                }else if (rt == 2){
                    reminderText = "Use the keyboard shortcut Ctrl + C for copying text from the editor";
                    iconClass = "copy icon";
                }else if (rt == 3){
                    reminderText = "Use the keyboard shortcut Ctrl + V for pasting to editor.";
                    iconClass = "paste icon";
                }else if (rt == 4){
                    reminderText = "Press Ctrl + F on the editor to start searching.";
                    iconClass = "search icon";
                }else if (rt == 5){
                    reminderText = "Press Ctrl + H on the editor to start replacing text.";
                    iconClass = "sync alternate icon";
                }

                $("#clipboardReminderText").text(reminderText);
                $("#clipboardReminderIcon").attr("class",iconClass)
                $('#clipboardReminder').modal('show');
                hideContextMenu();
            }


            //Editor function binding
            function undo(){
                editorObject = getFocusedEditorObject();
                editorObject.editor.trigger('aaa','undo','aaa');
		        editorObject.editor.focus();
            }

            function redo(){
                editorObject = getFocusedEditorObject();
                editorObject.editor.trigger('aaa','redo','aaa');
		        editorObject.editor.focus();
            }

            function saveCurrentFile(){
                var tabInfo = getFocusedTabInfo();
                var focusedEditor = getFocusedEditorObject();
                var filepath = tabInfo.filepath;
                var content = focusedEditor.editor.getValue();
                saveContentToFile(tabInfo.tabUUID, filepath, content, function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        //OK
                        console.log("File saved");
                        msgbox("save","File Saved")
                    }
                });

                hideContextMenu();
            }

            function saveContentToFile(tabUUID, filepath, content, callback=undefined){
                syscall("writeFile",{"filepath":filepath, "content":content}, function(data){
                    if (callback !== undefined){
                        callback(data);
                    }
                    var contextHash = content.hashCode();
                    //Update all the tabs that contains this filepath
                    for (var i =0; i < editors.length; i++){
                        var thisEditor = editors[i];
                        for (var j =0; j < thisEditor.tabs.length; j++){
                            var thisTab = thisEditor.tabs[j];
                            if (thisTab.tabUUID == tabUUID){
                                thisTab.saveHash = contextHash;
                            }
                        }
                    }
                });
            }

            function msgbox(icon, message){
                $("#messageField").html(`<i class="${icon} icon"></i> ${message}`);
                $("#messageField").stop().finish().hide().fadeIn('fast').delay(5000).fadeOut('fast');
            }

            function setStorage(key, value){
                syscall("store",{opr:"set",key:key,value:value});
                /*
                $.post("./store",{opr: "set", key: key, value: value}).done(function(data){
                    if (data.error !== undefined){
                        console.log(data);
                    }
                });
                */
            }

            function getStorage(key, callback){
                syscall("store",{opr:"get",key:key}, callback);
                //$.post("./store",{opr: "get", key: key}).done(callback);
            }

            function hanleUserExit(){
                //Check for unsaved file, wip
                if (confirm("Some files might not be saved. Confirm exit?")){
                    ao_module_close();
                }
            }

            //Hashcode function for comparing save stated
            String.prototype.hashCode = function() {
                var hash = 0;
                if (this.length == 0) {
                    return hash;
                }
                for (var i = 0; i < this.length; i++) {
                    var char = this.charCodeAt(i);
                    hash = ((hash<<5)-hash)+char;
                    hash = hash & hash; // Convert to 32bit integer
                }
                return hash;
            }

            //Call to the system core with AJGI script
            function syscall(scriptName, data, callback=undefined){
                $.ajax({
                    url: "../system/ajgi/interface?script=NotepadA/backend/" + scriptName + ".agi",
                    method: "POST",
                    data: data,
                    success: function(data){
                        if (callback !== undefined){
                            callback(data);
                        }
                    }
                })
            }
        </script>
    </body>
</html>