<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Scada Oneview 4.0 alpha 2.0</title>
    <link rel="stylesheet" href="/app/core/css/bootstrap.min.css">
    <link rel="stylesheet" href="/app/core/css/styles.css">
    <link rel="stylesheet" href="/app/nav/components/nav.css">
    <link rel="stylesheet" href="/app/breadcrumb/components/breadcrumbs.css">
    <link rel="stylesheet" href="/app/settings/components/settings.css">
    <link rel="stylesheet" href="/app/map-monitor/pages/mapmonitor.css">
    <link rel="stylesheet" href="/app/portfolio/components/portfolio.css">
    <link rel="stylesheet" href="/app/monitor/components/table.css">
    <link rel="stylesheet" href="/app/reports/pages/reports.css">
    <link rel="stylesheet" href="/app/alarms/components/alarms.css">
    <link rel="stylesheet" href="/app/tickets/components/tickets.css">
    <link rel="stylesheet" href="/app/onlinedata/components/onlinedata.css">
    <link rel="stylesheet" href="/app/users/components/users.css">
    <link rel="stylesheet" href="/app/budget/components/budget.css">
    <link rel="stylesheet" href="/app/unitdetails/components/unitdetails.css">
    <link rel="stylesheet" href="/app/unitdetails/components/livetagtooltip.css">
    <link rel="stylesheet" href="/app/serverinfo/components/serverinfo.css">
    <link rel="stylesheet" href="/app/singleline/components/singleline.css">
    <link rel="stylesheet" href="/app/core/css/scadaicons.css">

    <!-- custom styles made by Scada -->
    <link rel="stylesheet" href="/app/core/css/calendar.css">
    <link rel="stylesheet" href="/app/core/css/chart.css">
    <link rel="stylesheet" href="/app/core/css/event-colors.css">
    <!--<link rel="stylesheet" href="/app/core/css/overrides.css">-->

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="/app/core/js/bootstrap.bundle.min.js"></script>
    <script src="/app/core/js/screenfull-min.js"></script>
    <script src="/app/core/js/hullabaloo.js"></script>

    <!--<script src="/app/core/js/oneview_V1_6-min.js"></script>-->


</head>
<body class="theme-dark">
    <div class="bg">
        <i class="icon icon-turbine"></i>
    </div>
    <div class="wrapper">
