/* Were tälking UTF8 */

// GLOBALS

var LOG   = false; //false;  // ENABLE LOGGING
var PRLOG = false; //false;   /** PRICE LOG  - REMOVE COMMENTS **/
var INPUTDELAY = 650; // MilliseconCs
var FLOATDELAY = 1300 // Milliseconds for Float Inputs
var SCONFIG = '';
var PHPCALC = false;   /** ENABLES PHP + JS CALC COMPARE MODE - MUST BE OFF IN LIVE MODE **/
var xhr     = '';

var canvas = new Object();
var bgLayer  = new Object();

var SIGN = { width: 550, height: 300, color:'#000000', bgcolor:'#ffffff', 
              border: 0, 
              borderDistance: 10,
              selectorPadding: 0, 
              selectorCornerSize: 10, 
              selectorBorderColor: '#aaaaaa', 
              selectorCornerColor: '#aaaaaa', 
              selectorCornerStyle: 'circle',
              selectorCornerTransparent: false, 
              selectorSerienText : '#673086',
              scale:'1:1',
              scaleFac:1,
              dimMax:600,
              dimMin:300,
              cutFormColor: 'rgba(220,220,220,1)', //'rgba(241,241,241,1)'
              cornerRadius: 3, // in mmm
              calculateOnUnload: 1,
              cutFormStrokeWidth: 1.5,
              cutFormStrokeColor:'rgba(200,0,0,1)', 
              cutFormStrokeDashWidth: 5,
              fixationDefaultID: 0,
              fixationDefaultDistance: 6.25,
              fixationDefaultDiameter: 4.5,
              fixationDefaultRadius: 2.25, 
              fixationDefaultDistanceEdge: 4, 
            };

var FIXDATA= new Array();

var delay = (function(){
     var timer = 0;
          return function(callback, ms){
          clearTimeout (timer);
          timer = setTimeout(callback, ms);
          };
})();

$.ajaxSetup({ cache: false });


/** ---------------------------------------------------------------------------*/
/** INIT EVENTS                                                                */
/** ---------------------------------------------------------------------------*/

$(document).ready(function() 
{
    SCONFIG = $('#JSCONFIG').val();
 
    fabric.Object.NUM_FRACTION_DIGITS = 17;
    fabric.textureSize = 4096;
    //if (fabric.isWebglSupported()) fabric.textureSize = 65536;
   
    if(document.getElementById('schild')===null)
    {

    }
    else
    {
       canvas = this.__canvas = new fabric.Canvas('schild');

       // CANVAS EVENTS

       canvas.on({
                'object:moving':            function () { updateObjControls('obj_moving')},
                'object:scaling':           function () { updateObjControls('obj_scaling')},
                'object:resizing':          function () { updateObjControls('obj_resizing')},
                'object:rotating':          function () { updateObjControls('obj_rotating')},
                'object:selected':          function () { updateObjControls('obj_selected')},
                'object:modified':          function () { updateObjControls('obj_modified')},

                'selection:created':        function () { updateObjControls('selection:created')},
                'selection:updated':        function () { updateObjControls('selection:updated')},
                'selection:cleared':        function () { updateObjControls('selection:cleared')},
                'before:selection:cleared': hideObjControls,

                'text:editing:entered':     function () { LOG && console.log('Event: text_editing_entered'); },
                'text:editing:exited':      function () { LOG && console.log('Event: text_editing_exited'); },
                'text:selection:changed':   function () { LOG && console.log('Event: text_editing_changed'); },
                'text:changed':             function () 
                                            {
                                                var obj  = canvas.getActiveObject();
                                                var parsedText = filterUCChars(obj.get('text'),$('#textBox').val());
                                                obj.set({'text': parsedText});  //$(this).val()
                                                $('#textBox').val(parsedText); 
                                                
                                                canvas.renderAll();
                                                
                                                //console.log('FRom ITEXT : text changed');

                                                LOG && console.log('Event: text_changed'); 
                                            },

                'mouse:up':                 function() 
                                            { 
                                                var obj  = canvas.getActiveObject();
                                                if(obj) { calculateSign('Event: mouse up',0); }
                                            },

                'after:render': function(){ this.calcOffset();  }
       });

    }
    
    canvas.stateful = false;    // Increases speed (if undone function not needed)
    canvas.selection = false;
    canvas.controlsAboveOverlay = true;
  //canvas.renderOnAddRemove = false; // better?

 // NAV

    $('#sideNav li a').on('click',function() 
    { 
       $("#sideNav li a").each(function() { $(this).removeClass('orange'); $(this).addClass('gray'); });
       $(this).removeClass('gray');
       $(this).addClass('orange');
    });
 
 // DIM

    $('#DIMMODE0').on('click', function() { var dim = $('#DIMSTD').val().split('x'); resizeBack(dim[0],dim[1]); $('#WIDTH').val(dim[0]); $('#HEIGHT').val(dim[1]); });
    $('#DIMMODE1').on('click', function() { resizeBack($('#WIDTH').val(),$('#HEIGHT').val())});

    $('#DIMSTD').change(function() 
    { 
       $("#DIMMODE0").prop("checked", true);

       var dim = $(this).val().split('x'); 
       $('#WIDTH').val(dim[0]); 
       $('#HEIGHT').val(dim[1]); 

       resizeBack(dim[0],dim[1]);
    });

    $('#WIDTH').keyup(function() 
    {  
       obj = canvas.item(0);

       delay(function() { 

             if(checkSignWidthHeight($('#WIDTH').val(),$('#HEIGHT').val())==true)
             {
                $("#DIMMODE1").prop("checked", true); resizeBack($('#WIDTH').val(),$('#HEIGHT').val());
             }
             else
             {
                var dim = $('#DIMSTD').val().split('x'); resizeBack(dim[0],dim[1]);
                $('#WIDTH').val(dim[0]);
             }
       }, FLOATDELAY );
    });

    $('#HEIGHT').keyup(function() 
    {  
       obj = canvas.item(0);

       delay(function() { 

             if(checkSignWidthHeight($('#WIDTH').val(),$('#HEIGHT').val())==true)
             {
                $("#DIMMODE1").prop("checked", true); resizeBack($('#WIDTH').val(),$('#HEIGHT').val());
             }
             else
             {
                var dim = $('#DIMSTD').val().split('x'); resizeBack(dim[0],dim[1]);
                $('#HEIGHT').val(dim[1]);
             }
       }, FLOATDELAY );
    });

 // TEXT

    $('#textFontSelector').on('mousedown', function (e) 
    { 
       e.preventDefault();
       this.blur();
       window.focus();

       $('#textFontList').show();
       $('#textFontListClose').show(); 
    });


    $('#textFontListClose').on('click', function() 
    {
       $('#textFontList').hide();
       $('#textFontListClose').hide();
    });

    $('#textSize').keyup(function() 
    {  
       delay(function() { 

              var obj  = canvas.getActiveObject();

              if(checkTextHeight($('#textSize').val())==true)
              {
                  updateObjFromControls('scaleText');
              }
              else
              {
                  $('#textSize').val($('#objHeight').val());
              }
       }, FLOATDELAY );
    });

    $("#textBox").on('input', function() {

       var obj  = canvas.getActiveObject();

           //var parsedText = filterUCChars($(this).val(),$(this).val());
             var parsedText = filterUCChars($(this).val(),obj.get('text'));
           //    parsedText=parsedText.replace('/\'/',String.fromCharCode(8217));

           obj.set({'text': parsedText});  //$(this).val()
           $(this).val(parsedText); 

           canvas.renderAll();

           //console.log('From INPUT : text changed');
    });

    $('#textSymbols').on('click', function()
    {
       if($('#addSymbolPanel').is(':hidden'))
       { 
              $('#addSymbolPanel').show(); 
              $('#addTextPanel').hide(); 
  
              $(this).removeClass('grad').addClass('gradSelect'); 
              $("#textBox").focus();
       }
       else
       {
              $('#addSymbolPanel').hide(); 
              $('#addTextPanel').show(); 

              $(this).removeClass('gradSelect').addClass('grad'); 
       } 
    });

    $('#symtable td').hover(function()
    {
       var sym = $(this).data('symbol');
       $('.sym').html(sym);

       var desc = $(this).data('desc');
       $('.symdesc').html('<br>'+desc+'<br><br>');
    });
          
    $('#symtable td').on('click', function()
    {
       var sym = $(this).data('symbol');
       var caretPos =document.getElementById("textBox").selectionStart;
       var caretEnd = document.getElementById("textBox").selectionEnd;
       var textAreaTxt = $("#textBox").val();
       var txtToAdd = sym;
       $("#textBox").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring( caretEnd ) );

       var obj  = canvas.getActiveObject();
       obj.set({'text':$('#textBox').val()});
       $('#textBox').focus();

       $('#addSymbolPanel').hide(); 
       $('#textSymbols').removeClass('gradSelect').addClass('grad'); 

       canvas.renderAll();
    });

 // SERIENTEXT

    $('#applySerienText').on('click', function()
    {

    // SEARCH FOR ACTIVE SERIENTEXT OBJECT

       var actObj= new Object;
       var serienTextObject=0;

       for(x=0; x < canvas.getObjects().length; x++)
       {
           obj=canvas.item(x);

           if(obj.mmkLayerType=='layerSerienText') 
           {
              canvas.setActiveObject(obj);
              serienTextObject=1;
              actObj=obj;
              break;
           }          
       }

    // AJAX UPDATE REQUEST

       var zeilen = $('input[name="stFields[]"]').map(function(){ return this.value; }).get();
       var zcheck = '';

       for (var i=0; i<zeilen.length; i++) 
       { 
            zcheck = zcheck + zeilen[i].replace(',',''); 
       } 

       if(zcheck.length==0) { alert('Bitte legen Sie mindestens 1 Entwurf an. Geben Sie dazu einen Text ein'); return false; }

       $.when(calculateSign('#applySerienText event',1)).done(function(ev) {

           $.ajax({ url: 'https://schilderstyle.de/konfigurator/scripts/mmk-io.php',
                type: 'POST',
                cache: true,
                //timeout: 30000,
                //async: false, 
                dataType: "text",
                data: {'com': 'updateTxtMode', stFields: zeilen},
                error: function(em)
                { 
                    //spits error but can't display it
                    //alert(em);
                    //if(URL.length>0) { window.top.location = URL; }
 
                    return true;
                },
                success: function(st) 
                { 
                    if(st.length==0) 
                    {
                       $('#serientext').hide();
                       $('#noSerienText').show(); 
                       $('#TXTMODE').val(0);
                       $('#TXTDATA').val('');
                       $('#TXTMODESIGNS').val(0);
                    }
                    else
                    {
                       $('#serientext').show();  
                       $('#noSerienText').hide(); 

                       if(serienTextObject==0)  // CREATE
                       {  
                          rows = addSerienText(st); 
                          $('#TXTMODE').val(1);
                          $('#TXTDATA').val(st);
                          $('#TXTMODESIGNS').val(rows);
                       }
                       else 
                       { 
                          rows = updateSerienText(st,actObj)
                          $('#TXTMODE').val(1);
                          $('#TXTDATA').val(st);
                          $('#TXTMODESIGNS').val(rows);
                       }

                       rows==1 ? $('#stSignDisplay').text(rows+ ' Entwurf') : $('#stSignDisplay').text(rows+ ' Entw\u00fcrfe');

                       $('#MENGE').val(rows);
                       $('#MENGE').prop('readonly', true); 

                       calculateSign('Event: Click #applySerientext',0);

                    }

                    serienDruckWin.close();

                    return true; 
                }

           });
        });

        return false;
    });

 // BEFESTIGUNGEN / LOCHDURCHMESSER

    $('#fixVertikal1').keyup(function() { delay(function() { checkFixationInput($('#fixVertikal1').val(),'#fixVertikal1',1); setFixation(1); }, FLOATDELAY ); });

    $('#fixHorizontal2').keyup(function() { delay(function() { checkFixationInput($('#fixHorizontal2').val(),'#fixHorizontal2',2); setFixation(2); }, FLOATDELAY ); });
    
    $('#fixHorizontal4').keyup(function() { delay(function() { checkFixationInput($('#fixHorizontal4').val(),'#fixHorizontal4',4); setFixation(4); }, FLOATDELAY ); });
    $('#fixVertikal4').keyup(function() { delay(function() { checkFixationInput($('#fixVertikal4').val(),'#fixVertikal4',4); setFixation(4); }, FLOATDELAY ); }); 
    
    $('#fixDiameter').keyup(function() { delay(function() { checkFixationInput($('#fixDiameter').val(),'#fixDiameter','diameter'); var mode = parseFloat($('#fixEditMode').val()); setFixation(mode); }, FLOATDELAY ); });

    

 // BIND KEY EVENTS
 
    //$('html').bind('keypress', function(e)
    //{
    //  if(e.keyCode == 39)
    //  {
    //     setTimeout(function() {
    //        e.target.value += String.fromCharCode(8217); //'&#8217;';
    //     }, 4);
    //     e.preventDefault(); //return '`'; // replace apostrophe with pseudp char to avoid json bugs;
    //  }
    //});

    $('html').keyup(function(e) 
    { 
       if(e.keyCode == 46) 
       {
          var hasFocus=0;
          $("input").each(function() { if($(this).is(':focus')) { hasFocus=1; }});
          $("textarea").each(function() { if($(this).is(':focus')) { hasFocus=1; }});

          if(hasFocus==0) { removeObj(); }
       }
    });

 // INFOBAR FUNC

    $('#MENGE').keyup(function() 
    {  
       delay(function() { 

             if($('#MENGE').val() >= 1 && $('#MENGE').val() <=99999) {}
             else { $('#MENGE').val(1); }
             calculateSign('Event: Enter #Menge',0);
 
       }, INPUTDELAY );
    });

    var oldStaerke, cEngrave;

    $('#STAERKE').on('click', function() { 
        oldStaerke = $('#STAERKE option:selected').val(); 
    });

    $('#STAERKE').on('change', function() 
    { 
       changeStaerke($('#MATERIALID').val(),$('#STAERKE').val(), oldStaerke);
    });


    $('#ENGRAVEMETHOD').on('change', function() 
    { 
       changeMaterialJS($('#MATERIALID').val(),$('#PRODUCTID').val(),'');
    });

    $('#objWidth').keyup(function() 
    {  
       delay(function() { 

             var obj  = canvas.getActiveObject();

             if(checkObjectWidthHeight($('#objWidth').val(),$('#objHeight').val())==true)
             {
                updateObjFromControls('scaleX');
             }
             else
             {
                $('#objWidth').val(parseFloat(obj.get('width') * obj.get('scaleX') / SIGN.scaleFac).toFixed(1));
                $('#objHeight').val(parseFloat(obj.get('height') * obj.get('scaleY') / SIGN.scaleFac).toFixed(1));
             }
       }, FLOATDELAY );
    });

    $('#objHeight').keyup(function() 
    {  
       delay(function() { 

             var obj  = canvas.getActiveObject();

             if(checkObjectWidthHeight($('#objWidth').val(),$('#objHeight').val())==true)
             {
                updateObjFromControls('scaleY');
             }
             else
             {
                $('#objWidth').val(parseFloat(obj.get('width') * obj.get('scaleX') / SIGN.scaleFac).toFixed(1));
                $('#objHeight').val(parseFloat(obj.get('height') * obj.get('scaleY') / SIGN.scaleFac).toFixed(1));
             }
       }, FLOATDELAY );
    });

    $('#objAngle').keyup(function() 
    {  
       delay(function() { 

              if($('#objAngle').val() >= 0 && $('#objAngle').val() <=359) {}
              else { $('#objAngle').val(0); }
              updateObjFromControls('angle');
 
       }, INPUTDELAY );
    });


 // ANFRAGEN

    $('#applyAnfrage').on('click', function() { createAnfrage(); });


 // BEFOREUNLOAD

   // $(window).on('beforeunload', function(){
      
    // SAVE SIGNS IN TMP
 
    //   if(SIGN.calculateOnUnload==1)
    //   {
    //      if(window.location.href== 'https://schilderstyle.de/konfigurator/2/')
    //      {
    //         $.when(calculateSign('fromUnloadEvent()',2)).done(function(ev) {
    //                //console.log('works');
                    //return true;
    //         });
    //      }
    //   }
  
       //return null;
 //  });

   //console.log('SIGN ON UNLOAD: ' + SIGN.calculateOnUnload);

   $(window).on('unload', function() 
   {
     if(SIGN.calculateOnUnload==1)
     {
        if(window.location.href== 'https://schilderstyle.de/konfigurator/2/')
        {
            calculateSign('fromUnloadEvent()',2);
        }
     }
   });

 // PARSER FOR OLD JSON PATH GROUP

fabric.PathGroup = { };
    fabric.PathGroup.fromObject = function(object, callback) {
      var originalPaths = object.paths;
      delete object.paths;
      if (typeof originalPaths === 'string') {
        fabric.loadSVGFromURL(originalPaths, function (elements) {
          var pathUrl = originalPaths;
          var group = fabric.util.groupSVGElements(elements, object, pathUrl);
          object.paths = originalPaths;
          callback(group);
        });
      }
      else {
        fabric.util.enlivenObjects(originalPaths, function(enlivenedObjects) {
          enlivenedObjects.forEach(function(obj) {
            obj._removeTransformMatrix();
          })
          var group = new fabric.Group(enlivenedObjects, object);
          object.paths = originalPaths;
          callback(group);
        });
      }
    };

});

/** ---------------------------------------------------------------------------*/
/** CHANGE MATERIAL JS (JS ONLY)                                               */
/** ---------------------------------------------------------------------------*/

