TC
/
arozos


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124
							<html>
    <head>
        <title>ArozOS Mobile</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="manifest" href="manifest.webmanifest">
        <link rel="stylesheet" href="script/semantic/semantic.css">
        <link rel="stylesheet" href="script/ao.css">
        <script type="text/javascript" src="script/jquery.min.js"></script>
        <script type="text/javascript" src="script/semantic/semantic.js"></script>
        <script type="text/javascript" src="script/ao_module.js"></script>
        <style>

            document, body{
                height: 100%;
            }
            .themeColor{
                background-color:#1c1c1c;
            }

            .taskBar{
                position:fixed;
                top:0px;
                left:0px;
                width:30px;
                height:100%;
                overflow: visible !important;
                z-index:999;
            }
            #mainFrame{
                width: calc(100% - 30px);
                position:fixed;
                top:0px;
                right:0px;
                overflow: hidden;

            }
            .toggleTaskBar{
                position:absolute;
                bottom:0px;
                right:0px;
                margin-right:-20px;
                width:30px;
                height:90px;
                border-radius: 0px 10px 10px 0px;
            }

            #listMenu{
                z-index:1000;
                position:fixed;
                top:0px;
                left:0px;
                width:100%;
                height:100%;
                padding:12px;
                background-color: #fcffff;
                box-shadow: 3px 3px 5px 0px rgba(207, 207, 207, 0.37);
            }
            #listMenu .searchBar {
                width: 100%;
                border-bottom: 2px solid #34b7eb;
            }
            
            #listMenu .listItemWrapper {
                overflow: hidden;
            }

            #listMenu .listItemWrapper .groups {
                background-color: #f5f5f5;
                width: 120px;
                height: calc(100% - 40px);
                display: inline-block;
                overflow-y: auto;
                padding-top: 8px;
            }
            
            #listMenu .listItemWrapper .groups .item {
                padding-left: 7px;
                padding-bottom: 6px;
                padding-top: 6px;
                cursor: pointer;
            }
            
            #listMenu .listItemWrapper .groups .item.selected {
                color: #34b7eb;
            }
            
            #listMenu .listItemWrapper .groups .item:hover {
                background-color: #dedede;
            }

            #listMenuItem{
                width: calc(100% - 130px) !important;
                float: right;
                overflow-y: auto;
                height: calc(100% - 40px) !important;
            }

            #listMenuItem img{
                width: 50px;
            }

            .module.item{
                padding:8px;
            }

            .hideListMenuButton{
                position: absolute;
                bottom:22px;
                left:32px;
                cursor:pointer;
            }

            .hideListMenuButton img{
                left:12px;
                width:50px;
            }

            .listMenuLauncher{
                position:absolute;
                bottom:12px;
                left:12px;
                cursor:pointer;
            }
            
            .blurred{
                filter: blur(3px);
            }

            #backdrop {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-image: url('img/desktop/bg/init.jpg');
                width: 100%;
                height: 100%;
                overflow-x: hidden;
                pointer-events: none;
            }

            #windowButtonWrapper{
                padding-top:6px;
            }

            .floatWindowButton{
                padding: 5px;
            }

            .floatWindowButton .minimizedIcon{
                width: 20px;
                height:20px;
            }

            .floatWindowButton .normalElements{
                padding:8px;
                border-bottom: 1px solid #4a4a4a;
                cursor:pointer;
                vertical-align:middle;
                position: relative;
            }

            .floatWindowButton .normalizedIcon{
                width:40;
                height:40px;
                margin-right:12px;
            }

            .normalElements .windowTitle{
                display:inline-block;
                width:200px !important;
                vertical-align:middle;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;  
            }  

            .fwtab{
                position: absolute;
                top:0px;
                right: 0px;
                width: 100%;
                height: 100%;
            }

            #windowWrapper{
                height: 100%;
                width: 100%;
                position: absolute;
                top:0px;
                right:0px;
            }

            .floatWindowWrapper{
                width: 100%;
                height: 100%;
            }

            .floatWindow{
                width: 100%;
                height: 100%;
                position: absolute;
            }


            .fwtab iframe{
                border: 0px solid transparent;
                height: 100%;
            }

            .floatWindowButton .closebutton{
                position: absolute;
                font-size: 120%;
                color:white;
                right: 0em;
                top: 0px;
                margin-top: -8px;
                margin-left: -4px;
                padding: 3px;
            }

            .floatWindowButton .externalbutton{
                position: absolute;
                font-size: 120%;
                color:white;
                right: 1.6em;
                top: 0px;
                margin-top: -8px;
                margin-left: -4px;
                padding: 3px;
            }

            #conndrop{
                padding: 0.5em;
                position: fixed;
                top: 0px;
                right: 0px;
                z-index: 115;
                width: 100px;
                display: none; 
                justify-content: flex-end;
                pointer-events: none;
            }
            

            /* Magic css to make the connection logo blink */
            @-moz-keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            } 

            @-webkit-keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            }
            /* IE */
            @-ms-keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            } 
            /* Opera and prob css3 final iteration */
            @keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            } 
            .blink-image {
                -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
                -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
                -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
                animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
            }

            #sidebarToggleOverlay{
                width: 100%;
                height: 100%;
                z-index: 995;
                position: fixed;
                top:0px;
                left:0px;
                display:none;
            }

        </style>
    </head>
    <body>
        <div class="taskBar themeColor" >
            <div class="toggleTaskBar themeColor" shown="false" onclick="toggleTaskBar(this);">
                <img class="ui image sidebararrow" style="margin-top:8px; margin-left: -10px;" src="img/mobile/keyboard_arrow_right-white-48dp.svg"></img>
            </div>
            <div class="listMenuLauncher" onclick="showListMenu();">
                <img src="img/mobile/apps-white-48dp.svg" style="width: 30px;"/>
            </div>
            <div id="windowButtonWrapper">
               
            </div>
        </div>

        <div id="listMenu" style="left:-100%;">
            <div class="searchBar" onkeydown="searchModule(event);">
                <div class="ui icon fluid input" style="border-radius: 0px !important;">
                    <input id="searchBar" type="text" placeholder="Search">
                    <i class="search icon"></i>
                </div>
            </div>
            <dib class="listItemWrapper">
                <div class="groups">
                    <div id="searchResults" class="item" style="display:none;">Search Results</div>
                    <div class="item groupType selected" group="All">All</div>
                    <div class="item groupType" group="Media">Media</div>
                    <div class="item groupType" group="Office">Office</div>
                    <div class="item groupType" group="Download">Download</div>
                    <div class="item groupType" group="Files">Files</div>
                    <div class="item groupType" group="Internet">Internet</div>
                    <div class="item groupType" group="System Settings">System Settings</div>
                    <div class="item groupType" group="System Tools">System Tools</div>
                    <div class="item groupType" group="Utilities">Utilities</div>
                    <div class="item groupType" group="Other">Other</div>
                    <div class="hideListMenuButton" onclick="closeListMenu();">
                        <img class="ui image" src="img/mobile/cancel-black-48dp.svg"></img>
                        <p>Close Menu</p>
                    </div>
                </div>
                <div id="listMenuItem" class="items" align="left">
    
                </div>
            </div>
        </div>
        <div id="mainFrame">
            <div id="backdrop">
                
            </div>
            <div id="windowWrapper">
                
            </div>

            <div id="conndrop">
                <img class="ui mini image blink-image" src="SystemAO/desktop/icons/connlost.svg">
            </div>
        </div>
        <div id="sidebarToggleOverlay"></div>
       

        <script>
            var isDesktopMode = true;   //Try to emulate Desktop mode
            var moduleInstalled = [];   //List of installed modules on the system
            var desktopThemeList = [];  //List of themes installed, same as desktop theme
            var listMenuShown = false;
            var hostInfo;

            //initiation Functions
            initHostInfo();
            initModuleList();
            bindGroupTypeEvents();
            initBackdropImage();
            initUserDefinedThemeColor();
            bindBackgroundClickActions();

            //Bind background click
            function bindBackgroundClickActions(){
                $("#mainFrame").on("touchstart click", function(evt){
                    if ($(this).hasClass("blurred") && $(".taskBar").find(".toggleTaskBar").attr("shown") == "true"){
                        //hide the taskbar
                        hideTaskBar();
                    }
                });

                $("#sidebarToggleOverlay").on("touchstart click", function(evt){
                    if ($(".taskBar").find(".toggleTaskBar").attr("shown") == "true"){
                        //hide the taskbar
                        evt.preventDefault();
                        hideTaskBar();
                    }
                });
            }
           

            //Connection check
            setInterval(function() {
                $.ajax({
                    url: 'system/auth/checkLogin',
                    success: function(data) {
                        if (data == true) {
                            //Continue session
                        } else {
                            //Session timeout. Redirect to system index
                            window.location.href = "index.html";
                        }
                        $("#conndrop").hide();
                        $("#conndrop").css("display", "none");
                    },
                    error: function(evt) {
                        //Server closed or freezed?
                        $("#conndrop").show();
                        $("#conndrop").css("display", "flex");
                    },
                    timeout: 15000
                });
            }, 15000);

            //Initiate the host information
            function initHostInfo(){
                $.get("system/desktop/host",function(data){
                    hostInfo = data;
                    document.title = hostInfo.Hostname;
                });
            }

            //Initialize background image
            function initBackdropImage(){
                $.get("system/desktop/theme", function(data) {
                    //Return a list of theme stored on the system
                    desktopThemeList = data;
                    $.get("system/desktop/theme?get=true", function(data) {
                        //Get the user theme settings
                        changeDesktopTheme(data);
                    });
                });
            }

            function initUserDefinedThemeColor(){
                $.ajax({
                    url: "../../system/file_system/preference",
                    data: {key: "themecolor"},
                    success: function(data){
                        if (data.error == undefined && data != ""){
                            $(".themeColor").css("background-color", data);
                        }
                    }
                });
            }

            function changeDesktopTheme(themename){
                //Match the given theme to the themename
                if (themename.includes(":/") == false){
                    //This is a path
                    for (var i =0; i < desktopThemeList.length ; i++){
                        if (desktopThemeList[i].Theme == themename){
                            var targetImage = desktopThemeList[i].Bglist[0];
                            $("#backdrop").css("background-image", `url(img/desktop/bg/${themename}/${targetImage})`)
                        }
                    }
                }else{
                    //This is a path (user defined background folder)
                    $.get("system/desktop/theme?load=" + themename, function(data){
                        if (data.error !== undefined){
                            //The folder is gone. Use default instead
                            console.log(data.error);
                            changeDesktopTheme("default");
                        }else{
                            $("#backdrop").css("background-image", `url(media/?file=${data[0]})`)
                        }
                    });
                }
            }
           
            function toggleFullScreen() {
                var doc = window.document;
                var docEl = doc.documentElement;

                var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
                var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

                if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
                    requestFullScreen.call(docEl);
                }
                else {
                    cancelFullScreen.call(doc);
                }
            }


            //Sidebar
            function toggleTaskBar(obj){
                if ($(obj).attr("shown") == "true"){
                    hideTaskBar();
                }else{
                    showTaskBar();
                }
            }

            function hideTaskBar(){
                //Hide the taskBar
                $(".taskBar").animate({
                    width: "30px"
                },300, "swing");
                $(".taskBar").find('.sidebararrow').attr("src","img/mobile/keyboard_arrow_right-white-48dp.svg");
                $(".taskBar").find(".toggleTaskBar").attr("shown","false");
                $("#mainFrame").removeClass("blurred");

                //Minimize all fwbuttons
                $(".floatWindowButton").each(function(){
                    $(this).find(".minimizedElements").show();
                    $(this).find(".normalElements").hide();
                });

                $("#sidebarToggleOverlay").hide();
            }

            function showTaskBar(){
                //Show the taskbar
                $(".taskBar").animate({
                    width: "300px"
                }, 300, "swing", function(){
                    //Switch all fwbuttons to normal size
                    $(".floatWindowButton").each(function(){
                        $(this).find(".minimizedElements").hide();
                        $(this).find(".normalElements").show();
                     });
                });
                $(".taskBar").find('.sidebararrow').attr("src","img/mobile/keyboard_arrow_left-white-48dp.svg");
                $(".taskBar").find(".toggleTaskBar").attr("shown","true");
                $("#mainFrame").addClass("blurred");
                $("#sidebarToggleOverlay").show();
               
            }

            //List all modules
            function initModuleList(){
                $.ajax({
                    url: "system/modules/list",
                    success: function(data) {
                        moduleInstalled = data;
                        listModulesType("All");
                    }
                });
            }

            //ListMenu group classification events
            function bindGroupTypeEvents(){
                $(".groupType").on("click",function(evt){
                    //Clear all serach results
                    $("#searchResults").slideUp('fast');
                    listModulesType($(this).attr("group"));
                    $(".groupType.selected").removeClass("selected");
                    $(this).addClass("selected");
                    /*
                    var classificationObject = this;
                    if ($(this).attr("group") == "All"){
                        $('.item.module').show();
                    } else if ($(this).attr("group") == "Other"){
                        var excludeList = ["Media", "Office", "Download", "Files", "Internet", "System Settings", "System Tools", "Utilties"];
                        $('.item.module').each(function(){
                            if (excludeList.includes($(this).attr("group")) == false){
                                $(this).show();
                            }else{
                                $(this).hide();
                            }
                        });
                    }else{
                        $('.item.module').each(function(){
                            if ($(this).attr("group") == $(classificationObject).attr("group")){
                                $(this).show();
                            }else{
                                $(this).hide();
                            }
                        });
                    }
                    */
                   
                });
            }

            function searchModule(event) {
                if (event.which == 13) {
                    var keyword = $("#searchBar").val().toLowerCase();
                    var results = [];
                    var lessAccurateResults = [];
                    $(".groupType.selected").removeClass("selected");
                    $("#searchResults").addClass("selected").slideDown('fast');
                    //Load all search results
                    for (var i = 0; i < moduleInstalled.length; i++) {
                        var thisModule = moduleInstalled[i];
                        var pathInfo = thisModule["StartDir"].split("/");
                        for (var j = 0; j < pathInfo.length; j++) {
                            pathInfo[j] = pathInfo[j].toLowerCase();
                        }
                        if (thisModule["Name"].toLowerCase().includes(keyword)) {
                            results.push(thisModule);
                        } else if (pathInfo.includes(keyword.toLowerCase()) || pathInfo.includes(keyword.split(" ").join("_").toLowerCase())) {
                            lessAccurateResults.push(thisModule);
                        }
                    }
                    results = results.concat(lessAccurateResults);
                    //Append the results to list
                    $("#listMenuItem").html("");
                    for (var i = 0; i < results.length; i++) {
                        generateListMenuItem(results[i]);
                    }

                    if (results.length == 0) {
                        //Append a custom no results div to the content
                        $("#listMenuItem").append(`<div class="item module"><span><img class="ui middle aligned tiny image" src="img/system/not found.png" style="padding-right: 12px;">No Results</span></div>`);
                    }
                }
            }
           

            function listModulesType(groupType) {
                var listingItems = [];
                if (groupType == "All") {
                    //List all of the items
                    for (var i = 0; i < moduleInstalled.length; i++) {
                        if (moduleInstalled[i]["StartDir"] != "") {
                            listingItems.push(moduleInstalled[i]);
                        }
                    }
                } else if (groupType == "Other") {
                    var excludeList = ["Media", "Office", "Download", "Files", "Internet", "System Settings", "System Tools", "Utilties"];
                    //List the Other groups
                    for (var i = 0; i < moduleInstalled.length; i++) {
                        if (excludeList.includes(moduleInstalled[i]["Group"]) == false && moduleInstalled[i]["StartDir"] != "") {
                            listingItems.push(moduleInstalled[i]);
                        }
                    }
                } else {
                    //List the given group
                    for (var i = 0; i < moduleInstalled.length; i++) {
                        if (moduleInstalled[i]["Group"] == groupType && moduleInstalled[i]["StartDir"] != "") {
                            listingItems.push(moduleInstalled[i]);
                        }
                    }
                }

                //List the item to the listmenu
                $("#listMenuItem").html("");
                for (var i = 0; i < listingItems.length; i++) {
                    var thisModule = listingItems[i];
                    generateListMenuItem(thisModule);
                }
                if (listingItems.length == 0) {
                    $("#listMenuItem").html(`<div class="item module"><span><img class="ui middle aligned tiny image" src="img/system/not found.png" style="padding-right: 12px;">No WebApp found</span></div>`)
                }
            }

            function generateListMenuItem(thisModule) {
                var icon = thisModule["IconPath"];
                if (icon == "") {
                    //Use default system icon
                    icon = "img/system/service.png";
                }
                var name = thisModule["Name"];
                var startdir = thisModule["StartDir"];
                var group = thisModule["Group"];
                var fwsupport = "false";
                if (thisModule["SupportFW"]) {
                    fwsupport = "true";
                }
                $("#listMenuItem").append(`<div class="item module" module="${name}" startdir="${startdir}" fw="${fwsupport}" group="${group}" onclick="openModuleFromMenu(this);">
                    <span>
                        <img class="ui middle aligned tiny image" src="${icon}" style="padding-right: 12px;"></img>
                        ${name}
                    </span>
                </div>`);
            }

            function closeListMenu(callback = undefined){
                $("#listMenu").animate({
                    left: window.innerWidth * -1
                },300,"swing", function(){
                    $(".taskBar").animate({
                        width: "300px",
                    },300,"swing", function(){
                        if (typeof callback != "undefined"){
                            callback();
                        }
                    });
                    
                });

                listMenuShown = false;
            }

            //Bind swip events
            document.addEventListener('touchstart', handleTouchStart, false);        
            document.addEventListener('touchmove', handleTouchMove, false);

            var xDown = null;                                                        
            var yDown = null;
            var swipeTarget = null;
            var targetType = "fw";
            function getTouches(evt) {
            return evt.touches ||             // browser API
                    evt.originalEvent.touches; // jQuery
            }                                                     

            function handleTouchStart(evt) {
                const firstTouch = getTouches(evt)[0];
                if ($(evt.target).hasClass("taskBar")){
                        swipeTarget = evt.target;
                        targetType = "taskbar"
                }else{
                    swipeTarget = getFloatWindowObjectFromPath(evt.path);
                }
                
                xDown = firstTouch.clientX; 
                yDown = firstTouch.clientY;
            };

            function getFloatWindowObjectFromPath(path){
                var targetObject = undefined;
                targetType = undefined
                path.forEach(object => {
                    if ($(object).hasClass("floatWindowButton")){
                        targetObject = object
                        targetType = "fw"
                    }
                })

                return targetObject;
            }

            function handleTouchMove(evt) {
                if ( ! xDown || ! yDown ) {
                    return;
                }

                var xUp = evt.touches[0].clientX;                                    
                var yUp = evt.touches[0].clientY;

                var xDiff = xDown - xUp;
                var yDiff = yDown - yUp;

                if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
                    if ( xDiff > 0 ) {
                        /* left swipe */ 
                        if (swipeTarget !== undefined && targetType == "fw"){
                            closeFloatWindow($(swipeTarget).attr("windowId"));
                        }else if (swipeTarget !== undefined && targetType == "taskbar"){
                            hideTaskBar();
                        }
                    } else {
                        /* right swipe */
                        if (swipeTarget !== undefined && targetType == "fw"){
                            //Allow left or right swipe to remove fw
                            closeFloatWindow($(swipeTarget).attr("windowId"));
                        }else  if (swipeTarget !== undefined && targetType == "taskbar"){
                            //Right swipe on taskbar
                            if ($(swipeTarget).find(".toggleTaskBar").attr("shown") == "true"){
                                //Already shown. Toggle list menu
                                showListMenu();
                            }else{
                                showTaskBar();
                            }
                            
                        }
                    }                       
                } else {
                    if ( yDiff > 0 ) {
                        /* up swipe */ 
                    } else { 
                        /* down swipe */
                    }                                                                 
                }
                /* reset values */
                xDown = null;
                yDown = null;
                swipeTarget = null;
            };


            function showListMenu(callback = undefined){
                if ($(".taskBar").find(".toggleTaskBar").attr("shown") == "false"){
                    $(".taskBar").find(".toggleTaskBar").attr("shown", "true");
                    $(".taskBar").find('.sidebararrow').attr("src","img/mobile/keyboard_arrow_left-white-48dp.svg");
                    $("#mainFrame").addClass("blurred");
                }
                $(".taskBar").animate({
                    width: window.innerWidth,
                },300, "swing", function(){
                    //Switch all fwbuttons to normal size
                    $(".floatWindowButton").each(function(){
                        $(this).find(".minimizedElements").hide();
                        $(this).find(".normalElements").show();
                     });

                     //Show list menu
                    $("#listMenu").animate({
                        left: 0
                    },300,"swing", function(){
                        if (typeof callback != "undefined"){
                            callback();
                        }
                    });
                });
                listMenuShown = true;
                $("#sidebarToggleOverlay").show();
            }

            function openModule(moduleName) {
                $.get("system/modules/getLaunchPara?module=" + moduleName, function(data) {
                    console.log(data);
                    if (data.error !== undefined) {
                        //Something went wrong.
                        console.log("Unable to open module " + moduleName);
                        if (data.error == "Not logged in."){
                            //Session expired
                            window.location.href = "login.system";
                        }
                    }else {
                        //Launch the given module
                        var url = data["StartDir"];
                        var size = [undefined, undefined];
                        var icon = "img/system/favicon.png";
                        if (data["IconPath"] != "") {
                            icon = data["IconPath"];
                        }
                        var title = data["Name"];
                        //Check if the module support fw mode. If yes, launch with fwmode url. IF not, launch to index
                        if (data["SupportFW"] == true) {
                            if (data["LaunchFWDir"] != null) {
                                url = data["LaunchFWDir"];
                            }
                            if (data["InitFWSize"] != null) {
                                size = data["InitFWSize"];
                            }
                        }

                        //Launch the given module
                        newFloatWindow({
                            url: url,
                            width: size[0],
                            height: size[1],
                            appicon: icon,
                            title: title
                        });

                        closeListMenu(function(){
                            hideTaskBar();
                        });
                        
                    }
                });
            }

            function openModuleFromMenu(object) {
                var moduleName = $(object).attr("module");
                openModule(moduleName);
            }

            //In mobile interface, there will be some option ignored by default
            function newFloatWindow(options){
                //Hide all other floatWindows
                $(".floatWindowWrapper").fadeOut("fast");

                //Construct the new window
                var windowID = Date.now();
                var parent = options.parent || "";
                var callback = options.callback || "";
                //Create a new iframe
                $("#windowWrapper").append(` <div class="floatWindowWrapper" windowId="${windowID}">
                <div class="floatWindow" windowId="${windowID}" parent="${parent}" callback="${callback}">
                    <div class="fwtab">
                        <iframe src="${options.url}" style="width: 100%; height: 100%;"></iframe>
                    </div>
                </div>
                </div>`);

                //Create the button
                var title = options.title || "New FloatWindow";

                $("#windowButtonWrapper").append(`
                    <div class="floatWindowButton" windowID="${windowID}" onclick="focusTab(this)">
                        <div class="minimizedElements">
                            <img class="minimizedIcon" src="${options.appicon}">
                        </div>
                        <div class="normalElements" style="display:none;">
                            <img class="ui normalizedIcon middle aligned image" src="${options.appicon}">
                            <span class="windowTitle" style="color:white;">${title}</span>
                            <div class="closebutton" onclick="closefw(this);"><i class="remove icon"></i></div>
                            <div class="externalbutton" onclick="openfwInNewTab(this);"><i class="external icon"></i></div>
                        </div>
                        
                    </div>
                `);
            }  

            ///Functions realted to window resize and auto scaling
            function updateWindowDimensions(){
                $("#backdrop").css({
                    width: window.innerWidth,
                    height: window.innerHeight
                });
                if (!listMenuShown){
                    $("#listMenu").css("left", window.innerWidth * -1);
                }
                
            }


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

            //Float Window APIs
            function setFloatWindowTitle(id, title){
                $(".floatWindowButton").each(function(){
                    if ($(this).attr("windowId") == id){
                        $(this).find(".windowTitle").text(title);
                    }
                })
            }

            function getFloatWindowByID(id){
                var targetObejct = undefined;
                $(".floatWindowWrapper").each(function(){
                    if ($(this).attr("windowId") == id){
                        targetObejct = $(this);
                    }
                });
                return targetObejct;
            }

            function MoveFloatWindowToTop(targetfw){
                //Check if this windows is already topped
                if ($(targetfw).is(":visible")){
                    //Already topped
                    return;
                }

                $(".floatWindowWrapper").each(function(){
                    $(this).fadeOut("fast");
                });

                console.log(targetfw);
                $(targetfw).parent().fadeIn("fast");
            }

            function focusTab(object){
                var windowID = $(object).attr("windowId");
                //Hide all other flowWindows
                $(".floatWindowWrapper").fadeOut("fast");

                //Show the target fw
                var fw = getFloatWindowByID(windowID);
                fw.fadeIn("fast", function(){
                    hideTaskBar();
                });
                
            }

            function getFloatWindowByID(id){
                var targetObejct = undefined;
                $(".floatWindowWrapper").each(function(){
                    if ($(this).attr("windowId") == id){
                        targetObejct = $(this);
                    }
                });

                return targetObejct;
            }

            function setFloatWindowResizePolicy(id, allowResize){
                //Disabled in mobile mode
            }

            function setFloatWindowSize(id, width, height){
                //Disabled in mobile mode
            }

            function closeFloatWindow(windowID){
                //Get the content iframe with that windowID
                var contentWindow = getFloatWindowByID(windowID).find("iframe")[0].contentWindow;
                console.log(contentWindow);
                try {
                    if (contentWindow.ao_module_close === undefined) {
                        //This module do not use ao_module wrapper. Close it directly.
                        closeFwProcess(windowID);
                    } else {
                        //Pass the closing events to the window itself
                        contentWindow.ao_module_close();
                    }
                } catch (ex) {
                    //Problems of closing floatWindow. Force closing.
                    closeFwProcess(windowID);
                }
            } 

            function closefw(object){
                var windowID = $(object).parent().parent().attr("windowID");
                closeFloatWindow(windowID);
            }

            function openfwInNewTab(object){
                event.preventDefault();
                event.stopImmediatePropagation();
                var windowID = $(object).parent().parent().attr("windowID");
                var targetFloatWindow = null;
                $(".floatWindowWrapper").each(function(){
                    if ($(this).attr("windowid") == windowID){
                        targetFloatWindow = $(this);
                    }
                });
                if (targetFloatWindow == null){
                    return;
                }
                var iframe = $(targetFloatWindow).find("iframe");
                var url = $(iframe)[0].contentWindow.location.href;
                window.open(url);
            }


            //Get the window below this window id, can return null if there is no window
            function getPreviousWindowObject(windowID){
                var previousWindowID = null;
                var result = null;
                $(".floatWindowButton").each(function(){
                    if ($(this).attr("windowid") == windowID){
                        result = previousWindowID;
                    }else{
                        let thisWindowID = $(this).attr("windowid");
                        previousWindowID = thisWindowID;
                    }
                });

                return result;
            }

            function closeFwProcess(windowID){
                //Get the previous window object
                var previousWindowID = getPreviousWindowObject(windowID);
                
                //Remove the window object
                $(".floatWindowWrapper").each(function(){
                    if ($(this).attr("windowId") == windowID){
                        $(this).fadeOut("fast",function(){
                            $(this).remove(); 
                        });
                    }
                });

                //Remove the button object
                $(".floatWindowButton").each(function(){
                    if ($(this).attr("windowId") == windowID){
                        $(this).fadeOut("fast",function(){
                            $(this).remove(); 
                        });
                    }
                });

                //Focus the window behind if exists
                setTimeout(function(){
                    if (previousWindowID != null){
                        //Hide all other flowWindows
                        $(".floatWindowWrapper").fadeOut("fast");

                        //Show the target fw
                        var fw = getFloatWindowByID(previousWindowID);
                        console.log(fw);
                        fw.fadeIn("fast", function(){
                            
                        });
                    }
                }, 100);
                
            }

            function openFileWithModule(moduleLaunchInfo, openFileList) {
                var url = moduleLaunchInfo["StartDir"];
                var size = [undefined, undefined];
                var title = moduleLaunchInfo["Name"];
                var icon = "img/system/favicon.png";
                if (moduleLaunchInfo["IconPath"] != "") {
                    icon = moduleLaunchInfo["IconPath"];
                }
                //Use floatWindow if exists
                if (moduleLaunchInfo["SupportFW"] == true && moduleLaunchInfo["LaunchFWDir"] != "") {
                    url = moduleLaunchInfo["LaunchFWDir"];
                    if (moduleLaunchInfo["InitFWSize"] !== null) {
                        size = moduleLaunchInfo["InitFWSize"]
                    }
                }
                //Use embedded mode if exists
                if (moduleLaunchInfo["SupportEmb"] == true && moduleLaunchInfo["LaunchEmb"] != "") {
                    url = moduleLaunchInfo["LaunchEmb"];
                    if (moduleLaunchInfo["InitEmbSize"] !== null) {
                        size = moduleLaunchInfo["InitEmbSize"]
                    }
                }

                var openParamter = encodeURIComponent(JSON.stringify(openFileList));

                //Add launch files info and launch floatWindow
                parent.newFloatWindow({
                    url: url + "#" + openParamter,
                    width: size[0],
                    height: size[1],
                    appicon: icon,
                    title: title
                });
            }
            
        </script>
    </body>
</html>