<%
"use strict";

import "/js/utility.js"
import "/tv/js/constants.js"
import "/tv/js/tvutil.qjs"

    var filter = "";
    if (getArg("ViewFilter"))
        filter = getArg("ViewFilter");

    var listOnly = 0;
    if (getArg("ListOnly"))
        listOnly = 1;

    var startIndex = 0;
    if (getArg("Start"))
        startIndex = getIntegerArg("Start");

    var myth  = new Myth();
    var dvr = new Dvr();

    var PAGEINTERVAL = 10;
    var programList;
    if (filter == "conflicting")
        programList = dvr.GetConflictList(startIndex, PAGEINTERVAL, 0);
    else if (filter == "important" || filter == "")
        programList = dvr.GetUpcomingList(startIndex, PAGEINTERVAL, false, 0, 0);
    else
    {
        var status = 0;
        if (filter == "inactive")
            status = RecordingStatus.INACTIVE;

        programList = dvr.GetUpcomingList(startIndex, PAGEINTERVAL, true, 0, status);
    }

    var nextStartIndex = (startIndex + PAGEINTERVAL);
    if (nextStartIndex >= programList.TotalAvailable)
        nextStartIndex = 0;

    var programs = programList.Programs;
%>

<% if (!listOnly) {%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=qsTr("Upcoming Recordings")%></title>
<link rel="stylesheet" type="text/css" href="/css/site.css">
<link rel="stylesheet" type="text/css" href="/tv/css/upcoming.css">
<link rel="stylesheet" type="text/css" href="/tv/css/common.css">
<link rel="stylesheet" type="text/css" href="/tv/css/category_colors.css">
<script src="/js/utility.js"></script> <!-- ECMA not JS -->
<script src="/js/util.qjs"></script>
<script type="text/javascript" src="/3rdParty/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/3rdParty/jquery/jqueryUI/js/jquery-ui-1.10.3.js"></script>
<script type="text/javascript"  src="/3rdParty/jquery/jqueryJScroll/jquery.jscroll.js"></script>
<script src="/tv/js/common.js"></script>
<script src="/tv/js/upcoming.js"></script>
</head>
<body>

<!-- Popup Option Menu -->
<!-- To avoid the need to define multiple overlapping menus, we use JS+CSS as
     an indirect if/else. It might seem convoluted but the alternatives are
     generating this bit of HTML client side with JS (bad), generating it server
     side (harder to maintain/template) or keeping in together inline with the
     other related html, with as little non-html markup as possible -->
<div id="optMenu" class="contextMenu" style="display:none;">
    <div class="button normalMenu" onClick="dontRecord(gChanID, gStartTime)">
        <%=qsTr("Don't Record")%>
    </div>
    <div class="button normalMenu" onClick="neverRecord(gChanID, gStartTime)">
        <%=qsTr("Never Record")%>
    </div>
    <div class="button normalMenu" onClick="deleteRecRule(gChanID, gStartTime)">
        <%=qsTr("Delete Recording Rule")%>
    </div>
    <div class="button normalMenu" onClick="loadScheduler('upcoming', gChanID, gStartTime)">
        <%=qsTr("Edit recording rule")%>
    </div>
</div>

<!-- Popup Program Details Box -->
<div id="programDetails" class="programExDetail" style="display:none;">
</div>

<!-- Navigation by day or time -->
<div class="navigateBox">

    <form action="/tv/upcoming.qsp">
    <label for="upcomingFilter"><%=qsTr("Show")%>:
    <select id="upcomingFilter" name="ViewFilter" onChange="submitForm(this.form)">
        <option value="important"><%=qsTr("Important")%></option>
        <option value="conflicting" <% if (filter === "conflicting") {%>selected<%}%>><%=qsTr("Conflicting or Failed Schedules")%></option>
        <option value="inactive" <% if (filter === "inactive") {%>selected<%}%>><%=qsTr("Inactive rule matches")%></option>
        <option value="all" <% if (filter === "all") {%>selected<%}%>><%=qsTr("All scheduler matches")%></option>
    </select>
    </label>
    </form>
</div>

<div id="upcomingList-container" style="overflow:hidden;clear:both;width:100%;">
<div id="upcomingList" class="upcomingList jscroll">

<%} // End of the header %>

<%
// The nothing to display message
if (!isValidObject(programs) || programs.length === 0)
{
    var message = "";

    if (filter == "conflicting")
        message = qsTr("There are no conflicting or errored recordings.")
    else
        message = qsTr("There are no upcoming recordings.")
%>
    <div class="topBar">
        <%=qsTr("Upcoming Records")%>
    </div>
    <div id="noProgramsRow" class="noProgramsRow">
        <%=message%>
    </div>
<%
}

var prevDate = "";

