{% extends 'base.html.twig' %}

{% block body_id 'set-c4rg0-1' %}



{% block header %}
{% endblock %}

{% block  menuleft %}
{% endblock %}

{% block body %}

<div id="id-step-1" style="display: none;">
<div align="center"> <span><img src="{{ asset('static/images/Consitech.png') }}" width="321" height="68" alt=""/></span><br><br></div>    <!-- Wrap all page content here -->


      <div class="row">
              <div class="col-md-12">
          <!-- page header -->
          <div class="pageheader">
            

            <h2><i class="fa fa-puzzle-piece" style="line-height: 48px;padding-left: 5px;"></i> Start ! <span>// Set-Up (1)</span></h2>
            

            <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>You are here</li>
                <li><a href="index.html">C4RGO-Air</a></li>
                <li><a href="ui-elements.html">Start SetUp</a></li>

              </ol>
            </div>


          </div>
          <!-- /page header -->

              <!-- col 12 -->
              <div class="col-md-12">


                <!-- tile -->
                <section class="tile transparent">



                  <div class="jumbotron bg-transparent-black-3">
                    <div class="container text-center">
          <!-- page header -->
            <h1><font face="Arial, sans-serif" color="#ffffff"> W W W. C<span style="color:#66ccff">4</span>RGO.COM</font></h1>
           

          <!-- /page header -->
                      <p>{{ 'Enabled Operator'|trans }}: {{ app.user.username }}</p>
                      <p><a href="{{ path('monitor_page') }}" class="btn btn-blue btn-large">{{ 'Monitor'|trans }}</a></p>
                    </div>
                  </div>
                </section>
                
                <br><br>
                <!-- /tile -->
                <section class="tile transparent">

                  <div class="jumbotron bg-transparent-black-3">
                  
            <div class="row">

              <!-- col 6 -->
              <div class="col-md-6">
                <!-- tile -->
                <section class="tile color transparent-black text-center" onclick="javascript:gotoPage(1);">

                  <!-- tile header -->
                  <div class="tile-header">
                  <h1><i style="line-height: 46px;padding-left: 0;"></i><font face="Arial, sans-serif" color="#ffffff"> SET-UP  &nbsp; &nbsp; &nbsp; </font></h1>

                    
                  <img src="{{ asset('static/c4rg0_themes/assets/images/icons/setup.png') }}" width="266" height="303" alt=""/></div>
                  <!-- /tile header -->

                </section>

              </div>

              <div class="col-md-6">

                <section class="tile color transparent-black text-center" onclick="javascript:gotoPage(2);">

                  <!-- tile header -->
                  <div class="tile-header">
                  <img src="{{ asset('static/c4rg0_themes/assets/images/icons/Start-Up.png') }}" width="266" height="303" alt=""/> 
            <h1><i class= style="line-height: 46px;padding-left: 0;"></i><font face="Arial, sans-serif" color="#ffffff"> &nbsp; &nbsp; &nbsp; START &nbsp;  C<span style="color:#66ccff">4</span>RGO </font></h1>
                    
                  </div>
                  <!-- /tile header -->
                </section>
              </div>
            </div>
            <div align="center">
                </div>
            </div >   
            </section>
              </div>
         </div>
      </div>
    <!-- Wrap all page content end -->
</div>














<div id="id-step-2" style="display: none;">

              <div class="col-md-12" >  
          <!-- page header -->
          <div class="pageheader"> 
         
            <h2><i class="fa fa-puzzle-piece" style="line-height: 48px;padding-left: 5px;"></i> Start ! <span>// Set-Up [ 2 </span></h2>
           
            <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>You are here</li>
                <li><a href="index.html">C4RGO-Air</a></li>
                <li><a href="ui-elements.html">Start SetUp 2</a></li>

              </ol>
            </div>
          </div>
          <!-- /page header -->
              <!-- col 12 -->
              <div class="col-md-12">
                <!-- tile -->


  

  
  
                
                
                
            <section class="tile transparent">

                  <div class="bg-transparent-black-3">
                  <br>
 <div class="row">
              <!-- col 6 -->
              <div class="col-md-4">
                <!-- tile -->
                <section class="tile color transparent-black text-center">

                  <!-- tile header -->
                  <div class="tile-header">
                  <span><img src="{{ asset('static/c4rg0_themes/assets/images/icons/standard.png') }}" width="72" height="84" alt=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                  <font face="Arial, sans-serif" color="#ffffff" size="+3"> STANDARD &nbsp; &nbsp; </font>
               <input type="radio" name="acquire-type" id="id-acquire-type-standard" value="standardvol" checked />
               <label for="id-acquire-type-standard">Select</label>
                </span></div>
                             
          <!-- /tile header -->

                </section>

              </div>
              <div class="col-md-4">
                <!-- tile -->
                <section class="tile color transparent-black text-center">

                  <!-- tile header -->
                  <div class="tile-header">
                  <span><img src="{{ asset('static/c4rg0_themes/assets/images/icons/VOLUMI_G.png') }}" width="72" height="84" alt=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                  <font face="Arial, sans-serif" color="#ffffff" size="+3"> GRANDI VOLUMI  &nbsp; &nbsp; </font>
             <input type="radio" name="acquire-type" id="id-acquire-type-bigvol" value="bigvol" />
             <label for="id-acquire-type-bigvol">Select</label>
             </span></div>
                  <!-- /tile header -->

                </section>

              </div>
              <div class="col-md-4">

                <section class="tile color transparent-black text-center">

                  <!-- tile header -->
                  <div class="tile-header">
                  <span><img src="{{ asset('static/c4rg0_themes/assets/images/icons/singolo.png') }}" width="72" height="84" alt=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                  <font face="Arial, sans-serif" color="#ffffff" size="+3"> SINGOLO &nbsp; &nbsp; </font>
               <input type="radio" name="acquire-type" id="id-acquire-type-singolo" value="smallvol" />
             <label for="id-acquire-type-singolo">Select</label>
                   </span></div>
                  <!-- /tile header -->

                </section>
              </div>
            </div>
            <div >
                </div>
            </div >   
            </section>
                
                <br><br>
                <!-- /tile -->
            <section class="tile transparent">

                  <div class="bg-transparent-black-3">
                  <br>
                  
            <div class="row">

              <!-- col 6 -->
              <div class="col-md-6">
                <!-- tile -->
                <section class="tile color transparent-black ">
                  <!-- tile header -->
                  <div class="tile-header text-center">
                   <span class="docck">
                      <input type="checkbox" id="id-depallet" />
                      <label for="id-depallet" class="check-box depallet"></label>
                    </span><span><font face="Arial, sans-serif" color="#ffffff" size="+3"> DEPALLET &nbsp; &nbsp;</font>
<!--                   <input type="check" name="size" id="size_4" value="small" />
                    <label for="size_4">Select</label>
-->                <!--    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="{{ asset('static/c4rg0_themes/assets/images/icons/depallet.png') }}" width="72" height="84" alt=""/> -->
</span>
</div>
                  <!-- /tile header -->

                </section>

              </div>
              <div class="col-md-6">
                <!-- tile -->
                <section class="tile color transparent-black text-center">

                  <!-- tile header -->
                  <div class="tile-header">
                    <span class="docck">
                      <input type="checkbox" id="id-realvol" />
                      <label for="id-realvol" class="check-box realvol"></label>
                    </span>                  <span><font face="Arial, sans-serif" color="#ffffff" size="+3"> VOLUME REALE &nbsp; &nbsp;</font></span>