function changeMaterialJS(matid,prodid,jsondata)
{
 // APPLY NAV

    $("#MATNAVIGATION button").each(function() { $(this).removeClass('orange'); $(this).addClass('gray'); });
    $("#MATNAVID"+matid).removeClass('gray');
    $("#MATNAVID"+matid).addClass('orange');

 // DESELECT ALL
 
    canvas.discardActiveObject();

 // SET SELECTION TO PAGE GROESSE/FORM

    $('#responsiveTabs').responsiveTabs('activate',0);

    var x=0;
    $("#sideNav li a").each(function() 
    {
       if(x!=0) { $(this).removeClass('orange').addClass('gray'); }
       else { $(this).removeClass('gray').addClass('orange'); }
       x++;
    });

 // GET JSON

    var SHIELD = JSON.parse(SCONFIG);

 // GET MATERIAL + PRODUCT

    var MAT  = SHIELD[matid]; 
    var PROD = new Object(); 
 
    $.each(MAT['PRODUCTS'],function(index, value){

           if(value['PID']==prodid) { PROD = MAT['PRODUCTS'][index]; }
    });

    $('#MATERIALID').val(matid);
    $('#MATERIALNAME').val(MAT['MNAME']);
    $('#MATERIALDISPLAY').html(MAT['MNAME']); // For Display in green bar 
        
    $('#PRODUCTID').val(prodid);
    $('#PRODUCTNAME').val(PROD['PNAME']);

    LOG && console.log(MAT);
    LOG && console.log(PROD);

 // ENABLE/DISABLE CUTFORMS

    switch(MAT['MCUTFORM'])
    { 
        case '1': $('#CUTFORMDISPLAY').show(); break;
        default:  $('#CUTFORMDISPLAY').hide();
    }
        
 // RESTORE STAERKE 

    var STAERKE_CUR = $('#STAERKE option:selected').val();
   
    var STAERKE_EXIST=0; var STAERKE_DEF=''; 

    var STAERKE_DIS='';

    $('#STAERKE').empty();

    $.each(MAT['PRODUCTS'],function(index, value) {
              
           if(value['PID']==STAERKE_CUR) { STAERKE_EXIST=1; }
           if(value['PDEFAULT']==1) { STAERKE_DEF = value['PID']; }

           STAERKE_DIS= value['PSTAERKE'].replace('.',',').slice(0,-1);

           $('#STAERKE').append($("<option></option>").attr("value", value['PID']).text(STAERKE_DIS+' mm'));
    });

    if(STAERKE_EXIST==0) { $('#STAERKE option[value="'+STAERKE_DEF+'"]').prop('selected', true); }
    else                 { $('#STAERKE option[value="'+STAERKE_CUR+'"]').prop('selected', true); }

 // RESTORE ENGRAVEMETHOD

    var CURRENTEMID = $('#ENGRAVEMETHOD option:selected').val(); 
    var CURRENTENGRAVEMINFONTSIZE=  $('#ENGRAVEMINFONTSIZE').val();  
    var CURRENTENGRAVEFILLABLE=  $('#ENGRAVEFILLABLE').val();  

    var EMDEFAULT=''; var ENGRAVEMINFONTSIZEDEFAULT=''; var ENGRAVEFILLABLEDEFAULT= ''; var EMIDEXISTS=0;

    $('#ENGRAVEMETHOD').empty();

    $.each(PROD['ENGRAVE_METHODS'],function(index, value) {

        if(value['EMID']==CURRENTEMID) { EMIDEXISTS=1; $('#ENGRAVEMINFONTSIZE').val(value['EMMINFONTSIZE']);  $('#ENGRAVEFILLABLE').val(value['AUSLEGBAR_MF']); }  
        if(value['PEMDEFAULT']==1) { EMDEFAULT = value['EMID']; ENGRAVEMINFONTSIZEDEFAULT= value['EMMINFONTSIZE']; ENGRAVEFILLABLEDEFAULT=value['AUSLEGBAR_MF']; }
        $('#ENGRAVEMETHOD').append($("<option></option>").attr("value", value['EMID']).text(value['EMNAME']));

    });

    if(EMIDEXISTS==0) {  $('#ENGRAVEMETHOD option[value="'+EMDEFAULT+'"]').prop('selected', true); $('#ENGRAVEMINFONTSIZE').val(ENGRAVEMINFONTSIZEDEFAULT); $('#ENGRAVEFILLABLE').val(ENGRAVEFILLABLEDEFAULT);  }
    else              {  $('#ENGRAVEMETHOD option[value="'+CURRENTEMID+'"]').prop('selected', true); }

 // RESTORE FRAESGRAVUREN SETTINGS + COLOR PANEL 

    if($('#ENGRAVEMETHOD option:selected').val()==999)  // NEEDED 3 TO DEAVTICA FRAES
    {
        $('#TOBASKETAREA').hide();
        $('#ORAREA').hide();
        $('#ANFRAGEAREA').show();
        $('#ANFRAGEAREANETTO').show();
        $('#ANFRAGEAREAJS').show();
        $('#wkPrice').hide();
        $('#wkPriceNetto').hide();
        $('#wkPriceJS').hide();
        //$('#JSPRICEAREANETTO').hide(); 
        //$('#JSPRICEAREA').hide();
        $('#anfrageWindow').text('Anfrage stellen');
    }
    else
    {
        $('#TOBASKETAREA').show();
        $('#ORAREA').show();
        $('#ANFRAGEAREA').hide(); 
        $('#ANFRAGEAREANETTO').hide(); 
        $('#ANFRAGEAREAJS').hide(); 
        $('#wkPrice').show();
        $('#wkPriceNetto').show();
        $('#wkPriceJS').show();
        //$('#JSPRICEAREANETTO').show();  
        //$('#JSPRICEAREA').show();
        $('#anfrageWindow').text('Anfrage');
    } 
        
    $('#ENGRAVEFILLABLE').val()==1 ? $('#objFillColorPanel').show() : $('#objFillColorPanel').hide();

 // RESTORE SIGN SIZE // SIGN STD / DIMS

    var CURRENTDIMMODE = $("input[name=DIMMODE]:checked").val(); //$('#DIMMODE').val();
    var CURRENTDIMSTD  = $('#DIMSTD option:selected').val();
    var CURRENTDIMFREE = $('#DIMFREE').val();
    var CURRENTWIDTH   = $('#WIDTH').val();
    var CURRENTHEIGHT  = $('#HEIGHT').val();

    LOG && console.log('CURRENTDIMSTD: '+ CURRENTDIMSTD +', CURRENTDIMMODE: '+ CURRENTDIMMODE+', CURRENTDIMFREE: '+ CURRENTDIMFREE +', CURRENTWIDTH: '+ CURRENTWIDTH +', CURRENTHEIGHT: '+ CURRENTHEIGHT);

 // RESTORE DIM DEFAULTS IF DOESN'T EXISTS

    var SIGNDIMEXISTS=0; var SIGNDIMDEFAULT='';
     
    $('#DIMSTD').empty();

    $.each(MAT['SIGN_DIM'],function(index, value){

        if(CURRENTDIMSTD==value['DIMX']+'x'+value['DIMY']) { SIGNDIMEXISTS=1; }
        if(value['DIMDEFAULT']==1) { SIGNDIMDEFAULT= value['DIMX']+'x'+value['DIMY']; }

        $('#DIMSTD').append($("<option></option>").attr("value", value['DIMX']+'x'+value['DIMY']).text(value['DIMX']+'x'+value['DIMY']+' mm'));

    });

    if(PROD['PDIMFREE']==1)
    {
        if(SIGNDIMEXISTS==0) // && CURRENTDIMMODE==1)
        {

           switch(CURRENTDIMMODE)
           {
              case '1': 
 
                    $("#DIMMODE1").prop("checked", true);

              break;
 
              default:

                    $("#DIMMODE1").prop("checked", true); 
                    var dim =CURRENTDIMSTD.split('x');
                    $('#WIDTH').val(dim[0]);
                    $('#HEIGHT').val(dim[1]);
           }
        }
        else
        {
           switch(CURRENTDIMMODE)
           {
              case '1':

                    $("#DIMMODE1").prop("checked", true); 
                    $('#WIDTH').val(CURRENTWIDTH);
                    $('#HEIGHT').val(CURRENTHEIGHT);
              break;
 
              default:

                    $("#DIMMODE1").prop("checked", true); 
                    $('#WIDTH').val(CURRENTWIDTH);
                    $('#HEIGHT').val(CURRENTHEIGHT);
           }
        }
    }
    else
    {
        $("#DIMMODE0").prop("checked", true);
        $('#DIMSTD option[value="'+SIGNDIMDEFAULT+'"]').prop('selected', true)

        var dim =SIGNDIMDEFAULT.split('x');
        $('#WIDTH').val(dim[0]);
        $('#HEIGHT').val(dim[1])
    }

 // SET DIMFREE SELECTOR
          
    switch(PROD['PDIMFREE'])
    { 
        case '1': $('#DIMFREEDISPLAY').show(); break;
        default:  $('#DIMFREEDISPLAY').hide();
    }

    $('#DIMFREE').val(PROD['PDIMFREE']);

 // DISPLAY MESSAGE FOR RONDEN / OVALE

    switch(PROD['PID'])
    {
        case '15':
        case '16': $('#OVALEDISPLAY').show(); $('#RONDENDISPLAY').hide(); break;
        case '17':
        case '18': $('#RONDENDISPLAY').show(); $('#OVALEDISPLAY').hide(); break;

        default: $('#OVALEDISPLAY').hide(); $('#RONDENDISPLAY').hide();
    }

 // RESTORE SIGN FORMS + BORDER

    var CUR_FORMID     =  $('#FORMID').val();
    var CUR_FORM       =  $('#FORM').val();
    var CUR_FORMDATA   =  $('#FORMDATA').val();
    var CUR_BORDERID   =  $('#BORDERID').val(); 
    var CUR_BORDERDATA =  ''; //$('#BORDERID').val(); 

    var FORMIDEXISTS=0; var FORMID_DEF=''; var FORM_DEF=''; var FORMDATA_DEF=''; var BORDERIDEXISTS=0; var BORDERID_DEF=''; var BORDERDATA_DEF='';

    LOG && console.log('CUR_FORMID: '+ CUR_FORMID +', CUR_FORM: '+ CUR_FORM+', CUR_FORMDATA: '+ CUR_FORMDATA +', CUR_BORDERID: '+ CUR_BORDERID);

 // FORMS


    if($('#formSelector').data('carousel')!='nocarousel') { var ffloat=""; }
    else { var ffloat=" style='float:left;'"; }


    $('#SLIDERFORMS').empty();

    $.each(PROD['SIGN_FORMS'],function(index, value)
    {
        if(value['SFDEFAULT']==1)
        {
           FORMID_DEF   = value['SFID'];
           FORM_DEF     = value['SFNAME'];
           FORMDATA_DEF = value['SFDATA'];
        }

        if(value['SFID']==CUR_FORMID) { FORMIDEXISTS=1; }

        $('#SLIDERFORMS').append("<li class='clipNav'"+ffloat+"><button type='button' class='apbutton large_btsize sforms grad' onclick='createBackgroundArea(\""+value['SFNAME']+"\",\""+value['SFDATA']+"\",\""+value['SFID']+"\",\"\",\"\",1)' id='sform"+ value['SFID']+"'> <img src='../xkonf/forms/"+value['SFFILE']+"' class='large_funcicon' alt=''></button><div class='sm'>"+ value['SFNAME'] +"</div></li>\n");

    });

    if(FORMIDEXISTS==0) { $('#FORMID').val(FORMID_DEF); $('#FORM').val(FORM_DEF); $('#FORMDATA').val(FORMDATA_DEF); }
    else                { $('#FORMID').val(CUR_FORMID); $('#FORM').val(CUR_FORM); $('#FORMDATA').val(CUR_FORMDATA); }

    if($('#formSelector').data('carousel')!='nocarousel')
    { initJCarousel('forms'); }

 // BORDERS

    $('#SLIDERBORDERS').empty(); 

    $.each(PROD['SIGN_BORDERS'],function(index, value)
    {
        if(value['SBDEFAULT']==1)
        {
            BORDERID_DEF=value['SBID'];
            BORDERDATA_DEF=value['SBDATA'];
        }

        if(value['SBID']==CUR_BORDERID) { BORDERIDEXISTS=1; }

        $('#SLIDERBORDERS').append("<li class='clipNav' id=\"sborderListItem"+value['SBID']+"\"><button type='button' class='apbutton large_btsize sborders grad' onclick='createBorder(\""+value['SBDATA']+"\",\""+value['SBID']+"\")' id='sborder"+ value['SBID']+"'> <img src='../xkonf/borders/"+value['SBFILE']+"' class='large_funcicon' alt=''></button><div class='sm'>"+ value['SBNAME'] +"</div></li>\n");
    });

    if(BORDERIDEXISTS==0) { $('#BORDERID').val(BORDERID_DEF); $('#BORDERDATA').val(BORDERDATA_DEF); }
    else                  { $('#BORDERID').val(CUR_BORDERID); $('#BORDERDATA').val(CUR_BORDERDATA); }

    initJCarousel('borders'); 

 // RESTORE COLORS

/** NEW RESTORE **/

    var CUR_COLORID      = $('#COLORID').val();
    var CUR_COLORNAME    = $('#COLORNAME').val();
    var CUR_COLORGROUPID = $('#COLORGROUPID').val();
    var CUR_COLOR        = $('#COLOR').val(); 
    var CUR_COLORBG      = $('#COLORBG').val();
    var CUR_COLORBGIMAGE = $('#COLORBGIMAGE').val();
    var CUR_COLORPRICE   = $('#COLORPRICE').val(); 
         
    var x=0; var xs=0; var xrow=0; var colorName=''; var colorDisplay=''; var VERWENDUNG=''; var LIEFERZEIT=''; var bgdisplay=''; var COLAPPEND=''; var padding=0; var OLDSTAERKE='';

    var COLORGROUPIDEXISTS=0; var COLORID_DEF=''; var COLORNAME_DEF=''; var COLORGROUPID_DEF=''; var COLOR_DEF=''; var COLORBG_DEF=''; var COLORBGIMAGE_DEF='';

    $('#SLIDERCOLORS').empty();

    $.each(MAT['PRODUCTS'],function(pindex, pvalue)
    {
        var PIDCOLORS =  pvalue['COLORS'];

        x=0;

        $.each(PIDCOLORS,function(index, value)
        {
      //  if(value['CGID']==CUR_COLORGROUPID) { COLORGROUPIDEXISTS=1; CUR_COLORID=value['CID'] } 
          if(CUR_COLORID==value['CID'] && pvalue['PID']==prodid) { COLORGROUPIDEXISTS=1; CUR_COLORID=value['CID'] } 

      //console.log('STAERKE/PID :' + pvalue['PID'] + ', '+prodid+ '|' + CUR_COLORID + ', ' + value['CID'] + '| COLORGROUPEXISTS?: ' + COLORGROUPIDEXISTS);

          if(value['CGBGIMAGE']===null) { value['CGBGIMAGE']=''; }

          if(x==0 && pvalue['PID']==prodid)
          {
             COLORID_DEF=value['CID']; 
             COLORNAME_DEF=value['CGNAME']; 
             COLORGROUPID_DEF=value['CGID']; 
             COLOR_DEF=value['CGCOLOR']; 
             COLORBG_DEF= value['CGBGCOLOR']; 
             COLORBGIMAGE_DEF=value['CGBGIMAGE'];
             COLORPRICE_DEF=value['CPA'];
          }

          colorName = value['CGNAME'];
          colorDisplay = value['CGNAME'].replace('/','<br>');

          if(value['CLIEFERZEIT']!=0) { LIEFERZEIT=value['CLIEFERZEIT']+' Werktage'; } else { LIEFERZEIT='sofort lieferbar'; }

          switch(value['CVERWENDUNG'])
          {
                  case '1': VERWENDUNG='nur Aussen verwendbar'; break;
                  case '2': VERWENDUNG='Innen und Aussen verwendbar'; break;
                  default:  VERWENDUNG='nur Innen verwendbar';
          }

          if(value['CUVRESISTENT']==1) { VERWENDUNG = VERWENDUNG + ", UV-Resistent"; }

          /** SPLIT COLORS **/

           padding=0; 
           if(OLDSTAERKE!=pvalue['PSTAERKE'] && xrow>0) { padding='25px'; OLDSTAERKE=pvalue['PSTAERKE']; $('#SLIDERCOLORS').append(COLAPPEND + '</li>'); xs=0; }

          if(xs==0) { COLAPPEND= '<li class="clipColNav" style="margin-left:'+padding+'">'; } //$('#SLIDERCOLORS').append('<li class="clipColNav">'); }

          bgdisplay = value['CGBGIMAGE'].length > 0 ? "background: url("+value['CGBGIMAGE']+")" : "background: "+value['CGBGCOLOR']+"";
 
          pdisplay=pvalue['PSTAERKE'].replace('.',',');

          if(pvalue['PID']==$('#PRODUCTID').val())
          {
             COLAPPEND = COLAPPEND + "<button type='button' class='apbutton large_clsize grad scolors' style='"+bgdisplay+"' onclick='changeBackColor(\"schild\",\""+value['CGCOLOR']+"\",\""+value['CGBGCOLOR']+"\",\""+colorName+"\",\""+value['CID']+"\",\""+value['CGBGIMAGE']+"\",\""+value['CGID']+"\",1)' id=\"color"+value['CID']+"\" data-strength=\""+pdisplay+" mm\" data-surface=\""+value['COBERFLAECHE']+"\" data-props='"+VERWENDUNG+"' data-lztime='"+LIEFERZEIT+"'><span class='coltext' style='color:"+value['CGCOLOR']+";'>"+colorDisplay+"<div class='strengthbg'><span class='sm' style='margin-top:2px'>"+pvalue['PSTAERKE']+" mm</span></div></span></button>\n";
          }
          else
          {
             COLAPPEND = COLAPPEND + "<button type='button' class='apbutton large_clsize grad scolors' style='"+bgdisplay+"' onclick='changeStaerkeByColor(\""+$('#MATERIALID').val()+"\",\""+pvalue['PID']+"\",\""+$('#PRODUCTID').val()+"\",\""+value['CID']+"\",\""+colorName+"\",\""+value['CGID']+"\",\""+value['CGCOLOR']+"\",\""+value['CGBGCOLOR']+"\",\""+value['CGBGIMAGE']+"\")' id=\"color"+value['CID']+"\" data-strength=\""+pdisplay+" mm\" data-surface=\""+value['COBERFLAECHE']+"\" data-props='"+VERWENDUNG+"' data-lztime='"+LIEFERZEIT+"'><span class='coltext' style='color:"+value['CGCOLOR']+";'>"+colorDisplay+"<div class='strengthbg'><span class='sm' style='margin-top:2px'>"+pvalue['PSTAERKE']+" mm</span></div></span></button>\n";
          }

          xs++;

          if(xs==3) { COLAPPEND=COLAPPEND + '</li>\n'; xs=0; $('#SLIDERCOLORS').append(COLAPPEND); COLAPPEND=''; }
          x++;
        });

        xrow++;
    });

    if(xs!=3 && xs!=0) { COLAPPEND= COLAPPEND + '</li>\n'; $('#SLIDERCOLORS').append(COLAPPEND); 
       // to fill sliders properly
       $('#SLIDERCOLORS').append('<li class="clipColNav"></li>');}

    if(COLORGROUPIDEXISTS==0) { $('#COLORID').val(COLORID_DEF); $('#COLORNAME').val(COLORNAME_DEF); $('#COLORGROUPID').val(COLORGROUPID_DEF); $('#COLOR').val(COLOR_DEF); $('#COLORBG').val(COLORBG_DEF); $('#COLORBGIMAGE').val(COLORBGIMAGE_DEF); $('#COLORPRICE').val(COLORPRICE_DEF); }
    else                      { $('#COLORID').val(CUR_COLORID); $('#COLORNAME').val(CUR_COLORNAME); $('#COLORGROUPID').val(CUR_COLORGROUPID); $('#COLOR').val(CUR_COLOR); $('#COLORBG').val(CUR_COLORBG); $('#COLORBGIMAGE').val(CUR_COLORBGIMAGE); $('#COLORPRICE').val(CUR_COLORPRICE); }

    initJCarousel('colors');  

 // RESTORE DIMMAX, DIMMIN
 
    var PDIMMAX = PROD['PMAXX']+'x'+PROD['PMAXY'];
    var PDIMMIN = PROD['PMINX']+'x'+PROD['PMINY'];

    $('#DIMMAX').val(PDIMMAX);
    $('#DIMMIN').val(PDIMMIN);

 // RESTORE FIXATIONDATA

    var CUR_FIXATIONID   = $('#FIXATIONID').val();
    var CUR_FIXATIONNAME = $('#FIXATIONNAME').val();

    var x=0; var xs=0; var dpimage = ''; var FIXAPPEND='';

    var FIXATIONIDEXISTS=0; var FIXATIONID_DEF=''; var FIXATIONNAME_DEF='';  var FIXATIONDATA=''; var FIXATIONID_DEF=1; var FIXATIONNAME_DEF='Keine';

    $('#SLIDERFIXATIONS').empty();

    // GET CURRENT FIXATIONS

    var SIGN_FORMS = new Object(); var TMP_SIGN_FORMS = new Object();
    $.each(PROD['SIGN_FORMS'],function(index, value)
    {
        if(value['SFID']==$('#FORMID').val()) { SIGN_FORMS = PROD['SIGN_FORMS'][index]; }

        TMP_SIGN_FORMS = PROD['SIGN_FORMS'][index]; 

/* INVALID JQUERY 2.4 */
//console.log(TMP_SIGN_FORMS)  

        $.each(TMP_SIGN_FORMS['SFFIXATIONS'],function(index, value)
        {
           // ALL FIXATIONDATA NEEDED

              if(value['DISTANCE']===null) { value['DISTANCE']=''; }
              FIXATIONDATA = FIXATIONDATA + value['SFID'] +','+value['FXID']+','+ value['MINWIDTH']+','+value['MINHEIGHT']+','+value['DISTANCE']+'###';
        });
    });

    FIXAPPEND = '<li class="clipFXBlock">'; 
    FIXAPPEND = FIXAPPEND + "<div class='clipFX' id='fixationBlock1'><button type='button' class='apbutton large_partsize fixations part partSelect' onclick='addFixation(1,\"\",\"Keine\",1)' id='fixation1'><img src='../xkonf/fixations/keine.jpg' class='funcicon' alt=''></button><span class='sm'>Keine</span></div>";

    if(SIGN_FORMS['SFFIXATIONS']!==null)
    {
       $.each(SIGN_FORMS['SFFIXATIONS'],function(index, value)
       {
              if(value['FXID']==CUR_FIXATIONID) { FIXATIONIDEXISTS=1; CUR_FIXATIONID=value['FXID'] } 

              switch(value['FXID']) 
              {           
                case '7' : dpimage='ws'; break; 
                case '9' : dpimage='screw'; break;
                default  : dpimage=''; break;
              }
 
              FIXAPPEND = FIXAPPEND + "<div class='clipFX' id='fixationBlock" + value['FXID'] +"'><button type='button' class='apbutton large_partsize part fixations' onclick='addFixation("+ value['FXID']+",\""+dpimage+"\",\""+value['FXNAME']+"\",1)' id='fixation"+ value['FXID']+"'><img src='../xkonf/fixations/"+ value['FXFILE'] +"' class='funcicon' alt=''></button><span class='sm'>"+ value['FXNAME'] +"</span></div>";
       });
    }

    $('#SLIDERFIXATIONS').append(FIXAPPEND + '</li>\n');

    if(FIXATIONIDEXISTS==0) { $('#FIXATIONID').val(FIXATIONID_DEF); $('#FIXATIONNAME').val(FIXATIONNAME_DEF); }
    else                    { $('#FIXATIONID').val(CUR_FIXATIONID); $('#FIXATIONNAME').val(CUR_FIXATIONNAME); }

    initJCarousel('fixations');  

    //console.log('FIXATION: ' + $('#FIXATIONID').val() +', ' +$('#FIXATIONNAME').val())


 // RESTORE COMPONENTS

    var COMPONENTSAPPEND = '<li class="clipCPBlock">'; 

    $('#SLIDERCOMPONENTS').empty();

    $.each(PROD['COMPONENTS'],function(index, value)
    {
        COMPONENTSAPPEND = COMPONENTSAPPEND + "<div class='clipCP' id='componentsBlock" + value['CPID'] +"'><button type='button' class='apbutton large_partsize part components' onclick='addComponent("+ value['CPID']+",\"\",\""+value['CPNAME']+"\",1)' id='component"+ value['CPID']+"'><img src='../xkonf/components/"+ value['CPFILE'] +"' class='funcicon' alt=''></button><span class='sm'>"+ value['CPNAME'] +"</span></div>"; 
    });

    $('#SLIDERCOMPONENTS').append(COMPONENTSAPPEND + '</li>\n');

    initJCarousel('components');


LOG && console.log('%cinitConfSign(\''+$("input[name=DIMMODE]:checked").val()+'\',\''+$('#DIMFREE').val()+'\',\''+$('#DIMSTD option:selected').val()+'\',\''+$('#WIDTH').val()+'\',\''+$('#HEIGHT').val()+'\',\''+$('#COLOR').val()+'\',\''+$('#COLORBG').val()+'\',\''+$('#COLORBGIMAGE').val()+'\',\''+$('#COLORNAME').val()+'\',\''+$('#COLORID').val()+'\',\''+$('#COLORGROUPID').val()+'\',\''+$('#FORM').val()+'\',\''+$('#FORMDATA').val()+'\',\''+$('#FORMID').val()+'\',\'border\',\''+$('#BORDERID').val()+'\',\''+PDIMMAX+'\',\''+PDIMMIN+'\',\''+$('#TXTMODE').val()+'\',\''+FIXATIONDATA+'\',\''+MAT['MCUTFORM']+'\',\''+jsondata+'\',\'1\')',"color: white; background-color: black; padding: 4px");


initConfSign($("input[name=DIMMODE]:checked").val(),$('#DIMFREE').val(),$('#DIMSTD option:selected').val(),$('#WIDTH').val(),$('#HEIGHT').val(),$('#COLOR').val(),$('#COLORBG').val(),$('#COLORBGIMAGE').val(),$('#COLORNAME').val(),$('#COLORID').val(),$('#COLORGROUPID').val(),$('#FORM').val(),$('#FORMDATA').val(),$('#FORMID').val(),'border',$('#BORDERID').val(),PDIMMAX,PDIMMIN,$('#TXTMODE').val(),FIXATIONDATA,MAT['MCUTFORM'],jsondata,'1');

//initConfSign($('#DIMMODE').val(),$("#DIMFREE").val(),'{$_SESSION['SIGN']['DIMSTD']}','{$_SESSION['SIGN']['WIDTH']}','{$_SESSION['SIGN']['HEIGHT']}','{$_SESSION['SIGN']['COLOR']}','{$_SESSION['SIGN']['COLORBG']}','{$_SESSION['SIGN']['COLORBGIMAGE']}','{$_SESSION['SIGN']['COLORNAME']}','{$_SESSION['SIGN']['COLORID']}','{$_SESSION['SIGN']['COLORGROUPID']}','{$_SESSION['SIGN']['FORM']}','{$_SESSION['SIGN']['FORMDATA']}','{$_SESSION['SIGN']['FORMID']}','{$_SESSION['SIGN']['BORDER']}','{$_SESSION['SIGN']['BORDERID']}','{$_SESSION['SIGN']['DIMMAX']}','{$_SESSION['SIGN']['DIMMIN']}','{$_SESSION['SIGN']['TXTMODE']}','{$_SESSION['SIGN']['FIXATIONDATA']}','{$_SESSION['SIGN']['CUTFORMSENABLED']}','$JSONFILE');


  $('#CONTAINERCURRENTJSVAL').html(
  '<table>'+
  '<tr><td style="width:200px">MATERIALID:</td><td>'+ $('#MATERIALID').val() + '</td></tr>' +
  '<tr><td>PRODUCTID:</td><td>'+ $('#PRODUCTID').val() + '</td></tr>' +
  '<tr><td>STAERKE:</td><td>'+ $('#STAERKE').val() + '</td></tr>' +
  '<tr><td>ENGRAVEMETHOD:</td><td>'+ $('#ENGRAVEMETHOD').val() + '</td></tr>' +
  '</table>'
                              );
  return false;

  
}

/** ---------------------------------------------------------------------------*/
/** INIT SIGN (JS + PHP)                                                       */
/** ---------------------------------------------------------------------------*/


