asrs3/assets/3dconfigurator/js/index.js

htmlElemAttr.forEach((prop) => {
  $('#set-icube-' + prop).on("click", function () {
    clickOn(prop, this);
  });
});

/**
 * 
 * @param { PropertyKey } prop
 */
function finishToSet (prop) {
  if ($('#set-icube-' + prop).hasClass("active-icube-setting")) {
    if (selectedIcube)
      selectedIcube.finishToSetProperty(prop);

    if (prop === 'connection') {
      updateConnectorsPrice();
    }
  }
  g_sceneMode = sceneMode.normal;
}

/**
 * 
 * @param { PropertyKey } prop
 * @param { htmlDomElement } htmlElem
 */
function clickOn (prop, htmlElem) {
  updateDrawButtonState();

  if (['passthrough', 'charger'].includes(prop)) {
    if (currentView !== ViewType.free)
      switch_to_free_camera();
    else
      switchCamera(ViewType.free);

    scene.activeCamera.alpha = g_rackingOrientation === OrientationRacking.horizontal ? Math.PI / 4 : 3 * Math.PI / 4;
    scene.activeCamera.beta = 1;
  }
  else {
    if (currentView !== ViewType.top)
      switch_to_top_camera();
  }

  if ($(htmlElem).hasClass("active-icube-setting")) {
    finishToSet(prop);
  }
  else {
    if (prop === 'connection') {
      // check if exist icube to connect
      const validIcube = getValidIcubeToConect();
      if (validIcube.length === 0) {
        Utils.logg('Can\'t connect the icubes!', 'error');
        return;
      }
    }

    htmlElemAttr.forEach((localProp) => {
      if (localProp !== prop)
        finishToSet(localProp);
    });

    if (selectedIcube)
      selectedIcube.previewProperty(prop);
    tracking(65 + parseInt(htmlElemAttr.indexOf(prop)));
  }

  renderScene(1000);
}

//Control tab
$('.a-tabs').on("click", function () {
  updateDrawButtonState();
  htmlElemAttr.forEach((prop) => {
    finishToSet(prop);
  });
  clearSceneItemManual();
  endSimulation();
  unsetCurrentMesh();

  const pane_id = $(this).attr("aria-controls");
  tracking(56 + parseInt(menuTab.indexOf(pane_id.split('-')[3])));
  if (pane_id === "#main-tabs-pane-Price") {
    updateConnectorsPrice();
    if (userRole === g_UserRole.Sales) {
      if (g_priceChanged !== g_priceUpdated) {
        $('#waiting').show();
      }
    }
  }

  if (pane_id === "#main-tabs-pane-Export") {
    icubes.forEach((icube) => {
      icube.software.update();
    });
  }

  if (pane_id === "#main-tabs-pane-Simulation") {
    if (selectedIcube) {
      const samePos = selectedIcube.activedIOPorts.filter(e => e.portPosition === (selectedIcube.isHorizontal ? "bottom" : "left" ));
      if (samePos.length === selectedIcube.activedIOPorts.length)
        $('select[name="simLiftA"]').val(1);
      else
        $('select[name="simLiftA"]').val(0);
    }
  }

  if (pane_id === "#main-tabs-pane-Contact") {
    $('#con_fullName').val(userName);
    $('#con_email').val(userEmail);
  }

  $('.a-tabs').parent().removeClass("active");
  $('.a-tabs').attr("aria-selected", false).attr("tabindex", -1);
  if ($(pane_id).hasClass('show')) {
    $('.tab-pane').removeClass("show");
    $(pane_id).parent().addClass("hide");
  }
  else {
    $(this).parent().addClass("active");
    $(this).attr("aria-selected", true).removeAttr("tabindex");
    $('.tab-pane').removeClass("show");
    $(pane_id).parent().removeClass("hide");
    $(pane_id).addClass("show");
  }

  resizeRenderer();
})

//Control warehouse size
$('.input-spinner').on("change", function (event) {
  if (!menuEnabled) return;
  let newVal = parseFloat(event.target.value);
  const controller = $(this).parent().attr('controller');
  switch (controller) {
    case 'width':
      if (!isNaN(parseFloat(newVal))) {
        newVal = useP(newVal) / useP(rateUnit);
        if (newVal < g_WarehouseMinWidth) {
          newVal = g_WarehouseMinWidth;
        } else if (newVal > g_WarehouseMaxWidth) {
          newVal = g_WarehouseMaxWidth;
        }
      } else {
        newVal = WHDimensions[0];
      }
      WHDimensions[0] = _round(newVal, 2);

      warehouse.update(WHDimensions);
      if (selectedIcube)
        selectedIcube.addRowLabels();
      tracking(55);
      Behavior.add(Behavior.type.WHDimensions);
      break;
    case 'length':
      if (!isNaN(parseFloat(newVal))) {
        newVal = useP(newVal) / useP(rateUnit);
        if (newVal < g_WarehouseMinLength) {
          newVal = g_WarehouseMinLength;
        }
        if (newVal > g_WarehouseMaxLength) {
          newVal = g_WarehouseMaxLength;
        }
      } else {
        newVal = WHDimensions[1];
      }
      WHDimensions[1] = _round(newVal, 2);

      warehouse.update(WHDimensions);
      if (selectedIcube)
        selectedIcube.addRowLabels();
      tracking(54);
      Behavior.add(Behavior.type.WHDimensions);
      break;
    case 'height':
      if (!isNaN(parseFloat(newVal))) {
        newVal = useP(newVal) / useP(rateUnit);
        if (newVal < g_WarehouseMinHeight) {
          newVal = g_WarehouseMinHeight;
        }
        if (newVal > g_WarehouseMaxHeight) {
          newVal = g_WarehouseMaxHeight;
        }
      } else {
        newVal = WHDimensions[2];
      }
      WHDimensions[2] = _round(newVal, 2);

      warehouse.update(WHDimensions);

      //Set ui
      updateRackingHighLevel();

      updateSelectedIcube();
      tracking(53);
      Behavior.add(Behavior.type.WHDimensions);
      break;
    case 'pallet-height':
      if (!isNaN(parseFloat(newVal))) {
        newVal = useP(newVal) / useP(rateUnit);
        if (newVal < g_PalletMinHeight) {
          newVal = g_PalletMinHeight;
        }
        if (newVal > g_PalletMaxHeight) {
          newVal = g_PalletMaxHeight;
        }
      } else {
        newVal = g_palletHeight;
      }
      g_palletHeight = useP(useP(newVal), false);
      tracking(52);
      //Set racking height
      updateRackingHighLevel();

      if (g_palletHeight > 0 && g_palletHeight <= 1.2) {
        simulateEvent('palletOverhang', 'change', 0.05);
      }
      else if (g_palletHeight > 1.2 && g_palletHeight <= 1.8) {
        simulateEvent('palletOverhang', 'change', 0.075);
      }
      else {
        simulateEvent('palletOverhang', 'change', 0.100);
      }

      // Behavior.add(Behavior.type.palletHeight);
      break;
    case 'pallet-weight':
      if (isNaN(parseFloat(newVal))) {
        newVal = g_palletHeight;
      }
      g_palletWeight = useP(useP(newVal), false);

      if (selectedIcube) selectedIcube.palletWeight = g_palletWeight;
      tracking(51);
      Behavior.add(Behavior.type.palletWeight);
      break;
    case 'layoutScale':
      if (newVal > 0 && newVal < 200) {
        layoutMap.scale = parseFloat((2 - parseFloat(newVal / 100)).toFixed(2));
        warehouse.update(WHDimensions);
      }
      break;
    default:
      break;
  }

  setUnitForInput();
})

$('.spinner-up').on("click", function () {
  if (!menuEnabled) return;
  const controller = $(this).parent().parent().attr('controller');
  switch (controller) {
    case 'width':
      if (WHDimensions[0] < g_WarehouseMaxWidth) {
        WHDimensions[0] += g_WarehouseIncValue;

        warehouse.update(WHDimensions);
        if (selectedIcube)
          selectedIcube.addRowLabels();
        tracking(55);
        Behavior.add(Behavior.type.WHDimensions);
      }
      break;
    case 'length':
      if (WHDimensions[1] < g_WarehouseMaxLength) {
        WHDimensions[1] += g_WarehouseIncValue;

        warehouse.update(WHDimensions);
        if (selectedIcube)
          selectedIcube.addRowLabels();
        tracking(54);
        Behavior.add(Behavior.type.WHDimensions);
      }
      break;
    case 'height':
      if (WHDimensions[2] < g_WarehouseMaxHeight) {
        WHDimensions[2] += g_WarehouseIncValue;
        warehouse.update(WHDimensions);

        updateRackingHighLevel();

        updateSelectedIcube();
        tracking(53);
        Behavior.add(Behavior.type.WHDimensions);
      }
      break;
    case 'pallet-height':
      if (g_palletHeight < g_PalletMaxHeight) {
        g_palletHeight += g_PalletIncValue;
        tracking(52);
        updateRackingHighLevel();

        if (g_palletHeight > 0 && g_palletHeight <= 1.2) {
          simulateEvent('palletOverhang', 'change', 0.05);
        }
        else if (g_palletHeight > 1.2 && g_palletHeight <= 1.8) {
          simulateEvent('palletOverhang', 'change', 0.075);
        }
        else {
          simulateEvent('palletOverhang', 'change', 0.100);
        }

        // Behavior.add(Behavior.type.palletHeight);
      }
      break;
    case 'pallet-weight':
      if (g_palletWeight < g_PalletMaxWeight) {
        g_palletWeight = parseFloat($('#input-pallet-weight').val()) + 100;
        $('#input-pallet-weight').val(g_palletWeight);

        if (selectedIcube) selectedIcube.palletWeight = g_palletWeight;
        tracking(51);
        Behavior.add(Behavior.type.palletWeight);
      }
      break;
    case 'layoutScale':
      if (layoutMap && layoutMap.scale > 0) {
        let newVal = parseFloat($('#layoutScale').val());
        newVal += 0.1;
        $('#layoutScale').val(parseFloat(newVal.toFixed(2)));

        layoutMap.scale = 2 - parseFloat(newVal / 100);
        warehouse.update(WHDimensions);
      }
      break;
    default:
      break;
  }

  setUnitForInput();
});

$('.spinner-down').on("click", function () {
  if (!menuEnabled) return;
  const controller = $(this).parent().parent().attr('controller');
  switch (controller) {
    case 'width':
      if (WHDimensions[0] > g_WarehouseMinWidth) {
        WHDimensions[0] -= g_WarehouseIncValue;
        $('#input-wh-width').val(WHDimensions[0]);

        warehouse.update(WHDimensions);
        if (selectedIcube)
          selectedIcube.addRowLabels();
        tracking(55);
        Behavior.add(Behavior.type.WHDimensions);
      }
      break;
    case 'length':
      if (WHDimensions[1] > g_WarehouseMinLength) {
        WHDimensions[1] -= g_WarehouseIncValue;
        $('#input-wh-length').val(WHDimensions[1]);

        warehouse.update(WHDimensions);
        if (selectedIcube)
          selectedIcube.addRowLabels();
        tracking(54);
        Behavior.add(Behavior.type.WHDimensions);
      }
      break;
    case 'height':
      if (WHDimensions[2] > g_WarehouseMinHeight) {
        WHDimensions[2] -= g_WarehouseIncValue;
        $('#input-wh-height').val(WHDimensions[2]);
        warehouse.update(WHDimensions);
        updateRackingHighLevel();

        updateSelectedIcube();
        tracking(53);
        Behavior.add(Behavior.type.WHDimensions);
      }
      break;
    case 'pallet-height':
      if (g_palletHeight > g_PalletMinHeight) {
        g_palletHeight -= g_PalletIncValue;
        tracking(52);
        updateRackingHighLevel();

        if (g_palletHeight > 0 && g_palletHeight <= 1.2) {
          simulateEvent('palletOverhang', 'change', 0.05);
        }
        else if (g_palletHeight > 1.2 && g_palletHeight <= 1.8) {
          simulateEvent('palletOverhang', 'change', 0.075);
        }
        else {
          simulateEvent('palletOverhang', 'change', 0.100);
        }

        // Behavior.add(Behavior.type.palletHeight);
      }
      break;
    case 'pallet-weight':
      if (g_palletWeight > g_PalletMinWeight) {
        g_palletWeight = parseFloat($('#input-pallet-weight').val()) - 100;
        $('#input-pallet-weight').val(g_palletWeight);
        
        if (selectedIcube) selectedIcube.palletWeight = g_palletWeight;
        tracking(51);
        Behavior.add(Behavior.type.palletWeight);
      }
      break;
    case 'layoutScale':
      if (layoutMap && layoutMap.scale < 2) {
        let newVal = parseFloat($('#layoutScale').val());
        newVal -= 0.1;
        $('#layoutScale').val(parseFloat(newVal.toFixed(2)));

        layoutMap.scale = 2 - parseFloat(newVal / 100);
        warehouse.update(WHDimensions);
      }
      break;
    default:
      break;
  }

  setUnitForInput();
});

$('#draw-baseline').on("click", function () {
    g_drawMode = 0;
    if ($(this).hasClass("active-icube-setting")) {
        updateDrawButtonState();
    }
    else {
        $('#draw-baseline').addClass('active-icube-setting');
        $('#draw-baseline').text('Confirm Drawing');

        if (currentView !== ViewType.top)
            switch_to_top_camera();

        tracking(30);
        g_sceneMode = sceneMode.draw;
    }
});

$('#draw-auto').on("click", function () {
    g_drawMode = 1;
    updateDrawButtonState();

    const manualsItems = getManualItems();
    if (icubes.length > 0 || manualsItems.length > 0) {
        Utils.logg('Clear the scene before to draw the racking!', 'custom');
        return;
    }
    tracking(31);
    recreateAutoIcube();
});

$('#remove-all-icubes').on("click", function () {
    updateDrawButtonState();
    removeAllIcubes();
    Behavior.add(Behavior.type.removeIcube);
    renderScene();
});

$('#remove-all-items').on("click", function () {
    if (confirm('This will remove all items from work area. Are you sure?')) {
        updateDrawButtonState();
        removeManualItems();
        Behavior.add(Behavior.type.deleteItem);
        renderScene();

    }
});

$('#input-upRightDistance').on("change", function (event) {
  tracking(50);
  let newVal = parseFloat(event.target.value);
  newVal = useP(newVal) / useP(rateUnit);

  if (newVal < g_MinDistUpRights * 0.6) {
    newVal = g_MinDistUpRights * 0.6;
  }
  if (newVal > g_MaxDistUpRights) {
    newVal = g_MaxDistUpRights;
  }

  g_distUpRight = useP(useP(newVal), false);

  //Set racking height
  updateRackingHighLevel();

  updateSelectedIcube();

  Behavior.add(Behavior.type.upRightDistance);
});

$('#palletDistr_0, #palletDistr_1, #palletDistr_2').on("change", function (event) {
  tracking(41);
  const attr = $(this).attr('id').split('_');
  updateDistrPallet(attr[1], parseInt(event.target.value));
});

