<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chat.aspx.cs" Inherits="ChatClient"
         EnableViewState="true" EnableEventValidation="false" ValidateRequest="false" %>
<%@ Register Src="../ShowCode.ascx" TagName="ShowCode" TagPrefix="uc1" %>
<%@Register Namespace="Westwind.Web.Controls" assembly="Westwind.AjaxToolkit" TagPrefix="ww" %>
<!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>wwMethodCallback Chat</title>
    <link href="../WestWind.css" rel="stylesheet" type="text/css" />
    <script src="Chat.js" type="text/javascript"></script>
    <style type="text/css">
        td { font-size: 8pt; font-face: Tahoma sans-serif;}
        input { font-size: 8pt; font-face: Tahoma sans-serif; }
        .ChatList { font-size:8pt; font-face: Tahoma; border: 1px solid Darkblue; background:white; }
        .ControlOpacity { opacity: .70; filter:alpha(opacity='70'); background:white; color: navy; }        
        .BackgroundImage { xopacity:.90;xfilter:alpha(opacity='80');background:url(../images/sailbig.jpg); }
        
        .MessageWrapper { padding: 3px; }
        .MessageWrapperMe { padding: 3px; }
        .Message { padding-left: 15px; }
        .MessageAuthor { color: silver; font-weight: bold; }        
    </style>    
</head>
<body  >
    <form id="ChatForm" runat="server">    
        <div>
            <h1>wwMethodCallback Chat</h1>
            <a href="../default.aspx">Home</a> | <asp:LinkButton runat="server" ID="lnkRefresh">Reset Page</asp:LinkButton> | <a href="chat.aspx" target="_blank">
                Open another Window</a> | <small>Page
                created:&nbsp;<%= DateTime.Now.ToString() %></small><br />
            &nbsp;<br />
                
                <div id="lblErrorMessage" class="errordisplay" 
                     style="width:400px;display:none;padding:8px;padding-left: 20px;">
                </div>
                
                <table class="blackborder BackgroundImage" cellpadding="10" width="100%"
                       border="4">
                <tr>
                <td valign="top" style="color: White">
                    Messages:
                    <div id="divMessages" 
                        class="ControlOpacity"
                        style="padding:5px;overflow-Y:scroll;border:solid 1px teal;height:300px;left:0px;right:10px;">
                        <asp:Label ID="lblMessages" runat="server" style="left:0px;right:10px;"></asp:Label>
                    </div>                                  
                    <hr />
                   
                    Enter a Message:<br />
                    <table width="100%">
                    <tr>
                    <td>                    
                        <asp:TextBox ID="txtMessage" runat="server"  TextMode="MultiLine"
                                     class="ControlOpacity"
                                      style="width:100%;height:50px;left:20px;right:10px;font:normal Tahoma 8pt;overflow-y:scroll;opacity:.80;" />
                    </td>
                    <td width="100" align="right">
                        <input type="button" id="btnSend" value="Send" accessKey="S" onclick="WriteMessage()"
                               style="height:50px;width:90px;right:10px" />

                    </td>
                    </tr>
                    </table>
                 </td>
                 <td valign="top" style="border-left:solid 1px Navy;width:165px;">
                    <span style="color: white">Your Chat Handle:</span><br />
                    <asp:TextBox ID="txtName" runat="server"
                                 class="ControlOpacity" 
                                 style="width:160px;Font-Size:8pt;margin-bottom:8px;" 
                                 onblur="NameChanged(this.value);"></asp:TextBox>
                                 
                    <div class="gridalternate" style="padding: 5px;border:solid 1px darkblue;">
                    Enter a Chat Id:<br />
                    <asp:TextBox ID="txtChatId" runat="server" Width="100px"  Font-Size="8pt" onblur="ChatIdChanged(this.value);">TestChat</asp:TextBox><input type="button" id="btnChatList" value="..." onclick="PopupChatList();" style="font-size:8pt;height:20px;width:20px" />
                    <p />
                    Active Users:
                    <div id="divUserList" style="height:230px;overflow-Y:auto;background:white;padding:5px;">     
                    </div>                  

                    </div>
                 </td>
                </tr>
                </table>   
                </div>
    <div id="divChatList" class="ChatList" 
         style="position:absolute;border:solid 1px Darkblue;padding:5px;display:none;background:white;">
    </div>
    <p />
    <hr />

    <ww:wwMethodCallback ID="ChatService" 
        runat="server"
        ServerUrl="ChatService.ashx"
        ScriptLocationType="WebResource">
    </ww:wwMethodCallback>


    <small>
    This example demonstrates using the wwMethodCallback control to an HTTP handler that implements
    the Chat Message service functionality. There's no code in the server page at all - all the
    code is in the HTTP handler which effectively becomes a service. Using an HTTP Handler is 
    more efficient than calling back to the page and is a great choice if you don't need any
    logic or control content from the original page.
    <br />
    <br />
    The majority of the code sits on the client side. This code uses the client proxy to make
    calls to the server and update the controls on the page. 
    <br />
    <br />
    Since AJAX cannot reliably do a PUSH model the only way for the client to get the latest messages is to poll the server for updates frequently. Therefore 
    this is a very chatty interface that fires a lot of requests to the server. Load with many users in this scenario
    could very easily become a scalability problem. However,
                    this example uses pure JSON messages which push only updated data back and forth
                    so message size generally is very small. You might want to break out Fiddler and
                    compare both the ATLAS and Anthem chat which use different approaches, where this
                    approach is the more bandwidth friendly of the two.</small>
    <hr />
            

    <uc1:ShowCode ID="ShowCode1" runat="server" CodeFile="~/chat/Chat.aspx" Text="ASPX" width="130" height="25"/>
    <uc1:ShowCode ID="ShowCode2" runat="server" CodeFile="~/chat/Chat.aspx.cs" Text="CodeBehind" width="130" />
    <uc1:ShowCode ID="ShowCode3" runat="server" CodeFile="~/app_code/ChatService.cs" Text="Service Http Handler" width="130"/>
    
    <script type="text/javascript">   
    //<!--

    // Script Initialization code. The rest of script code is in chat.js

    // *** global references so we don't get partials
    var Name = $w('txtName').value;
    var ChatId = $w('txtChatId').value;

    // *** Frequency of updates - 5 seconds
    var PingFrequency = 50000;  

    // *** Check value
    var LastCallbackTime = new Date();

    // -->
    </script>    
    </form>
</body>
</html>