<!--                   <input type="check" name="size" id="size_5" value="small" />
                   <label for="size_5">Select</label>
 --> 
 <!--                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="{{ asset('static/c4rg0_themes/assets/images/icons/REALE_ico_azzurro_p.png') }}" width="84" height="84" alt=""/> -->
 </div>
                  <!-- /tile header -->

                </section>
              </div>
              
              
            </div>
            
            <div align="center">
            
                </div>
            </div >   
            </section>
            <p>&nbsp;</p>
<td></td>
            <p>&nbsp;</p>
            <p><br>
              <br>
            </p>
                            <!-- /tile -->
            <section class="tile transparent">

                  <div class="bg-transparent-black-3">
                  <br>
            <div class="row ">

              <!-- col 6 -->
              <div class="col-md-4 col-md-offset-4">
                <!-- tile -->
                <section class="tile color transparent-black text-center" onclick="javascript:gotoPage(4);">

                  <!-- tile header -->
                  <div class="tile-header">
                  <img src="{{ asset('static/c4rg0_themes/assets/images/icons/ico_cube_poc.png') }}" width="160" height="160" alt=""/></div>
                  
                  <!-- /tile header -->

                </section>

              </div>
              
              
            </div>
            
            <div align="center">
            
                </div>
            </div >   
            </section>
              </div>
              
              
         </div>
</div>




<div id="id-step-4" style="display: none;">




        
        <!-- Page content -->
        <div id="content" class="col-md-12">
          
          <!-- page header -->
          <div class="pageheader">
            
            <h1><i class="fa fa-tachometer color-white" style="line-height: 46px;padding-left: 0;"></i><font face="Arial, sans-serif" color="#ffffff"> C<span style="color:#66ccff">4</span>RGO-Air</font></h1>
<!--            <span class="color-white">// Real Time Detection 3D System </span></h1>
-->            <!--h2><i class="fa fa-tachometer"></i> Dashboard
            <span>// Real Time Detection 3D System</span></h2-->
            

            <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>You are here</li>
                <li><a href="index.html">C4RGO-Air</a></li>
                <li class="active">Dashboard</li>
              </ol>
            </div>


          </div>
          <!-- /page header -->
          
          




          <!-- content main container -->
          <div class="main">

            <!-- cards -->
           <div class="row cards">
                          <!-- START/cards  AWB -->              
              <div class="card-container col-lg-6 col-sm-6 col-sm-12">
                <div class="card card-trasparent transparent-black rounded-top-corners">
                  <div class="front"> 

                    <div class="media-body">        
                      <span class="pull-left">
                        
                        <i class="material-icons fa-5x" >fingerprint</i>
                      </span>

                      <div class="media-body">
<!--                        <small>AWB</small>
                       <h2 class="media-heading animate-number" style="font-size:4.0vw"  data-value="3-659-6tf-9iiu- 00" data-animation-duration="1500">0</h2>
-->                       <h0 id="id-big-awb" class="media-heading" data-value="9634BFR54XCD44"></h0>
                       </div>
                    </div> 

                    </div>
             </div>
              </div>
                          <!-- END /cards  AWB -->
 
                          <!-- START/cards  COMPANY -->
              <div class="card-container col-lg-3 col-sm-6 col-sm-12">
              <!--div class="color transparent-black rounded-corners"-->
                <div class=" card card-trasparent ">
                  <div class="front">        
                    
                    <div class="color transparent-black rounded-top-corners">                  
                        <span class="pull-left">
                            <i class="fas fa-boxes fa-4x"></i>
                        <!--<img src="assets/images/Flag_Logo_nation/air_france_logo_cms.jpg" width="120" height="54" alt=""/>   </span>-->
                        </span>
                        <div class="media-body">
                            <small>{{ 'Pack Quantity'|trans }} </small>
                            <div id="id-qty-pack" class="media-heading" style="font-size:16px" data-value=""></div>                      
                        </div>
                    </div> 
                    

                  </div>
                  
                </div>
              </div>
                          <!-- END/cards  COMPANY -->

                          <!-- START/cards  DESTINAZIONE -->
              <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                <div class="card card-slategray">
                  <div class="front"> 

                    <div class="color transparent-black textured rounded-top-corners">                   
    <div class="homepage-logo">
        <img class="image-logo" src="{{ asset('static/images/Consitech.png') }}" alt="consitech">
    </div>

                    </div> 
                  </div>
                </div>
              </div>
                          <!-- END/cards  DESTINAZIONE -->

           </div>
            <!-- /cards -->
            
            <!-- row - INIZIO NUOVA -->
            <div class="row">

              <!-- col 6 -->
              <div class="col-md-6">



  <!-- tile - BUTTON-->
                        <div class="btn-group btn-group-justified margin-bottom-30 transparent no-shadow">
                        
                          <a class="btn timeline-heading" id="id-confirm" role="button"><span class="glyphicon glyphicon-pencil fa-2x"></span></i> <strong>{{ 'Confirm'|trans }}</strong></a>
                          <a class="btn timeline-heading" id="id-cancel" role="button"><i class="fa fa-trash-o fa-2x"></i><span><strong>  &nbsp;  {{ 'Cancel'|trans }}</strong></span></a>
                             <div class="btn-group">
                            <a class="btn timeline-heading dropdown-toggle" data-toggle="dropdown"><i class="fas fa-briefcase fa-2x"></i>
                             <strong>  &nbsp;  AZIONI </strong> <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                              <li><a href="#"><span class="glyphicon glyphicon-pencil"></span></i> <strong>    &nbsp;  INSERISCI NOTA</strong></a></li>
                              <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></i> <strong>   &nbsp;  E-MAIL</strong></a></li>
                              <li><a href="#"><span class="fa fa-gears"></span></i><strong>   &nbsp;  SOSPENDI</strong></a></li>
                              <li class="divider"></li>
                              <li><a href="#"><span class="fas fa-hands-helping "></span></i><strong>   &nbsp; Help on line - not available Jet !</strong></a></li>
                            </ul>
                          </div>                                                                          
                        </div>
                <!-- /tile -->
<br>

   <!-- tile - VOLUME-->
                       <section class="tile transparent">

                  <!-- tile header - Peso / Weight-->
                  <div class="tile-header color transparent-black textured rounded-top-corners">
                    <h2> <strong>{{ "WEIGHT on document"|trans }} </strong></h2>
                    <div class="controls">
                      <!--a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a-->
                      <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                    </div>
              
                  <!-- /tile header - Peso / Weight-->
   <br>
                  <!-- tile widget -->
                  <div class="tile-widget color transparent-black textured">
                    <div style="height: 250px;">
                  <br>
                  <!-- tile body -->
                  <p class="chart-overall text-left thin color-orange right-align"><span id="id-big-weight" class="big-big" style="font-size:5.8vw" data-value="0,00"></span>
                   <span class="fas fa-weight-hanging color-orange" style="font-size:5.0vw" text-right ></span>
                  </p>
                  <p class="chart-overall text-left thin color-orange right-align">
                   <!--  <span id="id-big-fiscalid-lbl" class="big-big" style="font-size:2.0vw">{{ "Fiscal ID: "|trans }}</span>
                    <span id="id-big-fiscalid" class="big-big" style="font-size: 2.0vw" data-value=""></span> -->
                  </p>
	          </div>
            </div>
                  <!-- /tile body -->

        </div>
      