function updateDistrPallet(id, val) {
  const prevMax = g_palletInfo.max;
  const prevVal = [...g_palletInfo.value];
  g_palletInfo.value[id] = val;
  g_palletInfo.type = optimizeDistrCalculation(id, g_palletInfo.value);

  updatePalletDistributions(g_palletInfo.value);
  g_xtrackFixedDim = (g_palletInfo.max !== 2 ? 1.350 : 1.550);
  if (g_palletInfo.max !== prevMax || (prevVal[0] == 0 && g_palletInfo.value[0] != 0) || (prevVal[1] == 0 && g_palletInfo.value[1] != 0) || 
  (prevVal[2] == 0 && g_palletInfo.value[2] != 0) || (prevVal[0] != 0 && g_palletInfo.value[0] == 0) || (prevVal[1] != 0 && g_palletInfo.value[1] == 0) || (prevVal[2] != 0 && g_palletInfo.value[2] == 0)) {
    if (selectedIcube && g_palletInfo.max !== prevMax)
      selectedIcube.activedPillers = [];

    updateSelectedIcube();
  }
  else {
    palletsNoJS();
  }

  Behavior.add(Behavior.type.palletType);
  renderScene();
}

$('#rackingHighLevel').on("change", function (event) {
  g_rackingHighLevel = parseInt(event.target.value);

  updateRackingHighLevel();

  updateSelectedIcube();
  tracking(49);
  Behavior.add(Behavior.type.rackingLevel);
});

$('#palletOverhang').on("change", function (event) {
  g_palletOverhang = parseFloat(event.target.value);

  updateSelectedIcube();
  tracking(48);
  Behavior.add(Behavior.type.palletOverhang);
});

$('#loadPalletOverhang').on("change", function (event) {
  g_loadPalletOverhang = parseFloat(event.target.value);
  g_palletInfo.type = g_palletInfo.value;

  updateSelectedIcube();
  tracking(47);
  Behavior.add(Behavior.type.palletOverhang);
});

$('#orientationRacking').on("change", function (event) {
  g_rackingOrientation = parseInt(event.target.value);

  if (selectedIcube !== null) {
    if (g_drawMode === 1) {
      recreateAutoIcube();
    }
    else {
      selectedIcube.resetIcubeData();
      updateSelectedIcube();
    }
  }
  tracking(46);
  Behavior.add(Behavior.type.rackingOrient);
});

function recreateAutoIcube() {
  if (currentView !== ViewType.free)
    switch_to_free_camera();
  else
    switchCamera(ViewType.free);

  removeAllIcubes();
  autoDrawIcube();
}

$('#numberOfSKU').on("change", function (event) {
  g_SKU = parseInt(event.target.value);
  const prevXtracksLnegth = g_recomandedXtrackAmount;
  if (selectedIcube !== null) {
    calculateProps(selectedIcube.baseLines);
    if (prevXtracksLnegth !== g_recomandedXtrackAmount) {
      selectedIcube.resetIcubeData();
      updateSelectedIcube();
    }
  }
  tracking(45);
  Behavior.add(Behavior.type.sku);
});

$('#numberOfPalletInOutPerHour').on("change", function (event) {
  g_movesPerHour = parseInt(event.target.value);

  if (selectedIcube !== null) {
    selectedIcube.updateThroughput(g_movesPerHour);
    selectedIcube.getEstimationPrice();
  }
  tracking(44);
  Behavior.add(Behavior.type.throughput);
  renderScene();
});

$('#extracarrierAmount').on("change", function (event) {
  if (selectedIcube) {
    g_extraCarrierAmount = parseInt(event.target.value) < 0 ? 0 : parseInt(event.target.value);
    selectedIcube.updateCarrier(g_extraCarrierAmount);
    selectedIcube.getEstimationPrice();
    Behavior.add(Behavior.type.addCharger);
    renderScene();
  }
});

function updateCarrierAmount (amount, extra) {
  if (selectedIcube !== null) {
    g_recomandedCarrierAmount = parseInt(amount);
    $('#carrierAmount').html(g_recomandedCarrierAmount);
    $('#extracarrierAmount').val(parseInt(extra));
  }
}

function updateLiftAmount (amount, extra) {
  g_recomandedLiftAmount = parseInt(amount);
  $('#liftAmount').html(g_recomandedLiftAmount);
  $('#extraliftAmount').html(parseInt(extra));
}

function updateXtrackAmount (amount, extra) {
  g_recomandedXtrackAmount = parseInt(amount);
  $('#xtrackAmount').html(g_recomandedXtrackAmount);
  $('#extraxtrackAmount').html(parseInt(extra));
}

$('#cameraView3D').on("click", function () {
  if (g_simMultipleView) return;
  switch_to_free_camera();
});

$('#cameraView2D').on("click", function () {
  if (g_simMultipleView) return;
  switch_to_top_camera();
});

$('#cameraFront').on("click", function () {
  if (g_simMultipleView) return;
  switch_to_front_camera();
});
$('#cameraSide').on("click", function () {
  if (g_simMultipleView) return;
  switch_to_side_camera();
});

$('#zoomIn').on("click", function () {
  switch (currentView) {
    case ViewType.top:
      zoom2DCamera(-1, false);
      break;
    case ViewType.free:
      scene.activeCamera.radius -= 1;
      break;
    case ViewType.front:
    case ViewType.side:
      zoom2DCamera(-1, true);
      break;
    default:
      break;
  }
  renderScene();
});

$('#zoomOut').on("click", function () {
  switch (currentView) {
    case ViewType.top:
      zoom2DCamera(1, false);
      break;
    case ViewType.free:
      scene.activeCamera.radius += 1;
      break;
    case ViewType.front:
    case ViewType.side:
      zoom2DCamera(1, true);
      break;
    default:
      break;
  }
  renderScene();
});

$('#resetCamera').on("click", function () {
  switchCamera(currentView);
});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//New, Save and Load
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$('.new-btn').on("click", function () {
  currenntDataBaseAction = DataBaseAction.new;
  $(".new-modal-close").show();
  if (hasUpdates()) {
    if (confirm("Do you want to save your work?")) {
      saveProject(() => {
        showModal('new-modal');
      });
    }
    else {
      showModal('new-modal');
    }
  }
  else {
    showModal('new-modal');
  }
});

$('.save-btn').on("click", function () {
  currenntDataBaseAction = DataBaseAction.save;
  if (documentName === "") {
    showModal('saveAs-modal');
  }
  else {
    if (hasUpdates()) {
      tracking(3);
      saveProject(() => {
        if (userRole === g_UserRole.Demo) {
          window.location.replace('home/logout');
        }
      });
    }
  }
});

$('.saveAs-btn').on("click", function () {
  currenntDataBaseAction = DataBaseAction.save;
  showModal('saveAs-modal');
});

$('.adminLoadAutoSave-btn').on("click", function () {
  currenntDataBaseAction = DataBaseAction.load;
  loadProject(documentName, documentInfo, true);
});

$('.load-btn').on("click", function () {
  currenntDataBaseAction = DataBaseAction.load;
  $(".load-modal-close").show();
  if (hasUpdates()) {
    if (confirm("Do you want to save your work?")) {
      saveProject(function () {
        getProjectList(function (datas) {
          createProjectList(datas);
        });
      });
    } else {
      getProjectList(function (datas) {
        createProjectList(datas);
      });
    }
  } else {
    getProjectList(function (datas) {
      createProjectList(datas);
    });
  }
});

$('.load-modal-close').on("click", function () {
  hideModal('load-modal');
});

$('.new-modal-close').on("click", function () {
  hideModal('new-modal');
});

$('.saveAs-modal-close').on("click", function () {
  hideModal('saveAs-modal');
});

$('.rating-modal-close').on("click", function () {
  Utils.request(g_BasePath + 'home/rating', 'POST', { complete: 0 }, () => {
    hideModal('rating-modal');
  });
});

$('.planAddInfo-modal-close').on("click", function () {
  hideModal('planAddInfo-modal');
});

$('.saveAs-modal-confirm').on("click", function () {
  if ($('#inputDocumentAs').val() == "") {
    $('#inputDocumentAs').focus();
  }
  else {
    old_documentName = documentName;
    documentName = $('#inputDocumentAs').val().trim();
    documentNameOverlapCheck(function (datas) {
      let isOverlap = false;
      datas.map(data => {
        if (data.document_name == documentName) {
          isOverlap = true;
        }
      });
      if (isOverlap) {
        documentName = old_documentName;
        Utils.logg("Project Name already exist. Choose another name.", 'error');
        $('#inputDocumentAs').val("").focus();
      }
      else {
        createBehavior();
        $('#project-name').html(documentName);
        hideModal('saveAs-modal');
        tracking(37);
        currenntDataBaseAction = DataBaseAction.save;
        saveProject();
      }
    });
  }
});

$('.new-modal-confirm').on("click", function () {
  if ($('#inputDocument').val() == "") {
    $('#inputDocument').focus();
  }
  else {
    old_documentName = documentName;
    documentName = $('#inputDocument').val().trim();
    documentNameOverlapCheck((datas) => {
      let isOverlap = false;
      datas.map(data => {
        if (data.document_name == documentName) {
          isOverlap = true;
        }
      });
      if (isOverlap) {
        documentName = "";
        Utils.logg("Project Name already exist. Choose another name.", 'error');
        $('#inputDocument').val("").focus();
      }
      else {
        $('#project-name').html(documentName);
        hideModal('new-modal');

        saveProject();
        currenntDataBaseAction = DataBaseAction.new;
        if (currenntDataBaseAction === DataBaseAction.new || currenntDataBaseAction === DataBaseAction.load || isEditByAdmin) {
          currentTemplateType.document_name = documentName;
          setProject(currentTemplateType);
        }
      }
    });
  }
});

$(".undo-btn").on("click", function () {
  Behavior.undo();
});

$(".redo-btn").on("click", function () {
  Behavior.redo();
});

//Change templates
$(".img-rounded").on("click", function () {
  currentTemplateType = Template.values[Template.type[$(this).attr('key')]];
  const templateItems = $(".template-item-box");
  for (let i = 0; i < templateItems.length; i++) {
    templateItems[i].classList.remove("select");
  }
  $(this).parent().addClass("select");
});

function initToolBar() {
  SetUIUnits();
  ChangeUnits();

  setUnitForInput();

  $('#numberOfSKU').val(parseInt(g_SKU));
  $('#numberOfPalletInOutPerHour').val(parseInt(g_movesPerHour));
  $('#carrierAmount').html(parseInt(g_recomandedCarrierAmount));
  $('#liftAmount').html(parseInt(g_recomandedLiftAmount));
  $('#extracarrierAmount').val(parseInt(g_extraCarrierAmount));
  $('#extraliftAmount').html(parseInt(g_extraLiftAmount));
  $('#xtrackAmount').html(parseInt(g_recomandedXtrackAmount));
  $('#extraxtrackAmount').html(parseInt(g_extraXtrackAmount));

  updateRackingHighLevel(true);
  updatePalletDistributions(g_palletInfo.value);
  $('#input-pallet-weight').val(g_palletWeight);
  $('#palletOverhang').val(g_palletOverhang);
  $('#loadPalletOverhang').val(g_loadPalletOverhang);
  $('select[name="orientationRacking"]').val(g_rackingOrientation);
  $('#spacing_b_rows').val(g_spacingBetweenRows);

  if (g_palletAtLevel.length > 0) {
    $('#customLastRow').trigger('click');
  }

  if (g_drawMode === 0) {
    if ($('#custom-upRightDist').hasClass('active-icube-setting')) return;
    
    $('#auto-upRightDist').removeClass('active-icube-setting');
    $('#input-upRightDistance').attr('disabled', false);
    $('#custom-upRightDist').addClass('active-icube-setting');
  }
  else {
    if ($('#auto-upRightDist').hasClass('active-icube-setting')) return;
    
    $('#custom-upRightDist').removeClass('active-icube-setting');
    $('#input-upRightDistance').attr('disabled', true);
    $('#auto-upRightDist').addClass('active-icube-setting');
  }
  createPassThList();

  if (isEditByAdmin || g_palletAtLevel.length > 0 || g_palletInfo.order.length > 1) {
    if (!$('#settingsModeA1').hasClass('active-icube-setting')) {
      $('#settingsModeA1').trigger('click');
    }
  }
}

function initToolBarForICube(rackingHighLevel, rackingOrientation, palletHeight, palletWeight, palletOverhang, loadPalletOverhang, sku, throughput, calculatedCarriersNo, calculatedLiftsNo, extra, upRightDistance, calculatedXtracksNo, palletAtLevel, spacingBetweenRows) {
  g_rackingHighLevel = rackingHighLevel;
  g_rackingOrientation = rackingOrientation;
  g_palletHeight = palletHeight;
  g_palletWeight = palletWeight;
  g_palletOverhang = palletOverhang;
  g_loadPalletOverhang = loadPalletOverhang;
  g_SKU = sku;
  g_movesPerHour = throughput;
  g_recomandedCarrierAmount = calculatedCarriersNo;
  g_recomandedLiftAmount = calculatedLiftsNo;
  g_extraCarrierAmount = extra.carrier;
  g_extraLiftAmount = extra.lift;
  g_extraXtrackAmount = extra.xtrack;
  g_distUpRight = upRightDistance;
  g_palletAtLevel = palletAtLevel;
  g_spacingBetweenRows = spacingBetweenRows;

  currentUnits = unit_measurement;

  initToolBar();
}

function saveProject(callback) {
  const icubeData = getIcubeData();
  const itemMData = getManualItems();
  const measurements = getAllMeasurements();

  WHDimensions = WHDimensions.map(e => parseFloat((e).toFixed(unit_measurement ? 3 : 2)));

  const data = {
    document_name: documentName,
    warehouse_dimensions: WHDimensions,
    icubeData: icubeData,
    itemMData: itemMData,
    unit_measurement: unit_measurement,
    layoutMap: layoutMap,
    extraInfo: extraInfo,
    extraPrice: extraPrice,
    measurements: measurements,
    custom_values: custom_values
  }
  initData(data);

  Utils.request(g_BasePath + 'home/save', 'POST', {
    documentInfo: documentInfo,
    document_name: documentName,
    isEditByAdmin: parseInt(isEditByAdmin),
    warehouse_dimensions: JSON.stringify(WHDimensions),
    icubeData: JSON.stringify(icubeData),
    itemMData: JSON.stringify(itemMData),
    unit_measurement: JSON.stringify(unit_measurement),
    layoutMap: JSON.stringify(layoutMap),
    extraInfo: JSON.stringify(extraInfo),
    extraPrice:JSON.stringify(extraPrice),
    measurements:JSON.stringify(measurements),
    custom_values:JSON.stringify(custom_values),
    inventory: g_inventory
  }, (data) => {
    documentName = data['documentName'];
    $('#project-name').html(documentName);
    Utils.logg('Layout successfully saved!','success');
    Behavior.add(Behavior.type.saves);

    let rev = {
      document_name: documentName
    }
    if (documentInfo > 0) {
      rev = Object.assign({}, rev, { slid : documentInfo });
    }
    getRevisions(rev);
    if (callback) callback();
  }, () => {
    alert("Save Failed! Try again later.");
  });
}

