<%@ Page Language="C#" CodeBehind="ModalDialog.aspx.cs" %>
<%@ Register Assembly="Westwind.AjaxToolkit" 
    Namespace="Westwind.Web.Controls"
    TagPrefix="ww" %>
<%@ Register Src="~/ShowCode.ascx" TagName="ShowCode" 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 runat="server">
    <title>Modal Dialogs</title>
    <link href="westwind.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">    
    
    <h1>Modal Dialog Popup Samples</h1>   
    <a href="default.aspx">Sample Home</a> | <a href="ModalDialog.aspx">Reset Form</a>
    <div style="padding:30px;">
    <br />
    <h3>Simple Message Display</h3>
    The following is a simple pop up message that simply displays a notification dialog that echos back the content
    you've entered in the field below.
    <br />
    <br />
    Enter a title for your dialog:<br />
    <asp:TextBox runat="server" id="txtTitle" Width="500">Modal Popup Sample</asp:TextBox>
    <br />
    <br />
    Enter a message to display in the dialog:<br />
    <asp:TextBox runat="server" TextMode="MultiLine" ID="txtMessage" Width="500" Height="100" Text="If you can't say something nice, say nothin' at all!">
    </asp:TextBox><br />
    <input type="button" id="Starter" value="Show Dialog" 
           onclick="MessageBox.showDialog($w('txtMessage').value,$w('txtTitle').value);"/>
        <br />
        <br />
        <br />
        
    <h3>Input Dialog Box</h3>
    The following pops up a dialog window that allows text entry. You can enter a value into the text field and
    then click the OK or cancel button to exit. Events fire and a messagebox confirms the value you've entered.
    This dialog also uses a custom div to display a different background overlay.
    <br />
    <br />
    <input type="button" id="btnTextEntry" value="Enter Name" onclick="MessageBox2.showDialog();" />   
        <br />
        <br />
    <div id="divNameResult" class="errordisplay" style="display:none;padding:8px;width:500px;"></div>
        <br />
        <br />
        <h3>Generic Message Box without explicit HTML Elements</h3>
        The following dialog box is generated with pure client script and doesn't require
        any HTML elements on the page to 'attach to'. Rather the static wwModalDialog.createDialog()
        creates a dialog on the fly and uses that for displaying the message box. Not as
        flexible as the full functionality since the display is fixed and generic, but it
        can be done with two lines of code.<br />
        <br />
    
    <input type="button" onclick="GenericButtonClick();" value="Show Generic Dialog" /><br />

        <br />
        <div id="divGenericButtonResult" class="errordisplay" style="display:none;padding:8px;width:500px;"></div>
        <br />       
    
        <h3>Server Modal Dialog</h3>
        Youc can also force the server to fire a modal dialog by calling the .Show function
        on a Modal Control from the server. The server will then embed the required code to
        load the page and the modal dialog will immediately overlay the page. Note that
        the underlying page content is still displayed.           
        <br />
        <br />
        <asp:Button runat="server" ID="btnModalServer" OnClick="btnModalServer_Click" Text="Server Modal Dialog"/>
        <script runat="server">
            protected void btnModalServer_Click(object sender, EventArgs e)
            {
                MessageBox.Show("Test Text", "This is the title");                
            }
</script>
          <hr />
        <div style="margin-left: 25px">
            <uc1:ShowCode ID="ShowAspx" runat="server" CodeFile="~/ModalDialog.aspx"
                          Text="Show ASPX"></uc1:ShowCode>
        </div>
        <hr />
        <div style="margin-left: 25px">
        These client side modal dialogs aren't exactly AJAX, but they are useful in presenting messages to the user in
        a more effective way than using an alert() or prompt() commands. The toolset provides for both a client
        and server side class that lets you pop up dialog boxes over shaded background
        <br />
        <br />
        The server control allows creating a designable dialog that is a panel with embedded header and
        content areas that are set by client code. The server control when dropped adds the necessary layout
        to the page so all you have to do is change the layout and assign names. The server control inherits
        from DragPanel so the panel control is also draggable.
        <br />
        <br />
        The control also can be driven entirely through client side code. There's even a simple method to 
        create the dialog on the fly so there's no extra control requirements on the page. createDialog
        dynamically creates a simple dialog and lets you pop up a dialog with 2 lines of code.       
        <br />
        <br />

