TC
/
arozos


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
							<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type='text/javascript' charset='utf-8'>
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);
</script>
    <meta charset="UTF-8">
	<script src="../script/jquery.min.js"></script>
	<script src="../script/ao_module.js"></script>
	<title>ArOZ Onlineβ</title>
	<style>
	body{
		background-color:#2b2b2b;
	}
	* {
      font-family: arial;
    }
	
	.topbar{
		background-color: #d6d6d6;
		overflow: hidden;
		position:fixed;
		top:0px;
		left:0;
		width:100%;height:25px;
		padding-left: 5px;
	}
	
	button{
		padding: 5;
		border: none;
		background: none;
		height:25px;
	}
	
	button:hover {
		background-color: #edeaea;
		cursor: pointer;
	}
	
	#codeArea{
		width:100%;
		position:fixed;
		top:48px;
		left:0px;
	}
	
	#tabs{
		background-color: #d6d6d6;
		position:fixed;
		width:100%;
		height:23px;
		top:25px;
		left:0px;
		overflow-x:auto;
	}
	
	.fileTab{
		background-color: #bcbcbc;
		display:inline;
		padding-left: 8px;
		padding-right: 1px;
		margin-left:1px;
		height:25px;
		border-bottom: 3px solid #878787;
		cursor: pointer;
	}
	
	.fileTab.focused{
		background-color: #edeaea;
		display:inline;
		border-bottom: 3px solid #5b4cff;
		cursor: pointer;
	}

	.closeBtn{
		display:inline;
	}
	
	.contextmenu{
		position:fixed;
		top:25px;
		left:0px;
		width:auto;
		height:auto;
		background-color:#d6d6d6;
		z-index:100;
		border-style: solid;
		border-width: 1px;
		border-color: #626263;
		font-size:small;
		max-height: 100%;
		overflow-y: auto;
	}
	
	.menuitem{
		padding-top: 2px;
		padding-bottom: 3px;
		padding-left: 25px;
		padding-right: 10px;
	}
	
	.menuitem:hover{
		background-color: #edeaea;
		cursor: pointer;
	}
	
	.middleFloat{
		position:fixed;
		top:10%;
		bottom: 10%;
		left: 30%;
		right: 30%;
		background-color:#efefef;
		padding:25px;
		overflow-y:auto;
	}
	
	.selectable{
	    cursor: pointer;
	    padding:1px;
	    padding-left:10px;
	    border: 1px solid transparent;
	}
	
	.selectable:hover{
	    background-color:#ffffff;
	    border: 1px solid #2890ff;
	}
	
	.scs{
		display:inline-block;
		margin: 3px;
		padding-left: 10px;
		padding-top: 10px;
		width: 20px !important;
		height:30px;
		border: 1px solid #c4c4c4;
		cursor:pointer;
		font-weight: bold;
	}
	.scs:hover{
		border: 1px solid #6e86a0;
		background-color:#a9c7e8;
	}
	.npalogo{
		background-color:#2b2b2b;
		color:white;
		padding:8px;
	}
	#tabList{
		position:fixed;
		right:0px;
		top:45px;
		min-width:100px;
		z-index:99;
		background-color:#d6d6d6;
		text-align:right;
		padding-bottom:5px;
		display:none;
	}
	#showList{
		position:absolute;
		top:0px;
		cursor:pointer;
		right:0px;
		padding:5px;
		margin-top:-2px;
		display:none;
	}
	#showList:hover{
		background-color:#ffffff;
	}
	</style>
</head>
<body>
<div class="topbar">
	<button onClick="startTooggleMenu(this);">File</button>
	<button onClick="startTooggleMenu(this);">Edit</button>
	<button onClick="startTooggleMenu(this);">Search</button>
	<button onClick="startTooggleMenu(this);">Theme</button>
	<button onClick="startTooggleMenu(this);">Font_Size</button>
	<button onClick="startTooggleMenu(this);">About</button>
</div>
<div id="tabs" onClick="hideToggleMenu();">
<div id="showList" onClick="showFullTabMenu();">⬇️ All Tabs</div>
</div>
<div id="tabList">
</div>
<div id="codeArea">

</div>
<div id="topbarMenu" class="contextmenu" style="display:none;">