function loadProject(document_name, slid = -1, useBackUp = false) {
  let data = {
    document_name: document_name
  }
  if (slid !== -1) {
    data = Object.assign({}, data, { slid : slid });
  }
  if (useBackUp) {
    data = Object.assign({}, data, { useBackUp : useBackUp });
  }

  Utils.request(g_BasePath + 'home/load', 'POST', data, (res) => {
    setProject(res);
  }, () => {
    alert("Load Failed! Try again later.");
  });
}

function setProject(data, newProject = true, versionIdx = -1) {
  if (currentView !== ViewType.top)
    switch_to_top_camera();

  extraInfo = data.extraInfo;
  extraPrice = data.extraPrice ? data.extraPrice : [];
  unit_measurement = data.unit_measurement || 0;
  msments = data.measurements ? data.measurements : [];
  custom_values = data.custom_values ? data.custom_values : [];
  documentInfo = (isEditByAdmin) ? data.documentInfo : "";
  documentName = data.document_name;
  if (!Array.isArray(data.warehouse_dimensions) || data.warehouse_dimensions.length === 0) {
    data.warehouse_dimensions = Template.values[Template.type.Default].warehouse_dimensions;
  }
  WHDimensions = [parseFloat(data.warehouse_dimensions[0]), parseFloat(data.warehouse_dimensions[1]), parseFloat(data.warehouse_dimensions[2])];

  // update html inputs
  initToolBar();

  // remove curent icubes
  removeAllIcubes();
  // remove manual items
  removeManualItems();
  // remove all measurements
  removeAllMeasurements();

  warehouse.update(WHDimensions);

  // need to set this to be able to set later the racking
  g_palletHeight = (data.icubeData.length !== 0) ? data.icubeData[data.icubeData.length - 1].palletHeight : g_palletHeight;
  resetConfigVariables();
  loadIcubeData(data.icubeData, data.itemMData, data.layoutMap);
  // load manual items inside loadIcube, after icube was draw
  // loadItemMData(data.itemMData);

  $('#customValue').html(custom_values.length > 0 ? `<b>⚠ This project contains custom values ⚠</b>` : ``);

  // show measurements
  for (let i = 0; i < msments.length; i++) {
    const msm = new Measurement({
      id: msments[i][2],
      pi: new BABYLON.Vector3(msments[i][0][0], 0, msments[i][0][1]),
      pf: new BABYLON.Vector3(msments[i][1][0], 0, msments[i][1][1])
    }, scene);
    msm.isCompleted();
    g_measurementList.push(msm);
  }

  if (!$('.tab-content').is(':visible'))
    $('#main-tabs-tab-Size').trigger('click');

  if (newProject) {
    initData(data);
    let rev = {
      document_name: documentName
    }
    if (documentInfo > 0) {
      rev = Object.assign({}, rev, { slid : documentInfo });
    }
    getRevisions(rev, versionIdx);
    Behavior.init();
    createBehavior();
    Behavior.add(Behavior.type.addIcube);

    $('#project-name').html(documentName);
    Utils.logg('Layout successfully loaded!','success');
  }
}

function deleteProject(document_name, slid = -1) {
  let data = {
    document_name: document_name
  }
  if (slid !== -1) {
    data = Object.assign({}, data, { slid : slid });
  }

  Utils.request(g_BasePath + 'home/delete', 'POST', data, () => {
    Utils.logg('Layout successfully deleted!','success');
  }, () => {
    alert("Delete Failed! Try again later.");
  });
}

function renameProject(document_name, slid) {
  Utils.request(g_BasePath + 'home/rename', 'POST', {
    document_name: document_name,
    slid: slid
  }, () => {
    Utils.logg('Layout successfully renamed!','success');
  }, () => {
    alert("Rename Failed! Try again later.");
  });
}

function sendProjectNotify(document_name, email) {
  Utils.request(g_BasePath + 'home/sentNotificationSA', 'POST', {
    docName: document_name,
    email: email
  }, () => {
    Utils.logg('Notification successfully sent!','success');
  }, () => {
    alert("Notification Failed! Try again later.");
  });
}

function showModal(name) {
  $('#' + name).removeClass('fade').show();

  if (name === 'new-modal') {
    $('#inputDocument').val("").focus();
  }
  if (name === 'saveAs-modal') {
    $('#inputDocumentAs').val("").focus();
  }
  if (name === 'load-modal') {
    $('#searchProject').val("").focus();
  }
}

function hideModal(name) {
  $('#' + name).addClass('fade').hide();
  $('.modal-backdrop').hide();
}

function createProjectList(datas) {
  let html = ``;
  $('.list-group').html("");
  for (let i = 0; i < datas.length; i++) {
    html += `<div class="form-group projectList">
      <div class="col-lg-11 loadP" style="cursor:pointer;">
        <h5 style="font-weight:bold;">` + datas[i].document_name + `</h5>
        <span>` + datas[i].saved_time + `</span>
      </div>
      <div class="col-lg-1">
        <button type="button" class="loadP-btn deleteP" title="Delete project"><i class="fa fa-times" aria-hidden="true"></i></button>`
        + (datas[i].backup ? `<button type="button" class="loadP-btn loadBP" title="Restore project from auto-saves"><i class="fa fa-hdd-o" aria-hidden="true"></i></button>` : ``) +
      `</div>
    </div>`;
  }
  $(".list-group").append(html);
  showModal('load-modal');

  $('.loadP').click(function () {
    const document_name = $(this).find('h5').html();
    loadProject(document_name);
    hideModal('load-modal');
  });

  $('.deleteP').click(function (e) {
   //if (confirm('Are you sure you want to permanently delete this project?')) {
    const document_name = $(this).parent().prev()[0].firstElementChild.innerHTML;
    deleteProject(document_name);
    $(this).parent().parent().remove();
    //}
  });

  $('.loadBP').click(function () {
    const document_name = $(this).parent().prev()[0].firstElementChild.innerHTML;
    loadProject(document_name, -1, true);
    hideModal("load-modal");
  });
}

function initData(data) {
  for (let key in data) {
    if (Array.isArray(data[key])) {
      init_data[key] = [];
      if (data[key].length > 0) {
        if (isNaN(parseInt(data[key]))) {
          if (key === 'icubeData') {
            for (let i = 0; i < data[key].length; i++) {
              init_data[key][i] = {};
              for (let key2 in data[key][i]) {
                if (['name','uid','baseLines'].includes(key2)) continue;
                if (Array.isArray(data[key][i][key2])) {
                  if (isNaN(parseInt(data[key][i][key2]))) {
                    if (key2 === 'activedCarrierInfos') {
                      init_data[key][i][key2] = [...data[key][i][key2]];
                    }
                    else {
                      init_data[key][i][key2] = data[key][i][key2].map(a => { return {...a}; });
                    }
                  }
                  else {
                    init_data[key][i][key2] = [...data[key][i][key2]];
                  }
                }
                else {
                  if (isNaN(parseInt(data[key][i][key2]))) {
                    init_data[key][i][key2] = JSON.parse(data[key][i][key2]);
                  }
                  else {
                    init_data[key][i][key2] = data[key][i][key2];
                  }
                }
              }
            }
          }
          else {
            init_data[key] = data[key].map(a => { return {...a}; });
          }
        }
        else {
          init_data[key] = [...data[key]];
        }
      }
    }
    else {
      init_data[key] = data[key];
    }
  }
}

function hasUpdates() {
  const icubeData = getIcubeData();
  const itemMData = getManualItems();
  const measurements = getAllMeasurements();

  if (icubeData.length === 0 && itemMData.length === 0) return false;
  if (JSON.stringify(init_data.layoutMap) == JSON.stringify(layoutMap) &&
    JSON.stringify(init_data.extraInfo) == JSON.stringify(extraInfo) &&
    JSON.stringify(init_data.extraPrice) == JSON.stringify(extraPrice) &&
    JSON.stringify(init_data.measurements) == JSON.stringify(measurements) &&
    JSON.stringify(init_data.custom_values) == JSON.stringify(custom_values) &&
    JSON.stringify(init_data.warehouse_dimensions) == JSON.stringify(WHDimensions) &&
    JSON.stringify(init_data.itemMData) == JSON.stringify(itemMData)
  ) {
    let hasChanges = true;
    for (let i = 0; i < init_data.icubeData.length; i++) {
      if (icubeData[i]) {
        let changes = [];
        for (let key in init_data.icubeData[i]) {
          if (Array.isArray(init_data.icubeData[i][key])) {
            changes.push(JSON.stringify(init_data.icubeData[i][key]) == JSON.stringify(icubeData[i][key]) ? false : true);
          }
          else {
            changes.push(init_data.icubeData[i][key] == icubeData[i][key] ? false : true);
          }
        }

        const change = changes.filter(e => e === true);
        hasChanges = change.length > 0 ? true : false;
        if (!hasChanges) break;
      }
    }
    // console.log('if ', hasChanges)
    return hasChanges;
  }
  else {
    // console.log('else truuuue')
    return true;
  }
}

function documentNameOverlapCheck(callback) {
  Utils.request(g_BasePath + 'home/documentNameOverlapCheck', 'GET', {}, (data) => {
    callback(data);
  }, null);
}

function getProjectList(callback) {
  Utils.request(g_BasePath + 'home/getProjectList', 'GET', {}, (data) => {
    callback(data);
  }, null);
}

function getUserInfo(callback = null) {
  Utils.request(g_BasePath + 'home/getUserInfo', 'POST', {
    documentInfo: documentInfo
  }, (data) => {
    userName = data.name;
    userEmail = data.email;
    userPhone = data.phone;
    loginCount = data.login_count;
    if (parseInt(data.projects) === 0)
      loginCount = 1;

    if (userRole !== g_UserRole.Demo)
      $('#emailP').val(userEmail);

    if (!isEditByAdmin && userRole === g_UserRole.Sales)
      getUsersSA();

    if (callback)
      callback();
  }, null);
}

$("#btn-full-screen").on("click", function () {
  scene.getEngine().enterFullscreen(false);
});

$("#btn-save-pdf").on("click", function () {
  $('#waiting').show('fast', () => {
    Export_PDF.generateFile(false);
    tracking(8);
  });

  if (!isEditByAdmin)
    Utils.request(g_BasePath + 'home/downloadPDF', 'POST', {}, null, null);
});

$("#btn-save-dxf").on("click", function () {
  $('#waiting').show('fast', () => {
    tracking(12);
    if ($('#cadAsPDF').is(':checked')) {
      Export_CAD.generateFile(false, true);
    }
    else {
      const formData = new FormData();
      formData.append('dxf', Export_CAD.generateFile(false, false));
      formData.append('data', JSON.stringify({ documentName: documentName, documentInfo: documentInfo }));

      Utils.requestFormData(g_BasePath + 'home/uploadCAD', 'POST', formData, async (result) => {
        const res = JSON.parse(result);
        if (res.url.length === 0) {
          $('#waiting').hide();
          Utils.logg('Save your project first', 'error'); return;
        }

        const newURL = res.url.replace(/ /g, "%20");
        const ccURL = "https://api.cloudconvert.com/v2";
        const name = res.url.split("/").pop().split('.').shift();
        const job = {
          "tasks": {
            "file1": {
              "operation": "import/url",
              "url": newURL
            },
            "converttodwg": {
              "operation": "convert",
              "input_format": "dxf",
              "output_format": "dwg",
              "engine": "cadconverter",
              "input": [ "file1" ],
              "engine_version": "8.9",
              "filename": name + ".dwg"
            },
            "converted": {
              "operation": "export/url",
              "input": [ "converttodwg" ],
              "inline": false,
              "archive_multiple_files": false
            }
          },
          "tag": "logiqs"
        }
        const options = {
          "method": "POST",
          "body": JSON.stringify(job),
          "headers": {
            "Authorization": "Bearer " + res.key,
            "Content-type": "application/json"
          }
        }
        const response = await fetch(ccURL + "/jobs", options);
        response.json().then(async (resJob) => {
          const options2 = {
            "method": "GET",
            "headers": {
              "Authorization": "Bearer " + res.key
            }
          }

          const response2 = await fetch(ccURL + "/tasks/" + resJob.data.tasks[2].id + '/wait', options2);
          response2.json().then((resTask) => {
            $('#waiting').hide();
            if ((!resTask.data.result) || (resTask.data.result && resTask.data.result.files.length === 0)) return;

            const url = resTask.data.result.files[0].url;
            const filename = name + ".dwg";
            Utils.download(filename, url, false);
          });
        });
      });
    }
  });
});

$("#btn-save-3ds").on("click", function () {
  $('#waiting').show('fast', async () => {
    await Export_OBJ.generateFile();
    $('#waiting').hide();
    tracking(43);
  });
});

$("#btn-save-view").on("click", function () {
  if (hasUpdates()) {
    saveProject(()=>{
      Export_PNG.generateFile();
      tracking(40);
    });
  }
  else {
    Export_PNG.generateFile();
    tracking(40);
  }
});

$("#btnSubmission").on("click", function () {
  $('#waiting').show('fast', () => {
    Export_PDF.generateFile(true);
  });
});

$('#contact-form').on("submit", function (e) {
  e.preventDefault();
});

$('#contact_submit').on("click", async function () {
  if ($('#contact-form').valid()) {
    $('#waiting').show();

    const doc = new window.jspdf.jsPDF('l', 'pt', 'a4', true);
    doc.setFont('arial-unicode-ms');
    // page 1
    doc.setFontSize(15);
    doc.text(50, 50, 'UserName : ' + $('#con_fullName').val());
    doc.setFontSize(15);
    doc.text(50, 80, 'Email : ' + $('#con_email').val());
    doc.setFontSize(15);
    doc.text(50, 110, 'Company : ' + $('#con_company').val());
    doc.setFontSize(15);
    doc.text(50, 140, 'Location : ' + $('#con_location').val());
    doc.setFontSize(15);
    doc.text(50, 170, 'Crop : ' + $('#con_crop').val());
    doc.setFontSize(15);
    doc.text(50, 200, $('#schedule_yes').is(":checked") ? "Client want to schedule an appointment with sales" : "Client don't want to schedule an appointment with sales");
    doc.setFontSize(15);
    doc.text(50, 230, 'Preferred date : ' + $('#con_preferred_date').val());
    doc.setFontSize(15);
    doc.text(50, 260, 'Question : ');

    const splitTitle = doc.splitTextToSize($('#con_question').val(), 650);
    doc.text(100, 290, splitTitle);

    if ($('#include_yes').is(":checked")) {
      doc.addPage();
      const lastView = currentView;
      const freeImage = await getImage(ViewType.free, true);
      doc.addImage(freeImage, 'JPEG', 20, 40, 800, 500, undefined, 'FAST');
      getImage(lastView);
    }

    const formData = new FormData();
    formData.append('pdf', doc.output('blob'));
    Utils.requestFormData(g_BasePath + 'home/contact', 'POST', formData, () => {
      $('#waiting').hide();
      Utils.logg('Your question has been successfully submitted!','success');
    });
  }
});

