{% extends 'base.html.twig' %}
{% block body_id 'configuratore' %}

    {% block title %}{{ 'Configurator'|trans }}{% endblock %}

    {% block body %}
                <script>
                    function confirmdel(v) {
                        if (confirm("{{ 'Confirm deletion!'|trans }}")) {
                            document.location.href = v;
                        }
                    }



                    /* Write JavaScript here */




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

 




        <div class="mm-page configuratore">
            <div id="wrap">

                <div class="row">

                    <div id="content" class="col-md-12">

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




                            <section class="tile transparent" id="id-search-block" style="margin-top: 55px;">
                                <!-- tile widget -->
                                <div class="tile-widget color transparent-black rounded-top-corners">
                                    <div class="block-menu-filter menu-start">
                                        <div class="btn-group btn-w100" style="padding-right: 20px; width: unset; display: inline-block;">
                                            <a href="{{ path('management_pannel_page') }}">
                                                <h1>
                                                    <i class="fa fa-briefcase"></i>
                                                    {{ 'Management'|trans }}
                                                </h1>
                                            </a>
                                        </div>

                                    </div>
                                    <div class="block-menu-filter menu-center">
                                        <div class="btn-group btn-w100">
                                        </div>
                                    </div>
                                    <div class="block-menu-filter menu-end">
                                        <div class="btn-group">
                                            <a class="on-close-btn" href="javascript:window.history.back();" title="Back"><div class="user-close"><i class="fas fa-chevron-circle-left"></i></div></a>
                                        </div>
                                    </div>
                                </div>

                            </section>
                        </div>                     
                        <div class="main">        



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





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



                                        <section id="search-result" class="tile transparent">

                                            <div class="{{ msgclass|raw }}">
                                                {{ msg|raw }}
                                            </div>

                                        </section>

                                        <section class="tile transparent col-md-5" id="selected-items-list">
                                            <div class="tile-header color transparent-black rounded-corners">
                                                <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>
                                            <div class="tile-body color rounded-corners box-2D">
                                                <div class="table-responsive">
                                                    <canvas id="c" width="600" height="500"></canvas>
                                                </div>
                                            </div>
                                        </section>                                    


                                        <section class="tile transparent col-md-5" id="selected-items-list">
                                            <div class="tile-header color transparent-black rounded-corners">
                                                <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>
                                            <div class="tile-body color transparent-black rounded-corners box-3D">
                                                <div class="table-responsive">
                                                </div>
                                            </div>
                                        </section>                                    

                                        <section class="tile transparent col-md-2" id="selected-items-list">
                                            <div class="tile-header color transparent-black rounded-corners">
                                                <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>
                                            <div class="tile-body color transparent-black rounded-corners box-layer">
                                                <div class="table-responsive">
                                                </div>
                                            </div>
                                        </section>                                    
                                        <section class="tile transparent col-md-12" id="selected-items-list">
                                            <div class="tile-header color transparent-black rounded-corners">
                                                <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>
                                            <div class="tile-body color transparent-black rounded-corners">
                                                <div class="table-responsive">
                                                    <table class="table table-datatable table-custom tabella-pesata no-row-select" id="id-tabella-pesata">
                                                        <!--end - Advanced table TOP-->
                                                        <thead>
                                                            <tr>
                                                                <th width="80" class="sort-alpha identify-detail" style="width: 5%; text-align:center;"><h3>{{ 'ID'|trans }}</h3></th>
                                                                <th width="80" class="sort-alpha identify-detail" style="width: 10%;text-align: center;"><h3>{{ 'Item'|trans }}</h3></th>
                                                                <th width="80" class="sort-alpha identify-detail" style="width: 20%; text-align: center;"><h3>{{ 'Date'|trans }}</h3></th>
                                                                <th width="80" class="sort-alpha" style="min-width: 10%; text-align: center;"><h3>[Kg]<br><br>{{ 'Weight'|trans }}</h3></th>
                                                                <th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;"><h3>[Mc]<br><br>{{ 'Volume'|trans }}</h3></th>
                                                                <th width="80" class="sort-numeric" style="min-width: 10%; text-align: center;"><h3>[M]<br><br>{{ 'H'|trans }}</h3></th>
                                                                <th width="80" class="sort-numeric" style="min-width: 10%;text-align: center;"><h3>[M]<br><br>{{ 'W'|trans }}</h3></th>
                                                                <th width="80" class="sort-numeric" style="min-width: 10%;text-align: center;"><h3>[M]<br><br>{{ 'L'|trans }}</h3></th>