function initConfSign(dimmode,dimfree,dimstd,x,y,col,bgcol,bgimage,colname,colid,colgroupid,sform,sformdata,sformid,border,borderid,dimmax,dimmin,textmode,fixationdata,cutformsenabled,json,reloadFromJS)
{
    if(reloadFromJS!=1) { canvas.clear(); }

    $('#schild').hide();

    SIGN.width=x;
    SIGN.height=y;

    SIGN.color = col;
    SIGN.bgcolor = bgcol;

    SIGN.dimMax=dimmax;
    SIGN.dimMin=dimmin;

    FIXDATA = new Array(); // RESET GLOBAL FIXDATA

    ROWS = fixationdata.split('###');

    ROWS.forEach(function(entry) {
         dataentry=entry.split(',');
         if(entry.length > 0) { FIXDATA.push(dataentry); }
    });

    //alert(FIXDATA.length);

    var max = SIGN.dimMax.split('x');
    var min = SIGN.dimMin.split('x');

    if(textmode==1)  // SERIENTEXT
    {
       $('#serientext').show();  
       $('#TXTMODE').val(1);
       $('#MENGE').val()==1 ? $('#stSignDisplay').text($('#MENGE').val()+ ' Entwurf') : $('#stSignDisplay').text($('#MENGE').val()+ ' Entw\u00fcrfe');
       $('#MENGE').prop('readonly', true); 
    }

    $('#WIDTH').val(SIGN.width)
    $('#HEIGHT').val(SIGN.height)

    if(json.length > 0)
    {
       json = json.replace(/'/g,"\'");
       //json = json.replace(/"/g,'\\"');
       json = json.replace(/\n/g, "\\n");       //json=replace
       json = json.replace(/\r/g, "\\r");       //json=replace

       LOG && console.log('initSign from JSON (PHP)');   

       //console.log(json);

//var start = timer(0);

//       canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {

//              var start = timer(0);
//              var tdiff = timer(start);

//              LOG && console.log(o,object); // 'Object loaded in: ' +tdiff + ', Object:' + fabric.log(o, object));
//       });

canvas.loadFromJSON(json, function () {

        //canvas.forEachObject(function(o) {




//console.log('JSON: ObjType: ' + o.type);
//console.log(o.type);
            //if (o.type === 'image' && o.filters.length !== 0) {
            //    o.applyFilters(canvas2.renderAll.bind(canvas2));
            //}
       // });
    });
 

//var tdiff = timer(start);
//LOG && console.log('JSON loads in: ' +tdiff);


       //canvas.loadFromDatalessJSON(json,  canvas.renderAll.bind(canvas), function(o, object) {
       //       fabric.log(o, object);
       //});

    }
    else
    {
       LOG && console.log('init from JS');
       //LOG && fabric.log(o, object);

       //for(x=2; x<canvas.getObjects().length; x++)
       //{
        //   obj=canvas.item(x);   
         //  formatObjControls(obj,1);       
          // LOG && console.log(obj);
        //}

       //createBackgroundArea(sform,sformdata,sformid,border,borderid,0);
       //changeBackColor('',col,bgcol,colname,colid,bgimage,colgroupid,0)
       //resizeBack(SIGN.width,SIGN.height);
       //$('#schild').show();
       
    }


    var removeCFID=new Array();
    var oldbgObj = new Array();

    delay(function() {                    // CAUSE IMAGES IN JSON ARE NOT LOADED PROPERLY

        var startdelay = timer(0);

        for(x=2; x<canvas.getObjects().length; x++)
        {
            obj=canvas.item(x);          
            formatObjControls(obj,1);

            if(obj.mmkLayerType=='layerCutForm' && cutformsenabled==0) { removeCFID.push(x); }
            if(obj.mmkLayerType=='layerFixation')  { oldbgObj.push(obj); }

            var start = timer(0);
            LOG && console.log(obj);

            var tdiff = timer(start);
            LOG && console.log('Applying Image Filters in: ' +tdiff);
        }

    // REMOVE CUTFORMS IF CUTFORMSENABLED=0;

        for(var x = removeCFID.length; x--;) 
        { 
            fx=removeCFID[x];
            canvas.remove(canvas.item(fx)); 
        }

        createBackgroundArea(sform,sformdata,sformid,border,borderid,0);
        changeBackColor('',col,bgcol,colname,colid,bgimage,colgroupid,0);
        resizeBack(SIGN.width,SIGN.height); 

    //console.log('INIT FROM JSON');
    //console.log('NEED TO RESTORE OBJECTS / BOHRUNGE');

        if(json.length > 0) { restoreFixationByJSON(oldbgObj); }

        canvas.renderAll();
        $('#schild').show(); 

        var tdiffdelay = timer(startdelay);
        LOG && console.log('Delayed Object Loader in initConfSign() (150 ms) loads in: ' +tdiffdelay);
   
    }, 150);
}

/** ---------------------------------------------------------------------------*/
/** CALCULATE SIGN (PHP MODE + JS ONLY MODE)                                   */
/** ---------------------------------------------------------------------------*/

function calculateSign(source,type)
{
    var typeval=new Array('JS ONLY','PHP + JS');
    var autoSet=0;

    if(type==null) { type=0; autoSet=1; } // TYPE NOT SET IN FUNCTIONS
    if(PHPCALC==true) { type=1; autoSet=1; }  // ENABLES PHP MODE ALWAYS (GLOBAL)
    
    LOG && console.log('%cCalculatingSign: Source: '+source+', Mode: '+typeval[type]+', Autoset: ' + autoSet + ', PHPCALCMODE: ' + PHPCALC,"color:white; background: #cc0000; padding:4px;");
    
 // TIME

    var start = timer(0);

 // GRAVURFLAECHE ERMITTELN

    var gFull      = 0;
    var sFull      = 0;
    var gColorArea = new Object();
    var gColorRoam = '';
    var gAll       = 0;
    var sAll       = 0;
    var bildmontage= 0;
    var staerke    = $('#STAERKE option:selected').text()
        staerke    = staerke.replace("mm",'');
        staerke    = parseFloat(staerke.replace(",",'.')).toFixed(2);
    
 // BORDER?

    var xs=2; 

    if($('#BORDERID').val()==2) { xs=1; }  // Thin
    if($('#BORDERID').val()==3) { xs=1; }  // Thick 
         
    for(x=xs; x < canvas.getObjects().length; x++)
    {

        if(canvas.item(x).type=='image' || canvas.item(x).type=='path' || canvas.item(x).type=='group' || canvas.item(x).type=='path-group' || canvas.item(x).type=='i-text'  || canvas.item(x).type=='circle' || canvas.item(x).type=='rect' || canvas.item(x).type=='triangle' || canvas.item(x).type=='polygon')
        {
           gwidth  = ((canvas.item(x).get('width')*canvas.item(x).scaleX)/10) / SIGN.scaleFac; 
           gheight = ((canvas.item(x).get('height')*canvas.item(x).scaleY)/10) / SIGN.scaleFac;
        }
        else
        {
           gwidth  = (canvas.item(x).get('width')/10) /SIGN.scaleFac; 
           gheight = (canvas.item(x).get('height')/10)/SIGN.scaleFac;

//console.log(canvas.item(x).type + 'calcuation...');

        }
       
        //LOG && console.log('Type:' + canvas.item(x).type + ',' +gwidth + ' x ' +gheight+ ',Scale: ' + canvas.item(x).scaleX + ',' +canvas.item(x).scaleY);

        gAll    = gwidth * gheight;
        sAll    = gwidth * 2 + gheight * 2;

      // Gravurflaeche oder Ausschnittflache

        if(canvas.item(x).mmkLayerType=='layerCutForm')
        {
           sFull+= sAll;
        }
        else
        {
           gFull+= gAll;
        }

        if(canvas.item(x).mmkLayerFill == 1) //Type=='layerFillColor')
        {
           fill = canvas.item(x).get('fill');
           if(!(fill in gColorArea)) { gColorArea[fill]=0; }
           gColorArea[fill]+=gAll;
        }

        if(canvas.item(x).get('type')=='image') { bildmontage=1; }
    }

    LOG && console.log('Gravur:' + gFull +' / Ausschnitte:' + sFull);

 // GROUP FILL COLORS
                      
    for (var key in gColorArea) { gColorRoam= gColorRoam + key +'|'+ gColorArea[key] +'###'; }
    
    //if(gColorRoam.length > 0) { alert(gColorRoam); }
    //console.log(gColorArea);

 // INIT LOADER 

  //  $('#wkPrice').html('<div style="background:url(\'../icons/ajax-loader.gif\') 0 1px no-repeat; padding:0 0 0 18px">Lade...</div>');

 // AJAX UPDATE

    var dataURL='';
    var formData = $('#imUploader').serializeArray(); //$('input[name^="wdata\\["]').serializeArray();

 // GET REFPNG // CAUSES SOME REALLY ANNOYING ERRORS + SLOW EITHER
    
    var obj  = canvas.getActiveObject();

//    if(obj) { //canvas.deactivateAll().renderAll();  // NOT WORKING in 2.x
              //hideObjControls();  // NOT WORKING IN 2.x

              //canvas.discardActiveObject();
              //canvas.requestRenderAll();

  //            console.log('SOMETHING IS WRONG IN LINE 1309......');
              //hideObjControls();

//}

// CALUCLATE PRICE (PHP)

   if(type==1 || type==2)
   {
      //var dataRef  = canvas.toDataURL('image/png');    //saveImageAs('png');

      // HIDE SHADOW

         canvas.item(0).setShadow({ color: 'rgba(0,0,0,0.5) 0 0 0'});

         var dataRef='';
         var objtyp = canvas.item(0).get('type');

         switch(objtyp)
         {
             case 'rect':
             case 'ellipse':

               dataRef  = canvas.toDataURL({format: 'png',
                                             left: canvas.item(0).get('left'),
                                             top: canvas.item(0).get('top'),
                                             width: canvas.item(0).get('width'),
                                             height: canvas.item(0).get('height')
                                           });
             break;

             case 'circle':
             case 'polygon':
             case 'triangle':
             case 'path': 
             case 'path-group':
             case 'group'   : 
                         
               dataRef  = canvas.toDataURL({format: 'png',
                                             left: canvas.item(0).get('left'),
                                             top: canvas.item(0).get('top'),
                                             width: canvas.item(0).get('width') * canvas.item(0).get('scaleX'),
                                             height: canvas.item(0).get('height') * canvas.item(0).get('scaleY'),
                                          });
            break;
         }

      // SHOW SHADOW 

        canvas.item(0).setShadow({ color: 'rgba(0,0,0,0.5) 0 0 15px' });

      var json = JSON.stringify(canvas);

      //alert(json);
      //json =    json.replace(/'/g, "\\'");       //json=replace
      //json = json.replace(/'/g, '\'')
      //alert(json);


   // AJAX UPDATE REQUEST

      switch(type)
      {

         case 2: //onunloadEvent

            var oufd = new FormData();

                $(formData).each(function(c, item)
                {
                    if(item.name!='JSCONFIG') { oufd.append('OUFD_' + item.name, item.value); }
                });

                oufd.append('com', 'cs');
                oufd.append('json', json);
                oufd.append('ref', ''); //dataRef
                oufd.append('gf', parseFloat(gFull).toFixed(3));
                oufd.append('su', parseFloat(sFull).toFixed(3));
                oufd.append('width', canvas.item(0).get('height'));
                oufd.append('height', canvas.item(0).get('height'));
                oufd.append('gca', gColorRoam);
                oufd.append('bildmontage', bildmontage);
                oufd.append('staerke', staerke);
                oufd.append('csdatamode', 1);

                // seems only 64KB possible
                navigator.sendBeacon("https://schilderstyle.de/konfigurator/scripts/mmk-io.php", oufd);

           //$.ajax({ url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php",
           //         type: 'POST',
           //         cache: false,
           //         timeout: 30000,
           //         async: true, 
           //         data: { data: formData, com: 'cs', json: json, ref: dataRef, gf: parseFloat(gFull).toFixed(3), su: parseFloat(sFull).toFixed(3), width: canvas.item(0).get('height'), height: canvas.item(0).get('height'), gca: gColorRoam, bildmontage: bildmontage, staerke: staerke },
           //         error: function(){
           //                return true;
           //         },
           //         success: function(cs) { $('#wkPrice').html(cs); return true; }
           //});

         break;

         default:

           $.ajax({ url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php",
                    type: 'POST',
                    cache: false,
                    timeout: 30000,
                    async: false, 
                    data: { data: formData, com: 'cs', json: json, ref: dataRef, gf: parseFloat(gFull).toFixed(3), su: parseFloat(sFull).toFixed(3), width: canvas.item(0).get('height'), height: canvas.item(0).get('height'), gca: gColorRoam, bildmontage: bildmontage, staerke: staerke },
                    error: function(){
                           return true;
                    },
                    success: function(cs) { $('#wkPrice').html(cs); return true; }
           });
      }




   }
   else
   { $('#wkPrice').html('OFF'); }

  

 // CALUCLATE PRICE (JS)

    jsPrice = calculateSignJS(parseFloat(gFull).toFixed(3),parseFloat(sFull).toFixed(3),gColorRoam,bildmontage); 
    $('#wkPriceJS').html(jsPrice + ' &euro; inkl. MwSt.');

 // CALCULATE STUECK NETTO (JS)

     jsPriceLC = jsPrice.replace(/\,/,'.');

     var TAXSET        = parseFloat(19.00);
     var TAXCALCMETHOD = '1';
     var TAX           = parseFloat(100 + TAXSET);

//alert(TAX +', ' + TAXSET +', ' +TAXCALCMETHOD);

     //var jsPriceStueck = parseFloat((jsPriceLC/119 * 100) / $('#MENGE').val()).toFixed(2);

     if(TAXCALCMETHOD==1)
     {  
        //var jsPriceStueck = parseFloat((jsPriceLC/119 * 100) / $('#MENGE').val()).toFixed(2);
        var jsPriceStueck = parseFloat((jsPriceLC/TAX * 100) / $('#MENGE').val()).toFixed(2);
     }
     else
     {

     }

     jsPriceStueck = jsPriceStueck.replace(/\./,',');


     $('#wkPriceNetto').html(jsPriceStueck +' &euro; netto');



 // SELECT ACTIVE OBJECT

    if(obj) { canvas.setActiveObject(obj); }

 // REFRESH OBJ LIST / EBENEN

    var objLayerContent='';  $('#objLayers').html();
   
    for(x=1; x<canvas.getObjects().length; x++)
    {
        var objType  = canvas.item(x).get('type');
        var layerType='None';
        var layerFill='None';
        var layerActiveColor='#f5f5f5'; 
        var layerActiveBorderColor='#cccccc'; 
        var selectable=''; 
        var selectableEnd='';

        if(canvas.item(x)==canvas.getActiveObject()) { layerActiveColor='#f5f5f5'; layerActiveBorderColor="#ccc"; } //layerActiveBorderColor="#0093db"; }

        if(x==1) { layerType='Border'; }
         
        if(canvas.item(x).mmkLayerType) { layerType  = canvas.item(x).mmkLayerType; }
        if(canvas.item(x).mmkLayerFill) { layerFill  = canvas.item(x).mmkLayerFill; }

        if(x>1) { selectable='<a href="javascript:selectObjListLayer('+x+')" style="text-decoration:none; color:#555">'; selectableEnd='</a>'; }

        objLayerContent= objLayerContent + selectable +'<div style="display:block; background:'+ layerActiveColor +'; font-size:8pt; border:1px solid '+ layerActiveBorderColor +'; border-radius:3px; margin-bottom:4px; padding:3px;"><b>Ebene ' + x + '</b> / '+ objType +'<br><span style="font-size:8pt">Typ: '+ layerType +'| Fill: '+ layerFill +'</span></div>' + selectableEnd;
        

        //if(canvas.item(x).mmkLayerType=='layerCutForm')        { LOG && console.log('cutform ('+x+') - no fill'); } 
        //else if(canvas.item(x).mmkLayerType=='layerFixation') { LOG && console.log('fixation ('+x+') - no fill'); }
        //else if(canvas.item(x).mmkLayerType=='layerOverlay')  { LOG && console.log('overlay ('+x+') - no fill'); }
        //else
        //{
           // MIT FARBE AUSLEGBAR/FUELLBAR

        //      if($('#ENGRAVEFILLABLE').val()==1)
        //      {
        //          if(canvas.item(x).mmkLayerFill==1) { }
        //          else { canvas.item(x).setFill(color); }
        //      }
        //      else { canvas.item(x).setFill(color); }
        //}
    }

    $('#objLayers').html(objLayerContent);

    var tdiff = timer(start);
    
    LOG && console.log('Calculated Price in: ' +tdiff);

 // ALWAYS MAKE SURE UNSELECTABLE

    if(canvas.item(0)!==undefined) { canvas.item(0).selectable=false; }
    if(canvas.item(1)!==undefined) { canvas.item(1).selectable=false; }


}

/** ---------------------------------------------------------------------------*/
/** CALCULATE SIGN (JS ONLY)                                                   */
/** ---------------------------------------------------------------------------*/

function calculateSignJS(gf,su,gca,bm)
{

 // GET JSON

    var SHIELD = JSON.parse(SCONFIG);

 // GET MATERIAL + PRODUCT
        
    var matid     = $('#MATERIALID').val();
    var prodid    = $('#PRODUCTID').val();
    var colorid   = $('#COLORID').val();
    var formid    = $('#FORMID').val();
    var engraveid = $('#ENGRAVEMETHOD').val(); 

    var MAT       = SHIELD[matid]; 
    var PROD      = new Object(); 
    var COLOR     = new Object();          
    var SIGN_FORM = new Object();          
    var ENGRAVE   = new Object();          

    $.each(MAT['PRODUCTS'],function(index, value){
        if(value['PID']==prodid) { PROD = MAT['PRODUCTS'][index]; }
    });

    $.each(PROD['COLORS'],function(index, value)
    {
        if(value['CID']==colorid) { COLOR = PROD['COLORS'][index]; }
    });

    $.each(PROD['SIGN_FORMS'],function(index, value)
    {
        if(value['SFID']==formid) { SIGN_FORM = PROD['SIGN_FORMS'][index]; } 
    });

    $.each(PROD['ENGRAVE_METHODS'],function(index, value) {

        if(value['EMID']==engraveid) { ENGRAVE = PROD['ENGRAVE_METHODS'][index]; } 

    });

 /** ----------------------------------------------------------------------*/

    var jsPrice='0.00';

 // SIGN DIMS

    if($("input[name=DIMMODE]:checked").val()==0) { var dim = $('#DIMSTD option:selected').val().split("x"); var width=dim[0]; var height=dim[1]; }
    else { var width=$('#WIDTH').val(); var height=$('#HEIGHT').val(); }
      
    var width  = width/10;
    var height = height/10;

    var mflaeche = width * height;
    var mumfang  = width * 2 + height * 2;

 // MATERIAL FLAECHE 

    var mprice     = parseFloat(mflaeche) * parseFloat(PROD['PMK_CM2']);
    var mpriceDis  = mprice.toFixed(2);

 // MATERIALZ

    var materialzuschlag = mprice * (COLOR['CPA']/100);

 // ZUSCHNITT

    var mzuschnitt   = mumfang * PROD['PZK_CM'];
    var mzuschnittDis = mzuschnitt.toFixed(2);

    jsPrice = parseFloat(mprice) + parseFloat(mzuschnitt) + parseFloat(materialzuschlag);

 // RAB

    var groundPrice = jsPrice;

    jsPrice = jsPrice/0.8;
    var discountAdd = (jsPrice - groundPrice).toFixed(2);

 // MEN RAB

    var tp = $('#TIERCONFIG').val().split("|");

    var tierPrice50   = tp[0]/100;
    var tierPrice100  = tp[1]/100;
    var tierPrice500  = tp[2]/100;
    var tierPrice1000 = tp[3]/100; 

    var oldMPrice = jsPrice;

    var rabattaufschlag = jsPrice - oldMPrice;
    var rabattaufschlagDis = rabattaufschlag.toFixed(2);    
        
    var rabatt=0; 

    if($('#MENGE').val() < 5)        { }
    else if ($('#MENGE').val() < 10)  { jsPrice = jsPrice * (1 - tierPrice50);   rabatt=tp[0];  }
    else if ($('#MENGE').val() < 50)  { jsPrice = jsPrice * (1 - tierPrice100);  rabatt=tp[1]; }
    else if ($('#MENGE').val() < 100) { jsPrice = jsPrice * (1 - tierPrice500);  rabatt=tp[2]; }
    else                              { jsPrice = jsPrice * (1 - tierPrice1000); rabatt=tp[3]; } 

    var rabattDiff = (rabattaufschlagDis - (jsPrice - oldMPrice)).toFixed(2);

 // MINDES

    var priceForm       = 0;
    var priceSondermasz = 0;

 // FORM MP   

    priceForm = SIGN_FORM['MP'];
 
 // SONDER

    if($("input[name=DIMMODE]:checked").val()==1)
    {
       priceSondermasz = PROD['PMP_SM'];
    }

 // RAB

    var discountDis = $('#DISCCONFIG').val();
    var discount = $('#DISCCONFIG').val()/100;
    var aktionsrabatt = (jsPrice * discount).toFixed(2);

 // FORM

    var formprice = SIGN_FORM['SFPA'];
    jsPrice = parseFloat(jsPrice) + parseFloat(formprice);
                                 
    var materialprice = parseFloat(jsPrice).toFixed(2);

 // GRAVUR

    var gravurflaeche       = gf; //$SOURCE['GRAVURFLAECHE'];
    var gravurpreis         = gravurflaeche * ENGRAVE['EMGK_CM2']; //$EM['EMGRAVURKOSTEN_CM2'];
    var gravurFlaechenPreis = gravurpreis.toFixed(2);

    var gravurAufschlag     = (gravurpreis * (ENGRAVE['PEMPAPROZ']/100));
    var gravurAufschlagDis  = gravurAufschlag.toFixed(2);

    gravurpreis         = gravurpreis + gravurAufschlag;
   
 // MIN SCHILD

    var minPricePerSign = 0;
    var chkm   = $('#MENGE').val();
    var chkmps = new Array();
    var chkx = 0;

    $.each(ENGRAVE['EM_MINIMUM_QUANTITIES'],function(index, value) {

        if(value['EMID']==$('#ENGRAVEMETHOD option:selected').val()) 
        { 
           chkmps[chkx]=value['MQPPS'];
           chkx++;
        } 
    });

    if(chkm<5)          { minPricePerSign = chkmps[0]; }
    else if(chkm<10)   { minPricePerSign = chkmps[1]; }
    else if(chkm<25)   { minPricePerSign = chkmps[2]; }
    else if(chkm<50)   { minPricePerSign = chkmps[3]; }
    else if(chkm<75)   { minPricePerSign = chkmps[4]; }
    else if(chkm<100)  { minPricePerSign = chkmps[5]; } 
    else if(chkm<250)  { minPricePerSign = chkmps[6]; } 
    else if(chkm<500)  { minPricePerSign = chkmps[7]; } 
    else if(chkm<1000) { minPricePerSign = chkmps[8]; } 
    else                { minPricePerSign = chkmps[9]; }

 // GRAVURFLACHE

    var gravurMindestPreisAktiv='Ja';
    var gravurAktiv='';

    if(gravurflaeche!=0)
    { 
       if(gravurpreis<minPricePerSign) { gravurpreis = minPricePerSign; gravurMindestPreisAktiv='Nein'; }
    }
    else
    {  gravurAktiv='(Keine Gravur)'; }

    var gravurpreisDis = parseFloat(gravurpreis).toFixed(2);

 // AUSSCHNITTE

    var ausschnittpreis = su * PROD['PZK_CM'];
    var ausschnittpreisDis = ausschnittpreis.toFixed(2);

    var ausschnittumfang = parseFloat(su).toFixed(1);

 // FARBAUSLAGE
 
    var farbauslage='0.00'; var farbstr=''; var farbeMinAktiv='Ja'; var fbauslage=''; var farbtmp='';

    if(gca.length > 0)
    { 
       var frow= gca.split("###");

       xs=1     
  
       for(x=0; x<frow.length; x++)
       {
           fcarea = frow[x].split("|");

           if(fcarea[1])
           {  
              fc= parseFloat(fcarea[1]).toFixed(2);
              fcrow = fc * ENGRAVE['EMFF_P_CM2'];

              if(fcrow > ENGRAVE['EMFF_MP_PF'])
              {  
                 fbauslage = fcrow; 
              }
              else 
              {  
                 fbauslage = ENGRAVE['EMFF_MP_PF'];
                 farbeMinAktiv = 'Nein';
              }

              farbtmp= '+ Farbe ' + xs +': ' + fc + ' * ' + ENGRAVE['EMFF_MP_PF'] + ' = ' + fcrow + ' > ' + ENGRAVE['EMFF_MP_PF'] + ' (' +farbeMinAktiv +')' + "\n";

              farbstr = farbstr + farbtmp;
              farbauslage= parseFloat(farbauslage) + parseFloat(fbauslage);
           }
           xs++; 
        }
    }

    var farbauslageDis = parseFloat(farbauslage).toFixed(2);

 // SERIENTEXT 

    var serientextPreis ='0.00'; var serienTextRows='0.00'; var zeilenCount=0; var serienTextRowsMore='Nein'; var words = new Array();

    var txtdata=$('#TXTDATA').val();
    var xs=0;

    if(txtdata.length > 0)
    {
        rows = txtdata.split("|");

        for (x=0; x<rows.length; x++) 
        { 
             words.push(rows[x]);
             xs++; 
               
             if(xs==5) 
             { 
                first=0;

                for (xw=0; xw <words.length; xw++)
                {
                     if(words[xw].length>0) 
                     { 
                        if(first==0) { serienTextRows= parseFloat(serienTextRows) + parseFloat(ENGRAVE['EM_P_ZEILE']); }
                        else         { serienTextRows= parseFloat(serienTextRows) + parseFloat(ENGRAVE['EM_P_NEXTZEILE']); }

                        zeilenCount++; first=1; 
                     }
                }

                xs=0; 
                words= new Array();
             }
        }

        serientextPreis = serienTextRows > ENGRAVE['EM_P_MAXZEILE'] ? ENGRAVE['EM_P_MAXZEILE'] : serienTextRows;
        serienTextRowsMore = serienTextRows > ENGRAVE['EM_P_MAXZEILE'] ? 'Ja' : 'Nein';
        serientextPreis= parseFloat((serientextPreis/$('#MENGE').val())).toFixed(2);
    }
 
 // BEFESTIGUNG

    var fxprice=0;

    var SIGN_FORMS = new Array(); var FIXATION= new Array();
    
    $.each(PROD['SIGN_FORMS'],function(index, value)
    {
        if(value['SFID']==$('#FORMID').val()) { SIGN_FORMS = PROD['SIGN_FORMS'][index]; }
    });

    if(SIGN_FORMS['SFFIXATIONS']!==null)
    {
       $.each(SIGN_FORMS['SFFIXATIONS'],function(index, value)
       {
            if(value['FXID']==$('#FIXATIONID').val()) { FIXATION = SIGN_FORMS['SFFIXATIONS'][index]; } 
       });
    
       if(FIXATION['FXMODE']==0) 
       {
          fxprice=parseFloat(FIXATION['FXP_ST']);
       }
       else if(FIXATION['FXMODE']==1)
       {
          fxprice = parseFloat(FIXATION['FXP_CM2'] * (mflaeche/10));
          if(fxprice<=FIXATION['FXMP']) { fxprice= parseFloat(FIXATION['FXMP']); }
       }

    }


 // ZUbEHOER / KOMPONENTEN

    var componentprice=0;

    var componentList = getComponents();

        for(var key in componentList)
        {
            $.each(PROD['COMPONENTS'],function(index, value) {
            
                 //console.log('cp: ' + key + ',' + index + ',' + value['CPID']);

                 if(value['CPID'] == key)
                 {  componentprice = componentprice + (value['CPPREIS_STUECK'] * componentList[key]); }
            });
        }

 // ADD PROGRAMMKOSTEN + BILDMONTAGE TO ALL (IF FRAESGRAVUR)

    var programmkosten = ENGRAVE['EMPK'];
    var bildmontage    = bm==1 ? ENGRAVE['EMBILDMONTAGE'] : '0.00';

//alert(jsPrice);

         jsPrice = parseFloat(jsPrice) + parseFloat(gravurpreis) + parseFloat(ausschnittpreis) + parseFloat(farbauslage) + parseFloat(serientextPreis) + parseFloat(ENGRAVE['EMHANDLING']) + parseFloat(fxprice) + componentprice;
 


         jsPrice = parseFloat(jsPrice).toFixed(2);

         var pricePerSign = jsPrice;
         var priceAllSigns= (jsPrice * $('#MENGE').val()).toFixed(2);

//alert(priceAllSigns + ', ' + $('#MENGE').val());

         var priceFormOrSondermasz = parseFloat(priceForm) > parseFloat(priceSondermasz) ? priceForm : priceSondermasz;
         var priceFormDis          = parseFloat(priceForm) > parseFloat(priceSondermasz) ? 'Ja' : 'Nein';
         var priceSondermaszDis    = parseFloat(priceForm) > parseFloat(priceSondermasz) ? 'Nein' : 'Ja';

         if(priceFormOrSondermasz==0 || 0.00) { priceFormDis='Nein'; priceSondermaszDis='Nein'; }

         jsPrice = jsPrice * parseInt($('#MENGE').val()) + parseFloat(priceFormOrSondermasz) + parseFloat(programmkosten) + parseFloat(bildmontage);
         jsPrice = parseFloat(jsPrice * 1.19).toFixed(2); 

         jsPrice = jsPrice.replace(".",",");


/**

PRLOG && console.log('PriceCALC: ' +width, height); 
PRLOG && console.log('-----------------------------------------------------------------------------')
PRLOG && console.log('+ A: ' + mflaeche +' cm2 * '+ PROD['PMK_CM2'] +' = ' + mpriceDis + ' EUR');
PRLOG && console.log('+ U: ' + mumfang + ' cm * '+ PROD['PZK_CM'] + ' =  ' + mzuschnittDis + ' EUR');
PRLOG && console.log('+ Materialzuschlag: ' + materialzuschlag + ' EUR (' + COLOR['CPA'] +' %)'); 
PRLOG && console.log('+ Rabatt auf Mat: ' + discountAdd + ' EUR (20%)');
PRLOG && console.log('+ Mengenstaffelaufschlag: ' + rabattaufschlagDis +' EUR');
PRLOG && console.log('- Gewaehrter Mengenrabatt: ' + rabattDiff + ' EUR (' + rabatt +' %)');
PRLOG && console.log('+ Form: ' + formprice+' EUR ');  
PRLOG && console.log('= Materialpeis: ' + materialprice + ' EUR ');
PRLOG && console.log('-----------------------------------------------------------------------------');

PRLOG && console.log('+ Gravur: ' + gravurflaeche +' cm2 * ' + ENGRAVE['EMGK_CM2'] + ' = ' +gravurFlaechenPreis +' EUR ');
PRLOG && console.log('+ Gravuraufschlag: ' + ENGRAVE['PEMPAPROZ'] + ' % = ' + gravurAufschlagDis + ' EUR ');
PRLOG && console.log('> MinGravurPreis/Schild?: ' + minPricePerSign + ' EUR  ('+gravurMindestPreisAktiv+')');
PRLOG && console.log('= Gravurpreis: ' + gravurpreisDis + ' EUR ' + gravurAktiv); 
PRLOG && console.log('-----------------------------------------------------------------------------');

PRLOG && console.log('+ Ausschnitte: ' + ausschnittumfang + ' cm * ' + PROD['PZK_CM'] + ' = ' +ausschnittpreisDis + ' EUR');
PRLOG && console.log('-----------------------------------------------------------------------------')

PRLOG && console.log(farbstr);
PRLOG && console.log('= Farbe auslegen: ' + farbauslageDis + ' EUR');

PRLOG && console.log('-----------------------------------------------------------------------------');
PRLOG && console.log('+ Befestigung: ' + fxprice + ' EUR ');
PRLOG && console.log('+ Zubehoer: ' + componentprice + ' EUR ');
PRLOG && console.log('+ Handling: ' + ENGRAVE['EMHANDLING'] + ' EUR');
PRLOG && console.log('= Preis pro Schild: ' + pricePerSign + ' EUR ');
PRLOG && console.log('-----------------------------------------------------------------------------');
PRLOG && console.log('+ Serientext: ' + serienTextRows +' EUR ('+ zeilenCount +' Zeilen)');
PRLOG && console.log('> Maximalpreis?: ' + ENGRAVE['EM_P_MAXZEILE'] + ' EUR (' +serienTextRowsMore +')');
PRLOG && console.log('= Serientext (pro Schild): ' + serientextPreis +' EUR ');
PRLOG && console.log('-----------------------------------------------------------------------------');
PRLOG && console.log('+ Preis alle Schilder: ' + priceAllSigns + ' EUR');
PRLOG && console.log('+ MinBest.Wert Schildform?: ' + priceForm + ' EUR (' +priceFormDis+')');
PRLOG && console.log('+ MinBest.Wert Sondermasse?: ' + priceSondermasz + ' EUR (' +priceSondermaszDis+ ')');
PRLOG && console.log('+ Programmkosten: ' + programmkosten + ' EUR (pro Auftrag)');
PRLOG && console.log('+ Bildmontage: ' + bildmontage + ' EUR (pro Auftrag)');
PRLOG && console.log('= Gesamtpreis: ' + jsPrice + ' EUR (Netto)');
PRLOG && console.log('-----------------------------------------------------------------------------');

**/

    return jsPrice;

}


/** ---------------------------------------------------------------------------*/
/** UPDATE OBJECTS FROM CONTROLS                                               */
/** Recalcs Objects size + pos from form elements like <input>...              */   
/** ---------------------------------------------------------------------------*/

function updateObjFromControls(mode)
{
    var obj      = canvas.getActiveObject();
    var type     = 'none';
    var ratio    = 1;

 // TEST FONT SIZE

    if($('#objHeight').val() <= parseFloat($('#ENGRAVEMINFONTSIZE').val())) 
    { 
       $('#objHeight').val(parseFloat($('#ENGRAVEMINFONTSIZE').val())); 

       obj.scaleToHeight($('#ENGRAVEMINFONTSIZE').val());
    }

 // SCALE OBJECT SIZE
                 
    if(obj) { type = obj.get('type'); }

    if(mode=='scaleX')       
    { 
       width = $('#objWidth').val() * SIGN.scaleFac;

       if(obj.mmkLayerType=='layerCutForm')
       { 
          // unproportional

             obj.set('scaleX', width /obj.width);
             $('#objWidth').val($('#objWidth').val());
       }
       else
       {
          // proportional

            obj.scaleToWidth(width);
            height = obj.get('height') * obj.get('scaleY');

            $('#objHeight').val((height / SIGN.scaleFac).toFixed(1));
            $('#objWidth').val($('#objWidth').val());
       }
       
       if(type=='i-text') { $('#textSize').val($('#objHeight').val()); }
       
    }
    else if(mode=='scaleY')  
    { 
       height = $('#objHeight').val() * SIGN.scaleFac;

       if(obj.mmkLayerType=='layerCutForm')
       { 
          // unproportional
          obj.set('scaleY', height /obj.height);
          $('#objHeight').val($('#objHeight').val());
       }
       else
       {        
          // proportional
             
            obj.scaleToHeight(height);
            width  = obj.get('width') * obj.get('scaleX');

            $('#objWidth').val((width / SIGN.scaleFac).toFixed(1));
            $('#objHeight').val($('#objHeight').val());
       }

       if(type=='i-text') { $('#textSize').val($('#objHeight').val()); }
    }
    else if(mode=='scaleText')
    {
       height = $('#textSize').val() * SIGN.scaleFac;
       obj.scaleToHeight(height);
       width  = obj.get('width') * obj.get('scaleX');

       $('#objWidth').val((width / SIGN.scaleFac).toFixed(1));
       $('#objHeight').val($('#textSize').val());
    }

    switch(type) 
    {
       default:

             if(mode=='scaleSize') { obj.set({ scaleY: scaleFac, scaleX: scaleFac }); }
             else if(mode=='pos') { obj.set({ left: parseInt($('#objXPos').val()), top: parseInt($('#objYPos').val()) }); }
             else if (mode=='angle') { obj.set({ angle: parseFloat($('#objAngle').val()) }); }

       break;
    } 

 // RESTORE CUTFORM DISPLAYrestore cutform borders

    if(obj.mmkLayerType=='layerCutForm')
    {
       restoreCutFormBorder(obj);
    }

    obj.setCoords();
    canvas.renderAll();

    LOG && console.log('UpdateObjFromControls: Mode: ' + mode+', Type: ' +type );
}


/** ---------------------------------------------------------------------------*/
/** UPDATE OBJECT CONTROLS                                                     */
/** Recalcs Objects size + pos from Canvas/Object                              */   
/** ---------------------------------------------------------------------------*/

function updateObjControls(source)
{

    $('#errorbar').hide();

    var obj  = canvas.getActiveObject();
    var type ='';
    var strokeWidth=0;

    if(obj) { type = obj.get('type'); }
    if(source=='selection:cleared') { hideObjControls(); }

    $('#textSelector').hide();

    LOG && console.log('UpdateObjControls: Type: ' +type+ ', Event: '+source);

    switch(type) 
    {
        case 'i-text':
       
              $('#textSelector').is(':hidden') ? $('#textSelector').show(): '';

              if(obj.mmkLayerType=='layerSerienText') 
              {
                 $('#textBox').val('Es ist ein Serientextfeld ausgewählt. Um den Text zu bearbeiten klicken Sie rechts auf "Bearbeiten/Importieren');
                 $('#textBox').prop('disabled', true);
                 $('#textSymbols').hide();
              }
              else
              {
                 $('#textBox').val(obj.text);
                 $('#textBox').prop('disabled', false);
                 $('#textSymbols').show();
              }

              if (!$('#textFontSelector option[value="' +obj.fontFamily+ '"]').prop("selected", true).length) {
                 //$('#textFontSelector').val($("#textFontSelector option:first").val());
 
                         chooseText($("#textFontSelector option:first").val());

              }
              else
              {  $('#textFontSelector').val(obj.fontFamily); }
             
              $('#textFontList').hide();  // Maybe still open
              $('#textFontListClose').hide(); 

           // TEXT SIZE

              var textSize=parseFloat(obj.get('height') * obj.get('scaleY')/SIGN.scaleFac).toFixed(1);

              if(textSize < parseFloat($('#ENGRAVEMINFONTSIZE').val())) { textSize=$('#ENGRAVEMINFONTSIZE').val();  $('#errorbar').html('Ups, Die Mindestschrifth\u00F6he f\u00FCr diese Gravurmethode liegt bei ' +$('#ENGRAVEMINFONTSIZE').val()+'mm!'); $('#errorbar').show(); }

              $('#textSize').val(textSize);

           // GET TEXT PROPERTIES

              if(obj.fontWeight=='bold')            { $('#textBold').removeClass('grad').addClass('gradSelect'); } else { $('#textBold').removeClass('gradSelect').addClass('grad'); }
              if(obj.fontStyle =='italic')          { $('#textItalic').removeClass('grad').addClass('gradSelect'); } else { $('#textItalic').removeClass('gradSelect').addClass('grad'); }
              if(obj.textDecoration == 'underline') { $('#textUnderline').removeClass('grad').addClass('gradSelect'); } else { $('#textUnderline').removeClass('gradSelect').addClass('grad'); }

           // GET TEXT ALIGNMENT

              var align= obj.get('textAlign');
              
              switch(align)
              {
                  case 'left'     : $("#textSelector td .ttformat").each(function() { $(this).removeClass('gradSelect').addClass('grad'); }); $('#textLeft').addClass('gradSelect'); break;
                  case 'center'   : $("#textSelector td .ttformat").each(function() { $(this).removeClass('gradSelect').addClass('grad'); }); $('#textCenter').addClass('gradSelect'); break;
                  case 'right'    : $("#textSelector td .ttformat").each(function() { $(this).removeClass('gradSelect').addClass('grad'); }); $('#textRight').addClass('gradSelect'); break;
              }

           // SELECT RIGHT FONT SETTINGS + RIGHT TAB

              var x=0;

              $('#responsiveTabs').responsiveTabs('activate',2);
              $("#sideNav li a").each(function() 
              {
                 if(x!=2) { $(this).removeClass('orange').addClass('gray'); }
                 else { $(this).removeClass('gray').addClass('orange'); }
                 x++;
              });

        break;
         
        case 'image':      break;
        case 'path-group': break; // doesn't exist anymore

        default:
    } 

    if(obj)
    {
       checkObjectWidthHeight($('#objWidth').val(),$('#objHeight').val());

    // DISPLAY POSITION 

       $('#objXPos').val(parseFloat(obj.get('left') / SIGN.scaleFac).toFixed(1));
       $('#objYPos').val(parseFloat(obj.get('top') / SIGN.scaleFac).toFixed(1));
       $('#objWidth').val(parseFloat(obj.get('width') * obj.get('scaleX') / SIGN.scaleFac).toFixed(1));
       $('#objHeight').val(parseFloat(obj.get('height') * obj.get('scaleY') / SIGN.scaleFac).toFixed(1));
       $('#objAngle').val(parseInt(obj.get('angle')));

       $('#objectEdit').show(); 

    // IF OBJECT TYPE GROUP AND layerCOMPONENT NO SCALE

       if(obj.mmkLayerType=='layerComponent') 
       {
          $('#objWidth').prop('readonly', true);  $('#objWidth').addClass('inputInactive');
          $('#objHeight').prop('readonly', true); $('#objHeight').addClass('inputInactive');
       }
       else
       {
          $('#objWidth').prop('readonly', false); $('#objWidth').removeClass('inputInactive');
          $('#objHeight').prop('readonly', false); $('#objHeight').removeClass('inputInactive');
       }

    // RESTORE CUTFORM DISPLAYrestore cutform borders

       if(obj.mmkLayerType=='layerCutForm')
       {
          restoreCutFormBorder(obj);
       }
    }

 // CHECK FOR OVERLAYING OBJECTS

    for(x=2; x<canvas.getObjects().length; x++)
    {
        if(obj!=canvas.item(x))
        {
           if(obj && obj.intersectsWithObject(canvas.item(x)))
           {
              $('#errorbar').show(); 
              $('#errorbar').html('Ein oder mehrere Objekte liegen übereinander!');
           }
        }
    }

}



// FOR SHOWING/HIDING CONTORLS

function hideObjControls()
{
    $('#textSelector').hide();
    $('#objectEdit').hide();
 
    $('#addSymbolPanel').hide(); 
    $('#addTextPanel').show(); 
    $('#textSymbols').removeClass('gradSelect').addClass('grad'); 
}


function formatObjControls(obj,mode)
{
    if(mode==1)
    { 
       //if(obj.type)...

       var type = obj.get('type');

       if(type=='i-text')
       {
          obj['setControlVisible']('ml',0);
          obj['setControlVisible']('mb',0);
          obj['setControlVisible']('mr',0);
          obj['setControlVisible']('mt',0);
       }
       else { } // show all
    }

    obj['padding']= SIGN.selectorPadding;  //4;
    obj['cornerSize']=SIGN.selectorCornerSize; //8
    obj['borderColor']=SIGN.selectorBorderColor;
    obj['cornerColor']=SIGN.selectorCornerColor;
    obj['cornerStyle']=SIGN.selectorCornerStyle;
    obj['transparentCorners'] = SIGN.selectorCornerTransparent;

    if(obj['mmkLayerType']=='layerSerienText')
    {
      // RE-REGISTER

//alert('it is layerSerientext');

         obj.set({ caching: false, editable: false, 'borderColor':SIGN.selectorSerienText,'cornerColor':SIGN.selectorSerienText,  mmkLayerType: 'layerSerienText' });
         register_mmkLayerType(obj); 
    }

 // RE-REGISTER OWN VARS // OR THEY WILL DISAPEAR

    if(typeof obj['mmkObjectID'] !== 'undefined')   { obj.set({ mmkObjectID: obj['mmkObjectID'] }); register_mmkObjectID(obj); }

    if(obj['mmkLayerType']=='layerCutForm')   { obj.set({ mmkLayerType: 'layerCutForm' }); register_mmkLayerType(obj); }
    if(obj['mmkLayerType']=='layerFixation')  { obj.set({ selectable: false, mmkLayerType: 'layerFixation' }); register_mmkLayerType(obj); }
    if(obj['mmkLayerType']=='layerOverlay')   { obj.set({ selectable: false, mmkLayerType: 'layerOverlay' }); register_mmkLayerType(obj); }

    if(obj['mmkLayerType']=='layerCompFixation') { obj.set({ selectable: false, mmkLayerType: 'layerCompFixation' }); register_mmkLayerType(obj); }
//    if(obj['mmkLayerType']=='layerCompOverlay')  { obj.set({ selectable: false, mmkLayerType: 'layerCompOverlay' }); register_mmkLayerType(obj); }
    if(obj['mmkLayerType']=='layerComponent')    { obj.set({ selectable: false, mmkLayerType: 'layerComponent' }); register_mmkLayerType(obj); }

    if((obj['mmkLayerFill']) && $('#ENGRAVEFILLABLE').val()==1)   //=='layerFillColor'
    {  obj.set({ mmkLayerFill: 1 }); register_mmkLayerFill(obj); }

 // UNREGISTER VARS  

    if((obj['mmkLayerFill']) && $('#ENGRAVEFILLABLE').val()==0)   //=='layerFillColor'
    {  obj.set({ mmkLayerFill: '' }); register_mmkLayerFill(obj); }


 // TRUE COLOR

    if((obj['mmkTrueColor'])==1) { obj.set({ mmkTrueColor: 1 }); register_mmkTrueColor(obj); }

    LOG && console.log('FormatObjControls: Obj: '+obj+ ', Mode: ' +mode);


}

function register_mmkObjectID(obj)
{
   obj.toObject = (function (toObject) {
                    return function () {
                        return fabric.util.object.extend(toObject.call(this), {
                              mmkObjectID: this.mmkObjectID
                        });
                     };
                  })(obj.toObject);
}

function register_mmkLayerType(obj)
{
   obj.toObject = (function (toObject) {
                    return function () {
                        return fabric.util.object.extend(toObject.call(this), {
                              mmkLayerType: this.mmkLayerType
                        });
                     };
                  })(obj.toObject);
}

function register_mmkLayerFill(obj)
{
   obj.toObject = (function (toObject) {
                    return function () {
                        return fabric.util.object.extend(toObject.call(this), {
                              mmkLayerFill: this.mmkLayerFill
                        });
                     };
                  })(obj.toObject);
}

function register_mmkTrueColor(obj)
{
   obj.toObject = (function (toObject) {
                   return function () {
                      return fabric.util.object.extend(toObject.call(this), {
                         mmkTrueColor: this.mmkTrueColor
                   });
                  };
                 })(obj.toObject);
}

function selectObjListLayer(id)
{
    canvas.setActiveObject(canvas.item(id)); 
    calculateSign('selectObjectFromListLayer',0);
}


// * MOVE OBJ FUNCTIONS * //

function moveObj(direction)
{
    var obj  = canvas.getActiveObject();

    if(obj)
    {
       switch (direction)
       {
           case 'left':  obj.set('left',parseInt(obj.get('left')) - 1); break; 
           case 'right': obj.set('left',parseInt(obj.get('left')) + 1); break; 
           case 'up':    obj.set('top',parseInt(obj.get('top')) - 1);   break; 
           case 'down':  obj.set('top',parseInt(obj.get('top')) + 1);   break; 
 
           case 'rotate': 
                    
                     if(obj.get('angle') < 90)        { obj.set({'angle':90}); centerObjHV(); }
                     else if(obj.get('angle') < 180) { obj.set({'angle':180}); centerObjHV();  }
                     else if(obj.get('angle') < 270) { obj.set({'angle':270});  centerObjHV(); }
                     else if(obj.get('angle') < 360) { obj.set({'angle':0});  centerObjHV(); } 
           break;

           case 'flipx':  obj.set('flipX',!obj.flipX); break;
           case 'flipy':  obj.set('flipY',!obj.flipY); break;
       }

       obj.setCoords();
       updateObjControls('func_moveObj');
       canvas.renderAll();
    }
}

function centerObjHV () { var obj  = canvas.getActiveObject(); obj.center(); obj.setCoords(); updateObjControls('func_centerObjHV'); canvas.renderAll(); }
function centerObjH  () { var obj  = canvas.getActiveObject(); obj.centerH(); obj.setCoords(); updateObjControls('func_centerObjH'); canvas.renderAll(); }
function centerObjV  () { var obj  = canvas.getActiveObject(); obj.centerV(); obj.setCoords(); updateObjControls('func_centerObjV'); canvas.renderAll(); }
function removeObj   () 
{ var obj  = canvas.getActiveObject(); 
  if(obj) 
  { 
     if(obj.mmkLayerType=='layerSerienText') 
     { 
        //alert('Warning: Serientext Layer entfernt'); 

        $('#serientext').hide();
        $('#TXTMODE').val(0);
        $('#TXTDATA').val('');

        $('#MENGE').prop('readonly', false);  
     }
     else if(obj.mmkLayerType=='layerComponent') 
     { 
           var componentList = getComponents();
               componentList[obj.mmkObjectID]--;
               setComponents(componentList);
     }
     canvas.remove(obj); hideObjControls(); calculateSign('removeObj()',0); canvas.renderAll(); }
  }


function fillObj(color)
{
    var obj  = canvas.getActiveObject();

    if(obj.mmkLayerType=='layerCutForm') {}
    else if(obj.mmkLayerType=='layerFixation') {}
    else 
    { 
        if(obj.get('type')=='image')
        {
           obj.filters.push(filterBlendColor(color));
           obj.set({fill: color, mmkLayerFill: 1});
           obj.applyFilters();
           canvas.renderAll();
        }
        else
        { 
        // FILL UN- / GROUPED OBJECTS       

           obj.set({ mmkLayerFill: 1 });  
           fillObjWithColor(obj, color);

           //if (obj.type == 'group') 
           //{
             //  var group = obj;
              // for (var i=0; i < obj.getObjects().length; i++) { obj.item(i).set({'fill':color}); }
           //}
           //else 
           //{   obj.set({'fill':color}); } 

           
        }

        register_mmkLayerFill(obj);
    }

    obj.setCoords();
    updateObjControls('func_fillObj');
    canvas.renderAll();

    calculateSign('fillObj()',0);
}

/** ---------------------------------------------------------------------------*/
/** RESIZE BACK                                                                */
/** ---------------------------------------------------------------------------*/

function resizeBack(x,y)
{
 // HIDE INFO MESSAGES

    $('#errorbar').hide();

 // DESELECT ALL OBJECTS

    canvas.discardActiveObject();
    hideObjControls();

 // TYPECAST

    x = parseFloat(x);   //Only for full digits
    y = parseFloat(y);

    //alert(x +',' +y);

 // IF SIZE > x CHANGE MASSSTAB

    var max = SIGN.dimMax.split('x');
    var min = SIGN.dimMin.split('x');

 // CHECK MAX/MIN DIM

    if($("#DIMMODE1").is(':checked'))
    {
       if(x.length>=6 || x > parseInt(max[0])) { x=max[0]; $('#errorbar').html('Der Artikel kann maximal ' +max[0]+' x '+max[1]+ ' mm gro&szlig; sein!');    $('#WIDTH').val(max[0]+'.0');  $('#errorbar').show(); }
       if(x.length<1  || x < parseInt(min[0])) { x=min[0]; $('#errorbar').html('Der Artikel muss mindestens ' +min[0]+' x '+min[1]+ ' mm gro&szlig; sein!'); $('#WIDTH').val(min[0]+'.0');  $('#errorbar').show(); }
       if(y.length>=6 || y > parseInt(max[1])) { y=max[1]; $('#errorbar').html('Der Artikel kann maximal ' +max[0]+' x '+max[1]+ ' mm gro&szlig; sein!');    $('#HEIGHT').val(max[1]+'.0'); $('#errorbar').show(); }
       if(y.length<1  || y < parseInt(min[1])) { y=min[1]; $('#errorbar').html('Der Ariktel muss mindestens ' +min[0]+' x '+min[1]+ ' mm gro&szlig; sein!'); $('#HEIGHT').val(min[1]+'.0'); $('#errorbar').show(); }
    }  

 // XAXIS CORRECT SIZE

    xAxisDim= parseFloat(x).toFixed(1);
    yAxisDim= parseFloat(y).toFixed(1);

 // EMMIT MAX RATIO

    var cw=728; // CANVAS MAX WIDTH
    var cy=470; // CANVAS MAX HEIGHT

    var xRatio = parseFloat(cw/x);
    var yRatio = parseFloat(cy/y); //.toPrecision(5);


 // GET SCALE DIM

    if(x > y && (xRatio*y) < cy)
    {
        SIGN.scaleFac=xRatio; //parseFloat(728/x);
        x = 728;
        //y = parseInt(y*SIGN.scaleFac);

        y = y*SIGN.scaleFac;
    }
    else
    {
        SIGN.scaleFac=yRatio; //parseFloat(470/y);  //490
        y = 470;
        //x = parseInt(x*SIGN.scaleFac);
        x = x*SIGN.scaleFac;
    }  

    if(parseInt(SIGN.scaleFac)==0) { //
                 //var scaleDec=SIGN.scaleFac.replace(/0\./g,''); 
                 //SIGN.scale='1:'+parseInt(scaleDec); 

                 if(SIGN.scaleFac==xRatio) { SIGN.scale='1:'+ Math.round(xAxisDim/cw);  }
                 else                      { SIGN.scale='1:'+ Math.round(yAxisDim/cy);  }
    }
    else { SIGN.scale=parseInt(SIGN.scaleFac)+':1'; }
   
 // RESIZE OBJECT BY TYPE

    var obj       = canvas.item(0);
    var borderobj = canvas.item(1);
    var type = obj.get('type');

 // RECALC BORDER

    calculateBorder($('#BORDERID').val()); 

    LOG && console.log('ResizeBack to: '+ x+ 'x' +y+ ' ('+SIGN.scaleFac+' / ' + SIGN.scale+')');

    switch(type)
    {
        case 'rect'   : //canvas.item(0)['width'] = x; canvas.item(0)['height'] = y; 
                         //canvas.item(1)['width'] = x-SIGN.borderDistance; canvas.item(1)['height'] = y-SIGN.borderDistance; 

                        obj.set({ width: x, height: y});
                        borderobj.set({ width: x-SIGN.borderDistance, height: y - SIGN.borderDistance}); 

                if($('#FORMDATA').val()=='rounded')
                {       
                        obj.set({rx:parseInt(SIGN.cornerRadius * SIGN.scaleFac), ry: parseInt(SIGN.cornerRadius * SIGN.scaleFac)});
                        borderobj.set({rx:parseInt(SIGN.cornerRadius * SIGN.scaleFac), ry: parseInt(SIGN.cornerRadius * SIGN.scaleFac)}); 
                        //canvas.item(0)['rx'] = parseInt(SIGN.cornerRadius * SIGN.scaleFac); 
                        //canvas.item(0)['ry'] = parseInt(SIGN.cornerRadius * SIGN.scaleFac); 
                        //canvas.item(1)['rx'] = parseInt(SIGN.cornerRadius * SIGN.scaleFac); 
                        //canvas.item(1)['ry'] = parseInt(SIGN.cornerRadius * SIGN.scaleFac); 
                }

        break;


        case 'circle' : alert('circle not detected'); break;

        case 'ellipse': obj.set({ rx: parseInt(x/2), ry: parseInt(y/2) });
                         borderobj.set({ rx: parseInt((x-SIGN.borderDistance)/2), ry: parseInt((y-SIGN.borderDistance)/2) });
        break;
         
        case 'path': 
        case 'group': 
        case 'path-group': obj.set({ top:  parseInt(y/2), left: parseInt(x/2), scaleY: parseInt(y)/obj.height, scaleX: parseInt(x)/obj.width });
                           borderobj.set({ top:  parseInt((y-SIGN.borderDistance)/2),
                                          left: parseInt((x-SIGN.borderDistance)/2),
                                          scaleY: parseInt(y-SIGN.borderDistance)/borderobj.height,
                                          scaleX: parseInt(x-SIGN.borderDistance)/borderobj.width
                        });

        break;
    }

 // REDRAW BORDEROBJ

    redrawBorder(borderobj);

 

 // CALC OBJECTS

    obj.center(); 
    obj.setCoords(); 
    borderobj.center(); 
    borderobj.setCoords(); 
    
 // SET DIMENSION DISPLAY

    var xCorr = 20;

    $('#xDim').css('width', x+'px');
    $('#xDim').css('left', xCorr+'px');
 
    $('#xDimValue').html('Breite: '+xAxisDim+' mm, H\u00F6he: '+yAxisDim+' mm &nbsp;(Ma\u00DFstab '+ SIGN.scale+')');

 // SET SCALE

    SIGN.width=x;
    SIGN.height=y;

 // CHECK IF FIXATION IS POSSIBLE

    delay(function() {

          var startdelay = timer(0);

          checkFixation();
          restoreComponents();

          redrawStayOnTopLayer();

          calculateSign('resizeBack()',0);

          var tdiffdelay = timer(startdelay);
          LOG && console.log('Delayed Object Loader in resizeBack() (25 ms) loads in: ' +tdiffdelay);

    }, 25);

    canvas.renderAll();
}

/** ---------------------------------------------------------------------------*/
/** CHANGE BACK COLOR                                                          */
/** ---------------------------------------------------------------------------*/

function changeBackColor(obj,color,bgcolor,name,id,bgimage,groupid, mustCalculateSign)
{

 // DESELECT ALL OBJECTS

    canvas.discardActiveObject();
    hideObjControls();

 // SET BG PATTERN ON SIGN

    if(bgimage) { loadBackgroundPattern(bgimage); }
    else        { canvas.item(0).set({'fill':bgcolor}); }

 // SET FOREGROUND FOR ALL OBJECTS EXCEPT FILL COLORS IN FILLABLE MODE

    for(x=2; x<canvas.getObjects().length; x++)
    {
        if(canvas.item(x).mmkLayerType=='layerCutForm')        { LOG && console.log('cutform ('+x+') - no fill'); } 
        else if(canvas.item(x).mmkLayerType=='layerFixation') { LOG && console.log('fixation ('+x+') - no fill'); }
        else if(canvas.item(x).mmkLayerType=='layerOverlay')  { LOG && console.log('overlay ('+x+') - no fill'); }
        else
        {
          /** MIT FARBE AUSLEGBAR/FUELLBAR ? **/

          if($('#ENGRAVEFILLABLE').val()==1)
          {
              if(canvas.item(x).mmkLayerFill==1) { }
              else 
              { 
               // FILL UN- / GROUPED OBJECTS

                  fillObjWithColor(canvas.item(x), color);

                  //if (canvas.item(x).type == 'group') { var group = canvas.item(x); for (var i=0; i < group.getObjects().length; i++) { group.item(i).set({'fill':color}); }}
                  //else { canvas.item(x).set({'fill':color}); } 
              }
          }
          else 
          { 

//alert('not fillable');
           // FILL UN- / GROUPED OBJECTS

              fillObjWithColor(canvas.item(x), color);

              //if (canvas.item(x).type == 'group') { var group = canvas.item(x); for (var i=0; i < group.getObjects().length; i++) { group.item(i).set({'fill':color}); }}
              //else { canvas.item(x).set({'fill':color}); } 
          }

          /** BILDER EINFAERBEN FUER TRUE COLOR ? **/

          if(canvas.item(x).get('type')=='image')
          {
             

             if($('#ENGRAVEMETHOD option:selected').val()!=8)
             {
                //canvas.item(x).filters = [];   // REMOVE EXISTING FILTERS TO AVOID STACKING

                if(canvas.item(x).mmkTrueColor==1)  // make sure there is mostly transparent backgrounds
                {
                   //alert('but it is mmkTrueColor, dude');
                   canvas.item(x).filters.push(filterRemoveWhite());
                   canvas.item(x).mmkTrueColor=0;
                }

                canvas.item(x).filters.push(filterBlendColor(color));
                canvas.item(x).applyFilters();
                //canvas.renderAll(); 
            }
            else
            {

                canvas.item(x).filters = [];   // REMOVE EXISTING FILTERS TO AVOID STACKING

                //canvas.item(x).filters = [];
                canvas.item(x).applyFilters();
                canvas.item(x).mmkTrueColor=1;
            //    //canvas.renderAll(); 

            //alert('resetting OBJ');
            }
          }
        }

        /** SELEKTOREN/MARKIERUNG EINFAERBEN **/
 
        fillObjSelector(canvas.item(x),color);

    }
  
 // DEFINE NEW COLORS
  
    SIGN.color=color;
    SIGN.bgcolor=bgcolor;

 // SET OBJECT CONTROLS COLORS
 
    SIGN.selectorBorderColor=color;
    SIGN.selectorCornerColor= color;

 // IF STROKE ?

     canvas.item(1).set({ stroke: color });

     $('#wkColor').text(name);

  // UPDATE HIDDEN INPUTS
      
     $('#COLORID').val(id);
     $('#COLORNAME').val(name);
     $('#COLORGROUPID').val(groupid);
     $('#COLOR').val(color);
     $('#COLORBG').val(bgcolor);
     $('#COLORBGIMAGE').val(bgimage);

  // SELECT AND CHANGE PROPERTIES DISPLAY

     $("#colorSelector .scolors").each(function() { $(this).removeClass('gradSelect').addClass('grad'); });
     $("#color"+id).addClass('gradSelect');

     var strength = $("#color"+id).data('strength');
     $('.strength').html(strength);

     var surface = $("#color"+id).data('surface');
     $('.surface').html(surface);

     var props = $("#color"+id).data('props');
     $('.props').html(props);

     var lztime = $("#color"+id).data('lztime');
     $('.lztime').html(lztime);

     canvas.renderAll();

     if(mustCalculateSign) { calculateSign('changeBackColor()',0); }  // NO UPDATE EVENT?

     LOG && console.log('ChangeBackColor: '+bgcolor,name,id,bgimage,groupid, mustCalculateSign);

}

function loadBackgroundPattern(url) {
    fabric.util.loadImage(url, function(img) {
      var pattern = new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      });

      canvas.item(0).set({'fill':pattern});
      canvas.renderAll();
      
    });
  }