function SetUIUnits() {
  if (currentUnits === Units.metric) {
    $('#metric').attr("checked", true);
    $('#usStand').attr("checked", false);
    $('select[name="metric"]').attr("disabled", false);
    $('select[name="usStand"]').attr("disabled", true);
    $('.unit-text2').text(' mm ');
  }
  else if (currentUnits === Units.usStand) {
    $('#metric').attr("checked", false);
    $('#usStand').attr("checked", true);
    $('select[name="metric"]').attr("disabled", true);
    $('select[name="usStand"]').attr("disabled", false);
    $('.unit-text2').text(' in ');
  }

  $('select[name="metric"]').val(currentMetric);
  $('select[name="usStand"]').val(currentUSStand);

  for (let i = 0; i < palletTypeNameM.length; i++) {
    if (currentUnits === Units.metric) {
      $('#palletDistr_' + i).prev().text(palletTypeNameM[i]);
      $('#palletDistrC_' + i).prev().text(palletTypeNameM[i]);
    }
    else {
      $('#palletDistr_' + i).prev().text(palletTypeNameU[i]);
      $('#palletDistrC_' + i).prev().text(palletTypeNameU[i]);
    }
  }

  for (let i = 0; i < palletTypeNameM.length; i++) {
    if (currentUnits === Units.metric) {
      $(".palletSizeList li:nth-child(" + (i + 1) + ") > label").html(palletTypeNameM[i]);
    }
    else {
      $(".palletSizeList li:nth-child(" + (i + 1) + ") > label").html(palletTypeNameU[i]);
    }
  }
}

function ChangeUnits() {
  rateUnit = 1;
  unitChar = UnitChars.meters;
  if (currentUnits === Units.metric) {
    switch (currentMetric) {
      case Metric.millimeters:
        rateUnit = rateUnit * 1000;
        unitChar = UnitChars.millimeters;
        break;
      case Metric.centimeters:
        rateUnit = rateUnit * 100;
        unitChar = UnitChars.centimeters;
        break;
      case Metric.meters:
        rateUnit = rateUnit * 1;
        unitChar = UnitChars.meters;
        break;
    }
  }
  else if (currentUnits === Units.usStand) {
    switch (currentUSStand) {
      case USStand.feet:
        rateUnit = rateUnit * 3.28084;
        unitChar = UnitChars.feet;
        break;
      case USStand.inches:
        rateUnit = rateUnit * 39.3701;
        unitChar = UnitChars.inches;
        break;
    }
  }

  setUnitForInput();

  //Change unit of unitChar
  $('.unit-text').each(function (index) {
    $(this).text(unitChar);
  });

  updateIcubesDimensions();
}

//Setting
$('.units').on("change", function () {
  if (currentUnits === Units.metric) {
    currentUnits = Units.usStand;
  }
  else {
    currentUnits = Units.metric;
  }

  unit_measurement = currentUnits;
  tracking(36);
  SetUIUnits();
  ChangeUnits();
});

$('select[name="metric"]').on("change", function (event) {
  currentMetric = parseInt(event.target.value);
  ChangeUnits();
});

$('select[name="usStand"]').on("change", function (event) {
  currentUSStand = parseInt(event.target.value);
  ChangeUnits();
});

$('#con_preferred_date').datepicker({
  minDate : '+1d',
  beforeShowDay: $.datepicker.noWeekends
}).datepicker('setDate', '+1d');

$('#addInfo_delivery_date, #addInfo_delivery_date2').datepicker({
  minDate : '+1m',
  beforeShowDay: $.datepicker.noWeekends
}).datepicker('setDate', '+1m');

function setUnitForInput() {
  $('#input-wh-width').val((WHDimensions[0] * rateUnit).toFixed(unitChar === UnitChars.millimeters ? 0 : 2));
  $('#input-wh-length').val((WHDimensions[1] * rateUnit).toFixed(unitChar === UnitChars.millimeters ? 0 : 2));
  $('#input-wh-height').val((WHDimensions[2] * rateUnit).toFixed(unitChar === UnitChars.millimeters ? 0 : 2));
  $('#input-pallet-height').val((g_palletHeight * rateUnit).toFixed(unitChar === UnitChars.millimeters ? 0 : 2));
  $('#input-upRightDistance').val((g_distUpRight * rateUnit).toFixed(unitChar === UnitChars.millimeters ? 0 : 3));

  $('#spacing_b_rows').find("option").each(function () {
    $(this).text(($(this).val() * rateUnit).toFixed(unitChar === UnitChars.millimeters ? 0 : 2));
  });

  $('#palletOverhang, #loadPalletOverhang').find("option").each(function () {
    if (currentUnits === Units.metric) {
      $(this).text(($(this).val() * 1000));
      $('.unit-text2').text('mm');
    }
    else {
      $(this).text(($(this).val() * 39.3701).toFixed(3));
      $('.unit-text2').text('in');
    }
  });

  if (currentUnits === Units.metric) {
    $("#palletSize > label").html(palletTypeNameM[g_palletInfo.order[0]]);
  }
  else {
    $("#palletSize > label").html(palletTypeNameU[g_palletInfo.order[0]]);
  }
}

function formatIntNumber(num) {
  return Math.round(num).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
}

//Tooltip
$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip();
  document.addEventListener("contextmenu", e => e.preventDefault());
});

//Error handling
window.onerror = (message, url, lineNumber) => {
  console.log(message, url, lineNumber);
  const formData = new FormData();
  formData.append("documentName", documentName);
  formData.append("lineNumber", lineNumber);
  formData.append("message", message);
  formData.append("url", url);
  BABYLON.Tools.CreateScreenshotAsync(scene.getEngine(), scene.activeCamera, { width: 1600, height: 1000 }).then((screenshot) => {
    formData.append("screenshot", screenshot);
    Utils.requestFormData(g_BasePath + "home/sendLog", "POST", formData);
  });

  return true;
}

function checkForUnknownTable() {
  if (userRole !== g_UserRole.Sales) return; 
  const elem = document.getElementById('tablesHolder');
  const kids = elem.childNodes.length;

  for (let i = kids - 1; i >= 0; i -= 2) {
    if (elem.childNodes[i].childNodes.length > 1) {
      const body = elem.childNodes[i].childNodes[elem.childNodes[i].childNodes.length - 2];

      if (body.id && icubes.filter(e => e.id === body.id).length === 0) {
        elem.removeChild(elem.childNodes[i]);
        elem.removeChild(elem.childNodes[i-2]);
      }
    }
  }
}

//Pricing
function setPriceTable(data, icube) {
  if (g_tutorialIsRunning) return;
  if (userRole !== g_UserRole.Sales) return;
  checkForUnknownTable();
  // console.log(extraPrice)
  const dataInfo = {
    'racking' : 'Racking costs',
    'xtrack' : 'X-Track elements',
    'lift' : 'Vertical Transporters',
    'carrier' : '3D-Carriers',
    'wifi' : 'System WiFi connectivity',
    'data_control' : 'Dat-A-Control WMS Software',
    'software_implementation' : 'Software implementation and deployment',
    'central_panel' : 'Central control panel',
    // 'extra_lift': 'Extra Vertical Transporters',
    'extra_carrier': 'Extra 3D-Carriers',
    'total_excluding' : 'Total price estimation \n (excluding transport and installation)'
  }

  const details = $('#priceDetails').is(':checked');
  let html = "";
  for (let item in data) {
    if (!details && item != 'total_excluding') continue;
    html += '<tr>';
    html += '<td>' + dataInfo[item] + ((item == 'lift' && icube.extra.lift > 0) ? ' (' + icube.extra.lift + ' added by customer)' : '') + '</td>'; //name
    html += '<td class="text-right">' + (data[item]['qty'] === -1 ? '&nbsp;' : formatIntNumber(data[item]['qty'])) + (item === 'racking' ? ' pallet positions' : '') + '</td>'; //qty
    html += '<td class="text-right">' + '€' + formatIntNumber(data[item]['val']) + '</td>'; //price
    html += '</tr>';
  }

  if (document.getElementById(icube.id)) {
    document.getElementById(icube.id).innerHTML = html;
  }
  else {
    const table = `
      <div class="itemTable" style="margin-top:50px; padding: 10px; font-weight: bold;">` + icube.name + `</div>
      <table class="table itemTable table-responsive-lg table-bordered table-striped table-sm mb-0 mt-0">
        <colgroup>
          <col width="30%">
          <col width="8%">
          <col width="10%">
        </colgroup>
        <thead>
          <tr>
            <th>` + (details === false ? 'Item name' : 'Automatic item name') + `</th>
            <th class="text-right">Quantity</th>
            <th class="text-right">Price estimation</th>
          </tr>
        </thead>
        <tbody id="` + icube.id + `">` + html + `</tbody>
      </table>`;

    document.getElementById("tablesHolder").innerHTML += table;
  }

  g_totalPrice = parseFloat(updateExtraPriceTable());
  g_totalPrice += parseFloat(document.getElementById('connectorPrice').innerHTML) * 1000;

  for (let i = 0; i < icubes.length; i++) {
    g_totalPrice += icubes[i].estimatedPrice;
  }
  $('#totalPrice').text('€' + formatIntNumber(g_totalPrice));
}

function updateInventory () {
  if (!selectedIcube) return;

  let cap = 0;
  icubes.forEach((icube) => {
    const icubePalletNo = icube.getPalletNoJS();
    cap += icubePalletNo[0]; 
    cap += icubePalletNo[1]; 
    cap += icubePalletNo[2]; 
  });

  let sstores = [];
  let railLengths = [0, 0, 0, 0, 0];
  for (let i = 0; i < selectedIcube.stores.length; i++) {
    for (let j = 0; j < selectedIcube.stores[i].dimension.length; j++) {
      const length = _round(selectedIcube.stores[i].dimension[j][1] - selectedIcube.stores[i].dimension[j][0], 3);
      if (length < 5) {
        railLengths[0]++;
      }
      else {
        if (length < 10 && length >= 5) {
          railLengths[1]++;
        }
        else {
          if (length < 25 && length >= 10) {
            railLengths[2]++;
          }
          else {
            if (length < 50 && length >= 25) {
              railLengths[3]++;
            }
            else {
              railLengths[4]++;
            }
          }
        }
      }
      if (sstores.length === 0) {
        sstores.push({
          length: length,
          pallets: selectedIcube.stores[i].capacity[j][g_palletInfo.max],
          numbers: 1
        });
      }
      else {
        const filter = sstores.filter(e => (e.length == length));
        if (filter.length > 0) {
            filter[0].numbers += 1;
        }
        else {
            sstores.push({
              length: length,
              pallets: selectedIcube.stores[i].capacity[j][g_palletInfo.max],
              numbers: 1
            });
        }
      }
    }
  }
  // console.log(manualItemInfo[3].meshData)
  g_inventory = {
    'stores': JSON.stringify(sstores),
    'dimension': JSON.stringify(WHDimensions),
    'pallet_800': g_palletInfo.value[0],
    'pallet_1000': g_palletInfo.value[1],
    'pallet_1200': g_palletInfo.value[2],
    'levelHeight': g_palletHeight,
    'rackingLevels': g_rackingHighLevel,
    'SKU': g_SKU,
    'throughput': g_movesPerHour,
    'g_lift': (selectedIcube.calculatedLiftsNo + selectedIcube.extra.lift),
    'g_carrier': (selectedIcube.calculatedCarriersNo + selectedIcube.extra.carrier),
    'g_port': selectedIcube.activedIOPorts.length,
    'g_capacity': cap,
    'g_rail_5': railLengths[0],
    'g_rail_5_10': railLengths[1],
    'g_rail_10_25': railLengths[2],
    'g_rail_25_50': railLengths[3],
    'g_rail_50': railLengths[4],
    'm_xtrack': manualItemInfo[0].meshData.length,
    'm_palletDropS': manualItemInfo[1].meshData.length,
    'm_palletDropSCS': manualItemInfo[9].meshData.length,
    'm_palletDropSCC': manualItemInfo[6].meshData.length,
    'm_chainC400': manualItemInfo[4].meshData.length,
    'm_chainC540': manualItemInfo[5].meshData.length,
    'm_rollerCC': manualItemInfo[8].meshData.length,
    'm_roller200': manualItemInfo[7].meshData.length,
    'm_sfence100': manualItemInfo[10].meshData.length,
    'm_sfence200': manualItemInfo[2].meshData.length,
    'm_sfenceDoor': manualItemInfo[11].meshData.length,
    'm_scanner': manualItemInfo[12].meshData.length,
    'm_stairs': manualItemInfo[13].meshData.length,
    'm_rail_5': 0,
    'm_rail_5_10': 0,
    'm_rail_10_25': 0,
    'm_rail_25_50': 0,
    'm_rail_50': 0,
    'm_others': 0
  }
  //console.log(g_inventory);
}

$('.faq').on("click", function () {
  $('.faq').removeClass('faq_active');
  $('.faq').next().addClass('hide');
  $(this).addClass('faq_active');
  $(this).next().removeClass('hide');
});

function showLoadingPopUp (callback) {
  $("#loadingScene").fadeIn(1, callback);
}

function hideLoadingPopUp () {
  $("#loadingScene").fadeOut(100);
}

function checkPlacedXtracklift () {
  let allSet = true;
  let xtracks, lifts;
  for (let i = 0; i < icubes.length; i++) {
    xtracks = parseInt(icubes[i].calculatedXtracksNo) - parseInt(icubes[i].activedXtrackIds.length);
    lifts = parseInt(icubes[i].calculatedLiftsNo) + parseInt(icubes[i].extra.lift) - parseInt(icubes[i].activedLiftInfos.length);

    if (xtracks !== 0 || lifts !== 0) {
      allSet = false;
      break;
    }  
  }

  let mess = '';
  if (!allSet) {
    if (xtracks !== 0 && lifts !== 0) {
      mess += 'You have not placed the required x-Track(s) and Vertical Transporters to the layout.<br>';
      mess += 'Are you sure you want to submit for pricing or would you like to first add the missing x-Track(s) and Vertical Transporters';
    }
    else {
      if (xtracks !== 0) {
        mess += 'You have not placed the required x-Track(s) to the layout.<br>';
        mess += 'Are you sure you want to submit for pricing or would you like to first add the missing x-Track(s)';
      }
      else {
        mess += 'You have not placed the required Vertical Transporters to the layout.<br>';
        mess += 'Are you sure you want to submit for pricing or would you like to first add the missing Vertical Transporters';
      }
    }
  }

  return [allSet, mess];
}

$("#btnSubmissionPlan").on("click", function () {
  const data = checkPlacedXtracklift();
  if (data[0]) {
    showModal('planAddInfo-modal');
  }
  else {
    $('#submit-modal-mess').html(data[1]);
    showModal('submit-modal');
  }
});