</div>
<div id="aboutus" class="middleFloat" style="display:none;">
	<h3>📝 NotepadA ArOZ Online In-System Text Editor</h3>
	<p>Author: Toby Chui 2017-2022</p>
	<hr>
	<p>This web based text editor for ArOZ Online System are made possible by the ace editor, jQuery and ArOZ Project. Part of the system are licensed under BSD License. Please refer to the individual license information under the library folder. <br><br><br>
 	Developed for ArOZ Online Beta and migrated to ArozOS</p>
	<hr>
	<p>BSD License<p>
	<p style="font-size:70%;">All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright
   notice, this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright
   notice, this list of conditions and the following disclaimer in the
   documentation and/or other materials provided with the distribution.
3. All advertising materials mentioning features or use of this software
   must display the following acknowledgement:
   This product includes software developed by the <organization>.
4. Neither the name of the <organization> nor the
   names of its contributors may be used to endorse or promote products
   derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY <COPYRIGHT HOLDER> ''AS IS'' AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
	<hr>
	<button style="background-color:white;border: 1px solid #707070;" onClick="$('#aboutus').hide();">Close</button>
	<br><br><br><br><br>
</div>

<div id="saveAsSelectionMenu" class="middleFloat" style="display:none;">
    <table id="directoryList" style="width:100%;font-size:80%;">
        <tr><th id="directoryPath">📂 /</th></tr>
        <tr><td>Initializing...</td></tr>
    </table>
    <br>
    <hr>
    Save Filename
    <input id="saveAsFilename" style="width:100%;"></input>
    <hr>
    <button style="background-color:white;border: 1px solid #707070;" onClick="saveToDirectory();">Save In Current Directory</button>
    <button style="background-color:white;border: 1px solid #707070;" onClick="$('#saveAsSelectionMenu').hide();">Close</button>
   <br><br><br><br><br>
</div>

<div id="specialCharInsert" class="middleFloat" style="display:none;">
	Insert Special Character
	<hr>
	<br>
	<div id="iscl" style="max-height:70%;left:0;right:0;overflow-y:scroll;overflow-wrap: break-word;">
			
	</div>
	<hr>
	<button style="background-color:white;border: 1px solid #707070;" onClick="$('#specialCharInsert').hide();">Close</button><p style="font-size:50%;display:inline-block;padding-left:20px;" id="scid">N/A</p>
</div>
<script>
//Global variables
var moduleRootPath = "NotepadA/";
var dragIn = "";
var theme = 'github';
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox')
var lastSelectedMenuItem = "";
var fontsize = 12;
var VDI = ao_module_virtualDesktop;
var openedFilePath = [];
var previousSavedState = true;
var currentSaveAsPath = "user:/Desktop";
var insertTarget;
var currentTabWidth = 0;
var mainCodingWindow = true;
var functionList = {
	File: ["📄 New","📂 Open File","Run in FloatWindow","Open current directory","Reload","💾 Save","💾 Save As","Close All Tabs","🖨 Print","Exit"],
	Edit: ["⤺ Undo","⤻ Redo","Open in New Tab", "Open tmp folder"],
	Search:["Find / Replace"],
	Theme:["ambiance","chaos","chrome","clouds","clouds_midnight","cobalt","crimson_editor","dawn","dracula","dreamweaver","eclipse","github","gob","gruvbox","idle_fingers","iplastic","katzenmilch","kr_theme","kuroir","merbivore","merbivore_soft","mono_industrial","monokai","pastel_on_dark","solarized_dark","solarized_light","sqlserver","terminal","textmate","tomorrow","tomorrow_night","tomorrow_night_blue","tomorrow_night_bright","tomorrow_night_eighties","twilight","vibrant_ink","xcode"],
	Font_Size:["8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"],
	About:["About NotepadA"]
};

//Init functions
adjustCodeAreaHeight();
bindListener();
init();

//Start all NotepadA services
function init(){
	initTheme(function(){
		initFontSize(function(){
			initNotepadA(function(){
				reloadAllTabs();
				loadAllSpecialCharacter();
			});
		});
	});
}