/** ---------------------------------------------------------------------------*/
/** CREATE BACKGROUND AREA                                                     */
/** ---------------------------------------------------------------------------*/

function createBackgroundArea(form,formdata,id,border,borderid,mustCalculateSign)
{

  // DESELECT ALL OBJECTS

     //canvas.deactivateAll().renderAll(); // NOT WORKING ON 2.x
     canvas.discardActiveObject();
     hideObjControls();

  // REMOVE BACK + BORDER LAYER // DECREMENT

     if(canvas.item(0)) { canvas.remove(canvas.item(0)); }  // BACKGROUND LAYER 
     if(canvas.item(0)) { canvas.remove(canvas.item(0)); }  // BORDER LAYER => WAS SENT BACK TO ZERO
     if(!borderid) { borderid=$('#BORDERID').val(); } // LATE SIZE

 // CHECK IF BORDER IS ALLOWED (FOR NOW <4 show)
 
     if(id>=4)  // SFORMID
     {
        borderid=1;
        SIGN.border=0;

        $('#BORDERID').val(1);
        $('#BORDER').val('none'); 

        $("#borderSelector .sborders").each(function() 
        { 
           if($(this).attr('id')!='sborder1') 
           { 
               var ltid = $(this).attr('id');
                   ltid =ltid.replace('sborder','');

               $('#sborderListItem' + ltid).fadeOut(1000); 
           }
        });
     }
     //else if($('#BORDERID').val()==3 && parseInt(SIGN.height) < 25) 
     //{

        //alert('CreateBackground wird nicht bei Grössenwechsel ausgeführt');

        // SET BORDEr TO 2

     //   borderid=2;
     //   SIGN.border=0;

     //   $('#BORDERID').val(2);
     //   $('#BORDER').val('thin'); 

        //$("#borderSelector .sborders").each(function() 
        //{ 
        //   if($(this).attr('id')!='sborder1') 
         //  { 
         //      var ltid = $(this).attr('id');
         //          ltid =ltid.replace('sborder','');

     //          $('#sborderListItem3').fadeOut(1000); 
         //  }
        //});
     //}
     else
     {

        $("#borderSelector .sborders").each(function() 
        { 
           if($(this).attr('id')!='sborder1') 
           { 
               var ltid = $(this).attr('id');
                   ltid =ltid.replace('sborder','');

               $('#sborderListItem' + ltid).fadeIn(1000); 
           }
        });
     }

  // SET BORDER

     calculateBorder(borderid);

     // alert('borderDistance: ' + SIGN.borderDistance + ' => Width/Height: ' + SIGN.border);
     LOG && console.log('CreateBackgroundArea: Dim: '+ SIGN.width +' x '+SIGN.height+' ,Border: '+ SIGN.borderDistance +' x '+SIGN.borderDistance+' ,Formdata: '+formdata);

  // SET NEW OBJECT

     switch(formdata)
     {
      
        case 'rectangle':

              var bgObj      = new fabric.Rect({ width:  parseInt(SIGN.width), height: parseInt(SIGN.height) });
              var borderObj  = new fabric.Rect({ width:  parseInt(SIGN.width - SIGN.borderDistance), height: parseInt(SIGN.height - SIGN.borderDistance)});

        break;

        case 'rounded': 

              //var bgObj      = new fabric.Rect({ rx: 10, ry: 10, width:  parseInt(SIGN.width), height: parseInt(SIGN.height)});
              //var borderObj  = new fabric.Rect({ rx: 10, ry: 10, width:  parseInt(SIGN.width - SIGN.borderDistance), height: parseInt(SIGN.height - SIGN.borderDistance)});

              var bgObj      = new fabric.Rect({ rx: parseInt(SIGN.cornerRadius * SIGN.scaleFac), ry: parseInt(3 * SIGN.scaleFac), width:  parseInt(SIGN.width), height: parseInt(SIGN.height)});
              var borderObj  = new fabric.Rect({ rx: parseInt(SIGN.cornerRadius * SIGN.scaleFac), ry: parseInt(3 * SIGN.scaleFac), width:  parseInt(SIGN.width - SIGN.borderDistance), height: parseInt(SIGN.height - SIGN.borderDistance)});


        break;

        case 'ellipse' :

              var bgObj      = new fabric.Ellipse({ rx: parseInt(SIGN.width/2), ry: parseInt(SIGN.height/2)});
              var borderObj  = new fabric.Ellipse({ rx: parseInt((SIGN.width-SIGN.borderDistance)/2), ry: parseInt((SIGN.height- SIGN.borderDistance)/2)});

        break;

        default:

              var bgObj = new fabric.Path(formdata);
                  bgObj.set({ top:  parseInt(SIGN.height/2),
                              left: parseInt(SIGN.width/2),
                              scaleY: parseInt(SIGN.height)/bgObj.height,
                              scaleX: parseInt(SIGN.width)/bgObj.width,
                             });

              var borderObj = new fabric.Path(formdata);
                  borderObj.set({ top:  parseInt(SIGN.height-SIGN.borderDistance)/2,
                                  left: parseInt(SIGN.width-SIGN.borderDistance)/2,
                                  scaleY: parseInt(SIGN.height-((SIGN.borderDistance*2)))/borderObj.height,
                                  scaleX: parseInt(SIGN.width-((SIGN.borderDistance*2)))/borderObj.width,
                                  centeredScaling: 1
                  });

        break; 
     }

 // REDRAW SIGN + BORDEROBJ

    bgObj.set({ left: 10, top: 10, originX: 'left', originY: 'top', fill: SIGN.bgcolor, shadow: 'rgba(0,0,0,0.5) 0 0 15px', strokeWidth: 0, stroke: SIGN.color, 
                 absolutePositioned: true, clip_id: 'bgObj', objectCaching: false });

    redrawBorder(borderObj);

    if($('#COLORBGIMAGE').val().length > 0) { loadBackgroundPattern($('#COLORBGIMAGE').val()); }

 // SET OBJECT

    $('#FORMID').val(form);
    $('#FORMID').val(id);
    $('#FORMDATA').val(formdata);

 // SELECT BaCKGROUND + BORDER SELECTORS

    $("#formSelector .sforms").each(function() { $(this).removeClass('gradSelect').addClass('grad'); });
    $("#sform"+id).addClass('gradSelect');

    $("#borderSelector .sborders").each(function() { $(this).removeClass('gradSelect').addClass('grad'); });
    $("#sborder"+borderid).addClass('gradSelect');

 // PLACE OBJECTS

    canvas.add(bgObj)     //... sent to back last added
    canvas.add(borderObj)

    bgObj.selectable = false;
    bgObj.setCoords();  
    bgObj.center();
     
    borderObj.selectable = false;
    borderObj.setCoords(); 
    borderObj.center();

    canvas.sendToBack(borderObj);  // ==> set LVL Border to Level 0 canvas.item(1)
    canvas.sendToBack(bgObj);  // ==> set To Level 0 canvas.item(0) 


 // CHECK IF FIXATION IS POSSIBLE

    $.when(checkFixation()).done(function(ev) {
      //checkFixation();
      canvas.renderAll();  

      if(mustCalculateSign==1) { calculateSign('createBackgroundArea()',0); }
    });


 // CLIPPING TO OBJECT

    if($('#PRODUCTID').val()=='37')
    {
        bgLayer=bgObj;
        //canvas.item(2).set({clipPath: bgLayer, clip_target: 'bgLayer'});
    }
    else
    {
        bgLayer=null;
        //canvas.item(2).set({clipPath: bgLayer, clip_target: 'bgLayer'});
    }


    for(x=2; x<canvas.getObjects().length; x++)
    {
        canvas.item(x).set({clipPath: bgLayer, clip_target: 'bgLayer' });          
        canvas.renderAll();  
    }

    //return bgObj;
}


