<html style="height: 100%; overflow: hidden; -ms-overflow-x: hidden; -ms-overflow-y: hidden;" xmlns="http://www.w3.org/1999/xhtml"><head id="Head1"><META content="IE=11.0000" http-equiv="X-UA-Compatible"><meta id="metaIE8CompatMode"><meta id="metaGoogleChromeFrame"><link id="lnkFavicon" href="/include/global/images/favicon/favicon.ico" rel="shortcut icon">
    <!-- Not sure why cannot set the favicon path here directly. Can only set it in code-behind. See Logon.aspx, where GetFavicon() method can be called from .aspx -->
    
    

    <title>
	ASKnLearn
</title><link href="/include/global/css/reset.css" rel="stylesheet" type="text/css"><link href="/include/global/css/css3.css" rel="stylesheet" type="text/css"><link href="/include/global/css/elements.css" rel="stylesheet" type="text/css"><link href="/include/global/css/forms.css" rel="stylesheet" type="text/css"><link href="/include/global/css/layout.launchbar.css" rel="stylesheet" type="text/css"><link href="/include/global/tools/jquery/layout/css/jquery-layout.css" rel="stylesheet" type="text/css"><link href="/include/global/tools/jquery/ui/css/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css"><link href="/include/global/tools/jquery/ui/demo/demos.css" rel="stylesheet" type="text/css"><link href="/include/global/tools/jquery/colorbox/theme2/colorbox.css" rel="stylesheet" type="text/css">

    <!-- CANNOT UPDATE TO LATEST JQUERY, IT BREAKS THE CHILD PAGE, NEED TO INVESTIGATE - MAIDEEN 12 OCTOBER 2012-->
    <script src="http://www.google-analytics.com/ga.js" type="text/javascript" async=""></script><script src="/include/global/tools/jquery/others/jq/1/jquery.js" type="text/javascript"></script>
    
    <script src="/include/global/tools/jquery/ui/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
    <script src="/include/global/tools/jquery/colorbox/jquery.colorbox.js" type="text/javascript"></script>

    <link href="/include/global/tools/jquery/tooltip-tipsy/tooltip.css" rel="stylesheet" type="text/css">
    <script src="/include/global/tools/jquery/tooltip-tipsy/jquery.tooltip.js" type="text/javascript"></script>

    <script src="/include/global/tools/jquery/layout/jquery.layout-latest.js" type="text/javascript"></script>
    <script src="/include/global/tools/jquery/layout/complex.js" type="text/javascript"></script>
    <script src="/include/global/tools/jquery/hoverIntent/jquery.hoverIntent.minified.js" type="text/javascript"></script>
    <script src="layout/layout-init.js" type="text/javascript"></script>
    <script src="/include/global/tools/jquery/jquery.iframe.js" type="text/javascript"></script>
    <script src="/include/global/tools/jquery/jquery.blockUI.js" type="text/javascript"></script>
    <script src="/include/global/js/chkimg.js?v=158f" type="text/javascript"></script>
    <script src="/include/global/js/shortcut.js" type="text/javascript"></script>
    <script src="/include/global/js/reload.detect.js" type="text/javascript"></script>

    <style id="style_topBar" type="text/css">
        /*customize school background
        if the school wants to customize, just indicate path to the bg image in core.xml, and .cs will check (if there is a customization, then 
        .cs will provide the filename and create the custom style else do not create the style below
            
        #topHeader {
            background-image:url(img/header-bg_green.png);
        }
        */

        #topHeader {
            *margin-top: 0px;
            *padding-top: 12px;
        }

        .badge {
            display: inline-block;
            color: #fff;
            font-size: 12px;
            font-family: Arial, sans-serif;
            background-color: #D41D00;
            padding: 2px 5px 2px;
            margin: 3px 3px 0 0;
            font-weight: bold;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 3px;
            position: absolute;
            top: 2px;
            left: 238px;
            min-width: 12px;
            text-align: center;
        }

        @media only screen and (max-device-width: 768px) {
            .mobile-srolling {
                overflow: scroll;
                -webkit-overflow-scrolling: touch !important;
            }
        }
    .resizer-north-closed {background-image:url(/include/global/images/menubar/header-bg.png);}</style>


    <script language="javascript" type="text/javascript">


        /// Disable Page refresh via F5 
        //function disableF5(e) { if (e.which == 116) e.preventDefault(); };
        //$(document).bind("keydown", disableF5);


        /*
        NOT SURE WHY THERE IS 2 JAVASCRIPT PORTION (TOP & BOTTOM).
        I GUESS THERE WAS A PURPOSE FOR IT. ON BEFORE/AFTER BODY LOAD.
        ~Maideen, 27th March 2012
        */


        //so that when get logout, when login will not show, iframe in iframe issue.
        if (top.location != self.location) {
            top.location = self.location;
        }

        // Creates a 'domain' cookie on the delegated content server
        // p = puid; a = applicationName
        function fn_CreateContentCookie(contentserver, p, a) {
            var headID = document.getElementsByTagName("head")[0];
            var script1 = document.createElement('script');
            script1.type = 'text/javascript';
            script1.src = 'http://' + contentserver + '/ContentManagement/ContentCookie.aspx?m=CreateCookie&p=' + p + '&a=' + a;
            headID.appendChild(script1);
        }


    </script>

