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

<!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;
        }


        li
        {
            margin-bottom: 10px;
            margin-left: 7px;
        }

        ul
        {
            padding-left: 1.1em; 
        }

        td, th {
            /* not sure why this illegal CSS comment below affect the rendering.*/
            <!--border: 0px solid #999;-->
            padding: 0.5rem;
            text-align:center;
        }
        #form1 
        {
            margin-left: 7px;
            margin-right: 7px;
            margin-top: 8px;
            margin-bottom: 7px;
            background-color: white;
            -ms-user-select: none;
        }
    </style>
</head>

<!-- disable context menu -->
<body 
    id="body1" 
    oncontextmenu="return false;"
    style="border:1px solid #ebebeb; 
    width: 1075px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;">

    <link href="StyleSheet.css" rel="stylesheet" />

    <form id="form1" runat="server">
        <div>
        </div>
        <asp:SqlDataSource
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\EPA_Content.accdb;Persist Security Info=True;Jet OLEDB:Database Password=PT10RMX"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString.ProviderName %>"
            SelectCommand="SELECT ID, TopicID, Title, StepOrder, Bullets, [MediaFiles.MediaFileName] AS MediaFileName1, [MediaFiles.MediaFileData] AS MediaFileData1, [MediaFiles_1.MediaFileName] AS MediaFileName2, [MediaFiles_1.MediaFileData] AS MediaFileData2, [MediaFiles_2.MediaFileName] AS MediaFileName3, [MediaFiles_2.MediaFileData] AS MediaFileData3, ContentFolder FROM StepDetailsWithMultiMedia ORDER BY StepOrder" FilterExpression="TopicID='{0}'">
            <FilterParameters>
                <asp:QueryStringParameter DefaultValue="FDA105CE-E4EC-4E1D-8485-D405FDB3971E" Name="TopicID" QueryStringField="TopicID" />
            </FilterParameters>
        </asp:SqlDataSource>


        <asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1">

            <ItemTemplate>
                <table border="1">
                    <tr>
                        <td>
                            <!-- This div sets the _absolute_ width of the first column which contains the main picture -->
                            <div style="width: 700px; height: 0px"></div>


                            <asp:Image 
                                ID="ImageMain" 
                                ImageUrl='<%# "~/MultiMediaHandler.ashx?MediaFileName=" + Eval("MediaFileName1") + "&IsThumbnail=false"  %>' 
                                ImageAlign="Middle"                               
                                Height ="550px"
                                BackColor ="linen"
                                runat="server" 
                                Visible='<%# IsAnImageFile(Eval("MediaFileName1")) %>'
                            />

                            <asp:PlaceHolder 
                                ID="PlaceHolderVideo" 
                                runat="server"
                                Visible='<%# IsAnMovieFile(Eval("MediaFileName1")) %>'
                                >

                                <video 
                                    id="VideoPlayer" 
                                    width="680" 
                                    height="530" 
                                    preload="auto"
                                    controls="controls"
                                    autoplay="autoplay" 
                                    style="border:1px"
                                    poster="/Images/Loading Movie.png"
                                    runat="server"
                                    >
                                    <source 
                                        src='<%# GetMovieFromDb(Eval("MediaFileName1")) %>' 
                                        type="video/mp4"
                                    >
                                    Your browser does not support the video tag.
                                </video> 
                            </asp:PlaceHolder>

                            
                        </td>
                        <td style="vertical-align:top">
                            <table border="1" style="table-layout:fixed">
                                <!-- This row height sets the minimum height when there are no thumb nails to display.  This
                                    could be set to zero to collapse this space when there is only one (or zero) thumb nails
                                    to display -->
                                <tr style="height:75px">
                                     <td>
                                        <!-- These div's sets the _absolute_ width of the thumb nails -->
                                        <div style="width: 115px; height: 0px"></div>
                                        <!-- This height sets the height of the thumb nail.  When combined with the width above forces
                                            the page to scale the picture to fit the space. BUT ONLY IF IT IS TALLER THAN WIDE
                                            with respect to the containers aspect ratio!-->
                                        <asp:ImageButton 
                                            ID="ThumbNail1" 
                                            ImageUrl='<%# "~/MultiMediaHandler.ashx?MediaFileName=" + Eval("MediaFileName1") + "&IsThumbnail=true" %>'                               
                                            Height ="75px"                                         
                                            ImageAlign="AbsMiddle"
                                            BackColor ="linen"
                                            runat="server"
                                            OnClick="ThumbNail_Click"
                                            CommandArgument='<%# Eval("MediaFileName1") + "&Width=115&Height=75"%>'
                                        />                                

                                    </td>
                                    <td>
                                        <div style="width: 115px; height: 0px"></div>
                                         <asp:ImageButton 
                                            ID="ThumbNail2" 
                                            ImageUrl='<%# "~/MultiMediaHandler.ashx?MediaFileName=" + Eval("MediaFileName2") + "&IsThumbnail=true" %>' 
                                            Height ="75px"
                                            ImageAlign="AbsMiddle"
                                            BackColor ="linen"
                                            runat="server" 
                                            OnClick="ThumbNail_Click"
                                            CommandArgument='<%# Eval("MediaFileName2") + "&Width=123&Height=80"%>'
                                        />                                                               

                                    </td>
                                    <td>
                                        <div style="width: 115px; height: 0px"></div>
                                        <asp:ImageButton 
                                            ID="ThumbNail3" 
                                            ImageUrl='<%# "~/MultiMediaHandler.ashx?MediaFileName=" + Eval("MediaFileName3") + "&IsThumbnail=true" %>' 
                                            Height ="75px"
                                            ImageAlign="AbsMiddle"
                                            BackColor ="linen"
                                            runat="server" 
                                            CommandArgument='<%# Eval("MediaFileName3") + "&Width=123&Height=80"%>'
                                            OnClick="ThumbNail_Click"
                                        />                                                                

                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" style="height:0px; padding:5px; font-family:Arial; Font-Size:Large; text-align:left">
                                        <div style="width: 300px;  height: 0px"></div>
                                        <asp:Label 
                                            runat="server" 
                                            ID="Label4" 
                                            height="20px"
                                            Style="overflow:hidden"
                                            Text='<%# HighLight(Eval("ContentFolder").ToString()) %>'                                      
                                            />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" style="height:0px; padding:5px; font-family:Arial; Font-Size:Large; text-align:left">
                                        <div style="width: 300px; height: 0px"></div>
                                        <asp:Label 
                                            runat="server" 
                                            ID="Label123444"
                                            height="20px"
                                            Style="overflow:hidden"
                                            Text='<%# HighLight(string.Format("Step {0} - {1}", Eval("StepOrder"), Eval("Title"))) %>' 
                                            />
                                    </td>

                                </tr>
                                <tr style="height:310px; vertical-align:top">
                                    <td colspan="3"; style="padding:5px; font-family:Arial; Font-Size:medium; text-align:left">
                                        <div style="width: 300px; height: 0px"></div>
                                        <asp:Label 
                                            runat="server" 
                                            ID="Label6" 
                                            height="320px"
                                            Style="overflow:auto"
                                            Text= '<%# GenerateBulletList(Eval("Bullets")) %>'
                                        />
                                    </td>
                                </tr>
                                <tr style="vertical-align:bottom">
                                    <td style="padding:5px; text-align: center">
                                        <div style="width: 100px; height: 0px"></div>
                                        <asp:ImageButton 
                                            ID="ibReturn" 
                                            ImageUrl='<%# "~/Images/return-icon.png" %>' 
                                            Width ="50px"
                                            AlternateText ="Return to Index"
                                            runat="server" 
                                            PostBackUrl ="EPA_Index.aspx"
                                        />                                                                
                                    </td>
                                    <td style="padding:5px; text-align: center">
                                        <div style="width: 100px; height: 0px"></div>
                                        <asp:ImageButton 
                                            ID="ibPrevious" 
                                            ImageUrl='<%# GetPreviousBtnIcon() %>' 
                                            commandname="Page"
                                            commandargument="Prev"
                                            Width ="50px"
                                            AlternateText ="Previous"
                                            runat="server" 
                                        />                                                                
                                    </td>
                                    <td style="padding:5px; text-align: center">
                                        <div style="width: 100px; height: 0px"></div>
                                        <asp:ImageButton
                                            ID="ibNext"
                                            ImageUrl='<%# GetNextBtnIcon() %>'
                                            commandname="Page"
                                            commandargument="Next"
                                            Width ="50px"
                                            AlternateText="Next"
                                            runat="server" />                                                                                                        
                                    </td>                        
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>

            <PagerSettings Mode="NextPrevious" Visible="False" />

        </asp:FormView>

    </form>

</body>
</html>