$("#btnSubmissionPlanToManager").on("click", function () {
  $('#waiting').show('fast', () => {
    Export_PDF.generateFile(true);
  });
  hideModal('planAddInfo-modal');
});

$("#btnSubmissionPlanToManager2").on("click", function () {
  const data = checkPlacedXtracklift();

  extraInfo = {
    email: $('#emailP').val(),
    compName:     (userRole === g_UserRole.Sales ? $('#addInfo_company').val()   : $('#addInfo_company2').val()),
    contactP:     (userRole === g_UserRole.Sales ? $('#addInfo_contacter').val() : $('#addInfo_contacter2').val()),
    location:     (userRole === g_UserRole.Sales ? $('#addInfo_location').val()  : $('#addInfo_location2').val()),
    delDate:      (userRole === g_UserRole.Sales ? $('#addInfo_delivery_date').val() : $('#addInfo_delivery_date2').val()),
    temperature:  (userRole === g_UserRole.Sales ? ($('#addInfo_temp').is(":checked") ? 'Yes' : 'No') : ($('#addInfo_temp2').is(":checked") ? 'Yes' : 'No')),
    flammable:    (userRole === g_UserRole.Sales ? ($('#addInfo_flammable').is(":checked") ? 'Yes' : 'No') : ($('#addInfo_flammable2').is(":checked") ? 'Yes' : 'No')),
    food:         (userRole === g_UserRole.Sales ? ($('#addInfo_food').is(":checked") ? 'Yes' : 'No') : ($('#addInfo_food2').is(":checked") ? 'Yes' : 'No')),
    feedback:     $('#help_feedback').val()
  }

  if (data[0]) {
    if (userRole !== g_UserRole.Demo) {
      $('#waiting').show('fast', () => {
        Export_PDF.generateFile(true);
      });
    }
    else {
      if (extraInfo.contactP.length === 0) return;
      if (extraInfo.email.length === 0) return;
      if (!Utils.validateEmail(extraInfo.email)) return;

      Utils.request(g_BasePath + 'home/createDemoAccount', 'POST', {
        name: extraInfo.contactP,
        email: extraInfo.email
      }, (data) => {
        documentInfo = data.documentInfo;
        userEmail = extraInfo.email;
        userName = extraInfo.contactP;

        $('#waiting').show('fast', () => {
          Export_PDF.generateFile(true);
        });
      }, () => {
        Utils.logg('Account creation failed! Try again later', 'error');
      });
    }
  }
  else {
    $('#submit-modal-mess').html(data[1]);
    $('#submit-modal').removeClass('fade').show();
  }
});

$('.submit-modal-close').on("click", function () {
  $('#submit-modal').addClass('fade').hide();
  document.getElementById('main-tabs-tab-Racking').dispatchEvent(new Event('click'));
});

$('.submit-modal-confirm').on("click", function () {
  hideModal('submit-modal');
  if (userRole === g_UserRole.Sales) {
    showModal('planAddInfo-modal');
  }
  else {
    $('#waiting').show('fast', () => {
      Export_PDF.generateFile(true);
    });
  }
});

function _generateLabels (objectTransforms, text = '', transparency = false, rotationX = Math.PI/2, rotationY = 0, rotationZ = 0, alpha = 0) {
  if (objectTransforms.length === 0)
    return null;

  const half = parseInt(Math.floor(Math.sqrt(objectTransforms.length)) + 1);
  const cellWidth = 64;
  const cellHeight = 32;
  const dT = new BABYLON.DynamicTexture("DynamicTexture", { width: cellWidth * half, height: cellHeight * half }, scene);
  dT.hasAlpha = transparency;
  const offsetX = [28, 26, 22, 2];
  for(let r = 0; r < half; r++) {
    for(let c = 0; c < half; c++) {
      let textStr = text + (r * half + c + 1);
      if (objectTransforms[r * half + c] && objectTransforms[r * half + c][3]) {
        textStr = text + objectTransforms[r * half + c][3];
      }

      if (transparency === true) {
        dT.drawText(textStr, offsetX[textStr.length] + c * cellWidth, 25 + (half - r - 1) * cellHeight, "normal 26px monospace", "#ffffff", null);
      }
      else {
        dT.drawText(textStr, offsetX[textStr.length] + c * cellWidth - 3, 27 + (half - r - 1) * cellHeight, "bold 40px monospace", "#adadad", null);
        dT.drawText(textStr, offsetX[textStr.length] + c * cellWidth - 0.5, 25.5 + (half - r - 1) * cellHeight, "normal 38px monospace", "#ffffff", null);
      }
    }
  }

  const planeBase = new BABYLON.MeshBuilder.CreatePlane("TextPlane", { width: 1, height: 1, sideOrientation: 2 }, scene);
  planeBase.isPickable = false;
  const mat = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);

  mat.emissiveTexture = dT;
  mat.emissiveTexture.hasAlpha = true;

  mat.opacityTexture = dT;
  mat.specularColor = BABYLON.Color3.Black();
  mat.freeze();
  // planeBase.material = mat;

  const SPSLabels = new BABYLON.SolidParticleSystem('SPSLabels', scene);

  SPSLabels.addShape(planeBase, objectTransforms.length);
  const mesh = SPSLabels.buildMesh();
  mesh.material = mat;
  if (transparency) {
    planeBase.position.y = 0.1;
  }
  else {
    planeBase.position.y = 0.05;
  }
  planeBase.dispose();

  SPSLabels.initParticles = function() {
      for (let p = 0; p < this.nbParticles; p++) {
          this.recycleParticle(this.particles[p]);
      }
  };

  SPSLabels.recycleParticle = function(particle) {
      const col = particle.idx % half;
      const row = Math.floor(particle.idx / half);
      particle.position.x = objectTransforms[particle.idx][0];
      particle.position.y = objectTransforms[particle.idx][1] - alpha;
      particle.position.z = objectTransforms[particle.idx][2];
      particle.rotation.x = rotationX;
      particle.rotation.z = rotationY;
      particle.rotation.y = rotationZ;
      particle.uvs.x = (col * cellWidth) / (cellWidth * half);
      particle.uvs.y = (row * cellHeight) / (cellHeight * half);
      particle.uvs.z = ((col + 1) * cellWidth) / (cellWidth * half);
      particle.uvs.w = ((row + 1) * cellHeight) / (cellHeight * half);
  };

  SPSLabels.initParticles();
  SPSLabels.setParticles();
  SPSLabels.refreshVisibleSize();

  SPSLabels.computeParticleRotation = false;
  SPSLabels.computeParticleTexture = false;
  SPSLabels.computeParticleColor = false;
  SPSLabels.computeParticleVertex = false;

  SPSLabels.mesh.freezeWorldMatrix();
  SPSLabels.mesh.freezeNormals();

  return SPSLabels;
}

function clickManualItem(itemId) {
  scene.unfreezeActiveMeshes();
  tracking(35);
  // clear previous added Item features
  clearSceneItemManual();

  //Add item in scene
  selectedItemMesh = addNewItem(manualItemInfo[parseInt(itemId)], "Item-" + manualItemInfo[parseInt(itemId)].name);
  const fixedDirection = [
    [ITEMDIRECTION.right, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.top, ITEMDIRECTION.bottom, ITEMDIRECTION.left, ITEMDIRECTION.left, ITEMDIRECTION.left, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom],
    [ITEMDIRECTION.bottom, ITEMDIRECTION.left, ITEMDIRECTION.bottom, ITEMDIRECTION.left, ITEMDIRECTION.right, ITEMDIRECTION.left, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.left, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom, ITEMDIRECTION.bottom]
  ]

  if (itemId < 800) {
    if (fixedDirection[0][parseInt(itemId)] === undefined) {
      console.error('Set fixed direction first');
      //TODO: refact this fixed rotation
      return;
    }
  
    selectedItemMesh.direction = fixedDirection[0][parseInt(itemId)];
    if (selectedIcube && !selectedIcube.isHorizontal) 
      selectedItemMesh.direction = fixedDirection[1][parseInt(itemId)];
    selectedItemMesh.rotation.y =  parseInt(selectedItemMesh.direction) * Math.PI / 2;
  }

  currentMesh = selectedItemMesh;
  currentMesh.position = new BABYLON.Vector3(-g_WarehouseMaxWidth, 0, -g_WarehouseMaxLength);
  startingPoint = null;

  if (!currentMesh.ruler) {
    currentMesh.ruler = new RulerMItems(currentMesh, scene);
    currentMesh.ruler.buttons[0].isClicked = true;
    for (let i = 0; i < currentMesh.ruler.buttons.length; i++) {
      currentMesh.ruler.buttons[i].isPointerBlocker = false;
    }

    if (!matManager.matHighLight.hasMesh(currentMesh)) {
      Utils.addMatHighLight(currentMesh);
    }
    
    setTimeout(() => {
      // after object is placed not allow click to go through UI
      if (currentMesh && currentMesh.ruler) {
        for (let i = 0; i < currentMesh.ruler.buttons.length; i++) {
          currentMesh.ruler.buttons[i].isPointerBlocker = true;
        }
      }
    }, 150);
  }
}

// Selected Item
$('.equipment-item').on('click', function () {
  clickManualItem($(this).attr("idx"));
});

/**
 * 
 * @param {*} meshData 
 * @param {*} name 
 */
function addNewItem (meshData, name) {
  let item = meshData.originMesh.clone(name);
  item.setEnabled(true);

  if ([ITEMTYPE.Manual.ContourScanner, ITEMTYPE.Manual.ExteriorStairs].includes(meshData.type)) {
    let heightOffset = g_palletHeight;
    if (g_palletHeight >= 1)
      heightOffset = g_palletHeight - (g_palletHeight - 1) * 0.26;
    else 
      heightOffset = g_palletHeight + (1 - g_palletHeight) * 0.26;

    item.scaling.y = heightOffset;

    const material = item.material;
    if (selectedIcube && g_rackingHighLevel > 2 && meshData.type === ITEMTYPE.Manual.ExteriorStairs) {
      for(let i = 1; i < g_rackingHighLevel - 1; i++) {
        const aux = meshData.originMesh.clone(meshData.originMesh);
        aux.scaling.y = heightOffset;
        aux.position.y = (g_palletHeight + g_railHeight) * i;

        item = BABYLON.Mesh.MergeMeshes([item, aux], true, true, null, true, true);
      }
      item.material = material;
    }
  }

  // machine placeholder can be placed at a specific distance
  if (parseInt(meshData.type) >= 1000 && meshData.hasOwnProperty('atDist')) {
    item.atDist = meshData.atDist;
  }

  // temporary
  if (meshData.type === ITEMTYPE.Manual.RailOutside) {
    meshData.atDist = 0;
    item.atDist = meshData.atDist;
  }

  item.name = meshData.name;
  item.type = meshData.type;
  item.width = meshData.width;
  item.height = meshData.height;
  item.length = meshData.length;
  item.multiply = meshData.multiply;
  item.direction = meshData.direction;
  item.isPickable = true;

  item.actionManager = new BABYLON.ActionManager(scene);
  item.actionManager.hoverCursor = "pointer";
  item.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, ()=>{}));
  item.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, (evt)=>{
    startingPoint = null;
    if (currentMesh) {
      if (currentMesh.ruler) {
        if (currentMesh.ruler.multiplyPanel && currentMesh.ruler.multiplyPanel.isVisible) {
          onOkNumMultiply(currentMesh.prevDirection);
        }
        else {
          currentMesh.ruler.dispose();
          delete currentMesh.ruler;
        }
        if (isCtrlPressed) {
          itemsGroup.push(currentMesh);
        }
      }
      if (currentMesh && matManager.matHighLight.hasMesh(currentMesh) && !isCtrlPressed) {
        Utils.removeMatHighLight(currentMesh);
        removeItemsGroup();
      }
    }

    currentMesh = evt.meshUnderPointer;
    if (!currentMesh.ruler) {
      currentMesh.ruler = new RulerMItems(item, scene);
    }

    //Set Highlight Material
    if (!matManager.matHighLight.hasMesh(currentMesh)) {
      Utils.addMatHighLight(currentMesh);
    }

    setTimeout(() => {
      // after object is placed not allow click to go through UI
      if (currentMesh && currentMesh.ruler) {
        for (let i = 0; i < currentMesh.ruler.buttons.length; i++) {
          currentMesh.ruler.buttons[i].isPointerBlocker = true;
        }
      }
    }, 150);

    if (selectedItemMesh) {
      manualItemInfo[parseInt(selectedItemMesh.type)].meshData.push(selectedItemMesh);
      Behavior.add(Behavior.type.addItem);
      selectedItemMesh = undefined;
    }
  }));

  return item;
}

function removeItemsGroup(dispose = false) {
  if (itemsGroup.length > 0) {
    itemsGroup.forEach(element => {
        Utils.removeMatHighLight(element);
        if (dispose) {
          removeItemData(element);
          element.dispose();
        }
    });
  }
  itemsGroup = [];
}

// unset current mesh
function unsetCurrentMesh(dispose = false) {
  if (currentMesh) {
    Utils.removeMatHighLight(currentMesh);
    removeItemsGroup();
    if (currentMesh.ruler) {
      currentMesh.ruler.dispose();
      delete currentMesh.ruler;
    }
    if (dispose) {
      removeItemData(currentMesh);
      currentMesh.dispose();
    }
    currentMesh = null;
  }
}

// close gui, unset curentMesh, dispose selected
function clearSceneItemManual() {
  // Remove selected item if you didn't paste it in the scene
  if (selectedItemMesh) {
    selectedItemMesh.dispose();
    selectedItemMesh = null;
  }
  if (currentMesh) {
    if (currentMesh && currentMesh.ruler && (currentMesh.ruler.multiplyPanel && currentMesh.ruler.multiplyPanel.isVisible)) {
      onOkNumMultiply(currentMesh.prevDirection);
    }
    else {
      unsetCurrentMesh(false);
    }
  }
}

$('#show_tutorial_atFirst').on("click", function () {
  switchCamera(currentView);

  hideModal("hello-modal");
  g_saveBehaviour = false;

  if ($('.tab-content').is(':visible'))
    $('#main-tabs-tab-Size').trigger('click');

  tutorialTour.start(() => {
    setProject(currentTemplateType, false);
    initData(currentTemplateType);
    onBegin();
  });
});

$('#show_tutorial').on("click", function () {
  switchCamera(currentView);

  g_saveBehaviour = false;
  const prevData = {
    document_name: documentName,
    warehouse_dimensions: [...WHDimensions],
    icubeData: [...getIcubeData()],
    itemMData: [...getManualItems()],
    unit_measurement: unit_measurement,
    extraInfo: extraInfo,
    extraPrice: [...extraPrice],
    measurements: [...getAllMeasurements()],
    custom_values: [...custom_values],
    layoutMap: {...layoutMap}
  }

  setProject(Template.values[Template.type.Default], false);

  if ($('.tab-content').is(':visible'))
    $('#main-tabs-tab-Size').trigger('click');

  tutorialTour.start(() => {
    setProject(prevData, false);
    Behavior.init();
  });
});

