{% extends "base.htm" %}
{% from "form_macros.htm" import render_field, render_monitor_net_setup %}


{% block title %}
    Wohler iAM-Audio : Remote Monitor
{% endblock %}

{% block remote_monitor_active %}
     class="side-nav-active-wohler"
{% endblock %}

{% block config_menu_collapse %}
   class="collapse""
{% endblock %}

{% block network_collapse %}
   class="collapse"
{% endblock %}

{% block db_collapse %}
   class="collapse""
{% endblock %}


{% block header_content %}

               <div class="row">
                   <div class="col-lg-12">
                       <h1 class="page-header"> <span class="page-header-wohler"> Remote Monitor </span> </h1>
                       <ol class="breadcrumb">
                           <li class="active"  >
                               <i class="fa fa-dashboard"></i> Dashboard
                           </li>
                           <li class="active">
                               <i class="fa fa-bar-chart" aria-hidden="true"></i> Remote Monitor
                           </li>
                       </ol>
                   </div>
               </div>
{% endblock %}


{% block content %}

  <form class="form-horizontal" action="" method="post" id="presetForm"  >

                                             <input type="hidden" name="number_of_configs"  id="number_of_configs" value ="{{ configs }}"  />

                <!-- /.row -->
                 <div class="row">

<style>
    .loud-submit-btn {width:170px;   }
    .setup_menu_btn_group { width: 250px;}
    .btn_windows { width: 32%; }
    .btn_modes {  width: 48%; }
    .btn_alarms {  width: 24%; }
    .btn_channels {  width: 32%; }
    .btn_sources { width: 32%; }
</style>
                     <div class="col-lg-8" >
                        <div class="panel panel-default">
                            <div class="panel-heading panel-heading-wohler">
                                <h3 class="panel-title"><i class="fa fa-bar-chart fa-fw" ></i></h3>
                            </div>
                            <div class="panel-body">
                                 <div class="table-responsive" style="">
                                   <div style="height:650px;" >
                                            <div class="form-group col-md-12"  >
                                             <div> <h4><label id="preset_name">{{ preset_name }}</label></h4> </div>

                                            </div>
                                       <div>
                                            <div id="loudness_bar_graph1"> </div>
                                            <div id="liveStreamBarChart1" class="svg-container"
                                                style=" background-color: #080808; border-no: 2px solid #ccc; padding: 0px; position: relative; height: 550px; min-width: 310px;">
                                            </div>




                                       </div>



                                   </div>  <!-- height -->
                                  </div>  <!-- responsive -->


                            </div>
                        </div>
                    </div><!-- col-lg-3 -->
                 </div> <!-- /.row -->





<div class="modal fade" id="db-modal" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
   <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-header label-primary" style="color:#fff; font-size:1.4em;" >
            <a href="#" data-dismiss="modal" aria-hidden="true" class="close"><span class="fa fa-close"></span></a>
             <label  for="lbl_confirmation_header"  ></label> 
        </div>
        <div class="modal-body">
             <label class="text-warning" style="font-size:1em;" for="lbl_confirmation_text" ></label>
        </div>
        <div class="modal-footer" style=""  >
          
          <table>
          <tr>
          <td style="width:80%;">&nbsp; </td> 
          <td style="width:10%;">
          <a href="#" id="btnYes" class="btn confirm" >
           <button class='btn btn-success btn-md' ><span class="fa fa-check"></span> &nbsp; Yes</button>
          </a>
          </td>
          <td style="width:10%;">
          <a href="#" id="btnNo" data-dismiss="modal" aria-hidden="true" class="btn secondary" >
           <button class='btn btn-danger' data-dismiss="modal" ><span class="fa fa-close"></span> &nbsp; No</button>
          </a>
          </td>
          </tr>
          </table>

        </div>
      </div>
    </div>
