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

{% block body_id 'spedarchive' %}

{#
    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 body %}

    <div class="page-logo">
        <img class="image-logo" src="{{ asset('static/images/LOGO_CONSITECH_300x60.png') }}" alt="consitech">
    </div>
<div id="id-main-info" class="main-info">
    <div class="op-info border-white"><i class="border-white-right fa fa-user"></i><span id="idOp">{{ app.user.username }}</span></div>
    <div class="dt-info border-white "><i class="border-white-right fa fa-calendar"></i><span id="idLuogoData"></span><span id="idOra"></span></div>
    <div class="clear"></div>
</div>



	<button id="dialog-link" class="btn-menu-home ui-button ui-corner-all ui-widget">
        <i class="fa fa-bars"></i>        
	</button>
    <div></div>

<!-- <div id="NW" class="op-page dimh-50 yes-fullscreen load-3d"></div> -->
<div id="NE" class="op-page dimh-100 no-fullscreen overflow-y-scroll">
<div class="fix-dim-y">
<div class="bc-info-container">
    <div class="bc-info-subcontainer">
    <ul>
    <li><i class="fa fa-wifi"></i></li>
    <li><i class="fa fa-barcode"></i></li>
    <li><div id="id-awb-field" class="bc-field">AWB</div></li>
    <li><div id="id-dest-field" class="bc-field">DEST</div></li>
    <li><div id="id-fly-field" class="bc-field">FLY</div></li>
    </ul>
    
    </div>
    <div class="clear"></div>