<!-- First Message Box -->
<ww:wwModalDialog ID="MessageBox" runat="server" 
    ContentId="MessageBoxContent" HeaderId="MessageBoxHeader"
    OkButtonId="MessageBoxOk"  ShadowOpacity=".20" ShadowOffset="8"
    DragHandleId="MessageBoxHeader" Draggable="true" BackgroundOpacity=".70"
    Style="background: white; display:none;" 
    Width="400px" cssclass="blackborder" FadeinBackground="True" Closable="True"
>
    <div id='MessageBoxHeader' class='gridheader' style="padding:4px">Web Connection</div>
    <div style='padding: 10px;'>
        <div id='MessageBoxContent' style="padding:10px;">
        </div>
        <hr />
        <input id='MessageBoxOk' type='button' value='Close' />
    </div>
</ww:wwModalDialog>    
    


<!-- Second Message Box used for name entry -->    
<ww:wwModalDialog ID="MessageBox2" runat="server" 
    ContentId="MessageBox2Content" 
    HeaderId="MessageBox2Content" 
    OverlayId="overlay" 
    BackgroundOpacity=".70"
    OkButtonId="MessageBox2Ok" 
    CancelButtonId="MessageBox2Cancel" 
    OnClientDialogClick="OnMessageBox2Click"  
    FadeinBackground="true"
    Draggable="true" 
    DragHandleId="MessageBox2Header"     
    Closable="true"            
    ShadowOffset="6" ShadowOpacity=".60"
    Style="background: white; display:none;" cssclass="blackborder"
    Width="400px"
>
    <div id='MessageBox2Header' class='gridheader' style="padding:2px;">The Name Game</div>
    <div style='padding: 10px;'>
        <div id='MessageBox2Content'>
        Enter your name:<br />
        <input type="text" style="width:300px;" id="txtInputName" />
        <div id="MessageBox2Message" class="errormessage"></div>
        </div>
        <hr />
        <input id='MessageBox2Ok' type='button' value='Save' />
        <input id='MessageBox2Cancel' type='button' value='Cancel' />
    </div>
</ww:wwModalDialog>

<!-- Overlay background div used for stylized background of second Message Box -->
<div id="overlay" style="background-color:steelblue;background-image:url(images/sailbig.jpg);background-attachment:fixed;background-repeat:no-repeat;"></div>

<!-- Third MessageBox is done via code below -->
    
<script type="text/javascript">

// *** Second Message Box with result handler
function OnMessageBox2Click(Result,elButton)
{
    var ctl = new wwControl("divNameResult");
    
    if (Result == 1)
    {
        var Name = $w('txtInputName').value;
        if (!Name)
        {
            ctl.setText();
            var msg = $ww("MessageBox2Message");
            msg.setText("C'mon don't be shy! Please enter a name or cancel.");
            msg.show();
            setTimeout( function() { msg.hide(); },6000);
            return false; // keep the dialog up
        }
        else
            ctl.setText("Thank you for your input, " +  Name  +"!");
    }
    else
        ctl.setText("You've canceled the dialog!");

    ctl.fadein(3);
    setTimeout(function() { ctl.fadeout(); },5000);    
}

// *** 3rd MessageBox
function GenericButtonClick()
{
    MBox("This dialog is generic, was created on the fly and requires no page elements.<hr>","Generic Modal Dialog ","Make it so","Say it ain't so");
}
var Mbox = null;
function MBox(Message,Title,OkButton,CancelButton)
{
    Mbox = wwModalDialog.createDialog("Mbox",400,OkButton,CancelButton,MBox_Callback);
    Mbox.showDialog(Message,Title);
}
// *** Capture the dialog result 1 - OK 0- Cancel
function MBox_Callback(Result,button)
{
    var div = new wwControl("divGenericButtonResult");
    
    if (Result == 1)
       div.setText("Accepted. Button Value: " + button.value);
    else
       div.setText("Cancelled.  Button Value: " + button.value);
   
    div.fadein();
    setTimeout("new wwControl('divGenericButtonResult').fadeout();",5000); 
}
</script>


   </div>
</form>
</body>
</html>
