<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server">
    </asp:ScriptManager>
    <table class="modalPopup" style="display: none" id="pnlOverlay" runat="server">
        <tr>
            <td colspan="2">
                This is in a popup.<br />
                Try to Toggle Full Screen Mode. In Full Screen mode:<br />
                1. Full screen is dark.<br />
                2. Cannot edit / format text.<br />
                3. Cannot toggle back to original view.<br />
                4. Need to refresh page to regain control.
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <script type="text/javascript" language="javascript">
                    var elem = null;
                    function OnClientCommandExecuting(editor, args) {

                        var commandName = args.get_commandName();

                        if (commandName == "ToggleScreenMode") {

                            if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode
                            {

                                var divs = document.getElementsByTagName("DIV");
                                for (i = 0; i < divs.length; i++) {
                                    elem = divs[i];
                                    if (elem.className == "modalBackground") {
                                        elem.style.display = "none"
                                    }

                                }
                                fullscreen = true;
                            }
                            else {
                                elem.style.display = "";
                            }
                        }
                    }
                </script>
                <uc1:WebUserControl ID="WebUserControl1" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnOk" Text="Ok" runat="server" OnClientClick="$find('mpe').hide(); return false;" />
            </td>
            <td>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <table class="modalPopup" id="Table1" runat="server">
                    <tr>
                        <td colspan="2">
                            This is NOT in a popup.<br />
                            Try to Toggle Full Screen Mode. Works perfectly.
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnShow" Text="Click to see the popup issue" runat="server" OnClientClick="$find('mpe').show(); return false;" />
            </td>
        </tr>
    </table>
    <ajaxToolkit:ModalPopupExtender runat="server" ID="mpe" PopupControlID="pnlOverlay"
        BackgroundCssClass="modalBackground" TargetControlID="btnShow" BehaviorID="mpe" />
    </form>
</body>
</html>