/** ---------------------------------------------------------------------------*/
/**                                                                            */
/** BORDER FUNCTIONS                                                           */
/**                                                                            */   
/** ---------------------------------------------------------------------------*/

function createBorder(borderType,id)
{
    $('#BORDERID').val(id);
    $('#BORDER').val(borderType); 

    createBackgroundArea($('#FORM').val(),$('#FORMDATA').val(),$('#FORMID').val(),$('#BORDER').val(),$('#BORDERID').val(),1);
}


function calculateBorder(borderid)
{
    switch(borderid)
    {
        case '2' : 
               
              SIGN.border         = 2 * SIGN.scaleFac;  //SIGN.width - 14;  
              SIGN.borderDistance = 4 * SIGN.scaleFac + SIGN.border; //parseInt((SIGN.border) * SIGN.scaleFac);  
        break;

        case '3' : 
 
              SIGN.border         = 5 * SIGN.scaleFac;  //SIGN.width - 14;  
              SIGN.borderDistance = 10 * SIGN.scaleFac + SIGN.border; //parseInt((SIGN.border) * SIGN.scaleFac);  
        break;
                                      // THIN BORDER
        default:  SIGN.border=0; SIGN.borderDistance=0; break; 
    }
}

function redrawBorder(borderobj)
{
     LOG && console.log('RedrawBorder: SIGN.width: ' + SIGN.width + ', SIGN.height: ' + SIGN.height + ', SIGN.scaleFac: ' + SIGN.scaleFac + ', BorderVars: ' + SIGN.border + ', ' + SIGN.borderDistance );

     borderobj.set({ 
               top:  parseInt(SIGN.height-SIGN.borderDistance), //2,
               left: parseInt(SIGN.width-SIGN.borderDistance),  //2,
               originX: 'left', originY: 'top', fill: 'rgba(0,0,0,0)',  
               strokeWidth: SIGN.border, stroke: SIGN.color 
     });
}


/** ---------------------------------------------------------------------------*/
/**                                                                            */
/** STAY ON TOP LAYER OR MABE LATER BGIMAGE BACKGROUND IMAGE FUNCTIONALITY (POSSIBLE FOR)             */
/**                                                                            */   
/** ---------------------------------------------------------------------------*/


function redrawStayOnTopLayer()
{

    /* DELETE EXISTING OVERLAY IMAGES */

       canvas.setOverlayImage(null,canvas.renderAll.bind(canvas));

       //var obj = canvas.item(0);
       //$(obj).trigger('click'); // nasty hack

       if($('#page').css('background-image') != 'none') {
           $('#bgStuck').trigger('click');
       }

    /* getPosition */

       var ty= canvas.item(0).get('top');
       var tx= canvas.item(0).get('left');
       var sw= canvas.item(0).get('width');
       var sh= canvas.item(0).get('height');

    /* LOAD ON PRODUCT */

       if($('#PRODUCTID').val()=='37')
       {
           //var posLeftWS  = parseFloat (4.5 * SIGN.scaleFac);
           //var posTopWS   = parseFloat (5 * SIGN.scaleFac);
           //var sizeWS     = parseInt(30);
           //var scaleWS = parseFloat(sizeWS / (300/SIGN.scaleFac));

           //fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/overlay/gardena_overlay.png", function(obj) 
           //{ 
           //    obj.set({ scaleX: 1, scaleY: 1, left: 20,  top: 400, selectable: false, mmkLayerType: 'layerStayOnTop' }); //, mmkLayerType: 'layerOverlay'});
           //    canvas.add(obj).renderAll();
           //    register_mmkLayerType(obj);
           //});

           canvas.setOverlayImage("https://schilderstyle.de/konfigurator/xkonf/overlay/gardena_overlay.png", function() {
           //canvas.overlayImage; // && canvas.overlayImage.scaleToWidth()
           canvas.renderAll()
           }, { scaleX: 1, scaleY: 1, left: 20,  top: 400, selectable: false

  });

console.log('TX,TY: ' +tx+',' +ty+ ' => ');

    //canvas.discardActiveObject();
    //hideObjControls();
    canvas.calcOffset();
    canvas.renderAll.bind(canvas);

    $('#canvasCopy').css({'background':"url(https://schilderstyle.de/konfigurator/xkonf/overlay/garden_bg.jpg)",'background-size':'cover'}); $('#xDim').css('border-top-color','#ccc'); //$('#xDimValue').css('color','#555'); });

    }
}

/** ---------------------------------------------------------------------------*/
/**                                                                            */
/** TEXT BASED FUNCTIONS                                                       */
/**                                                                            */   
/** ---------------------------------------------------------------------------*/

function chooseText(font)
{

     $('#textFontSelector').val(font);

     formatText("font");

     $('#textFontList').hide();
     $('#textFontListClose').hide(); 
}


function addText()  
{ 
 // TEXT ADD

//alert(bgLayer.type);
 
    var text = $('#textBox').val();
    //var size = canvas.item(0).width >= canvas.item(0).height ? parseInt(canvas.item(0).width/12) : parseInt(canvas.item(0).height/10);
    var size = parseInt(canvas.item(0).width/12);
    var font = $('#textFontSelector').val();

    text= 'Hier Text eingeben';

    if(text)
    {
       var txtPlace = new fabric.IText(text, {
           left: 100,
           top: 100,
           fill: SIGN.color,
           fontSize: size,
           fontFamily: font,
           caching: false,
           clipPath: bgLayer,
           clip_target: 'bgLayer', 
           centeredScaling: 1
       });

      formatObjControls(txtPlace,1);
      canvas.add(txtPlace);
      canvas.setActiveObject(txtPlace);
      centerObjHV();

      canvas.renderAll();  

      $('#textAdder').prop("disabled",true);

      calculateSign('addText()',0);

      $('#textAdder').prop("disabled",false);

    } else { alert('Bitte geben Sie einen Text ein'); }
}


function addSerienText(text)  
{ 
 // TEXT ADD
 
    //var size = canvas.item(0).width >= canvas.item(0).height ? parseInt(canvas.item(0).width/12) : parseInt(canvas.item(0).height/10);
    //var size = parseInt(canvas.item(0).width/123 * SIGN.scaleFac);
        var size = parseInt(((canvas.item(0).width/12) + (canvas.item(0).width/12/4))); // * 5);
    var font = $('#textFontSelector').val();

    if(text)
    {
       var dpParam = getSerienTextDisplay(text);
       
           text = dpParam[0];
       var signs = dpParam[1];

       var txtPlace = new fabric.IText(text, {
           left: 100,
           top: 100,
           fill: SIGN.color,
           fontSize: size,
           fontFamily: font,
           caching: false,
           editable: false,
           centeredScaling: 1,
           //clipPath: bgLayer,
           //clip_target: 'bgLayer', 
       });

       txtPlace.mmkLayerType = 'layerSerienText';  // add your custom attributes
       txtPlace.toObject = (function (toObject) {
           return function () {
              return fabric.util.object.extend(toObject.call(this), {
                  mmkLayerType: this.mmkLayerType
              });
           };
       })(txtPlace.toObject);


       formatObjControls(txtPlace,1);
       canvas.add(txtPlace);
       canvas.setActiveObject(txtPlace);
       centerObjHV();

       canvas.renderAll();  

       calculateSign('addSerienText()',0);

       return signs;


    } else { alert('Bitte geben Sie einen Text ein'); }
}

function updateSerienText(text,obj)  
{ 

//alert('UPDST:' + text);

    if(text)
    {

       var dpParam = getSerienTextDisplay(text);

//alert(dpParam[0]+','+dpParam[1]);
       
           text = dpParam[0];
       var signs = dpParam[1];

       //obj.setText(text);
       obj.set({'text': text});
       obj.setCoords();
       canvas.renderAll();

       calculateSign('updateSerienText()',0); 

       return signs;
    }

}

function getSerienTextDisplay(text)
{

        var retText='';

//alert('GETST:' +text);

        text=String(text);


//alert('GETST// SO STR:' +text);


        var txt='';

        var ix=0; var drow=0; var longWord=''; var longDrow=0; 
        var dpRow = new Array();
        var rows  = text.split('|');
 

//alert(text);

     // GET LINES NEEDED

        var rx=0;
        var linesNeeded=5;
        var lines= new Array(0,0,0,0,0);

        for(t=0; t<rows.length; t++)
        {
             if(rows[t].length>0 && lines[rx]!=1) { lines[rx]=1; }

             rx++;
             if(rx==5) { rx=0; }
        }

        //alert(lines);

        for(x=5; x>=0; x--)
        {
            if(lines[x]==1) { break; }
            if(lines[x]==0) { linesNeeded--; }
        }

        //alert(rows + '>>' + linesNeeded);

        for(i=0; i<rows.length; i++)
        {
            if(rows[i].length > longWord.length) { longWord=rows[i]; longDrow=drow; }

            if(ix<linesNeeded)
            {
               txt = ix==0 ? txt + rows[i] : txt + '\n'+rows[i];
            }

            ix++;  
            if(ix==5) { dpRow[drow]=txt; drow++; txt=''; ix=0; }
        }

        var retText=dpRow[longDrow];

        //alert(retText+','+longDrow);

//console.log(typeof retText);

   return [retText,drow];
}