//Init notepadA. If there are previos stored page, load them into the environment. Or otherwise, just open a blank page.
function initNotepadA(callback=undefined){
	//Load input file from ao_module
	inFiles = ao_module_loadInputFiles();
	if (inFiles == null){
		dragIn = "";
	}else{
		dragIn = [];
		inFiles.forEach(function(file){
			dragIn.push(file.filepath); 
		});
	}

	loadStorage("sessionFiles", function(sessionFiles){
		if (sessionFiles == ""){
			//No previous opened files
			if (dragIn != ""){
				//If there is a file dragin, open it as well.
				dragIn.forEach(function(openingFile){
					newEditor(openingFile);
				})
			}else{
				newTab();
			}
		}else{
			//There are perviously opened files
			var pages = JSON.parse(sessionFiles);
			for (var i =0; i < pages.length;i++){
				let page = pages[i];
				newEditor(page);
			}

			if (dragIn != ""){
				//If there is a file dragin, and it hasn't been opened, open it
				dragIn.forEach(function(filepath){
					if (pages.indexOf(filepath) == -1){
						newEditor(filepath);
					}else{
						focusTab($($(".fileTab")[pages.indexOf(filepath)]).attr("tabid"));
					}
				})
			}
		}

		setTimeout(function(){
			setInterval(function(){
				var tabid = getFocusedTab();
				if (tabid.length == 0){
					return;
				}
				var tab = findTabWithAttr("framematch",tabid[0]);
				var saved = checkTabSaved(tabid[0]);
				if (saved != previousSavedState){
					previousSavedState = saved;
					if (saved){
						ao_module_setWindowTitle("NotepadA   	 📝 " + tab.attr("filename").replace("../../","/aor/"));
						document.title = "NotepadA   	 📝 " + tab.attr("filename").replace("../../","/aor/");
					}else{
						ao_module_setWindowTitle("NotepadA   	 *💾 📝 " + tab.attr("filename").replace("../../","/aor/"));
						document.title = "NotepadA   	 *💾 📝 " + tab.attr("filename").replace("../../","/aor/");
					}
				}
				
				
			},1000);
		},500);
		
		toggleFileTabsList();

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

function initTheme(callback=undefined){
	loadStorage("NotepadA_theme", function(data){
		if (data != ""){
			theme = data;
		}
		console.log("NotepadA Theme Loaded: " + theme)
		if (callback != undefined){
			callback();
		}
	});
}

function initFontSize(callback=undefined){
	loadStorage("NotepadA_fontsize", function(data){
		if (data != ""){
			fontsize = data;
		}
		if (callback != undefined){
			callback();
		}
	});

	
}


//Add a new editor window to the editor (?) -->ALL FILE PATH PASSED IN MUST BE FROM AOR OR /media/storage*
function newEditor(filepath){
     if (openedFilePath.includes(filepath)){
        //This page is already opened. Ignore this request and focus on the existing tab.
        $(".fileTab").each(function(){
            if ($(this).attr("filename").includes(filepath)){
                var tabid = $(this).attr("tabid");
                focusTab(tabid);
            }
        });
        return;
    }
	let tabid = Math.round((new Date()).getTime());
	let payload = {
		"tabid": tabid,
		"theme": theme,
		"filename": filepath,
		"fontsize": fontsize,
		"timestamp": Date.now() //Add this to make sure browser dont cache resp
	}

	let encodedPayload = encodeURIComponent(JSON.stringify(payload))
	var tab = `<div class="fileTab" tabid="${tabid}" framematch="ca${tabid}" filename="${filepath}">
				loading... <div class="closeBtn">⨯</div>
				</div>`;
	var frame = `<div style="position:fixed;width:100%;"><iframe id="ca${tabid}" class="editor" src="ace/editor.html#${encodedPayload}" width="100%" frameBorder="0"></iframe></div>`;
	$("#tabs").append(tab);
	$("#codeArea").append(frame);
	updateFrameAttr('ca' + tabid);
	focusTab(tabid + "");
	if (openedFilePath.indexOf(filepath) == -1){
		openedFilePath.push(filepath);
	}
	setStorage("sessionFiles",JSON.stringify(openedFilePath));
}

function newTab(){
	let tabid = Math.round((new Date()).getTime());
	let fileID = 'newfile_' + tabid;

	ao_module_agirun(moduleRootPath + "backend/newfile.js", {
		tmpid: fileID
	}, function(data){
		if (data.error == undefined){
            //Finish writting to the new file. Open the new file in new tab
            var tab = '<div class="fileTab" tabid="'+tabid+'" framematch="ca'+tabid+'" filename="' + data + '">\
					loading... <div class="closeBtn">⨯</div>\
					</div>';
			let payload = {
				"tabid": tabid,
				"theme": theme,
				"filename": data,
				"fontsize": fontsize,
				"timestamp": Date.now() //Add this to make sure browser dont cache resp
			}
			let encodedPayload = encodeURIComponent(JSON.stringify(payload))
			var frame = '<div style=""><iframe id="ca'+tabid+'" class="editor" src="ace/editor.html#' + encodedPayload + '" width="100%" frameBorder="0"></iframe></div>';
			$("#tabs").append(tab);
			$("#codeArea").append(frame);
			updateFrameAttr('ca' + tabid);
			setTimeout(function(){focusTab(tabid + "");},100);
			if (openedFilePath.indexOf(data) == -1){
				openedFilePath.push(data);
			}
			setStorage("sessionFiles",JSON.stringify(openedFilePath));
        }else{
           alert("Create tmp file failed");
        }
	})

	
}

function saveToDirectory(){
    var targetPath = currentSaveAsPath;
    var newfilename = $("#saveAsFilename").val();
    var framematch = getFocusedTab()[0];
    var editorContent = $("#" + framematch)[0].contentWindow.getEditorContenet();

	ao_module_agirun(moduleRootPath + "backend/filesaver.js", {
		filepath: targetPath + newfilename,
		content: editorContent
	}, function(data){
		if (data.error == undefined){
            //Finish writting to the new file. Open the new file in new tab
            newEditor(targetPath + newfilename);
            $("#saveAsSelectionMenu").hide();
        }else{
            console.log(data);
        }
	})
}

function changeSaveAsPath(object){
    var newdir = $(object).attr("foldername");
    SetSaveAsPath(newdir);
}

function getSelectedText(){
    var id = getFocusedTab()[0];
    var text = $("#" + id)[0].contentWindow.getSelectedText();
    return text;
}

function insertText(text){
    var id = getFocusedTab()[0];
    var text = $("#" + id)[0].contentWindow.insertGivenText(text);
}

function saveToAOCC(){
   var content = getSelectedText();
   alert(content);
}

function SetSaveAsPath(dirpath){
    $("#directoryList").html("<tr><th>Loading...</th></tr>");
	if (dirpath == ""){
		dirpath = "user:/"
	}
	currentSaveAsPath = dirpath;
	//Make sure there is always an ending / at the end of current savepath
	if (currentSaveAsPath.substring(currentSaveAsPath.length - 1, currentSaveAsPath.length) != "/"){
		currentSaveAsPath = currentSaveAsPath + "/";
	}

	//Listdir
	ao_module_agirun(moduleRootPath + "backend/getDir.js", {listpath: currentSaveAsPath}, function(result){
		if (result.error !== undefined){
			onsole.log(result);
		}else{
			$("#directoryList").html("<tr><th>📂 " + currentSaveAsPath + "</th></tr>");
			if (currentSaveAsPath.split("/").length >= 3){
				//Not root
				let parentPath = currentSaveAsPath.substr(0, currentSaveAsPath.length -1).split("/");
				parentPath.pop();
				parentPath = parentPath.join("/");
				$("#directoryList").append(`<tr><td class="selectable" foldername="${parentPath}" onClick="changeSaveAsPath(this);">⏎ ../</td></tr>`);
			}
			for (var i = 0; i < result.length; i++){
					$("#directoryList").append('<tr><td class="selectable" foldername="'+result[i][0]+'"  onClick="changeSaveAsPath(this);"> 📂 '+result[i][1]+'</td></tr>');
			} 
		}
	})
	 /*
    if (dirpath == "../"){
       currentSaveAsPath = currentSaveAsPath.split("/")
       while (currentSaveAsPath.pop() == ""){
           ;
       }
       currentSaveAsPath = currentSaveAsPath.join("/") + "/";
        $.ajax({url: "getDir.php?directory=" + currentSaveAsPath, success: function(result){
            if (result.includes("ERROR") == false){
                //Update the current saveAs menu to latest directory
                $("#directoryList").html("<tr><th>📂 " + currentSaveAsPath + "</th></tr>");
                if (currentSaveAsPath != "/" && currentSaveAsPath != "/media/"){
                    $("#directoryList").append('<tr><td class="selectable" foldername="../" onClick="changeSaveAsPath(this);">⏎ ../</td></tr>');
                }
                for (var i = 0; i < result.length; i++){
					var decodedFilename = ao_module_codec.decodeHexFoldername(result[i][1]);
                     $("#directoryList").append('<tr><td class="selectable" foldername="'+result[i][1]+'"  onClick="changeSaveAsPath(this);"> 📂 '+decodedFilename+'</td></tr>');
                } 
                
            }else{
                console.log(result);
            }
        }});
    }else{
        currentSaveAsPath +=  dirpath + "/";
        $.ajax({url: "getDir.php?directory=" + currentSaveAsPath, success: function(result){
            if (result.includes("ERROR") == false){
                //Update the current saveAs menu to latest directory
                $("#directoryList").html("<tr><th>📂 " + currentSaveAsPath + "</th></tr>");
                if (currentSaveAsPath != "/" && currentSaveAsPath != "/media/"){
                    $("#directoryList").append('<tr><td class="selectable" foldername="../" onClick="changeSaveAsPath(this);">⏎ ../</td></tr>');
                }
                for (var i = 0; i < result.length; i++){
					var decodedFilename = ao_module_codec.decodeHexFoldername(result[i][1]);
                     $("#directoryList").append('<tr><td class="selectable" foldername="'+result[i][1]+'"  onClick="changeSaveAsPath(this);"> 📂 '+decodedFilename+'</td></tr>');
                } 
                
            }else{
                console.log(result);
            }
        }});
    }
	*/
}


function adjustCodeAreaHeight(){
	if (VDI){
		if (isFirefox){
			$("#tabs").css("top","22px").css("height","24px");
			$("#codeArea").css("top","45px")
		}
		if (isChrome){
			$("#tabs").css("top","22px").css("height","22px");
			$("#codeArea").css("top","42px");
		}
		if (is_safari){
			$("#tabs").css("top","22px").css("height","21px");
			$("#codeArea").css("top","41px");
		}
    	var h = window.innerHeight;
    	if (isChrome){
    	    h = h - 21;
		}else if (is_safari){
			h = h - 20;
    	}else{
    	    h = h - 24;
    	}
		$("#codeArea").css("height",h);
		$(".editor").each(function(i) {
			$(this).attr("height",h - 6);
		});
	}else{
		$(".editor").each(function(i) {
			$(this).css("height",$(document).height() - 38);
		});
	}
}

function checkTabSaved(framematch){
	if (typeof $("#" + framematch)[0].contentWindow.checkIsSaved !== "undefined") { 
		var result = $("#" + framematch)[0].contentWindow.checkIsSaved();
		return result;
	}
	
}

$( window ).resize(function() {
	adjustCodeAreaHeight();
	toggleFileTabsList();
});

function showFullTabMenu(){
	$("#tabList").slideToggle('fast');
}

var inList = false;
function toggleFileTabsList(){
	//Check if the width of the container is enough for holding all the filetabs. If no, move all of them into the filtab list.
	var totalWidthOfFileTabs = 0;
	var maxWidth = 0;
	$("#tabList").show();
	$(".fileTab").each(function(){
		totalWidthOfFileTabs = totalWidthOfFileTabs + $(this).width();
		if ($(this).width() > maxWidth){
			maxWidth = $(this).width();
		}
	});
	$("#tabList").hide();
	totalWidthOfFileTabs = parseInt(totalWidthOfFileTabs);
	if (window.innerWidth < totalWidthOfFileTabs && !inList){
		//window innerWidth space is less than the space needed to put all tabs. Move all of them into the list instead.
		$(".fileTab").each(function(){
			$("#tabList").append($(this));
			$("#tabList").append("<br>");
		});
		inList = true;
		$("#showList").show();
		$("#tabList").show();
	}else if (window.innerWidth > totalWidthOfFileTabs && inList){
		$(".fileTab").each(function(){
			$("#tabs").append($(this));
		});
		$("#tabList").html("");
		inList = false;
		$("#showList").hide();
		$("#tabList").hide();
	}
	currentTabWidth = totalWidthOfFileTabs;
}

function bindListener(){
	$(document).on('click', '.closeBtn', function () {
		removeTab($(this).parent().attr('tabid'));
	});

	$(document).on('click','.fileTab',function(){
		if ($(this).hasClass("closeBtn") == false){
			focusTab($(this).attr('tabid'));
		}
	});

	$(document).on('click','#codeArea',function(){
		$("#topbarMenu").hide();
	});
	
	$(document).on('click','.menuitem',function(){
		if (lastSelectedMenuItem == "Theme"){
			setTheme($(this).text());
			$("#topbarMenu").hide();
		}else if (lastSelectedMenuItem == "Font_Size"){
			setFontSize($(this).text());
			$("#topbarMenu").hide();
		}else if (lastSelectedMenuItem == "File"){
			handleFileMenu($(this).text());
			$("#topbarMenu").hide();
		}else if (lastSelectedMenuItem == "About"){
			handleAboutMenu($(this).text());
			$("#topbarMenu").hide();
		}else if (lastSelectedMenuItem == "Search"){
		    if ($(this).text() != ""){
		        launchFocusedTabSearchBox();
		    }
		    $("#topbarMenu").hide();
		}else if (lastSelectedMenuItem == "Edit"){
		    handleEditMenu($(this).text());
		    $("#topbarMenu").hide();
		}else{
			alert(lastSelectedMenuItem);
		}
		
	});
	
}

function handleEditMenu(itemText){
    var indexvalue = functionList.Edit.indexOf(itemText);
	switch (indexvalue){
		case 0:
			var id = getFocusedTab()[0];
			$("#" + id)[0].contentWindow.callUndo();
			break;
		case 1:
			var id = getFocusedTab()[0];
			$("#" + id)[0].contentWindow.callRedo();
			break;
	    case 2:
			var id = getFocusedTab()[0];
	        $("#" + id)[0].contentWindow.openInNewTab();
			//Call to openInNewTab function for opening new tab;
	        break;
	    case 3:
			//Open tmp folder
			ao_module_openPath("user:/Document/NotepadA/");
	        break;
	    
	}
    
}

function updateFrameAttr(framematch){
	//This function will update the tab title, iframe attr at the same time. 
	var frame = $("#" + framematch);
	var tab = findTabWithAttr("framematch",framematch);
	var filepath = tab.attr("filename");
	var filedata = getFilenameAndBasedir(filepath);
	var basedir = filedata[0];
	var filename = filedata[1];
	
	//Update the tag text to the filename
	if (filename.substring(0,5) == "inith"){
		filename = ao_module_codec.decodeUmFilename(filename);
	}
	$(tab).html(filename + ' <div class="closeBtn">⨯</div>');
	//Update the iframe attr
	$(frame).attr("basedir",basedir);
	$(frame).attr("filename",filename);
	//
	adjustCodeAreaHeight();
}

function getFilenameAndBasedir(filepath){
	var f = filepath.split("/").pop();
	var b = filepath.replace(f,"");
	return [b,f];
}

function reloadAllTabs(){
	$(".fileTab").each(function(){
		var tid = $(this).attr("tabid");
		reloadTab(tid + "");
		updateFrameAttr($(this).attr("framematch"));
	});
}

function reloadTab(tabID){
	var object = findTabWithAttr("tabid",tabID);
	var filename = $(object).attr("filename");
	var codeAreaID = $(object).attr("framematch");
	let payload = {
		"tabid": tabID,
		"theme": theme,
		"filename": filename,
		"fontsize": fontsize,
		"timestamp": Date.now() //Add this to make sure browser dont cache resp
	}
	let encodedPayload = encodeURIComponent(JSON.stringify(payload))
	console.log($("#" + codeAreaID));
	$("#" + codeAreaID).attr("src","ace/editor.html#" + encodedPayload);
	$("#" + codeAreaID)[0].contentWindow.location.reload();
}

function launchFocusedTabSearchBox(){
    var framematch = getFocusedTab()[0];
    $("#" +framematch)[0].contentWindow.startSearchBox();
    //alert(framematch);
}

function handleOpenFileFunctionCall(fileData){
	if (fileData.length == 0){
		return;
	}

	fileData = fileData[0];
	var filepath = fileData.filepath;
	var filename = fileData.filename;
	var match = false;
	var tabid = "";
	$(".fileTab").each(function(){
		if ($(this).attr("filename") == filepath){
			match = true;
			tabid = $(this).attr("tabid");
		}
	});
	if (!match){
		//This file is not opened yet. Open it
		newEditor(filepath);
	}else{
		//This file is opened. Focus to that tab
		focusTab(tabid);
	}
	
}

function handleFileMenu(itemText){
	var indexvalue = functionList.File.indexOf(itemText);
	switch (indexvalue){
		case 0:
			//New file
			newTab();
			break;
		case 1:
			//Open a file by fileSelector
			ao_module_openFileSelector(handleOpenFileFunctionCall, "user:/Desktop", "file", false);
			break;
		case 2:
			//Run this script in floatWindow
			if (!VDI){
				alert("[ERROR] Please launch the NotepadA in Virtual Desktop Mode to launch FloatWindow.");
				break;
			}
			var id = getFocusedTab()[0];
			//var uid = Math.round((new Date()).getTime() / 1000);
			var currentFilepath = $("#" + id)[0].contentWindow.getFilepath().replace("../","");
			var fileExt = currentFilepath.split(".").pop();
			var url = "./media?file=" + currentFilepath;
			var title = "NotepadA Runtime";
			var icon = "code";
			ao_module_newfw({
				url: url,
				width: 1080,
				height: 580,
				title: title,
				appicon: "NotepadA/img/small_icon.png",
			});
			/*
				if (url.substr(0,14) == "/media/storage"){
					title += " (External Storage)";
					url = "SystemAOB/functions/extDiskAccess.php?file=" + url;
					newfw(url,title,icon,uid,1080,580);
				}else{
					newfw(url,title,icon,uid,1080,580);
				}
			*/
			break;
		case 3:
			//Open the current folder in explorer
			var base = getFocusedTab()[1];
			if (base == undefined){
				break;
			}
			/*
			if (base.includes("../../")){
			    base = base.replace("../../","");
			}

			
			var url = "SystemAOB/functions/file_system/index.php?controlLv=2&finishing=embedded&subdir=" + base;
			if (base.substr(0,14) == "/media/storage"){
				//This file is located in external storage location. Open file editor in ext mode
				url = "SystemAOB/functions/file_system/index.php?controlLv=2&finishing=embedded&dir=" + base;
			}
			var uid = Math.round((new Date()).getTime() / 1000);
			var title = "NotepadA" + " - Folder View";
			var icon = "folder open";
			if (!VDI){
				window.open("../" + url);
				break;
			}
			newfw(url,title,icon,uid,1080,580);
			*/

			ao_module_openPath(base);
			break;
		case 4:
			//Reload is pressed
			var currentFocusedtid = getFocusedTab()[0];
			if (currentFocusedtid == undefined){
				break;
			}
			var tabobject = findTabWithAttr("framematch",currentFocusedtid);
			reloadTab(tabobject.attr("tabid") + "");
			break;
		case 5:
			//Save is pressed
			var currentFocusedtid = getFocusedTab()[0];
			if (currentFocusedtid == undefined){
				break;
			}
			$("#" + currentFocusedtid)[0].contentWindow.Save();
			break;
		case 6:
		    //save-as is pressed. Pop up the saveas menu to continue
		    $("#saveAsSelectionMenu").show();
		    currentSaveAsPath = "";
		    SetSaveAsPath("");
		    var focusedFramematch = getFocusedTab()[0];
		    var filename =  $("#" + focusedFramematch).attr("filename");
		    var ext = filename.split(".").pop();
		    if (ext == filename){
		        ext = "txt";
		    }
		    setTimeout( function() {$("#saveAsSelectionMenu").scrollTop(0)}, 200 );
		    $("#saveAsFilename").val("untitled." + ext);
		    break;
		case 7:
			$(".fileTab").each(function(){
				removeTab($(this).attr("tabid"));
			});
			break;
		case 8:
			var id = getFocusedTab()[0];
			$("#" + id)[0].contentWindow.Print();
			break;
		case 9:
			ao_module_close();
	}
}

function handleAboutMenu(itemText){
	var indexvalue = functionList.About.indexOf(itemText);
	if (indexvalue == 0){
		$("#aboutus").show();
	}
}

function getFocusedTab(){
	result = [];
	$(".fileTab").each(function(){
		if ($(this).hasClass("focused")){
			//This tab is focused. Check its filename and pathinfo
			var id = $(this).attr("framematch");
			var filename = $("#" + id).attr("filename");
			var basedir = $("#" + id).attr("basedir");
			result = [id,basedir,filename];
		}
	});
	return result;
}

function setTheme(themeName){
	setStorage("NotepadA_theme",themeName);
	theme = themeName;
	
	if (checkIfAllTabSaved() == false){
		//Ask the user if confirm close
		var confirmClose = confirm("Reloading NotepadA is required to apply the changes. Confirm?");
		if (confirmClose == false){
			return false;
		}
	}
	console.log("Updating theme to: " + themeName);
	//Reload all tabs with the corrispoding themes after changing theme settings
	reloadAllTabs();
}

function setFontSize(newsize){
	setStorage("NotepadA_fontsize",newsize);
	fontsize = newsize;

	if (checkIfAllTabSaved() == false){
		//Ask the user if confirm close
		var confirmClose = confirm("Reloading NotepadA is required to apply the changes. Confirm?");
		if (confirmClose == false){
			return false;
		}
	}
	reloadAllTabs();
}

function checkIfAllTabSaved(){
	var allSaved = true;
	$(".editor").each(function(){
		if ($(this)[0].contentWindow.checkIsSaved() == false){
			allSaved = false;
		}
	});
	return allSaved;
}

function setStorage(configName,configValue){
	//localStorage.setItem(name, value);
	ao_module_storage.setStorage("NotepadA", configName, configValue);
	return true;
}

function loadStorage(configName, callback){
	var result = "";
	ao_module_storage.loadStorage("NotepadA", configName, callback);
}

function removeTab(tabid){
	var focusingTabFramematchBeforeRemove = getFocusedTab()[0];
	let origianlTabID = findTabWithAttr("framematch",focusingTabFramematchBeforeRemove).attr("tabid");
	var targetTab = findTabWithAttr("tabid",tabid);
	var filepath = targetTab.attr("filename").replace("../../","");
	var codeAreaTag = $(targetTab).attr("framematch");
	//Check if the tab is saved
	var saved = checkTabSaved(targetTab.attr("framematch"));
	if (saved == false){
		//Ask the user if confirm close
		var confirmClose = confirm("This file is not saved. Confirm closing?");
		if (confirmClose == false){
			return false;
		}
	}
	//Remove this record from the filepath so we will not open this again by the enxt time we startup NotepadA
	openedFilePath.remove(filepath);
	if ($(targetTab).hasClass("focused")){
		//This tab is currently focused, move focus to another tab after closing
		$(targetTab).remove();
		//I have no idea why this only works with a delay... but just don't change this.
		setTimeout(function(){
			var focusTarget = $(".fileTab").last().attr("tabid");
			focusTab(focusTarget); }, 100);
	}else{
		$(targetTab).remove();
		setTimeout(function(){ focusTab(origianlTabID);}, 100);
	}
	$("#" + codeAreaTag).remove();
	if ($(".fileTab").length == 0){
		//There is no more tab left, create a new tab instead
		setTimeout(function(){ newTab("untitled"); }, 100);
	}
	setStorage("sessionFiles",JSON.stringify(openedFilePath));
	toggleFileTabsList();
}

function hideToggleMenu(){
	$("#topbarMenu").hide();
}

$(".scs").hover(function(){
	var keyid = $(this).attr("keyid");
	$("#scid").html("HTML Keycode: #&" + keyid);
});

$(".scs").on("mousedown",function(){
	insertTarget.insertChar($(this).text());
	$("#specialCharInsert").hide();
});

function startTooggleMenu(object){
	var menu = $(object).text();
	var pos = $(object).offset().left - 5;
	toogleMenu(pos,menu);
}

function toogleMenu(left,contentID){
	$("#topbarMenu").css("left",left + "px");
	if (contentID != lastSelectedMenuItem && $("#topbarMenu").is(":visible")){
		$("#topbarMenu").hide();
	}
	loadOptionToMenu(contentID);
	$("#topbarMenu").toggle();
	lastSelectedMenuItem = contentID;
}

function loadOptionToMenu(menuItem){
	var items = functionList[menuItem];
	$("#topbarMenu").html("");
	for (var i=0; i < items.length;i++){
		$("#topbarMenu").append("<div class='menuitem'>" + items[i] + "</div>");
	}
}

function focusTab(tabid){
	//Defocus every tabs and hide all coding windows
	$(".fileTab").each(function(i) {
		$(this).removeClass("focused");
	});
	$(".editor").each(function(i) {
		$(this).hide();
	});
	//Only show the tab and code window selected
	var selectedTab = findTabWithAttr("tabid",tabid);
	$(selectedTab).addClass("focused");
	var corrispondingCodingTab = $(selectedTab).attr("framematch");
	var targetFrame = $("#" + corrispondingCodingTab);
	targetFrame.show();
	if (selectedTab.attr("filename") != undefined){
		ao_module_setWindowTitle("NotepadA   	 📝 " + selectedTab.attr("filename").replace("../../","/aor/"));
		document.title = "NotepadA   	 📝 " + selectedTab.attr("filename").replace("../../","/aor/");
	}else{
		ao_module_setWindowTitle("NotepadA   	 📝 newfile");
		document.title = "NotepadA   	 📝 newfile";
	}
	
}

function findTabWithAttr(attr,value){
	return $('div['+attr+'="'+value+'"]').each(function() {
		return this;
	});
}

function loadAllSpecialCharacter(){
	$("#iscl").html("");
	for (var i =161; i < 1023; i++){
		if (i != 173){
			$("#iscl").append("<div class='scs' keyid='" + i +"'>" + String.fromCharCode(i) + "</div>");
		}
		
	}
}

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};


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