</div>
<div class="data-container">
    <div class="page-menu-obj page-menu-eye-1">
        <div id="id-table" onclick="javascript:selectInboundType();" class="page-menu-btn no-select">
            <i class="fa fa-table" title="Modality"></i>
        </div>    
        <div id="id-full-view" class="page-menu-btn no-select">
            <i class="fa fa-arrows-alt" title="Full"></i>
        </div>
        <div id="id-eye-view" class="page-menu-btn no-select" onclick="javascript:popup();">  
            <i class="fa fa-eye" title="eye"></i>
        </div>
        <div id="id-show-image" onclick="javascript:showImage();" class="page-menu-btn no-select">
            <i class="fa fa-image" title="Image"></i>
        </div>            					        
        <div id="id-arrow-down" onclick="javascript:viewTop();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-arrow-down" title="Top"></i>
        </div>
        <div id="id-arrow-up" onclick="javascript:viewFront();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-arrow-up gly-rotate-45" title="Front"></i>
        </div>
        <div id="id-arrow-down" onclick="javascript:viewBack();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-arrow-down gly-rotate-45" title="Back"></i>
        </div>
        <div id="id-arrow-left" onclick="javascript:viewLeft();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-arrow-left" title="Left"></i>
        </div>
        <div id="id-arrow-right" onclick="javascript:viewRight();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-arrow-right" title="Right"></i>
        </div>
        <div id="id-cube" onclick="javascript:viewIsometric();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-cube" title="Isometric"></i>
        </div>
        <div id="id-refresh" onclick="javascript:calcola();" class="page-menu-btn no-select choose-display">
            <i class="fa fa-refresh" title="Reload"></i>
        </div>
        <div id="id-arrow-down" onclick="javascript:expande3dMenu(!menu3DDispaly);" class="page-menu-btn no-select chooser-display">
            <i class="fa fa-arrow-circle-down" title="Top"></i>
        </div>
    </div>

    <div class="page-menu-obj page-menu-eye-2">
        <div id="id-table-1" class="page-menu-btn no-select" onclick="javascript:popup2(1);">
            0,1
        </div>    
        <div id="id-table-2" class="page-menu-btn no-select" onclick="javascript:popup2(2);">
            0,2
        </div>
        <div id="id-table-3" class="page-menu-btn no-select" onclick="javascript:popup2(3);">  
            0,4
        </div>
        <div id="id-table-4" class="page-menu-btn no-select" onclick="javascript:popup2(4);">
            0,5
        </div>            					        
        <div id="id-table-5" class="page-menu-btn no-select" onclick="javascript:popup2(5);">
            1,0
        </div>
        <div id="id-table-6" class="page-menu-btn no-select" onclick="javascript:popup2(6);">
            2,0
        </div>
        <div id="id-table-7" class="page-menu-btn no-select" onclick="javascript:popup2(7);">
            5,0
        </div>
        <div id="id-table-8" class="page-menu-btn no-select" onclick="javascript:popup2(8);">
            10
        </div>
    </div>




    <ul>
    <li>
    <div class="block load-3d" id="B3D">
    </div>
    </li>    
    <li>
    <div class="block no-display">

    <div class="block-title">{{ "WEIGHT"|trans }}<div class="um-part">Kg</div><div class="clear-both"></div></div>

    <div class="weight hide">
    <div id="id-weight-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-weight-dec">99</span></div>
    <div class="clear-both"></div>
    </div>

    <div class="weight no-con">
    <div id="id-weight-int-no-con" class="int-part">NO</div>
    <div class="dec-part"><span id="id-weight-dec-no-con">CONNECTION</span></div>
    <div class="clear-both"></div>
    </div>

    </div>
    </li>
    <li>
    <div class="block no-display">
    <div class="block-title">{{ "INBOUND"|trans }}<div class="um-part">m<span class="um-sup-part">3</span></div><div class="clear-both"></div></div>
    <div class="volume">
    <div id="id-inbound-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-inbound-dec">99</span></div>
    <div class="clear-both"></div>
    </div>
    </div>
    </li>
    <li>
    <div class="block no-display">
    <div class="block-title">{{ "REAL VOLUME BLUE"|trans }}<div class="um-part">m<span class="um-sup-part">3</span></div><div class="clear-both"></div></div>
    <div class="volume">
    <div id="id-realvol1-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-realvol1-dec">99</span></div>
    <div class="clear-both"></div>
    </div>
    </li>
    <li>
    <div class="block no-display">
    <div class="block-title">{{ "INBOUND SURFACE"|trans }}<div class="um-part">m<span class="um-sup-part">3</span></div><div class="clear-both"></div></div>
    <div class="volume">
    <div id="id-realvol2-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-realvol2-dec">99</span></div>
    <div class="clear-both"></div>
    </div>
    </li>
    <li>
    <div class="block no-display">
    <div class="block-title">{{ "REAL VOLUME SURFACE"|trans }}<div class="um-part">m<span class="um-sup-part">3</span></div><div class="clear-both"></div></div>
    <div class="volume">
    <div id="id-realvol3-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-realvol3-dec">99</span></div>
    <div class="clear-both"></div>
    </div>
    </li>
    <li>
    <div class="block no-display">
    <div class="block-title">{{ "DIMENSION"|trans }}<div class="um-part">m</div><div class="clear-both"></div></div>
    <div class="linear">
    <div class="label-part">W</div>
    <div id="id-w-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-w-dec">99</span></div>
    <div class="clear-both"></div>

    <div class="label-part">H</div>
    <div id="id-h-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-h-dec">99</span></div>
    <div class="clear-both"></div>
    <div class="label-part">L</div>
    <div id="id-l-int" class="int-part">999</div>
    <div class="dec-part">,<span id="id-l-dec">99</span></div>
    <div class="clear-both"></div>


    </div>


    </div>
    </li>
    <li>
    <div class="block no-display">
    <div class="block-title">{{ "CONMFORM"|trans }}<div class="um-part">&nbsp;<span class="um-sup-part">&nbsp;</span></div><div class="clear-both"></div></div>
    <div class="conform-gauge">
    <canvas id="id-conform-gauge"></canvas>
    <div id="id-conform-gauge-txt"></div>
    </div>
    </li>


    
    </ul>
</div>   
<div class="clear"></div> 
<div id="id-img-gallery" class="img-gallery">
	<a href="{{ asset('static/images/no_image_g.png') }}" data-fancybox="" data-caption="no image">
		<img src="{{ asset('static/images/no_image_p.png') }}" alt="">
	</a>	
	<a href="{{ asset('static/images/no_image_g.png') }}" data-fancybox="" data-caption="no image">
		<img src="{{ asset('static/images/no_image_p.png') }}" alt="">
	</a>		
	<a href="{{ asset('static/images/no_image_g.png') }}" data-fancybox="" data-caption="no image">
		<img src="{{ asset('static/images/no_image_p.png') }}" alt="">
	</a>		
	<a href="{{ asset('static/images/no_image_g.png') }}" data-fancybox="" data-caption="no image">
		<img src="{{ asset('static/images/no_image_p.png') }}" alt="">
	</a>		
</div>
<div class="grid-container">
<div id="grid" class="grid no-display"></div>
<div id="history-grid" class="grid no-display"></div>
</div>