function refreshSerienTextForm(text)
{

   //alert(text);

   var rows  = text.split('|'); 
   
   var ix=0; var row=new Array();
  //var add       = $("#add");         // ADD button
     
   for(i=0; i<rows.length; i++)
   {
       row[ix]=rows[i]    

       ix++;

       if(ix==5) { 
   
        if(i==4) { $('#noSerienText').hide(); }

        $("#TDATATABLE").append('<tr><td>Entwurf:</td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[0]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[1]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[2]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[3]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[4]+'"></td><td><button type="button" class="deletelink" style="position:relative; top:2px; height:31px" title="Entwurf l&ouml;schen"><b>X</b></button></td></tr>'); //add input box
        ix=0; row= new Array();
       }
   }

 // REBUILD UNDEFINDED VALUES

   if(ix!=0)
   {

      if(typeof row[0] === 'undefined') { row[0]=''; }
      if(typeof row[1] === 'undefined') { row[1]=''; }
      if(typeof row[2] === 'undefined') { row[2]=''; }
      if(typeof row[3] === 'undefined') { row[3]=''; }
      if(typeof row[4] === 'undefined') { row[4]=''; }  

      $("#TDATATABLE").append('<tr><td>Entwurf:</td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[0]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[1]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[2]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[3]+'"></td><td><input type="text" name="stFields[]" class="txtZeile" value="'+row[4]+'"></td><td><button type="button" class="deletelink" style="position:relative; top:2px; height:31px" title="Entwurf l&ouml;schen"><b>X</b></button></td></tr>'); //add input box
   }

}


function formatText(mode)  
{
    var obj  = canvas.getActiveObject();
    
    switch(mode)
    {
         case 'bold'     : if(obj.fontWeight=='normal') { obj.set({'fontWeight':'bold'}); $('#textBold').removeClass('grad').addClass('gradSelect'); } else { obj.set({'fontWeight':'normal'}); $('#textBold').removeClass('gradSelect').addClass('grad'); } break;
         case 'italic'   : if(obj.fontStyle =='')       { obj.set({'fontStyle':'italic'}); $('#textItalic').removeClass('grad').addClass('gradSelect'); } else { obj.set({'fontStyle':''}); $('#textItalic').removeClass('gradSelect').addClass('grad'); } break;
         case 'underline': if(obj.get('underline') == false) { obj.set({'underline': true}); $('#textUnderline').removeClass('grad').addClass('gradSelect'); } else { obj.set({'underline':false}); $('#textUnderline').removeClass('gradSelect').addClass('grad'); } break; 

         case 'left'     : $("#textSelector td .ttformat").each(function() { $(this).removeClass('gradSelect').addClass('grad'); }); $('#textLeft').addClass('gradSelect'); obj.set({'textAlign':'left'}); break; //,'originX':'left','left': canvas.item(0).left });   break;
         case 'center'   : $("#textSelector td .ttformat").each(function() { $(this).removeClass('gradSelect').addClass('grad'); }); $('#textCenter').addClass('gradSelect'); obj.set({'textAlign':'center'}); break;  //,'originX':'center','left': (canvas.item(0).width/2) 
         case 'right'    : $("#textSelector td .ttformat").each(function() { $(this).removeClass('gradSelect').addClass('grad'); }); $('#textRight').addClass('gradSelect'); obj.set({'textAlign':'right'}); break; //, 'originX':'right', 'left': canvas.item(0).left + canvas.item(0).width }); console.log('PosX: ' +urx[0]); break; //,'originX': 'right', 'left': obj.left + obj.width});  break;
     
         case 'font'     : obj.set({'fontFamily':$('#textFontSelector').val()}); break;
    }
  
    obj.setCoords();
    canvas.renderAll();
    calculateSign('formatText()',0);
} 

/** ---------------------------------------------------------------------------*/
/** IMAGE BASED FUNCTIONS                                                      */
/** ---------------------------------------------------------------------------*/

function addImage(image) 
{ 
    var im = image.split('|');

    image = im[0];
    var resolution = parseInt(im[1]);

    var ext     = image.substr( (image.lastIndexOf('.') +1) ).toLowerCase();
    var scRatio = canvas.item(0).get('width') >= canvas.item(0).get('height') ? 0:1;
    var scFac   = canvas.item(0).get('width') >= canvas.item(0).get('height') ? (canvas.item(0).get('height')/canvas.item(0).get('width')) : (canvas.item(0).get('width')/canvas.item(0).get('height'));

    var width   = scRatio == 0 ? parseInt(canvas.item(0).get('width')/2) : parseInt(canvas.item(0).get('width') * scFac);
    var height  = scRatio == 1 ? parseInt(canvas.item(0).get('height')/2) : parseInt(canvas.item(0).get('height') * scFac);


    if(ext=='jpg' || ext=='jpeg')
    {
       fabric.Image.fromURL(image, function(obj) 
       { 
           formatObjControls(obj,1);
           obj.scaleToWidth(width);
           obj.scaleToHeight(height);

           canvas.add(obj);

           //obj.set({centeredScaling: 1, crossOrigin: "anonymous"});
           obj.set({centeredScaling: 1, crossOrigin: "anonymous", clipPath: bgLayer, clip_target: 'bgLayer'});

           canvas.renderAll.bind(canvas);
           canvas.setActiveObject(obj);
      
       /** IS FULL COLOR DIGITALDRUCK FALSE ? **/

           if($('#ENGRAVEMETHOD option:selected').val()!=8) 
           {
              // SET FILTERS

                 obj.filters.push(filterRemoveWhite()); 
                 obj.filters.push(filterBlendColor(SIGN.color));
                 obj.applyFilters()
                 canvas.renderAll();

                 obj.set({ mmkTrueColor: 0 }); 
           }
           else
           {     obj.set({ mmkTrueColor: 1 }); }

           register_mmkTrueColor(obj); 

           centerObjHV();
           calculateSign('addImage(jpg)',0);  

           if(resolution<150)
           {
              $('#errorbar').html('Das heraufgeladene Bild ist sehr gering in der Auflösung und kann daher zu Qualitätseinbußen führen.'); 
              $('#errorbar').show(); 
           }
       });
    }

    if(ext=='svg')
    {
       fabric.loadSVGFromURL(image, function(objects, options) 
       {
           var obj = fabric.util.groupSVGElements(objects, options);

           formatObjControls(obj,1); 

           //obj.set({ centeredScaling: 1});
           obj.set({ centeredScaling: 1, clipPath: bgLayer, clip_target: 'bgLayer'});

       /** IS FULL COLOR DIGITALDRUCK FALSE ? **/

           if($('#ENGRAVEMETHOD option:selected').val()!=8) // ONLY IF NOT TRUE COLOR
           {
              //if (obj.type == 'group') { for (var i=0; i<obj.item.length; i++) { obj.item(i).fill = SIGN.color; }} 
              //else { obj.fill = SIGN.color; }

              fillObjWithColor(obj, SIGN.color);
              obj.set({ mmkTrueColor: 0 });
           }
           else
           {  obj.set({ mmkTrueColor: 1 }); }

           register_mmkTrueColor(obj);

           obj.scaleToWidth(width);
           obj.scaleToHeight(height);

           canvas.add(obj);
           canvas.renderAll.bind(canvas);

           canvas.setActiveObject(obj);
           centerObjHV();
           
           calculateSign('addImage(svg)',0);  

           //canvas.renderAll();
           //canvas.deactivateAll().renderAll();
       });
    }

    //canvas.deactivateAll().renderAll();
    //canvas.discardActiveObject();
    canvas.renderAll();
}


function filterRemoveWhite()
{
    var filter = new fabric.Image.filters.RemoveColor({
        color:'#FFFFFF',
        distance: 0.3
    }); 

    return filter;
}

function filterBlendColor(color)
{
    var filter = new fabric.Image.filters.BlendColor({
         color: color,
         mode: 'tint',
         alpha: 1
    });

    return filter;
}


function fillObjWithColor(obj, color)
{
 /** DETERMINES IF GROUP FILL OR PATH FILL */

    if (obj.type == 'group' || obj.type == 'path-group') 
    {  var group = obj; for (var i=0; i < group.getObjects().length; i++) { group.item(i).set({'fill':color}); 
            
       fillObjSelector(obj,color);
    }}
    else { obj.set({'fill':color}); fillObjSelector(obj,color); } 
}

function fillObjSelector(obj,color)
{
    if(obj.mmkLayerType=='layerSerienText') {} // || obj.mmkLayerFill==='undefined' || obj.mmkLayerFill=='') {
    else { obj.set({'borderColor':color, 'cornerColor':color})}
}

function selectImageCat(id) 
{ 
    var xdisp=id;
    var xrow=0;

    $(".imageBlock").each(function() { $(this).hide(); });
    $(".imgCatButtons").each(function() 
    { 
       if(xrow==id) { $(this).removeClass('grad').addClass('gradSelect'); }
       else {  $(this).removeClass('gradSelect').addClass('grad');  }

       xrow++;
    });

    $("#ib"+xdisp).show();
}

/** ---------------------------------------------------------------------------*/
/**                                                                            */
/** CUT FORMS BASED FUNCTIONS                                                  */
/**                                                                            */   
/** ---------------------------------------------------------------------------*/

function addCutForm(type) 
{ 

    //var strokeWidth = 3/SIGN.scaleFac;


    switch(type)
    {
       case 'rectangle':

             var bgObj = new fabric.Rect({
                 top: 100,
                 left: 0,
                 //radius: 5,
                 width:  20, 
                 height: 20,
                 stroke: SIGN.cutFormStrokeColor,
                 strokeDashArray: [SIGN.cutFormStrokeDashWidth,SIGN.cutFormStrokeDashWidth], //SIGN.cutFormStrokeArray,
                 strokeWidth: SIGN.cutFormStrokeWidth,
                 centeredScaling: 1,
                 fill: SIGN.cutFormColor,
                 mmkLayerType: 'layerCutForm'

             });

       break;

       case 'ellipse':

             var bgObj = new fabric.Circle({
                 top: 100,
                 left: 0,
                 radius: 10,
                 stroke: SIGN.cutFormStrokeColor,
                 strokeDashArray: [SIGN.cutFormStrokeDashWidth,SIGN.cutFormStrokeDashWidth],
                 strokeWidth: SIGN.cutFormStrokeWidth,
                 centeredScaling: 1,
                 fill: SIGN.cutFormColor,
                 mmkLayerType: 'layerCutForm' 
             });

       break;

       case 'triangle': 

              var bgObj = new fabric.Triangle({
                  width: 20,
                  height: 20,
                  top: 100,
                  left: 0,
                  stroke: SIGN.cutFormStrokeColor,
                  strokeDashArray: [SIGN.cutFormStrokeDashWidth,SIGN.cutFormStrokeDashWidth],
                  strokeWidth: SIGN.cutFormStrokeWidth,
                  centeredScaling: 1, 
                  fill: SIGN.cutFormColor,
                  mmkLayerType: 'layerCutForm'
               });

       break; 

       default:

              var bgObj = new fabric.Path(type);
                  bgObj.set({ top: 100,
                              left: 0,
                              scaleY: 0.2,
                              scaleX: 0.2,
                              stroke: SIGN.cutFormStrokeColor,
                              strokeDashArray: [SIGN.cutFormStrokeDashWidth,SIGN.cutFormStrokeDashWidth],
                              strokeWidth: SIGN.cutFormStrokeWidth, 
                              centeredScaling: 1,
                              fill: SIGN.cutFormColor,
                              mmkLayerType: 'layerCutForm'
                            });

    }

    if(bgObj)
    {
       bgObj.toObject = (function (toObject) {
           return function () {
              return fabric.util.object.extend(toObject.call(this), {
                  mmkLayerType: this.mmkLayerType
              });
           };
       })(bgObj.toObject);
    
       formatObjControls(bgObj,1); 

       canvas.add(bgObj).renderAll();
       canvas.setActiveObject(bgObj);

       centerObjH();
    }

    calculateSign('addCutForm()',0);

}


function restoreCutFormBorder(obj)
{
    strokeWidth = SIGN.cutFormStrokeWidth/obj.get('scaleX'); //SIGN.scaleFac;
    
    //console.log('StrokeWidth: ' +strokeWidth + ', ObjScale: ' + obj.get('scaleX')+ ', ObjDIM: ' + obj.get('width') +',' + obj.get('height') );
   
    obj.set({'strokeWidth':strokeWidth, strokeDashArray: [5/obj.get('scaleX'),5/obj.get('scaleX')]}); //,fill: 'rgba(0,0,0,0)' });
}

function addImageCutForm(image) 
{ 
    var im = image.split('|');
    image = im[0];
   
    var resolution = parseInt(im[1]);

    var ext     = image.substr( (image.lastIndexOf('.') +1) );
    var scRatio = canvas.item(0).get('width') >= canvas.item(0).get('height') ? 0:1;
    var scFac   = canvas.item(0).get('width') >= canvas.item(0).get('height') ? (canvas.item(0).get('height')/canvas.item(0).get('width')) : (canvas.item(0).get('width')/canvas.item(0).get('height'));

    var width   = scRatio == 0 ? parseInt(canvas.item(0).get('width')/2) : parseInt(canvas.item(0).get('width') * scFac);
    var height  = scRatio == 1 ? parseInt(canvas.item(0).get('height')/2) : parseInt(canvas.item(0).get('height') * scFac);

    if(ext=='jpg' || ext=='jpeg')
    {
       fabric.Image.fromURL(image, function(obj) 
       { 
           formatObjControls(obj,1);
           //obj.setFill(SIGN.color);
           obj.scaleToWidth(width);
           obj.scaleToHeight(height);

           canvas.add(obj);
           canvas.renderAll.bind(canvas);

           canvas.setActiveObject(obj);
           centerObjHV();

           calculateSign('addImageCutForm(jpg)',0);  
       });
    }

    if(ext=='svg')
    {
       var x=0; var pobj='';

       fabric.loadSVGFromURL(image, function(objects, options) 
       {
           var obj = fabric.util.groupSVGElements(objects, options);



           if(obj.type=='group')
           {
              // isolate first path

             //obj.forEachObject(function(obj){
             
                //console.log(obj.path)
               // if(x==0) { pobj=obj.path; }
               // x++;
             //});
  
             //obj = pobj;
              obj = obj._objects[0];
              //obj.set({'pathOffset': arra''});

console.log(obj);
           }

           obj.set({ centeredScaling: 1 });

           obj.set({ 'fill': SIGN.cutFormColor});
           obj.scaleToWidth(width);
           obj.scaleToHeight(height);

           obj.set({ mmkLayerType: 'layerCutForm' });

           obj.toObject = (function (toObject) {
             return function () {
              return fabric.util.object.extend(toObject.call(this), {
                  mmkLayerType: this.mmkLayerType
              });
           };
       })(obj.toObject);

       formatObjControls(obj,1); 

       canvas.add(obj);
       canvas.renderAll.bind(canvas);

       canvas.setActiveObject(obj);

       centerObjHV();
       calculateSign('addImageCutForm(svg)',0);   
       });
    }
}


/** ---------------------------------------------------------------------------*/
/** FIXATION BASED FUNCTIONS                                                   */
/** ---------------------------------------------------------------------------*/

function checkFixation(fixid)
{
 // GET WIDTH IN MM
     
    var sw=0;
    var sy=0;
    var dimmode=0;
    var allowedFixations= new Array("1");

    if($('#DIMMODE0').is(':checked')) 
    {
        var dim = $('#DIMSTD').val().split('x');
        sw=dim[0];
        sy=dim[1];
        dimmode=0;
    }

    if($('#DIMMODE1').is(':checked')) 
    {
       sw=$('#WIDTH').val();
       sy=$('#HEIGHT').val()
       dimmode=1; 
    }

 // CHECK IF SELECTED FORM HAS SELECTED FIXID + SIGNFORM + IN DIM ELSE => NONE
 
    var fixOK=0;

    for(var i = 0; i < FIXDATA.length; i++)
    {
     // CHECK CURRENT SIGN FORM / FX / SIZE OK

        if($('#FORMID').val() == parseInt(FIXDATA[i][0]) &&
           $('#FIXATIONID').val() == parseInt(FIXDATA[i][1]) &&
           parseFloat(sw) > parseFloat(FIXDATA[i][2]) &&
           parseFloat(sy) > parseFloat(FIXDATA[i][3]))
        {
           fixOK=1;
        }

     // CHECK IF IS IN ALLOWED FIXATIONS VIA SIZE

        if($('#FORMID').val() == parseInt(FIXDATA[i][0]) &&
           parseFloat(sw) > parseFloat(FIXDATA[i][2]) &&
           parseFloat(sy) > parseFloat(FIXDATA[i][3]))
        {
           allowedFixations.push(FIXDATA[i][1]); 
        }
    }

 // HIDE ALL UNUSABLE FIXATIONS

    $(".fixations").each(function() 
    {  
        fxid=this.id.replace('fixation','');

        if(in_array(fxid , allowedFixations)!= -1){
           $('#fixationBlock'+fxid).show();
        }
        else
        {
           $('#fixationBlock'+fxid).hide();
        }
    });

    if(fixOK==1)
    {
       var fixation = parseInt($('#FIXATIONID').val());
    }
    else 
    {  var fixation=1; $('#FIXATIONID').val(1); $('#FIXATIONNAME').val('Keine') }


//alert(fixOK +','+fixation)

    switch(fixation)
    {
        case 1: addFixation(1,'','Keine',0); break;
        case 2: addFixation(2,'','1 x Bohrung',0); break;
        case 3: addFixation(3,'','2 x Bohrung',0); break;
        case 4: addFixation(4,'','4 x Bohrung',0); break;
        case 5: addFixation(5,'','Selbstkleb. Folie',0); break;
        case 6: addFixation(6,'','Magnetstreifen',0); break;
        case 7: addFixation(7,'ws','Abstandshalter',0); break;
        case 8: addFixation(8,'','1 x Kugelkette',0); break;
        case 9: addFixation(9,'screw','Schrauben inkl. Dübel'); break;
        case 10: addFixation(10,'','S-Haken',0); break;
        case 11: addFixation(11,'','Schlüsselring',0); break;
        case 12: addFixation(12,'','Magnethalter für Namenschilder',0); break;
        case 13: addFixation(13,'','Sicherheitsnadel',0); break;
        case 14: addFixation(14,'','Clip',0); break;
        case 15: addFixation(15,'','Krokodilklemme',0); break;
        case 18: addFixation(18,'','Saugnapf',0); break;
    }

  //alert(fixation);
}

function addFixation(id,overlay,name,directCall) 
{ 
    
 // REMOVE EXISTING FIXATIONS

    var fixID=new Array();

    for(x=0; x<canvas.getObjects().length; x++)
    {
        if(canvas.item(x).mmkLayerType=='layerFixation') { fixID.push(x); }
        if(canvas.item(x).mmkLayerType=='layerOverlay') { fixID.push(x); }
    }

    for(var x = fixID.length; x--;) 
    { 
        fx=fixID[x];
        canvas.remove(canvas.item(fx)); 
    }

    LOG && console.log('%cAdding Fixation:' +id ,"color: white; background-color: orange; padding: 4px");

 // getTopX, getTopY

    var ty= canvas.item(0).get('top');
    var tx= canvas.item(0).get('left');
    var sw= canvas.item(0).get('width');
    var sh= canvas.item(0).get('height');

    /* FIXINING PATH POSITIONS */

    if(canvas.item(0).get('type')=='path')
    {
       var txp = tx; // * SIGN.scaleFac;
       var swp = sw * canvas.item(0).get('scaleX'); //+ offset['x']; // * SIGN.scaleFac;

       tx=txp;
       sw=swp;
    }

    var fstrw = 0;
    var fstrc = 'rgba(255,0,0,1)';

    var fxAbstandRand = SIGN.fixationDefaultDistanceEdge;    //4mm
    var fxRadius      = SIGN.fixationDefaultRadius; //2.25 = 4,5mm Durchmesser
  
 // DIRECT CALL RESET TO DEFAULTS ON FIXATIONCHANGE

    if(directCall==1)
    {
       $('#fixVertikal1').val('');
       $('#fixHorizontal2').val(''); 
       $('#fixHorizontal4').val(''); 
       $('#fixVertikal4').val(''); 
    }

 // Draw Holes

    switch(id)
    {
        default:  
              setFixation(0); 
        break;

        case 2: // 1loch':
        case 8:
        case 10:
        case 11:
              var bgObj = new fabric.Circle({
                  top: ty + parseFloat(SIGN.scaleFac * fxAbstandRand),
                  left: 0,
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',                   
              });

              canvas.add(bgObj).renderAll(); canvas.setActiveObject(bgObj); centerObjH(); bgObj.selectable = false; 

              register_mmkLayerType(bgObj);

              setFixation(1);

        break;


        case 3: // 2loch':

              var bgObj01 = new fabric.Circle({
                  top: 0,
                  left: tx + parseFloat(SIGN.scaleFac * fxAbstandRand),
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              var bgObj02 = new fabric.Circle({
                  top: 0,
                  left: parseFloat(tx + sw) - parseFloat(SIGN.scaleFac * (fxRadius * 2 + fxAbstandRand)),
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              register_mmkLayerType(bgObj01);
              register_mmkLayerType(bgObj02);

              canvas.add(bgObj01).renderAll(); canvas.setActiveObject(bgObj01); centerObjV();
              canvas.add(bgObj02).renderAll(); canvas.setActiveObject(bgObj02); centerObjV();

              setFixation(2); 

        break;

        case 4: // 4loch // 4 schrauben':
        case 9:
              var bgObj01 = new fabric.Circle({
                  top: ty + parseFloat(SIGN.scaleFac * fxAbstandRand),
                  left: tx + parseFloat(SIGN.scaleFac * fxAbstandRand),
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
                   
              });

              var bgObj02 = new fabric.Circle({
                  top: ty + parseFloat(SIGN.scaleFac * fxAbstandRand),
                  left: parseFloat(tx + sw) - parseFloat(SIGN.scaleFac * (fxRadius * 2 + fxAbstandRand)),
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              var bgObj03 = new fabric.Circle({
                  top: parseFloat(ty + sh) - parseFloat(SIGN.scaleFac * (fxRadius * 2 + fxAbstandRand)),
                  left: tx + parseFloat(SIGN.scaleFac * fxAbstandRand),
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              var bgObj04 = new fabric.Circle({
                  top: parseFloat(ty + sh) - parseFloat(SIGN.scaleFac * (fxRadius * 2 + fxAbstandRand)),
                  left: parseFloat(tx + sw) - parseFloat(SIGN.scaleFac * (fxRadius * 2 + fxAbstandRand)),
                  radius: parseFloat(SIGN.scaleFac * fxRadius),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              register_mmkLayerType(bgObj01);
              register_mmkLayerType(bgObj02);
              register_mmkLayerType(bgObj03);
              register_mmkLayerType(bgObj04);

              canvas.add(bgObj01).renderAll(); canvas.setActiveObject(bgObj01);
              canvas.add(bgObj02).renderAll(); canvas.setActiveObject(bgObj02);
              canvas.add(bgObj03).renderAll(); canvas.setActiveObject(bgObj03);
              canvas.add(bgObj04).renderAll(); canvas.setActiveObject(bgObj04);

              if(id==4) { setFixation(4); } else { setFixation(0); }

        break;

        case 7:  // Abstandshalter

              var bgObj01 = new fabric.Circle({
                  top: ty + parseFloat(SIGN.scaleFac * 7),
                  left: tx + parseFloat(SIGN.scaleFac * 7),
                  radius: parseFloat(SIGN.scaleFac * 5),

                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              var bgObj02 = new fabric.Circle({
                  top: ty + parseFloat(SIGN.scaleFac * 7),
                  left: parseFloat(tx + sw) - parseFloat(SIGN.scaleFac * 17),
                  radius: parseFloat(SIGN.scaleFac * 5),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              var bgObj03 = new fabric.Circle({
                  top: parseFloat(ty + sh) - parseFloat(SIGN.scaleFac * 17),
                  left: tx + parseFloat(SIGN.scaleFac * 7),
                  radius: parseFloat(SIGN.scaleFac * 5),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              var bgObj04 = new fabric.Circle({
                  top: parseFloat(ty + sh) - parseFloat(SIGN.scaleFac * 17),
                  left: parseFloat(tx + sw) - parseFloat(SIGN.scaleFac * 17),
                  radius: parseFloat(SIGN.scaleFac * 5),
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  selectable: false, 
                  mmkLayerType: 'layerFixation',
              });

              register_mmkLayerType(bgObj01);
              register_mmkLayerType(bgObj02);
              register_mmkLayerType(bgObj03);
              register_mmkLayerType(bgObj04);

              canvas.add(bgObj01).renderAll(); canvas.setActiveObject(bgObj01);
              canvas.add(bgObj02).renderAll(); canvas.setActiveObject(bgObj02);
              canvas.add(bgObj03).renderAll(); canvas.setActiveObject(bgObj03);
              canvas.add(bgObj04).renderAll(); canvas.setActiveObject(bgObj04);

              setFixation(0);
    }

 // OPTICAL OVERLAYS

    switch(overlay)
    {
        case 'ws': 

              var posLeftWS  = parseFloat (4.5 * SIGN.scaleFac);
              var posTopWS   = parseFloat (4.5 * SIGN.scaleFac);
              var sizeWS     = parseInt(15);

              var scaleWS = parseFloat(sizeWS / (128/SIGN.scaleFac));

              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/ws.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleWS, scaleY: scaleWS, left: tx + posLeftWS, top: ty + posTopWS, selectable: false, mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj);
                  
              });

              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/ws.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleWS, scaleY: scaleWS, left: tx + sw - posLeftWS - parseFloat(SIGN.scaleFac * sizeWS), top: ty + posTopWS, selectable: false, mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj);
              });
 
              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/ws.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleWS, scaleY: scaleWS, left: tx + posLeftWS, top: ty + sh - posTopWS - parseFloat(SIGN.scaleFac * sizeWS), selectable: false,  mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj);
              });
            
              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/ws.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleWS, scaleY: scaleWS, left: tx + sw - posLeftWS - parseFloat(SIGN.scaleFac * sizeWS), top: ty + sh - posTopWS - parseFloat(SIGN.scaleFac * sizeWS), selectable: false,  mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj);
              });
  
        break;
   
        case 'screw': 

              var scaleSCREW = parseFloat(7.5 / (128/SIGN.scaleFac));

              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/screw.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleSCREW, scaleY: scaleSCREW, left: tx + parseFloat(SIGN.scaleFac * 1.125), top: ty + parseFloat(SIGN.scaleFac * 1.125), selectable: false, mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj); 
              });

              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/screw.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleSCREW, scaleY: scaleSCREW, left: tx + sw - parseFloat(SIGN.scaleFac * 8.625), top: ty + parseFloat(SIGN.scaleFac * 1.125), selectable: false, mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj);
              });
 
              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/screw.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleSCREW, scaleY: scaleSCREW, left: tx + parseFloat(SIGN.scaleFac * 1.125), top: ty + sh - parseFloat(SIGN.scaleFac * 8.625), selectable: false, mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj); 
              });
            
              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/fixations/screw.png", function(obj) 
              { 
                  obj.set({ scaleX: scaleSCREW, scaleY: scaleSCREW, left: tx + sw - parseFloat(SIGN.scaleFac * 8.625), top: ty + sh - parseFloat(SIGN.scaleFac * 8.625), selectable: false, mmkLayerType: 'layerOverlay'});
                  canvas.add(obj).renderAll();
                  register_mmkLayerType(obj);
              });

        break;
    }
    
 // DESELECT ALL

    canvas.discardActiveObject();
    hideObjControls();
    canvas.renderAll();


 // REFRESH SIGN CURRENT FIXATION

    if(id!=SIGN.fixationDefaultID) { SIGN.defaultFixationID=id; }

 // UPDATE HIDDEN INPUTS
      
    $('#FIXATIONID').val(id);
    $('#FIXATIONNAME').val(name);

 // SELECT AND CHANGE PROPERTIES DISPLAY

    $("#fixationSelector .partSelect").each(function() { $(this).removeClass('partSelect').addClass('part'); });
    $("#fixation"+id).addClass('partSelect');
    $('#wkBefestigung').text(name);


 // only needed on standalone not needed

     if(directCall==1) { calculateSign('addFixation()'); }
}

/** ------------------------------------------------------------------------ **/
/**
/** SETTING INPUT FIELDS FOR FIXATION ON RESTORING FROM JSON
/**
**/

function restoreFixationByJSON(fixObjects)
{
   var fixObjAmount =  fixObjects.length;

   if(fixObjAmount!=0)
   {
      LOG && console.log('RESTORING FIXATION: ' + fixObjAmount + ' Stueck');

      var ty= canvas.item(0).get('top');
      var tx= canvas.item(0).get('left');
      var sw= canvas.item(0).get('width');
      var sh= canvas.item(0).get('height');

      var diameter = (fixObjects[0].get('radius') / SIGN.scaleFac) * 2; 

   // CALC INPUT BY POSITION BY JSON

      switch(fixObjAmount)
      {
        case 1:

           var top = parseFloat(((fixObjects[0].get('top') - ty + fixObjects[0].get('radius')) / SIGN.scaleFac).toFixed(2));

           $('#fixVertikal1').val(top);
           $('#fixDiameter').val(diameter);

        break;

        case 2:

           var hozDistance = parseFloat(((fixObjects[1].get('left') - fixObjects[0].get('left')) / SIGN.scaleFac).toFixed(2));

           $('#fixHorizontal2').val(hozDistance);
           $('#fixDiameter').val(diameter);

        break;
 
        case 4:

           var hozDistance = parseFloat(((fixObjects[1].get('left') - fixObjects[0].get('left')) / SIGN.scaleFac).toFixed(2));
           var vertDistance = parseFloat(((fixObjects[2].get('top') - fixObjects[0].get('top')) / SIGN.scaleFac).toFixed(2)); 

           $('#fixHorizontal4').val(hozDistance);
           $('#fixVertikal4').val(vertDistance);
           $('#fixDiameter').val(diameter);

        break;
      }
   }
}


function showFixationPanels(mode)
{
   $('#fixPanel0').hide();
   $('#fixPanel1').hide();
   $('#fixPanel2').hide();
   $('#fixPanel4').hide();

   $('#fixDisplay1').hide();
   $('#fixDisplay2').hide();
   $('#fixDisplay4').hide();
   $('#fixPanelDiameter').hide();

   $('#errorbar').hide();
   
   switch(mode)
   {
         case 0: $('#fixPanel0').show(); $('#fixEditMode').val(0); break;
         case 1: $('#fixPanel1').show(); $('#fixEditMode').val(1); $('#fixPanelDiameter').show(); $('#fixDisplay1').show(); break;
         case 2: $('#fixPanel2').show(); $('#fixEditMode').val(2); $('#fixPanelDiameter').show(); $('#fixDisplay2').show(); break;
         case 4: $('#fixPanel4').show(); $('#fixEditMode').val(4); $('#fixPanelDiameter').show(); $('#fixDisplay4').show(); break;  
   }
}

function setFixation(mode)
{

  /* MODUS */

     LOG && console.log('SET FIXATION MODE: ' +mode);


  /* GET VARS + OBJECTS */

     var ty= canvas.item(0).get('top');
     var tx= canvas.item(0).get('left');
     var sw= canvas.item(0).get('width');
     var sh= canvas.item(0).get('height');

     // FIND FIXOBJ

     var fixObj=[]; var fixObjCount=0;                
     var invalidFixObj=[];

     for(x=0; x<canvas.getObjects().length; x++)
     {
         obj  = canvas.item(x); 

      /* REMOVE INVALID OBJECTS WITH NO mmkLayerType - source/reason unknown - removed at end of func */

        if(obj.get('stroke')=='rgba(255,0,0,1)' && obj.mmkLayerType==undefined) { invalidFixObj.push(x); }
        if(obj.mmkLayerType=='layerFixation') { fixObj[fixObjCount]=obj; fixObjCount++; }

        //console.log("THESE OBJECTS FIXATION => " +fixObjCount +"=> ID: " + x );
     }


  /* CHECKEN OB DEFAULT VALUES ODER RESTORE (LOAD SIGN) ODER DIMENSION FEHLER -> RESTORE*/

     var FX = { fxERROR: 0 };

     switch(mode)
     {
        case 1: FX = fixationCalculateBounds(fixObj,1,[tx,ty,sw,sh]); break;  
        case 2: FX = fixationCalculateBounds(fixObj,2,[tx,ty,sw,sh]); break;  
        case 4: FX = fixationCalculateBounds(fixObj,4,[tx,ty,sw,sh]); break;
     }

  /* SET FIXATION PANELS */  

     showFixationPanels(mode);


  /* SHOW ERROR MESSAGES AND STUFF */  

     if(FX.fxERROR==1) { 

        $('#errorbarFix').html('Mindestabstand für Bohrungen zu gering. Mindestabstand einer Bohrung zum Rand betr&auml;gt 3mm. Der Mindestdurchmesser betr&auml;gt 2mm.'); 
        $('#errorbarFix').show().delay(5000).fadeOut('slow');  
     }


  /* SETTING NEW FIXATION POS */

     var fxDiameter = parseFloat($('#fixDiameter').val()); //.toFixed(2);
     var fxRadius   = parseFloat($('#fixDiameter').val() / 2 ); //.toFixed(2);

     switch(mode)
     {
        case 1:
             
             fixObj[0].set({top: ty + parseFloat(SIGN.scaleFac * FX.fxV), radius: parseFloat(SIGN.scaleFac * fxRadius)});
             canvas.setActiveObject(fixObj[0]); centerObjH(); fixObj[0].setCoords(); // fixObj[0].selectable = false; 

        break; 

        case 2:

             fixObj[0].set({left: tx + parseFloat(SIGN.scaleFac * FX.fxH1), radius: parseFloat(SIGN.scaleFac * fxRadius)});
             fixObj[1].set({left: tx + parseFloat(SIGN.scaleFac * FX.fxH2), radius: parseFloat(SIGN.scaleFac * fxRadius)});

             canvas.setActiveObject(fixObj[0]); centerObjV(); fixObj[0].setCoords(); //fixObj[0].selectable = false; 
             canvas.setActiveObject(fixObj[1]); centerObjV(); fixObj[1].setCoords(); //fixObj[1].selectable = false; 

        break; 

        case 4:

             fixObj[0].set({top: ty + parseFloat(SIGN.scaleFac * FX.fxVT), left: tx + parseFloat(SIGN.scaleFac * FX.fxHL), radius: parseFloat(SIGN.scaleFac * fxRadius)});
             fixObj[1].set({top: ty + parseFloat(SIGN.scaleFac * FX.fxVT), left: tx + parseFloat(SIGN.scaleFac * FX.fxHR), radius: parseFloat(SIGN.scaleFac * fxRadius)});
             fixObj[2].set({top: ty + parseFloat(SIGN.scaleFac * FX.fxVB), left: tx + parseFloat(SIGN.scaleFac * FX.fxHL), radius: parseFloat(SIGN.scaleFac * fxRadius)});
             fixObj[3].set({top: ty + parseFloat(SIGN.scaleFac * FX.fxVB), left: tx + parseFloat(SIGN.scaleFac * FX.fxHR), radius: parseFloat(SIGN.scaleFac * fxRadius)});

             canvas.setActiveObject(fixObj[0]); fixObj[0].setCoords();
             canvas.setActiveObject(fixObj[1]); fixObj[1].setCoords();
             canvas.setActiveObject(fixObj[2]); fixObj[2].setCoords();
             canvas.setActiveObject(fixObj[3]); fixObj[3].setCoords();

        break;
     }

  
  /* REMOVE INVALID OBJECTS FROM LAYERS */
  
     //console.log(invalidFixObj);

     for (var x = 0; x < invalidFixObj.length; ++x) 
     {
         var layer= invalidFixObj[x] - x; 
         canvas.remove(canvas.item(layer)); 
     }
     

   canvas.discardActiveObject();
   canvas.renderAll();
}