</section>
                <!-- /tile -->



    <!-- tile PESO  -->
                      <section class="tile transparent">
            
                              <!-- tile header - Peso / Weight-->
                              <div class="tile-header color transparent-white textured rounded-top-corners">
                                <h2> <strong>{{ "VOLUME on document"|trans }}</strong></h2>
                                <div class="controls">
                                  <!--a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a-->
                                  <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                                </div>
                          
                              <!-- /tile header - Peso / Weight-->
                              <!-- tile widget -->
                              <div class="tile-widget color transparent-white textured">
                                <div style="height: 250px;">
                              <!-- tile body -->
                              <div class="chart-overall text-center thin color-cyan right-align"><span id="id-big-inbound" class="big-big" style="font-size:6.5vw" data-value=""></span>
                              <span class="color-default" style="font-size:4.0vw" text-right >{{ "Mc" }}</span>&nbsp;&nbsp;
                              <span class="fas fa-box color-default" style="font-size:4.0vw" text-right ></span>
                              
                          </div>
                         </div>
                              <!-- /tile body -->

                    </div>
                  
            </div></section>
                <!-- /tile -->

              </div>
              <div class="col-md-6">



      <!-- tile - TABLE OBJECT-->
                <section class="tile transparent">

<!--Advanced table TOP-->
                  <!-- tile header -Object Measure Datatable -->
                  <div class="tile-header color transparent-black rounded-corners">
                    <h1>Object Details: </h1>
                    <span class="note">View & Operation - <span class="italic"> [Reserved]</span></span>
                    <div class="controls">
                    <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                    <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                    <a href="#" class="remove"><i class="fa fa-times fa-2x"></i></a>
                    </div>
                  </div>
                  <!-- /tile header -->

                  <!-- tile body -->
                  <div class="tile-body color transparent-black rounded-corners">
                    
                  <div class="table-responsive">
                  <!--table class="table table-bordered table-sortable" id="basicDataTable""-->
                     <table  class="table table-datatable table-custom" id="id-detail-tab">

<!--end - Advanced table TOP-->

                        <thead>
                          <tr>
                          <th width="25" >
                            <div class="checkbox check-transparent" style="whith min: 10Px">
                              <input type="checkbox" value="1" id="allchck">
                              <label for="allchck"></label>
                            </div></th>
                            <th class="sort-alpha" style="width: 10px;">ID </th>
                            <th class="sort-alpha" style="width min: 30px;">[Kg]<br>{{ 'Weight'|trans }}</th>
                            <th class="sort-numeric" style="width min: 30px;">[Mc]<br>V&nbsp;Inbound</th>
                            <th class="sort-numeric" style="width min: 30px;">[M]<br>W</th>
                            <th class="sort-numeric" style="width min: 30px;">[M]<br>H</th>
                            <th class="sort-numeric" style="width min: 30px;">[M]<br>L</th>
                            <th class="sort-numeric" style="width min: 30px;" align="center"><i class="fa fa-eye fa-3x color-blue"></i></th>
                            <th class="sort-numeric" style="width min: 30px;"><h3>DEP</h3></th>
                            <th class="sort-numeric" style="width min: 30px;"><br><img src="{{ asset('static/images/modal-close-hover.png') }}" width="14" height="14" alt=""/></th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>

                  </div>
                  <!-- /tile body -->
                
                </section>
                <!-- /tile -->

            <div class="row">

              <!-- col 4 -->
               <div class="card-container col-lg-6 col-sm-6 col-sm-6">
                    <!-- tile  3D-->
                    <section class="tile transparent">

                  <!-- tile header -->
                  <div id="id-3D" class="tile-header color transparent-black rounded-corners">
                    <h2>3D</h2>
<!--                    <span class="note">Dettail analisys: <span class="italic">View & operation</span></span>
-->                  <div class="controls">
                    <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                    <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                    <a href="#" class="remove"><i class="fa fa-times fa-2x"></i></a>
                    </div>
                  </div>
                  <!-- /tile header -->
                      <!-- tile body -->
                      <div id="B3D" class="tile-body nopadding rounded-corners">
<!--
<div id="id-Progress-3D" class="ProgressBar ProgressBar--animateNone" data-progress="70">
			<svg class="ProgressBar-contentCircle"  viewBox="0 0 200 200">
      	<circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
      	<circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
      	<span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
			</svg>
		</div>
-->
	


                    <!--  <img id="B3DTmp" src="{{ asset('static/images/3D_format_q.png') }}" width="100%" height="100%" alt=""/> -->
                      </div>
            </section>
                  <!-- /tile -->
              </div>
               <div class="card-container col-lg-6 col-sm-6 col-xs-6">
                    <!-- tile  360°-->
                   <section class="tile transparent">

                  <!-- tile header -->
                  <div class="tile-header color transparent-black rounded-corners">
                    <h5>360° Quality Monitor Image</h5>
<!--                    <span class="note">Dettail analisys: <span class="italic">View & operation</span></span>
-->                  <div class="controls">
                    <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                    <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                    <a href="#" class="remove"><i class="fa fa-times fa-2x"></i></a>
                    </div>
                  </div>
                  <!-- /tile header -->
                      <!-- tile body -->
                      <div class="tile-body nopadding rounded-corners">

                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                          <!-- Indicators -->
                          <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                          </ol>

                          <!-- Wrapper for slides -->
                          <div class="carousel-inner">
                            <div class="item active">
                              <img id="id-secam-1" src="{{ asset('static/images/carousel/20190125181903_1.jpg') }}" width="2944" height="1656" alt=""/>
                              <div class="carousel-caption">
                                <h3>Controllo CAMERA - 1</h3>
                                <p>{{ '360° Quality Monitor Controll . C4RGO-Air'|trans }}<br>{{ 'Click to Enlarge'|trans }}</p>
                              </div>  
                            </div>
                            <div class="item">
                              <img id="id-secam-2" src="{{ asset('static/images/carousel/20190125181904_2.jpg') }}" width="2944" height="1656" alt=""/>
                              <div class="carousel-caption">
                                <h3>Controllo CAMERA - 2</h3>
                                <p>{{ '360° Quality Monitor Controll . C4RGO-Air'|trans }}<br>{{ 'Click to Enlarge'|trans }}</p>
                              </div>
                            </div>
                            <div class="item">
                              <img id="id-secam-3" src="{{ asset('static/images/carousel/20190125181905_3.jpg') }}" width="2944" height="1656" alt=""/>
                              <div class="carousel-caption">
                                <h3>Controllo CAMERA - 3</h3>
                                <p>{{ '360° Quality Monitor Controll . C4RGO-Air'|trans }}<br>{{ 'Click to Enlarge'|trans }}</p>
                              </div>
                            </div>
                            <div class="item">
                              <img id="id-secam-4" src="{{ asset('static/images/carousel/20190125181906_4.jpg') }}" alt=""/> 
                              <div class="carousel-caption">
                                <h3>Controllo CAMERA - 4</h3>
                                <p>{{ '360° Quality Monitor Controll . C4RGO-Air'|trans }}<br>{{ 'Click to Enlarge'|trans }}</p>
                              </div>
                            </div>
                          </div>

                          <!-- Controls -->
                          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                            <i class="fa fa-chevron-left fa-lg left-side"></i>
                          </a>
                          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                            <i class="fa fa-chevron-right fa-lg right-side"></i>
                          </a>
                        </div>
                      </div></section></div>
              <!-- /col 4 -->
              
              
            </div>
            <!-- /row -->
              </div>
              <!-- /col 6 -->
            </div>
            <!-- /row - FINE NUOVA-->
            <!-- cards -->
            </div>
            <!-- /cards -->

          </div>
          <!-- /content main container -->

        </div>
        <!-- Page content end -->




