<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>PDF.js integration demo</title>
    <link href="Styles/styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
        <script type="text/javascript">
            function openWindow(sender) {
                var radWindow = radopen(sender.title, null);
                radWindow.center();
            }
        </script>
        <div class="pjs_wrapper">
            <h2>Using PDF.js with Telerik UI for ASP.NET AJAX</h2>
            <div class="pjs_inner_wrapper">
                <div class="pjs_inner_container_wrapper">
                    <telerik:RadListView ID="RadListView1" runat="server">
                        <ItemTemplate>
                            <span class="pjs_image_wrapper"><span class="pjs_aligner"></span>
                                <asp:HyperLink ID="HyperLink1" runat="server" onclick="openWindow(this);" ToolTip='<%# "pdf.js/web/viewer.html?file=" + Eval("PdfUrl") %>'
                                    CssClass="">
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ThumbnailUrl") %>' AlternateText='RotatorImage' />
                                </asp:HyperLink>
                            </span>
                        </ItemTemplate>
                        <LayoutTemplate>
                            <div class="pjs_list_view">
                                <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
                                <div>
                                </div>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                    <telerik:RadRotator ID="RadRotator1" runat="server" Width="371px" Height="537px"
                        FrameDuration="2000" CssClass="pjs_rotator">
                        <ItemTemplate>
                            <asp:HyperLink ID="HyperLink1" runat="server" onclick="openWindow(this);" ToolTip='<%# "pdf.js/web/viewer.html?file=" + Eval("PdfUrl") %>'>
                                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' AlternateText='RotatorImage' />
                            </asp:HyperLink>
                        </ItemTemplate>
                    </telerik:RadRotator>
                </div>
                <div class="pjs_instructions">
                    <h3>Instructions</h3>
                    <p>
                        Click on any image displayed in RadListView (above) or RadRotator (below). The PDF
                    file will be displayed in a RadWindow control.
                    </p>
                    <br />
                    <h3>Products used</h3>
                    <ul>
                        <li>RadListView for ASP.NET AJAX</li>
                        <li>RadRotator for ASP.NET AJAX</li>
                        <li>RadWindow for ASP.NET AJAX</li>
                        <li>PDF.js library</li>
                    </ul>
                </div>
                <div style="clear: both">
                </div>
                <div class="pjs_link_button_wrapper">
                    <asp:LinkButton ID="Button1" CssClass="pjs_link_button" runat="server" Text="Generate a PDF file using PdfProcessing" OnClick="Button1_Click" />
                </div>
            </div>

        </div>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="true" Width="1300"
            EnableShadow="true" KeepInScreenBounds="true" VisibleStatusbar="false" VisibleTitlebar="true"
            Behaviors="Close, Maximize" Height="950">
        </telerik:RadWindowManager>
    </form>
</body>
</html>