function fixationCalculateBounds(objList,mode,coords)
{

   var FX = { fxV: 0, fxH1: 0, fxH2: 0, fxHL: 0, fxHR: 0, fxVT: 0, fxVB: 0, fxERROR: 0 };
       
   var realSW  = SIGN.width/SIGN.scaleFac;
   var realSH  = SIGN.height/SIGN.scaleFac;

   var realSMHorizontal = (SIGN.width/2/SIGN.scaleFac);
   var realSMVertikal   = (SIGN.height/2/SIGN.scaleFac);

   switch(mode)
   {

      case 1:

            checkVal = $('#fixVertikal1').val();

            if(checkVal.length==0)
            { 
               $('#fixVertikal1').val(SIGN.fixationDefaultDistance);
               $('#fixDiameter').val(SIGN.fixationDefaultDiameter);
            }
            else
            {
               // CALC BY INPUT
   
                  FX.fxV = parseFloat( parseFloat( $('#fixVertikal1').val() ) - ($('#fixDiameter').val()/2));

               // CHECK OUTTA BOUNDS

                  if((FX.fxV >=3 && FX.fxV <= (realSH - 3)) && ($('#fixDiameter').val() < (realSW - 6)) && $('#fixDiameter').val() >= 2) { }
                  else 
                  {  FX.fxERROR=1; 
                     //restoreFixationByJSON(objList); 

                     $('#fixVertikal1').val(SIGN.fixationDefaultDistance);
                     $('#fixDiameter').val(SIGN.fixationDefaultDiameter);

                  }  

                  LOG && console.log('RESTORE NEEDED ---> Height: ' + realSH + ', Width: ' + realSW+ ', FX.fxV (Top): ' + FX.fxV);
            }

            FX.fxV = parseFloat( parseFloat( $('#fixVertikal1').val() ) - ($('#fixDiameter').val()/2));

      break;

      case 2:
  
            checkVal = $('#fixHorizontal2').val();

            if(checkVal.length==0)
            { 
               var horizontalDist = (realSW - (SIGN.fixationDefaultDistance * 2));

               $('#fixHorizontal2').val(horizontalDist);
               $('#fixDiameter').val(SIGN.fixationDefaultDiameter);
            }
            else
            {
               // CALC BY INPUT
   
                  FX.fxH1 = parseFloat(realSMHorizontal - ($('#fixDiameter').val()/2) - ($('#fixHorizontal2').val()/2));
                  FX.fxH2 = parseFloat(realSMHorizontal + ($('#fixHorizontal2').val()/2) - ($('#fixDiameter').val()/2));

              // CHECK OUTTA BOUNDS

                 if((FX.fxH1 >=3 && FX.fxH2 <= (realSW - 3)) && (parseFloat($('#fixHorizontal2').val()) >= (parseFloat($('#fixDiameter').val()) + 3))  && ($('#fixDiameter').val() < (realSH - 6)) && $('#fixDiameter').val() >= 2) { }
                 else
                 { FX.fxERROR=1; 
                   //restoreFixationByJSON(objList); 

                   var horizontalDist = (realSW - (SIGN.fixationDefaultDistance * 2));

                   $('#fixHorizontal2').val(horizontalDist);
                   $('#fixDiameter').val(SIGN.fixationDefaultDiameter);
                 }  
             }

             FX.fxH1 = parseFloat(realSMHorizontal - ($('#fixDiameter').val()/2) - ($('#fixHorizontal2').val()/2));
             FX.fxH2 = parseFloat(realSMHorizontal + ($('#fixHorizontal2').val()/2) - ($('#fixDiameter').val()/2));

      break;

      case 4:

            checkVal = $('#fixHorizontal4').val() + $('#fixVertikal4').val();

            if(checkVal.length==0)
            { 
                var horizontalDist = (realSW - (SIGN.fixationDefaultDistance * 2));
                var verticalDist = (realSH - (SIGN.fixationDefaultDistance * 2));

                $('#fixHorizontal4').val(horizontalDist);
                $('#fixVertikal4').val(verticalDist);
                $('#fixDiameter').val(SIGN.fixationDefaultDiameter);
            }
            else
            {
              // CALC BY INPUT

                 FX.fxHL = parseFloat(realSMHorizontal - ($('#fixDiameter').val()/2) - ($('#fixHorizontal4').val()/2));
                 FX.fxHR = parseFloat(realSMHorizontal + ($('#fixHorizontal4').val()/2) - ($('#fixDiameter').val()/2));
                 FX.fxVT = parseFloat(realSMVertikal - ($('#fixDiameter').val()/2) - ($('#fixVertikal4').val()/2));
                 FX.fxVB = parseFloat(realSMVertikal + ($('#fixVertikal4').val()/2) - ($('#fixDiameter').val()/2));
  
             // CHECK OUTTA BOUNDS

                if((FX.fxHL >=3 && FX.fxHR <= (realSW - 3)) && (FX.fxVT >=3 && FX.fxVB <= (realSH - 3)) && 
                   (parseFloat($('#fixHorizontal4').val()) >= (parseFloat($('#fixDiameter').val()) + 3)) && 
                   (parseFloat($('#fixVertikal4').val()) >= (parseFloat($('#fixDiameter').val()) + 3)) && 
                   ($('#fixDiameter').val() < (realSH - 6)) && $('#fixDiameter').val() >= 2) 
                { }
                else
                { 
                    FX.fxERROR=1; 

                    //restoreFixationByJSON(objList);

                    var horizontalDist = (realSW - (SIGN.fixationDefaultDistance * 2));
                    var verticalDist = (realSH - (SIGN.fixationDefaultDistance * 2));

                    $('#fixHorizontal4').val(horizontalDist);
                    $('#fixVertikal4').val(verticalDist);
                    $('#fixDiameter').val(SIGN.fixationDefaultDiameter);
                }  
            }

            FX.fxHL = parseFloat(realSMHorizontal - ($('#fixDiameter').val()/2) - ($('#fixHorizontal4').val()/2));
            FX.fxHR = parseFloat(realSMHorizontal + ($('#fixHorizontal4').val()/2) - ($('#fixDiameter').val()/2));
            FX.fxVT = parseFloat(realSMVertikal - ($('#fixDiameter').val()/2) - ($('#fixVertikal4').val()/2));
            FX.fxVB = parseFloat(realSMVertikal + ($('#fixVertikal4').val()/2) - ($('#fixDiameter').val()/2));

            LOG && console.log('4REAL fxHL: ' + FX.fxHL + ', fxHR: ' + FX.fxHR + ', fxVT: ' + FX.fxVT + ', fxVB: ' + FX.fxVB + ', Diameter: ' + $('#fixDiameter').val() + ', fixHoriz: ' + $('#fixHorizontal4').val() + ', fixVerti: ' + $('#fixVertikal4').val() +', realSMHorizontal: ' + realSMHorizontal +', realSMVertikal: ' + realSMVertikal); 
            
      break;

   }

   /** Wenn SIGN.width == $('#WIDTH').val() ist wird mit skalierten Werden gearbeitet. Hierbei darf keine Fehlerausgabe erfolgen (Nur bei Reload)**/
   
       if(SIGN.width==parseFloat($('#WIDTH').val())) { FX.fxERROR=0; }

   return FX;

}


/** ---------------------------------------------------------------------------*/
/** COMPONENT BASED FUNCTIONS                                                  */
/** ---------------------------------------------------------------------------*/


function restoreComponents()
{
    var components;

 // GET ALLOWED IDS
 
    var componentList = getComponents();

    var ALLOWED_IDS = new Array();
    var REMOVE_IDS = new Array(); 

    $('.clipCP').each(function()
    {
       item = parseInt($(this).attr('id').replace('componentsBlock',''));
       ALLOWED_IDS.push(item);
    });


    LOG && console.log('RESTORING COMPONENTS');

  
    for(x=2; x<canvas.getObjects().length; x++)
    {
        type = canvas.item(x).get('type');

        if(type=='group' && canvas.item(x).mmkLayerType=='layerComponent') 
        {

           var id = canvas.item(x).mmkObjectID;

           switch(id)
           {
               case 1: // Klingelknopf':
               case 2:
               case 3:
               case 4:
               case 5:
               case 6:

                  var sizeOVW    = parseFloat(25);  //22
                  var sizeOVH    = parseFloat(25);  //22
        
               break;

               case 7:

                  var sizeOVW    = parseFloat(40);
                  var sizeOVH    = parseFloat(40);
              break;
           }

           var scaleSCW = parseFloat(sizeOVW / (267/SIGN.scaleFac));
           var scaleSCH = parseFloat(sizeOVH / (267/SIGN.scaleFac));

           var currentWidth  = canvas.item(x).get('width')/SIGN.scaleFac;
           var currentHeight = canvas.item(x).get('height')/SIGN.scaleFac;

           var correctScaleX = sizeOVW / currentWidth;
           var correctScaleY = sizeOVH / currentHeight;

           //console.log('ObjWidth in mm: ' + currentWidth + ', ObjHeight in mm: ' + currentHeight + ', scaleX: ' + currentScaleX + ', scaleY: ' + currentScaleY + ', correctScaleX: ' + correctScaleX + ', correctScaleY: ' + correctScaleY);


           if($.inArray(id, ALLOWED_IDS) != -1)
           {
              canvas.item(x).set({hasControls:false, selectable:true, borderColor: SIGN.selectorBorderColor, scaleX: correctScaleX, scaleY: correctScaleY});
              canvas.item(x).setCoords();
              canvas.renderAll();
           }
           else
           {
              REMOVE_IDS.push(x);
           }
        }
    }

 // REMOVE UNALLOWED COMPONENTS
  
    for(var x = REMOVE_IDS.length; x--;) 
    { 
       
       cp=REMOVE_IDS[x];
       var id = canvas.item(cp).mmkObjectID;
       canvas.remove(canvas.item(cp)); 
       componentList[id]--;
    }

 /** SETTIN COMPONENT LIST **/

     setComponents(componentList)
    //canvas.renderAll();
}


function addComponent(id,overlay,name,directCall) 
{ 
     
    LOG && console.log('%cAdding Component:' +id ,"color: white; background-color: orange; padding: 4px");

 // getTopX, getTopY

    var ty= canvas.item(0).get('top');
    var tx= canvas.item(0).get('left');
    var sw= canvas.item(0).get('width');
    var sh= canvas.item(0).get('height');

    var fstrw = 0;
    var fstrc = 'rgba(255,0,0,1)';

/** REBUILD COMPONENT LIST **/

    var componentList = getComponents();

 // Draw Component

    switch(id)
    {
        case 1: // Klingelknopf':
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:

            // Calc Overlay

              var sizeOVW    = parseFloat(25); //22
              var sizeOVH    = parseFloat(25); //22

              var scaleSCW = parseFloat(sizeOVW / (267/SIGN.scaleFac));
              var scaleSCH = parseFloat(sizeOVH / (267/SIGN.scaleFac));

            // Bohrung

              var obj01 = new fabric.Circle({
                  radius: parseFloat(SIGN.scaleFac * 11),  // 9.5 -> 19 
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  originX : 'center',
                  originY : 'center', 
                  selectable: true, 
                  mmkLayerType: 'layerCompFixation',    
                
              });

              register_mmkLayerType(obj01);

              canvas.setActiveObject(obj01); centerObjHV(); // obj01.selectable = false; 

            // Overlay

              var posLeftWS  = parseFloat (4.5 * SIGN.scaleFac);
              var posTopWS   = parseFloat (4.5 * SIGN.scaleFac);

              var dpimage = ''; 

              switch(id)
              {
                     case 1: dpimage = 'klingelknopf_ns.png'; break;
                     case 2: dpimage = 'klingelknopf_led_blau_ns.png'; break;
                     case 3: dpimage = 'klingelknopf_led_rot_ns.png'; break;
                     case 4: dpimage = 'klingelknopf_led_gelb_ns.png'; break;
                     case 5: dpimage = 'klingelknopf_led_gruen_ns.png'; break;
                     case 6: dpimage = 'klingelknopf_led_weiss_ns.png'; break;
              }
              
              //var obj02 = null;

              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/components/" + dpimage, function(obj) 
              { 
                  var obj02 = obj.set({ scaleX: scaleSCW, scaleY: scaleSCH, originX : 'center', originY : 'center', opacity: 1}); 

                  var groupObj = new fabric.Group([obj01,obj02], { left: 0, top: 0, selectable: true, hasControls:false, borderColor: SIGN.selectorBorderColor, 
                                      mmkLayerType: 'layerComponent', mmkObjectID: id  })

                  canvas.add(groupObj);
                  canvas.setActiveObject(groupObj); 

                  groupObj.center();

                  register_mmkLayerType(groupObj);
                  register_mmkObjectID(groupObj);
              });

           // ADD TO COMPONENTLIST

              if((id in componentList)) { componentList[id]++; } else { componentList[id]=1; }

        break;

        case 7:  

            // Calc Overlay

              var sizeOVW    = parseFloat(40); //22
              var sizeOVH    = parseFloat(40); //22

              var scaleSCW = parseFloat(sizeOVW / (267/SIGN.scaleFac));
              var scaleSCH = parseFloat(sizeOVH / (267/SIGN.scaleFac));

            // Bohrung

              var obj01 = new fabric.Circle({
                  radius: parseFloat(SIGN.scaleFac * 8),  // 9.5 -> 19 
                  stroke: fstrc,
                  strokeWidth: fstrw,
                  fill: SIGN.cutFormColor,
                  originX : 'center',
                  originY : 'center', 
                  selectable: true, 
                  mmkLayerType: 'layerCompFixation',    
                
              });

              register_mmkLayerType(obj01);

              canvas.setActiveObject(obj01); centerObjHV(); // obj01.selectable = false; 

            // Overlay

              var posLeftWS  = parseFloat (4.5 * SIGN.scaleFac);
              var posTopWS   = parseFloat (4.5 * SIGN.scaleFac);

              var dpimage = 'notstop.png';
                            
              //var obj02 = null;

              fabric.Image.fromURL("https://schilderstyle.de/konfigurator/xkonf/components/" + dpimage, function(obj) 
              { 
                  var obj02 = obj.set({ scaleX: scaleSCW, scaleY: scaleSCH, originX : 'center', originY : 'center', opacity: 1}); 

                  var groupObj = new fabric.Group([obj01,obj02], { left: 0, top: 0, selectable: true, hasControls:false, borderColor: SIGN.selectorBorderColor, 
                                      mmkLayerType: 'layerComponent', mmkObjectID: id  })

                  canvas.add(groupObj);
                  canvas.setActiveObject(groupObj); 

                  groupObj.center();

                  register_mmkLayerType(groupObj);
                  register_mmkObjectID(groupObj);
              });

           // ADD TO COMPONENTLIST

              if((id in componentList)) { componentList[id]++; } else { componentList[id]=1; }

        break;


    }
    
 // DESELECT ALL

    canvas.discardActiveObject();
    hideObjControls();
    canvas.renderAll();
      
    /** ADD + SET COMPONENT LIST **/

        setComponents(componentList)

    // only needed on standalone not needed

    if(directCall==1) { calculateSign('addComponent()'); }
}


function getComponents()
{
     var compList = {};

     if($('#COMPONENTSLIST').val().length > 0)
     {
        var compPairs = $('#COMPONENTSLIST').val().split(';').filter(item => item);
     
        for(var key in compPairs)
        {
            var compItems = compPairs[key].split('|');
            compList[compItems[0]]=compItems[1];      
        }
     }

     return compList;
}

function setComponents(componentList)
{
    var components = '';

        for(var key in componentList)
        {
           item  = key +'|'+componentList[key]+';'

           if(componentList[key]>0)
           {
               components = components + item;
           }
       }

    $('#COMPONENTSLIST').val(components);
}



/** ---------------------------------------------------------------------------*/
/**                                                                            */
/** I/O OPERATIONS                                                             */
/**                                                                            */   
/** ---------------------------------------------------------------------------*/


function changeMaterial(key)
{
   // OPEN INFO WINDOW METHOD

      $('#chgsp').val(key);
      //chgWin.open();

   // DIRECT METHOD

      $('#chgMatForm').submit();

}

function changeStaerke(mat,strength,oldStaerke)
{
    $('#chgstrsp').val(mat);
    $('#chgstrpid').val(strength);
    $('#chgstr').val(oldStaerke);

    strWin.open();
}


function changeStaerkeByColor(mat,strength,oldStaerke,colorid,colorname,colorgroupid,color,colorbg,colorbgimage)
{
    $('#chgstrsp').val(mat);
    $('#chgstrpid').val(strength);
    $('#chgstr').val(oldStaerke);

    $('#STAERKE option[value="'+ $('#chgstrpid').val() +'"]').prop('selected', true)
    $('#COLORID').val(colorid);
    $('#COLORNAME').val(colorname);
    $('#COLORGROUPID').val(colorgroupid);
    $('#COLOR').val(color);
    $('#COLORBG').val(colorbg);
    $('#COLORBGIMAGE').val(colorbgimage);

    changeMaterialJS($('#MATERIALID').val(),strength,'');

 // SET SELECTION TO PAGE COLOR

    $('#responsiveTabs').responsiveTabs('activate',1);

    var x=0; var active=1;
    $("#sideNav li a").each(function() 
    {
       if(x!=active) { $(this).removeClass('orange').addClass('gray'); }
       else { $(this).removeClass('gray').addClass('orange');  }
       x++;
    });
}


function updateStaerke()
{
    changeMaterialJS($('#MATERIALID').val(),$('#chgstrpid').val(),'');

    //console.log('changeMaterialJS('+$('#MATERIALID').val()+','+$('#chgstrpid').val()+')');
    //$('#chgstrsp').val(mat);
    //$('#chgstrpid').val($('#chgstrpid').val());
    //$('#chgstr').val(oldStaerke);

//$('#DIMSTD option:selected').val();

    //console.log('NEWCHGSTRID: ' +$('#chgstrpid').val() + ', OLDCHGSTRID: ' +  $('#chgstr').val() + ', STAERKE: ' + $('#STAERKE').val() + ', MATID: ' +$('#MATERIALID').val());

//alert($('#STAERKE').val()

//alert($('#MATERIALID').val() + 'Gettin ProductID...');



//    $.ajax({ url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php", type: 'GET', cache: false, timeout: 30000, data: { com: 'changeProduct', id: $('#chgstrpid').val(), refID: $("#MATERIALID").val() },
//             error: function(){ return true; },  //alert('error');
//             success: function(cp) { window.parent.location.reload(); return true; }
//            });
}


function restoreStaerke()
{
    $('#STAERKE').val($('#chgstr').val());
}