</div>








{% endblock %}

{% block footer %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
<script type="text/javascript" src="{{ asset('static/js/homepage.js') }}"></script>   
<script>
var refreshInterval;

var startuptype = 0;
var acquiretype = "";
var pallettype = "";
var volumetype = "";
var sessionID = "";
var noStatus = false;

    function refInterval() {
        clearInterval(refreshInterval);
        var url = ("{{ path('app_status', {'n': 'pageid'}) }}").replace('pageid', (startuptype == 1) ? 2 : ((volumetype == 'R') ? 1 : 0));
        $.ajax(url)
          .done(function(v) {
            if (v.refresh == 1) {
              var n = v.machine.pzN;
              sessionID = v.machine.sessionID;
              $("#id-n-val").html(n);
              $('#id-awb').html(v.machine.codeAWB);
              if (volumetype == 'R') {
                $('#id-vol-val').html(number_format(v.machine.realVol1.toString(), 2, '.', ','));
              }
              else {
                $('#id-vol-val').html(number_format(v.machine.inboundVol.toString(), 2, '.', ','));
              }                
              if (n > 1) {
                $('#id-W-val').html(number_format(v.machine.dimW.toString(), 3, '.', ','));
                $('#id-H-val').html(number_format(v.machine.dimH.toString(), 3, '.', ','));
                $('#id-L-val').html(number_format(v.machine.dimL.toString(), 3, '.', ','));
                $("#id-measure-box").hide();
              }
              else {
                $('#id-W-val').html("");
                $('#id-H-val').html("");
                $('#id-L-val').html("");
                $("#id-measure-box").show();
              }
              $("#id-setting-box").hide();
            }
            if (v.machine.lastUpdateDiff > 10) {
                $("#id-weight-val").html("{{ 'No Connect'|trans }}");
                $("#id-weight-um").html("");
            }
            else {
              $("#id-weight-val").html(number_format(v.machine.netWeight.toString(), 2, '.', ','));
              $("#id-weight-um").html(v.machine.umNetWeight);
            }
          })
          .fail(function(er) {
            refreshInterval = setInterval(refInterval, 1000);
          })
          .always(function() {
            refreshInterval = setInterval(refInterval, 1000);
          });
    }

function gotoPage(n) {
    clearInterval(refreshInterval);
    noStatus = false;
    switch (n) {
    case 1:
        startuptype = 1;
		$("body").removeClass('bg-1b');
		$("body").addClass('bg-28');
        $("#id-step-1").hide();
        $("#id-step-2").show();
        $("#id-step-3").hide();
        $("#id-step-4").hide();
        $("#wrap").show();
//        location.href="{{ path('sertup_two_page', {'n': '1'}) }}";
        break;
    case 2:
		$("body").removeClass('bg-1b');
		$("body").addClass('bg-28');
        startuptype = 2;
        $("#id-step-1").hide();
        $("#id-step-2").show();
        $("#id-step-3").hide();
        $("#id-step-4").hide();
        $("#wrap").show();
//        location.href="{{ path('sertup_two_page', {'n': '2'}) }}";
        break;
    case 3:
		$("body").removeClass('bg-1b');
		$("body").addClass('bg-28');
        $("#id-step-1").hide();
        $("#id-step-2").show();
        $("#id-step-3").hide();
        $("#id-step-4").hide();
        $("#wrap").show();
//        location.href="{{ path('sertup_two_page', {'n': '2'}) }}";
        break;
    case 4:
        var detectionType = "";
        var pallet = "";
        var volume = "";
        refreshInterval = setInterval(refInterval, 500);
        acquiretype = $("input[name='acquire-type']:checked").val();
        pallettype = ($('#id-depallet').is(":checked")) ? 'D' : 'N';
        volumetype = ($('#id-realvol').is(":checked")) ? 'R' : 'N';    
        switch(acquiretype) {
        case 'standardvol':
            detectionType = "{{ 'Standard'|trans }}";
            break;
        case 'bigvol':
            detectionType = "{{ 'Big Volume'|trans }}";
            break;
        case 'smallvol':
            detectionType = "{{ 'Small Volume'|trans }}";
            break;
        }
        switch(pallettype) {
        case 'D':
            pallet = "{{ ' + Remove pallet'|trans }}";
            break;
        }
        switch(volumetype) {
        case 'R':
            volume = "{{ ' + Real volume'|trans }}";
            break;
        }
        message = "{{ 'Detection type: '|trans }}" + detectionType + pallet + volume;

        $('#id-settings-info').html(message);
        $('#id-awb').html("");
        $('#id-weight-val').html("");
        $('#id-weight-um').html("");
        $('#id-vol-val').html("");
        $('#id-n-val').html("");
        $('#id-W-val').html("");
        $('#id-H-val').html("");
        $('#id-L-val').html("");

        $("#id-step-1").hide();
        $("#id-step-2").hide();
        $("#id-step-3").show();
        $("#id-step-4").hide();
        $("#wrap").show();
        $("#id-measure-box").hide();
        $("#id-setting-box").show();
		$("body").removeClass('bg-1b');
		$("body").addClass('bg-28');
        noStatus = true;
//        location.href="{{ path('sertup_two_page', {'n': '2'}) }}";
        break;
      case 5:
        $("#id-step-1").hide();
        $("#id-step-2").hide();
        $("#id-step-3").hide();
		$("body").removeClass('bg-4');
		$("body").addClass('bg-1b');
        $("#id-step-4").show();
        $("#wrap").hide();
        break;
    }
}






var id = '{% if app.request.query.get("ID") != "" %}{{ app.request.query.get("ID") }}{% else %}0{% endif %}';
var dataurl = ("{{ path('app_gdata', {'n': 'pageid'}) }}").replace('pageid', id);
var seccamurl = "{{ path('app_getimage', {'i': 'pageid', 'n': 'value'}) }}";
var progress3D = 0;

var pid = '{% if app.request.query.get("P") != "" %}{{ app.request.query.get("P") }}{% else %}N{% endif %}';
var loadMeshType = 0;
var fulldiv = false;
var parEYES = false;
var target = null
var gauge = null;
//var refreshInterval = setInterval(refInterval, 500);
var loadMeshOk = true;
var init3DOk = false;

function getMeshCloud(v) {
  var baseurl = "{{ path('app_datapcl', {'i': 'pageid', 'n': 'value'}) }}";
  var loader = new THREE.PCDLoader();
  datahead["mesh"] = new Array();
  datahead["convex"] = new Array();
  for (count = 0; count < v.pointcloud.records.length; ++count) {
    var pclid = datahead.pointcloud.records[count].recid;
    var pcln = datahead.pointcloud.records[count].recid;
    var url = baseurl.replace("value", pclid).replace("pageid", datahead.pointcloud.SID);
    loader.load(url, "pc_" + pcln, 
        function (name, mesh) {
            mesh.name = name;
            mesh.material.size = 0.01;
            mesh.material.color.setHex( 0xFFFFFF );
            var p = mesh.geometry.attributes.position.array;
            var aa = new Array();
            for (c1 = 0; c1 < p.length; c1 += 3) {
                if (!isNaN(p[c1]) && !isNaN(p[c1 + 1]) && !isNaN(p[c1 + 2])) {
                    aa.push(new THREE.Vector3(p[c1], p[c1 + 1], p[c1 + 2]));
                } 
            }
            var geometry2 = new THREE.ConvexGeometry(aa);
            var material2 = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
            var convex = new THREE.Mesh( geometry2, material2 );
            convex.name = mesh.name.replace("pc_", "cx_");
            datahead["convex"].push(convex);
            datahead["mesh"].push(mesh);
            progress3D++;
            progress100 = (progress3D * 100.0) / (v.pointcloud.records.length * 2);
            $("#id-3D h2").html("3D - " + progress100 + "%");
              if (progress100 > 99.99 && !init3DOk) {
                window.setTimeout(function() {
                  $("#id-3D h2").html("3D");
                  init3DOk = true;
                  init();
                  animate();                  
                }, 2000);
              }

        }, 
        function (progress) {
          console.log(JSON.stringify(progress));
        }, 
        function (err) {
          console.log(JSON.stringify(err));
        }, 
        function (compressdata) {
            return JXG.decompress(compressdata); 
        } 
    );    
  }
}

function getMeshVRML(v) {
  var baseurl = "{{ path('app_datavrml', {'i': 'pageid', 'n': 'value'}) }}";
  var loader = new THREE.VRMLLoader();
  datahead["meshvrml"] = new Array();
  for (count = 0; count < datahead.pointcloud.records.length; ++count) {
      var pclid = datahead.pointcloud.records[count].recid;
      var pcln = datahead.pointcloud.records[count].recid;
      var nvrml = 0;
      var url = baseurl.replace("value", pclid).replace("pageid", datahead.pointcloud.SID);
      loader.load(url, "_" + pcln,
          function (mesh) {
              for (var c = 0; c < mesh.length; ++c) {
                  datahead["meshvrml"].push(mesh[c]);  
              }
              progress3D++;
              progress100 = (progress3D * 100.0) / (v.pointcloud.records.length * 2);
              $("#id-3D h2").html("3D - " + progress100 + "%");
              $("#id-Progress-3D").attr("data-progress", progress100);
              if (progress100 > 99.99 && !init3DOk) {
                window.setTimeout(function() {
                  $("#id-3D h2").html("3D");
                  init3DOk = true;
                  init();
                  animate();                  
                }, 2000);
              }
          }, 
          function (progress) {
            console.log(JSON.stringify(progress));
          }, 
          function (err) {
            console.log(JSON.stringify(err));
          },
          function (compressdata) {
            return JXG.decompress(compressdata); 
          }       
      );
  }

}

function getData(url) {
  $("#id-3D h2").html("3D");
  progress3D = 0;

  $.ajax(url)
    .done(function(v) {
        var n = 1;
        datahead = v;
        setValue("#id-big-awb", v.awb, '', '');
        setValueFormat("#id-big-weight", v.nweight.toString(), v.nweightum + ' ', '', 2, ',', '.');
        setValue("#id-big-fiscalid", v.alibinr, '', '');
        setValue("#id-qty-pack", v.pointcloud.records.length, '', '');
        setValueFormat("#id-big-inbound", v.inbound.val.toString(), '', '', 3, ',', '.');
        $("#id-secam-1").attr("src", seccamurl.replace("pageid", v.SID).replace("value", 1));
        $("#id-secam-2").attr("src", seccamurl.replace("pageid", v.SID).replace("value", 2));
        $("#id-secam-3").attr("src", seccamurl.replace("pageid", v.SID).replace("value", 3));
        $("#id-secam-4").attr("src", seccamurl.replace("pageid", v.SID).replace("value", 4));
        $("#id-detail-tab > tbody").empty();
        $.each(v.pointcloud.records, function(v) {
          var oddeven = (n % 2 == 0) ? 'even' : 'odd';
          var markup = model;
          markup = replaceAll(markup, '[:oddeven:]', oddeven);
          markup = replaceAll(markup, '[:id:]', this.recid);
          markup = replaceAll(markup, '[:weight:]', number_format(this.weight.toString(), 2, '.', ','));
          markup = replaceAll(markup, '[:inbound:]', number_format(this.inbound.toString(), 3, '.', ','));
          markup = replaceAll(markup, '[:w:]', number_format(this.w.toString(), 3, '.', ','));
          markup = replaceAll(markup, '[:h:]', number_format(this.h.toString(), 3, '.', ','));
          markup = replaceAll(markup, '[:l:]', number_format(this.l.toString(), 3, '.', ','));
          markup = replaceAll(markup, '[:img01:]', "{{ asset('static/images/Visualizza_3D_icoBNC.png') }}");
          markup = replaceAll(markup, '[:img02:]', "{{ asset('static/images/V-SUPERFICIE_icoBNC.png') }}");
          $("table tbody").append(markup);
        });
        progress3D = 0;
        gotoPage(5);
        window.setTimeout(function() {
          $("#id-3D h2").html("3D");
          progress3D = 0;
          init3DOk = false;
          getMeshCloud(v);
          getMeshVRML(v);        
        }, 5000);
    })
    .fail(function(err) {
    })
    .always(function(v) {

    });
}

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
    var camera;

    var sensorColor = [
            0x2196f3 
        ,   0xd50000
        ,rgb(156, 39, 176)
        ,rgb(103, 58, 183)
        ,rgb(63, 81, 181)
        ,rgb(33, 150, 243)
        ,rgb(3, 169, 244)
        ,rgb(0, 188, 212)
    ];
    var onClickPosition = new THREE.Vector2();
    var pointclouds;
    var pppp;
    var container;
    var perspectiveCamera, topCamera, controls, controls2, scene, renderer, mesh1;

    var raycaster;
    var mouse;
    var intersection = null;
    var spheres = [];
    var spheresIndex = 0;
    
    var threshold = 0.1;
    var pointSize = 0.05;
    var width = 150;
    var length = 150;
    var rotateY;
    var sprite1;
    var canvas1, context1, texture1;	
    var objInfo;
    var projector;	    
    var gridSelection = new Array();
    var gridSelectionType = 1;
    var raycaster, INTERSECTED;

    var menu3DDispaly = true;

    function SCREEN_WIDTH() {
        var d = document.getElementById("B3D");
        return d.clientWidth;
    }
    function SCREEN_HEIGHT() {
        var d = document.getElementById("B3D");
        return d.clientHeight;
    }

    function viewTop() {
        perspectiveCamera.position.x = 0;
        perspectiveCamera.position.y = 0;
        perspectiveCamera.position.z = -10;		
        perspectiveCamera.up.set(0,1,0);
        perspectiveCamera.lookAt(scene.position);
        controls.update();						
    }
    function viewRight() {
        perspectiveCamera.position.x = -10;
        perspectiveCamera.position.y = 0;
        perspectiveCamera.position.z = 5;		
        perspectiveCamera.up.set(0,0,-1);
        perspectiveCamera.lookAt(scene.position);
        controls.update();						
    }
    function viewLeft() {
        perspectiveCamera.position.x = 10;
        perspectiveCamera.position.y = 0;
        perspectiveCamera.position.z = 5;		
        perspectiveCamera.up.set(0,0,-1);
        perspectiveCamera.lookAt(scene.position);
        controls.update();						
    }		

    function viewFront() {
        perspectiveCamera.position.x = 0;
        perspectiveCamera.position.y = -10;
        perspectiveCamera.position.z = 5;		
        perspectiveCamera.up.set(0,0,-1);
        perspectiveCamera.lookAt(scene.position);
        controls.update();						
    }
    function viewBack() {
        perspectiveCamera.position.x = 0;
        perspectiveCamera.position.y = 10;
        perspectiveCamera.position.z = 5;		
        perspectiveCamera.up.set(0,0,-1);
        perspectiveCamera.lookAt(scene.position);
        controls.update();						
    }					
    function viewIsometric() {	
        perspectiveCamera.position.x = 4.770540208750525;
        perspectiveCamera.position.y = -9.08481789461057;
        perspectiveCamera.position.z = -5.365895860893245;
        perspectiveCamera.up.set(0,1,0);
        perspectiveCamera.lookAt(scene.position);
        controls.update();						
    }

    function selectObj() {
        for(c = 0; c < scene.children.length; ++c) {
            if (typeof scene.children[c].name === "undefined" || (!scene.children[c].name.startsWith("cx_") && !scene.children[c].name.startsWith("pc_") && !scene.children[c].name.startsWith("wr_") && !scene.children[c].name.startsWith("vr_") && !scene.children[c].name.startsWith("yr_") && !scene.children[c].name.startsWith("ib_") 
            && !scene.children[c].name.startsWith("ir_")
            && !scene.children[c].name.startsWith("s1_")
            && !scene.children[c].name.startsWith("s2_")
            && !scene.children[c].name.startsWith("s3_")
            && !scene.children[c].name.startsWith("s4_")
            
            )) 
            {
                continue;
            }      
            var v = parseInt(scene.children[c].name.substring(3));     
            scene.children[c].visible = (
                   (gridSelectionType == 0) 
                || (!scene.children[c].name.startsWith("pc_") && !scene.children[c].name.startsWith("cx_") && !scene.children[c].name.startsWith("wr_") && !scene.children[c].name.startsWith("vr_") && !scene.children[c].name.startsWith("yr_") && !scene.children[c].name.startsWith("s1_") && !scene.children[c].name.startsWith("s2_") && !scene.children[c].name.startsWith("s3_") && !scene.children[c].name.startsWith("s4_"))
                || (gridSelectionType == 1 && scene.children[c].name.startsWith("pc_"))
                || (gridSelectionType == 2 && scene.children[c].name.startsWith("cx_"))
                || (gridSelectionType == 3 && scene.children[c].name.startsWith("yr_"))
                || (gridSelectionType == 4 && scene.children[c].name.startsWith("wr_"))
                || (gridSelectionType == 5 && scene.children[c].name.startsWith("vr_"))
            ) && (gridSelection.length == 0 || ($.inArray(v, gridSelection) >= 0));
        } 
    }

    function getSelVol(records) {
        var inbound = 0.0;
        var realvol1 = 0.0;
        var realvol2 = 0.0;
        var realvol3 = 0.0;
        var w = '';
        var h = '';
        var l = '';
        var dimOk = false;
        var realvolname = 'realvol1';
        switch (gridSelectionType) {
        case 0:
            realvolname = 'realvol1';
            $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
            break;
        case 1:
            realvolname = 'realvol1';
            $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
            break;
        case 2:
            realvolname = 'realvol1';            
            $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
            break;
        case 3:
            realvolname = 'realvol2';
            $("#id-vol-title").html("{{ "INBOUND SURFACE"|trans }}");
            break;
        case 4:
            realvolname = 'realvol3';
            $("#id-vol-title").html("{{ "REAL VOLUME SURFACE"|trans }}");
            break;
        case 5:
            realvolname = 'realvol1';
            $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
            break;
        default:
            realvolname = 'realvol1';
            $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
        }



        if (gridSelection.length > 0) {
            var realvol = 0;
            for(c = 0; c < records.length; ++c) {
                var v = records[c].recid;

                switch (gridSelectionType) {
                case 0:
                    realvol = records[c].realvolume1;
                    realvolname = 'realvol1';
                    $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
                    break;
                case 1:
                    realvol = records[c].realvolume1;
                    realvolname = 'realvol1';
                    $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
                    break;
                case 2:
                    realvol = records[c].realvolume1;
                    realvolname = 'realvol1';            
                    $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
                    break;
                case 3:
                    realvol = records[c].realvolume2;
                    realvolname = 'realvol2';
                    $("#id-vol-title").html("{{ "INBOUND SURFACE"|trans }}");
                    break;
                case 4:
                    realvol = records[c].realvolume3;
                    realvolname = 'realvol3';
                    $("#id-vol-title").html("{{ "REAL VOLUME SURFACE"|trans }}");
                    break;
                case 5:
                    realvol = records[c].realvolume1;
                    realvolname = 'realvol1';
                    $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
                    break;
                default:
                    realvol = records[c].realvolume1;
                    realvolname = 'realvol1';
                    $("#id-vol-title").html("{{ "REAL VOLUME BLUE"|trans }}");
                }


                if ($.inArray(v, gridSelection) >= 0) {
                    inbound += parseFloat(records[c].inbound);
                    realvol1 += parseFloat(realvol);
                    realvol2 += parseFloat(records[c].realvolume2);
                    realvol3 += parseFloat(records[c].realvolume3);
                    if (gridSelection.length == 1) {
                        setDirectValue(parseFloat(records[c].w), "w", 3);
                        setDirectValue(parseFloat(records[c].h), "h", 3);                        
                        setDirectValue(parseFloat(records[c].l), "l", 3); 
                        dimOk = true;                       
                    }
                }
            } 
            setDirectValue(inbound, "inbound", 2);
            setDirectValue(realvol1, realvolname, 2);
            setDirectValue(realvol2, "realvol2", 2);
            setDirectValue(realvol3, "realvol3", 2);
            if (!dimOk) {
                setDirectEmpty("w");
                setDirectEmpty("h");
                setDirectEmpty("l");
            }        
        }
        else {
            setValue(datahead, "inbound", 2);
            setValue(datahead, realvolname, 2);
            setValue(datahead, "realvol2", 2);
            setValue(datahead, "realvol3", 2);
            setValue(datahead, "w", 3);
            setValue(datahead, "h", 3);
            setValue(datahead, "l", 3);
        }
    }


    function processInfo2(o) {
        
        var dx1 = parseFloat(o.inboundrg.x1);
        var dy1 = parseFloat(o.inboundrg.y1);
        var dz1 = parseFloat(o.inboundrg.z1);
        var dx2 = parseFloat(o.inboundrg.x2);
        var dy2 = parseFloat(o.inboundrg.y2);
        var dz2 = parseFloat(o.inboundrg.z2);
        var dx3 = parseFloat(o.inboundrg.x3);
        var dy3 = parseFloat(o.inboundrg.y3);
        var dz3 = parseFloat(o.inboundrg.z3);
        var dx4 = parseFloat(o.inboundrg.x4);
        var dy4 = parseFloat(o.inboundrg.y4);
        var dz4 = parseFloat(o.inboundrg.z4);

        var dx5 = parseFloat(o.inboundrg.x5);
        var dy5 = parseFloat(o.inboundrg.y5);
        var dz5 = parseFloat(o.inboundrg.z5);
        var dx6 = parseFloat(o.inboundrg.x6);
        var dy6 = parseFloat(o.inboundrg.y6);
        var dz6 = parseFloat(o.inboundrg.z6);
        var dx7 = parseFloat(o.inboundrg.x7);
        var dy7 = parseFloat(o.inboundrg.y7);
        var dz7 = parseFloat(o.inboundrg.z7);
        var dx8 = parseFloat(o.inboundrg.x8);
        var dy8 = parseFloat(o.inboundrg.y8);
        var dz8 = parseFloat(o.inboundrg.z8);

        var material = new THREE.LineBasicMaterial({
            color: 0xff0000
        });

        var geometry = new THREE.Geometry();
        geometry.vertices.push(
            new THREE.Vector3( dx1, dy1, dz1 ),
            new THREE.Vector3( dx2, dy2, dz2 ),
            new THREE.Vector3( dx3, dy3, dz3 ),
            new THREE.Vector3( dx4, dy4, dz4 ),
            new THREE.Vector3( dx1, dy1, dz1 )
        );
        geometry.vertices.push(
            new THREE.Vector3( dx5, dy5, dz5 ),
            new THREE.Vector3( dx6, dy6, dz6 ),
            new THREE.Vector3( dx7, dy7, dz7 ),
            new THREE.Vector3( dx8, dy8, dz8 ),
            new THREE.Vector3( dx5, dy5, dz5 )
        );        

        geometry.vertices.push(
            new THREE.Vector3( dx6, dy6, dz6 ),
            new THREE.Vector3( dx2, dy2, dz2 ),
            new THREE.Vector3( dx3, dy3, dz3 ),
            new THREE.Vector3( dx7, dy7, dz7 ),
            new THREE.Vector3( dx8, dy8, dz8 ),
            new THREE.Vector3( dx4, dy4, dz4 )
        );        
        var line2 = new THREE.Line( geometry, material );
        line2.name = o.inboundrg.name;
        scene.add(line2);	

        var geometry = new THREE.SphereGeometry(0.006, 32, 32 );

        var material = new THREE.MeshBasicMaterial( {color: 0x00ffff} );        
        var sphere = new THREE.Mesh( geometry, material );
        sphere.name = "s1_" + o.inboundrg.name;
        sphere.position.set(dx1, dy1, dz1);
        scene.add( sphere );			

        material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
        sphere = new THREE.Mesh( geometry, material );
        sphere.name = "s2_" + o.inboundrg.name;
        sphere.position.set(dx2, dy2, dz2);
        scene.add( sphere );			

        material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        sphere = new THREE.Mesh( geometry, material );
        sphere.name = "s3_" + o.inboundrg.name;
        sphere.position.set(dx4, dy4, dz4);
        scene.add( sphere );					

        material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
        sphere = new THREE.Mesh( geometry, material );
        sphere.name = "s4_" + o.inboundrg.name;
        sphere.position.set(dx5, dy5, dz5);
        scene.add( sphere );			
    }


    function init() {
        mouse = new THREE.Vector2();
        scene = new THREE.Scene();

        scene.background = new THREE.Color( 0x000021 );

        perspectiveCamera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH() / SCREEN_HEIGHT(), 1, 1000 );
        perspectiveCamera.position.x = 0;
        perspectiveCamera.position.y = 0;
        perspectiveCamera.position.z = -10;
        perspectiveCamera.up.set(1,0,0);
        perspectiveCamera.lookAt(scene.position);
        
        scene.add( perspectiveCamera );

        
        var gridXY = new THREE.GridHelper(5, 5, new THREE.Color(0x888888), new THREE.Color(0x888888));
        gridXY.position.set(0.0 ,0.0, 5.0);
        gridXY.rotation.x = Math.PI / 2;
        scene.add(gridXY);	
        if (datahead.coeffA != null && datahead.coeffB != null && datahead.coeffC != null && datahead.coeffD != null) {
            var plane = new THREE.Plane( new THREE.Vector3(datahead.coeffA, datahead.coeffB, datahead.coeffC), datahead.coeffD);
            var helperP = new THREE.PlaneHelper(plane, 5, 0x9f95ea);
            scene.add(helperP);
        } 
        var axisHelper = new THREE.AxisHelper( 0.1 );
        scene.add( axisHelper );	
        raycaster = new THREE.Raycaster();
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(SCREEN_WIDTH(), SCREEN_HEIGHT());
        container = document.getElementById("B3D");
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        container.appendChild(renderer.domElement);
        controls = new THREE.TrackballControls(perspectiveCamera, container);
        controls.rotateSpeed = 2.0;
        controls.zoomSpeed = 1.0;
        controls.panSpeed = 1.0;
        controls.noZoom = false;
        controls.noPan = false;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;
        controls.minDistance = 0.3;
        controls.maxDistance = 0.3 * 100;
        window.addEventListener('resize', onWindowResize, false);
        container.addEventListener( 'mousemove', onDocumentMouseMove, false );
        onWindowResize();
        if (typeof datahead.mesh !== "undefined") {
            for (c = 0; c < datahead.mesh.length; ++c) {
                var mesh = datahead.mesh[c];
                scene.add( mesh );
                if (mesh.geometry != null && mesh.geometry.boundingSphere != null) {
                    var center = mesh.geometry.boundingSphere.center;
                    controls.target.set( center.x, center.y, center.z);
                }
            }
        }    
        if (typeof datahead.meshvrml !== "undefined") {
            for (c = 0; c < datahead.meshvrml.length; ++c) {
                var mesh = datahead.meshvrml[c];
                scene.add( mesh );
                if (mesh.geometry != null && mesh.geometry.boundingSphere != null) {
                    var center = mesh.geometry.boundingSphere.center;
                    controls.target.set( center.x, center.y, center.z);
                }
            }
        }      
        if (parEYES != true)  {
            for (c = 0; c < datahead.convex.length; ++c) {
                var convex = datahead.convex[c];
                scene.add(convex);
            }                
            for (c = 0; c < datahead.pointcloud.records.length; ++c) {
                processInfo2(datahead.pointcloud.records[c]);
            }         
            selectObj();       
        }      
        var dirLight = new THREE.DirectionalLight( 0xffffff );
        dirLight.position.set( 200, 200, 1000 ).normalize();

        perspectiveCamera.add( dirLight );
        perspectiveCamera.add( dirLight.target );

        controls.update();
    }
    function onWindowResize() {
        var w =  SCREEN_WIDTH();
        var h =  SCREEN_HEIGHT();
        if (w <= 520 && h > 600) {
            h = 600;
        }
        perspectiveCamera.aspect = w / h;
        perspectiveCamera.updateProjectionMatrix();
        renderer.setSize(w, h);
        controls.handleResize();
    }
    function onMyMouseDown( e ) {
        var mouse = new THREE.Vector2();
        mouse.x = (event.clientX / SCREEN_WIDTH()) * 2 - 1;
        mouse.y = -(event.clientY / SCREEN_HEIGHT()) * 2 + 1; 
        console.log("DOWN");
        console.log(JSON.stringify(event));
        console.log(JSON.stringify(mouse));
    }       
    function onDocumentMouseMove( event ) {
        event.preventDefault();
        mouse.x = (event.clientX / SCREEN_WIDTH()) * 2 - 1;
        mouse.y = - (event.clientY / SCREEN_HEIGHT()) * 2 + 1;
        mouse.z = 0.5;
        console.log("MOVE");
        console.log(JSON.stringify(event));
        console.log(JSON.stringify(mouse));
    }            

    function animate() {
        requestAnimationFrame(animate);
        perspectiveCamera.updateMatrixWorld();
        raycaster.setFromCamera(mouse, perspectiveCamera);
        var locChildren = new Array();
        for (c = 0; c < scene.children.length; ++c) {
            if (scene.children[c].name.startsWith("ir_")) {
                locChildren.push(scene.children[c]);
            }
        }
        var intersects = raycaster.intersectObjects(locChildren);
        controls.update();
        renderer.render(scene, perspectiveCamera);
    }


