TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879
							<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: 4px;
                top: 4px;
            }
        </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>
       

        <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

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

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

            //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();
                });
            }

            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");

               
            }

            //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();
                        }
                    });
                    
                });
            }

            //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();
                        }
                    });
                })
               
            }

            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>
                        
                    </div>
                `);
            }  

            ///Functions realted to window resize and auto scaling
            function updateWindowDimensions(){
                $("#backdrop").css({
                    width: window.innerWidth,
                    height: window.innerHeight
                });
            }
            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 closeFwProcess(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(); 
                        });
                    }
                });
            }
            
        </script>
    </body>
</html>