text: /**
   * Pimcore
   *
   * LICENSE
   *
   * This source file is subject to the new BSD license that is bundled
   * with this package in the file LICENSE.txt.
   * It is also available through the world-wide-web at this URL:
   * http://www.pimcore.org/license
   *
   * @copyright  Copyright (c) 2009-2014 pimcore GmbH (http://www.pimcore.org)
   * @license    http://www.pimcore.org/license     New BSD License
   */
  
  pimcore.registerNS("pimcore.settings.thumbnail.item");
  pimcore.settings.thumbnail.item = Class.create({
  
  
      initialize: function (data, parentPanel) {
          this.parentPanel = parentPanel;
          this.data = data;
          this.currentIndex = 0;
          this.medias = {};
  
          this.addLayout();
  
  
          // add default panel
          this.addMediaPanel("default", this.data.items ,false, true);
  
          // add medias
          if(this.data["medias"]) {
              Ext.iterate(this.data.medias, function (key, items) {
                  this.addMediaPanel(key, items ,true, false);
              }.bind(this));
          }
      },
  
  
      addLayout: function () {
  
          this.editpanel = new Ext.Panel({
              bodyStyle: "padding: 20px;",
              autoScroll: true
          });
  
          var panelButtons = [];
          panelButtons.push({
              text: t("save"),
              iconCls: "pimcore_icon_apply",
              handler: this.save.bind(this)
          });
  
  
          this.mediaPanel = new Ext.TabPanel({
              autoHeight: true,
              closable: true
          });
  
          this.settings = new Ext.form.FormPanel({
              border: false,
              labelWidth: 150,
              items: [{
                  xtype: "panel",
                  autoHeight: true,
                  border: false,
                  autoLoad: "/admin/settings/thumbnail-adapter-check"
              },{
                  xtype: "textfield",
                  name: "name",
                  value: this.data.name,
                  fieldLabel: t("name"),
                  width: 450,
                  disabled: true
              }, {
                  xtype: "textarea",
                  name: "description",
                  value: this.data.description,
                  fieldLabel: t("description"),
                  width: 450,
                  height: 100
              }, {
                  xtype: "combo",
                  name: "format",
                  fieldLabel: t("format"),
                  value: this.data.format,
                  triggerAction: 'all',
                  editable: false,
                  store: [["SOURCE", "Auto (Web-optimized - recommended)"], ["PNG","PNG"],["GIF","GIF"], ["JPEG","JPEG"], ["PJPEG","JPEG (progressive)"],["TIFF","TIFF"],
                          ["PRINT","Print (PNG,JPG,SVG,TIFF)"]],
                  width: 450
              }, {
                  xtype: "numberfield",
                  name: "quality",
                  value: this.data.quality,
                  fieldLabel: t("quality"),
                  width: 210
              }, {
                  xtype: "numberfield",
                  name: "highResolution",
                  value: this.data.highResolution,
                  fieldLabel: t("high_resolution") + "<br /><small>(2x Retina, 3.2x Print, ...)</small>",
                  width: 210,
                  decimalPrecision: 1
              }],
              buttons: [{
                  text: t("add_media_query") + " (<b>" + t("experimental") + "</b>)",
                  iconCls: "pimcore_icon_add",
                  handler: function () {
                      Ext.MessageBox.prompt("", t("please_enter_the_maximum_viewport_width_in_pixels_allowed_for_this_thumbnail"), function (button, value) {
                          if(button == "ok" && is_numeric(value)) {
                              value = value + "w"; // add the width indicator here, to be future-proof
                              this.addMediaPanel(value, null ,true, true);
                          }
                      }.bind(this));
                  }.bind(this)
              }]
          });
  
          this.panel = new Ext.Panel({
              border: false,
              closable: true,
              autoScroll: true,
              bodyStyle: "padding: 20px;",
              title: this.data.name,
              id: "pimcore_thumbnail_panel_" + this.data.name,
              items: [this.settings, this.mediaPanel],
              buttons: panelButtons
          });
  
  
          this.parentPanel.getEditPanel().add(this.panel);
          this.parentPanel.getEditPanel().setActiveTab(this.panel);
  
          pimcore.layout.refresh();
      },
  
      addMediaPanel: function (name, items, closable, activate) {
  
          if(this.medias[name]) {
              return;
          }
  
          var addMenu = [];
          var itemTypes = Object.keys(pimcore.settings.thumbnail.items);
          for(var i=0; i<itemTypes.length; i++) {
              if(itemTypes[i].indexOf("item") == 0) {
                  addMenu.push({
                      iconCls: "pimcore_icon_add",
                      handler: this.addItem.bind(this, name, itemTypes[i]),
                      text: pimcore.settings.thumbnail.items[itemTypes[i]](null, null,true)
                  });
              }
          }
  
          var title = "";
          if(name == "default") {
              title = t("default");
          } else {
              // remove the width indicator (maybe there will be more complex syntax in the future)
              var tmpName = name.replace("w","");
              title = "max. width: " + tmpName + "px";
          }
  
          var itemContainer = new Ext.Panel({
              title: title,
              tbar: [{
                  text: t("transformations"),
                  iconCls: "pimcore_icon_add",
                  menu: addMenu
              }],
              border: false,
              closable: closable,
              autoHeight: true,
              listeners: {
                  close: function (name) {
                      delete this.medias[name];
                  }.bind(this, name)
              }
          });
  
          this.medias[name] = itemContainer;
  
          if(items && items.length > 0) {
              for(var i=0; i<items.length; i++) {
                  this.addItem(name, "item" + ucfirst(items[i].method), items[i].arguments);
              }
          }
  
  
          this.mediaPanel.add(itemContainer);
          this.mediaPanel.updateLayout();
  
          // activate the default panel
          if(activate) {
              this.mediaPanel.setActiveTab(itemContainer);
          }
  
          return itemContainer;
      },
  
      addItem: function (name, type, data) {
  
          var item = pimcore.settings.thumbnail.items[type](this.medias[name], data);
          this.medias[name].add(item);
          this.medias[name].updateLayout();
  
          this.currentIndex++;
      },
  
      getData: function () {
  
          var mediaData = {};
  
          Ext.iterate(this.medias, function (key, value) {
              mediaData[key] = [];
              var items = value.items.getRange();
              for (var i=0; i<items.length; i++) {
                  mediaData[key].push(items[i].getForm().getFieldValues());
              }
          });
  
          return {
              settings: Ext.encode(this.settings.getForm().getFieldValues()),
              medias: Ext.encode(mediaData),
              name: this.data.name
          }
      },
  
      save: function () {
          Ext.Ajax.request({
              url: "/admin/settings/thumbnail-update",
              method: "post",
              params: this.getData(),
              success: this.saveOnComplete.bind(this)
          });
      },
  
      saveOnComplete: function () {
          this.parentPanel.tree.getRootNode().reload();
          pimcore.helpers.showNotification(t("success"), t("thumbnail_saved_successfully"), "success");
      },
  
      getCurrentIndex: function () {
          return this.currentIndex;
      }
  
  });
  
  
  /** ITEM TYPES **/
  
  pimcore.registerNS("pimcore.settings.thumbnail.items");
  
  pimcore.settings.thumbnail.items = {
  
      detectBlockIndex: function (blockElement, container) {
          // detect index
          var index;
  
          for(var s=0; s<container.items.items.length; s++) {
              if(container.items.items[s].getId() == blockElement.getId()) {
                  index = s;
                  break;
              }
          }
          return index;
      },
  
      getTopBar: function (name, index, parent) {
          return [{
              xtype: "tbtext",
              text: "<b>" + name + "</b>"
          },"-",{
              iconCls: "pimcore_icon_up",
              handler: function (blockId, parent) {
  
                  var container = parent;
                  var blockElement = Ext.getCmp(blockId);
                  var index = pimcore.settings.thumbnail.items.detectBlockIndex(blockElement, container);
                  var tmpContainer = pimcore.viewport;
  
                  var newIndex = index-1;
                  if(newIndex < 0) {
                      newIndex = 0;
                  }
  
                  // move this node temorary to an other so ext recognizes a change
                  container.remove(blockElement, false);
                  tmpContainer.add(blockElement);
                  container.updateLayout();
                  tmpContainer.updateLayout();
  
                  // move the element to the right position
                  tmpContainer.remove(blockElement,false);
                  container.insert(newIndex, blockElement);
                  container.updateLayout();
                  tmpContainer.updateLayout();
  
                  pimcore.layout.refresh();
              }.bind(window, index, parent)
          },{
              iconCls: "pimcore_icon_down",
              handler: function (blockId, parent) {
  
                  var container = parent;
                  var blockElement = Ext.getCmp(blockId);
                  var index = pimcore.settings.thumbnail.items.detectBlockIndex(blockElement, container);
                  var tmpContainer = pimcore.viewport;
  
                  // move this node temorary to an other so ext recognizes a change
                  container.remove(blockElement, false);
                  tmpContainer.add(blockElement);
                  container.updateLayout();
                  tmpContainer.updateLayout();
  
                  // move the element to the right position
                  tmpContainer.remove(blockElement,false);
                  container.insert(index+1, blockElement);
                  container.updateLayout();
                  tmpContainer.updateLayout();
  
                  pimcore.layout.refresh();
              }.bind(window, index, parent)
          },"->",{
              iconCls: "pimcore_icon_delete",
              handler: function (index, parent) {
                  parent.remove(Ext.getCmp(index));
              }.bind(window, index, parent)
          }];
      },
  
      itemResize: function (panel, data, getName) {
  
          var niceName = t("resize");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "width",
                      fieldLabel: t("width"),
                      width: 210,
                      value: data.width
                  },
                  {
                      xtype: 'numberfield',
                      name: "height",
                      fieldLabel: t("height"),
                      width: 210,
                      value: data.height
                  }]
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "resize"
              }]
          });
  
          return item;
      },
  
      itemScaleByHeight: function (panel, data, getName) {
  
          var niceName = t("scalebyheight");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'numberfield',
                  name: "height",
                  fieldLabel: t("height"),
                  width: 210,
                  value: data.height
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "scaleByHeight"
              }]
          });
  
          return item;
      },
  
      itemScaleByWidth: function (panel, data, getName) {
  
          var niceName = t("scalebywidth");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'numberfield',
                  name: "width",
                  fieldLabel: t("width"),
                  width: 210,
                  value: data.width
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "scaleByWidth"
              }]
          });
  
          return item;
      },
  
      itemContain: function (panel, data, getName) {
  
          var niceName = t("contain");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "width",
                      fieldLabel: t("width"),
                      width: 210,
                      value: data.width
                  },
                  {
                      xtype: 'numberfield',
                      name: "height",
                      fieldLabel: t("height"),
                      width: 210,
                      value: data.height
                  }]
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "contain"
              }]
          });
  
          return item;
      },
  
  
      itemCrop: function (panel, data, getName) {
  
          var niceName = t("crop");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "width",
                      fieldLabel: t("width"),
                      width: 210,
                      value: data.width
                  },
                  {
                      xtype: 'numberfield',
                      name: "height",
                      fieldLabel: t("height"),
                      width: 210,
                      value: data.height
                  }]
              },{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "x",
                      fieldLabel: "X",
                      width: 210,
                      value: data.x
                  },
                  {
                      xtype: 'numberfield',
                      name: "y",
                      fieldLabel: "Y",
                      width: 210,
                      value: data.y
                  }]
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "crop"
              }]
          });
  
          return item;
      },
  
      itemCover: function (panel, data, getName) {
  
          var niceName = t("cover");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'fieldset',
                  border: false,
                  layout: 'vbox',
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "width",
                      fieldLabel: t("width"),
                      width: 210,
                      value: data.width
                  },
                  {
                      xtype: 'numberfield',
                      name: "height",
                      fieldLabel: t("height"),
                      width: 210,
                      value: data.height
                  }]
              },{
                  xtype: "combo",
                  name: "positioning",
                  fieldLabel: t("positioning"),
                  value: data.positioning,
                  triggerAction: 'all',
                  editable: false,
                  store: ["center","topleft","topright","bottomleft","bottomright","centerleft","centerright",
                              "topcenter","bottomcenter"],
                  width: 250
              },{
                  xtype: "checkbox",
                  name: "doNotScaleUp",
                  checked: data["doNotScaleUp"],
                  fieldLabel: t("do_not_scale_up")
              }, {
                  xtype: "hidden",
                  name: "type",
                  value: "cover"
              }]
          });
  
          return item;
      },
  
      itemFrame: function (panel, data, getName) {
  
          var niceName = t("frame");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "width",
                      fieldLabel: t("width"),
                      width: 210,
                      value: data.width
                  },
                  {
                      xtype: 'numberfield',
                      name: "height",
                      fieldLabel: t("height"),
                      width: 210,
                      value: data.height
                  }]
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "frame"
              }]
          });
  
          return item;
      },
  
      itemTrim: function (panel, data, getName) {
  
          var niceName = t("trim") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'numberfield',
                  name: "tolerance",
                  minValue: 0,
                  maxValue: 100,
                  fieldLabel: t("tolerance"),
                  width: 210,
                  value: data.tolerance ? data.tolerance : 0
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "trim"
              }]
          });
  
          return item;
      },
  
      itemRotate: function (panel, data, getName) {
  
          var niceName = t("rotate");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'numberfield',
                  name: "angle",
                  fieldLabel: t("angle"),
                  width: 210,
                  value: data.angle
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "rotate"
              }]
          });
  
          return item;
      },
  
      itemSetBackgroundColor: function (panel, data, getName) {
  
          var niceName = t("setbackgroundcolor");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'textfield',
                  name: "color",
                  fieldLabel: t("color") + " (#hex)",
                  width: 210,
                  value: data.color
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "setBackgroundColor"
              }]
          });
  
          return item;
      },
  
  
      itemRoundCorners: function (panel, data, getName) {
  
          var niceName = t("roundcorners") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
  
                  items: [{
                      xtype: 'numberfield',
                      name: "width",
                      fieldLabel: t("width"),
                      width: 210,
                      value: data.width
                  },
                  {
                      xtype: 'numberfield',
                      name: "height",
                      fieldLabel: t("height"),
                      width: 210,
                      value: data.height
                  }]
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "roundCorners"
              }]
          });
  
          return item;
      },
  
      itemSetBackgroundImage: function (panel, data, getName) {
  
          var niceName = t("setbackgroundimage") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'textfield',
                  fieldLabel: t("path") + " <br />(rel. to doc-root)",
                  name: "path",
                  value: data.path,
                  width: 350
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "setBackgroundImage"
              }]
          });
  
          return item;
      },
  
      itemAddOverlay: function (panel, data, getName) {
  
          var niceName = t("addoverlay") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
  
          //set some sane default values, maybe the data parameter should already contain these values?
          if(typeof data.x == "undefined" || data.x == "") {
              data.x = 0;
          }
          if(typeof data.y == "undefined" || data.y == "") {
              data.y = 0;
          }
          if(typeof data.origin == "undefined" || data.origin == "") {
              data.origin = "top-left";
          }
          if(typeof data.alpha == "undefined" || data.alpha == "") {
              data.alpha = 100;
          }
          if(typeof data.composite == "undefined" || data.composite == "") {
              data.composite = "COMPOSITE_DEFAULT";
          }
  
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'textfield',
                  fieldLabel: t("path") + " <br />(rel. to doc-root)",
                  name: "path",
                  value: data.path,
                  width: 350
              },{
                  xtype: 'fieldset',
                  layout: 'vbox',
                  border: false,
                  padding: 0,
                  items: [{
                      xtype: 'numberfield',
                      name: "x",
                      fieldLabel: "X",
                      width: 210,
                      value: data.x
                  },
                  {
                      xtype: 'numberfield',
                      name: "y",
                      fieldLabel: "Y",
                      width: 210,
                      value: data.y
                  }]
              },{
                  xtype: "combo",
                  name: "origin",
                  fieldLabel: t("origin"),
                  value: data.origin,
                  triggerAction: 'all',
                  editable: false,
                  store: ["top-left", "top-right", "bottom-left", "bottom-right", "center"],
                  width: 200
              },{
                  xtype: 'numberfield',
                  name: "alpha",
                  fieldLabel: t("opacity") + " (0-100)",
                  width: 210,
                  value: data.alpha
              },{
                  xtype: "combo",
                  name: "composite",
                  fieldLabel: t("composite"),
                  value: data.composite,
                  triggerAction: 'all',
                  editable: false,
                  store: ["COMPOSITE_DEFAULT", "COMPOSITE_HARDLIGHT", "COMPOSITE_EXCLUSION"],
                  width: 200
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "addOverlay"
              }]
          });
  
          return item;
      },
  
      itemAddOverlayFit: function (panel, data, getName) {
  
          var niceName = t("addoverlay_fit") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
  
          //set some sane default values, maybe the data parameter should already contain these values?
          if(typeof data.composite == "undefined" || data.composite == "") {
              data.composite = "COMPOSITE_DEFAULT";
          }
  
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'textfield',
                  fieldLabel: t("path") + " <br />(rel. to doc-root)",
                  name: "path",
                  value: data.path,
                  width: 350
              },{
                  xtype: "combo",
                  name: "composite",
                  fieldLabel: t("composite"),
                  value: data.composite,
                  triggerAction: 'all',
                  editable: false,
                  store: ["COMPOSITE_DEFAULT", "COMPOSITE_HARDLIGHT", "COMPOSITE_EXCLUSION"],
                  width: 200
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "addOverlayFit"
              }]
          });
  
          return item;
      },
  
      itemApplyMask: function (panel, data, getName) {
  
          var niceName = t("applymask") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'textfield',
                  fieldLabel: t("path") + " <br />(rel. to doc-root)",
                  name: "path",
                  value: data.path,
                  width: 350
              },{
                  xtype: "hidden",
                  name: "type",
                  value: "applyMask"
              }]
          });
  
          return item;
      },
  
      itemGrayscale: function (panel, data, getName) {
  
          var niceName = t("grayscale");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              html: t("nothing_to_configure"),
              items: [{
                  xtype: "hidden",
                  name: "type",
                  value: "grayscale"
              }]
          });
  
          return item;
      },
  
      itemSepia: function (panel, data, getName) {
  
          var niceName = t("sepia");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              html: t("nothing_to_configure"),
              items: [{
                  xtype: "hidden",
                  name: "type",
                  value: "sepia"
              }]
          });
  
          return item;
      },
  
      itemSharpen: function (panel, data, getName) {
  
          var niceName = t("sharpen") + " (Imagick)";
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              items: [{
                  xtype: 'numberfield',
                  name: 'radius',
                  fieldLabel: t('radius'),
                  width: 210,
                  decimalPrecision: 1,
                  minValue: 0,
                  allowDecimals: true,
                  incrementValue: 0.1,
                  value: data.radius || 0
              },{
                  xtype: 'numberfield',
                  name: 'sigma',
                  fieldLabel: t('sigma'),
                  width: 210,
                  decimalPrecision: 1,
                  minValue: 0,
                  allowDecimals: true,
                  incrementValue: 0.1,
                  value: data.sigma || 1
              },{
                  xtype: 'numberfield',
                  name: 'amount',
                  fieldLabel: t('amount'),
                  width: 210,
                  decimalPrecision: 1,
                  minValue: 0,
                  allowDecimals: true,
                  incrementValue: 0.1,
                  value: data.amount || 1
              },{
                  xtype: 'numberfield',
                  name: 'threshold',
                  fieldLabel: t('threshold'),
                  width: 210,
                  decimalPrecision: 2,
                  minValue: 0,
                  allowDecimals: true,
                  incrementValue: 0.01,
                  value: data.threshold || 0.05
              },{
                  xtype: 'hidden',
                  name: 'type',
                  value: 'sharpen'
              }]
          });
  
          return item;
      },
  
      itemTifforiginal: function (panel, data, getName) {
  
          var niceName = t("use_original_tiff");
          if(typeof getName != "undefined" && getName) {
              return niceName;
          }
  
          if(typeof data == "undefined") {
              data = {};
          }
          var myId = Ext.id();
  
          var item =  new Ext.form.FormPanel({
              id: myId,
              //style: "margin: 10px 0 0 0",
              bodyStyle: "padding: 10px;",
              tbar: this.getTopBar(niceName, myId, panel),
              html: t("use_original_tiff_description"),
              items: [{
                  xtype: "hidden",
                  name: "type",
                  value: "tifforiginal"
              }]
          });
  
          return item;
      }
  };
  