(function ($){

    $.fn.bekeyProgressbar = function(options){

        options = $.extend({
        	animate     : true,
          animateText : true
        }, options);

        var $this = $(this);
      
        var $progressBar = $this;
        var $progressCount = $progressBar.find('.ProgressBar-percentage--count');
        var $circle = $progressBar.find('.ProgressBar-circle');
        var percentageProgress = $progressBar.attr('data-progress');
        var percentageRemaining = (100 - percentageProgress);
        var percentageText = $progressCount.parent().attr('data-progress');
      
        //Calcule la circonférence du cercle
        var radius = $circle.attr('r');
        var diameter = radius * 2;
        var circumference = Math.round(Math.PI * diameter);

        //Calcule le pourcentage d'avancement
        var percentage =  circumference * percentageRemaining / 100;

        $circle.css({
          'stroke-dasharray' : circumference,
          'stroke-dashoffset' : percentage
        })
        
        //Animation de la barre de progression
        if(options.animate === true){
          $circle.css({
            'stroke-dashoffset' : circumference
          }).animate({
            'stroke-dashoffset' : percentage
          }, 3000 )
        }
        
        //Animation du texte (pourcentage)
        if(options.animateText == true){
 
          $({ Counter: 0 }).animate(
            { Counter: percentageText },
            { duration: 3000,
             step: function () {
               $progressCount.text( Math.ceil(this.Counter) + '%');
             }
            });

        }else{
          $progressCount.text( percentageText + '%');
        }
      
    };

})(jQuery);