function saveTutorial (passed) {
  Utils.request(g_BasePath + 'home/tutorial/' + passed, 'POST', {}, null, null);
}

$("#send_feedback").on("click", function () {
  Utils.request(g_BasePath + 'home/sendFeedback', 'POST', {
    fmessage: $('#help_feedback').val()
  }, (data) => {
    if (data)
      Utils.logg('Feedback sent!','success');
  }, null);
});

$('#gotoRacking').on("click", function () {
  document.getElementById('main-tabs-tab-Racking').dispatchEvent(new Event('click'));
  $('.tab-content').animate({ scrollTop: 0 }, 1);
});

$('#auto-upRightDist').on("click", function () {
  if ($(this).hasClass('active-icube-setting')) return;

  $('#custom-upRightDist').removeClass('active-icube-setting');
  $('#input-upRightDistance').attr('disabled', true);
  $(this).addClass('active-icube-setting');
});

$('#custom-upRightDist').on("click", function () {
  if ($(this).hasClass('active-icube-setting')) return;

  $('#auto-upRightDist').removeClass('active-icube-setting');
  $('#input-upRightDistance').attr('disabled', false);
  $(this).addClass('active-icube-setting');
});

$('#download_it').on("click", function () {
  if (selectedIcube)
    selectedIcube.software.download();
});

$('#download_it_wms').on("click", function () {
  if (selectedIcube)
    selectedIcube.software.download_wms();
});

$('#accountToCreate').on("click", function () {
  const name = $('#nameToCreate').val();
  const email = $('#emailToCreate').val();
  if (name.length === 0) return;
  if (email.length === 0) return;
  if (!Utils.validateEmail(email)) return;

  Utils.request(g_BasePath + 'home/createAccountSA', 'POST', {
    name: name,
    email: email
  }, (data) => {
    if (data === 'Error')
      Utils.logg('This user already exists', 'error');
    else
      createUsersSAhtml(data);
  }, () => {
    Utils.logg('Account creation failed! Try again later', 'error');
  });
});

function getUsersSA () {
  Utils.request(g_BasePath + 'home/getUsersSA', 'GET', {}, (data) => {
    createUsersSAhtml(data);
  }, null);
}

function createUsersSAhtml (data) {
  $('#createdAccounts').html('');

  for (let i = 0; i < data.length; i++) {
    // user data
    const sec1 = document.createElement('div');
    sec1.style.marginBottom = "5px";
    sec1.classList.add("col-sm-12");

    const row = document.createElement('div');
    row.classList.add("col-sm-9", "padding-no");
    row.style.fontWeight = "bold";
    row.innerHTML = data[i].email;
    sec1.appendChild(row);

    const row2 = document.createElement('div');
    row2.classList.add("col-sm-3", "padding-no");
    row2.style.textAlign = "right";
    sec1.appendChild(row2);

    const but1 = createUsersSAbut("New project", "fa-plus", () => {
      if (confirm('Do you want to save current layout as new project for user ' + data[i].name + '?')) {
        documentInfo = data[i].id;
        saveProject(() => {
          documentInfo = '';
          setProject(Template.values[Template.type.Default], false);
          setTimeout(() => { getUsersSA(); }, 1000);
        });
      }
    });
    row2.appendChild(but1);

    if (data[i].projects.length > 0) {
      const but0 = createUsersSAbut("Projects list", "fa-bars", () => {
        const doc = document.getElementById('slv_' + i);
        if (doc.style.display === "none")
          doc.style.display = "block";
        else
          doc.style.display = "none";
      });
      row2.appendChild(but0);
    }

    $('#createdAccounts').append(sec1);

    // list of projects
    const sec1a = document.createElement('div');
    $(sec1a).attr('id', 'slv_' + i);
    sec1a.style.display = "none";
    for (let j = 0; j < data[i].projects.length; j++) {
      const sec2 = document.createElement('div');
      sec2.classList.add("col-lg-12");
      sec1a.appendChild(sec2);

      const row1 = document.createElement('div');
      row1.classList.add("col-sm-6", "padding-no");
      row1.innerHTML = (j + 1) + '. ' + data[i].projects[j].document_name;
      $(row1).attr('title', data[i].projects[j].saved_time);
      sec2.appendChild(row1);

      const row2 = document.createElement('div');
      row2.classList.add("col-sm-6", "padding-no");
      row2.style.textAlign = "right";
      sec2.appendChild(row2);

      const but1a = createUsersSAbut("Rename", "fa-pencil", () => {
        const sceneDocName = data[i].projects[j].document_name;
        const projectName = prompt("Please enter project name:", data[i].projects[j].document_name);
        if (projectName == null || projectName == "") {
          return;
        }
        else {
          if (documentName == sceneDocName)
            documentName = projectName;

          renameProject(projectName, data[i].projects[j].id);
          setTimeout(() => { getUsersSA(); }, 1000);
        }
      });
      row2.appendChild(but1a);

      const but2 = createUsersSAbut("Delete", "fa-times", () => {
        if (confirm('Do you want to delete this layout?')) {
          deleteProject(data[i].projects[j].document_name, data[i].id);
          setProject(Template.values[Template.type.Default], false);
          setTimeout(() => { getUsersSA(); }, 1000);
        }
      });
      row2.appendChild(but2);

      const but3 = createUsersSAbut("Edit", "fa-edit", () => {
        if (confirm('Do you want to view/edit this layout?')) {
          loadProject(data[i].projects[j].document_name, data[i].id);
        }
      });
      row2.appendChild(but3);

      const but4 = createUsersSAbut("Overwrite", "fa-exchange", () => {
        if (confirm('Do you want to overwrite this layout with your current layout?')) {
          documentInfo = data[i].id;
          const docName = documentName;
          documentName = data[i].projects[j].document_name
          saveProject(() => {
            documentInfo = '';
            documentName = docName;
            setProject(Template.values[Template.type.Default], false);
            setTimeout(() => { getUsersSA(); }, 1000);
          });
        }
      });
      row2.appendChild(but4);

      const but5 = createUsersSAbut("Notify", "fa-envelope", () => {
        if (confirm('Do you want to send an email notification?')) {
          sendProjectNotify(data[i].projects[j].document_name, data[i].email);
        }
      });
      row2.appendChild(but5);
    }

    $('#createdAccounts').append(sec1a);

    const sec3 = document.createElement('div');
    sec3.classList.add("col-lg-12");
    const hr = document.createElement('hr');
    hr.classList.add("short");
    sec3.appendChild(hr);

    $('#createdAccounts').append(sec3);
  }
}

function createUsersSAbut (text, faClass, onclick) {
  const but = document.createElement('div');
  but.classList.add("fa", faClass, "fa_icon2");
  $(but).attr('title', text);
  but.addEventListener('click', onclick, false);

  return but;
}

$("#uploadedLayout").on("change", function() {
  const formData = new FormData($("#uploader").get(0));
  Utils.requestFormData(g_BasePath + 'home/uploadCAD_layout', 'POST', formData, (data) => {
    if (data.length === 0)
      Utils.logg('Upload failed!', 'error');
    else
      Utils.logg('Upload done!', 'success');

    if (!layoutMap || (layoutMap && !layoutMap.hasOwnProperty('url')))
      layoutMap = { url: '', scale: 1, uOffset: 0, vOffset: 0 }

    layoutMap.url = data;
    layoutMap.scale = 1;
    layoutMap.uOffset = 0;
    layoutMap.vOffset = 0;
    prepareTexture();
  });
});

function prepareTexture () {
  if (layoutMap && layoutMap.hasOwnProperty('url')) {
    if (layoutMap.url !== '') {
      const texture = new BABYLON.Texture(layoutMap.url, scene);
      texture.uScale = layoutMap.scale;
      texture.vScale = layoutMap.scale;
      texture.uOffset = layoutMap.uOffset;
      texture.vOffset = layoutMap.vOffset;
      texture.wrapU = 0;
      texture.wrapV = 0;
      /* - to check
      //offset the UVs
      materialPlane1.diffuseTexture.uOffset = 0.2;
      materialPlane1.diffuseTexture.vOffset = -0.2;
      //clamp U, V => otherwise the texture will repeat itself while offsetting 
      materialPlane1.diffuseTexture.wrapV = 0;
      materialPlane1.diffuseTexture.wrapU = 0;
     */
      warehouse.floor.material.albedoTexture = texture;
      $('#layoutScale').val(parseFloat(((2 - layoutMap.scale) * 100).toFixed(2)));
    }
    else {
      if (warehouse.floor.material.albedoTexture) {
        warehouse.floor.material.albedoTexture.dispose();
        warehouse.floor.material.albedoTexture = null;
      }
    }
  }
  else {
    if (warehouse.floor.material.albedoTexture) {
      warehouse.floor.material.albedoTexture.dispose();
      warehouse.floor.material.albedoTexture = null;
    }
  }

  renderScene();
}

$('#layoutDrawing').on("click", function () {
  for (let i = layoutArrows.length - 1; i >= 0; i--) {
    layoutArrows[i].dispose();
  }
  layoutArrows = [];

  if ($(this).hasClass('active-icube-setting')) {
    $(this).removeClass('active-icube-setting').text("Load building drawing (optional)");
    $('#uploader').hide();
    tracking(38);
  }
  else {
    $(this).addClass('active-icube-setting').text("Confirm placement");
    $('#uploader').show();

    for (let i = 0; i < 4; i++) {
      const arrow = otherItemInfo[ITEMTYPE.Other.PortArrow].originMesh.createInstance('inst_' + i);
      arrow.rotationQuaternion = null;
      arrow.scaling.y = 0.001;
      if ( i % 2 === 0) {
        arrow.position.x = (i === 0 ? -1 : 1) * warehouse.width / 1.8;
        arrow.rotation.y = (i === 0 ? -Math.PI / 2 : Math.PI / 2);
      }
      else {
        arrow.position.z = (i === 1 ? -1 : 1) * warehouse.length / 1.8;
        arrow.rotation.y = (i === 1 ? Math.PI : 0);
      }
      arrow.actionManager = new BABYLON.ActionManager(scene);
      arrow.actionManager.hoverCursor = "pointer";
      arrow.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, ()=>{}));
      arrow.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger, (evt)=>{
        if (!layoutMap) return;
        switch (i) {
          case 0:
            layoutMap.uOffset += 0.1;
            break;
          case 1:
            layoutMap.vOffset += 0.1;
            break;
          case 2:
            layoutMap.uOffset -= 0.1;
            break;
          case 3:
            layoutMap.vOffset -= 0.1;
            break;
        }

        if (warehouse.floor.material.albedoTexture) {
          warehouse.floor.material.albedoTexture.uOffset = layoutMap.uOffset;
          warehouse.floor.material.albedoTexture.vOffset = layoutMap.vOffset;
        }
      }));
      layoutArrows.push(arrow);
    }
    warehouse.update(WHDimensions);
  }

  renderScene(4000);
});

function createPassThList () {
  $('#passthroughList').html('');

  if (selectedIcube) {
    for (let j = 0; j < selectedIcube.activedPassthrough.length; j++) {
      const sec2 = document.createElement('div');
      sec2.style.display = "inline-flex";
      sec2.classList.add("col-lg-12");
      $(sec2).attr('id', 'pass' + j);

      const row1 = document.createElement('div');
      row1.classList.add("col-lg-12");
      row1.style.overflow = "hidden";
      row1.innerHTML = 'Passthrough' + (j + 1);
      sec2.appendChild(row1);

      const but3 = createUsersSAbut("Edit", "fa-edit", () => {
        $('#set-icube-passthrough').addClass('active-icube-setting').text("Confirm placement");
        selectedIcube.property['passthrough'].selectors.forEach((item) => {
          item.dispose();
        });
        selectedIcube.property['passthrough'].selectors = [];
        selectedIcube.showSelectors(0, j);
        selectedIcube.showSelectors(1, j);
        selectedIcube.showSelectors(2, j);
      });
      sec2.appendChild(but3);

      const but2 = createUsersSAbut("Delete", "fa-times", () => {
        selectedIcube.activedPassthrough.splice(j, 1);
        selectedIcube.updateRacking();
        Behavior.add(Behavior.type.addPassthrough);
        createPassThList();
        renderScene();
      });
      sec2.appendChild(but2);

      const hr = document.createElement('hr');
      hr.classList.add("short");

      sec2.appendChild(hr);

      $('#passthroughList').append(sec2);
    }
  }
}

function optimizeDistrCalculation (id, type) {
  let sum = 0;
  for(let i = 0; i < type.length; i++) {
    sum += type[i];
  }

  const diff = (sum > 100 || sum < 100) ? sum - 100 : 0;
  if (diff !== 0) {
    switch  (parseInt(id)) {
      case 0:
        if (type[1] !== 0 && type[2] !== 0) {
          if (diff < 0) {
            type[1] += Math.abs(diff);
          }
          else {
            if (type[1] >= diff) {
              type[1] -= diff;
            }
            else {
              const diff2 = diff - type[1];
              type[1] = 0;
              type[2] -= diff2;
            }
          }
        }
        else if (type[1] !== 0) {
          type[1] = type[1] + (diff > 0 ? -1 : 1) * Math.abs(diff);
        }
        else if (type[2] !== 0) {
          type[2] = type[2] + (diff > 0 ? -1 : 1) * Math.abs(diff);
        }
        else {
          type[1] = Math.abs(diff);
        }
        break;
      case 1:
        if (type[0] !== 0 && type[2] !== 0) {
          if (diff < 0) {
            type[0] += Math.abs(diff);
          }
          else {
            if (type[0] >= diff) {
              type[0] -= diff;
            }
            else {
              const diff2 = diff - type[0];
              type[0] = 0;
              type[2] -= diff2;
            }
          }
        }
        else if (type[0] !== 0) {
          type[0] = type[0] + (diff > 0 ? -1 : 1) * Math.abs(diff);
        }
        else if (type[2] !== 0) {
          type[2] = type[2] + (diff > 0 ? -1 : 1) * Math.abs(diff);
        }
        else {
          type[0] = Math.abs(diff);
        }
        break;
      case 2:
        if (type[0] !== 0 && type[1] !== 0) {
          if (diff < 0) {
            type[0] += Math.abs(diff);
          }
          else {
            if (type[0] >= diff) {
              type[0] -= diff;
            }
            else {
              const diff2 = diff - type[0];
              type[0] = 0;
              type[1] -= diff2;
            }
          }
        }
        else if (type[0] !== 0) {
          type[0] = type[0] + (diff > 0 ? -1 : 1) * Math.abs(diff);
        }
        else if (type[1] !== 0) {
          type[1] = type[1] + (diff > 0 ? -1 : 1) * Math.abs(diff);
        }
        else {
          type[0] = Math.abs(diff);
        }
        break;
    }
  }
  return type;
}