for (var listIdx = 0; listIdx < programs.length; listIdx++)
{
    program = programs[listIdx];
    channel = program.Channel;

    var menu = "normalMenu";

    // RecStatusToClass() - /tv/js/tvutil.qjs
    var statusClass = RecStatusToClass(program.Recording.Status);

    var recStatusDesc = dvr.RecStatusToDescription(program.Recording.Status,
                                                   program.Recording.RecType,
                                                   program.Recording.StartTs);
    var recTypeStr = dvr.RecTypeToString(program.Recording.RecType);

    // Used as a unique identifier and also to access the chanid
    // and starttime for the AJAX scheduling stuff
    var programIdentifier = channel.ChanId + "_" + program.StartTime.toISOString();

    var date = myth.GetFormatDate(program.StartTime);

    var channelIcon = "/tv/images/channel_icon.svg";
    if (channel.IconURL)
        channelIcon = channel.IconURL + "&amp;Height=57";

    if (date != prevDate)
    {
        prevDate = date;
%>
        <div class="topBar">
            <%=date%>
        </div>
<%
    }
%>
    <div class="programRow" id="<%=programIdentifier%>_row">
        <div class="channelBox">
            <img class="channelIcon" height="57" alt="<%=escapeHTML(channel.ChannelName)%> Icon" src="<%=channelIcon%>&amp;Height=57" lazyload />
            <div class="channelText"><%=escapeHTML(channel.CallSign)%></div>
        </div>
        <div class="programBox">
            <div class="programInnerBox <%=statusClass%>" id="<%=programIdentifier%>" data-recordid="<%=program.Recording.RecordId%>" data-chanid="<%=channel.ChanId%>" data-starttime="<%=program.StartTime.toISOString()%>" onMouseOver="startDetailTimer(this, 'program');" onMouseOut="hideDetail(this);" onClick="showMenu(this, '<%=menu%>');">
                <div class="programHeader">
                    <span class="programTitle"><% if (program.CatType == CategoryType.MOVIE) {%><img src="/tv/images/cat_movie.svg" width="18" height="13" alt="<%=qsTr("Movie")%>" title="<%=qsTr("Movie")%>" /><%}%>
                                               <%=escapeHTML(program.Title)%> <% if (isValidObject(program.Airdate) && program.Airdate.getFullYear() && program.CatType == "movie") {%>(<%=program.Airdate.getFullYear()%>)<%}%></span>
                    <span class="programStartTime"><%=myth.GetFormatDate(program.StartTime)%>, <%=myth.GetFormatTime(program.StartTime)%></span>
                </div>
                <div class="programBody">
                    <span class="programSubtitle">
                    <% if (program.SubTitle) {%>
                        <span class="label">Episode: </span><%=escapeHTML(program.SubTitle)%>
                        <% if (program.Season > 0 || program.Episode > 0) { %>
                            <span class="programSeasonEpisode">
                                <% if (program.Season > 0) { %>(<%=qsTr("S %1", "Season x").arg(program.Season)%>
                                <%} else {%>(<% } if (program.TotalEpisodes > 0) { %><%=qsTr("Ep %1/%2", "Episode x of y").arg(program.Episode).arg(program.TotalEpisodes)%>)
                                <%} else if (program.Episode > 0) {%><%=qsTr("Ep %1", "Episode x").arg(program.Episode)%>)<%}%>
                            </span>
                        <%}%>
                    <%} else {%>
                        &nbsp;
                    <%}%>
                    </span>
                    <span class="programRecType"><span class="label">Rule Type: </span><%=escapeHTML(recTypeStr)%></span>
                    <span class="programInput">
                    <% if (program.Recording.EncoderName) {%>
                        <span class="label">Input: </span><%=escapeHTML(program.Recording.EncoderName)%>
                    <%} else {%>
                        &nbsp;
                    <%}%>
                    </span>
                    <span class="programChannel"><span class="label">Channel: </span><%=escapeHTML(channel.ChanNum)%> <%=escapeHTML(channel.ChannelName)%></span>
                    <span class="programRecStatus"><span class="label">Status: </span><%=escapeHTML(recStatusDesc)%></span>
                </div>
                <div class="programSchedPopup" id="<%=programIdentifier%>_schedpopup">
                    <%=qsTr("Scheduling")%> ...
                </div>
                <input type="hidden" name="chanid" value="<%=channel.ChanId%>" />
                <input type="hidden" name="starttime" value="<%=program.StartTime.toISOString()%>" />
                <input type="hidden" name="recordid" value="<%=program.Recording.RecordId%>" />
            </div>
        </div>
    </div>
<%

}
%>

<% if (nextStartIndex) { %>
<a class="jscroll-next" href="/tv/upcoming.qsp?ViewFilter=<%=filter%>&amp;Start=<%=nextStartIndex%>&amp;ListOnly=1"></a>
<%}%>

<% if (!listOnly) {%>
</div> <!-- End upcomingList -->
</div> <!-- End upcomingList-container -->

<% if (programs.length > 0) {%>
<script type="text/javascript" nonce="<%=CSP_NONCE%>">
    loadJScroll();
</script>
<%}%>

</body>
</html>
<%}%>
