<!DOCTYPE html>
<html lang="en">
<head>
    @{

        if (Session["currentDate"] == null)
        {
            HttpContext.Current.Session["currentDate"] = DateTime.Today.ToString("yyyy-MM-dd");
        }

        if (Session["currentShift"] == null)
        {
            HttpContext.Current.Session["currentShift"] = 1;
        }

        if (Session["ReportType"] == null)
        {
            HttpContext.Current.Session["ReportType"] = "Daily";
        }
            
    }

    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="~/Resources/Triangle.ico" rel="shortcut icon" type="image/x-icon" />

    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.silver.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.silver.min.css")" rel="stylesheet" type="text/css" />

    @*<script src="@Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"></script>*@
    <script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"></script>
    @*<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    <script type="text/javascript">


        //prevents ipad vertical bounce scrolling
        document.ontouchmove = function (event) {
            event.preventDefault();
        }

        function UpdateDate() {
            UpdateSessionDate();
            UpdateSessionShift();
            UpdateSessionReportType();

            //$('#datepick').val('AT(Session["currentDate"])');

            var DatePageType = '@(ViewBag.DatePageType)';

                if (DatePageType == "Reporting") {

                    UpdateCharts();
                }
                if (DatePageType == "LiveView") {
                    UpdateViews($('#hoursaver').val());
                    UpdateLineViews($('#hoursaver').val());
                    UpdateOverallInfoBox($('#linesaver').val());
                    UpdateOverviewOfLabourChart()
                }
                if (DatePageType == "LabourEntry") {
                    // UpdateViews($('#hoursaver').val());
                    refreshLabourEntry();
                }

            }

            function UpdateShift() {
                UpdateSessionDate();
                UpdateSessionShift();

                //$('#datepick').val('AT(Session["currentDate"])');

                var DatePageType = '@(ViewBag.DatePageType)';

                if (DatePageType == "Reporting") {
                    UpdateCharts();
                }
                if (DatePageType == "LiveView") {
                    UpdateViews($('#hoursaver').val());
                    UpdateLineViews($('#hoursaver').val());
                    UpdateOverallInfoBox($('#linesaver').val());
                }
                if (DatePageType == "LabourEntry") {
                    refreshLabourEntry();

                }
            }

            function pullfrompeviousLoad(objThis) {
                var url = $(objThis).data('url') + '?hour=' + $(objThis).data('hour') + '&Shift=' + $(objThis).data('shift') + '&LineName=' + $(objThis).data('line');
                window.location.href = url;
            }

            function menuLoad(objThis) {
                var url = $(objThis).data('url');
                window.location.href = url;
            }

            function buttonLoad(objThis) {
                var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
                window.location.href = url;
            }

            function saveLoad(objThis) {

                $('#labourform').submit();
                var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
                window.location.href = url;
                return false;
            }

            // update date session data
            function UpdateSessionDate() {

                $.post('/SetSession/SetVariable',
                       {
                           key: "currentDate",
                           value: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
                       });

            };

            // update shift session data
            function UpdateSessionShift() {

                $.post('/SetSession/SetVariable',
                       {
                           key: "currentShift",
                           value: $('#shift').val()
                       });

            };


            // update report type session data
            function UpdateSessionReportType() {

                $.post('/SetSession/SetVariable',
                       {
                           key: "ReportType",
                           value: $('#ReportType').val()
                       });

            };

            function UpdateButtons(h) {
                var arrayToModify = [];
                var i = 0, j, k, buttonsToCreate, buttonContainer, newButton;
                var buttonsToCreate = [];
                var now = parseInt(h);

                for (var j = (now - 7) ; j <= (now + 7) ; j++) {

                    if (j >= 0 && j <= 23) {
                        buttonsToCreate[i] = j;
                        i++;
                    }
                }

                buttonContainer = document.getElementById('ddShift');

                for (k = 0; k < buttonsToCreate.length; k++) {

                    if (buttonsToCreate[k] == parseInt(h) + 1) {
                        newButton.style.cssText = 'background-color: red;';
                    }

                    newButton = document.createElement('input');
                    newButton.type = 'button';
                    newButton.value = buttonsToCreate[k];
                    newButton.id = buttonsToCreate[k];
                    newButton.onclick = function () {
                        arrayToModify[arrayToModify.length] = this.id;
                        $('#hoursaver').val(this.id);
                        UpdateViews(this.id);
                        UpdateLineViews(this.id);
                    };

                    buttonContainer.appendChild(newButton);
                }
            };

            kendo.culture("en-US");

    </script>

</head>

<body>

    <div data-role="page" data-theme="b" id="index">

        <div data-role="header" data-position="fixed">
            <h1>@ViewBag.Title</h1>
            <a href="#nav-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left">Menu</a>

            @if (Request.IsAuthenticated)
            {
                @Html.ActionLink("My Account", "Index", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" })
            }
            else
            {
                @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" })
            }


            <div class="datepickerbtn" style="width: 212.5px;">

                @(Html.Kendo().DatePicker()
                      .Name("datepicker")
                      .Events(e =>
                          {
                              e.Change("UpdateDate");
                          })
                  .Format("yyyy-MM-dd")
                  .Value((String)Session["currentDate"])
                )
            </div>

            <div class="shiftpickerbtn" id="btnshift">
                <select id="shift" name="shift" onchange="UpdateShift()">
                    <option value="1">Shift 1</option>
                    <option value="2">Shift 2</option>
                </select>
            </div>


        </div>
        <div data-role="content">

            @RenderBody()
        </div>
        <div data-role="footer" style="text-align: center" data-position="fixed">
            @RenderSection("footer", false)
        </div>
        <div data-role="panel" data-position-fixed="true" data-theme="b" data-content-theme="d" id="nav-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a data-url="@Url.Action("Index", "Home")" onclick="menuLoad(this)">Home</a></li>
                <li><a data-url="@Url.Action("Index", "LabourEntry")" onclick="menuLoad(this)">Labour Entry</a></li>
                <li><a data-url="@Url.Action("Index", "LiveView")" onclick="menuLoad(this)">Live View</a></li>
                <li><a data-url="@Url.Action("Index", "Report")" onclick="menuLoad(this)">Reporting</a></li>
                <li><a data-url="@Url.Action("Loin", "ScheduleBuilder")" onclick="menuLoad(this)">Schedule Builder</a></li>
                <li><a data-url="@Url.Action("About", "Home")" onclick="menuLoad(this)">About</a></li>
                <li><a data-url="@Url.Action("Contact", "Home")" onclick="menuLoad(this)">Contact</a></li>
            </ul>

        </div>

    </div>

    @RenderSection("scripts", required: false)
</body>
</html>