</div>
</div>
<!-- <div id="SW" class="op-page dimh-50 no-fullscreen"></div> -->
<script>
    var id = '{% if app.request.query.get("ID") != "" %}{{ app.request.query.get("ID") }}{% else %}1{% endif %}';
    var pid = '{% if app.request.query.get("P") != "" %}{{ app.request.query.get("P") }}{% else %}N{% endif %}';
    var loadMeshType = 0;
    var datagrid, historygrid;
    var datahead;
    var fulldiv = false;
    var parEYES = false;

    var opts = {
      angle: -0.25,
      lineWidth: 0.2,
      pointer: {
        length: 0.6,
        strokeWidth: 0.05,
        color: '#000000'
      },
      staticZones: [
         {strokeStyle: "#F03E3E", min: 0, max: 200},
         {strokeStyle: "#FFDD00", min: 200, max: 500},
         {strokeStyle: "#30B32D", min: 500, max: 2100},
         {strokeStyle: "#FFDD00", min: 2100, max: 2800},
         {strokeStyle: "#F03E3E", min: 2800, max: 3000}
      ],
      limitMax: false,
      limitMin: false,
      strokeColor: '#E0E0E0',
      highDpiSupport: true
    
    };
    var target = document.getElementById('id-conform-gauge'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    gauge.setTextField(document.getElementById("id-conform-gauge-txt"));
    gauge.maxValue = 3000; // set max gauge value
    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 1; // set animation speed (32 is default value)
    gauge.set(1425); // set actual value


    function gup(name, url, def) {
        if (!url) url = location.href;
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( url );
        return results == null ? def : results[1];
    }

    function removeParam(parameter) {
        var url = document.location.href;
        var urlparts = url.split('?');

        if (urlparts.length>=2) {
            var urlBase=urlparts.shift(); 
            var queryString=urlparts.join("?"); 

            var prefix = encodeURIComponent(parameter)+'=';
            var pars = queryString.split(/[&;]/g);
            for (var i= pars.length; i-->0;)               
                if (pars[i].lastIndexOf(prefix, 0)!==-1)   
                    pars.splice(i, 1);
            url = urlBase + '?' + pars.join('&');
            window.history.pushState('', document.title, url); // added this line to push the new url directly to url bar .
        }
        return url;
    }

    function goto(id) {
        var url = removeParam("ID");
        if (url.indexOf("?") >= 0) {
            if (url.endsWith("?")) {
                url = url + "ID=" + id;                
            }
            else {
                url = url + "&ID=" + id;            
            }
        }
        else {
            url = url + "?ID=" + id;
        }
        document.location.href = url;
    }

    function popup2(p) {
        var url = removeParam("P");
        if (url.indexOf("?") >= 0) {
            if (url.endsWith("?")) {
                url = url + "P=" + p;                
            }
            else {
                url = url + "&P=" + p;            
            }
        }
        else {
            url = url + "?P=" + p;
        }
        document.location.href = url;
    }

    function popup() {
        var url = document.location.href;
        if (url.indexOf("?") >= 0) {
            if (url.endsWith("?")) {
                url = url + "E=YES&P=1";                
            }
            else {
                url = url + "&E=YES&P=1";            
            }
        }
        else {
            url = url + "?E=YES&P=1";
        }

        newwindow = window.open(url,'view','height=768,width=1024');
        if (window.focus) {
            newwindow.focus()
        }
        return false;
    }


/* start three.js */

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

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

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

    var menu3DDispaly = true;

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

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

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

    function selectObj() {
        for(c = 0; c < scene.children.length; ++c) {
            if (typeof scene.children[c].name === "undefined" || (!scene.children[c].name.startsWith("cx_") && !scene.children[c].name.startsWith("pc_") && !scene.children[c].name.startsWith("wr_") && !scene.children[c].name.startsWith("vr_") && !scene.children[c].name.startsWith("yr_") && !scene.children[c].name.startsWith("ib_") && !scene.children[c].name.startsWith("ir_"))) 
            {
                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_"))
                || (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;
        if (gridSelection.length > 0) {
            for(c = 0; c < records.length; ++c) {
                var v = records[c].recid;
                if ($.inArray(v, gridSelection) >= 0) {
                    inbound += parseFloat(records[c].inbound);
                    realvol1 += parseFloat(records[c].realvolume1);
                    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, "realvol1", 2);
            setDirectValue(realvol2, "realvol2", 2);
            setDirectValue(realvol3, "realvol3", 2);
            if (!dimOk) {
                setDirectEmpty("w");
                setDirectEmpty("h");
                setDirectEmpty("l");
            }        
        }
        else {
            setValue(datahead, "inbound", 2);
            setValue(datahead, "realvol1", 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 x1 = parseFloat(o.inboundg.x1);
        var y1 = parseFloat(o.inboundg.y1);
        var z1 = parseFloat(o.inboundg.z1);
        var x2 = parseFloat(o.inboundg.x2);
        var y2 = parseFloat(o.inboundg.y2);
        var z2 = parseFloat(o.inboundg.z2);

        var bx1 = parseFloat(o.inboundrg.x1);
        var by1 = parseFloat(o.inboundrg.y1);
        var bz1 = parseFloat(o.inboundrg.z1);
        var ax1 = parseFloat(o.inboundrg.x2);
        var ay1 = parseFloat(o.inboundrg.y2);
        var az1 = parseFloat(o.inboundrg.z2);
        var bx2 = parseFloat(o.inboundrg.x3);
        var by2 = parseFloat(o.inboundrg.y3);
        var bz2 = parseFloat(o.inboundrg.z3);
        var ax2 = parseFloat(o.inboundrg.x4);
        var ay2 = parseFloat(o.inboundrg.y4);
        var az2 = parseFloat(o.inboundrg.z4);

        var bx3 = parseFloat(o.inboundrg.x5);
        var by3 = parseFloat(o.inboundrg.y5);
        var bz3 = parseFloat(o.inboundrg.z5);
        var ax3 = parseFloat(o.inboundrg.x6);
        var ay3 = parseFloat(o.inboundrg.y6);
        var az3 = parseFloat(o.inboundrg.z6);
        var bx4 = parseFloat(o.inboundrg.x7);
        var by4 = parseFloat(o.inboundrg.y7);
        var bz4 = parseFloat(o.inboundrg.z7);
        var ax4 = parseFloat(o.inboundrg.x8);
        var ay4 = parseFloat(o.inboundrg.y8);
        var az4 = parseFloat(o.inboundrg.z8);


    /*    var dx = x2 - x1;
        var cx = (x2 + x1) / 2;
        var dy = y2 - y1;
        var cy = (y2 + y1) / 2;
        var dz = z2 - z1;
        var cz = (z2 + z1) / 2;

        var geometry = new THREE.BoxBufferGeometry( dx, dy, dz );
        var wireframe = new THREE.WireframeGeometry( geometry );

        var line = new THREE.LineSegments( wireframe );
        line.name = o.inboundg.name;
        line.material.depthTest = false;
        line.material.opacity = 1.00;
        if (line.name == "inboundg") {
            line.material.color = new THREE.Color( 0.6, 0.46, 0.61 );
        }
        else {
            line.material.color = new THREE.Color( 0.16, 0.50, 0.72 );
        }
        line.material.transparent = true;
        line.position.set(cx ,cy, cz);
        scene.add( line );
*/

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

        var geometry = new THREE.Geometry();
        geometry.vertices.push(
            new THREE.Vector3( bx1, by1, bz1 ),
            new THREE.Vector3( bx2, by2, bz1 ),
            new THREE.Vector3( bx3, by3, bz3 ),
            new THREE.Vector3( bx4, by4, bz4 ),
            new THREE.Vector3( bx1, by1, bz1 ),
            new THREE.Vector3( ax1, ay1, az1 ),
            new THREE.Vector3( ax2, ay2, az1 ),
            new THREE.Vector3( ax3, ay3, az3 ),
            new THREE.Vector3( ax4, ay4, az4 ),
            new THREE.Vector3( ax1, ay1, az1 )
        );

        var line2 = new THREE.Line( geometry, material );
        line2.name = o.inboundrg.name;
        scene.add(line2);				


    }


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

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

        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(10, 20, new THREE.Color(0x888888), new THREE.Color(0x888888));
        gridXY.position.set(0.0 ,0.0, 5.0);
        gridXY.rotation.x = Math.PI / 2;
        scene.add(gridXY);	




        var axisHelper = new THREE.AxisHelper( 0.1 );
        scene.add( axisHelper );	
        raycaster = new THREE.Raycaster();
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(SCREEN_WIDTH(), SCREEN_HEIGHT());

        container = document.getElementById("B3D");
        container.appendChild(renderer.domElement);
        controls = new THREE.TrackballControls(perspectiveCamera, container);
        controls.rotateSpeed = 2.0;
        controls.zoomSpeed = 0.3;
        controls.panSpeed = 0.2;
        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);
        onWindowResize();
        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);
            }
        }          
        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.records.length; ++c) {
                processInfo2(datahead.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; 
    }       
    function onDocumentMouseMove( event ) {
        event.preventDefault();
        mouse.x = (event.clientX / SCREEN_WIDTH()) * 2 - 1;
        mouse.y = - (event.clientY / SCREEN_HEIGHT()) * 2 + 1;
    }            

    function animate() {
        requestAnimationFrame(animate);

        raycaster.setFromCamera(mouse, perspectiveCamera);
        var intersects = raycaster.intersectObjects(scene.children);
     //   console.log(intersects.length);


   /*     if ( intersects.length > 0 ) {
            var targetDistance = intersects[ 0 ].distance;  
            for (c = 0; c < intersects.length; ++c) {
                var o = intersects[c].object;
                if (o.name != "") {
                    o.material.color.setHex(Math.random() * 0xffffff);
                    
                    break;
                }
            }  
        } else {
        }*/

/*
				if ( intersects.length > 0 ) {
					if ( INTERSECTED != intersects[ 0 ].object ) {
						if ( INTERSECTED ) INTERSECTED.material.setHex( INTERSECTED.currentHex );
						INTERSECTED = intersects[ 0 ].object;
						INTERSECTED.currentHex = INTERSECTED.material.getHex();
						INTERSECTED.materials.setHex( 0xff0000 );
					}
				} else {
					if ( INTERSECTED ) INTERSECTED.material.setHex( INTERSECTED.currentHex );
					INTERSECTED = null;
				}*/

        controls.update();
        renderer.render(scene, perspectiveCamera);
    }

/* end three.js */
    function expande3dMenu(display) {
        menu3DDispaly = display;
        if (menu3DDispaly) {
            $(".choose-display").show();
            $(".chooser-display i").removeClass("fa-arrow-circle-down");
            $(".chooser-display i").addClass("fa-arrow-circle-up");
        }
        else {
            $(".choose-display").hide();
            $(".chooser-display i").removeClass("fa-arrow-circle-up");
            $(".chooser-display i").addClass("fa-arrow-circle-down");
        }
    }
    function selectInboundType() {
        gridSelectionType++;
        gridSelectionType %= 6;
        selectObj();
    }

    function SetOra() {
        var timeNow = new Date();
        var dd = getISODateTime(timeNow).split('<br />');
        var luogo = '';
        if (luogo != '') {
            luogo = luogo + ', ';
        }
        else {
        }
        if (dd.length == 2) {
            $('#idOra').html(dd[0]);
            $('#idLuogoData').html(luogo + dd[1]);
        }
        else {
            $('#idLuogoData').html('');
            $('#idOra').html('');
        }

    }

    function setValue(val, name, prec) {
        var v = String(val[name]["dec"]);
        while (v.length < prec) {
            v = v + "0";
        }
        $("#id-" + name + "-int").html(val[name]["int"]);
        $("#id-" + name + "-dec").html(v);
    }
    function setDirectValue(val, name, prec) {
        var vali =  Math.floor(val);
        var d1 = ((val + 0.00001) % 1);
        var d2 = Math.round(((val + 0.00001) % 1) * Math.pow(10, prec)) / Math.pow(10, prec);
        var vald = String(d2).replace("0.", "").replace("0,", "");

        while (vald.length < prec) {
            vald = vald + "0";
        }
        $("#id-" + name + "-int").html(vali);
        $("#id-" + name + "-dec").html(vald);
    }
    function setDirectEmpty(name) {
        $("#id-" + name + "-int").html("");
        $("#id-" + name + "-dec").html("");
    }

    function getGrid(id) {
        datagrid.lock('{{ "wait"|trans }}', true);
        $.ajax("{{ path('app_data', {'n': 'value'}) }}".replace("value", id))
        .done(function(v) {
            datahead["records"] = v.records;
            datagrid.clear();
            datagrid.add(v.records);
        })
        .fail(function(v) {
          //  alert( "error" );
        })
        .always(function(v) {
          //  alert( "complete" );
          datagrid.unlock();
        });
        
    }
    function generateTexture() {

        var size = 512;

        // create canvas
        canvas = document.createElement( 'canvas' );
        canvas.width = size;
        canvas.height = size;

        // get context
        var context = canvas.getContext( '2d' );

        // draw gradient
        context.rect( 0, 0, size, size );
        var gradient = context.createLinearGradient( 0, 0, size, size );
        gradient.addColorStop(0, '#99ddff'); // light blue 
        gradient.addColorStop(1, 'transparent'); // dark blue
        context.fillStyle = gradient;
        context.fill();

        return canvas;

    }
    function uuidv4() {
        return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
        )
    }        
    function getMesh() {
        if (pid == 'N') {
            if (loadMeshType == 2) {
                datahead["mesh"] = new Array();
                datahead["convex"] = new Array();
                var loader = new THREE.PCDLoader();
                var count;
                var baseurl = "{{ path('app_datapcl', {'i': 'pageid', 'n': 'value'}) }}";
                for (count = 0; count < datahead.pointcloud.length; ++count) {
                    var pclid = datahead.pointcloud[count][0];
                    var pcln = datahead.pointcloud[count][1];
                    url = baseurl.replace("value", pclid).replace("pageid", id);
                    loader.load(url, "pc_" + pcln, 
                        function (name, mesh) {
                            mesh.name = name;
                            mesh.material.size = 0.01;
                            mesh.material.color.setHex( 0xFFFFFF );
                            {
                                var p = mesh.geometry.attributes.position.array;
                                var aa = new Array();
                                for (c1 = 0; c1 < p.length; c1 += 3) {
                                    if (!isNaN(p[c1]) && !isNaN(p[c1 + 1]) && !isNaN(p[c1 + 2])) {
                                        aa.push(new THREE.Vector3(p[c1], p[c1 + 1], p[c1 + 2]));
                                    } 
                                }
                                var geometry2 = new THREE.ConvexGeometry(aa);
                                var material2 = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
                                var convex = new THREE.Mesh( geometry2, material2 );
                                convex.name = mesh.name.replace("pc_", "cx_");
                                datahead["convex"].push(convex);
                            }
                            datahead["mesh"].push(mesh);
                            if (datahead["mesh"].length == datahead.pointcloud.length) {
                                $("#B3D").removeClass("load-3d");
                                $(".page-menu-eye-" + ((parEYES == true) ? "2" : "1")).show();                        
                                init();
                                animate();
                            }
                        }, 
                        function (progress) {
                        }, 
                        function (err) {
                            $("#B3D").removeClass("load-3d");
                            console.log('Error');
                        }, 
                        function (compressdata) {
                            return JXG.decompress(compressdata); 
                        } 
                    );
                }
            }

            if (loadMeshType == 1) {
                datahead["meshvrml"] = new Array();
                var loader = new THREE.VRMLLoader();
                var count;
                var baseurl = "{{ path('app_datavrml', {'i': 'pageid', 'n': 'value'}) }}";
                for (count = 0; count < datahead.pointcloud.length; ++count) {
                    var pclid = datahead.pointcloud[count][0];
                    var pcln = datahead.pointcloud[count][1];
                    var nvrml = 0;
                    url = baseurl.replace("value", pclid).replace("pageid", id);
                    loader.load(url, "_" + pcln,
                        function (mesh) {
                            for (var c = 0; c < mesh.length; ++c) {
                                datahead["meshvrml"].push(mesh[c]);  
                            }
                            nvrml++;                            
                            if (nvrml == datahead.pointcloud.length) {
                                loadMeshType = 2;
                                getMesh();
                            }
                        }, 
                        function (progress) {
                        }, 
                        function (err) {
                            console.log('Error');
                        },
                        function (compressdata) {
                            return JXG.decompress(compressdata); 
                        }       
                    );
                }

            }




        }
        else {
            datahead["mesh"] = new Array();
            datahead["convex"] = new Array();
            datahead["meshvrml"] = new Array();
            var loader = new THREE.VTKLoader();
            var baseurl = "{{ path('app_datavtk', {'i': 'pageid', 'n': 'value', 'r': 'rvalue'}) }}";
            for (count = 0; count < datahead.pointcloud.length; ++count) {
                var pclid = datahead.pointcloud[count][0];
                url = baseurl.replace("rvalue", pid).replace("pageid", id).replace("value", pclid);
                var material = new THREE.MeshLambertMaterial( { color: 0xff000000, side: THREE.DoubleSide } );
                loader.load(url, 
                    function (geometry) {
                     //   geometry.center();
                        geometry.computeVertexNormals();
                        var texture = new THREE.Texture( generateTexture() );
                        var tx = new THREE.MeshBasicMaterial( { map: texture, transparent: true } );
                        var material = new THREE.MeshLambertMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
                        var mesh = new THREE.Mesh( geometry, material );
                      //  mesh.position.set(0, 0, 3.5);
                    //	mesh.scale.multiplyScalar( 0.2 );
                      //  mesh.name = "vtk";
                        datahead["mesh"].push(mesh);
                        if (datahead["mesh"].length == datahead.pointcloud.length) {
                            $("#B3D").removeClass("load-3d");
                            $(".page-menu-eye-" + ((parEYES == true) ? "2" : "1")).show();                        
                            init();
                            animate();
                        }                        
                    } 
                );
            }
        }
    }

    function getData() {
        var url = ("{{ path('app_gdata', {'n': 'pageid'}) }}").replace('pageid', id);
        $("#B3D").addClass("load-3d");
        $(".page-menu-obj").hide();
        $.ajax(url)
        .done(function(v) {
            datahead = v;
            $("#id-awb-field").html(v.awb);
            $("#id-dest-field").html(v.dest);
            $("#id-fly-field").html(v.fly);

            setValue(datahead, "inbound", 2);
            setValue(datahead, "realvol1", 2);
            setValue(datahead, "realvol2", 2);
            setValue(datahead, "realvol3", 2);
            setValue(datahead, "w", 3);
            setValue(datahead, "h", 3);
            setValue(datahead, "l", 3);
            getGrid(datahead.ID);
            loadMeshType = 1;
            getMesh();
        })
        .fail(function(err) {
            $("#B3D").removeClass("load-3d");
          //  alert( "error" );
        })
        .always(function(v) {
          //  alert( "complete" );
        });

        url = "{{ path('app_sped') }}";
        $.ajax(url)
        .done(function(v) {
            historygrid.clear();
            historygrid.add(v.records);
        })
        .fail(function(err) {
            $("#B3D").removeClass("load-3d");
          //  alert( "error" );
        })
        .always(function(v) {
          //  alert( "complete" );
        });
        
    }




    $(function() {
        parEYES = (document.location.href.indexOf("E=YES") >= 0);
        var fulldiv = parEYES;
        var showimage = false;
        $('#id-full-view').removeClass("no-select select");
        if (fulldiv) {
            $('#id-full-view').addClass("select");
            $('#B3D').addClass("fullscreen");
            $(".fix-dim-y").addClass("fullscreen");
            $("#id-main-info").addClass("fullscreen");
            $(".no-display").addClass("no-display-ok");            
            expande3dMenu(true);
        }
        else {
            $('#id-full-view').addClass("no-select");
            $('#B3D').removeClass("fullscreen");
            $(".fix-dim-y").removeClass("fullscreen");
            $("#id-main-info").removeClass("fullscreen");
            $(".no-display").removeClass("no-display-ok");            
            expande3dMenu(false);                
        }      

        if (parEYES == true) {
            $(".page-menu-eye-1").hide();
            $("#dialog-link").hide();
            $(".page-menu-eye-2").show();
        }
        SetOra();
        expande3dMenu(false);        
        setInterval(SetOra, 1000);

        $("[data-fancybox]").fancybox({
              clickContent    : false
            , animationEffect : false
            // Options will go here
        });
        
        $("#dialog button").each(
            function(index, element) {
                var v = index % 2;
                if (v == 0) {
                    $(this).addClass("btn-menu-page-l");
                }
                else {
                    $(this).addClass("btn-menu-page-r");
                }
            }
        )
        $( "#dialog" ).dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            closeOnEscape: true,
            modal: true
        });
        $( "#dialog-link" ).click(function( event ) {
            $( "#dialog" ).dialog( "open" );
            event.preventDefault();
        });            
        $( "#menu-exit" ).click(function( event ) {
            $( "#dialog" ).dialog( "close" );
            event.preventDefault();
        });            
        $( "#menu-logout" ).click(function( event ) {
            location.href = "{{ path('security_logout') }}";
            event.preventDefault();
        });            
        {% if is_granted('ROLE_ADMIN') %}
            $( "#menu-setting" ).click(function( event ) {
                location.href = "{{ path('blog_index') }}";
                event.preventDefault();
            });            
        {% endif %}
        {% if is_granted('ROLE_ADMIN') %}
            $( "#menu-import" ).click(function( event ) {
                location.href = "{{ path('admin_import_cloud') }}";
                event.preventDefault();
            });            
        {% endif %}
        $( "#id-full-view" ).click(function( event ) {
            fulldiv = !fulldiv;
            $('#id-full-view').removeClass("no-select select");
            if (fulldiv) {
                $('#id-full-view').addClass("select");
                $('#B3D').addClass("fullscreen");
                $(".fix-dim-y").addClass("fullscreen");
                $("#id-main-info").addClass("fullscreen");
                expande3dMenu(true);
            }
            else {
                $('#id-full-view').addClass("no-select");
                $('#B3D').removeClass("fullscreen");
                $(".fix-dim-y").removeClass("fullscreen");
                $("#id-main-info").removeClass("fullscreen");
                expande3dMenu(false);                
            }      
            onWindowResize();          
            event.preventDefault();
        }); 
        $( "#id-show-image" ).click(function( event ) {
            showimage = !showimage;
            $('#id-show-image').removeClass("no-select select");
            if (showimage) {
                $('#id-show-image').addClass("select");
                $('#id-img-gallery').show();
            }
            else {
                $('#id-show-image').addClass("no-select");
                $('#id-img-gallery').hide();
            }      
            event.preventDefault();
        }); 


    
        $('#history-grid').w2grid({ 
            name: 'historygrid', 
            show: { lineNumbers: true },
            fixedBody: false,
            multiSelect : false,
            method: 'GET', // need this to avoid 412 error on Safari
            show: {
                header          : true,
                toolbar         : true,
                footer          : true
            },   

            onClick: function(event) {
                if (event.column == 2) {

                }
            },
            columns: [                
                { field: "ID", caption: "ID", size: "5%" },
                { field: "pz", caption: "{{ 'pz'|trans }}", size: "25%" },
                { field: "awb", caption: "{{ 'AWB'|trans }}", size: "25%" },
                { field: "dest", caption: "{{ 'Destination'|trans }}", size: "15%" },
                { field: "fly", caption: "{{ 'FLY N.'|trans }}", size: "15%" },
                { field: "pallet", caption: "{{ 'Pallet N.'|trans }}", size: "15%" },
                { field: "type", caption: "{{ 'Type'|trans }}", size: "15%" },
                { field: "weight", caption: "{{ 'Weight (Kg)'|trans }}", size: "15%" },
                { field: "inbound", caption: "{{ 'Volume (IB)'|trans }}", size: "15%" },
                { field: "date", caption: "{{ 'Date'|trans }}", size: "15%" }
            ]
        }); 
        $('#grid').w2grid({ 
            name: 'datagrid', 
            show: { lineNumbers: true },
            fixedBody: false,
            method: 'GET', // need this to avoid 412 error on Safari
            show: {
                header          : true,
                footer          : true,
                selectColumn    : true
            },   
            onSelect: function (event) {
                event.onComplete = function () {
                    gridSelection = this.getSelection();
                    selectObj();
                    getSelVol(this.records);
                }
            },
            onUnselect: function (event) {
                event.onComplete = function () {
                    gridSelection = this.getSelection();
                    selectObj();
                    getSelVol(this.records);
                }
            },
            columns: [                
                { field: "n", caption: "N", size: "5%" },
                { field: "inbound", caption: "{{ 'Inbound'|trans }}", size: "25%", render: "float:2" },
                { field: "realvolume1", caption: "{{ 'Real Volume'|trans }}", size: "25%", render: "float:2" },
                { field: "realvolume2", caption: "{{ 'Inbound Surface'|trans }}", size: "25%", render: "float:2" },
                { field: "realvolume3", caption: "{{ 'Real Volume Surface'|trans }}", size: "25%", render: "float:2" },
                { field: "w", caption: "W", size: "15%", render: "float:3" },
                { field: "h", caption: "H", size: "15%", render: "float:3" },
                { field: "l", caption: "L", size: "15%", render: "float:3" }
            ]
        }); 
        datagrid = w2ui['datagrid'];    
        historygrid = w2ui['historygrid'];    
        getData();



    });
    



