<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HoverList.aspx.cs" Inherits="HoverList" 
        enableviewstate="false" Trace="false" EnableEventValidation="false"  %>
<%@Register Namespace="Westwind.Web.Controls" assembly="Westwind.AjaxToolkit" 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>Invoice List</title>
    <link href="WestWind.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <style type="text/css">
      table.blackborder td,th { font-size: 0.82em; font-family: tahoma,verdana,arial }
	</style>
</head>
<body>
    <form id="form1" runat="server">	
    <div>
        <h1>wwHoverList Invoices</h1>
        <a href="default.aspx">Home</a> | 
        <a href="HoverList.aspx">Reset Page</a> | <small>Page generated: <%=DateTime.Now  %></small>
            
        <p />        
        
        &nbsp; &nbsp;
        <asp:CheckBox ID="chkFullInvoice" runat="server" Text="Show full closable and draggable Invoice" 
                        AutoPostBack="true" /><p/>
        
            &nbsp;&nbsp;
        <asp:Label ID="lblErrorMessage" runat="server" CssClass="errormessage" Width="457px" Visible="False"></asp:Label>&nbsp;
    
    </div>
        <asp:GridView ID="gvInvoiceList" runat="server"  CellPadding="4" 
                      CssClass="blackborder" AutoGenerateColumns="false"
                      Width="95%"  GridLines="None"
                      HorizontalAlign="Center" AllowPaging="True" 
                      OnPageIndexChanging="gvInvoiceList_PageIndexChanging" PagerSettings-Mode="NumericFirstLast" PageSize="12">
            <FooterStyle cssclass="gridheader"/>
            <PagerStyle cssclass="gridheader"  ForeColor="white" HorizontalAlign="right" />
            <AlternatingRowStyle CssClass="gridalternate" />
            <HeaderStyle cssclass="gridheader"  Font-Bold="True" />
            <Columns>
                <asp:TemplateField  ItemStyle-HorizontalAlign="Center">
                <HeaderTemplate>Invoice No.</HeaderTemplate>
                <ItemTemplate>
                	<a href='InvoiceAbstract.aspx?id=<%# Eval("OrderId") %>' 
                	   onmouseover='ShowInvoice(event,<%# Eval("OrderId") %>);'
                	   onmouseout='<%# this.chkFullInvoice.Checked ? "" : "HideInvoice();" %>'  >
                	<%# Eval("OrderId") %></a>
                </ItemTemplate>
                    <ControlStyle Width="200px" />
				</asp:TemplateField>

                <asp:TemplateField >
                <HeaderTemplate>Date</HeaderTemplate>
                <ItemTemplate>
                			<%# ((DateTime)Eval("OrderDate")).ToString("d") %>
                </ItemTemplate>
				</asp:TemplateField>
                
                <asp:TemplateField >
                <HeaderTemplate>Company</HeaderTemplate>
                <ItemTemplate>
                			<%# Eval("Company") %>
                </ItemTemplate>
				</asp:TemplateField>

                <asp:TemplateField >
                <HeaderTemplate>Name</HeaderTemplate>
                <ItemTemplate>
                			<%# Eval("Name") %>
                </ItemTemplate>
				</asp:TemplateField>

                <asp:TemplateField ItemStyle-HorizontalAlign="Right" >
                <HeaderTemplate>Order Total</HeaderTemplate>
                <ItemTemplate>
                			<%# ((decimal)Eval("OrderTotal")  + (decimal) Eval("Freight")).ToString("n2") %>
                </ItemTemplate>
				</asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br />
        <hr />
        <blockquote>
        This example demonstrates using the wwHoverPanel class to automatically display the HTML fragment result at the current mouse cursor position. The Url can either
            be from the same page (default) or from a separate Url (full Invoice). With wwHoverPanel all
            the messy HTML formatting and positioning is handled
        for you and you only hook up the the event hooks for onmouseover
            and onmouseout in the GridView.</blockquote>
        <blockquote>
            If you check the full invoice checkbox, the page posts back and sets different set
            of properties on the HoverPanel. Rather than an auto open and auto close window
            the behavior is changed to load data and keep the window open, providing a draggable
            window that has a close box. Although this example uses code to set this up to provide
            the dynamic dual-view display, all settings can also be made declaratively on the
            control directly.<br />
            <br />
            Note also that you can optionally pass form data to the server on these callbacks.
            For example, the server code checks the status of the above checkbox to decide which
            data to load and display - the value is passed back on the callback as POST data
            that can be read by the server code.
        <hr />
        <uc1:ShowCode ID="ShowSource" runat="server" CodeFile="~/HoverList.aspx.cs" />
        <uc1:ShowCode ID="ShowAspx" runat="server" CodeFile="~/hoverlist.aspx" Text="Show ASPX" />
        &nbsp;
        <br />
        <br />
        
<ww:wwHoverPanel ID="LookupPanel" runat="server" 
              ServerUrl=""              
              NavigateDelay="550"
              PostbackMode="Post"              
              ScriptLocation="WebResource"
              Style="display: none; background: white;" 
              PanelOpacity="0.89" 
              ShadowOffset="5"
              ShadowOpacity="0.25"
              FadeOnClose="true"
              
>
    <!-- Note: These div panels are only used in the closable box sample (Show Full Invoice)
               In the standard hover sample content is loaded directly
               into the LookupPanel. In the Full Invoice sample the HoverPanel
               behavior is changed programmatically to load the content into the 
               content areay below.
               
               The layout is optional but can be used to provide for a nice designable
               popup window especially when the window needs to popup and stay visible
               and be draggable and closable.
    -->
    <div id="PanelHeader" class="gridheader" style="padding:4px">Customer Info</div>
    <div id="PanelContent"  style="padding:10px;background:cornsilk;"></div>
</ww:wwHoverPanel>
        </blockquote>

<script type="text/javascript">
function ShowInvoice(event,Id)
{
    LookupPanel.startCallback(event,"id=" + Id.toString(),null,OnError);    
}    
function HideInvoice()
{
    LookupPanel.hide();
    //LookupPanel.fadeout();
}
function OnCompletion(Result)
{
    alert('done it!\r\n' + Result);
}
function OnError(Result)
{
    alert("*** Error:\r\n\r\n" + Result.message);
}
</script>

    </form>

</body>
</html>