<!--                                                                <th width="50" class="text-center" style="min-width: 7%; text-align: center;"><br></th> -->
                                                                <th width="50" class="text-center" style="min-width: 7%; text-align: center;"><br></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {% for riga in elenco %}
                                                                <tr>
                                                                    <td width="80" class="sort-alpha identify-detail" style="width: 5%;text-align: center;"><h3>{{ riga.cid }}</h3></td>
                                                                    <td width="80" class="sort-alpha identify-detail {% if riga.ID is null %}bg-red{% else %}bg-green{% endif %}" style="width: 10%;text-align: center;"><h3>{{ riga.cobj_code }}</h3></td>
                                                                    <td width="80" class="sort-alpha identify-detail" style="width: 20%; text-align: center;"><h3>{{ riga.Data|localizeddate }}</h3></td>
                                                                    <td width="80" class="sort-alpha" style="min-width: 10%; text-align: center;"><h3>{{ riga.NetWeight|number_format(2, ',', '.') }}</h3></td>
                                                                    <td width="80" class="sort-numeric" style="min-width: 10%; text-align: center;"><h3>{{ riga.Volume|number_format(2, ',', '.') }}</h3></td>
                                                                    <td width="80" class="sort-numeric" style="min-width: 10%; text-align: center;"><h3>{{ riga.HPackage|number_format(2, ',', '.') }}</h3></td>
                                                                    <td width="80" class="sort-numeric" style="min-width: 10%; text-align: center;"><h3>{{ riga.WPackage|number_format(2, ',', '.') }}</h3></td>
                                                                    <td width="80" class="sort-numeric" style="min-width: 10%; text-align: center;"><h3>{{ riga.LPackage|number_format(2, ',', '.') }}</h3></td>
                                                                   <!-- <td width="50" class="text-center" style="min-width: 7%; text-align: center;"><a class="edit" href="{{ path('awbimport_edit', {'op': 'edit','id': riga.ID}) }}"><i class="fa fa-pencil-square-o fa-2x"></i></a><br></td> -->
                                                                    <td width="50" class="text-center" style="min-width: 7%; text-align: center;"><a class="del" href="#" onclick="javascript:confirmdel('{{ path('configuratore_mo', {'op': 'del','code': riga.cid}) }}');"><i class="fa fa-trash fa-2x" style="color: red;"></i></a><br></td>
                                                                </tr>
                                                            {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </section>                                    
                                    </section>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}

    {% block javascripts %}
        {{ parent() }}


        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
        <script>
            $(function () {

                var imgSrc = ''; //http://th09.deviantart.net/fs71/PRE/i/2012/340/7/b/png_bird_by_moonglowlilly-d5n88u2.png';
                var canvas = new fabric.Canvas('c');
                var cv = new fabric.Canvas('cv');


//var svgSrc = "http://fabricjs.com/assets/1.svg";

                // Create a text object. 
                // Does not display it-the canvas doesn't 
                // know about it yet.
                /*       var hi = new fabric.Text('DATA', {
                 left: canvas.getWidth() / 2,
                 top: canvas.getHeight() / 2
                 });
                 
                 var circle = new fabric.Circle({
                 left: 500,
                 top: 400,
                 name: 'ds',
                 radius: 75,
                 fill: 'green',
                 stroke: 'rgba(255,0,0,0.6)',
                 strokeWidth: 15
                 
                 });
                 var recta = new fabric.Rect({
                 width: 125,
                 top: 100,
                 left: 100,
                 height: 125,
                 stroke: 'red',
                 strokeDashArray: [5, 5]
                 });*/
                /*
                 recta.toObject = (function(toObject) {
                 return function() {
                 return fabric.util.object.extend(toObject.call(this), {
                 name: this.name
                 });
                 };
                 })(recta.toObject);
                 
                 */
                function setName(obj, name) {
                    obj.toObject = (function (toObject) {
                        return function () {
                            return fabric.util.object.extend(toObject.call(this), {
                                name: this.name
                            });
                        };
                    })(obj.toObject);
                    obj.name = '' + name;
                }
                //  setName(recta, 'layout');
                //  setName(hi, 'hi');
            {% for riga in elenco %}
                {% if riga.ID is not null %}
                        imgSrc = '{{ path('point_2d', {'id':riga.ID}) }}';
                        fabric.Image.fromURL(imgSrc, function (oImg) {
                            // scale image down, and flip it, before adding it onto canvas
                            oImg.set({left: 0, top: 0, angle: 0});
                            //oImg.scale(1.0).setFlipX(true);
                            canvas.add(oImg);

                        });
                {% endif %}
            {% endfor %}


                    $('#btn').click(function () {
                        var trsvg = canvas.toSVG();
                        var trsvg_cv = cv.toSVG();
                        var canvas_svg = new fabric.Canvas('canvas-svg');
                        $('#svg-tag').html(trsvg);
                        //alert(JSON.stringify(trsvg));    
                        //alert(JSON.stringify(canvas.toDatalessJSON()));
                        var stringa = canvas.toJSON;

                        fabric.loadSVGFromString(trsvg, function (objects, options) {
                            var obj = fabric.util.groupSVGElements(objects, options);
                            canvas_svg.add(obj).centerObject(obj);
                            obj.setCoords();
                            canvas_svg.calcOffset();
                            canvas_svg.renderAll();
                            //alert('sss');  
                        });

                    });
                    // Attach it to the canvas object, then (re)display
                    // the canvas. 
                    /*
                     circle.animate('left', 10, {
                     onChange: canvas.renderAll.bind(canvas),
                     duration: 5000,
                     easing: fabric.util.ease.easeOutBounce
                     });*/
//cv.add(hi);
                    //    canvas.add(circle);
                    //    canvas.add(recta);
//recta.name = 'recta';
//hi.name ='hi';
                    //    canvas.add(hi);
                    //  canvas.add(his); 

                    $('#btn_edit').click(function () {
                        var canvas_ = new fabric.Canvas('canvas');
                        console.log('Click Edit');


//JSON DATA   
                        var json_data = JSON.stringify(canvas.toDatalessJSON());
                        console.log(json_data);
//LOAD JSON DATA

                        canvas_.loadFromJSON(JSON.parse(json_data), function (obj) {
                            canvas_.renderAll();
                            console.log(' this is a callback. invoked when canvas is loaded!xxx ');

                            canvas_.forEachObject(function (obj) {
                                console.log(obj.name);

                                if (obj.name === 'recta') {
                                    obj.set({
                                        left: 100,
                                        top: 200,
                                        height: 700,
                                        width: 700,
                                        scaleX: .35,
                                        scaleY: .35,
                                        lockScalingY: .35
                                    });

                                    canvas_.add(obj);
                                }

                            });


                        });


                        /*
                         canvas_.loadFromJSON(json_data, function() {
                         canvas_.renderAll();
                         });
                         */
                    });
//Load imange from url


                    /**
                     function loadImage(url, callback, context) {
                     if (url) {
                     var img = new Image();
                     // @ignore 
                     img.onload = function () { 
                     callback && callback.call(context, img);
                     img = img.onload = null;
                     };
                     img.src = url;
                     }
                     }
                     
                     var v=document.getElementById("video1");
                     var cv_=document.getElementById("c");
                     ctx=cv_.getContext('2d');
                     v.addEventListener('play', function() {
                     var i=window.setInterval(function(){
                     ctx.drawImage(v,5,5,260,125)},0,0);                                   
                     },false);
                     v.addEventListener('pause',function() {window.clearInterval(i);},false);
                     v.addEventListener('ended',function() {clearInterval(i);},false); 
                     */
                    /* 
                     fabric.Object.prototype.transparentCorners = false;
                     
                     var canvas = this.__canvas = new fabric.Canvas('c', {
                     backgroundColor: '#333',
                     HOVER_CURSOR: 'pointer'
                     });
                     
                     var PolaroidPhoto = fabric.util.createClass(fabric.Object, fabric.Observable, {
                     H_PADDING: 20,
                     V_PADDING: 50,
                     originX: 'center',
                     originY: 'center',
                     initialize: function(src, options) {
                     this.callSuper('initialize', options);
                     this.image = new Image();
                     this.image.src = src;
                     this.image.onload = (function() {
                     this.width = this.image.width;
                     this.height = this.image.height;
                     this.loaded = true;
                     this.setCoords();
                     this.fire('image:loaded');
                     }).bind(this);
                     },
                     _render: function(ctx) {
                     if (this.loaded) {
                     ctx.fillStyle = '#fff';
                     ctx.fillRect(
                     -(this.width / 2) - this.H_PADDING,
                     -(this.height / 2) - this.H_PADDING,
                     this.width + this.H_PADDING * 2,
                     this.height + this.V_PADDING * 2);
                     ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
                     }
                     }
                     });
                     var photo = new PolaroidPhoto('http://fabricjs.com/assets/pug.jpg', {
                     top: 200,
                     left: 200,
                     scaleX: 0.2,
                     scaleY: 0.2
                     });
                     photo.on('image:loaded', canvas.renderAll.bind(canvas));
                     photo.drawBorders = photo.drawCorners = function() { return this };
                     
                     function makeHandler(arg) {
                     return function(e) {
                     if (e.target) {
                     e.target.animate('angle', arg, {
                     duration: 100,
                     onChange: canvas.renderAll.bind(canvas)
                     });
                     }
                     };
                     }
                     canvas.on({
                     'mouse:down': makeHandler('+10'),
                     'mouse:up': makeHandler('-10')
                     });
                     canvas.add(photo);*/


                    /*
                     
                     var LabeledRect = fabric.util.createClass(fabric.Rect, {
                     
                     type: 'labeledRect',
                     
                     initialize: function(options) {
                     options || (options = { });
                     
                     this.callSuper('initialize', options);
                     this.set('label', options.label || '');
                     },
                     
                     toObject: function() {
                     return fabric.util.object.extend(this.callSuper('toObject'), {
                     label: this.get('label')
                     });
                     },
                     
                     _render: function(ctx) {
                     this.callSuper('_render', ctx);
                     
                     ctx.font = '20px Helvetica';
                     ctx.fillStyle = '#333';
                     ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
                     }
                     });
                     var labeledRect = new LabeledRect({
                     width: 100,
                     height: 50,
                     left: 100,
                     top: 100,
                     label: 'test',
                     fill: '#faa'
                     });
                     canvas.add(labeledRect);*/



                });
        </script>


        <script>
                // FAQ toggle
                var faq = document.getElementById('faq');
                var faqbutton = document.getElementById('faqbutton');
                
                var faqvisible = false;
                faqbutton.onclick = function(e){
                    if(!faqvisible){
                        faq.setAttribute('style','display: block');
                    }
                    else{
                        faq.removeAttribute('style');
                    }
                    faqvisible = !faqvisible;
                };
                
                function hideSplash(){
                    var splash = document.getElementById('splash');
                    var svgnest = document.getElementById('svgnest');
                    if(splash){
                        splash.remove();
                    }
                    svgnest.setAttribute('style','display: block');
                }
                
                var demo = document.getElementById('demo');
                var upload = document.getElementById('upload');
                var display = document.getElementById('select');
                
                demo.onclick = function(){
                    try{
                        var svg = window.SvgNest.parsesvg(display.innerHTML);
                        display.innerHTML = '';
                        display.appendChild(svg);
                    }
                    catch(e){
                        message.innerHTML = e;
                        message.className = 'error animated bounce';
                        return;
                    }			
                    
                    hideSplash();
                    message.innerHTML = 'Click on the outline to use as the bin';
                    message.className = 'active animated bounce';
                    
                    attachSvgListeners(svg);
                };
                
                var message = document.getElementById('message');
                
                if(!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect){
                    message.innerHTML = 'Your browser does not have SVG support';
                    message.className = 'error animated bounce';
                }
                
                if (!window.SvgNest) {
                    message.innerHTML = "Couldn't initialize SVGnest";
                    message.className = 'error animated bounce';
                }
                
                if(!window.File || !window.FileReader){
                    message.innerHTML = 'Your browser does not have file upload support';
                    message.className = 'error animated bounce';
                }
                
                if(!window.Worker){
                    message.innerHTML = 'Your browser does not have web worker support';
                    message.className = 'error animated bounce';
                }
                
                // button clicks
                var upload = document.getElementById('upload');
                var start = document.getElementById('start');
                var download = document.getElementById('download');
                var startlabel = document.getElementById('startlabel');
                var fileinput = document.getElementById('fileinput');
                
                var config = document.getElementById('config');
                var configbutton = document.getElementById('configbutton');
                var configsave = document.getElementById('configsave');
                
                var zoomin = document.getElementById('zoominbutton');
                var zoomout = document.getElementById('zoomoutbutton');
                var exit = document.getElementById('exitbutton');
                
                var isworking = false;
                
                start.onclick = function(){
                    if(this.className == 'button start disabled'){
                        return false;
                    }
                    iterations = 0;
                    if(isworking){
                        stopnest();
                    }
                    else{
                        startnest();
                    }
                    
                    display.className = 'disabled';
                    document.getElementById('info_time').setAttribute('style','display: none');
                };
                
                function startnest(){
                    // Once started, don't allow this anymore
                    document.removeEventListener('dragover', FileDragHover, false);
                    document.removeEventListener('dragleave', FileDragHover, false);
                    document.removeEventListener('drop', FileDrop, false);
                    
                    SvgNest.start(progress, renderSvg);
                    startlabel.innerHTML = 'Stop Nest';
                    start.className = 'button spinner';
                    configbutton.className = 'button config disabled';
                    config.className = '';
                    zoomin.className = 'button zoomin disabled';
                    zoomout.className = 'button zoomout disabled';
                    
                    var svg = document.querySelector('#select svg');
                    if(svg){
                        svg.removeAttribute('style');
                    }
                    
                    isworking = true;
                }
                
                function stopnest(){
                    SvgNest.stop();
                    startlabel.innerHTML = 'Start Nest';
                    start.className = 'button start';
                    configbutton.className = 'button config';
                    
                    isworking = false;
                }
                
                // config
                var configvisible = false;
                configbutton.onclick = function(){
                    if(this.className == 'button config disabled'){
                        return false;
                    }
                    if(!configvisible){
                        config.className = 'active';
                        configbutton.className = 'button close';
                    }
                    else{
                        config.className = '';
                        configbutton.className = 'button config';
                    }
                    configvisible = !configvisible;
                    
                    return false;
                }
                
                configsave.onclick = function(){
                    var c = {};
                    var inputs = document.querySelectorAll('#config input');
                    for(var i=0; i<inputs.length; i++){
                        var key = inputs[i].getAttribute('data-config');
                        if(inputs[i].getAttribute('type') == 'text'){
                            c[key] = inputs[i].value;
                        }
                        else if(inputs[i].getAttribute('type') == 'checkbox'){
                            c[key] = inputs[i].checked;
                        }
                    }
                    
                    window.SvgNest.config(c);
                    
                    // new configs will invalidate current nest
                    if(isworking){
                        stopnest();
                    }
                    configvisible = false;
                    config.className = '';
                    return false;
                }
                
                upload.onclick = function(){
                    fileinput.click();
                }
                document.addEventListener('dragover', FileDragHover, false);
                document.addEventListener('dragleave', FileDragHover, false);
                document.addEventListener('drop', FileDrop, false);
                function FileDragHover(e){
                    e.stopPropagation();
                    e.preventDefault();
                    upload.style.backgroundColor = (e.type == "dragover" ? "#d7e9b7" : "");
                }
                function FileDrop(e){
                    e.stopPropagation(); // Make sure not to replace website by file
                    e.preventDefault();
                    handleFile(e.dataTransfer.files[0]);
                }
                
                
                download.onclick = function(){
                    if(download.className == 'button download disabled'){
                        return false;
                    }
                    
                    var bins = document.getElementById('bins');
                    
                    if(bins.children.length == 0){
                        message.innerHTML = 'No SVG to export';
                        message.className = 'error animated bounce';
                        return
                    }
                    
                    var svg;
                    svg = display.querySelector('svg');
                    
                    if(!svg){
                        svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
                    }
                    
                    svg = svg.cloneNode(false);
                    
                    // maintain stroke, fill etc of input
                    if(SvgNest.style){
                        svg.appendChild(SvgNest.style);
                    }
                    
                    var binHeight = parseInt(bins.children[0].getAttribute('height'));
                    
                    for(var i=0; i<bins.children.length; i++){
                        var b = bins.children[i];
                        var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
                        group.setAttribute('transform', 'translate(0 '+binHeight*1.1*i+')');
                        for(var j=0; j<b.children.length; j++){
                            group.appendChild(b.children[j].cloneNode(true));
                        }
                        
                        svg.appendChild(group);
                    }
                    
                    var output;
                    if(typeof XMLSerializer != 'undefined'){
                        output = (new XMLSerializer()).serializeToString(svg);
                    }
                    else{
                        output = svg.outerHTML;
                    }
                    
                    var blob = new Blob([output], {type: "image/svg+xml;charset=utf-8"});
                    saveAs(blob, "SVGnest-output.svg");
                }
                
                var zoomlevel = 1.0;
                
                zoomin.onclick = function(){
                    if(this.className == 'button zoomin disabled'){
                        return false;
                    }
                    zoomlevel *= 1.2;
                    var svg = document.querySelector('#select svg');
                    if(svg){
                        svg.setAttribute('style', 'transform-origin: top left; transform:scale('+zoomlevel+'); -webkit-transform:scale('+zoomlevel+'); -moz-transform:scale('+zoomlevel+'); -ms-transform:scale('+zoomlevel+'); -o-transform:scale('+zoomlevel+');');
                    }
                }
                
                zoomout.onclick = function(){
                    if(this.className == 'button zoomout disabled'){
                        return false;
                    }
                    zoomlevel *= 0.8;
                    if(zoomlevel < 0.02){
                        zoomlevel = 0.02;
                    }
                    var svg = document.querySelector('#select svg');
                    if(svg){
                        svg.setAttribute('style', 'transform-origin: top left; transform:scale('+zoomlevel+'); -webkit-transform:scale('+zoomlevel+'); -moz-transform:scale('+zoomlevel+'); -ms-transform:scale('+zoomlevel+'); -o-transform:scale('+zoomlevel+');');
                    }
                }
                
                exit.onclick = function(){
                    location.reload();
                }
                
                fileinput.onchange = function(e){
                    handleFile(e.target.files[0]);
                }
                
                
                function handleFile(file){
                    if(!file){
                        return;
                    }
    
                    if(!file.type || (file.type.search('svg') < 0 && file.type.search('xml') < 0 &&  file.type.search('text') < 0)){
                        message.innerHTML = 'Only SVG files allowed';
                        message.className = 'error animated bounce';
                        return
                    }
                    
                    var reader = new FileReader();
                    var input = this;
                    reader.onload = function(e) {
                        input.value = null;
                        
                        if(reader.result){
                            try{
                                var svg = window.SvgNest.parsesvg(reader.result);
                                {
                                    var wholeSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                                    // Copy relevant scaling info
                                    wholeSVG.setAttribute('width',svg.getAttribute('width'));
                                    wholeSVG.setAttribute('height',svg.getAttribute('height'));
                                    wholeSVG.setAttribute('viewBox',svg.getAttribute('viewBox'));
                                    var rect = document.createElementNS(wholeSVG.namespaceURI,'rect');
                                    rect.setAttribute('x', wholeSVG.viewBox.baseVal.x);
                                    rect.setAttribute('y', wholeSVG.viewBox.baseVal.x);
                                    rect.setAttribute('width', wholeSVG.viewBox.baseVal.width);
                                    rect.setAttribute('height', wholeSVG.viewBox.baseVal.height);
                                    rect.setAttribute('class', 'fullRect');
                                    wholeSVG.appendChild(rect);
                                }
                                display.innerHTML = '';
                                display.appendChild(wholeSVG); // As a default bin in background
                                display.appendChild(svg);
                            }
                            catch(e){
                                message.innerHTML = e;
                                message.className = 'error animated bounce';
                                return;
                            }					
                            
                            hideSplash();
                            message.innerHTML = 'Click on the outline to use as the bin';
                            message.className = 'active animated bounce';
                            start.className = 'button start disabled';
                            
                            attachSvgListeners(svg);
                            attachSvgListeners(wholeSVG);
                        }
                    }
                    
                    reader.readAsText(file);
                };
                
                function attachSvgListeners(svg){
                    // attach event listeners
                    for(var i=0; i<svg.childNodes.length; i++){
                        var node = svg.childNodes[i];
                        if(node.nodeType == 1){
                            node.onclick = function(){
                                if(display.className == 'disabled'){
                                    return;
                                }
                                var currentbin = document.querySelector('#select .active');
                                if(currentbin){
                                    var className = currentbin.getAttribute('class').replace('active', '').trim();
                                    if(!className)
                                        currentbin.removeAttribute('class');
                                    else
                                        currentbin.setAttribute('class', className);
                                }
                                
                                window.SvgNest.setbin(this);
                                this.setAttribute('class',(this.getAttribute('class') ? this.getAttribute('class')+' ' : '') + 'active');
                                
                                start.className = 'button start animated bounce';
                                message.className = '';
                            }
                        }
                    }
                }
                
                var prevpercent = 0;
                var startTime = null;
                
                function progress(percent){
                    var transition = percent > prevpercent ? '; transition: width 0.1s' : '';
                    document.getElementById('info_progress').setAttribute('style','width: '+Math.round(percent*100)+'% ' + transition);
                    document.getElementById('info').setAttribute('style','display: block');
                    
                    prevpercent = percent;
                    
                    var now = new Date().getTime();
                    if(startTime && now){
                        var diff = now-startTime;
                        // show a time estimate for long-running placements
                        var estimate = (diff/percent)*(1-percent);
                        document.getElementById('info_time').innerHTML = millisecondsToStr(estimate)+' remaining';
                        
                        if(diff > 5000 && percent < 0.3 && percent > 0.02 && estimate > 10000){
                            document.getElementById('info_time').setAttribute('style','display: block');
                        }
                    }
                    
                    if(percent > 0.95 || percent < 0.02){
                        document.getElementById('info_time').setAttribute('style','display: none');
                    }
                    if(percent < 0.02){
                        startTime = new Date().getTime();
                    }
                }
                
                var iterations = 0;
                
                function renderSvg(svglist, efficiency, placed, total){
                    iterations++;
                    document.getElementById('info_iterations').innerHTML = iterations;
                    
                    if(!svglist || svglist.length == 0){
                        return;
                    }
                    var bins = document.getElementById('bins');
                    bins.innerHTML = '';
                    
                    for(var i=0; i<svglist.length; i++){
                        if(svglist.length > 2){
                            svglist[i].setAttribute('class','grid');
                        }
                        bins.appendChild(svglist[i]);
                    }
                    
                    if(efficiency || efficiency === 0){
                        document.getElementById('info_efficiency').innerHTML = Math.round(efficiency*100);
                    }
    
                    document.getElementById('info_placed').innerHTML = placed+'/'+total;
                    
                    document.getElementById('info_placement').setAttribute('style','display: block');
                    display.setAttribute('style','display: none');
                    download.className = 'button download animated bounce';
                }
                
                message.onclick = function(e){
                    this.className='';
                }
                
                function millisecondsToStr (milliseconds) {
                    function numberEnding (number) {
                        return (number > 1) ? 's' : '';
                    }
    
                    var temp = Math.floor(milliseconds / 1000);
                    var years = Math.floor(temp / 31536000);
                    if (years) {
                        return years + ' year' + numberEnding(years);
                    }
                    var days = Math.floor((temp %= 31536000) / 86400);
                    if (days) {
                        return days + ' day' + numberEnding(days);
                    }
                    var hours = Math.floor((temp %= 86400) / 3600);
                    if (hours) {
                        return hours + ' hour' + numberEnding(hours);
                    }
                    var minutes = Math.floor((temp %= 3600) / 60);
                    if (minutes) {
                        return minutes + ' minute' + numberEnding(minutes);
                    }
                    var seconds = temp % 60;
                    if (seconds) {
                        return seconds + ' second' + numberEnding(seconds);
                    }
                    return 'less than a second';
                }
            </script>


    {% endblock %}