</div>


                <div id="updating-modal" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
                   <div class="modal-dialog">
                       <div class="modal-content">
                          <div class="modal-header" style="text-align: center">
                              <h3>Please wait ... </h3>
                          </div>
                          <div class="modal-body" style="text-align: center;  "  >
                              <div style="height:100px; width:100%; ">
                                 <div style="vertical-align: middle; width:100%; ">
                                    <i class="fa fa-refresh fa-spin" style="font-size: 3.5em;" ></i>
                                 </div>
                               </div>
                           </div>
                           <div class="modal-footer" style="text-align: center"></div>
                       </div>
                   </div>
                </div>

               <div style="height:230px;">&nbsp;</div>


    <style>
        .audbars.above {fill: #f00;}
        .audbars.middle {fill: #FFD700;}
        .x axis { color: #ffffff; }

        .grid line {stroke: lightgrey;stroke-opacity: 0.7;shape-rendering: crispEdges;}
        .grid path {stroke-width: 0;}

       .svg-container {
            display: inline-block;
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: top;
            overflow: hidden;
        }
        .svg-content {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>

    <script type="text/javascript" >

        var hasMinimize = true;

        // Get Browser-Specifc Prefix
        function getBrowserPrefix() {

          // Check for the unprefixed property.
          if ('hidden' in document) {
            return null;
          }

          // All the possible prefixes.
          var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];

          for (var i = 0; i < browserPrefixes.length; i++) {
            var prefix = browserPrefixes[i] + 'Hidden';
            if (prefix in document) {
              return browserPrefixes[i];
            }
          }

          // The API is not supported in browser.
          return null;
        }

        // Get Browser Specific Hidden Property
        function hiddenProperty(prefix) {
          if (prefix) {
            return prefix + 'Hidden';
          } else {
            return 'hidden';
          }
        }

        // Get Browser Specific Visibility State
        function visibilityState(prefix) {
          if (prefix) {
            return prefix + 'VisibilityState';
          } else {
            return 'visibilityState';
          }
        }

        // Get Browser Specific Event
        function visibilityEvent(prefix) {
          if (prefix) {
            return prefix + 'visibilitychange';
          } else {
            return 'visibilitychange';
          }
        }


        // Get Browser Prefix
        var prefix = getBrowserPrefix();
        var hidden = hiddenProperty(prefix);
        var visibilityState = visibilityState(prefix);
        var visibilityEvent = visibilityEvent(prefix);

        document.addEventListener(visibilityEvent, function(event) {
            if (!document[hidden]) {
                // The page is visible.
                hasMinimize = true;
            } else {
                // The page is hidden.
                hasMinimize = false;
            }
        });



    </script>
    <script type="text/javascript" >

        var divH = $("#liveStreamBarChart1").height();
        var divW = $("#liveStreamBarChart1").width();

        if(divH < 400) {
            //divH = 400;
            //$("#viewDiv1").height(400)
        }

        if(divW < 100) {
              divW = 100;
        } else if(divW > 800) {
           //divW = 800;
        }

    	var margin = {left:30,right:30,top:40,bottom:150};
    	var wxbar = {txtwidth:15, maxtxtwidth:15};
    	var audH = divH;
    	var audW = divW;
    	var maxNoOfElems = 16;
        var maxClipPath = 3;
        var totalNoBars = maxNoOfElems*maxClipPath;
    	var audViewH = audH - (margin.top + margin.bottom);
    	var audViewW = audW - (margin.right + margin.left);
    	var duration = 40;

        var svgRects = d3.select("#liveStreamBarChart1")
            .attr("preserveAspectRatio", "xMidYMid meet")
            .attr("viewBox", "0 0 " + divW, + " " + divH)
            .append("div")
            .classed("svg-content", true)
            .attr("id", "chartDiv")
            .append("svg").attr("height",audH).attr("width",audW);

    	var svgRectsGrp = svgRects.append("g").attr("transform","translate("+margin.left+","+margin.top+")");

        var svgRectsGrpClip = svgRects.append("g").attr("transform","translate("+margin.left+","+margin.top+")");

        var yScale = d3.scale.linear().domain([0, -70]).rangeRound([0, audViewH]);


    	var yAxisG = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .tickSize(-audViewW, 50, 0)
                    .tickFormat("")
                    .ticks(8);

    	var yAxisL = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .innerTickSize(0)
                    .outerTickSize(0)
                    .ticks(8);

        var yAxisR = d3.svg.axis()
                    .scale(yScale)
                    .orient("right")
                    .innerTickSize(0)
                    .outerTickSize(0)
                    .ticks(8);


        var xScale = d3.scale.ordinal()
                    .rangeRoundBands([0, audViewW], .1);

        var xDomain = [];

        for(var i = 1; i <= maxNoOfElems; i++) {
      	    var tmp = "Input-" + i;
      	    xDomain.push(tmp);
  	    }

        xScale.domain(xDomain);
  	    var calc_new_dim = function() {

            if( typeof (xDomain)  === 'undefined') {
                maxNoOfElems = 16;
            } else {
                maxNoOfElems = xDomain.length;
                if(maxNoOfElems < 1) {
                    maxNoOfElems = 1;
                }
            }

            wxbar.txtwidth = Math.floor((xScale.rangeBand()*3)/4);
            if(wxbar.txtwidth > wxbar.maxtxtwidth ) {
                wxbar.txtwidth = wxbar.maxtxtwidth;
            }
  	    }
  	    var windowPos = 0;
        calc_new_dim();
  	    var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .innerTickSize(4)
                    .outerTickSize(0)
                    .ticks(maxNoOfElems);

    	var tr = function() {return -1*Math.floor((Math.random() * 60 + 10));}
  	    var flag_f = true;
    	var datamax = [];

      	for(var i = 0; i < maxNoOfElems; i++) {
      	    datamax.push(-70);
        }


        // gridlines in y axis function
        function make_y_gridlines() {
            return d3.svg.axis().scale(yScale).ticks(8);
        }

        svgRects.append("g")
            .attr("class", "grid")
            .call(make_y_gridlines()
                    .tickSize(-divW)
                    .tickFormat(""));

    </script>

</form>


{% endblock %}