@model CWA.CpoOnline.Models.SymbolViewModel

@{
    ViewBag.Title = "Display";

    //var graphWidth = "col-md-6 col-lg-4 col-xl-3";  // Smaller
    var graphWidth = "col-lg-6 col-xl-4";  // Bigger
}
<style>
    @@media (min-width: 1200px) {
        .container {
            max-width: 100%;
        }
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">

@{
    var intervals = new List<string> { "30", "60", "240", "1440" };
    string @Class = "top-padding-1 can-be-hidden";
}
<div class="row" id="symbol-row">

    @if (ViewBag.layout == "horizontal" || ViewBag.layout == "square")
    {
        <style>
            @@media (min-width: 1200px) {
                #symbol-row {
                    width: calc(100vw - 10px);
                }
            }
            @@media (max-width: 1200px) {
                #symbol-row {
                    width: calc(100vw - 150px);
                }
            }
        </style>
    }
    <div class="col-auto mr-auto">
        <h2>@Model.Symbol</h2>
    </div>
    <div class="col-auto">
        <b>Intervals</b>

        <select id="multiple-checkboxes" multiple="multiple">
            @foreach (var interval in intervals)
            {
                <option value="@interval">@GetDisplayInterval(interval)</option>
            }
        </select>
    </div>
    <div class="col-auto">
        <b>Layouts</b>
        <button id="horizontal">Horizontal</button>
        <button id="vertical">Vertical</button>
        <button id="square">Square</button>
        <button id="reset">Reset</button>
    </div>
</div>
<hr />
@if (ViewBag.layout == "")
{
    <div class="row">
        @for (int i = 0; i < intervals.Count; i++)
        {
            var interval = intervals[i];

            <div class="@graphWidth @Class @interval" id="card-@i">
                @{
                    string link = Url.Content("~/Content/charts/" + Model.Symbol + "_" + interval + ".jpg");
                }
                <a class="card card-border mb-4" href="@link">
                    <img class="card-img-top reload-every-minute" src="@link" alt="@interval" style="height: 100%" />
                    <div class="card-body">@GetDisplayInterval(interval)</div>
                </a>
            </div>
        }
    </div>
}
else if (ViewBag.layout == "horizontal")
{
    <style>
        @@media (min-width: 1200px) {
            .container {
                max-width: none;
            }
        }

        .container, .row {
            overflow-x: visible;
            width: 3700px;
        }
    </style>
    <div class="row">
        @for (int i = 0; i < intervals.Count; i++)
        {
            var interval = intervals[i];

            <div class="@Class @interval" style="padding-left: 10px; float: left;" id="card-@i">
                @{
                    string link = Url.Content("~/Content/charts/" + Model.Symbol + "_" + interval + ".jpg");
                }
                <a class="card card-border mb-4" href="@link">
                    <img class="card-img-top reload-every-minute" src="@link" alt="@interval" style="height: 100%" />
                    <div class="card-body">@GetDisplayInterval(interval)</div>
                </a>
            </div>
        }
    </div>
}
else if (ViewBag.layout == "vertical")
{
    <div class="float-left">
        @for (int i = 0; i < intervals.Count; i++)
        {
            var interval = intervals[i];

            <div class="@Class @interval" style="padding-left: 10px;" id="card-@i">
                @{
                    string link = Url.Content("~/Content/charts/" + Model.Symbol + "_" + interval + ".jpg");
                }
                <a class="card card-border mb-4" href="@link">
                    <img class="card-img-top reload-every-minute" src="@link" alt="@interval" style="height: 100%" />
                    <div class="card-body">@GetDisplayInterval(interval)</div>
                </a>
            </div>
        }
    </div>
    <div style="clear: both;"></div>
}
else if (ViewBag.layout == "square")
{
     <style>
         .container, .row {
             overflow-x: visible;
             width: 3700px;
         }
     </style>
    <div class="row" style="float: left;">
        @for (int i = 0; i < intervals.Count - 2; i++)
        {
            var interval = intervals[i];

            <div class="@Class @interval" style="padding-left: 10px;" id="card-@i">
                @{
                    string link = Url.Content("~/Content/charts/" + Model.Symbol + "_" + interval + ".jpg");
                }
                <a class="card card-border mb-4" href="@link">
                    <img class="card-img-top reload-every-minute" src="@link" alt="@interval" style="height: 100%" />
                    <div class="card-body">@GetDisplayInterval(interval)</div>
                </a>
            </div>
        }
    </div>
    <div class="row" style="float: left;">
        @for (int i = 2; i < intervals.Count; i++)
        {
            var interval = intervals[i];

            <div class="@Class @interval" style="padding-left: 10px;" id="card-@i">
                @{
                    string link = Url.Content("~/Content/charts/" + Model.Symbol + "_" + interval + ".jpg");
                }
                <a class="card card-border mb-4" href="@link">
                    <img class="card-img-top reload-every-minute" src="@link" alt="@interval" style="height: 100%" />
                    <div class="card-body">@GetDisplayInterval(interval)</div>
                </a>
            </div>
        }
    </div>
}

<hr />
<p>
    @Html.ActionLink("Back to List", "Index", "Home", null, null)
</p>

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    <script>

        function SetTimeoutForReload() {
            setTimeout(ReloadAll, 60 * 1000);
        }

        function ReloadAll() {
            //console.log("running reload all");
            $.each(
                $('.reload-every-minute')
                , function (index, element) {
                    var old = $(element).attr("src");
                    var _new = old.split('?')[0] + '?' + (new Date().getTime());
                    $(element).attr("src", _new);
                })
            SetTimeoutForReload();
        }
        SetTimeoutForReload();

        $(function () {
            $('#multiple-checkboxes').multiselect();
            $('#multiple-checkboxes').change(function () {
                $('.can-be-hidden').hide();
                var array = $(this).val();
                var length = array.length;
                for (var i = 0; i < length; i++) {
                    $("." + array[i]).show();
                }
            });
            $('#multiple-checkboxes option').prop('selected', true);
            $('#multiple-checkboxes').multiselect('refresh');



            function RedirectToLayout(layout) {
                var queryParameter = "&layout=";
                var symbolQuery = window.location.search.split('&')[0];
                window.location.href = window.location.href.split('?')[0] + symbolQuery + queryParameter + layout;
            }

            $('#horizontal').click(function () {
                RedirectToLayout("horizontal");
            });

            $('#vertical').click(function () {
                RedirectToLayout("vertical");
            });

            $('#square').click(function () {
                RedirectToLayout("square");
            });

            $('#reset').click(function () {
                RedirectToLayout("");
            });
        })
    </script>
}


@functions {
    string GetDisplayInterval(string interval)
    {
        string DisplayInterval = "";
        if (interval == "1440")
        {
            DisplayInterval = "Daily";
        }
        else
        {
            DisplayInterval = interval + " Minutes";
        }
        return DisplayInterval;
    }
}