$('#customLastRow').on("click", function() {
  if ($('#lastLSetting').is(':visible')) {
    visibility = false
  }
  else {
    visibility = true
  }

  $('#lastLSetting').css('display', (visibility ? 'block' : 'none'));
  $('#input-pallet-height').attr('disabled', visibility);
  $('#input-pallet-height').next().children().attr('disabled', visibility);
  $('#input-pallet-weight').attr('disabled', visibility);
  $('#input-pallet-weight').next().children().attr('disabled', visibility);
});

function updateInputPallet (idx, palletIdx) {
  const value1 = $('#palletL_' + idx + '_' + palletIdx).val();
  const value2 = $('#palletL_' + (1 - idx) + '_' + palletIdx).val();

  let atLevelIdx = -1;
  for (let i = 0; i < g_palletAtLevel.length; i++) {
    if (g_palletAtLevel[i].idx === palletIdx) {
      atLevelIdx = i;
      break;
    }
  }

  if (idx === 0) {
    const tempH = parseFloat(value1);
    const max = parseFloat((WHDimensions[2] - g_bottomLength - g_railHeight - (g_rackingHighLevel - 1) * parseFloat(g_palletHeight + g_railHeight)).toFixed(2));
    if (tempH > max) {
      $('#palletL_' + idx + '_' + palletIdx).val(max);
    }

    if (atLevelIdx !== -1) {
      if (value1 === g_palletHeight && value2 === g_palletWeight) {
        g_palletAtLevel.splice(atLevelIdx, 1);
      }
      else {
        g_palletAtLevel[atLevelIdx].height = value1
      }
    }
    else {
      g_palletAtLevel.push({
        idx: palletIdx,
        height: value1,
        weight: value2
      });
    }
    updateRackingAtLevel();
    Behavior.add(Behavior.type.palletHeight);
  }
  else {
    if (atLevelIdx !== -1) {
      if (value1 === g_palletWeight && value2 === g_palletHeight) {
        g_palletAtLevel.splice(atLevelIdx, 1);
      }
      else {
        g_palletAtLevel[atLevelIdx].weight = value1
      }
    }
    else {
      g_palletAtLevel.push({
        idx: palletIdx,
        height: value2,
        weight: value1
      });
    }
    updateRackingAtLevel(false);
    Behavior.add(Behavior.type.palletWeight);
  }
}

function updateRackingAtLevel(updateProps = true) {
  if (updateProps) {
    updateRackingHighLevel();
    updateSelectedIcube();
  }
  else {
    if (selectedIcube) {
      selectedIcube.palletAtLevel = g_palletAtLevel;
    }
  }
}

$('#spacing_b_rows').on("change", function (event) {
  g_spacingBetweenRows = parseFloat(event.target.value);
  if (selectedIcube) {
    selectedIcube.updateDistanceBetweenRows();
    selectedIcube.getEstimationPrice();
  }
});

$('#start_sim').on("click", function () {
  if (simulation) {
    updateSimulation(simulation);
    const carrierList = document.getElementById('carriersHolder');
    carrierList.childNodes.forEach(function (carrier) {
      carrier.removeChild(carrier.childNodes[0]);
    });
    simulation.remove();
    simulation = null;

    $(this).text('Start');
    $('#pause_sim').hide();
  }
  else {
    document.getElementById("liftsHolder").innerHTML = '';
    document.getElementById("carriersHolder").innerHTML = '';

    simulation = new Simulation({
      input     : parseInt(document.querySelector('input[id="simIn"]').value),
      output    : parseInt(document.querySelector('input[id="simOut"]').value),
      //mixed     : (document.querySelector('input[name="simMixed"]:checked') ? true : false),
      process   : parseInt(document.querySelector('select[name="simProces"]').value),
      strategy  : parseInt(document.querySelector('select[name="simStrat"]').value),
      multiply  : parseInt(document.querySelector('select[name="simSpeed"]').value),
      liftAssign: parseInt(document.querySelector('select[name="simLiftA"]').value),
      sharePath : (document.querySelector('input[name="simHandoff"]:checked') ? true : false),
      isReply   : false,
      onEnd: () => {
        // console.log('done');
        tracking(15);
        endSimulation();
      }
    });

    if (simulation.error !== '') {
      simulation.remove();
      simulation = null;
    }
    else {
      tracking(14);
      Behavior.add(Behavior.type.playAnimation);
      saveSimulation(simulation);
      $(this).text('Stop');
      $('#pause_sim').text('Pause').show();
    }
  }
});

$('select[name="simSpeed"]').on("change", function () {
  if (simulation)
    simulation.multiply = parseInt($(this)[0].value);
});

$('#pause_sim').on("click", function () {
  if (simulation.isPlaying) {
    simulation.pause();
    $(this).text('Resume');
  }
  else {
    simulation.resume();
    $(this).text('Pause');
  }
});

$('#simMultipleView').on("change", function () {
  g_simMultipleView = $(this).is(":checked");
  toggleMultipleView();
});

$('#addPriceRow').on("click", function () {
  if (!$('#extraPriceTable')[0]) {
    const tab = `<table id="extraPriceTable" class="table itemTable table-responsive-lg table-bordered table-striped table-sm mb-0" style="margin-top: 10px;">
      <colgroup>
        <col width="30%">
        <col width="8%">
        <col width="10%">
        <col width="3%">
      </colgroup>
      <tbody></tbody>
    </table>`;

    document.getElementById("extraPriceHolder").innerHTML = tab;
  }

  const info =`<tr id="extraP_` + extraPrice.length + `">
    <td><input class="epName" type="text" style="width:100%" /></td>
    <td><input class="epQuantity" type="number" style="width:100%;text-align:right" value="0" /></td>
    <td><input class="epValue" type="number" style="width:100%;text-align:right"  value="0" /></td>
    <td><button style="width:100%;font-size:10px;padding:0" onclick="saveExtraPrice(` + extraPrice.length + `)">Save</button></td>
  </tr>`;
  $('#extraPriceTable tbody').append(info);
});

function updateExtraPriceTable() {
  let price = 0;
  $("#extraPriceHolder").html('');
  if (Array.isArray(extraPrice) && extraPrice.length > 0)  {
    if (!$('#extraPriceTable')[0]) {
      const tab = `<table id="extraPriceTable" class="table itemTable table-responsive-lg table-bordered table-striped table-sm mb-0" style="margin-top: 10px;">
        <colgroup>
          <col width="30%">
          <col width="8%">
          <col width="10%">
          <col width="1%">
        </colgroup>
        <tbody></tbody>
      </table>`;
  
      document.getElementById("extraPriceHolder").innerHTML = tab;
    }

    extraPrice.forEach((extra, idx) => {
      price += parseFloat(extra.quantity) * parseFloat(extra.value);

      const info =`<tr id="extraP_` + idx + `">
        <td class="epName">` + extra.name + `</td>
        <td class="epQuantity" style="text-align:right">` + formatIntNumber(extra.quantity) + `</td>
        <td class="epValue" style="text-align:right">€` + formatIntNumber(extra.value) + `</td>
        <td style="text-align:right"><i class="fa fa-trash" title="Delete custom row" onclick="deleteExtraPrice(` + idx + `)"></i></td>
      </tr>`;
      $('#extraPriceTable tbody').append(info);
    });
  }

  return price;
}

function saveExtraPrice (idx) {
  const name = $("#extraP_" + idx + " > td > .epName")[0].value
  const qty = $("#extraP_" + idx + " > td > .epQuantity")[0].value
  const val = $("#extraP_" + idx + " > td > .epValue")[0].value

  extraPrice.push({
    name: name,
    quantity: qty,
    value: val
  });
  tracking(42);
  saveProject(() => {
    if (selectedIcube !== null) {
      selectedIcube.getEstimationPrice();
    }
  });
}

function deleteExtraPrice (idx) {
  extraPrice.splice(idx, 1);
  tracking(43);
  saveProject(() => {
    if (selectedIcube !== null) {
      selectedIcube.getEstimationPrice();
    }
  });
}

$("#viewer2d_it").on("click", function () {
  const doc = document.getElementById('itHelper');
  const canvas = $("#itHelper > canvas")[0];
  if (doc.style.display === "none") {
    doc.style.display = "block";

    if (it3DEngine) {
      it3DEngine.dispose();
      it3DEngine = null;
    }
    it2DEngine = create2DViewerIt(canvas);
  }
  else {
    doc.style.display = "none";

    if (it2DEngine) {
      it2DEngine.dispose();
      it2DEngine = null;
    }
  }
});

$("#viewer3d_it").on("click", function () {
  const doc = document.getElementById('itHelper');
  const canvas = $("#itHelper > canvas")[0];
  if (doc.style.display === "none") {
    doc.style.display = "block";

    if (it2DEngine) {
      it2DEngine.dispose();
      it2DEngine = null;
    }
    it3DEngine = create3DViewerIt(canvas);
  }
  else {
    doc.style.display = "none";

    if (it3DEngine) {
      it3DEngine.dispose();
      it3DEngine = null;
    }
  }
});

$('#submit-rating-btn').on("click", function () {
  const stars = $('input[name=rating_star]:checked').val();
  if (isNaN(parseFloat(stars))) {
    $(this).parent().append('<p>Please choose a rating star</p>');
    setTimeout(() => {
      const list = document.getElementById("submit-rating-btn").parentNode;
      list.removeChild(list.lastChild);
    }, 2000);
    return;
  }

  const comm = $('#rating_comment').val();
  const agent = $('#rating_agent').is(":checked");

  let data = {
    stars: stars,
    comm: comm,
    agent: agent,
    complete: 1
  }

  Utils.request(g_BasePath + 'home/rating', 'POST', data, () => {
    Utils.logg('Feedback successfully sent!','success');
    hideModal('rating-modal');
  }, () => {
    alert("Feedback Failed! Try again later.");
  });
});

$('#manualItem-placeholder').on("change", function () {
  $('#placeholder_data').toggle();
});

$('#add-placeholder').on("click", function () {
  let maxKey = manualItemInfo.indexOf(manualItemInfo[manualItemInfo.length - 1]);
  if (maxKey < 1000)
    maxKey = 1000;
  else
    maxKey = maxKey + 1;

  createFakeManualItem({
    type: maxKey,
    name: $('#machine_name').val(),
    width: parseFloat($('#machine_width').val()),
    length: parseFloat($('#machine_length').val()),
    height: parseFloat($('#machine_height').val()),
    colors: $('#machine_color').val(),
    atDist: parseFloat($('#machine_atDist').val())
  });
  clickManualItem(maxKey);
});

function createFakeManualItem (params) {
  const itemInfo = {
    display: params.name, name: params.name, type: params.type, direction: ITEMDIRECTION.bottom, multiply: (params.length + 0.2),
    width: params.width, length: params.length, height: params.height, meshData: [], originMesh: null, colors: params.colors, atDist: params.atDist
  }

  let faceUV = new Array(6);
  for (let i = 0; i < 6; i++) {
      faceUV[i] = new BABYLON.Vector4(0, 0, 0, 0);
  }
  faceUV[4] = new BABYLON.Vector4(0, 0, 1, 1);

  const placeholder = BABYLON.MeshBuilder.CreateBox(itemInfo.display, {height: 1, width: 1, depth: 1, faceUV: faceUV }, scene);
  placeholder.position.y = 1 / 2;
  placeholder.bakeCurrentTransformIntoVertices();
  placeholder.setEnabled(false);
  placeholder.isPickable = false;
  placeholder.scaling = new BABYLON.Vector3(itemInfo.width, itemInfo.height, itemInfo.length);
  placeholder.freezeWorldMatrix();

  const DTWidth = itemInfo.width * 120;
  const DTHeight = itemInfo.length * 120;

  const albedoText = new BABYLON.DynamicTexture("dynamic texture", { width: DTHeight, height: DTWidth }, scene, false);
  const ctx = albedoText.getContext();
	const size = 12;
  ctx.font = size + "px Arial";
  const textWidth = ctx.measureText(itemInfo.display).width;
  const ratio = textWidth / size;
  let font_size = Math.floor(Math.min(DTWidth, DTHeight) / ratio);
  font_size = font_size < 100 ? font_size : font_size / 2;
  const font = parseInt(font_size) + "px Arial";
  albedoText.drawText(itemInfo.display, null, null, font, "white", itemInfo.colors);

  const placeholderM = new BABYLON.PBRMaterial("placeholderM", scene);
  placeholderM.albedoTexture = albedoText;
  placeholderM.alpha = 0.5;
  placeholderM.roughness = 1;
  placeholderM.freeze();
  placeholder.material = placeholderM;

  itemInfo.originMesh = placeholder;
  manualItemInfo[params.type] = itemInfo;
}

$('#add-people').on("click", function () {
  clickManualItem(899);
});

$('.fa-question-circle').on("mouseenter", function () {
  document.getElementById($(this)[0].dataset.info).style.display = 'block';
}).on("mouseout", function () {
  document.getElementById($(this)[0].dataset.info).style.display = 'none';
});

$('#add-pdfPage').on("click", function () {
  const items = `
    <div class="form-group mb10" style="text-align:center;">
      <label class="col-sm-1 control-label padding-no labelpad">` + parseInt(custompPdf.length + 1) + `</label>
      <input class="col-sm-5 form-control" style="width:41%;" type="text" placeholder="Title" value="" onchange="addTitleToPage(this, ` + custompPdf.length + `)">
      <button class="icube-tool btn btn-primary col-sm-5" onclick="addScreenToPage(this, ` + custompPdf.length + `)">Add image</button>
      <label class="col-sm-1 control-label padding-no labelpad" style="text-align:center;cursor:pointer;" onclick=removeFromPage(` + custompPdf.length + `)><i class="el fa fa-trash" href="#"></i></label>
    </div>`;
  $('#pdfPages').append(items);
  custompPdf.push({ title: '', image: '' });
});

$('#gen-pdf').on("click", function () {
  $('#waiting').show('fast', () => {
    Export_PDF.generateCustomFile();
    tracking(39);
  });
});

function addTitleToPage (elem, page) {
  custompPdf[page].title = $(elem).val();
}

function addScreenToPage (elem, page) {
  scene.render();
  BABYLON.Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, { width: 1440, height: 870 }, function (data) {
    custompPdf[page].image = data;
    renderScene();

    $(elem).html('Add image <i class="el fa fa-check"></i>');
  });
}

function removeFromPage (page) {
  custompPdf.splice(page, 1);
  $('#pdfPages').html('');

  for (let i = 0; i < custompPdf.length; i++) {
    const items = `
      <div class="form-group mb10" style="text-align:center;">
        <label class="col-sm-1 control-label padding-no labelpad">` + parseInt(i + 1) + `</label>
        <input class="col-sm-5 form-control" style="width:41%;" type="text" placeholder="Title" onchange="addTitleToPage(this, ` + i + `)" value="` + custompPdf[i].title + `">
        <button class="icube-tool btn btn-primary col-sm-5" onclick="addScreenToPage(this, ` + i + `)">Add image ` + (custompPdf[i].image !== '' ? `<i class="el fa fa-check"></i>` : ``) + `</button>
        <label class="col-sm-1 control-label padding-no labelpad" style="text-align:center;cursor:pointer;" onclick=removeFromPage(` + i + `)><i class="el fa fa-trash" href="#"></i></label>
      </div>`;
    $('#pdfPages').append(items);
  }
}