</script>
<div id="dialog" title="">
	<button id="manu-cruscotto" class="btn-menu-page ui-button ui-corner-all ui-widget">
        <i class="fa fa-desktop"></i>        
	</button>
	<button id="menu-info" class="btn-menu-page ui-button ui-corner-all ui-widget">
        <i class="fa fa-info"></i>        
	</button>
	<button id="menu-stat" class="btn-menu-page ui-button ui-corner-all ui-widget">
        <i class="fa fa-area-chart"></i>        
	</button>
    {% if is_granted('ROLE_ADMIN') %}    
        <button id="menu-setting" class="btn-menu-page ui-button ui-corner-all ui-widget">
            <i class="fa fa-cogs"></i>        
        </button>
    {% endif %}    
	<button id="menu-logout" class="btn-menu-page ui-button ui-corner-all ui-widget">
        <i class="fa fa-sign-out"></i><br /><span class="menu-txt">{{ 'menu.logout'|trans }}</span>       
	</button>
	<button id="menu-exit" class="btn-menu-page ui-button ui-corner-all ui-widget">
        <i class="fa fa-close"></i><br /><span class="menu-txt">{{ 'menu.close'|trans }}</span>       
	</button>
    {% if is_granted('ROLE_ADMIN') %}    
        <button id="menu-import" class="btn-menu-page ui-button ui-corner-all ui-widget">
            <i class="fa fa-file"></i><br /><span class="menu-txt">{{ 'menu.import'|trans }}</span>        
        </button>
    {% endif %}    
</div>    
{% endblock %}
{% block footer %}
{% endblock %}