<!-- @import "/app/nav/components/nav.html" -->
<div class="container-fluid">
    </section>
    <!-- @import "/app/settings/components/settings.html" -->
    <div class="row">
        <!-- @import "/app/alarms/components/breadcrumb.html" -->
        <!-- @import "/app/portfolio/components/portfolio.html" -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="scadacard level1" id="monitorwrapper" style="height:auto;" > <!--style="height:calc(100vh - 250px);"-->
                <!-- @import "/app/alarms/components/unitalarms_scroll2.kit" -->
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {

    var drillshown = false;

        /* Loader icon */
        $(".loader").delay("1000").fadeOut("500", function () {
        $(".status h1").fadeIn("500", function () {
            $(".status h2").fadeIn("400");
            $(".status h6").fadeIn("400");

        });
        $(".hiddenwhileloading").fadeIn("800");
    });

        /* Show drill container */
        $(".detailbtn").click(function () {
        drillshown = true;

        $(".detailbtn").removeClass("active");
        $(".detailbtn").addClass("inactive");
        $(".drill-drop").addClass("inactive");

        $(".datarow").removeClass("active");

        $(this).removeClass("inactive").addClass("active");
        $(this).closest(".datarow").addClass("active");

        $("#filterbuttons").fadeOut();
    });

    $(".detailbtn").click(function () {
        var visualheight = $(".drillcontainer").height();
        var xoffset = $("#titletd").width() + $("#actiontd").width() + 90;
        var drillwidth = $("#monitorwrapper").width() - xoffset;
        $("#monitorwrapper").height(visualheight); 

        $("#tablewrapper").stop().animate({
        }, 1000, function () {

          
            enterdrill();

            $(".closeDetail").fadeIn(500, function () {
            });

            $("#tablewrapper").stop().animate({
                width: 340
            }, 1000);

            //$('#filterbuttons').slideUp("fast");
            /*$('#tablewrapper').height(visualheight - 20);
            $("#tablewrapper").css(
                "overflow-y", "scroll"
            );*/
        });

        
        function enterdrill() {
            $(".drillcontainer").stop().animate({
                left: xoffset + 25,
                width: drillwidth
            }, 1000, function () {
                $("#monitorwrapper").stop().animate({
                }, 300);
            });
        }
       
    });

});
$(window).scroll(function() {

   console.log($(window).scrollTop());
   var xoffset = $("#titletd").width() + $("#actiontd").width() + 147;
        var drillwidth = $("#monitorwrapper").width() - xoffset;
   if($(window).scrollTop() > 200) {

     //  $("#thehider").css({"position" : "fixed", "top" : "75px"});
       $("#tablewrapper").css({"position" : "fixed", "top" : "70px", "height" : "calc(100vh - 100px)", "overflow-y" : "scroll"});
       $("#tooltop").css({"position" : "fixed", "top" : "65px", "z-index" : "9999", "padding-top" : "15px", "width" : drillwidth});
       $("#alarmlist thead").css({"position" : "fixed", "top" : "190px", "z-index" : "9999", "border-top" : "1px solid #666", "width" : drillwidth});
       $("#alarmlist tbody").css({"transform" : "translateY(165px)"});
       $("#thehider tbody").css({"transform" : "translateY(62px)"});

       $("#thehider thead").css({"position" : "fixed", "top" : "70px", "z-index" : "9999", "background-color" : "#3d3d3d"});
       
       $('#thehider th:not([id])').hide();

       $(".datarow td:nth-last-child(9)").css("width","195px");
       $(".datarow td:nth-last-child(8)").css("width","153px");
       $("#actiontd").css("width","150px");
       $("#thehider tbody td:nth-last-child(1)").hide(); 
       $("#thehider tbody td:nth-last-child(2)").hide(); 
       $("#thehider tbody td:nth-last-child(3)").hide(); 
       $("#thehider tbody td:nth-last-child(4)").hide(); 
       $("#thehider tbody td:nth-last-child(5)").hide(); 
       $("#thehider tbody td:nth-last-child(6)").hide(); 
       $("#thehider tbody td:nth-last-child(7)").hide(); 



   } else {
       $("#tablewrapper").css({"position" : "relative", "top" : "0"});
       $("#tooltop").css({"position" : "relative", "top" : "0", "padding-top" : "0px"});
       $("#alarmlist thead").css({"position" : "relative", "top" : "0", "border-top" : "none"});
       $("#alarmlist tbody").css({"transform" : "translateY(0px)"});
       $("#actiontd").css("width","auto");
       $("#thehider tbody").css({"transform" : "translateY(0px)"});

       $("#thehider thead").css({"position" : "relative", "top" : "0px", "z-index" : "0", "background-color" : "#3d3d3d"});
       $('#thehider th:not([id])').show();

       $(".datarow td:nth-last-child(9)").css("width","auto");
       $(".datarow td:nth-last-child(8)").css("width","auto");
       $("#actiontd").css("width","auto");
       $("#thehider tbody td:nth-last-child(1)").show(); 
       $("#thehider tbody td:nth-last-child(2)").show(); 
       $("#thehider tbody td:nth-last-child(3)").show(); 
       $("#thehider tbody td:nth-last-child(4)").show(); 
       $("#thehider tbody td:nth-last-child(5)").show(); 
       $("#thehider tbody td:nth-last-child(6)").show(); 
       $("#thehider tbody td:nth-last-child(7)").show(); 

   }

    /*
    $(".detailbtn").click(function() {
        var wrapperheight = $(".drillcontainer").height()+35;
        var xoffset = $("#titletd").width() + $("#actiontd").width() + 90;
        var drillwidth = $("#monitorwrapper").width() - xoffset;
            console.log('Resized' + drillwidth + '| Offset:' + xoffset + '| monitorwrapper width:' + $("#monitorwrapper").width());

        $(".drillcontainer").stop().animate({
            left: xoffset + 25,
            width: drillwidth
        });

        $("#monitorwrapper").stop().animate({height: wrapperheight},100);
        });
*/




});
</script>
<!-- @import "/kitparts/end.html" -->