$('#add-measurement').on("click", function () {
  g_measureEnabled = !g_measureEnabled;
  clickableItems(!g_measureEnabled);
});

$('#settingsModeS1').on("click", function () {
  $('#advancedSettings01').hide();
  $('#advancedSettings11').hide();
  $('#advancedSettings12').hide();
  $('#simpleSettings12').show();
  if ($('#lastLSetting').is(':visible')) {
    $('#customLastRow').trigger('click');
  }
  $('#customLastRow').attr('disabled', true);

  if (!$(this).hasClass('active-icube-setting')) {
    $(this).addClass('active-icube-setting');
  }
  if ($("#settingsModeA1").hasClass('active-icube-setting')) {
    $("#settingsModeA1").removeClass('active-icube-setting');
  }
  if (!$('#settingsModeS2').hasClass('active-icube-setting')) {
    $('#settingsModeS2').trigger('click');
  }
});

$('#settingsModeA1').on("click", function () {
  $('#advancedSettings01').show();
  $('#advancedSettings11').show();
  $('#advancedSettings12').show();
  $('#simpleSettings12').hide();
  $('#customLastRow').attr('disabled', false);

  if (!$(this).hasClass('active-icube-setting')) {
    $(this).addClass('active-icube-setting');
  }
  if ($("#settingsModeS1").hasClass('active-icube-setting')) {
    $("#settingsModeS1").removeClass('active-icube-setting');
  }
  if (!$('#settingsModeA2').hasClass('active-icube-setting')) {
    $('#settingsModeA2').trigger('click');
  }
});

$('#settingsModeS2').on("click", function () {
  $('#advancedSettings22').hide();
  $('#set-icube-charger').hide();
  $('#set-icube-liftpreloading').hide();

  if (!$(this).hasClass('active-icube-setting')) {
    $(this).addClass('active-icube-setting');
  }
  if ($("#settingsModeA2").hasClass('active-icube-setting')) {
    $("#settingsModeA2").removeClass('active-icube-setting');
  }
  if (!$('#settingsModeS1').hasClass('active-icube-setting')) {
    $('#settingsModeS1').trigger('click');
  }
});

$('#settingsModeA2').on("click", function () {
  $('#advancedSettings22').show();
  $('#set-icube-charger').show();
  $('#set-icube-liftpreloading').show();

  if (!$(this).hasClass('active-icube-setting')) {
    $(this).addClass('active-icube-setting');
  }
  if ($("#settingsModeS2").hasClass('active-icube-setting')) {
    $("#settingsModeS2").removeClass('active-icube-setting');
  }
  if (!$('#settingsModeA1').hasClass('active-icube-setting')) {
    $('#settingsModeA1').trigger('click');
  }
});

$('#palletSize').on("click", function () {
  $('.palletSizeList').toggle();
});

$(".palletSizeList li").on("click", function() {
  tracking(41);
  $(this).parent().hide();
  const colors = ['#3bf582','#fc3f3f','#d2fa41'];
  $('#palletSize > span').css('color', colors[$(this).index()]);
  $('#palletSize > label').html($(this).children('label').text());
  updateDistrPallet($(this).index(), 100);
});

$('#searchProject').on("keyup", function (e) {
  const value = e.target.value;
  $('.list-group').children().show();
  if (value === '') return;
  $('.list-group').children().filter(function() {
    return $(this)[0].children[0].innerHTML.toLowerCase().indexOf(value.toLowerCase()) === -1;
  }).hide();
});

$("#optimizeRacking").on("click", function() {
  if (selectedIcube)
    selectedIcube.optimizeRacking();
  tracking(34);
});

$('.dupl').on("click", function () {
  const key = parseInt($(this).attr("control"));
  if (key === 5) {
    $('#duplicate-tab').hide();
  }
  else {
    if (key === 4) {
      multiplyIcube();
      $('#duplicate-tab').hide();
    }
    else {
      duplData[1] = key;
      $('.dupl').css('color', '#ffffff');
      $(this).css('color', '#333333');
    }
  }
});

$('.dupl2').on("click", function () {
  const key = parseInt($(this).attr("control"));
  duplData[3] = key === 6 ? true : false;
  $('.dupl2').css('color', '#ffffff');
  $(this).css('color', '#333333');
});

$('#dupl_distance').on("change", function () {
  duplData[0] = parseFloat(event.target.value);
});

$('input[name="optimize"]').on("change", function (event) {
  g_optimizeDirectTL = !!parseInt(event.target.value);
});

$('#revisions').on("click", function () {
  $('#revisions_list').toggle();
});

function getRevisions(data, index = -1) {
  Utils.request(g_BasePath + 'home/getRevisions', 'POST', data, (data) => {
    revisions = data;
    $('#revisions_list').html('');
    if (data.length > 0) {
      for (let i = 0; i < data.length; i++) {
        let div = ``, clas = ``;
        if (index !== -1) {
          if (i === index) clas = `btn-primary`;
        }
        else {
          if (i === data.length - 1) clas = `btn-primary`;
        }
        if (i === data.length - 1) {
          div = `
            <div class="price_rev ` + clas + `" style="display:inline-flex;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span onclick="loadVersion(` + i + `)" title="` + data[i].saved_time + `" style="overflow:hidden;min-width:150px;">` + documentName + ` - Latest</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>`;
        }
        else {
          div = `
            <div class="price_rev ` + clas + `" style="display:inline-flex;">
              <i class="fa fa-pencil" onclick="editRevisionName(this)" title="Rename" style="line-height:24px;"></i>
              &nbsp;&nbsp;
              <span onclick="loadVersion(` + i + `)" title="` + data[i].saved_time + `" style="overflow:hidden;min-width:150px;">` + data[i].name + `</span>
              <input class="price_rev_input hide" value="` + data[i].name + `" onchange="updateVersionName(this, ` + i + `)" onfocusout="cancelRevisionEdit(this)" />
              &nbsp;&nbsp;
              <i class="fa fa-times" onclick="deleteVersion(` + i + `)" title="Delete" style="line-height:24px;"></i>
            </div>`;
        }

        $('#revisions_list').append(div);
      }
    }
    else {
      $('#revisions_list').append('<div style="padding: 5px;">No previous versions</div>');
    }
  }, null);
}

function updateVersionName(elem, versionIdx) {
  cancelRevisionEdit(elem);
  $(elem).prev().html($(elem).val());
  Utils.request(g_BasePath + 'home/renameVersion', 'POST', {
    saved_time: revisions[versionIdx].saved_time,
    name: $(elem).val()
  });
}

function deleteVersion(versionIdx) {
  $('#revisions_list').children().eq(versionIdx).remove();
  Utils.request(g_BasePath + 'home/deleteVersion', 'POST', {
    saved_time: revisions[versionIdx].saved_time
  }, () => {
    let data = {
      document_name: documentName
    }
    if (documentInfo > 0) {
      data = Object.assign({}, data, { slid : documentInfo });
    }
    loadVersion(revisions.length - 2);
  });
}

function loadVersion(versionIdx) {
  const docData = JSON.parse(revisions[versionIdx].documentData);
  let icubeData = JSON.parse(revisions[versionIdx].icubeData);
  if (!icubeData || !Array.isArray(icubeData))  icubeData = [];
  icubeData.forEach((icube) => {
    for (key in icube) {
      if (!['name', 'uid'].includes(key)) {
        icube[key] = JSON.parse(icube[key]);
      }
    }
  });

  const data = {
    extraInfo : JSON.parse(docData.extraInfo),
    extraPrice : JSON.parse(docData.extraPrice),
    measurements : JSON.parse(docData.measurements),
    custom_values : JSON.parse(docData.custom_values),
    documentInfo : (isEditByAdmin) ? documentInfo : "",
    document_name : revisions[versionIdx].document_name,
    itemMData : JSON.parse(docData.itemMData),
    layoutMap : JSON.parse(docData.layoutMap),
    unit_measurement : JSON.parse(docData.unit_measurement),
    warehouse_dimensions: JSON.parse(docData.warehouse_dimensions),
    icubeData : icubeData
  }

  setProject(data, true, versionIdx);

  if (versionIdx < revisions.length - 1) {
    $('#project-name').html((revisions[versionIdx].hasOwnProperty('name') ? revisions[versionIdx].name : documentName));
  }
}

function editRevisionName(elem) {
  $(elem).next().addClass('hide');
  $(elem).next().next().removeClass('hide').focus();
}

function cancelRevisionEdit(elem) {
  $(elem).addClass('hide');
  $(elem).prev().removeClass('hide');
}

$("#newProject").on("click", function () {
  $(".new-modal-close").hide();
  showModal("new-modal");
  hideModal("hello-modal");
  g_tutorialIsRunning = false;
});

$("#loadProject").on("click", function () {
  getProjectList(function (datas) {
    $(".load-modal-close").hide();
    createProjectList(datas);
    hideModal("hello-modal");
    g_tutorialIsRunning = false;
  });
});

$(".checkbox-dropdown").on("click", function () {
  $(this).toggleClass("is-active");
});

$(".checkbox-dropdown ul").on("click", function (e) {
  e.stopPropagation();
});

$("#send_report").on("click", function () {
  showModal("report-modal");
});

$(".report-modal-close").on("click", function () {
  hideModal("report-modal");
});

$('.report-modal-confirm').on("click", async function () {
  const formData = new FormData();
  formData.append("documentName", documentName);
  formData.append("name", $("#reportName").val());
  formData.append("description", $("#reportDesc").val());
  const image = await BABYLON.Tools.CreateScreenshotAsync(scene.getEngine(), scene.activeCamera, { width: 1600, height: 1000 });
  formData.append("screenshot", image);
  for (let i = 0; i < $("#reportFile")[0].files.length; i++) {
    formData.append("file_" + i, $("#reportFile")[0].files[i]);
  }
  Utils.requestFormData(g_BasePath + "home/saveReport", "POST", formData);
  Utils.logg("Bug report sent!", "success");
  hideModal("report-modal");
});

$("#configVariables").on("click", function () {
  if (custom_values[0] && custom_values[0] !== -1) {
    $("#var_palletWidth").val(custom_values[0]);
  }
  if (custom_values[1] && custom_values[1] !== -1) {
    $("#var_palletLength").val(custom_values[1]);
  }
  if (custom_values[2] && custom_values[2] !== -1) {
    $("#var_palletOverhang").val(custom_values[2]);
  }
  if (custom_values[3] && custom_values[3] !== -1) {
    $("#var_railHeight").val(custom_values[3]);
  }
  if (custom_values[4] && custom_values[4] !== -1) {
    $("#var_distToXtrack").val(custom_values[4]);
  }
  if (custom_values[5] && custom_values[5] !== -1) {
    $("#var_distToMargin").val(custom_values[5]);
  }
  if (custom_values[6] && custom_values[6] !== -1) {
    $("#var_distTo1stStore").val(custom_values[6]);
  }
  if (custom_values[7] && custom_values[7] !== -1) {
    $("#var_distToNextStore").val(custom_values[7]);
  }
  showModal("configVariables-modal");
});

$(".configVariables-modal-close").on("click", function () {
  hideModal("configVariables-modal");
});

$(".configVariables-modal-confirm").on("click", function () {
  const var_distToNextStore= parseFloat($("#var_distToNextStore").val());
  const var_distTo1stStore = parseFloat($("#var_distTo1stStore").val());
  const var_distToMargin   = parseFloat($("#var_distToMargin").val());
  const var_distToXtrack   = parseFloat($("#var_distToXtrack").val());
  const var_railHeight     = parseFloat($("#var_railHeight").val());
  const var_palletOverhang = parseFloat($("#var_palletOverhang").val());
  const var_palletLength   = parseFloat($("#var_palletLength").val());
  const var_palletWidth    = parseFloat($("#var_palletWidth").val());

  custom_values = [
    isNaN(var_palletWidth)    ? -1 : var_palletWidth,
    isNaN(var_palletLength)   ? -1 : var_palletLength,
    isNaN(var_palletOverhang) ? -1 : var_palletOverhang,
    isNaN(var_railHeight)     ? -1 : var_railHeight,
    isNaN(var_distToXtrack)   ? -1 : var_distToXtrack,
    isNaN(var_distToMargin)   ? -1 : var_distToMargin,
    isNaN(var_distTo1stStore) ? -1 : var_distTo1stStore,
    isNaN(var_distToNextStore)? -1 : var_distToNextStore
  ];

  updateConfigVariables();
  hideModal("configVariables-modal");

  $('#customValue').html(custom_values.length > 0 ? `<b>⚠ This project contains custom values ⚠</b>` : ``);
});

function updateConfigVariables() {
  const palletIdx = g_palletInfo.max;
  const sum = custom_values.filter(e => e === -1);
  if (sum.length === custom_values.length) {
    custom_values = [];
  }

  resetConfigVariables();

  if (custom_values[0] && custom_values[0] > 800 && custom_values[0] < 1400) {
    g_PalletW[palletIdx] = useP(custom_values[0], false);
  }

  if (custom_values[1] && custom_values[1] > 1000 && custom_values[1] < 1400) {
    g_PalletH[palletIdx] = useP(custom_values[1], false);
  }

  if (custom_values[2] && custom_values[2] >= 0 && custom_values[2] <= 200) {
    g_palletOverhang = parseFloat((custom_values[2] / 1000).toFixed(4));
  }

  if (custom_values[3] && custom_values[3] >= 0 && custom_values[3] <= 1000) {
    g_railHeight = useP(custom_values[3], false);
  }

  if (custom_values[4] && custom_values[4] >= 0 && custom_values[4] <= 500) {
    g_difftoXtrack[palletIdx] = useP(custom_values[4], false);
  }

  if (custom_values[5] && custom_values[5] >= 0 && custom_values[5] <= 500) {
    g_diffToEnd[palletIdx] = useP(custom_values[5], false);
    g_railOutside = g_diffToEnd[palletIdx];
  }

  if (custom_values[6] && custom_values[6] >= 0 && custom_values[6] <= 500) {
    g_bottomLength = useP(custom_values[6], false);
  }

  if (custom_values[7] && custom_values[7] >= 0 && custom_values[7] <= 500) {
    g_StoreTopGap = useP(custom_values[7], false);
  }

  g_palletInfo.type = g_palletInfo.value;
  updateSelectedIcube();
}

function resetConfigVariables() {
  g_PalletW = [0.8, 1, 1.2];
  g_PalletH = [1.2, 1.2, 1.2];
  g_palletOverhang = 0.05;
  g_difftoXtrack = [0.15, 0.05, 0.05];
  g_diffToEnd = [0.175, 0.175, 0.175];
  g_railOutside = 0.175;
  g_railHeight = 0.38;
  g_bottomLength = 0.27;
  g_StoreTopGap = 0;
  g_palletInfo.type = g_palletInfo.value;
}