<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.LightBoxExamplesCS.Examples.Templates.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.vLightBox = $find("<%=OpenVideoLightBox.ClientID %>");
                demo.cLightBox = $find("<%=CodeLightBox.ClientID %>");
                demo.fLightBox = $find("<%=FeedbackLightBox.ClientID %>");
                demo.initialize();
            });
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-container size-medium">
        <div class="description_wrapper">
            <h2>How to Create Your First Project</h2>
            <asp:Image ImageUrl="~/LightBox/Examples/Templates/images/thumbnail.jpg" ID="VideoImage" AlternateText="VideoImage" runat="server" onclick="demo.openVideLightBox(); return false;" />
            <span class="description">In this video series brought to you by the Telerik UI for ASP.NET AJAX Team at Progress, you will learn a few tips for debugging ASP.NET applications using the Visual Studio tools and .NET Framework.
            </span>
            <telerik:RadButton RenderMode="Lightweight" ID="CodeButton" OnClientClicked="demo.openCodeLightBox" AutoPostBack="false" Text="Get the Source Code" Skin="Silk"
                CssClass="rbPrimaryButton" runat="server" />
        </div>
        <div class="bottomWrapper">
            <p>Was this video helpful?</p>
            <telerik:RadButton RenderMode="Lightweight" ID="FeedbackButton" OnClientClicked="demo.openFeedbackLightBox" AutoPostBack="false" Text="Share Your Feedback"
                Skin="Silk" runat="server" />
        </div>
        <telerik:RadLightBox RenderMode="Lightweight" ID="FeedbackLightBox" runat="server" Width="400px" Height="350px" CssClass="lb_feedback" Modal="true" ZIndex="100000">
            <ClientSettings>
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem>
                    <ItemTemplate>
                        <asp:Label ID="FormTitle" runat="server" Text="SHARE YOUR FEEDBACK" CssClass="feedback_header"></asp:Label>
                        <br />
                        <asp:Label Text="FirstName:" ID="FirstNameLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="FirstNameTextBox" Width="245px" />
                        <br />
                        <asp:Label Text="LastName:" ID="LastNameLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="LastNameTextBox" Width="245px" />
                        <br />
                        <asp:Label Text="Email:" ID="EmailLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="EmailTextBox" Width="245px" />
                        <br />
                        <asp:Label Text="Comments:" ID="CommentsLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" Resize="None" TextMode="MultiLine" Width="245px" Height="100px"></telerik:RadTextBox>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" Text="Submit Feedback" runat="server" Skin="Silk" CssClass="submit_feedback_btn rbPrimaryButton"></telerik:RadButton>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
        <telerik:RadLightBox RenderMode="Lightweight" ID="CodeLightBox" runat="server" Width="1000px" Height="720px" CssClass="lb_code" ItemsCounterFormatString="Code page {0} of {1}" Modal="true" ZIndex="100000">
            <ClientSettings>
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem>
                    <ItemTemplate>
                        <div style="height: 700px; overflow: auto; width: 860px; margin-left: 70px; position: relative;">
                            <pre runat="server" id="code1" class="brush: xml" onprerender="code1_PreRender"></pre>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem>
                    <ItemTemplate>
                        <div style="height: 700px; overflow: auto; width: 860px; margin-left: 70px; position: relative;">
                            <pre runat="server" id="code2" class="brush: csharp" onprerender="code2_PreRender"></pre>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
        <telerik:RadLightBox RenderMode="Lightweight" ID="OpenVideoLightBox" runat="server" Modal="true" ZIndex="100000">
            <ClientSettings>
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem Width="560px" Height="320px">
                    <ItemTemplate>
                        <div>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/9jRGEgaE8Pg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
    </div>
    </form>
</body>
</html>