function resetAll()
{
    $.ajax({type: "GET", url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php", cache: false, timeout: 3000, async:false, data: { com: 'resetSign' }}).done(function(cp) 
    { 
       canvas.clear();

   /** ALTERNATIV ... if classic off keep sign settings else reset to defaults - WARNING*** FAST BUT EXTREMELY BUGGY *** **/

       var jsonly=0;
       var classic=1;  var cptrim = cp.trim();

       if(classic==1 && jsonly==1)
       {
           var mat = cptrim.split("|");

           $('#MATERIALID').val(mat[0]);
           $('#MATERIALNAME').val(''); 
           $('#PRODUCTID').val(mat[1]);
           $('#PRODUCTNAME').val('');
           $('#DIMFREE').val('');
           $('#DIMMAX').val('');
           $('#DIMMIN').val('');
           $('#FORMID').val('');
           $('#FORM').val('');
           $('#FORMDATA').val('');
           $('#BORDERID').val('');
           $('#COLORID').val('');
           $('#COLORNAME').val('');
           $('#COLORGROUPID').val('');
           $('#COLOR').val('');
           $('#COLORBG').val('');
           $('#COLORBGIMAGE').val('');
           $('#ENGRAVEMINFONTSIZE').val('');
           $('#ENGRAVEFILLABLE').val('');
           $('#TXTMODE').val('');
           $('#TXTDATA').val('');
           $('#TXTMODESIGNS').val('');
           $('#FIXATIONID').val('');
           $('#FIXATIONNAME').val('');

           $('#COMPONENTSLIST').val('');

           $('#STAERKE').empty();
           $('#STAERKE').append($("<option></option>").attr("value", mat[1]).text(mat[1]+' mm'));  
           $('#STAERKE option[value="'+mat[1]+'"]').prop('selected', true); 

           $("#DIMMODE0").prop("checked", true);

           $('#DIMSTD').empty(); 
           $('#DIMSTD').append($("<option></option>").attr("value", mat[2]+'x'+mat[3]).text(mat[2]+'x'+mat[3]));
           $('#DIMSTD option[value="'+mat[2]+'x'+mat[3]+'"]').prop('selected', true); 

           //$('#DIMSTD').val('0x0');
           $('#WIDTH').val(mat[2]);
           $('#HEIGHT').val(mat[3]);

           changeMaterialJS($('#MATERIALID').val(),mat[1],''); 
       }
       else if (classic==0 && jsonly==1)
       {
           changeMaterialJS($('#MATERIALID').val(),$('#STAERKE option:selected').val(),'');
       }
       else
       {
          /** OLD SCHOOL **/

          SIGN.calculateOnUnload=0; 
          window.top.location.reload();
       }

       resetWin.close()

       return true; 
    });

    return false;
}


function loadSign(id,refID,URL)
{
 // AJAX UPDATE REQUEST

    //alert(id+','+refID+','+URL);

    $.ajax({ url: 'https://schilderstyle.de/konfigurator/scripts/mmk-io.php',
              type: 'GET',
              cache: false,
              timeout: 3000,
              async: false, //false, 
              dataType: "text",
              data: {'com': 'loadSign', 'id': id, 'refID': refID},
              error: function()
              { 
              },
              success: function(cs) { 

                if(URL.length>0) { SIGN.calculateOnUnload=0; window.top.location.href = URL; }
                return true; 
              }
 
    });

    return false;
}


function loadUserSignList(source,page)
{
 // AJAX UPDATE REQUEST

//alert(id+','+refID+','+URL);

    $.ajax({ url: 'https://schilderstyle.de/konfigurator/scripts/mmk-io.php',
              type: 'GET',
              cache: false,
              timeout: 3000,
              async: false, //false, 
              dataType: "text",
              data: {'com': 'loadUserSignList', 'id': source, 'refID': page},

              error: function()
              { 
              },
              success: function(cs) { 

                $('#userSignContent').html(cs);
                return true; 
              }
 
    });

    return false;
}


function saveSign(id,mode)
{
    var refID = ''; 
   
    if(mode.length >0)
    { 
       id = id.replace('saveMMK-','');
       refID=mode;
    }

    $.when(calculateSign('saveSign()',1)).done(function(ev) {

      $.ajax({type: "GET", url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php", data: { com: 'saveSign', id: id, refID: refID}}).done(function(cp) 
      { 
          SIGN.calculateOnUnload=0;
          window.top.location.reload();
          return true; 
      });

    });

    return false;
}


function prepareAnfrage(img)
{
    d  = new Date();
    ts = d.getTime();
    nimg = img.replace(/timestamp\=\d+/,"timestamp="+ts);

    $('.anfrageWinContent').hide();
    $('.loader2').show();

    anfrageWin.open();
    anfrageWin.disable();

    delay(function() { 
      $.when(calculateSign('prepareAnfrage()',1)).done(function(ev) {

      $('#anfrageImage').css("background-image", "url("+nimg+")");  
      //$("#anfrageImage").attr("src",nimg); 

      anfrageWin.enable();

      $('.loader2').hide();  
      $('.anfrageWinContent').show();

      return true; 

      });
    }, 125);

    return false;
}

function createAnfrage()
{

    if($('#wdata1').val()=='' || $('#wdata2').val()=='' || $('#wdata3').val()=='' || $('#wdata4').val()=='')
    { 
       alert('Bitte geben Sie Ihren Namen, Ihre E-Mailadresse, Ihre Telefonnummer und den Grund Ihrer Anfrage ein, um die Anfrage abzuschicken.');
    }
    else
    {

    //   var jsondata = JSON.stringify(canvas);
       var svgdata = saveImageAs('svg');

       $.ajax({type: "POST", url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php", data: { com: 'createAnfrage', svgdata: svgdata[0], filelist: svgdata[1], imgscale: svgdata[2], wdata0: $('#wdata0').val(), wdata1: $('#wdata1').val(), wdata2: $('#wdata2').val(), wdata3: $('#wdata3').val(), wdata4: $('#wdata4').val() }}).done(function(cp) 
       { 
      //    canvas.clear();
      //    changeMaterialJS($('#MATERIALID').val(),$('#PRODUCTID').val(),jsondata);

          SIGN.calculateOnUnload=0;

          window.top.location.reload();
          return true; 
       });
    }

    return false;
}

function addSignToBasket()
{
    $('.basketWinContent').hide();
    $('.loader2').show();

    basketWin.open();
    basketWin.disable();

//delay(function() { 

    $.when(calculateSign('addSignToBasket()',1)).done(function(ev) {

       var jsondata = JSON.stringify(canvas);
       var svgdata  = saveImageAs('svg');   

       //$.when()

       $.ajax({type: "POST", url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php", data: { com: 'addSignToBasket', svgdata: svgdata[0], filelist: svgdata[1], imgscale: svgdata[2] }}).done(function(ex) 
       {
          basketWin.enable();

          $('.loader2').hide();  
          $('.basketWinContent').show();

          var items=$('.wkCircle', window.parent.document).text();

          if(items) { items = parseInt(items) + 1; $('.wkCircle', window.parent.document).html('<strong>' + items + '</strong>'); 
              if(items>0) { $('.wkCircle', window.parent.document).show(); }
          }

          canvas.clear();
          changeMaterialJS($('#MATERIALID').val(),$('#PRODUCTID').val(),jsondata);

          $('#schild').css('visibility','visible');

      });

    });

//}, 3000);

    return false;
}

function loadURL(url) { window.top.location.href=url; }

function saveTempSVG()
{

    $('.svgDownWinContent').hide();
    $('.loader2').show();

    svgDownWin.open();
    svgDownWin.disable();
 
//delay(function() { 

    $.when(calculateSign('saveTempSVG()',1)).done(function(ev) {

        var jsondata = JSON.stringify(canvas);
        var svgdata  = saveImageAs('svg'); 

        $.ajax({type: "POST", url: "https://schilderstyle.de/konfigurator/scripts/mmk-io.php", data: { com: 'saveTempSVG', svgdata: svgdata[0], filelist: svgdata[1], imgscale: svgdata[2] }}).done(function(cp) 
        { 
          //window.top.location.reload();

          svgDownWin.enable();

          $('.loader2').hide();  
          $('.svgDownWinContent').show();

          canvas.clear();
          changeMaterialJS($('#MATERIALID').val(),$('#PRODUCTID').val(),jsondata);

          $('#schild').css('visibility','visible');  // better display

          return true; 
        });

    });

//}, 3000);

    return false;
}



// * WRITE IMAGE DATA *//

function saveImageAs(format)
{

     var dataURL='';

     $('#schild').css('visibility','hidden');  // better display

  // DESELECT ALL OBJECTS

     //canvas.deactivateAll().renderAll();  // NOT WORKING IN 2.x
     canvas.discardActiveObject();

     var addID = new Array();
     var removeID=new Array();

     switch(format)
     {

        case 'png':

        dataURL =  buffer.toDataURL('image/png');   // PNG OUTPUT

        var ctx = canvas.getContext("2d");
        var myImageData = ctx.getImageData(canvas.item(0).getLeft(), canvas.item(0).getTop(), canvas.item(0).get('width'), canvas.item(0).get('height'));
            buffer = document.createElement('canvas');

        var bufferCtx = buffer.getContext("2d");
            buffer.width = canvas.item(0).get('width');
            buffer.height = canvas.item(0).get('height');
            bufferCtx.putImageData(myImageData, 0, 0);

        break;

        case 'json':
              dataURL =  canvas.toJSON();
        break;

        case 'svg':

        // GROUPS

           //var engraveGroup = new Array();
           //var cutGroup     = new Array();
           var imageScale    = '';
           var imageGroup = new Array();  
           var w,imgScaleFac,i,items,groupX,groupY;            

        // XY CORRECT

           var objX= canvas.item(0).get('left');
           var objY= canvas.item(0).get('top');


        // FORMAT OBJECTS TO CSVG

           LOG && console.log('Create SVG WorkingFile:');
           LOG && console.log('------------------------------------------------------------------');

           for(x=0; x<canvas.getObjects().length; x++)
           {
               LOG && console.log(canvas.item(x));

               tx= canvas.item(x).get('left')-objX;
               ty= canvas.item(x).get('top')-objY;
  
               dx= canvas.item(x).get('width')/SIGN.scaleFac;
               dy= canvas.item(x).get('height')/SIGN.scaleFac;

               //rx= canvas.item(x).getRx()/SIGN.scaleFac;
               //ry= canvas.item(x).getRy()/SIGN.scaleFac;

               sdx= canvas.item(x).get('width') * canvas.item(x).get('scaleX') / SIGN.scaleFac;
               sdy= canvas.item(x).get('height')* canvas.item(x).get('scaleY') /SIGN.scaleFac;

               sx= canvas.item(x).get('scaleX')/SIGN.scaleFac;
               sy= canvas.item(x).get('scaleY')/SIGN.scaleFac;

               tx= tx/SIGN.scaleFac;
               ty= ty/SIGN.scaleFac;

               obj  = canvas.item(x);
               type = canvas.item(x).get('type');

               LOG && console.log(x+': '+type+', '+'tx|ty: ' +tx+','+ty+ ' dx|dy: ' +dx+ ',' +dy+ ' sx|sy: ' +sx+ ',' +sy+ ' scaleFac: '+SIGN.scaleFac + ' sdx|sdy: ' +sdx+ ',' +sdy);

           /** FIXING NASTY ROUNDING ERRORS **/

         //      if(canvas.item(x).get('width') > canvas.item(x).get('height'))
         //      {
                  //xcorrect=0;
                  //ycorrect= $('#HEIGHT').val() - dy;

         //          ty = $('#HEIGHT').val() - ty;
         //          dy = $('#HEIGHT').val() - dy;
         //      }
         //      else
         //      {
                   //xcorrect= $('#WIDTH').val() - dx;
                   //ycorrect= 0;
         //          tx = $('#WIDTH').val() - tx;
         //          dx = $('#WIDTH').val() - dx;
         //      }  

         //      console.log('XCORR: '+ canvas.item(x).get('scaleX') +'/'+ sx +', YCORR: '+ canvas.item(x).get('scaleY') + '/' + sy);

              


             // BORDER STUFF HERE

//if(x==1)
//{
//   console.log('BORDERID: ' + $('#BORDERID').val());
//   alert('hold it');
//}


                if(x==1) 
                { 
                   switch($('#BORDERID').val())
                   {
                      //case '2': dx=dx - 2;  dy = dy - 2; break;  //Thin   (2mm vom Rand)
                      //case '3': dx=dx - 5;  dy = dy - 5; break;  //Thick  (5mm vom Rand)
                   }

//console.log('Layer: ' + x+' Type: '+type+', '+'tx|ty: ' +tx+','+ty+ ' dx|dy: ' +dx+ ',' +dy+ ' sx|sy: ' +sx+ ',' +sy+ ' width/height: ' + obj.get('width')+',' + obj.get('height')+ ' scaleFac: '+SIGN.scaleFac + ' sdx|sdy: ' +sdx+ ',' +sdy);
//console.log('DIM: ' +dx+ ',' +dy+ ',' +tx+ ',' +ty);
//alert('hold it');

                }

                switch(type)
                {
                    case 'rect'   :  obj.set({ width: dx,
                                                height: dy,
                                                left: tx, 
                                                top: ty,
                                      });

                                      if($('#FORMDATA').val()=='rounded' && x==0)
                                      { 
                                         obj.set({ rx: SIGN.cornerRadius, // * SIGN.scaleFac,
                                                   ry: SIGN.cornerRadius, // * SIGN.scaleFac,
                                         });
                                      }


                    break;
                      
                    case 'ellipse':  obj.set({ top:  ty,
                                                left: tx,
                                                rx: canvas.item(x).getRx()/SIGN.scaleFac,
                                                ry: canvas.item(x).getRy()/SIGN.scaleFac,
                                                //scaleX: sx/2, 
                                                //scaleY: sy/2,
                                      });
                    break;
                      
                    case 'circle' :  obj.set({ left: tx, 
                                                top: ty,
                                                scaleX: sx,
                                                scaleY: sy,
                                      }); 
                    break;


                    case 'image'  :  w = canvas.item(x).get('width') * canvas.item(x).get('scaleX') / SIGN.scaleFac;
                                     imgScaleFac = w/canvas.item(x).get('width');

                                     obj.set({ top: ty,
                                               left: tx, 
                                               scaleX: 1,
                                               scaleY: 1,
                                     });

                       // push original file name + imgScaleFac to array();
 
                          imageScale=imageScale + "" + imgScaleFac +'|';
                          imageGroup.push(obj.getSrc());

                    break;
                    
                    case 'polygon':
                    case 'triangle':
                    case 'path'    : 
                    case 'path-group':
                    case 'group'   : 

                          if(obj.mmkLayerType=='layerComponent')
                          {
                             /** HAS 2 Objects Fixation + Overlay **/

                             i=0; 
                             items = obj._objects;

                             var groupX = obj.get('left');
                             var groupY = obj.get('top');
                             var groupScaleX = obj.get('scaleX');
                             var groupScaleY = obj.get('scaleY');
                             var groupWidth = obj.get('width');
                             var groupHeight = obj.get('height');

                             removeID.push(x);

                             while (i < items.length) 
                             {
                                LOG && console.log('I: ' + i + ', GROUP Left/Top: ' + obj.left + ',' + obj.top + ', Item Left/Top: ' + items[i].left + ',' + items[i].top + ', Group Width/Height ' + obj.width +',' + obj.height + ', ScaleX/ScaleY ' + obj.scaleX +',' + obj.scaleY +', LAYERDATA: ' + items[i].mmkLayerType + ', OBJECTID: ' + items[i].mmkObjectID);
                                LOG && console.log('WIDTH/HEIGHT: ' + canvas.width + ', ' + canvas.height);

                                varx = obj._objects[i].get('left') * groupScaleX + groupX + (groupWidth/2) * groupScaleX;
                                vary = obj._objects[i].get('top') * groupScaleY + groupY + (groupHeight/2) * groupScaleY;

                                if(i==0) 
                                { 
                                   items[i].set({left: varx, top: vary, scaleX: groupScaleX, scaleY: groupScaleY, fill:'', selectable : true, mmkLayerType: 'layerCompFixation' });  
                                   canvas.add(items[i]); canvas.renderAll();
                                }
                                i++;
                             }
                          }
                          else
                          {
                             obj.set({ top:  ty,
                                       left: tx,
                                       scaleX: sx, 
                                       scaleY: sy,
                                    });
                          }
                    break;


                    case 'i-text':   obj.set({ top:  ty,
                                                left: tx,
                                                scaleX: sx, 
                                                scaleY: sy,
                                      });

                    break;

                }

               // BG LAYER

                  if(x==0 || obj.mmkLayerType=='layerCutForm' || obj.mmkLayerType=='layerFixation' || obj.mmkLayerType=='layerCompFixation') 
                  { 
                     if(x==0) { obj.set({ shadow:'none' }); }
                     obj.set({strokeWidth: 0.001, stroke: '#ff0000', fill:'', strokeDashArray: []});  //, shadow: 'none'

                     //cutGroup.push(canvas.item(x).clone());
                  }
                  else if(obj.mmkLayerType=='layerOverlay')
                  {
                     removeID.push(x);
                  }
                  else
                  {
                     if(obj.mmkLayerFill && obj.mmkLayerFill==1) // layerFillColor
                     {
                        //ist ein LayerFill auf dem Obj. -> tue nichts
                     }
                     else
                     {

                        if(obj.get('type')=='image')
                        {
 
                           if($('#ENGRAVEMETHOD option:selected').val()!=8)
                           {
 
                        //  delay(function() { 
                                //alert($('#ENGRAVEMETHOD option:selected').val()); 
                                //alert('Image');
                                //var filter2 = new fabric.Image.filters.BlendColor({
                                //color: '#000000', //, //'rgba(0,0,0,1)',
                                //mode:'tint',
                                //alpha: 1//opacity: 1
                                //});

                                //fabric.util.removeFromArray(obj.filters,'Tint');

                                obj.filters.push(filterBlendColor('#000000'));

                                //LOG && console.log('FILTERS:');
                                //LOG && console.log(obj.filters);

                                //obj.set({ fill: '#222222' }); 
                                obj.applyFilters();
                                canvas.renderAll;

                        //   }, FLOATDELAY );  // 1350

                            }
                        }
                        else
                        {  
                             fillObjWithColor(obj, 'rgba(0,0,0,1)');

                            //if($('#ENGRAVEMETHOD option:selected').val()!=8)
                            //{
                             //  obj.set({ fill: 'rgba(0,0,0,1)' }); 
                            //}

                        }
                     }
                  }




                 // obj.setCoords();
                 //canvas.renderAll();
           } 

//alert('Hold it!');
        
//notAFunction();

         // REMOVE BORDER LAYER IF NOT PRESENT

           if($('#BORDERID').val()>1 && $('#BORDERID').val()<4) 
           { 
               var bw  = canvas.item(1).get('width');
               var bh  = canvas.item(1).get('height');
               var bwt = 0;

               switch($('#BORDERID').val())
               {
                      case '2': bwt=2; break;  //Thin
                      case '3': bwt=5; break;  //Thick
               }


               //var bwt = 5; //parseInt(5 * SIGN.scaleFac);

               canvas.item(1).set({ strokeWidth: bwt, stroke: '#000000', fill:'rgba(255,255,255,0)'}); 

               if($('#FORMDATA').val()=='rounded')
               { 
                   canvas.item(1).set({ rx: SIGN.cornerRadius, // * SIGN.scaleFac,
                                         ry: SIGN.cornerRadius, // * SIGN.scaleFac,
                   });
               }
           } 
           else { //canvas.item(1).remove(); 
                     removeID.unshift(1);
           }

           obj.setCoords();
           canvas.renderAll();

         // REMOVE OVERLAYS // BORDER // GROUPS LAYERS ETC.
 
            for(var x = removeID.length; x--;) 
            { 
                fx=removeID[x];
                canvas.remove(canvas.item(fx));
            }

         /* REMOVE EXISTING OVERLAY IMAGES */

            canvas.setOverlayImage(null,canvas.renderAll.bind(canvas));


        // ADD COMPONENT FIXATIONS


         // ADD ORIGINAL IMAGES     
         
            var fileList=''; var fileObj='';

            for (index = 0; index < imageGroup.length; ++index) 
            {
                 fileList = fileList + imageGroup[index] +'\n';

                 file     = imageGroup[index].replace('https://schilderstyle.de/konfigurator/xuser/uploads/','');
                 fileObj  = fileObj + file +',';
            }
            
            if(fileList.length>0)
            {
               //var text = new fabric.Text('Originaldateien/URL\n' + fileList, { left: 0, top: -80, fontFamily: 'Arial', fontSize: 7 });
               //canvas.add(text);

               //obj.setCoords();
               //canvas.renderAll();
            }

        obj.setCoords();
        canvas.renderAll();

         // WRITE SVG DATA

            var dim= new Array();

            if($('#DIMMODE0').is(':checked')) { dim = $('#DIMSTD').val().split('x'); }
            if($('#DIMMODE1').is(':checked')) { dim = [$('#WIDTH').val(),$('#HEIGHT').val()]; }

            dataURL =  canvas.toSVG({suppressPreamble: 1, viewBox: { x: 0, y: 0, width: dim[0], height: dim[1]}});
          //dataURL =  canvas.toSVG();
          //alert(dataURL);

          //alert('Berechne...');

        break;  
     }

   return [dataURL,fileObj,imageScale];
}

function refreshItemViewPort()
{
  // test

     var newheight;
     var newwidth;
     var id='mmkframe';

     if(parent.document.getElementById){
         newheight=parent.document.getElementById(id).contentWindow.document.body.scrollHeight;
         newwidth=parent.document.getElementById(id).contentWindow.document.body.scrollWidth;
     }

     parent.document.getElementById(id).height= (newheight) + "px";
     parent.document.getElementById(id).width= (newwidth) + "px";

//alert('refreshed');


  // bypass CORS?

     //window.document.domain = "m8501.wwwsrv.eu"; 
     //window.document.domain = "schilderstyle.de"; 
     //alert(parent.document.getElementById("mmkframe"));
//window.parent.document.getElementById("mmkframe").style.height = window.parent.document.getElementById("mmkframe").contentWindow.document.body.scrollHeight + "px";
     //window.parent.scrollTo(0,0);

}

// --------------------------------------------------------------------------
// 
//  IMAGE / FILE IO PORTER
//
//


function uploadImage(file) 
{ 
    //$("#uploadResult").show(); 

    var resultError=new Array();
    var errorMessage = '';

    $('.loader2').show();
    $('.loaderError').hide();
    uploadWin.disable();

    xhr = new XMLHttpRequest(); 
    xhr.open('post', 'https://schilderstyle.de/konfigurator/scripts/mmk-image.php', true); 
    xhr.onload = function() { LOG && console.log('Upload erfolgreich beendet!'); } 

    xhr.onreadystatechange = function () {
            if (xhr.readyState == 4)
            {

//delay(function() { 

                if(xhr.status == 200 && xhr.responseText.length > 0) 
                {
                   addImage(xhr.responseText); //$("#uploadResult").hide();

                   uploadWin.enable();
                   uploadWin.close();  
                }
                else
                {
                   if(xhr.responseText.length > 0)
                   {
                      resultError = xhr.responseText.split('|'); 
                   }

                   if(resultError[0]) { errorMessage= '<i>File/Reason</i>: ' + resultError[0] + '<br>'; }
                   if(resultError[1]) { errorMessage= errorMessage + '<span class="sm"><i>Error</i>: ' + resultError[1] + '</span>'; }

                   uploadWin.enable();
                   $('.loaderError').show();
                   $('.loader2').hide();
                   $('.loaderError').html('<b>Es ist ein Fehler bei der Übertragung aufgetreten</b>:<br>' + errorMessage + '<br><br>'); //xhr.abort();
                }
//}, 3000);
            }

            
    }

    var formData = new FormData();  
        formData.append('file', file); 

    xhr.send(formData); 
} 


function uploadXLS(file) 
{ 

    $('#xlsUploadResult').show();
    

    var xhr = new XMLHttpRequest(); 
    xhr.open('post', 'https://schilderstyle.de/konfigurator/scripts/mmk-io.php', true); 
    xhr.onload = function() { LOG && console.log('Upload erfolgreich beendet!'); } 
    xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if(xhr.responseText.length>0) { refreshSerienTextForm(xhr.responseText); $('#xlsUploadResult').hide(); }
                //return xhr.responseText;
            }
    }

    var formData = new FormData();  
        formData.append('file', file); 
        formData.append('com', 'loadXLS'); 
 
    xhr.send(formData); 
} 


function uploadImageCutForm(file) 
{ 
    //$("#uploadResultCutForm").show(); 

    var resultError=new Array();
    var errorMessage = '';

    $('.loader2').show();
    $('.loaderError').hide();
    uploadWin.disable();

    xhr = new XMLHttpRequest(); 
    xhr.open('post', 'https://schilderstyle.de/konfigurator/scripts/mmk-image.php', true); 
    xhr.onload = function() { LOG && console.log('Upload erfolgreich beendet!'); }; 

    xhr.onreadystatechange = function () {
            if (xhr.readyState == 4)
            {
//delay(function() { 

                if(xhr.status == 200 && xhr.responseText.length > 0) 
                {
                   addImageCutForm(xhr.responseText); //$("#uploadResultCutForm").hide();
                   uploadWin.enable();
                   uploadWin.close();  
                }
                else
                {

                   if(xhr.responseText.length > 0)
                   {
                      resultError = xhr.responseText.split('|'); 
                   }

                   if(resultError[0]) { errorMessage= '<i>File/Reason</i>: ' + resultError[0] + '<br>'; }
                   if(resultError[1]) { errorMessage= errorMessage + '<span class="sm"><i>Error</i>: ' + resultError[1] + '</span>'; }

                   uploadWin.enable();
                   $('.loaderError').show();
                   $('.loader2').hide();
                   $('.loaderError').html('<b>Es ist ein Fehler bei der Übertragung aufgetreten</b>:<br>' + errorMessage + '<br><br>'); //xhr.abort();
                }
//}, 3000);

            }
    }

    var formData = new FormData();  
        formData.append('file', file); 

    xhr.send(formData); 
} 


// --------------------------------------------------------------------------
// 
//  VALIDATION / HELPER FUNCS
//
//

function onlyDigits(evt)
{
   var theEvent = evt || window.event;
   var key = theEvent.keyCode || theEvent.which;
   key = String.fromCharCode( key );
   var regex = /[0-9]|\./;
   if( !regex.test(key) ) {
     theEvent.returnValue = false;
     if(theEvent.preventDefault) theEvent.preventDefault();
   }
}


function onlyDecimal(element, decimals)
        {
            $(element).keypress(function(event)
            {
                num = $(this).val() ;
                num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
                if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
                {
                    event.preventDefault();

                }
                if($(this).val() == parseFloat(num).toFixed(decimals))
                {
                    event.preventDefault();
                }
            });
        }

         //onlyDecimal("#TextBox1", 3);

function checkSignWidthHeight(width,height)
{
   var rex = new RegExp(/^\d{2,6}(\.\d{0,1})?$/);
   var rex2 = new RegExp(/^\d{2,6}?$/);

   if(width.match(rex) && height.match(rex))
   { 
      if(width.match(rex2)) { $('#WIDTH').val(width+'.0'); }
      if(height.match(rex2)) { $('#HEIGHT').val(height+'.0'); }

      return true; 

   }
   else
   {  return false;}
}


function checkObjectWidthHeight(width,height)
{
   $('#errorbar').hide();

   width  = width.replace(',','.');
   width  = width.replace(/\.$/, '');
   width  = width.replace(/^0+/, '');

   height = height.replace(',','.');
   height = height.replace(/\.$/, '');
   height = height.replace(/^0+/, '');

   var rex = new RegExp(/^\d{1,5}(\.\d{0,1})?$/);
   var rex2 = new RegExp(/^\d{1,5}?$/);

   if(width.match(rex) && height.match(rex))
   { 
      if(width.match(rex2)) { $('#objWidth').val(width+'.0'); } else { $('#objWidth').val(width); }
      if(height.match(rex2)) { $('#objHeight').val(height+'.0'); } else { $('#objHeight').val(height); }

      if(height <= parseFloat($('#ENGRAVEMINFONTSIZE').val()))
      {
         $('#errorbar').html('Die Mindestgravurh\u00F6he f\u00FCr diese Gravurmethode liegt bei '+$('#ENGRAVEMINFONTSIZE').val()+'mm!'); 
         $('#errorbar').show(); 
      }

      return true; 

   }
   else
   {  return false;}
}


function checkFixationInput(value,obj,mode)
{
   value = value.replace(',','.');  //
   value = value.replace(/\.$/, '');   // remove solo point
   value = value.replace(/^0+/, '');   // remove leading zeroes

   var rex  = new RegExp(/^\d{1,5}(\.\d{0,2})?$/);
   var rex1 = new RegExp(/^\d{1,5}(\.\d{0,1})?$/);
   var rex2 = new RegExp(/^\d{1,5}?$/);

   var inputCheckOk=0;

   if(value.match(rex) || value.match(rex1) || value.match(rex2)) { inputCheckOk=1; }

   switch(mode)
   {
       case 'diameter':

             if(inputCheckOk==0) { $('#fixDiameter').val(SIGN.fixationDefaultDiameter); }
             else { $(obj).val(value); }

       break; 

       case 1: 
          
             if(inputCheckOk==0) { $('#fixVertikal1').val(SIGN.fixationDefaultDistance); }
             else { $(obj).val(value); }

       break;

       case 2: 
         
            if(inputCheckOk==0) { $('#fixHorizontal2').val(SIGN.fixationDefaultDistance); }
            else { $('#fixHorizontal2').val(value); }

       break;

       case 4: 
          
             if(inputCheckOk==0) { $(obj).val(SIGN.fixationDefaultDistance); }
             else { $(obj).val(value); }

       break;
   }
}


function checkTextHeight(height)
{
   $('#errorbar').hide();

   var rex = new RegExp(/^\d{1,5}(\.\d{0,1})?$/);
   var rex2 = new RegExp(/^\d{1,5}?$/);

   if(height.match(rex))
   { 
      if(height.match(rex2)) { $('#textSize').val(height+'.0'); }

      if(height <= parseFloat($('#ENGRAVEMINFONTSIZE').val()))
      {
         $('#errorbar').html('Die Mindestschrifth\u00F6he f\u00FCr diese Gravurmethode liegt bei ' +$('#ENGRAVEMINFONTSIZE').val()+'mm!'); 
         $('#errorbar').show(); 
      }

      return true; 
   }
   else
   {  return false;}

}

function filterUCChars(text,oldtext) {
  var rex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff]|\u200D|\u2003)/g;

  if(text.match(rex))
  {
     //return text.replace(rex, '').trim();   //iText cannot remove 
     return oldtext;  
  }
  else 
  {  return text; }
}

function in_array(needle, haystack){
    var found = 0;
    for (var i=0, len=haystack.length;i<len;i++) {
        if (haystack[i] == needle) return i;
            found++;
    }
    return -1;
}



function timer(time)
{
       var d = new Date();
       var now = d.getTime();

       if(time==0) { return now; }
       else        { var ntime = now - time +' ms'; return ntime; }
}



function initJCarousel(slider)
{
     switch(slider)
      {
          case 'forms':

                $('#formSelector').jCarouselLite = null;
                $('#formSelector-next, #formSelector-prev').unbind('click'); 
                $('#formSelector').jCarouselLite({ visible: 8.2, circular: false, scroll: 2, btnNext: "#formSelector-next", btnPrev: "#formSelector-prev" });

          break;

          case 'borders':

                $('#borderSelector').jCarouselLite = null;
                $('#borderSelector-next, #borderSelector-prev').unbind('click'); 
                $('#borderSelector').jCarouselLite({ visible: 8.2, circular: false, scroll: 2, btnNext: "#borderSelector-next", btnPrev: "#borderSelector-prev" });

          break;

          case 'colors':

                $('#colorSelector').jCarouselLite = null;
                $('#colorSelector-next, #colorSelector-prev').unbind('click'); 
                $('#colorSelector').jCarouselLite({ visible: 8.2, circular: false, scroll: 2, btnNext: "#colorSelector-next", btnPrev: "#colorSelector-prev" });
                $('#colorSelector').css('min-width','570px');
                $('#SLIDERCOLORS').css('min-width','570px');

          break;

    //$('#fixationSelector').jCarouselLite({ visible:1, circular: false, btnNext: "#fixationSelector-next", btnPrev: "#fixationSelector-prev" });

          case 'fixations':

                $('#fixationSelector').jCarouselLite = null;
                $('#fixationSelector-next, #fixationSelector-prev').unbind('click'); 
                $('#fixationSelector').jCarouselLite({ visible: 1, circular: false, btnNext: "#fixationSelector-next", btnPrev: "#fixationSelector-prev" });

          break;

          case 'components':

                $('#componentsSelector').jCarouselLite = null;
                $('#componentsSelector-next, #componentsSelector-prev').unbind('click'); 
                $('#componentsSelector').jCarouselLite({ visible: 1, circular: false, btnNext: "#componentsSelector-next", btnPrev: "#componentsSelector-prev" });

          break;


      }
}