@{
    ViewData["Title"] = "RiserDiagram";
}

<div class="panel">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
        <div class="example">
        </div>
    </div>
</div>

@section Scripts{
    <script>
        $(function () {
            $('li.site-menu-item').mouseenter(function (e) {

                e.stopImmediatePropagation();
                $(this).addClass('active open');
                $(this).css('z-index', '10000');
            });

            $('li.site-menu-item').mouseleave(function (e) {
                $(this).removeClass('active open');
            });

            $.ajax({
                url: 'https://localhost:44345/domeechart/meter_source_1_1.json',
                type: 'GET',
                dataType: 'json',
                success: function (code, statut) {
                    console.log(code.reverse());

                    $example = $('.example');
                    var html = "";
                    code.forEach(element => {
                        html += `<div class="row mb-5">`;
                        // html += `<div class="col-1 d-flex align-items-end justify-content-center floor-header-wrap">
                        //         <h3>${element.floor}F</h3>
                        //         </div>`

                        html += `<div class="col-1 d-flex align-items-end justify-content-center floor-header-wrap">`
                        switch (element.floor) {
                            case 1:
                                html += `<a target="_parent" href="/dome/demo_system/a-5_demo4.html">
                                                <h3 style="color:#000">${element.floor}F</h3>
                                                </a>`;
                                break;
                            case 2:
                                html += `<a target="_parent" href="/dome/demo_system/a-5_demo3.html">
                                                <h3 style="color:#000">${element.floor}F</h3>
                                                </a>`;
                                break;
                            case 3:
                                html += `<a target="_parent" href="/dome/demo_system/a-5_demo2.html">
                                                <h3 style="color:#000">${element.floor}F</h3>
                                                </a>`;
                                break;
                            case 4:
                                html += `<a target="_parent" href="/dome/demo_system/a-5_demo5.html">
                                                <h3 style="color:#000">${element.floor}F</h3>
                                                </a>`;
                                break;
                            case 5:
                                html += `<a target="_parent" href="/dome/demo_system/a-5_demo6.html">
                                                <h3 style="color:#000">${element.floor}F</h3>
                                                </a>`;
                                break;
                            default:
                                html += `<h3 style="color:#000">${element.floor}F</h3>`;
                                break;
                        }
                        html += `</div>`

                        html += `<div class="col-11 row floor-body-wrap">`
                        element.meter.forEach(meter => {
                            var color = ['green', 'red', 'gray'];
                            html += `<div class="col-1 text-center meter-wrap" >
                                                <div class="meter-header-wrap" style="position: relative;">
                                                    <div class="ball" style="
                                                        width: 20px;
                                                        height: 20px;
                                                        background: `+ color[Math.floor(Math.random() * 3)]+`;
                                                        border-radius: 50%;
                                                        position: absolute;
                                                        bottom: 0;
                                                        right: 0;
                                                    "></div>
                                                    <img src="${meter.image}" style="width: 100%;">
                                                </div>
                                                <div class="meter-body-wrap center">
                                                    <b>${meter.name}</b>
                                                </div>
                                            </div>`
                        })
                        html += `</div>`;
                        html += `<div class="col-12 floor-footer-wrap">
                                            <img src="domeechart/floor.jpg" width="100%" height="50%">
                                        </div>`
                        html += `</div>`;
                    });
                    $example.append(html);
                }
            });
        });
    </script>
    <script>
        (function (document, window, $) {
            'use strict';

            var Site = window.Site;
            $(document).ready(function () {
                Site;
            });
        })(document, window, jQuery);
    </script>
    <script>
        function includeHTML() {
            var z, i, elmnt, file, xhttp;
            /*loop through a collection of all HTML elements:*/
            z = document.getElementsByTagName("*");
            for (i = 0; i < z.length; i++) {
                elmnt = z[i];
                /*search for elements with a certain atrribute:*/
                file = elmnt.getAttribute("w3-include-html");
                if (file) {
                    /*make an HTTP request using the attribute value as the file name:*/
                    xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) { elmnt.innerHTML = this.responseText; }
                            if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
                            /*remove the attribute, and call this function once more:*/
                            elmnt.removeAttribute("w3-include-html");
                            includeHTML();
                        }
                    }
                    xhttp.open("GET", file, true);
                    xhttp.send();
                    /*exit the function:*/
                    return;
                }
            }
        };
    </script>
    <script>
        includeHTML();
    </script>

}