$(document).ready(function() {
  $("#id-step-1").show();
  $("#id-step-2").hide();
  $("#id-step-3").hide();  
  $("#id-measure-box").hide();  
  $("#wrap").show();
  
  $("#btn-settings").off("click", "#btn-settings");
  $("#btn-settings").click(function(event) {
    event.preventDefault();
    gotoPage(3);
  });  
  $("#btn-repite").click(function(event) {
    event.preventDefault();
    $('#id-awb').html("");
    $('#id-weight-val').html("");
    $('#id-weight-um').html("");
    $('#id-vol-val').html("");
    $('#id-n-val').html("");
    $('#id-W-val').html("");
    $('#id-H-val').html("");
    $('#id-L-val').html("");
    $("#id-measure-box").hide();
    $("#id-setting-box").show();
  });  
  $("#btn-verify").click(function(event) {
    event.preventDefault();
    getData(("{{ path('app_gdata', {'n': 'pageid'}) }}").replace('pageid', sessionID));
    $('.tile-header .controls .refresh').click(function() { 
      getData(dataurl);
      return false;
    });
  });  
  $("#btn-ok").click(function(event) {
    event.preventDefault();
    var url = ("{{ path('sess_confirm', {'n': 'sessid'}) }}").replace('sessid', sessionID);
    $.ajax(url)
      .done(function(v) {
        $('#id-awb').html("");
        $('#id-weight-val').html("");
        $('#id-weight-um').html("");
        $('#id-vol-val').html("");
        $('#id-n-val').html("");
        $('#id-W-val').html("");
        $('#id-H-val').html("");
        $('#id-L-val').html("");
        $("#id-measure-box").hide();
        $("#id-setting-box").show();
      })
      .fail(function() {
      })
      .always(function() {
      });
  });  
  $("#id-confirm").click(function(event) {
    event.preventDefault();
    var url = ("{{ path('sess_confirm', {'n': 'sessid'}) }}").replace('sessid', sessionID);
    $.ajax(url)
      .done(function(v) {
        $('#id-awb').html("");
        $('#id-weight-val').html("");
        $('#id-weight-um').html("");
        $('#id-vol-val').html("");
        $('#id-n-val').html("");
        $('#id-W-val').html("");
        $('#id-H-val').html("");
        $('#id-L-val').html("");
        $("#id-step-1").hide();
        $("#id-step-2").hide();
        $("#id-step-3").show();
        $("#id-step-4").hide();
        $("#wrap").show();
        $("#id-measure-box").hide();
        $("#id-setting-box").show();
      })
      .fail(function() {
      })
      .always(function() {
      });
  });  
  $("#id-cancel").click(function(event) {
    event.preventDefault();
    $('#id-awb').html("");
    $('#id-weight-val').html("");
    $('#id-weight-um').html("");
    $('#id-vol-val').html("");
    $('#id-n-val').html("");
    $('#id-W-val').html("");
    $('#id-H-val').html("");
    $('#id-L-val').html("");
    $("#id-step-1").hide();
    $("#id-step-2").hide();
    $("#id-step-3").show();
    $("#id-step-4").hide();
    $("#wrap").show();
    $("#id-measure-box").hide();
    $("#id-setting-box").show();
  });  

  $('.ProgressBar--animateNone').bekeyProgressbar({
    animate : false,
    animateText : false
  });
  
  $('.ProgressBar--animateCircle').bekeyProgressbar({
    animate : true,
    animateText : false
  });
  
  $('.ProgressBar--animateText').bekeyProgressbar({
    animate : false,
    animateText : true
  });
  
  $('.ProgressBar--animateAll').bekeyProgressbar();


 // refreshInterval = setInterval(refInterval, 500);
})

</script>
         
{% endblock %}