</head>

<body style="margin: 0px; padding: 0px; border: currentColor; border-image: none; height: 100%; overflow: hidden; position: relative; -ms-overflow-x: hidden; -ms-overflow-y: hidden;"><div id="cboxOverlay" style="display: none;"></div><div id="colorbox" style="padding-right: 0px; padding-bottom: 32px; display: none;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"></div><div id="cboxContent" style="float: left;"><div id="cboxLoadedContent" style="width: 0px; height: 0px; overflow: hidden; float: left;"></div><div id="cboxLoadingOverlay" style="float: left;"></div><div id="cboxLoadingGraphic" style="float: left;"></div><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left;"></div><div id="cboxNext" style="float: left;"></div><div id="cboxPrevious" style="float: left;"></div><div id="cboxSlideshow" style="float: left;"></div><div id="cboxClose" style="float: left;"></div></div><div id="cboxMiddleRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="width: 9999px; display: none; visibility: hidden; position: absolute;"></div></div>

    <form name="form1" id="form1" action="Index.aspx" method="post">
<div>
<input name="__EVENTTARGET" id="__EVENTTARGET" type="hidden" value="">
<input name="__EVENTARGUMENT" id="__EVENTARGUMENT" type="hidden" value="">
<input name="__VIEWSTATE" id="__VIEWSTATE" type="hidden" value="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">
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div>

	<input name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" type="hidden" value="80745F73">
	<input name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" type="hidden" value="">
	<input name="__EVENTVALIDATION" id="__EVENTVALIDATION" type="hidden" value="eMX7RemMZ0RtW61kHohFa6diqeARJ13JPP3vyDZyieJZ67bHkOAyKqFEZ+lFCS3APrhFa2cNzA+EsvFOAws0opq2h6OyOuNxhliHciPyfPVwhBTh3nfuNGTx04N4wQVXFNzddIrKRItX5bKOmccy66lm+kfrIa7R0CVXAWoV34fCyPceD3wNWF+HmyULJHEe5fpV1a7MXSSBVirYjjvGEfieccBBfREluTuOKCKbSRUCvFMx/Z8uMhYC/VnNMGkdV/dskgc3/Z1Zb8IcTa2lX9pDyDpmy1CzGOM3isXDcQjlYJF/bN93a3VO/RWHsv2tgWHqoQ==">
