<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PreLoadMovieMuted.aspx.cs" Inherits="EPA_WebSite.PreLoadMovieMuted" EnableEventValidation="false"%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #body1{
            margin: 0;
            padding: 0;
            background-color: #ebebeb;
        }
        #form1 {
            width: 1133px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: x-large;
            margin-left: 7px;
            margin-right: 7px;
            margin-top: 8px;
            margin-bottom: 7px;
            background-color: white;
            -ms-user-select: none;
        }

        .MainHeaderStyle
        {
            border: solid 1px Black;
            background-color: #b4b4b4;
            font-weight: bold;
        }

        .GroupHeaderStyle
        {
            border: solid 1px Black;
            background-color: #d7d7d7;
            font-weight: bold;
        }

        .TopicCellStyle
        {
            background-color:white;
            padding-left: 2em;
        }
        .auto-style1 
        {
            width: 228px;
            text-align: left;
            vertical-align: top;
            font-family: Arial, Helvetica, sans-serif;
            font-size: x-large;
            -ms-user-select: none;
        }
        
   </style>
<%--    <script type = "text/javascript">
        function SetSource(SourceID) {
            var hidSourceID = document.getElementById("<%=hidSourceID.ClientID%>")
            hidSourceID.value = SourceID;
        }
    </script> --%>
    <script type = "text/javascript">
        // This sets the cursor to the end of the text when if recieves focus
        function SetCursorToEnd(SourceID) {
            SourceID.value = SourceID.value;
            var len = SourceID.value.length;
            SourceID.setSelectionRange(len, len);
        }
    </script> 
</head>

<!-- disable context menu -->
<body 
    id="body1" 
    oncontextmenu="return false;" 
    width: 1080px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;">

    <form 
        id="form1" 
        runat="server"
    >
    <div>
     </div>
   
        <asp:SqlDataSource 
            ID="SqlDataSource1" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" EnableCaching="True" SelectCommand="SELECT ID, ShortDescription, LongDescription, ContentType, SeqNumber, MediaFileName, MediaFileData FROM DemoMoviesWithMultiMedia WHERE (ContentType = 'Watch Me') ORDER BY SeqNumber" 
            >
        </asp:SqlDataSource>

        <table border="1" style="table-layout:fixed; ">
            <tr style="vertical-align:top">
                <td>
                    <div style="overflow-x:auto; width:842px; vertical-align:top; padding:4px 4px 4px 4px"> 
                        <asp:PlaceHolder 
                        ID="PlaceHolderVideo" 
                        runat="server"
                        Visible='<%# IsAnMovieFile(Eval("MediaFileName")) %>'
                        >

                            <video 
                                id="VideoPlayer" 
                                width="840" 
                                height="520" 
                                preload="auto"
                                autoplay="autoplay"
                                controls="controls"
                                style="border:1px"
                                poster="/Images/Loading Demo Content.png"
                                runat="server"
                                muted="muted">
                                <source 
                                    src='<%# GetMovieFromDb(Eval("MediaFileName")) %>' 
                                    type="video/mp4"
                                        />
                                Movie not available.  Contact customer support.
                            </video> 
                            <asp:Label ID="LongDesc" runat="server" Text="Long Description" Width="840px" ></asp:Label>
                        </asp:PlaceHolder>
                  </div>
                </td>
                <td class="auto-style1">
                    <div style="width:250px; vertical-align:top"> </div>
                        <table style="width: 246px; padding-left:4px">
                            <tr>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text="Select Video" Width="255px" Font-Bold="True" Font-Size="X-Large" ></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-top:10px">
                                    <div style="overflow-x:auto; width:250px; vertical-align:top; height:570px"> 
                                        <asp:DataList ID="ThumbnailList" runat="server" DataSourceID="SqlDataSource1">
                                            <ItemTemplate>
                                                <table>
                                                    <tr>
                                                        <%#Eval("ShortDescription") %>
                                                    </tr>
                                                    <td style="padding-bottom:10px">
                                                        <asp:ImageButton 
                                                            ID="ThumbNail1" 
                                                            ImageUrl='<%# "~/MultiMediaHandler.ashx?MediaFileName=" + Eval("MediaFileName") + "&IsThumbnail=true" %>'                               
                                                            Height ="100px"                                         
                                                            ImageAlign="AbsMiddle"
                                                            BackColor ="linen"
                                                            runat="server"
                                                            OnClick="ThumbNail_Click"
                                                            CommandArgument='<%# Eval("MediaFileName") + "&" + Eval("LongDescription")%>'
                                                        />                                
                                                    </td>
                                                </table>
                                            </ItemTemplate>
                                        </asp:DataList>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
</body>
</html>
