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

{% block body_id 'homepage' %}

    {#
        the homepage is a special page which displays neither a header nor a footer.
        this is done with the 'trick' of defining empty Twig blocks without any content
    #}

 
    {% block header %}
    {% endblock %}
    {% block js %}
        <script type="text/javascript" src="{{ asset('static/treejs/three.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/Detector.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/libs/stats.min.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/controls/TrackballControls.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/loaders/PCDLoader.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/loaders/PLYLoader.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/loaders/VTKLoader.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/loaders/VRMLLoader.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/loaders/STLLoader.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs_e/QuickHull.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs_e/geometries/ConvexGeometry.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs_e/renderers/CSS2DRenderer.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/helpers/PlaneHelper.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/treejs/math/Plane.js?v=20180511') }}"></script>
        <script type="text/javascript" src="{{ asset('static/js/number_format.js') }}"></script>
    {% endblock %}

    {% block modal %}
        <div class="md-modal md-effect-5 md-blue colorize-overlay modal-level-2" id="id-continue-dlg">
            <div class="md-content">
                <div class="row">
                    <!-- /col 6 -->
                    <section class="tile transparent mail-note">
                        <!-- tile widget -->
                        <div class="tile-widget color transparent-black rounded-top-corners">

                            <!-- /tile body -->
                            <div class="tile-body nopadding">
                                <div class="dlg-message" id="dlg-message">{{ 'Do you want to continue acquiring?'|trans }}</div>
                            </div>
                            <!-- tile footer -->
                            <div class="tile-footer rounded-bottom-corners text-right">
                                <a id="dlg-close" class="submit font-slab submit-cancell" href="javascript: next_continue();"><strong>{{ 'Save and continue'|trans }}<i class="fa fa-arrow-right"></i></strong></a>
                                <a id="dlg-confirm" data-exec="" class="submit font-slab" href="javascript: stop_continue();"><strong>{{ 'Save and stop'|trans }}<i class="fa fa-check"></i></strong></a>
                            </div>
                        </div>
                        <!-- /tile footer -->
                    </section>
                </div>
            </div>
        </div>
        <div class="md-modal md-effect-5 md-blue colorize-overlay modal-level-2" id="id-colli-dlg">
            <div class="md-content">
                <div class="row">
                    <!-- /col 6 -->
                    <section class="tile transparent mail-note">
                        <!-- tile widget -->
                        <div class="tile-widget color transparent-black rounded-top-corners">

                            <!-- /tile body -->
                            <div class="tile-body nopadding">
                                <div class="dlg-message" id="dlg-message">{{ 'Insert number of items?'|trans }}</div>
								<input type="text" id="n-colli">
                            </div>
                            <!-- tile footer -->
                            <div class="tile-footer rounded-bottom-corners text-right">
                                <a id="dlg-close" class="submit font-slab submit-cancell" href="javascript: cancel_nitems();"><strong>{{ 'Cancel'|trans }}<i class="fa fa-ban"></i></strong></a>
                                <a id="dlg-confirm" data-exec="" class="submit font-slab" href="javascript: confirm_nitems();"><strong>{{ 'Confirm'|trans }}<i class="fa fa-check"></i></strong></a>
                            </div>
                        </div>
                        <!-- /tile footer -->
                    </section>
                </div>
            </div>
        </div>		
        <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
            <div class="md-content">
                <h3>ERROR</h3>   
                <div id="id-msg-err" class="tile-body nopadding rounded-corners">
                </div>
                <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
            </div>
        </div>

        <div class="md-modal md-effect-10 md-blue colorize-overlay" id="id-3D-modal">
            <div class="md-content">
                <section class="tile transparent">
                    <div class="tile-widget color transparent-black rounded-top-corners">
                        <ul class="tile-navbar bg-transparent-black-3 select-3d"> 
                            <li class="select-3d"> 
                                <h3>3D</h3>
                            </li>                             
                            <li class="select-3d"> 
                                <a id="id-view-top" href="javascript:viewTop();" class="page-menu-btn no-select choose-display" style="">
                                </a>
                            </li>                            
                            <li class="select-3d"> 
                                <a id="id-view-front" href="javascript:viewFront();" class="page-menu-btn no-select choose-display" style="">
                                </a>
                            </li>
                            <li class="select-3d"> 
                                <a id="id-view-back" href="javascript:viewBack();" class="page-menu-btn no-select choose-display" style="">
                                </a>
                            </li>
                            <li class="select-3d"> 
                                <a id="id-view-left" href="javascript:viewLeft();" class="page-menu-btn no-select choose-display" style="">
                                </a>
                            </li>
                            <li class="select-3d"> 
                                <a id="id-view-right" href="javascript:viewRight();" class="page-menu-btn no-select choose-display" style="">
                                </a>
                            </li>
                            <li class="select-3d"> 
                                <a id="id-cube" href="javascript:viewIsometric();" class="page-menu-btn no-select choose-display" style="">
                                    <i class="fa fa-cube" title="Isometric"></i>
                                </a>
                            </li>
                            <li class="select-3d"> 
                                <a id="id-camera1" href="javascript:screenShot();" class="page-menu-btn no-select choose-display" style="">
                                    <i class="fa fa-camera" title="Isometric"></i>
                                </a>
                            </li>
                            <li class="select-3d"> 
                                <a id="id-camera1" href="javascript:screenShotSave();" class="page-menu-btn no-select choose-display" style="">
                                    <i class="fa fa-camera-retro" title="Isometric"></i>
                                </a>
                            </li>
                            <li class="filters">
                                <a href="#" class="no-fullscreen" onclick="javascript:close3D();"><i class="fa fa fa-arrows-alt fa-2x" style="color: red;"></i></a>
                            </li>
                            <li class="filters">
                                <a class="btn btn-hotpink" href="javascript:setVolType(1);">{{ "IN BOUND"|trans }}</a>
                                <a class="btn btn-blue" href="javascript:setVolType(2);">{{ "PACKAGE"|trans }}</a>
                                <a class="btn btn-greensea" href="javascript:setVolType(5);">{{ "SURFACE"|trans }}</a>
                                <a class="btn btn-dutch" href="javascript:setVolType(4);">{{ "V - SHAPE"|trans }}</a>
                            </li> 
                        </ul>
                    </div>
                </section>                   

                <div id="B3DModal" class="tile-body nopadding rounded-corners">
                </div>
            </div>
        </div>
            
            
            

        <div class="md-modal md-effect-10 md-blue colorize-overlay modal-big" id="id-wizard">
            <div class="md-content">
                <div class="wizard-header class-step-header" align="center">
                    <span>
                        <img src="{{ asset('static/images/Consitech.png') }}" alt="" class="logo-wizard" />
                    </span>
                </div>
                <div class="pageheader wizard-header class-step-header">
                    <h2 class="btn-restart-app" style="margin-left: 16px; font-size: 38px;">
                        <i id="id-btn-restart-app" class="fa fa-refresh btn-restart-app" style="line-height: 48px;padding-left: 0px; font-size: 38px;"></i>
                        <!-- <i class="fa fa-puzzle-piece" style="line-height: 48px;padding-left: 5px;"></i> --> Start ! 
                    </h2>
                    <div class="breadcrumbs hidden-element">
                        <ol class="breadcrumb step-1">
                            <li>
                                <a href="{{ path('search_page', {'data':'0'}) }}">{{ 'MyC4RG0 Manager'|trans }}</a>
                            </li>
                            <li>
                                <a href="javascript:gotoPage(0);">C4RGO-Air</a>
                            </li>
                        </ol>
                        <ol class="breadcrumb step-2">
                            <li>
                                <a href="{{ path('search_page', {'data':'0'}) }}">{{ 'MyC4RG0 Manager'|trans }}</a>
                            </li>
                            <li>
                                <a href="javascript:gotoPage(0);">C4RGO-Air</a>
                            </li>
                            <li>
                                <a href="javascript:gotoPage(3);">Settings</a>
                            </li>
                        </ol>
                    </div>
                </div>
                <div id="id-msg-dlg"  class="class-dlg hidden-element" style="width: 100%; height: 100%;">
                    <h3><div class="dlg-title"></div></h3>
                    <div class="dlg-body">                   
                    </div>
                    <div class="dlg-bobtn">  
                           <a id="dlg-msg-confirm" data-exec="" class="alert-msg submit font-slab btn" href="javascript: closeMessage();"><strong>{{ 'Ok'|trans }}<i class="fa fa-check"></i></strong></a>					
                    </div>					
                </div>
                
                            
                {% include 'modal/modalpallet.html.twig' %}            
      
                <!-- INIZIO STEP 1 -->
                <div id="id-step-1"  class="class-step">
                    <!-- Wrap all page content here -->
                    <div class="row">
                        <div class="col-md-12">
                            <!-- page header -->

                            <!-- /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 class="c4rg0-site" face="Arial, sans-serif" color="#ffffff">W&nbsp;W&nbsp;W.&nbsp;C&nbsp;<span style="color:#66ccff">4</span>&nbsp;R&nbsp;G&nbsp;O&nbsp;.&nbsp;C&nbsp;O&nbsp;M</font>
                                            </h1>
                                            <!-- /page header -->
                                            <p>{{ 'Enabled Operator'|trans }}: {{ app.user.username }}</p>
                                            <p>
                                                <a href="{{ path('search_page', {'data':'0'}) }}" class="btn btn-blue btn-large">{{ 'MyC4RG0 Manager'|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 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>
                <!-- FINE STEP 1 -->
                <!-- INIZIO STEP 2 -->
                <div id="id-step-2" style="display: none;" class="class-step">
                    <div class="row">
                        <div class="col-md-12" >
                            <!-- page header -->
                            <!-- /page header -->
                            <!-- col 12 -->



                            <div class="col-md-12">
                                <!-- tile -->
                                
                                <section class="tile transparent menu-type-aquisition">
                                    <div class="bg-transparent-black-3">
                                        <br>
                                        <div class="row">
                                            <!-- col 6 -->

                                            {% for item in menuWeight %}
                                            <div class="col-md-6">
                                                <!-- tile -->
                                                <section class="tile color transparent-black text-center">
                                                    <!-- tile header -->
                                                    <div class="tile-header">
                                                        <span>
                                                            {% if item.type == 'im' %}
                                                                <img src="{{ asset('static/c4rg0_themes/assets/images/icons/' ~ item.icon) }}" width="72" alt=""/>
                                                            {% elseif item.type == 'fa' %}
                                                                <i class="{{ item.icon }} fa-4x"></i>
                                                            {% else %}
                                                            {% endif %}                                                                
                                                            <font face="Arial, sans-serif" color="#ffffff" size="+3" style="margin-left: 10px; margin-right: 10px;">{{ item.title }}</font>
                                                            <input type="radio" class="vector-type" name="weight-type" id="id-weight-type-{{ item.cmd }}" value="{{ item.cmd }}" {% if item.cur %}checked="checked"{% endif %} />
                                                            <label for="id-weight-type-{{ item.cmd }}">{{ 'Select'|trans }}</label>
                                                        </span>
                                                    </div>
                                                    <!-- /tile header -->
                                                </section>
                                            </div>
                                            {% endfor %}
                                            

                                        </div>
                                    </div >
                                </section>
                                <br>
                                <br>                                
                                
                                <section class="tile transparent menu-type-aquisition" style="display: none;">
                                    <div class="bg-transparent-black-3">
                                        <br>
                                        <div class="row">
                                            <!-- col 6 -->

                                            {% for item in menu0 %}
                                            <div class="col-md-3">
                                                <!-- tile -->
                                                <section class="tile color transparent-black text-center">
                                                    <!-- tile header -->
                                                    <div class="tile-header">
                                                        <span>
                                                            {% if item.type == 'im' %}
                                                                <img src="{{ asset('static/c4rg0_themes/assets/images/icons/' ~ item.icon) }}" width="72" alt=""/>
                                                            {% elseif item.type == 'fa' %}
                                                                <i class="{{ item.icon }} fa-4x"></i>
                                                            {% else %}
                                                            {% endif %}                                                                
                                                            <font face="Arial, sans-serif" color="#ffffff" size="+3" style="margin-left: 10px; margin-right: 10px;">{{ item.title }}</font>
                                                            <input type="radio" class="vector-type" name="vector-type" id="id-vector-type-{{ item.cmd }}" value="{{ item.cmd }}" {% if item.cur %}checked="checked"{% endif %} />
                                                            <label for="id-vector-type-{{ item.cmd }}">{{ 'Select'|trans }}</label>
                                                        </span>
                                                    </div>
                                                    <!-- /tile header -->
                                                </section>
                                            </div>
                                            {% endfor %}
                                            

                                        </div>
                                    </div >
                                </section>
                                <br>
                                <br>

                                <section class="tile transparent menu-type-aquisition">
                                    <div class="bg-transparent-black-3">
                                        <br>
                                        <div class="row">
                                            <!-- col 6 -->

                                            {% for item in menu1 %}
                                            <div class="col-md-4">
                                                <!-- tile -->
                                                <section class="tile color transparent-black text-center">
                                                    <!-- tile header -->
                                                    <div class="tile-header">
                                                        <span>
                                                            {% if item.type == 'im' %}
                                                                <img src="{{ asset('static/c4rg0_themes/assets/images/icons/' ~ item.icon) }}" width="72" alt=""/>
                                                            {% elseif item.type == 'fa' %}
                                                                <i class="{{ item.icon }}"></i>
                                                            {% else %}
                                                            {% endif %}                                                                
                                                            <font face="Arial, sans-serif" color="#ffffff" size="+3" style="margin-left: 10px; margin-right: 10px;">{{ item.title }}</font>
                                                            <input type="radio" class="acquire-type" name="acquire-type" id="id-acquire-type-{{ item.cmd }}" value="{{ item.cmd }}" {% if item.cur %}checked="checked"{% endif %} />
                                                            <label for="id-acquire-type-{{ item.cmd }}">{{ 'Select'|trans }}</label>
                                                        </span>
                                                    </div>
                                                    <!-- /tile header -->
                                                </section>
                                            </div>
                                            {% endfor %}
                                            

                                        </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">

                                                <style>
                                                    .big {
                                                        font-size: 1.2em;
                                                    }

                                                    .small {
                                                        font-size: .7em;
                                                    }

                                                    .square {
                                                        width: .7em;
                                                        height: .7em;
                                                        margin: .5em;
                                                        display: inline-block;
                                                    }

                                                    /* Custom dropdown */
                                                    .custom-dropdown {
                                                        position: relative;
                                                        display: inline-block;
                                                        vertical-align: middle;
                                                        margin: 10px; /* demo only */
                                                    }

                                                    .custom-dropdown select {
                                                        background-color: #1abc9c;
                                                        color: #fff;
                                                        font-size: inherit;
                                                        padding: .5em;
                                                        padding-right: 2.5em;
                                                        border: 0;
                                                        margin: 0;
                                                        border-radius: 3px;
                                                        text-indent: 0.01px;
                                                        text-overflow: '';
                                                        -webkit-appearance: button; /* hide default arrow in chrome OSX */
                                                    }

                                                    .custom-dropdown::before,
                                                    .custom-dropdown::after {
                                                        content: "";
                                                        position: absolute;
                                                        pointer-events: none;
                                                    }

                                                    .custom-dropdown::after { /*  Custom dropdown arrow */
                                                        content: "\25BC";
                                                        height: 1em;
                                                        font-size: .625em;
                                                        line-height: 1;
                                                        right: 1.2em;
                                                        top: 50%;
                                                        margin-top: -.5em;
                                                    }

                                                    .custom-dropdown::before { /*  Custom dropdown arrow cover */
                                                        width: 2em;
                                                        right: 0;
                                                        top: 0;
                                                        bottom: 0;
                                                        border-radius: 0 3px 3px 0;
                                                    }

                                                    .custom-dropdown select[disabled] {
                                                        color: rgba(0,0,0,.3);
                                                    }

                                                    .custom-dropdown select[disabled]::after {
                                                        color: rgba(0,0,0,.1);
                                                    }

                                                    .custom-dropdown::before {
                                                        background-color: rgba(0,0,0,.15);
                                                    }

                                                    .custom-dropdown::after {
                                                        color: rgba(0,0,0,.4);
                                                    }
                                                </style>
                                                <!-- tile -->
                                                <section class="tile color transparent-black ">
                                                    <!-- tile header -->
                                                    <div class="tile-header text-center">
                                                        <span class="docck">
                                                            <input type="checkbox" id="id-depallet" {% if info != null and info.tipo_pallet.op != 0 %}checked="checked"{%  endif %} />
                                                            <label for="id-depallet" class="check-box depallet"></label>
                                                        </span>
                                                        <span style="display: inline-grid; text-align: left;">                                                           
                                                            <font face="Arial, sans-serif" color="#ffffff" size="+3" onclick="javascript:palletDlg1();">{{ 'DEPALLET'|trans }}<span id="lbl-pallet-info"></span></font>
                                                            <font face="Arial, sans-serif" color="#ffffff" size="+2" onclick="javascript:palletDlg1();"><span id="id-pallet-info" data-palletop="{{ defaultOp }}" data-palletbc="{{ defaultBc }}" data-palleth="{{ defaultH }}" data-palletp="{{ defaultP }}" data-palletdescr="{{ defaultDescr }}">{{ defaultDescr }}</span></font>
                                                        </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" {% if info != null and info.tipo_volume == 'true' %}checked="checked"{%  endif %} />
                                                            <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>
                                                    </div>
                                                    <!-- /tile header -->
                                                </section>
                                            </div>
                                        </div>
                                        <div align="center"></div>
                                    </div >
                                </section>
                                <p>&nbsp;</p>
                                <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>
                <!-- FINE STEP 2 -->
                <!-- INIZIO STEP 3 -->
                <div id="id-step-3" style="display: none;" class="class-step">
                    <div class="row">
                        <!-- Page content -->
                        <div id="contentfree2" class="col-md-12">

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


                                    <section class="tile transparent"  style="padding-left: 15px; width: 98.5%;">
                                        <!-- tile header - AWB-->
                                        <div class="tile-header color transparent-black textured rounded-top-corners">

                                            <!-- /tile header - AWB-->
                                            <!-- tile widget -->
                                            <div class="tile-widget color transparent-black textured">
                                                <div style="/* height: 150px; */">
                                                    <!-- tile body -->
                                                    <p class="barcode chart-overall text-center thin uppercase color-white">
                                                        <i onclick="javascript:reset();" class="fa fa-window-close" style="font-size:5.0vw;color:red; float: left; padding-left: 50px; padding-top: 26px;"></i>
                                                        <span class="big-big" style="font-size:5.5vw"><input class="insert-awb" type="text" id="id-awb" value="" autocomplete="off" placeholder="READY"></input>&nbsp;</span>
                                                        <span onclick="javascript:go();" class="fas fa-fas fa-rocket color-cyan" style="font-size:5.0vw"></span>
                                                        <span id="company-flag" style="height: 152px; float: right; width: 240px; background-size: 150px; background-repeat: no-repeat; background-position: center; margin-right: 10px;"></span>
                                                    </p>
                                                </div>
                                            </div>
                                            <!-- /tile body -->

                                        </div>

                                    </section><br>

                                    <div class="row cards">
                                        <!-- START/RIGA PESO E VOLUME -->
                                        <div class="card-container col-md-5 ">

                                            <!-- tile - PESO-->
                                            <section class="tile transparent" style="padding-left: 15px;">

                                                <!-- tile header - Peso / Weight-->
                                                <div class="tile-header color transparent-black textured rounded-top-corners">
                                                    <h2> <strong>WEIGHT</strong></h2>
                                                    <i id="id-btn-restart-app-weight" class="fa fa-refresh btn-restart-app" style="font-size: 26px;float:  right;"></i>
                                                    <!-- tile widget -->
                                                    <div class="tile-widget color transparent-black textured">
                                                        <div style="height: 260px;">

                                                            <!-- tile body -->
                                                            <p class="chart-overall text-center thin">
                                                                <span class="fas fa-weight-hanging color-orange" style="font-size:5.0vw" ></span>
                                                                <span class="big-big color-orange" style="font-size:5.0vw">&nbsp;<span id="id-weight-val"></span>&nbsp;<span id="id-weight-um"></span></span>
                                                                <span class="big-big color-orange" style="font-size:5.0vw">&nbsp;<span id="id-weight-val2"></span>&nbsp;<span id="id-weight-um2"></span></span>
                                                                <span style="float: right;" >
                                                                </span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- /tile body -->
                                                </div>

                                            </section>
                                            <!-- /tile -->
                                        </div>
                                        <!-- /cards -->
                                        <!-- row - DIVIDO ORIZZONALE -->

                                        <div class="card-container col-md-2">
                                            <!-- tile - 1 box-->
                                            <section class="tile transparent">

                                                <!-- tile header -1° box sx-->
                                                <div class="tile-header color transparent-black textured rounded-top-corners">
                                                    <h2><strong>Pz</strong></h2>
                                                    <!-- /tile header - n° PZ-->
                                                    <!-- tile widget -->
                                                    <div class="tile-widget color transparent-black textured">
                                                        <div style="height: 260px;">
                                                            <!-- tile body -->
                                                           <!--<span class="big-big" style="font-size:5.5vw"><input class="insert-awb" type="text" id="id-awb" value="" autocomplete="off" placeholder="READY"></input>&nbsp;</span>-->
                                                            <p class="chart-overall text-center thin uppercase color-green">
                                                                <span class="big-big" style="font-size:5.0vw"><span id="id-n-val"></span></span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- /tile body -->

                                                </div>

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


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


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

                                                <!-- tile header - VOLUME-->
                                                <div class="tile-header color transparent-black textured rounded-top-corners">
                                                    <h2> <strong >VOLUME</strong></h2>
                                                    <!-- /tile header - VOLUME-->
                                                    <!-- tile widget -->
                                                    <div class="tile-widget color transparent-black textured">
                                                        <div style="height: 260px;">
                                                            <!-- tile body -->
                                                            <p class="chart-overall text-center thin color-cyan">
                                                                <span class="fas fa-cube color-default" style="font-size:5.0vw" > </span>
                                                                <span class="big-big" style="font-size:5.0vw">&nbsp;<span id="id-vol-val"></span>&nbsp;Mc</span>
                                                            </p>
                                                        </div>
                                                        <!-- /tile body -->
                                                    </div>
                                                </div>
                                            </section>
                                            <!-- /tile -->
                                        </div>
                                        <div>
                                        </div>

                                        <!-- /col 12 -->
                                    </div>

                                    <!-- /content container -->







                                    <!-- START/  3^ RIGA  MISURE -->
                                    <div class="row cards" id="id-measure-box">
                                        <div id="card-content" class="col-md-12 ">

                                            <div class="card-container col-md-2 col-md-offset-3 card-center">

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

                                                    <!-- tile header -1° box sx-->
                                                    <div class="tile-header color transparent-white textured rounded-top-corners">
                                                        <!-- tile widget -->

                                                        <div class="tile-widget color transparent-black textured">
                                                            <div style="height: 70px;">
                                                                <!-- tile body -->
                                                                <div class="chart-overall text-center thin uppercase color-white">
                                                                    <span class="big-big" style="font-size:2.3vw">W&nbsp;<span id="id-W-val"></span>&nbsp;M</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- /tile body -->

                                                    </div>

                                                </section>
                                                <!-- /tile -->
                                            </div>
                                            <!-- /cards -->
                                            <!-- row - DIVIDO ORIZZONALE -->

                                            <!-- col 6 -->
                                            <div class="card-container col-md-2 card-center">


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

                                                    <!-- tile header - BOX 2-->
                                                    <div class="tile-header color transparent-white textured rounded-top-corners">
                                                        <!-- tile widget -->

                                                        <div class="tile-widget color transparent-black textured">
                                                            <div style="height: 70px;">
                                                                <!-- tile body -->
                                                                <div class="chart-overall text-center thin uppercase">
                                                                    <span class="big-big" style="font-size:2.3vw">H&nbsp;<span id="id-H-val"></span>&nbsp;M</span>
                                                                </div>
                                                            </div>
                                                            <!-- /tile body -->

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

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

                                            <!-- row - DIVIDO ORIZZONALE -->

                                            <!-- col 6 -->
                                            <div class="card-container col-md-2 card-center">

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

                                                    <!-- tile header - BOX 2-->
                                                    <div class="tile-header color transparent-white textured rounded-top-corners">
                                                        <!-- tile widget -->


                                                        <!-- /tile header - Peso / Weight-->
                                                        <!-- tile widget -->
                                                        <div class="tile-widget color transparent-black textured text-right">

                                                            <div style="height: 70px;" >
                                                                <!--<span class="title">Check Box Hover</span>-->
                                                                <!-- tile body -->
                                                                <div class="chart-overall text-center thin uppercase color-white">
                                                                    <span class="big-big" style="font-size:2.3vw">L&nbsp;<span id="id-L-val"></span>&nbsp;M</span>

                                                                </div>

                                                                <!-- /tile body -->

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

                                            </div>
                                        </div>

                                    </div>



                                </div>



                                <!-- START/  3^ RIGA SETUP -->
                                <div class="row cards" id="id-setting-box">
                                    <div id="card-content2" class="col-md-12 ">

                                        <div class="card-container col-md-8 col-md-offset-2 card-center">

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

                                                <!-- tile header -1° box sx-->
                                                <div class="tile-header color transparent-white textured rounded-top-corners">
                                                    <!-- tile widget -->

                                                    <div class="tile-widget color transparent-black textured">
                                                        <div style="height: 70px; text-align: left;">
                                                            <!-- tile body -->
                                                            <p class="chart-overall thin uppercase color-white">
                                                                <span class="big-big" style="font-size: 28px"><span id="id-settings-info"></span></span>
                                                            </p>

                                                            <div class="sub-mainx">
                                                                <button id="btn-settings" class="button-threex button-threex-1" style="left: unset; right: 10px;">{{ 'Change Settings!'|trans}}</button>
                                                            </div>

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

                                                </div>

                                            </section>
                                            <!-- /tile -->
                                        </div>
                                        <!-- /cards -->
                                        <!-- row - DIVIDO ORIZZONALE -->

                                    </div>


                                </div>

                                <!-- /tile -->
                                <!-- START/  4^ RIGA BOTTONI -->

                                <div id="id-wiz-btn-confirm" class="row cards hidden-element">
                                    <br>
                                    <div id="card-content3" class="col-md-12 ">

                                        <div class="card-container col-md-2 col-md-offset-3 card-center" >

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

                                                <!-- tile header - BOX 1-->
                                                <div class="tile-header color transparent-black textured rounded-top-corners text-center">
                                                    <!-- tile widget -->
                                                    <div style="height: 35px;" >
                                                        <div class="sub-mainx">
                                                            <button id="btn-repite" class="button-threex button-threex-2">RIPETI!</button>
                                                        </div>
                                                    </div>


                                                </div>
                                            </section>
                                        </div>
                                        <!-- /cards -->
                                        <!-- row - DIVIDO ORIZZONALE -->

                                        <div class="card-container col-md-2 card-center" >

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

                                                <!-- tile header - BOX 2-->
                                                <div class="tile-header color transparent-black textured rounded-top-corners text-center">
                                                    <div style="height: 35px;" >
                                                        <div class="sub-mainx">
                                                            <button id="btn-verify" class="button-threex button-threex-2">VERIFICA!</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                        <!-- /tile -->
                                        <!-- row - DIVIDO ORIZZONALE -->
                                        <div class="card-container col-md-2 card-center" >

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

                                                <!-- tile header - BOX 2-->
                                                <div class="tile-header color transparent-black textured rounded-top-corners text-center">
                                                    <div style="height: 35px;" >
                                                        <div class="sub-mainx">
                                                            <button id="btn-ok" class="button-threex button-threex-2">OK!</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <!-- /tile -->

                                <!-- RIGA 5 Loop animation-->
                                <div class="row cards wiz-capture hidden-element" id="id-spinner-box">
                                    <div id="card-content2" class="col-md-12 ">

                                        <div class="card-container col-md-8 col-md-offset-2 card-center">

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

                                                <!-- tile header -1° box sx-->
                                                <div class="tile-header color transparent-white textured rounded-top-corners">
                                                    <!-- tile widget -->

                                                    <div class="tile-widget color transparent-black textured">
                                                        <div style="height: 70px; text-align: left;">
                                                            <!-- tile body -->
                                                            <p class="chart-overall thin uppercase color-white">
                                                            <div class="big-big text-center" style="font-size: 18px">
                                                                <style>
                                                                    .lds-facebook {
                                                                        display: inline-block;
                                                                        position: relative;
                                                                        width: 64px;
                                                                        height: 64px;
                                                                    }
                                                                    .lds-facebook div {
                                                                        display: inline-block;
                                                                        position: absolute;
                                                                        left: 6px;
                                                                        width: 13px;
                                                                        background: #fff;
                                                                        animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
                                                                    }
                                                                    .lds-facebook div:nth-child(1) {
                                                                        left: 6px;
                                                                        animation-delay: -0.24s;
                                                                    }
                                                                    .lds-facebook div:nth-child(2) {
                                                                        left: 26px;
                                                                        animation-delay: -0.12s;
                                                                    }
                                                                    .lds-facebook div:nth-child(3) {
                                                                        left: 45px;
                                                                        animation-delay: 0;
                                                                    }
                                                                    @keyframes lds-facebook {
                                                                        0% {
                                                                            top: 6px;
                                                                            height: 51px;
                                                                        }
                                                                        50%, 100% {
                                                                            top: 19px;
                                                                            height: 26px;
                                                                        }
                                                                    }


                                                                </style>
                                                                <div class="lds-facebook"><div></div><div></div><div></div></div></div>
                                                            </p>


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

                                                </div>

                                            </section>
                                            <!-- /tile -->
                                        </div>
                                        <!-- /cards -->
                                        <!-- row - DIVIDO ORIZZONALE -->

                                    </div>


                                </div>

                                <!-- FINE RIGA 5 -->

                            </div>
                        </div>






                    </div>

                </div>
                <!-- FINE STEP 3 -->
            </div>
        </div>
    {% endblock %}

    {% block body %}

        <div class="md-overlay"></div><!-- the overlay element -->
        <!-- Page content -->
        <div id="content" class="col-md-12">

            <!-- page header -->
            <div class="pageheader">

                <!--            <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="/en/home?step=2">C4RGO-Air</a></li>
                        <li class="active">Dashboard</li>
                    </ol>
                </div>


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






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

                <!-- 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="fas fa-barcode fa-8x" ></i>-->
                                        <span id="company-flag-detail" style="height: 100px; float: right; width: 200px; background-size: 190px; background-repeat: no-repeat; background-position: center; margin-right: 10px; background-image: url({{ asset('static/images/bc.png') }});"></span>
                                    </span>

                                    <div class="media-body" style="margin-left: 220px;">
                                        <!--                        <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=""></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-6x"></i>
                                        <!--<img src="assets/images/Flag_Logo_nation/air_france_logo_cms.jpg" width="120" height="54" alt=""/>   </span>-->
                                    </span>
                                    <div class="media">
                                        <div id="id-lbl-pz">{{ 'Pz.'|trans }} </div>
                                        <div id="id-qty-pack" class="media-heading" 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 logo"> 

                                <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 href="javascript:deleteM(true, false);" class="btn timeline-heading" style="color: #FF0000;" role="button"><i class="fa fa-trash-o fa-3x"></i><span class="btn-detaile"><strong>&nbsp;&nbsp;&nbsp;{{ "Delete"|trans }}</strong></span></a>
                            <a href="javascript:confirmM(true);" class="btn timeline-heading" style="color: #0099FF;" role="button"><span class="glyphicon glyphicon-hand-ok"><i class="fa fa-thumbs-up fa-3x"></i></span>&nbsp;&nbsp;&nbsp;<span class="btn-detaile"><strong>{{ "Save & Next"|trans }}</strong></span></a>
                        </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;">

                                        <!-- 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>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <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 fiscal-id">
                                            <span id="id-big-fiscalid-lbl" class="big-big" style="font-size:1.0vw">{{ "Fiscal ID: "|trans }}</span>
                                            <span id="id-big-fiscalid" class="big-big" style="font-size: 1.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" style="height: 434px;">
                                <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>



                                <div class="col-md-12 box-volume">

                                    <section class="tile transparent">

                                        <!-- tile body -->
                                        <div class="tile-body color transparent-white rounded-bottom-corners">
                                            <div class="row">
                                                <ul class="inline">

                                                    <li class="col-md-4 col-sm-12 col-xs-12">

                                                        <ul class="progress-list">              
                                                            <section class="tile color transparent-black">
                                                                <!-- tile body -->
                                                                <div class="tile-body">
                                                                    <ul class="friend-list">

                                                                        <li>
                                                                            <div class="media ">
                                                                                <a id="id-vol-IB" class="pull-left profile-photo vol-type" href="javascript:setVolType(1);">
                                                                                    <img class="media-object " src="{{ asset('static/c4rg0_themes/assets/images/icons/INBOUND_icoBNC_G.png') }}" alt="">
                                                                                    &nbsp;&nbsp;&nbsp;</a>
                                                                                <div class="media text-left color-cyan ">
                                                                                    <strong id="id-big-inbound-tab" class="media-heading" color-cyan="" style="font-size:1.2vw"></strong>&nbsp;{{ "Mc"|trans }}&nbsp;&nbsp;&nbsp;<button onclick="javascript:setVolType(1);" type="button" class="btn btn-cyan btn-xs margin-left-20">&nbsp;&nbsp;&nbsp;{{ "IN BOUND"|trans }}&nbsp;&nbsp;&nbsp;</button>
                                                                                </div>
                                                                            </div>
                                                                        </li>

                                                                        <li>
                                                                            <div class="media">                      
                                                                                <a id="id-vol-R1" class="pull-left profile-photo vol-type" href="javascript:setVolType(2);">
                                                                                    <img class="media-object " src="{{ asset('static/c4rg0_themes/assets/images/icons/Visualizza_3D_icoBNC.png') }}" alt="">
                                                                                    &nbsp;&nbsp;&nbsp;</a>
                                                                                <div class="media text-left color-dutch">
                                                                                    <strong id="id-big-pack-tab" class="media" info="" style="font-size:1.2vw"></strong>&nbsp;{{ "Mc"|trans }}&nbsp;&nbsp;&nbsp;<button type="button" onclick="javascript:setVolType(2);" class="btn btn-dutch btn-xs margin-left-20">&nbsp;&nbsp;&nbsp;{{ "PACKAGE"|trans }}&nbsp;&nbsp;&nbsp;</button>
                                                                                </div>
                                                                            </div>
                                                                        </li>


                                                                        <li class="media">
                                                                            <div class="media">
                                                                                <a id="id-vol-R3" class="pull-left profile-photo vol-type" href="javascript:setVolType(5);">
                                                                                    <img class="media-object " src="{{ asset('static/c4rg0_themes/assets/images/icons/V-SUPERFICIE_icoBNC.png') }}" alt="">
                                                                                    &nbsp;&nbsp;&nbsp;</a>
                                                                                <div class="media text-left color-greensea">
                                                                                    <strong id="id-big-surface-tab" class="media-heading" style="font-size:1.2vw"></strong>&nbsp;{{ "Mc"|trans }}&nbsp;&nbsp;&nbsp;<button onclick="javascript:setVolType(5);" type="button" class="btn btn-greensea btn-xs margin-left-20">&nbsp;&nbsp;&nbsp;{{ "SURFACE"|trans }}&nbsp;&nbsp;&nbsp;</button>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                        <li>
                                                                            <div class="media">
                                                                                <a id="id-vol-R2" class="pull-left profile-photo vol-type" href="javascript:setVolType(4);">
                                                                                    <img class="media-object " src="{{ asset('static/c4rg0_themes/assets/images/icons/REALE_ico_azzurro_p.png') }}" alt="">
                                                                                    &nbsp;&nbsp;&nbsp;</a>
                                                                                <div class="media text-left color-green">
                                                                                    <strong id="id-big-vshape-tab" class="media-heading" color-dutch="" style="font-size:1.2vw"></strong>&nbsp;{{ "Mc"|trans }}&nbsp;&nbsp;&nbsp;<button onclick="javascript:setVolType(4);" type="button" class="btn btn-green btn-xs margin-left-20">&nbsp;&nbsp;&nbsp;{{ "V - SHAPE"|trans }}&nbsp;&nbsp;&nbsp;</button>
                                                                                </div>
                                                                            </div>
                                                                        </li>

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

                                                            </section>

                                                        </ul>
                                                    </li>


                                                    <li class="col-md-8 col-sm-12 col-xs-12 text-center">



                                                        <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            <span class="color-default" style="font-size:4.0vw" text-right >{{ "Mc"|trans }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            <span class="fas fa-box color-default" style="font-size:4.0vw" text-right ></span>

                                                        </div>                         
                                        <p class="chart-overall text-left thin color-cyan right-align fiscal-id">
                                            <span id="id-big-fiscalid-lbl" class="big-big" style="font-size:1.0vw">{{ "Volume ID: "|trans }}</span>
                                            <span id="id-big-volumeid" class="big-big" style="font-size: 1.0vw" data-value=""></span> 
                                        </p>




                                                    </li>




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



                                    </section>

                                </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>
                                </div>
                            </div>
                            <!-- /tile header -->

                            <!-- tile body -->
                            <div class="tile-body color transparent-black rounded-corners monitor-table-detail">

                                <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" >
                                                </th>
                                                <th class="sort-alpha" style="width: 10px; color: #0099FF; text-align: center;"><h4>ID</h4></th>
                                                <th class="sort-alpha" style="width min: 30px; color: #0099FF; text-align: center;"><h4>{{ 'Weight [Kg]'|trans }}</th>
                                                <th class="vol-column vol-inbound sort-numeric" style="width min: 30px; color: #0099FF; text-align: center;"><h4>V&nbsp;Inbound [Mc]</h4></th>
                                                <th class="vol-column vol-rvpackage sort-numeric hide-column" style="min-width: 30px; color: #0099FF; text-align: center;"><h4>V&nbsp;Package [Mc]</h4></th>
                                                <th class="vol-column vol-rvsurface sort-numeric hide-column" style="min-width: 30px; color: #0099FF; text-align: center;"><h4>V&nbsp;Surface [Mc]</h4></th>
                                                <th class="vol-column vol-rvvsphape sort-numeric hide-column" style="min-width: 30px; color: #0099FF; text-align: center;"><h4>V&nbsp;V-Shape [Mc]</h4></th>
                                                <th class="sort-numeric" style="width min: 30px; color: #0099FF; text-align: center;"><h4>W [M]</h4></th>
                                                <th class="sort-numeric" style="width min: 30px; color: #0099FF; text-align: center;"><h4>H [M]</h4></th>
                                                <th class="sort-numeric" style="width min: 30px; color: #0099FF; text-align: center;"><h4>L [M]</h4></th>
                                                <th onclick="javascript:viewObj(0);" class="sort-numeric" style="width min: 30px; color: #0099FF; text-align: center;"><h4>3D</h4></th>
                                                <th class="sort-numeric" style="width min: 30px; color: #0099FF; text-align: center;"><h4>DEP</h4></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 color transparent-black">

                                    <!-- tile header -->
                                    <div id="id-3D" class="tile-header color transparent-black rounded-corners">
                                        <h5>3D</h5>
                         
                                        
                                        <!--                    <span class="note">Dettail analisys: <span class="italic">Wiev & operation</span></span>
                                        -->                  <div class="controls">
                                            <a href="#" class="fullscreen" onclick="javascript:open3D();"><i class="fa fa fa-arrows-alt fa-2x"></i></a>
                                            <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                                            <a href="#" class="refresh3D"><i class="fa fa-download fa-2x"></i></a>
                                        </div>
                                    </div>
                                    <!-- /tile header -->
                                    <!-- tile body -->
                                    <div id="B3D-id" 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">Wiev & 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>
                                        </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">
                                                {% for camnum in 1..4 %}
                                                    <div class="item {% if camnum == 1 %} active {% endif %}">
                                                        <img id="id-secam-{{ camnum }}"  onclick="openwindow(this)"  src="{{ asset('static/images/seccam.png') }}" width="2944" height="1656" alt="cam {{ camnum }}"/>
                                                        <div class="carousel-caption">
                                                            <h3>Controllo CAMERA - {{ camnum }}</h3>
                                                            <p>{{ '360° Quality Monitor Controll . C4RGO-Air'|trans }}<br>{{ 'Click to Enlarge'|trans }}</p>
                                                        </div>  
                                                    </div>                              
                                                {% endfor %}

                                            </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 -->
{% endblock %}
{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript" src="{{ asset('static/js/homepage.js') }}"></script>
    <script type="text/javascript">
        console.log = function() {};
        var datahead = null;
        var stepN = '{% if app.request.query.get("step") != "" %}{{ app.request.query.get("step") }}{% else %}1{% endif %}';
        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 = null;
        var loadMeshOk = true;
        var init3DOk = false;
        var busy = false;
        var machine = new Array();
        var alertMsgAll = [        {% for alert in alertlist %}
            {% if (loop.index == 1) %}
                    {"id": "{{ alert.id }}", "title": '{{ alert.title|raw }}', "body": '{{ alert.body|raw }}', "modal": JSON.parse('{{ alert.modal|raw }}')}
            {% else %}
                    , {"id": "{{ alert.id }}", "title": '{{ alert.title|raw }}', "body": '{{ alert.body|raw }}', "modal": JSON.parse('{{ alert.modal|raw }}')}
            {% endif %}
        {% endfor %} 
                ];
                
                function ddChange(dd, at, id, v) {
                 //   $('#' + dd).attr('data-toggle', v);
                    $('#id-pallet-dlg-li-' + id).attr(at, v);
                    $('#' + dd).html(v);
                }
                function chosePallet() {

                }
                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 matconvex = new THREE.LineBasicMaterial( { color: 0xFFFF00, linewidth: 2 } );
                                    var geoconvex = new THREE.EdgesGeometry(geometry2);
                                    var wireframe = new THREE.LineSegments(geoconvex, matconvex);
                                    wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd
                                    
                                    var material2 = new THREE.MeshBasicMaterial({color: 0x0000ff});
                                    var convex = new THREE.Mesh(geometry2, material2);
                                    convex.name = mesh.name.replace("pc_", "cx_");
                                    convex.add(wireframe);
                                    
                                    datahead["convex"].push(convex);
                                    datahead["mesh"].push(mesh);
                                    progress3D++;
                                    progress100 = (progress3D * 100.0) / (v.pointcloud.records.length * 2);
                                    $("#id-3D h5").html("3D - " + progress100 + "%");
                                    if (progress100 > 99.99 && !init3DOk) {
                                        window.setTimeout(function () {
                                            $("#id-3D h5").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 h5").html("3D - " + progress100 + "%");
                                    $("#id-Progress-3D").attr("data-progress", progress100);
                                    if (progress100 > 99.99 && !init3DOk) {
                                        window.setTimeout(function () {
                                            $("#id-3D h5").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 setVolumeView(vIb, vR1, vR2, vR3) {
                    var mainVol = vIb;
                    $('.vol-type').removeClass("vol-selected");
                    switch (gridSelectionType) {
                        case 2:
                            mainVol = vR1;
                            $('#id-vol-R1').addClass("vol-selected");
                            $('.vol-column').addClass("hide-column");
                            $('.vol-rvpackage').removeClass("hide-column");
                            break;
                        case 4:
                            mainVol = vR2;
                            $('#id-vol-R2').addClass("vol-selected");
                            $('.vol-column').addClass("hide-column");
                            $('.vol-rvvsphape').removeClass("hide-column");
                            break;
                        case 5:
                            mainVol = vR3;
                            $('#id-vol-R3').addClass("vol-selected");
                            $('.vol-column').addClass("hide-column");
                            $('.vol-rvsurface').removeClass("hide-column");
                            break;
                        default:
                            $('#id-vol-IB').addClass("vol-selected");
                            $('.vol-column').addClass("hide-column");
                            $('.vol-inbound').removeClass("hide-column");
                            mainVol = vIb;
                    }
                    setValueFormat("#id-big-inbound", mainVol.toString(), '', '', 2, ',', '.');
                    setValueFormat("#id-big-inbound-tab", vIb.toString(), '', '', 2, ',', '.');
                    setValueFormat("#id-big-pack-tab", vR1.toString(), '', '', 2, ',', '.');
                    setValueFormat("#id-big-surface-tab", vR3.toString(), '', '', 2, ',', '.');
                    setValueFormat("#id-big-vshape-tab", vR2.toString(), '', '', 2, ',', '.');
                }
                function getData(url) {
                    $("#id-3D h5").html("3D");
                    progress3D = 0;

                    $.ajax(url)
                            .done(function (v) {
                                var n = 1;
                                datahead = v;
                                sessionID = v.SID;
                                wid = v.SID.replace('{', '').replace('}', '').split('-');
                                setValue("#id-big-awb", v.awb, '', '');
                                var url = "{{ asset('static/images/bc.png') }}";
                                if (typeof v.ImgFlag !== "undefined" && typeof v.ImgFlag !== "undefined" && v.ImgFlag != '') {
                                    url = "{{ asset('static/images/CompagnieAereeFLAG/companyflags') }}".replace("companyflags", v.ImgFlag);
                                }
                                $('#company-flag-detail').css('background-image', 'url(' + url + ')');                                                                                                
                                setValueFormat("#id-big-weight", v.nweight.toString(), v.nweightum + ' ', '', 2, ',', '.');
                                setValue("#id-big-fiscalid", v.alibinr, '', '');
                                setValue("#id-big-volumeid", (wid[0] + '-' + wid[4]).toUpperCase(), '', '');
                                setValue("#id-qty-pack", v.pointcloud.records.length, '', '');
                                setVolumeView(v.inbound.val, v.realvol1.val, v.realvol2.val, v.realvol3.val);
                                /*        setValueFormat("#id-big-inbound", v.inbound.val.toString(), '', '', 2, ',', '.');
                                 setValueFormat("#id-big-inbound-tab", v.inbound.val.toString(), '', '', 2, ',', '.');
                                 setValueFormat("#id-big-pack-tab", v.realvol1.val.toString(), '', '', 2, ',', '.');
                                 setValueFormat("#id-big-surface-tab", v.realvol3.val.toString(), '', '', 2, ',', '.');
                                 setValueFormat("#id-big-vshape-tab", v.realvol2.val.toString(), '', '', 2, ',', '.');*/

                                $("#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.nweight.toString(), 2, '.', ','));
                                    markup = replaceAll(markup, '[:inbound:]', number_format(this.inbound.toString(), 2, '.', ','));
                                    markup = replaceAll(markup, '[:rvpackage:]', number_format(this.realvolume1.toString(), 2, '.', ','));
                                    markup = replaceAll(markup, '[:rvsurface:]', number_format(this.realvolume3.toString(), 2, '.', ','));
                                    markup = replaceAll(markup, '[:rvvshape:]', number_format(this.realvolume2.toString(), 2, '.', ','));
                                    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/c4rg0_themes/assets/images/icons/Visualizza_3D_icoBNC.png') }}");
                                    markup = replaceAll(markup, '[:img02:]', "{{ asset('static/c4rg0_themes/assets/images/icons/depallet_p.png') }}");
                                    $("table tbody").append(markup);
                                });
                                progress3D = 0;
                                window.setTimeout(function () {
                                    $("#id-3D h5").html("3D");
                                    progress3D = 0;
                                    init3DOk = false;
                                    //    getMeshCloud(v);
                                    //  getMeshVRML(v);        
                                }, 1000);
                            })
                            .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, labelRenderer, 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 Area3D = null;
                var menu3DDispaly = true;
                
                function formatDate(date) {
                    var hours = date.getHours();
                    var minutes = date.getMinutes();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    month = month < 10 ? '0' + month : month;
                    day = day < 10 ? '0' + day : day;
                    hours = hours < 10 ? '0' + hours : hours;
                    minutes = minutes < 10 ? '0'+minutes : minutes;
                    return date.getFullYear()  + "" +  month + "" + day + "" + hours + "" + minutes;
                }
                function SCREEN_WIDTH() {
                    var d = document.getElementById(Area3D);
                    return d.clientWidth;
                }
                function SCREEN_HEIGHT() {
                    var d = document.getElementById(Area3D);
                    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 screenShot() {
                    var w = window.open('', '');
                    w.document.title = "Screenshot";
                    //w.document.body.style.backgroundColor = "red";
                    var img = new Image();
                    // Without 'preserveDrawingBuffer' set to true, we must render now
                    renderer.render(scene, perspectiveCamera);
                    img.src = renderer.domElement.toDataURL();
                    w.document.body.appendChild(img);                      
                }

                function screenShotSave() {
                    // New version of file download using toBlob.
                    // toBlob should be faster than toDataUrl.
                    // But maybe not because also calling createOjectURL.
                    //
                    renderer.render(scene, perspectiveCamera);
                    renderer.domElement.toBlob(function(blob){
                        var a = document.createElement('a');
                      var url = URL.createObjectURL(blob);
                      a.href = url;
                      a.download = "" + datahead.awb + "" + formatDate(new Date()) + '.png';
                      a.click();
                    }, 'image/png', 1.0);


                }

                function selectObj() {
                    var ii = 0;
                    if (scene != null && typeof scene !== "undefined") {
                        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: 0xff5500
                    });

                    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.SphereBufferGeometry(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);
                    
            /*        var moonDiv = document.createElement( 'div' );
                    moonDiv.className = 'labelMy3D';
                    moonDiv.textContent = o.inboundrg.name;
                    moonDiv.style.marginTop = '-1em';
                    var moonLabel = new THREE.CSS2DObject( moonDiv );
                    moonLabel.position.set( 0, 0, 0 );
                    sphere.add( moonLabel );    */ 
                             //   scene.add(moonLabel);
                    
                }


                function init(doc) {
                    if (typeof doc === "undefined") {
                        Area3D = "B3D-id";
                    } else {
                        Area3D = doc;
                    }
                    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.3);
                    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.30, 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(Area3D);
                    while (container.hasChildNodes()) {
                        container.removeChild(container.lastChild);
                    }
                    container.appendChild(renderer.domElement);
                    
                /*    labelRenderer = new THREE.CSS2DRenderer();
                    labelRenderer.setSize(SCREEN_WIDTH(), SCREEN_HEIGHT());
                    labelRenderer.domElement.style.position = 'absolute';
                    labelRenderer.domElement.style.top = 0;
                    container.appendChild( labelRenderer.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);
                 //   labelRenderer.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);

                var modalWizard = null;
                var modal3D = null;
                var modalMsgRed = null;


                var refreshInterval;

                var startuptype = 0;
                var acquiretype = "";
                var pallettype = "";
                var volumetype = "";
                var sessionID = "";
                var noStatus = false;
                var wizIsOpen = false;
                var wizIsErrClose = true;
                var maxWeightTimeOut = 10;
                var busyTimeout = 0;
                var messageQueue = new Array();
                var ritardoComandi = 0;
                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) {
                                machine = v;
                                if (typeof v !== "undefined") {
                                    if (v.err == 0) {
                                        if (wizIsErrClose) {
                                            wizIsErrClose = false;
                                            //        openWizard();
                                        }
                                        if (ritardoComandi <= 0) {                                            
                                            switch(machine.machine.tipomisurazione) {
                                                case 'G':
                                                    $('#id-acquire-type-bigvol').prop( "checked", true);
                                                    acquiretype = 'G';
                                                    break;
                                                case 'U':
                                                    $('#id-acquire-type-singolo').prop( "checked", true);
                                                    acquiretype = 'U';
                                                    break;
                                                case 'S':
                                                    $('#id-acquire-type-standard').prop( "checked", true);
                                                    acquiretype = 'S';                                                
                                                    break;
                                                default:
                                                    $('#id-acquire-type-standard').prop( "checked", true);
                                                    break;
                                            }
                                            switch(machine.machine.tipovolume) {
                                                case 'R':
                                                    $('#id-realvol').prop( "checked", true);
                                                    volumetype = 'R';
                                                    break;
                                                case 'S':
                                                    $('#id-realvol').prop( "checked", false);
                                                    volumetype = 'S';
                                                    break;
                                                default:
                                                    $('#id-realvol').prop( "checked", false);
                                                    volumetype = 'S';
                                                    break;
                                            }
                                            switch(machine.machine.tipopallet) {
                                                case 'D':
                                                //    $('#id-depallet').prop( "checked", true);
                                                   // $('#lbl-pallet-info').html(" Altezza: " + machine.machine.altezzapallet + " Peso: " + machine.machine.pesopallet);
                                               //     pallettype = 'D';
                                                    break;
                                                case 'S':
                                               //     $('#id-depallet').prop( "checked", false);
                                                //    $('#lbl-pallet-info').html("");
                                              //      pallettype = 'S';
                                                    break;
                                                default:
                                                //    $('#id-depallet').prop( "checked", false);
                                                //    $('#lbl-pallet-info').html("");
                                                //    pallettype = 'S';
                                                    break;
                                            }                                              
                                            $("#id-pallet-dlg li").removeClass("pallet-selected");
                                            $("#id-pallet-dlg li").each(
                                                function() {
                                                    var bc = $(this).data("palletbc");
                                                    if (bc === machine.machine.codicepallet) {
                                                        $(this).addClass("pallet-selected");
                                                        $('#id-pallet-info').html($(this).data("palletdescr"));
                                                    }
                                            });
                                         /*   $('#id-pallet-info').data("palletbc", machine.machine.codicepallet);
                                            $('#id-pallet-info').data("palleth", machine.machine.altezzapallet);
                                            $('#id-pallet-info').data("palletp", machine.machine.pesopallet);   */
                                          //  $('#btnAltezza').html(machine.machine.altezzapallet);
                                          //  $('#btnPeso').html(machine.machine.pesopallet);
                                            
                                            
                                            
                                        }
                                        else {
                                            ritardoComandi--;
                                        }
//            openRed();
                                        switch (parseInt(v.status)) {
                                            case 11:
                                                messageQueue.push(v.errorObj);
                                                break;
                                            case 4:
                                                //   console.log('1 RESPONSE: ' + v.status);
                                                maxWeightTimeOut = 10;
                                                busy = false;
                                                $("#id-awb").attr("placeholder", "ready");
                                                if (parseInt(v.refresh) == 1) {
                                                    sessionID = v.machine.sessionID;
                                                    $("#id-spinner-box").addClass("hidden-element");
                                                    $("#id-setting-box").removeClass("hidden-element");
                                                    $('#id-awb').val("");
                                                    $("#id-n-val").html("");
                                                    $('#id-vol-val').html("");
                                                    if (sessionID != "") {
                                                        var n = v.machine.pzN;
                                                        $("#id-wiz-btn-confirm").removeClass("hidden-element");
                                                        $("#id-n-val").html(n);
                                                        $('#id-awb').val(v.machine.codeAWB);
                                                        if (typeof v.machine.vettore !== "undefined" && typeof v.machine.vettore.ImgFlag !== "undefined" && v.machine.vettore.ImgFlag != '') {
                                                            var url = "{{ asset('static/images/CompagnieAereeFLAG/companyflags') }}".replace("companyflags", v.machine.vettore.ImgFlag);
                                                            $('#company-flag').css('background-image', 'url(' + url + ')');
                                                        } else {
                                                            $('#company-flag').css('background-image', '');
                                                        }

                                                        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("");
                                                            $('#id-H-val').html("");
                                                            $('#id-L-val').html("");
                                                            $("#id-measure-box").addClass("hidden-element");
                                                        } else {
                                                            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").removeClass("hidden-element");
                                                            }
                                                        }
                                                    }
//                $("#id-setting-box").show();
                                                }
                                                break;
                                            case 5:  // busy
                                                $("#id-awb").attr("placeholder", "wait");
                                                $("#id-setting-box").addClass("hidden-element");
                                                $("#id-wiz-btn-confirm").addClass("hidden-element");
                                                $("#id-measure-box").addClass("hidden-element");
                                                $("#id-spinner-box").removeClass("hidden-element");
                                                maxWeightTimeOut = 120;
                                                busy = true;
                                                break;
                                            default:
                                                if (!busy) {
                                                    $("#id-awb").attr("placeholder", "ready");
                                                    $("#id-setting-box").removeClass("hidden-element");
                                                    $("#id-spinner-box").addClass("hidden-element");
                                                    maxWeightTimeOut = 10;
                                                    busyTimeout = 0;
                                                } else {
                                                    busyTimeout++;
                                                    if (busyTimeout > 20) {
                                                        busy = false;
                                                    }
                                                }
                                        }
                                        if (typeof v.machine.codeAWB !== "undefined" && v.machine.codeAWB != "") {
                                            $("#id-awb").val(v.machine.codeAWB);
                                        }
                                        if (typeof v.machine.vettore !== "undefined" && typeof v.machine.vettore.ImgFlag !== "undefined" && v.machine.vettore.ImgFlag != '') {
                                            var url = "{{ asset('static/images/CompagnieAereeFLAG/companyflags') }}".replace("companyflags", v.machine.vettore.ImgFlag);
                                            $('#company-flag').css('background-image', 'url(' + url + ')');
                                        } else {
                                            $('#company-flag').css('background-image', '');
                                        }

                                        if (typeof v.machine.sessionID !== "undefined" && v.machine.sessionID != "") {
                                            $("#id-weight-val").html(number_format(v.machine.netWeightPID.toString(), 2, '.', ','));
                                            $("#id-weight-um").html(v.machine.umNetWeightPID);
                                            $("#id-weight-val2").html(number_format(v.machine.netWeightPID2.toString(), 2, '.', ','));
                                            $("#id-weight-um2").html(v.machine.umNetWeightPID2);
                                        } else {
                                            if (v.machine.lastUpdateDiff > maxWeightTimeOut && !busy) {
                                                $("#id-weight-val").html("{{ 'No Connect'|trans }}");
                                                $("#id-weight-um").html("");
                                                $("#id-weight-val2").html("-");
                                                $("#id-weight-um2").html("");
                                            } else {
                                                if (!busy) {
                                                    $("#id-weight-val").html(number_format(v.machine.netWeight.toString(), 2, '.', ','));
                                                    $("#id-weight-um").html(v.machine.umNetWeight);
                                                    $("#id-weight-val2").html(number_format(v.machine.netWeight2.toString(), 2, '.', ','));
                                                    $("#id-weight-um2").html(v.machine.umNetWeight2);
                                                }
                                            }
                                        }
                                        if (v.machine.errList.length > 0) {
                                            for (c = 0; c < v.machine.errList.length; ++c) {
                                                messageQueue.push({'id': v.machine.errList[c]});
                                            }
                                            if ($('.class-dlg').hasClass("hidden-element")) {
                                                var msg = messageQueue.shift();
                                                errMessage(msg.id);
                                            }
                                        }
                                        $(".btn-restart-app").removeClass("app-error");
                                        $(".btn-restart-app").addClass("app-ok");
                                    } else {
                                        if (!busy) {
                                            $("#id-weight-val").html("{{ 'No Connect'|trans }}");
                                            $("#id-weight-um").html("");
                                            $("#id-weight-val2").html("-");
                                            $("#id-weight-um2").html("");
                                        }
                                        $(".btn-restart-app").removeClass("app-ok");
                                        $(".btn-restart-app").addClass("app-error");
                                        console.log(v.curlerr);
                                        //  if (wizIsOpen) {
                                        //    wizIsErrClose = true;
                                        //    closeWizard();
                                        //  }
                                        //    openRed("ERROR", v.curlerr);
                                    }
                                } else {
                                    $("#id-weight-val").html("{{ 'No Connect'|trans }}");
                                    $("#id-weight-um").html("");
                                    $("#id-weight-val2").html("-");
                                    $("#id-weight-um2").html("");
                                    console.log('unknown error');
                                    $(".btn-restart-app").removeClass("app-ok");
                                    $(".btn-restart-app").addClass("app-error");

                                    //    if (wizIsOpen) {
                                    //      wizIsErrClose = true;
                                    //      closeWizard();
                                    //    }
                                    //    openRed("ERROR", 'unknown error');
                                }
                            })
                            .fail(function (er) {
                                $(".btn-restart-app").removeClass("app-ok");
                                $(".btn-restart-app").addClass("app-error");
                            })
                            .always(function () {
                                refreshInterval = setInterval(refInterval, 1000);
                            });
                }

                function gotoPage(n) {
                    noStatus = false;
                    var url = "";
                    switch (n) {
                        case 0:
                            $("body").removeClass('bg-1b');
                            $("body").addClass('bg-1');
                            $("#id-step-1").show();
                            $("#id-step-2").hide();
                            $("#id-step-3").hide();
                            $("#id-step-4").hide();
                            $(".breadcrumbs").addClass("hidden-element");
                            $(".breadcrumb").removeClass("hidden-element");
                            break;
                        case 1:
                            startuptype = 1;
                            url = ("{{ path('app_cmd', {'n': 'mycmd','b':'barcode','c':'pallet'}) }}").replace('mycmd', 'sequencesetup').replace('barcode', "--").replace('pallet', 0);
                            $.ajax(url)
                            .done(function (v) {
                            })
                            .fail(function (v) {
                            })
                            .always(function () {
                            });
                            gotoPage(4);
                            break;
                        case 2:
                            startuptype = 2;
                            gotoPage(3);
                            url = ("{{ path('app_cmd', {'n': 'mycmd','b':'barcode','c':'pallet'}) }}").replace('mycmd', 'sequencenormal').replace('barcode', "--").replace('pallet', 0);
                            $.ajax(url)
                                    .done(function (v) {
                                    })
                                    .fail(function (v) {
                                    })
                                    .always(function () {
                                    });
                            break;
                        case 3:
                            $("body").removeClass('bg-1b');
                            $("body").addClass('bg-1');
                            $("#id-step-1").hide();
                            $("#id-step-2").show();
                            $("#id-step-3").hide();
                            $("#id-step-4").hide();
                            $(".breadcrumb").addClass("hidden-element");
                            $(".breadcrumb.step-1").removeClass("hidden-element");
                            $(".breadcrumbs").removeClass("hidden-element");
                            break;
                        case 4:
                            var detectionType = "";
                            var pallet = "";
                            var volume = "";
                            var vector = "";
                            if (startuptype == 1) {
                                message = "{{ 'Detection type: '|trans }} SETUP"; }
                            else {
                                var tipopesata = $("input[name='weight-type']:checked").val();
                                var vettore = $("input[name='vector-type']:checked").val();
                                var acquire = $("input[name='acquire-type']:checked").val();
                                var realvol = $("#id-realvol").is(':checked');
                                var depallet = $("#id-depallet").is(':checked');
                                var palletBc = $('#id-pallet-info').data('palletbc');
                                var palletP = $('#id-pallet-info').data('palletp');
                                var palletH = $('#id-pallet-info').data('palleth');
                                var palletOp = $('#id-pallet-info').data('palletop');
                                var palletDescr = $('#id-pallet-info').data('palletdescr');
                                if (!depallet) {
                                    palletOp = 0;
                                }
                                $.ajax({
                                    url: "{{ path('home_selezione') }}",
                                    type: "POST",
                                    dataType: 'json',
                                    contentType: 'application/json',
                                    data: "{\"err\": \"0\",\"tipo_startup\":\"%%tipo_startup\",\"tipo_pesata\":\"%%tipo_pesata\",\"tipo_vettore\":\"%%tipo_vettore\",\"tipo_acquisizione\":\"%%tipo_acquisizione\",\"tipo_pallet\":%%tipo_pallet,\"tipo_volume\":\"%%tipo_volume\"}"
                                    .replace('%%tipo_startup', startuptype)
                                    .replace('%%tipo_pesata', tipopesata)
                                    .replace('%%tipo_vettore', vettore)
                                    .replace('%%tipo_acquisizione', acquire)
                                    .replace('%%tipo_pallet', "{\"op\":%%op,\"bc\":\"%%bc\",\"p\":%%p,\"h\":%%h, \"descr\":\"%%descr\"}".replace('%%op', palletOp).replace('%%bc', palletBc).replace('%%p', palletP).replace('%%h', palletH).replace('%%descr', palletDescr))
                                    .replace('%%tipo_volume', realvol)
                                })
                                .done(function (v) {console.log(v);
                                    $('#id-settings-info').html(message);
                                    $('#id-awb').val("");
                                    $('#id-weight-val').html("");
                                    $('#id-weight-um').html("");
                                    $('#id-weight-val2').html("");
                                    $('#id-weight-um2').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").addClass("hidden-element");
                                    $("#id-setting-box").removeClass("hidden-element");
                                    $("body").removeClass('bg-1b');
                                    $("body").addClass('bg-1');
                                    $(".breadcrumb").addClass("hidden-element");
                                    $(".breadcrumb.step-2").removeClass("hidden-element");
                                    $(".breadcrumbs").removeClass("hidden-element");
                                    noStatus = true;

            
                                })
                                .fail(function (v) {
                                })
                                .always(function (v) {
                                }); 
                                
                           /*     acquiretype = $("input[name='acquire-type']:checked").val();
                                pallettype = ($('#id-depallet').is(":checked")) ? 'D' : 'N';
                                volumetype = ($('#id-realvol').is(":checked")) ? 'R' : 'N';*/
                                switch (vettore) {
                                    case 'A':
                                        vector = "{{ 'Air'|trans }}";
                                        break;
                                    case 'S':
                                        vector = "{{ 'Ship'|trans }}";
                                        break;
                                    case 'T':
                                        vector = "{{ 'Train'|trans }}";
                                        break;
                                    case 'R':
                                        vector = "{{ 'Road'|trans }}";
                                        break;
                                }
                                switch (acquire) {
                                    case 'S':
                                        detectionType = "{{ ' + Standard'|trans }}";
                                        break;
                                    case 'M':
                                        detectionType = "{{ ' + Multi volume'|trans }}";
                                        break;
                                    case 'B':
                                        detectionType = "{{ ' + BOX'|trans }}";
                                        break;
                                }
                                switch (palletOp) {
                                    case 1:
                                        pallet = "{{ ' + Assign pallet'|trans }}";
										$('#lbl-pallet-info').html("(" + "{{ 'Assign pallet'|trans }}" + ")");
                                        break;
                                    case 2:
                                        pallet = "{{ ' + Remove pallet'|trans }}";
										$('#lbl-pallet-info').html("(" + "{{ 'Remove pallet'|trans }}" + ")");
                                        break;
                                    default:
                                        pallet = "";
										$('#lbl-pallet-info').html("");
                                        break;
                                }
                                
                                if (realvol) {
                                    volume = "{{ ' + Real volume'|trans }}";
                                }
                                message = "{{ 'Detection type: '|trans }}" + vector + detectionType + pallet + volume;
                            }

                            break;
                    }
                }


                function open3D() {
                    classie.add(modal3D, 'md-show');
                    init("B3DModal");
                    animate();
                }

                function close3D() {
                    classie.remove(modal3D, 'md-show');
                    init();
                    animate();
                }


                function openRed(v1, v2) {
                    classie.add(modalMsgRed, 'md-show');
                }
                function closeRed() {
                    classie.remove(modalMsgRed, 'md-show');
                }

                function openwindow(obj) {
                    var url = $(obj).attr("src");
                    NewWindow = window.open(url, 'newWin', 'width=700,height=700,left=20,top=20,toolbar=No,location=No,scrollbars=no,status=No,resizable=no,fullscreen=No');
                    NewWindow.focus();
                    void(0);
                }

                function openWizard() {
                    wizIsOpen = true;
                    classie.add(modalWizard, 'md-show');
                }


                function closeWizard() {
                    wizIsOpen = false;
                    classie.remove(modalWizard, 'md-show');
                }

                function setVolType(n) {
                    gridSelectionType = n;
                    var vIb = 0.0;
                    var vR1 = 0.0;
                    var vR2 = 0.0;
                    var vR3 = 0.0;
                    $.each(datahead.pointcloud.records, function (index, value) {
                        if (gridSelection.length == 0 || ($.inArray(value.recid, gridSelection) >= 0)) {
                            vIb = vIb + value.inbound;
                            vR1 = vR1 + value.realvolume1;
                            vR2 = vR2 + value.realvolume2;
                            vR3 = vR3 + value.realvolume3;
                        }
                    });
                    setVolumeView(vIb, vR1, vR2, vR3);

                    selectObj();
                }

                function viewObj(n) {
                    if (n > 0) {
                        var selected = $("#id-tr-viewobj-" + n).hasClass("obj-selected");
                        if (selected) {
                            $("#id-tr-viewobj-" + n).removeClass("obj-selected");
                            gridSelection.splice(gridSelection.indexOf(n), 1);
                        } else {
                            $("#id-tr-viewobj-" + n).addClass("obj-selected");
                            gridSelection.push(n);
                        }
                    } else {
                        $(".tr-viewobj").removeClass("obj-selected");
                        gridSelection = new Array();
                    }
                    var vIb = 0.0;
                    var vR1 = 0.0;
                    var vR2 = 0.0;
                    var vR3 = 0.0;
                    $.each(datahead.pointcloud.records, function (index, value) {
                        if (gridSelection.length == 0 || ($.inArray(value.recid, gridSelection) >= 0)) {
                            vIb = vIb + value.inbound;
                            vR1 = vR1 + value.realvolume1;
                            vR2 = vR2 + value.realvolume2;
                            vR3 = vR3 + value.realvolume3;
                        }
                    });
                    setVolumeView(vIb, vR1, vR2, vR3);
                    selectObj();
                }

                function depObj(n) {
                    palletDlg1();
                }

                function openModal(n) {
                    if (typeof n !== "undefined") {
                        stepN = n;
                    }
                    if (typeof stepN == "undefined" || stepN == 1) {
                        $("#id-step-1").show();
                    } else {
                        $("#id-step-1").hide();
                    }
                    if (stepN == 2) {
                        $("#id-step-2").show();
                        gotoPage(3);
                    } else {
                        $("#id-step-2").hide();                     
                    }
                    if (stepN == 3) {
                        $("#id-step-3").show();
                        gotoPage(4);
                    } else {
                        $("#id-step-3").hide();
                    }
                    $("#id-measure-box").addClass("hidden-element");
                    wizIsOpen = false;
                    if (stepN != 0) {
                        openWizard()
                    }
                }

                function locreset() {
                  /*  var u = document.location.href;
                    if (u.indexOf('?') >= 0) {
                        var p = u.split('?');
                        document.location.href = p[0] + '?step=2';
                    }
                    else {
                        document.location.href = document.location.href + '?step=2';
                    }*/
                    
                    $("#id-awb").val("");
                    $("#id-setting-box").removeClass("hidden-element");
                    $("#id-wiz-btn-confirm").addClass("hidden-element");
                    $("#id-measure-box").addClass("hidden-element");
                    $("#id-spinner-box").addClass("hidden-element");
                    $("#company-flag").css("background-image", "");
                }

                function reset() {

                    if (!busy) {
                        var url = ("{{ path('app_cmd', {'n': 'mycmd','b':'no','c':'no'}) }}").replace('mycmd', 'reset');
                        $.ajax(url)
                                .done(function (v) {
                                })
                                .fail(function (v) {
                                })
                                .always(function () {
                                    window.setTimeout(function () {
                                        locreset();
                                    }, 2000);
                                });
                    }

                }

                function formatDate(date) {
                  var hours = date.getHours();
                  var minutes = date.getMinutes();
                  var month = (date.getMonth() + 1);
                  var day = date.getDate();
                  hours = hours < 10 ? '0' + hours.toString() : hours.toString();
                  minutes = minutes < 10 ? '0' + minutes.toString() : minutes.toString();
                  month = month < 10 ? '0' + month.toString() : month.toString();
                  day = day < 10 ? '0' + day.toString() : day.toString();
                  var strTime = hours + minutes;
                  return date.getFullYear().toString() + month + day + strTime;
                }
                
				function go() {
					var acquire = $("input[name='acquire-type']:checked").val();
					if (acquire == 'B') {
						$('#n-colli').val('');
						var modal = document.querySelector('#id-colli-dlg');
						classie.add(modal, 'md-show');									
					}
					else {
						main_go(1);
					}				
				}
				
                function main_go(ncolli) {
//    $("#id-go").   
                    if (!busy) {
                        busy = true;
                        maxWeightTimeOut = 120;
                        $("#id-awb").attr("placeholder", "wait");
                        $("#id-setting-box").addClass("hidden-element");
                        $("#id-wiz-btn-confirm").addClass("hidden-element");
                        $("#id-measure-box").addClass("hidden-element");
                        $("#id-spinner-box").removeClass("hidden-element");
                        var bc = $('#id-awb').val();
                        /*      if (bc == "") {
                         bc = "--";
                         }*/
                        var url = "";
                        var palletH = $("#id-pallet-info").data("palleth");
                        var palletP = $("#id-pallet-info").data("palletp");
						var palletop = $("#id-pallet-info").data("palletop");
                        if (startuptype == 1) {
                            var d = new Date();
                            var e = formatDate(d);                            
                            url = ("{{ path('app_cmd', {'n': 'mycmd','b':'barcode','c':'pallet'}) }}").replace('mycmd', 'sequence').replace('barcode', 'SETUP' + e + "|0|0|0|0").replace('pallet', (pallettype == 'D') ? 0 : -1);
                        }
                        else {
                            if (parseInt(palletop) == 2) {                          
                                url = ("{{ path('app_cmd', {'n': 'mycmd','b':'barcode','c':'pallet','d':'@@ncolli'}) }}").replace('mycmd', 'sequence').replace('barcode', bc + "|1|" + palletH + "|" + palletP + "|0").replace('pallet', 0).replace('@@ncolli', ncolli);
                            } else {
                                url = ("{{ path('app_cmd', {'n': 'mycmd','b':'barcode','c':'pallet','d':'@@ncolli'}) }}").replace('mycmd', 'sequence').replace('barcode', bc + "|-1|0|0|0").replace('pallet', -1).replace('@@ncolli', ncolli);
                            }
                        }
                        $.ajax(url)
                                .done(function (v) {
                                    busy = true;
                                    //   alert(JSON.stringify(v));
                                })
                                .fail(function (v) {
                                    busy = false;
//          alert(JSON.stringify(v));
                                })
                                .always(function () {
                                    console.log('..... OK');
                                });
                    }
                }

                function closeM(openModalOk, repeate) {
                    if (openModalOk) {
                        openModal(3);
                    }
                    $("#id-wiz-btn-confirm").addClass("hidden-element");
                    $("#id-measure-box").addClass("hidden-element");

                    sessionID = "";
                    datahead = null;
                    setValue("#id-big-awb", '', '', '');
                    $('#company-flag-detail').css('background-image', 'url({{ asset('static/images/bc.png') }})');                    
                    if (!repeate) {
                        $("#id-awb").val("");
                    }
                    $("#id-n-val").html("");
                    $("#id-vol-val").html("");
                    setValueFormat("#id-big-weight", 0, '', '', 2, ',', '.');
                    setValue("#id-big-fiscalid", '', '', '');
                    setValue("#id-big-volumeid", '', '', '');
                    setValue("#id-qty-pack", 0, '', '');
                    setVolumeView(0, 0, 0, 0);
                    $("#id-secam-1").attr("src", seccamurl.replace("pageid", 0).replace("value", 1));
                    $("#id-secam-2").attr("src", seccamurl.replace("pageid", 0).replace("value", 2));
                    $("#id-secam-3").attr("src", seccamurl.replace("pageid", 0).replace("value", 3));
                    $("#id-secam-4").attr("src", seccamurl.replace("pageid", 0).replace("value", 4));
                    $("#id-detail-tab > tbody").empty();
                }
                function deleteM(openModalOk, repeate) {
                    var url = ("{{ path('sess_delete', {'n': 'sessionid'}) }}").replace('sessionid', sessionID);
                    $.ajax(url)
                            .done(function (v) {
                                reset();
                                if (v.err == 0) {
                                    closeM(openModalOk, false);
                                } else {

                                }
                            })
                            .fail(function (er) {
                            })
                            .always(function (msg) {
                            });
                }

                function confirmM(openModalOk) {
                    var url = ("{{ path('sess_confirm', {'n': 'sessionid'}) }}").replace('sessionid', sessionID);
					var acquire = $("input[name='acquire-type']:checked").val();
                    $.ajax(url)
                            .done(function (v) {
								if (acquire == 'M') {
									locreset();
									var modal = document.querySelector('#id-continue-dlg');
									classie.add(modal, 'md-show');									
								}
								else {
									reset();
								}
                                if (v.err == 0) {
                                    closeM(openModalOk, false);
                                } else {

                                }
                            })
                            .fail(function (er) {
                            })
                            .always(function () {
                            });
                }



                function errMessage(id, defaultcolor) {
                    var msgObj = null;
                    var title = "???";
                    var body = "???";
                    var colorclass = (typeof defaultcolor === "undefined") ? "md-green" : defaultcolor;
                    var oldcolorclass = $('#id-wizard').attr("data-color-class");
                    $('#id-wizard').removeClass(oldcolorclass);
                    for (c = 0; c < alertMsgAll.length; ++c) {
                        if (alertMsgAll[c].id == id) {
                            msgObj = alertMsgAll[c];
                            break;
                        }
                    }
                    if (msgObj != null) {
                        title = msgObj.title;
                        body = msgObj.body;
                        colorclass = msgObj.modal.color; 
                    }
                    $('#id-wizard').attr("data-color-class", colorclass);
                    $('#id-wizard').removeClass("modal-big");
                    $('#id-wizard').removeClass("md-blue");
                    $('#id-wizard').addClass(colorclass);
                    $('.class-step').addClass("hidden-element");
                    $('.class-step-header').addClass("hidden-element");
                    $('.class-pallet-dlg').addClass("hidden-element");
                    $('.class-dlg').removeClass("hidden-element");
                    $(".dlg-title").html(title);
                    $(".dlg-body").html(body);
                    $(".dlg-bobtn").html();
                    if (!wizIsOpen) {
                        classie.add(modalWizard, 'md-show');
                    }
                }
                function closeMessage() {
                    var colorclass = $('#id-wizard').attr("data-color-class");
                    if (messageQueue.length > 0) {
                        var msg = messageQueue.shift();
                        errMessage(msg.id);
                    } else {
                        if (!wizIsOpen) {
                            classie.remove(modalWizard, 'md-show');
                        }
                        $('#id-wizard').addClass("modal-big");
                        $('#id-wizard').addClass("md-blue");
                        $('#id-wizard').removeClass(colorclass);
                        $('.class-step').removeClass("hidden-element");
                        $('.class-step-header').removeClass("hidden-element");                        
                        $('.class-dlg').addClass("hidden-element");
                    }
                }

                function palletDlg1() {
//                    $('#id-wizard').removeClass("modal-big");
                    $('.class-step').addClass("hidden-element");
                    $('.class-step-header').addClass("hidden-element");
                    $('.class-pallet-dlg').addClass("hidden-element");
                    $('.class-dlg').addClass("hidden-element");
                    $('.class-pallet-dlg').removeClass("hidden-element");
                    if (machine.length === 0 || typeof machine.altezzapallet === "undefined" || machine.machine === null || typeof machine.machine.altezzapallet === "undefined") {
                        $('#btnAltezza').html("");
                    }
                    else {
                        $('#btnAltezza').html(machine.machine.altezzapallet);
                    }
                    if (machine.length === 0 || typeof machine.machine === "undefined" || machine.machine === null || typeof machine.machine.pesopallet === "undefined") {
                        $('#btnPeso').html("");
                    }
                    else {
                        $('#btnPeso').html(machine.machine.pesopallet);
                    }  
                    
                    
                    
                    if (!wizIsOpen) {
                        classie.add(modalWizard, 'md-show');
                    }
                }

                function closePalletDlg() {
                    if (!wizIsOpen) {
                        classie.remove(modalWizard, 'md-show');
                    }
                    $('.class-step').removeClass("hidden-element");
                    $('.class-step-header').removeClass("hidden-element");                        
                    $('.class-pallet-dlg').addClass("hidden-element");
                    $('.class-dlg').addClass("hidden-element");
                }
                function customPalletVisability(val) {
                    if (val) {
                        $('.disable-label').addClass('form-inactive'); 
                        $('.custom-pallet-data').removeClass('form-inactive')
                    }
                    else {
                        $('.disable-label').removeClass('form-inactive'); 
                        $('.custom-pallet-data').addClass('form-inactive');                        
                    }
                }
                function changePalletEx(id, op) {
                    customPalletVisability(false);
                    $("#id-pallet-dlg li").removeClass("pallet-selected");
                    $("#id-pallet-dlg-li-" + id).addClass("pallet-selected");
                    $('#id-pallet-info').html($("#id-pallet-dlg-li-" + id).data("palletDescription"));
                    $('#id-pallet-info').data("palletbc", $("#id-pallet-dlg-li-" + id).data("palletBc"));
                    $('#id-pallet-info').data("palleth", $("#id-pallet-dlg-li-" + id).data("palletH"));
                    $('#id-pallet-info').data("palletp", $("#id-pallet-dlg-li-" + id).data("palletP"));
					$('#id-pallet-info').data("palletdescr", $("#id-pallet-dlg-li-" + id).data("palletDescription"));
                    $('#id-pallet-info').data("palletop", op);
					switch (op) {
						case 1:
							$('#lbl-pallet-info').html("(" + "{{ 'Assign pallet'|trans }}" + ")");
							break;
						case 2:
							$('#lbl-pallet-info').html("(" + "{{ 'Remove pallet'|trans }}" + ")");
							break;
						default:
							$('#lbl-pallet-info').html("");
							break;
					}					
                    sendPalletInfo($("#id-depallet").checked);
                    closePalletDlg();
                }
                function sendPalletInfo(pp) {
                    ritardoComandi = 4;
                    var codice = $("#id-pallet-info").data("palletbc");                        
                    var h = $("#id-pallet-info").data("palleth");
                    var w = $("#id-pallet-info").data("palletp");                        
                    if (pp) {
                        value = 'D';
                    }
                    else {
                        value = 'S';
                    }
                    $.ajax({
                        url: "{{ path('home_misura') }}",
                        type: "PUT",
                        dataType: 'json',
                        contentType: 'application/json',
                        data: "{\"err\": \"0\",\"tipo\":\"TIPOPALLET\",\"val\":\"" + value + "\",\"codice\":\"" + codice + "\",\"h\":\"" + h + "\",\"w\":\"" + w + "\"}"
                    })
                    .done(function (v) {
                    })
                    .fail(function (v) {
                    })
                    .always(function (v) {
                    }); 
                }
				function next_continue() {
					var modal = document.querySelector('#id-continue-dlg');
					classie.remove(modal, 'md-show');
				}
				function stop_continue() {
					var modal = document.querySelector('#id-continue-dlg');
					classie.remove(modal, 'md-show');
					reset();
				}		
				function cancel_nitems() {
					var modal = document.querySelector('#id-colli-dlg');
					classie.remove(modal, 'md-show');
				}
				function confirm_nitems() {
					var modal = document.querySelector('#id-colli-dlg');
					var ncolli = parseInt($('#n-colli').val());
					if (isNaN(ncolli)) {
						alert("{{ 'Invalid value'|trans }}");
					} else {
						classie.remove(modal, 'md-show');
						
						main_go(ncolli);
					}
				}				
                $(document).ready(function () {   
                    $('.class-pallet-dlg').addClass("hidden-element");
                    $(".acquire-type").on("change", function(e) {
                        ritardoComandi = 4;
                        var value = this.value;
                        $.ajax({
                            url: "{{ path('home_misura') }}",
                            type: "PUT",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: "{\"err\": \"0\",\"tipo\":\"TIPOMISURAZIONE\",\"val\":\"" + value + "\"}"
                        })
                        .done(function (v) {
                        })
                        .fail(function (v) {
                        })
                        .always(function (v) {
                        }); 
                    });
                    $("#id-depallet").on("change", function(e) {
                        sendPalletInfo(this.checked);
                    });
                    $("#id-realvol").on("change", function(e) {
                        ritardoComandi = 4;
                        var value = '';
                        if (this.checked) {
                            value = 'R';
                        }
                        else {
                            value = 'S';
                        }
                        $.ajax({
                            url: "{{ path('home_misura') }}",
                            type: "PUT",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: "{\"err\": \"0\",\"tipo\":\"TIPOVOLUME\",\"val\":\"" + value + "\"}"
                        })
                        .done(function (v) {
                        })
                        .fail(function (v) {
                        })
                        .always(function (v) {
                        }); 
                    });                    
                                                                                                
                    $(".btn-restart-app").on("click", function (e) {
                        $(".btn-restart-app").removeClass("app-ok");
                        $(".btn-restart-app").addClass("app-error");
                        $.ajax(
                                {
                                    url: "{{ path('home_restart') }}",
                                    type: "PUT",
                                    dataType: 'json',
                                    contentType: 'application/json',
                                    data: {"err": "0", "restartapp-cmd": "1"}
                                }
                        )
                        .done(function (v) {
                            //   alert("OK: " + JSON.stringify(v));
                        })
                        .fail(function (v) {
                            //   alert("ERR: " + JSON.stringify(v));
                        })
                        .always(function () {
                            window.setTimeout(function () {
                                locreset();
                            }, 1000);
                        });
                    });
                    $('.ProgressBar--animateNone').bekeyProgressbar({
                        animate: false,
                        animateText: false
                    });

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

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

                    $('.ProgressBar--animateAll').bekeyProgressbar();
                    modalWizard = document.querySelector('#id-wizard');
                    modal3D = document.querySelector('#id-3D-modal');
                    modalMsgRed = document.querySelector('#id-msg-red');

                    if (id > 0) {
                        getData(dataurl);
                    }

                    $('.tile-header .controls .refresh').click(function () {
                        //   getData(dataurl);
                        return false;
                    });

                    $("#btn-settings").off("click", "#btn-settings");
                    $("#btn-settings").click(function (event) {
                        event.preventDefault();
                        gotoPage(3);
                    });
                    $("#btn-repite").off("click", "#btn-repite");
                    $("#btn-repite").click(function (event) {
                        event.preventDefault();
                        deleteM(false, true);
                        gotoPage(4);
                    });
                    $("#btn-verify").off("click", "#btn-verify");
                    $("#btn-verify").click(function (event) {
                        event.preventDefault();
                        dataurl = ("{{ path('app_gdata', {'n': 'pageid'}) }}").replace('pageid', sessionID);
                        getData(dataurl);
                        closeWizard();
                        location.href = ("{{ path('check_detail_page', {'aid': aid, 'id': 0, 'prev': 0, 'next': 0, 'pid':'::SID'}) }}").replace('::SID', sessionID);
                    });

                    $("#btn-ok").off("click", "#btn-ok");
                    $("#btn-ok").click(function (event) {
                        event.preventDefault();
                        confirmM(false);
                    });
                    $("#btn-confirm").off("click", "#btn-confirm");
                    $("#btn-confirm").click(function (event) {
                        event.preventDefault();
                        closeMessage();
                    });
                    $("#btn-cancel").off("click", "#btn-cancel");
                    $("#btn-cancel").click(function (event) {
                        event.preventDefault();
                        closeMessage();
                    });

                    $(".refresh3D").off("click", ".refresh3D");
                    $(".refresh3D").click(function (event) {
                        event.preventDefault();
                        progress3D = 0;
                        window.setTimeout(function () {
                            $("#id-3D h5").html("3D");
                            progress3D = 0;
                            init3DOk = false;
                            getMeshCloud(datahead);
                            getMeshVRML(datahead);
                        }, 1000);
                    });

                    $("form").keypress(function (e) {
                        //Enter key
                        if (e.which == 13) {
                            return false;
                        }
                    });
                    var op = $('#id-pallet-info').data("palletop");
					switch (op) {
						case 1:
							$('#lbl-pallet-info').html("(" + "{{ 'Assign pallet'|trans }}" + ")");
							break;
						case 2:
							$('#lbl-pallet-info').html("(" + "{{ 'Remove pallet'|trans }}" + ")");
							break;
						default:
							$('#lbl-pallet-info').html("");
							break;
					}	
                    openModal();
                    refreshInterval = setInterval(refInterval, 1000);

                })

    </script>
{% endblock %}

{% block footer %}
{% endblock %}