</div>

        <!-- NORTH -->
        <div class="ui-layout-north pane pane-north" style="margin: 0px; left: 0px; top: 0px; width: auto; height: 75px; right: 0px; bottom: auto; display: block; visibility: visible; position: absolute; z-index: 1;"><span title="Close" class="button-close button-close-north" id="north-closer"></span>


            <!-- main top menu section -->
            <div class="menubar">
                <div class="menubar-bg" id="topHeader">
                    <div class="menubar-container">


                        <!-- school logo-->
                        <a id="anlLogo" onclick="MenuItemClick('Home.aspx')" href="#">
                            <img id="imgMainLogo" alt="LMS Main Logo" src="/include/global/img/logo/Logo.png">
                        </a>



                        
                        <ul id="primaryNav">
                            <li class="navItem" id="li_home">
                                <a class="nav-link" id="lnkHome" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Home.aspx')" href="#">Home</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('Home.aspx')">
                                    Home</a>
                            </li>

                            <li class="navItem" id="li_tasks" style="display: none;">
                                <!-- "My Task" list element will only appear for "pri home". see jquery below.-->
                                <a class="nav-link" id="lnkTasks" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Tasks.aspx')"></a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('Tasks.aspx')">
                                    My Tasks</a>
                            </li>

                            <li class="navItem" id="li_content">
                                <a class="nav-link" id="lnkContent" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('../../ANLLesson/StartPage/Default.aspx')">Content</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('../../ANLLesson/StartPage/Default.aspx')">
                                    Content</a><!-- subtext element will only appear for "pri home". see jquery below.-->
                            </li>

                            

                            <li class="navItem" id="li_Create">
                                <a class="nav-link" id="lnkCreate" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Create.aspx')" href="#">Create</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('Create.aspx')">
                                    Create</a>
                            </li>

                            <li class="navItem" id="li_Workspace">
                                <a class="nav-link clicked" id="lnkWorkSpace" style="color: rgb(189, 42, 56);" onclick="MenuItemClick('MainModules/WorkSpace.aspx')" href="#">WorkSpace</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('MainModules/WorkSpace.aspx')">
                                    WorkSpace</a>
                            </li>

                            <li class="navItem" id="li_Tools">
                                <a class="nav-link" id="lnkTools" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Tools.aspx')">Tools</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('Tools.aspx')">
                                    Tools</a>
                            </li>
                         

                            <li class="navItem" id="li_Office365">
                                <a class="nav-link" id="lnkOffice365" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('../../office365/O365Gateway.aspx')">Office365</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('../../office365/O365Gateway.aspx')">
                                    Office 365</a>
                            </li>
                            

                            <li class="navItem" id="li_SchLinks">
                                <a class="nav-link" id="lnkLinks" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Links.aspx')">Links</a>
                                <a class="subtext" style="display: none;" onclick="MenuItemClick('Links.aspx')">
                                    Links</a>
                            </li>

                            

                        </ul>

                        <!-- MY ACCOUNT AND AVATAR -->

                        <div class="profile" id="profileLinks">
                            <a title="Click Here to edit your profile, change your password, upload your photo or update the security question." class="tooltip userPassport" id="userPassport" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('../../UserProfile/UP_Profile.aspx')" href="#">
                                <img width="16" height="16" class="avatar16" src="/edulearnnetupload/sit/passport/df4c551f-4695-4937-8758-8b11f1d560fb/32.jpg?v=602">
                                <span class="profileName truncate">test_teacher1</span><br>
                                <span class="myAccount" id="lnkMyAct">My Account</span>
                                </a>
                            <div class="clr"></div>
                        </div>

                        <div class="clear"></div>

                        <!-- MINI LINKS: Feedback, help and logout -->

                        <div class="headerLinks" id="headerLinks">
                            <span id="spanFeedback">
                                <a id="lnkFeedback" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('feedback.aspx')">Feedback</a> <span class="separator" style="color: rgb(122, 56, 120);"></span>
                            </span>

                            <span id="spanHelp">
                                <!--Show the appropriate help link based on role-->
                                <a id="lnkHelp" style="color: rgb(122, 56, 120); cursor: help;" href="http://lms.asknlearn.com/help/wiki" target="_blank">Help</a> <span class="separator" style="color: rgb(122, 56, 120);"></span>
                            </span>

                            <a class="profile-link" id="btnLogout" style="color: rgb(122, 56, 120);" href="javascript:__doPostBack('btnLogout','')">Logout</a>

                        </div>

                        



                        <div class="clear"></div>

                    </div>
                </div>
            </div>
            <!-- end of main top menu section -->















            <!--* * * * * * * * * * * * *  * * * * * * * *  * *-->
            <!--When header is Minimize, this section will show-->
            <!--* * * * * * * * * * * * *  * * * * * * * *  * *-->

            <span id="north-minimized-menu">
                <ul>

                    <li class="menu-links" id="li_home_minimized">
                        <a class="minimized-links" id="lnkMinHome" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Home.aspx')" href="#">Home</a>
                    </li>

                    <!-- Appears only for Primary Home -->
                    <li class="menu-links" id="li_tasks_minimized" style="display: none;">
                        <a class="minimized-links" id="lnkMinTasks" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Tasks.aspx')" href="#">My Tasks</a>
                    </li>

                    <li class="menu-links" id="li_content_minimized">
                        <a class="minimized-links" id="lnkMinContent" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('../../ANLLesson/StartPage/Default.aspx')" href="#">Content</a>
                    </li>

                    

                    <li class="menu-links" id="li_Create_minimized">
                        <a class="minimized-links" id="lnkMinCreate" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Create.aspx')" href="#">Create</a>
                    </li>

                    <li class="menu-links" id="li_workspace_minimized">
                        <a class="minimized-links" id="lnkMinWorkSpace" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('MainModules/WorkSpace.aspx')" href="#">WorkSpace</a>
                    </li>

                    <li class="menu-links" id="li_tools_minimized">
                        <a class="minimized-links" id="lnkMinTools" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Tools.aspx')" href="#">Tools</a>
                    </li>

                    <li class="menu-links" id="li_Office365_minimized">
                        <a class="minimized-links" id="lnkMinOffice365" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('../../Office365/O365Userlogin.aspx')" href="#">Office365</a>
                    </li>
                    

                    <li class="menu-links" id="li_SchLinks_minimized">
                        <a class="minimized-links" id="lnkMinLinks" style="color: rgb(122, 56, 120);" onclick="MenuItemClick('Links.aspx')" href="#">Links</a>
                    </li>

                    

                    <!-- User name and avatar -->
                    <li class="menu-profile" id="li_profile_minimized">
                        <img width="16" height="16" src="/edulearnnetupload/sit/passport/df4c551f-4695-4937-8758-8b11f1d560fb/32.jpg?v=602">
                        <span id="profile">
                            <a title="Click to update your profile" class="profile-name" id="lnkMinProfile" onclick="MenuItemClick('../../UserProfile/UP_Profile.aspx')" href="#">test_teacher1</a>
                        </span>
                    </li>

                </ul>
            </span>

            <!-- end of minimize menu section-->








        </div>


        <div class="mobile-srolling pane pane-center" id="mainContent" style="margin: 0px; left: 0px; top: 75px; width: 1600px; height: 730px; right: 0px; bottom: 0px; display: block; visibility: visible; position: absolute; z-index: 1;">

            <!--iframe page is not defined here and loaded dynamically with loader by jQuery later in the bottom-->
            <iframe width="100%" height="100%" id="CentreFrame" src="MainModules/WorkSpace.aspx" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" style="z-index: 1;"></iframe>
        </div>

        <!-- NORTH MINIMIZED TOOLBARS -->
        <!--[if lte IE 6]>
        <div id="" style="display: block; height:20px;" class="resizer-north-closed">
        <![endif]-->

        &nbsp;
        
        <!--[if lte IE 6]>
        </div>
        <![endif]-->


        <!-- Email alert prompt -->
        <div style="display: none;">
            <div id="dialog_EmailPrompt">
                <div id="dialog_EmailPrompt_div">
                    <div class="info roundedCorners" id="dialogEmailPrompt_msg_top" style="display: none;">
                        To better serve you with advance LMS functions, please update your email address.<br>
                        
                    </div>
                    <fieldset>
                        <legend>Update Email Address</legend>
                        <dl class="form">
                            <dd class="formSelect">
                                <label for="txtEmail">Email</label>
                                <input id="txtEmail" type="text" size="40">
                            </dd>
                        </dl>
                    </fieldset>

                    <div id="dialog_Customize_msg" style="font-size: 12px;"></div>
                    <br>
                    <br>

                    <div class="kuButtons">
                        <a title="Update Email" class="positive kuButton roundedCorners" id="lnkUpdateEmail"><span class="ico16 ico16-apply">Update</span></a>
                    </div>
                    <div class="kuButtons">
                        <a title="Cancel" class="negative kuButton roundedCorners" id="lnkCancelEmailUpdate" onclick="javascript:$.colorbox.close();" href="javascript:void(0);"><span class="ico16 ico16-cancel">Cancel</span></a>
                    </div>

                </div>

            </div>
        </div>






        <!--
              Hidden field..
                -->
        <input name="hidIsPriHome" id="hidIsPriHome" type="hidden" value="false">
        <input name="hidTopMenuTextColor" id="hidTopMenuTextColor" type="hidden" value="7A3878">
        <input name="hidTopMenuSelectedTextColor" id="hidTopMenuSelectedTextColor" type="hidden" value="BD2A38">
        <input name="hidTopMenuTextColorRollover" id="hidTopMenuTextColorRollover" type="hidden" value="39C92E">
        <input name="hidTopMenuRolloverColor" id="hidTopMenuRolloverColor" type="hidden" value="8142FF">
        <input name="hidTopMenuEnableTextShadow" id="hidTopMenuEnableTextShadow" type="hidden">
        <input name="hidPromptForEmailUpdate" id="hidPromptForEmailUpdate" type="hidden" value="false">
        <input name="hidPuid" id="hidPuid" type="hidden" value="DF4C551F-4695-4937-8758-8B11F1D560FB">
        <input name="hidIsLMSTopHeaderLinksIconify" id="hidIsLMSTopHeaderLinksIconify" type="hidden" value="false">
    </form>


    <!-- scripts handles page name, link function and other init scripts-->
    <script src="js/indexNaviScripts.js" type="text/javascript"></script>

    
    

    <!--google analytics code-->
    <script src="HelperPage/GoogleAnalytics.js" type="text/javascript"></script>

    <script src="/include/global/tools/jquery/userAgentCheck.js" type="text/javascript"></script>

    <script type="text/javascript">

        //-------------------------
        // Load Main Frame function.
        //-------------------------
        // If the user is on IOS then load 'ipadindex.aspx' page, else load default 'tasks.aspx' page
        //  Minimize top toolbar has been disable as it confuses users.
        $("iframe").src("Tasks.aspx");


        $(document).ready(function () { //>> Start jQuery: onReady

            var isPriHome = $("#hidIsPriHome").val();
            var topMenuTextColor = "#" + $("#hidTopMenuTextColor").val(); //>> Menu text color
            var topMenuTextSelected = "#" + $("#hidTopMenuSelectedTextColor").val(); //>> Menu link selected text color
            var topMenuTextColorRollover = "#" + $("#hidTopMenuTextColorRollover").val(); //>> Menu text color :hover
            var topMenuRolloverColor = "#" + $("#hidTopMenuRolloverColor").val(); //>> Hover background effect color
            //var topMenuTextSelected = "yellow"; //>> Menu link selected text color
            var topMenuEnableTextShadow = $("#hidTopMenuEnableTextShadow").val();
            var promptForEmailUpdate = $("#hidPromptForEmailUpdate").val();
            var isLMSTopHeaderLinksIconify = $("#hidIsLMSTopHeaderLinksIconify").val();

            //>> Prompt for user email
            if (promptForEmailUpdate == "true") {
                fn_emailPrompt();
            }


            if (isPriHome.toString() != "true" && isLMSTopHeaderLinksIconify.toString() != "true") { //>> Hover effect is only for non-new-primary-home icon types
                $("#primaryNav a.nav-link").hover(
                    function () {
                        $(this).css({ 'background-color': topMenuRolloverColor, 'color': topMenuTextColorRollover });
                    },
                    function () {
                        $(this).css({ 'background-color': '' });
                        if (!$(this).hasClass('clicked')) { //>> Check if link was clicked
                            $(this).css({ 'color': topMenuTextColor });
                        } else {
                            $(this).css({ 'color': topMenuTextSelected });
                        }
                    }
                );
            }

            //>> Hover and text effect for minimized menu
            $("#north-minimized-menu a.minimized-links").hover(function () {
                $(this).css({ 'background-color': topMenuRolloverColor, 'color': topMenuTextColorRollover });
            },
                function () {
                    $(this).css({ 'background-color': '' });
                    if (!$(this).hasClass('clicked')) { //>> Check if link was clicked
                        $(this).css({ 'color': topMenuTextColor });
                    } else {
                        $(this).css({ 'color': topMenuTextSelected });
                    }
                }
            );

            $(".userPassport").css({ 'color': topMenuTextColor }); //>> User passport info/link color
            $(".headerLinks a").css({ 'color': topMenuTextColor }); //>> Sub-links below profile avatar; feedback, help and logoff
            $(".headerLinks .separator").css({ 'color': topMenuTextColor }); //>> Separator, Sub-links below profile avatar; feedback, help and logoff
            $("a.nav-link").css({ 'color': topMenuTextColor }); //>> Set customize color, if any -- ** This line has to come first before setting the default selected color (see next line)
            $("a.minimized-links").css({ 'color': topMenuTextColor }); //>> Set customize color, if any -- ** This line has to come first before setting the default selected color (see next line)
            $("#li_home a.nav-link").css({ 'color': topMenuTextSelected }).addClass('clicked'); //>> Default highlight selected link, add a "clicked" class

            if (topMenuEnableTextShadow == "false") {
                $("#primaryNav a.nav-link").css({ 'text-shadow': '0 0px 0 #000000' }); //>> Remove the shadow for the text. I cannot set to empty string. Can only set to 0px border
                $("#north-minimized-menu a.minimized-links").css({ 'text-shadow': '0 0px 0 #000000' });
            }

            //>> Loop and set the selected link color
            $("li.navItem").click(function () {
                //>> Remove all the highlight. MUST remove first, else will contain previous click highlight history.
                $("a.nav-link").each(function () {
                    $(this).css({ 'color': topMenuTextColor });
                    $(this).removeClass('clicked');
                });

                //>> Set this link to highlight on click
                $(this).children('.nav-link').css({ 'color': topMenuTextSelected }).addClass('clicked');
            });

            //>> Loop and set the selected link color - minimized menu
            $("li.menu-links").click(function () {
                //>> Remove all the highlight. MUST remove first, else will contain previous click highlight history.
                $("a.minimized-links").each(function () {
                    $(this).css({ 'color': topMenuTextColor });
                    $(this).removeClass('clicked');
                });

                //>> Set this link to highlight on click
                $(this).children('.minimized-links').css({ 'color': topMenuTextSelected }).addClass('clicked');
            });


            //>> NOTE:
            //>> Styles are added dynamically on page load. The reason why I never create separate stylesheet or classes is because, we still need to detect if it is; "pri home", else; leave as it is.
            //>> I leave it to the Designer if a separate style-sheet is required, as it requires more knowledge of css organisation, which I lack.
            //>> Maideen, 23rd March 2012
            if (isPriHome.toString() == "true" || isLMSTopHeaderLinksIconify.toString() == "true") {

                var lnkHome = $("#lnkHome");
                var lnkContent = $("#lnkContent");
                var lnkTasks = $("#lnkTasks");
                var lnkCreate = $("#lnkCreate");
                var lnkWorkSpace = $("#lnkWorkSpace");
                var lnkTools = $("#lnkTools");
                var lnkOffice365 = $("#lnkOffice365");
                var lnkLiveEdu = $("#lnkLiveEdu");
                var lnkLinks = $("#lnkLinks");
                var lnkAdmin = $("#lnkAdmin");
                //var lnkGamesInLearning = $("#lnkGamesInLearning"); //>> There is already a dedicated banner for GIL in New Primary Home. A separate link is not required.
                var imgHome = "<img src='/include/global/images/launchbar/home.png' height='32px' width='32px' />";
                var imgContent = "<img src='/include/global/images/launchbar/content.png' height='32px' width='32px' />";
                var imgTasks = "<img src='/include/global/images/launchbar/tasks.png' height='32px' width='32px' />";
                var imgCreate = "<img src='/include/global/images/launchbar/create.png' height='32px' width='32px' />";
                var imgWorkSpace = "<img src='/include/global/images/launchbar/workspace.png' height='32px' width='32px' />";
                var imgTools = "<img src='/include/global/images/launchbar/tools.png' height='32px' width='32px' />";
                var imgO365 = "<img src='/include/global/images/launchbar/office365_Icon.png' height='32px' width='32px' />";
                var imgLiveEdu = "<img src='/include/global/images/launchbar/live.png' height='32px' width='32px' />";
                var imgLinks = "<img src='/include/global/images/launchbar/links.png' height='32px' width='32px' />";
                var imgAdmin = "<img src='/include/global/images/launchbar/admin.png' height='32px' width='32px' />";
                var badge = "<span class='badge' title='Current Task Count'>0</span>";
                $("#primaryNav a.nav-link").css({ 'background-color': 'transparent', 'padding-top': '5px' }); //>> Remove hover effect on the link. Not really removing, but cancelling out. 
                $("#li_GamesInLearning").hide(); //>> There is already a dedicated banner for GIL in New Primary Home. A separate link is not required.
                //$("#li_tasks").show();
                isPriHome.toString() == "true" ? $("#li_tasks").show() : $("#li_tasks").hide(); //>> We show the task link only when it isPrimary home, since the "home' link will bring users to content-home, which is not applicable to non-primary-home, or the iconify header version
                $("#li_tasks_minimized").show();
                $("#lnkGamesInLearning_minimized").hide(); //>> There is already a dedicated banner for GIL in New Primary Home. A separate link is not required.
                $(".subtext").show();
                $("a.subtext").css({ 'color': topMenuTextColor }); //>> Set customize color, if any -- ** This line has to come first before setting the default selected color (see next line)
                $("#li_home a.subtext").css({ 'color': topMenuTextSelected }).addClass('clicked'); //>> Default highlight selected link

                //>> Adding styling dynamically
                $(".menubar-container").css({ 'max-width': '1000px', 'width': '1000px' }); //>> Increase the width to cater for more icons than the usual navigation
                $("#primaryNav").css({ 'width': '640px' }); //>> Increase the width to cater for more icons than the usual navigation
                $("#primaryNav li.navItem").css({ 'margin-right': '14px' }); //>> Spacing on the right of the icon
                $("#primaryNav li.navItem a.subtext").css({ 'display': 'block', 'margin-top': '3.2em', 'font-size': '14px', 'font-weight': 'bold', 'text-align': 'center' }); //>> Sub-text styling
                $("a.subtext").css({ 'cursor': 'pointer' }); //>> Adding mouse-over effect for all the subtext anchor element

                $("li.navItem").click(function () {
                    //>> Remove all the highlight. MUST remove first, else will contain previous click highlight history.
                    $("a.subtext").each(function () {
                        $(this).css({ 'color': topMenuTextColor });
                        $(this).removeClass('clicked');
                    });

                    //>> Set this link to highlight on click
                    $(this).children('.subtext').css({ 'color': topMenuTextSelected }).addClass('clicked');
                });


                $(".navItem").hover(
                    function () {
                        $(this).children('.subtext').css({ 'color': topMenuTextColorRollover });
                    },
                    function () {
                        if (!$(this).children('.subtext').hasClass('clicked')) { //>> Check if link was clicked
                            $(this).children('.subtext').css({ 'color': topMenuTextColor });
                        } else {
                            $(this).children('.subtext').css({ 'color': topMenuTextSelected });
                        }
                    }
                );


                //>> Set images to links inner html
                lnkHome.html(imgHome);
                lnkContent.html(imgContent);
                lnkTasks.html(imgTasks + badge);
                lnkCreate.html(imgCreate);
                lnkWorkSpace.html(imgWorkSpace);
                lnkTools.html(imgTools);
                lnkOffice365.html(imgO365);
                lnkLiveEdu.html(imgLiveEdu);
                lnkLinks.html(imgLinks);
                lnkAdmin.html(imgAdmin);

            }   //>> End: if (isPriHome)


            //>> Update button clicked
            $('#lnkUpdateEmail').click(function () {
                var valid = fn_validateEmail();
                if (valid) {
                    fn_updateEmail()
                } else {
                    $('#dialog_Customize_msg').removeClass().addClass('error roundedCorners').html('Please enter a valid email address.');
                }
            });


        });                      //>> End: onReady

        //>> Update my task count - only for new pri
        function fn_updateTaskCount(count) {
            $(".badge").html(count);
        }

        function fn_emailPrompt() {
            $.colorbox({
                inline: true,
                href: "#dialog_EmailPrompt_div",
                width: "600px",
                height: "400px",
                onOpen: function () {
                    $('#colorbox').appendTo(jQuery('form:first'));
                    $('#dialogEmailPrompt_msg_top').show();
                    $('#dialog_Customize_msg').html(''); //>> Clear messages if any
                    $('#lnkUpdateEmail').show();
                },
                onClosed: function () {
                    //
                }
            });
            $('#txtEmail').focus();
        }

        function fn_validateEmail() {
            var email = $('#txtEmail').val();
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        function fn_updateEmail() {
            $.ajax({
                type: "POST",
                url: "../../Webservice/Admin/AdminWebService.asmx/PP_UserProfile_UpdateEmailByPuid",
                data: "{'puid':'" + $('#hidPuid').val() + "', 'email':'" + $('#txtEmail').val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {
                    $('#lnkUpdateEmail').hide();
                },
                complete: function () {

                },
                success: function (msg) {

                    if (msg.d.toString() == "false") {
                        $('#dialog_Customize_msg').removeClass().addClass('error roundedCorners').html('Error updating email address.');
                        $('#lnkUpdateEmail').show();
                    } else if (msg.d.toString() == "true") {
                        $('#dialog_Customize_msg').removeClass().addClass('success roundedCorners').html("Thank you for updating your email address. <br>This window will close shortly or click <a href='javascript:void(0);' onclick='javascript:$.colorbox.close();'>here</a> to close.");
                        setTimeout(function () {
                            $.colorbox.close();
                        }, 2000);
                    }
                }
            });


        }

        function LoadBlockUI(msg) {
            msg = (typeof msg != "undefined" && msg.length > 0) ? msg : "<br><b>Processing request. Please wait...</b><br>";
            $.blockUI({ message: msg + '<br/>' });
        }

        function UnloadBlockUI() {
            $.unblockUI();
        }

    </script>



<div class="resizer resizer-north resizer-open resizer-north-open" style="margin: 0px; padding: 0px; top: 75px; text-align: left; overflow: hidden; font-size: 1px; display: none; visibility: visible; position: absolute; z-index: 2; cursor: default;"><div title="Close" class="toggler toggler-north toggler-open toggler-north-open" style="margin: 0px; padding: 0px; text-align: center; overflow: hidden; font-size: 1px; display: block; position: absolute; z-index: 1; cursor: pointer;"></div></div></body></html>