<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="IFrame.aspx.cs" Inherits="IFrame"
         EnableViewState="false" %>
<%@ Register Src="ShowCode.ascx" TagName="ShowCode" TagPrefix="uc1" %>
<%@ Register Assembly="Westwind.AjaxToolkit" Namespace="Westwind.Web.Controls" TagPrefix="cc1" %>
<html>
<head runat="server">
    <title>wwHoverPanel IFrame Popups</title>
    <link href="WestWind.css" rel="stylesheet" type="text/css" />    
</head>
<body >
    <form id="form1" runat="server">
        <div>
            <h1>
                wwHoverPanel IFrame Popups</h1>
            <a href="default.aspx">Home</a> | <a href="IFrame.aspx">Reset Page</a> | <small>Page generated:
                <%= DateTime.Now %>
            </small>
            <div style="padding-left: 20px;">
                <p>
                </p>
                <b>Select a RSS or type in a Feed to display:</b><br />
                <asp:TextBox runat="server" ID="txtFeedUrl" Text="http://west-wind.com/WebLog/Rss.aspx" Width="500" />
                <input type="button" value="..." onclick="ShowRecent();" />
                <asp:Button runat="server" ID="btnChangeUrl" Text=" Go " />
                <p />
                <cc1:wwErrorDisplay ID="ErrorDisplay" runat="server" Width="450">
                </cc1:wwErrorDisplay>
                
                <asp:GridView runat="server" ID="grdFeed" AutoGenerateColumns="false" DataSourceID="RssFeed"
                    CssClass="blackborder" Width="700px" CellPadding="3" GridLines="None">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                &nbsp;<img src="images/link.gif" border="0" onmouseover="ShowFrame(event,'<%#XPath("link")%>' );" />
                                <a href="<%# XPath("link") %>">
                                    <%# XPath("title") %>
                                </a>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <HeaderStyle CssClass="gridheader" />
                    <AlternatingRowStyle CssClass="gridalternate" />
                </asp:GridView>
                <asp:XmlDataSource runat="server" ID="RssFeed" XPath="rss/channel/item"></asp:XmlDataSource>
                
                
                <!-- The content panel that display the individual Feed topics as a popup window. 
                         Note that I'm including a 'header' in the panel that is used as the titlebar that
                         allows closing the window manually with script code.
                -->
                <cc1:wwHoverPanel ID="Panel" runat="server" Style="display: none; background: white; top:100px;left:100px;" 
                    CssClass="blackborder" 
                    EventHandlerMode="ShowIFrameInPanel"
                    ServerUrl="default.aspx" 
                    ShadowOffset="5" 
                    ShadowOpacity=".25"
                    NavigateDelay="300" 
                    AdjustWindowPosition="true"
                    HoverOffsetRight="40"
                    HoverOffsetBottom="-30"
                    width="830px"
                    height="500px"
                    Closable="true"
                    DragHandleId="PanelHeader"
                    IFrameHeight = "478px"
                    FadeOnClose="true"
                 >
                 <div id="PanelHeader"
                       style="background: url('images/bluegradbg.png'); color: cornsilk; font-weight: bold; padding: 4px;" >
                    &nbsp;Drag me
                </div>
                </cc1:wwHoverPanel>
                
                <!-- The drop down list panel - this would actually be easier inline, but to demonstrate
                         cross frames communications I'm showing how to use IFRAMEs here.
                    -->
                <cc1:wwHoverPanel ID="RecentPanel" runat="server" Style="display: none; background: white;z-index:200;"
                    CssClass="blackborder" 
                    EventHandlerMode="ShowIFrameInPanel" 
                    ServerUrl="FeedUrls.aspx"
                    PanelShadowOffset="8" 
                    PanelShadowOpacity=".25" 
                    Width="500" Height="120"
                    IFrameHeight = "118" 
                    NavigateDelay="0"
                    AdjustWindowPosition="true"   
                    onmouseleave="RecentPanel.fadeout(5);">
                </cc1:wwHoverPanel>
                
                <hr />
                <uc1:ShowCode ID="ShowCode1" runat="server" CodeFile="~/Iframe.aspx" Text="Show Aspx" />
                <uc1:ShowCode ID="ShowCode2" runat="server" CodeFile="~/Iframe.aspx.cs" Text="Show Source" />
                <hr />
                This example demonstrates using hover IFRAME panels to display fully self contained
                pages as popups in the current page. This differs from the normal hover behavior
                in that the pages displayed are loaded into an IFRAME rather than an inline DIV
                tag and so can contain fully self contained HTML and FORM tags. They can also handle
                their own logic outside of the context of a page.
                <p />
                <p>
                IFRAME functionality is accessed with ShowIFrameAtMousePosition or ShowIFrameInPanel
                both of which display the IFRAME. Note that IFRAMEs behave a little differently
                than embedded hover windows in that IFRAMEs are fixed size and don't auto-adjust
                in size based on content so you need to set your original panel width to the desired
                size up front. Note that this frame is draggable which is enabled by using a client
                side wwDragBehavior and attaching it to the hover window.
                </p>
                <p>
                Finally this form shows a drop down list, also using an IFRAME with content pulled from 
                a separate page. The page loads and a selection then returns its selected value (a URL)
                back to the main page by calling back on the parent frame. This is highly useful in many
                situations for pop up help and selection lists or things like dynamic calendar popups. 
                Communication between frames is easy once you figure it out and this page demonstrates
                how it's done.
                </p>
            </div>
        </div>

        <script type="text/javascript">
    function ShowFrame(event,url)
    {
        // *** Assign the URL to the context object
        Panel.serverUrl = url;
        Panel.startCallback(event);
    }
    function HideFrame()
    {
        Panel.hide();
    }
    
    // *** Initiates display of the Recent drop down
    function ShowRecent(event)
    {
        RecentPanel.startCallback(event);

        // *** Move the recent panel just underneath the textbox
        var Ctl = $w('RecentPanel');
        var Ctl2 = $w('txtFeedUrl');
        
        // *** Make both absolute, then move to that position plus height
        Ctl2.style.position = 'absolute';
        Ctl.style.position = 'absolute';
        
        Ctl.style.top = (Ctl2.offsetTop + Ctl2.offsetHeight) + "px";
        Ctl.style.left = (Ctl2.offsetLeft );
        Ctl2.style.position = '';
    }
    
    // *** This function is called from the IFRAME when a selection
    // *** is made or the close button is pressed.
    function RecentIFrameCallback(Url)
    {
        RecentPanel.fadeout();

        if (Url)
        {
           $w('txtFeedUrl').value = Url;
           $w('btnChangeUrl').click();
        }        
    }       
    
    var Panel_DragBehavior = new wwDragBehavior("Panel","PanelHeader");
        </script>

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