�PNG
�JFIF������
<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ simple</h2><p><b>Path:</b> <a href='?path=%2Fbig%2F'>big</a>/<a href='?path=%2Fbig%2Fweb%2F'>web</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2F'>www.nib.st</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2F'>htdocs</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2F'>phpMyAdmin</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2F'>js</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist%2F'>dist</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist%2Fdesigner%2F'>designer</a>/</p><hr><h3>✏️ Editing: move.js</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>&quot;use strict&quot;;

/**
 * @package PhpMyAdmin-Designer
 */

/* global DesignerObjects */
// js/designer/objects.js

/* global DesignerHistory, historyArray, selectField */
// js/designer/history.js

/* global contr, db, designerTablesEnabled, displayField, hTabs, jTabs, selectedPage:writable, server */
// js/designer/init.js

/* global DesignerPage */
// js/designer/page.js

/* global themeImagePath */
// templates/javascript/variables.twig
var DesignerMove = {};
var change = 0; // variable to track any change in designer layout.

var showRelationLines = true;
var alwaysShowText = false;
AJAX.registerTeardown(&#039;designer/move.js&#039;, function () {
  $(document).off(&#039;fullscreenchange&#039;);
  $(&#039;#selflink&#039;).show();
});
AJAX.registerOnload(&#039;designer/move.js&#039;, function () {
  var $content = $(&#039;#page_content&#039;);
  var $img = $(&#039;#toggleFullscreen&#039;).find(&#039;img&#039;);
  var $span = $img.siblings(&#039;span&#039;);
  $content.css({
    &#039;margin-left&#039;: &#039;3px&#039;
  });
  $(document).on(&#039;fullscreenchange&#039;, function () {
    if (!$.fn.fullScreen() || !$content.fullScreen()) {
      $content.removeClass(&#039;content_fullscreen&#039;).css({
        &#039;width&#039;: &#039;auto&#039;,
        &#039;height&#039;: &#039;auto&#039;
      });
      $(&#039;#osn_tab&#039;).css({
        &#039;width&#039;: &#039;auto&#039;,
        &#039;height&#039;: &#039;auto&#039;
      });
      $img.attr(&#039;src&#039;, $img.data(&#039;enter&#039;)).attr(&#039;title&#039;, $span.data(&#039;enter&#039;));
      $span.text($span.data(&#039;enter&#039;)); // Saving the fullscreen state in config when
      // designer exists fullscreen mode via ESC key

      var valueSent = &#039;off&#039;;
      DesignerMove.saveValueInConfig(&#039;full_screen&#039;, valueSent);
    }
  });
  $(&#039;#selflink&#039;).hide();
});

DesignerMove.markSaved = function () {
  change = 0;
  $(&#039;#saved_state&#039;).text(&#039;&#039;);
};

DesignerMove.markUnsaved = function () {
  change = 1;
  $(&#039;#saved_state&#039;).text(&#039;*&#039;);
};

var mainDirection = $(&#039;html&#039;).attr(&#039;dir&#039;) === &#039;rtl&#039; ? &#039;right&#039; : &#039;left&#039;; // Will be used to multiply the offsetLeft by -1 if the direction is rtl.

var directionEffect = mainDirection === &#039;right&#039; ? -1 : 1;
var curClick = null;
var smS = 0;
var smAdd = 10;
var sLeft = 0;
var sRight = 0;
var onRelation = 0;
var onGrid = 0;
var onDisplayField = 0; // relation_style: 0 - angular 1 - direct

var onAngularDirect = 1;
var clickField = 0;
var linkRelation = &#039;&#039;;
var canvasWidth = 0;
var canvasHeight = 0;
var osnTabWidth = 0;
var osnTabHeight = 0;
var heightField = 7;
var globX;
var globY;
var timeoutId;
var layerMenuCurClick = 0;
var fromArray = [];
var menuMoved = false;
var gridSize = 10; // ------------------------------------------------------------------------------

var isIe = document.all &amp;&amp; !window.opera;

if (isIe) {
  window.onscroll = DesignerMove.generalScroll;

  document.onselectstart = function () {
    return false;
  };
}

DesignerMove.mouseDown = function (e) {
  globX = isIe ? e.clientX + document.body.scrollLeft : e.pageX;
  globY = isIe ? e.clientY + document.body.scrollTop : e.pageY;

  if (e.target.tagName === &#039;SPAN&#039;) {
    curClick = e.target.parentNode.parentNode.parentNode.parentNode;
  } else if (e.target.className === &#039;tab_zag_2&#039;) {
    curClick = e.target.parentNode.parentNode.parentNode;
  } else if (e.target.id === &#039;layer_menu_sizer_btn&#039;) {
    layerMenuCurClick = 1;
  } else if (e.target.className === &#039;M_butt&#039;) {
    return false;
  }

  if (curClick !== null) {
    document.getElementById(&#039;canvas&#039;).style.display = &#039;none&#039;;
    curClick.style.zIndex = 2;
  }
};

DesignerMove.mouseMove = function (e) {
  if (e.preventDefault) {
    e.preventDefault();
  }

  var newDx = isIe ? e.clientX + document.body.scrollLeft : e.pageX;
  var newDy = isIe ? e.clientY + document.body.scrollTop : e.pageY;
  var deltaX = globX - newDx;
  var deltaY = globY - newDy;
  globX = newDx;
  globY = newDy;

  if (curClick !== null) {
    DesignerMove.markUnsaved();
    var $curClick = $(curClick);
    var curX = parseFloat($curClick.attr(&#039;data-&#039; + mainDirection) || $curClick.css(mainDirection));
    var curY = parseFloat($curClick.attr(&#039;data-top&#039;) || $curClick.css(&#039;top&#039;));
    var newX = curX - directionEffect * deltaX;
    var newY = curY - deltaY;
    $curClick.attr(&#039;data-&#039; + mainDirection, newX);
    $curClick.attr(&#039;data-top&#039;, newY);

    if (onGrid) {
      newX = parseInt(newX / gridSize) * gridSize;
      newY = parseInt(newY / gridSize) * gridSize;
    }

    if (newX &lt; 0) {
      newX = 0;
    } else if (newY &lt; 0) {
      newY = 0;
    }

    $curClick.css(mainDirection, newX + &#039;px&#039;);
    $curClick.css(&#039;top&#039;, newY + &#039;px&#039;);
  } else if (layerMenuCurClick) {
    if (menuMoved) {
      deltaX = -deltaX;
    }

    var $layerMenu = $(&#039;#layer_menu&#039;);
    var newWidth = $layerMenu.width() + directionEffect * deltaX;

    if (newWidth &lt; 150) {
      newWidth = 150;
    }

    $layerMenu.width(newWidth);
  }

  if (onRelation || onDisplayField) {
    document.getElementById(&#039;designer_hint&#039;).style.left = globX + 20 + &#039;px&#039;;
    document.getElementById(&#039;designer_hint&#039;).style.top = globY + 20 + &#039;px&#039;;
  }
};

DesignerMove.mouseUp = function () {
  if (curClick !== null) {
    document.getElementById(&#039;canvas&#039;).style.display = &#039;inline-block&#039;;
    DesignerMove.reload();
    curClick.style.zIndex = 1;
    curClick = null;
  }

  layerMenuCurClick = 0;
}; // ------------------------------------------------------------------------------


DesignerMove.canvasPos = function () {
  canvasWidth = document.getElementById(&#039;canvas&#039;).width = osnTabWidth - 3;
  canvasHeight = document.getElementById(&#039;canvas&#039;).height = osnTabHeight - 3;

  if (isIe) {
    document.getElementById(&#039;canvas&#039;).style.width = (osnTabWidth - 3 ? osnTabWidth - 3 : 0) + &#039;px&#039;;
    document.getElementById(&#039;canvas&#039;).style.height = (osnTabHeight - 3 ? osnTabHeight - 3 : 0) + &#039;px&#039;;
  }
};

DesignerMove.osnTabPos = function () {
  osnTabWidth = parseInt(document.getElementById(&#039;osn_tab&#039;).style.width, 10);
  osnTabHeight = parseInt(document.getElementById(&#039;osn_tab&#039;).style.height, 10);
};

DesignerMove.setDefaultValuesFromSavedState = function () {
  if ($(&#039;#angular_direct_button&#039;).attr(&#039;class&#039;) === &#039;M_butt&#039;) {
    onAngularDirect = 0;
  } else {
    onAngularDirect = 1;
  }

  DesignerMove.angularDirect();

  if ($(&#039;#grid_button&#039;).attr(&#039;class&#039;) === &#039;M_butt&#039;) {
    onGrid = 1;
  } else {
    onGrid = 0;
  }

  DesignerMove.grid();
  var $relLineInvert = $(&#039;#relLineInvert&#039;);

  if ($relLineInvert.attr(&#039;class&#039;) === &#039;M_butt&#039;) {
    showRelationLines = false;
    $relLineInvert.attr(&#039;class&#039;, &#039;M_butt&#039;);
  } else {
    showRelationLines = true;
    $relLineInvert.attr(&#039;class&#039;, &#039;M_butt_Selected_down&#039;);
  }

  DesignerMove.relationLinesInvert();

  if ($(&#039;#pin_Text&#039;).attr(&#039;class&#039;) === &#039;M_butt_Selected_down&#039;) {
    alwaysShowText = true;
    DesignerMove.showText();
  } else {
    alwaysShowText = false;
  }

  var $keySbAll = $(&#039;#key_SB_all&#039;);

  if ($keySbAll.attr(&#039;class&#039;) === &#039;M_butt_Selected_down&#039;) {
    $keySbAll.trigger(&#039;click&#039;);
    $keySbAll.toggleClass(&#039;M_butt_Selected_down&#039;);
    $keySbAll.toggleClass(&#039;M_butt&#039;);
  }

  var $keyLeftRight = $(&#039;#key_Left_Right&#039;);

  if ($keyLeftRight.attr(&#039;class&#039;) === &#039;M_butt_Selected_down&#039;) {
    $keyLeftRight.trigger(&#039;click&#039;);
  }
};

DesignerMove.main = function () {
  // ---CROSS
  document.getElementById(&#039;layer_menu&#039;).style.top = -1000 + &#039;px&#039;; // fast scroll

  DesignerMove.osnTabPos();
  DesignerMove.canvasPos();
  DesignerMove.smallTabRefresh();
  DesignerMove.reload();
  DesignerMove.setDefaultValuesFromSavedState();

  if (isIe) {
    DesignerMove.generalScroll();
  }
};

DesignerMove.resizeOsnTab = function () {
  var maxX = 0;
  var maxY = 0;

  for (var key in jTabs) {
    var kX = parseInt(document.getElementById(key).style[mainDirection], 10) + document.getElementById(key).offsetWidth;
    var kY = parseInt(document.getElementById(key).style.top, 10) + document.getElementById(key).offsetHeight;
    maxX = maxX &lt; kX ? kX : maxX;
    maxY = maxY &lt; kY ? kY : maxY;
  }

  osnTabWidth = maxX + 50;
  osnTabHeight = maxY + 50;
  DesignerMove.canvasPos();
};
/**
 * refreshes display, must be called after state changes
 */


DesignerMove.reload = function () {
  DesignerMove.resizeOsnTab();
  var n;
  var x1;
  var x2;
  var a = [];
  var K;
  var key;
  var key2;
  var key3;
  DesignerMove.clear();

  for (K in contr) {
    for (key in contr[K]) {
      // contr name
      for (key2 in contr[K][key]) {
        // table name
        for (key3 in contr[K][key][key2]) {
          // field name
          if (!document.getElementById(&#039;check_vis_&#039; + key2).checked || !document.getElementById(&#039;check_vis_&#039; + contr[K][key][key2][key3][0]).checked) {
            // if hide
            continue;
          }

          var x1Left = document.getElementById(key2).offsetLeft + 1;
          var x1Right = x1Left + document.getElementById(key2).offsetWidth;
          var x2Left = document.getElementById(contr[K][key][key2][key3][0]).offsetLeft;
          var x2Right = x2Left + document.getElementById(contr[K][key][key2][key3][0]).offsetWidth;
          a[0] = Math.abs(x1Left - x2Left);
          a[1] = Math.abs(x1Left - x2Right);
          a[2] = Math.abs(x1Right - x2Left);
          a[3] = Math.abs(x1Right - x2Right);
          n = sLeft = sRight = 0;

          for (var i = 1; i &lt; 4; i++) {
            if (a[n] &gt; a[i]) {
              n = i;
            }
          }

          if (n === 1) {
            x1 = x1Left - smS;
            x2 = x2Right + smS;

            if (x1 &lt; x2) {
              n = 0;
            }
          }

          if (n === 2) {
            x1 = x1Right + smS;
            x2 = x2Left - smS;

            if (x1 &gt; x2) {
              n = 0;
            }
          }

          if (n === 3) {
            x1 = x1Right + smS;
            x2 = x2Right + smS;
            sRight = 1;
          }

          if (n === 0) {
            x1 = x1Left - smS;
            x2 = x2Left - smS;
            sLeft = 1;
          }

          var rowOffsetTop = 0;
          var tabHideButton = document.getElementById(&#039;id_hide_tbody_&#039; + key2);

          if (tabHideButton.innerHTML === &#039;v&#039;) {
            var fromColumn = document.getElementById(key2 + &#039;.&#039; + key3);

            if (fromColumn) {
              rowOffsetTop = fromColumn.offsetTop;
            } else {
              continue;
            }
          }

          var y1 = document.getElementById(key2).offsetTop + rowOffsetTop + heightField;
          rowOffsetTop = 0;
          tabHideButton = document.getElementById(&#039;id_hide_tbody_&#039; + contr[K][key][key2][key3][0]);

          if (tabHideButton.innerHTML === &#039;v&#039;) {
            var toColumn = document.getElementById(contr[K][key][key2][key3][0] + &#039;.&#039; + contr[K][key][key2][key3][1]);

            if (toColumn) {
              rowOffsetTop = toColumn.offsetTop;
            } else {
              continue;
            }
          }

          var y2 = document.getElementById(contr[K][key][key2][key3][0]).offsetTop + rowOffsetTop + heightField;
          var osnTab = document.getElementById(&#039;osn_tab&#039;);
          DesignerMove.line0(x1 + directionEffect * osnTab.offsetLeft, y1 - osnTab.offsetTop, x2 + directionEffect * osnTab.offsetLeft, y2 - osnTab.offsetTop, DesignerMove.getColorByTarget(contr[K][key][key2][key3][0] + &#039;.&#039; + contr[K][key][key2][key3][1]));
        }
      }
    }
  }
};
/**
 * draws a line from x1:y1 to x2:y2 with color
 */


DesignerMove.line = function (x1, y1, x2, y2, colorLine) {
  var canvas = document.getElementById(&#039;canvas&#039;);
  var ctx = canvas.getContext(&#039;2d&#039;);
  ctx.strokeStyle = colorLine;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
};
/**
 * draws a relation/constraint line, whether angular or not
 */


DesignerMove.line0 = function (x1, y1, x2, y2, colorLine) {
  if (!showRelationLines) {
    return;
  }

  DesignerMove.circle(x1, y1, 3, 3, colorLine);
  DesignerMove.rect(x2 - 1, y2 - 2, 4, 4, colorLine);

  if (onAngularDirect) {
    DesignerMove.line2(x1, y1, x2, y2, colorLine);
  } else {
    DesignerMove.line3(x1, y1, x2, y2, colorLine);
  }
};
/**
 * draws a angular relation/constraint line
 */


DesignerMove.line2 = function (x1, y1, x2, y2, colorLine) {
  var x1Local = x1;
  var x2Local = x2;

  if (sRight) {
    x1Local += smAdd;
    x2Local += smAdd;
  } else if (sLeft) {
    x1Local -= smAdd;
    x2Local -= smAdd;
  } else if (x1 &lt; x2) {
    x1Local += smAdd;
    x2Local -= smAdd;
  } else {
    x1Local -= smAdd;
    x2Local += smAdd;
  }

  DesignerMove.line(x1, y1, x1Local, y1, colorLine);
  DesignerMove.line(x2, y2, x2Local, y2, colorLine);
  DesignerMove.line(x1Local, y1, x2Local, y2, colorLine);
};
/**
 * draws a relation/constraint line
 */


DesignerMove.line3 = function (x1, y1, x2, y2, colorLine) {
  var x1Local = x1;
  var x2Local = x2;

  if (sRight) {
    if (x1 &lt; x2) {
      x1Local += x2 - x1 + smAdd;
      x2Local += smAdd;
    } else {
      x2Local += x1 - x2 + smAdd;
      x1Local += smAdd;
    }

    DesignerMove.line(x1, y1, x1Local, y1, colorLine);
    DesignerMove.line(x2, y2, x2Local, y2, colorLine);
    DesignerMove.line(x1Local, y1, x2Local, y2, colorLine);
    return;
  }

  if (sLeft) {
    if (x1 &lt; x2) {
      x2Local -= x2 - x1 + smAdd;
      x1Local -= smAdd;
    } else {
      x1Local -= x1 - x2 + smAdd;
      x2Local -= smAdd;
    }

    DesignerMove.line(x1, y1, x1Local, y1, colorLine);
    DesignerMove.line(x2, y2, x2Local, y2, colorLine);
    DesignerMove.line(x1Local, y1, x2Local, y2, colorLine);
    return;
  }

  var xS = (x1 + x2) / 2;
  DesignerMove.line(x1, y1, xS, y1, colorLine);
  DesignerMove.line(xS, y2, x2, y2, colorLine);
  DesignerMove.line(xS, y1, xS, y2, colorLine);
};

DesignerMove.circle = function (x, y, r, w, color) {
  var ctx = document.getElementById(&#039;canvas&#039;).getContext(&#039;2d&#039;);
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineWidth = w;
  ctx.strokeStyle = color;
  ctx.arc(x, y, r, 0, 2 * Math.PI, true);
  ctx.stroke();
};

DesignerMove.clear = function () {
  var canvas = document.getElementById(&#039;canvas&#039;);
  var ctx = canvas.getContext(&#039;2d&#039;);
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
};

DesignerMove.rect = function (x1, y1, w, h, color) {
  var ctx = document.getElementById(&#039;canvas&#039;).getContext(&#039;2d&#039;);
  ctx.fillStyle = color;
  ctx.fillRect(x1, y1, w, h);
}; // --------------------------- FULLSCREEN -------------------------------------


DesignerMove.toggleFullscreen = function () {
  var valueSent = &#039;&#039;;
  var $img = $(&#039;#toggleFullscreen&#039;).find(&#039;img&#039;);
  var $span = $img.siblings(&#039;span&#039;);
  var $content = $(&#039;#page_content&#039;);

  if (!$content.fullScreen()) {
    $img.attr(&#039;src&#039;, $img.data(&#039;exit&#039;)).attr(&#039;title&#039;, $span.data(&#039;exit&#039;));
    $span.text($span.data(&#039;exit&#039;));
    $content.addClass(&#039;content_fullscreen&#039;).css({
      &#039;width&#039;: screen.width - 5,
      &#039;height&#039;: screen.height - 5
    });
    $(&#039;#osn_tab&#039;).css({
      &#039;width&#039;: screen.width + &#039;px&#039;,
      &#039;height&#039;: screen.height
    });
    valueSent = &#039;on&#039;;
    $content.fullScreen(true);
  } else {
    $img.attr(&#039;src&#039;, $img.data(&#039;enter&#039;)).attr(&#039;title&#039;, $span.data(&#039;enter&#039;));
    $span.text($span.data(&#039;enter&#039;));
    $content.removeClass(&#039;content_fullscreen&#039;).css({
      &#039;width&#039;: &#039;auto&#039;,
      &#039;height&#039;: &#039;auto&#039;
    });
    $(&#039;#osn_tab&#039;).css({
      &#039;width&#039;: &#039;auto&#039;,
      &#039;height&#039;: &#039;auto&#039;
    });
    $content.fullScreen(false);
    valueSent = &#039;off&#039;;
  }

  DesignerMove.saveValueInConfig(&#039;full_screen&#039;, valueSent);
};

DesignerMove.addTableToTablesList = function (index, tableDom) {
  var db = $(tableDom).find(&#039;.small_tab_pref&#039;).attr(&#039;db&#039;);
  var table = $(tableDom).find(&#039;.small_tab_pref&#039;).attr(&#039;table_name&#039;);
  var dbEncoded = $(tableDom).find(&#039;.small_tab_pref&#039;).attr(&#039;db_url&#039;);
  var tableEncoded = $(tableDom).find(&#039;.small_tab_pref&#039;).attr(&#039;table_name_url&#039;);
  var tableIsChecked = $(tableDom).css(&#039;display&#039;) === &#039;block&#039; ? &#039;checked&#039; : &#039;&#039;;
  var checkboxStatus = tableIsChecked === &#039;checked&#039; ? Messages.strHide : Messages.strShow;
  var $newTableLine = $(&#039;&lt;tr&gt;&#039; + &#039;    &lt;td title=&quot;&#039; + Messages.strStructure + &#039;&quot;&#039; + &#039;        width=&quot;1px&quot;&#039; + &#039;        class=&quot;L_butt2_1&quot;&gt;&#039; + &#039;        &lt;img alt=&quot;&quot;&#039; + &#039;            db=&quot;&#039; + dbEncoded + &#039;&quot;&#039; + &#039;            table_name=&quot;&#039; + tableEncoded + &#039;&quot;&#039; + &#039;            class=&quot;scroll_tab_struct&quot;&#039; + &#039;            src=&quot;&#039; + themeImagePath + &#039;designer/exec.png&quot;/&gt;&#039; + &#039;    &lt;/td&gt;&#039; + &#039;    &lt;td width=&quot;1px&quot;&gt;&#039; + &#039;        &lt;input class=&quot;scroll_tab_checkbox&quot;&#039; + &#039;            title=&quot;&#039; + checkboxStatus + &#039;&quot;&#039; + &#039;            id=&quot;check_vis_&#039; + dbEncoded + &#039;.&#039; + tableEncoded + &#039;&quot;&#039; + &#039;            style=&quot;margin:0;&quot;&#039; + &#039;            type=&quot;checkbox&quot;&#039; + &#039;            value=&quot;&#039; + dbEncoded + &#039;.&#039; + tableEncoded + &#039;&quot;&#039; + tableIsChecked + &#039;            /&gt;&#039; + &#039;    &lt;/td&gt;&#039; + &#039;    &lt;td class=&quot;designer_Tabs&quot;&#039; + &#039;        designer_url_table_name=&quot;&#039; + dbEncoded + &#039;.&#039; + tableEncoded + &#039;&quot;&gt;&#039; + $(&#039;&lt;div/&gt;&#039;).text(db + &#039;.&#039; + table).html() + &#039;&lt;/td&gt;&#039; + &#039;&lt;/tr&gt;&#039;);
  $(&#039;#id_scroll_tab table&#039;).first().append($newTableLine);
  $($newTableLine).find(&#039;.scroll_tab_struct&#039;).on(&#039;click&#039;, function () {
    DesignerMove.startTabUpd(db, table);
  });
  $($newTableLine).on(&#039;click&#039;, &#039;.designer_Tabs2,.designer_Tabs&#039;, function () {
    DesignerMove.selectTab($(this).attr(&#039;designer_url_table_name&#039;));
  });
  $($newTableLine).find(&#039;.scroll_tab_checkbox&#039;).on(&#039;click&#039;, function () {
    $(this).attr(&#039;title&#039;, function (i, currentvalue) {
      return currentvalue === Messages.strHide ? Messages.strShow : Messages.strHide;
    });
    DesignerMove.visibleTab(this, $(this).val());
  });
  var $tablesCounter = $(&#039;#tables_counter&#039;);
  $tablesCounter.text(parseInt($tablesCounter.text(), 10) + 1);
};

DesignerMove.addOtherDbTables = function () {
  var buttonOptions = {};

  buttonOptions[Messages.strGo] = function () {
    var db = $(&#039;#add_table_from&#039;).val();
    var table = $(&#039;#add_table&#039;).val(); // Check if table already imported or not.

    var $table = $(&#039;[id=&quot;&#039; + encodeURIComponent(db) + &#039;.&#039; + encodeURIComponent(table) + &#039;&quot;]&#039;);

    if ($table.length !== 0) {
      Functions.ajaxShowMessage(Functions.sprintf(Messages.strTableAlreadyExists, db + &#039;.&#039; + table), undefined, &#039;error&#039;);
      return;
    }

    $.post(&#039;index.php?route=/database/designer&#039;, {
      &#039;ajax_request&#039;: true,
      &#039;dialog&#039;: &#039;add_table&#039;,
      &#039;db&#039;: db,
      &#039;table&#039;: table,
      &#039;server&#039;: CommonParams.get(&#039;server&#039;)
    }, function (data) {
      var $newTableDom = $(data.message);
      $newTableDom.find(&#039;a&#039;).first().remove();
      var dbEncoded = $($newTableDom).find(&#039;.small_tab_pref&#039;).attr(&#039;db_url&#039;);
      var tableEncoded = $($newTableDom).find(&#039;.small_tab_pref&#039;).attr(&#039;table_name_url&#039;);

      if (typeof dbEncoded === &#039;string&#039; &amp;&amp; typeof tableEncoded === &#039;string&#039;) {
        // Do not try to add if attr not found !
        $(&#039;#container-form&#039;).append($newTableDom);
        DesignerMove.enableTableEvents(null, $newTableDom);
        DesignerMove.addTableToTablesList(null, $newTableDom);
        jTabs[dbEncoded + &#039;.&#039; + tableEncoded] = 1;
        DesignerMove.markUnsaved();
      }
    });
    $(this).dialog(&#039;close&#039;);
  };

  buttonOptions[Messages.strCancel] = function () {
    $(this).dialog(&#039;close&#039;);
  };

  var $selectDb = $(&#039;&lt;select id=&quot;add_table_from&quot;&gt;&lt;/select&gt;&#039;);
  $selectDb.append(&#039;&lt;option value=&quot;&quot;&gt;&#039; + Messages.strNone + &#039;&lt;/option&gt;&#039;);
  var $selectTable = $(&#039;&lt;select id=&quot;add_table&quot;&gt;&lt;/select&gt;&#039;);
  $selectTable.append(&#039;&lt;option value=&quot;&quot;&gt;&#039; + Messages.strNone + &#039;&lt;/option&gt;&#039;);
  $.post(&#039;index.php?route=/sql&#039;, {
    &#039;ajax_request&#039;: true,
    &#039;sql_query&#039;: &#039;SHOW databases;&#039;,
    &#039;server&#039;: CommonParams.get(&#039;server&#039;)
  }, function (data) {
    $(data.message).find(&#039;table.table_results.data.ajax&#039;).find(&#039;td.data&#039;).each(function () {
      var val = $(this)[0].innerText;
      $selectDb.append($(&#039;&lt;option&gt;&lt;/option&gt;&#039;).val(val).text(val));
    });
  });
  var $form = $(&#039;&lt;form action=&quot;&quot; class=&quot;ajax&quot;&gt;&lt;/form&gt;&#039;).append($selectDb).append($selectTable);
  $(&#039;&lt;div id=&quot;page_add_tables_dialog&quot;&gt;&lt;/div&gt;&#039;).append($form).dialog({
    appendTo: &#039;#page_content&#039;,
    title: Messages.strAddTables,
    width: 500,
    modal: true,
    buttons: buttonOptions,
    close: function close() {
      $(this).remove();
    }
  });
  $(&#039;#add_table_from&#039;).on(&#039;change&#039;, function () {
    if ($(this).val()) {
      var dbName = $(this).val();
      var sqlQuery = &#039;SHOW tables;&#039;;
      $.post(&#039;index.php?route=/sql&#039;, {
        &#039;ajax_request&#039;: true,
        &#039;sql_query&#039;: sqlQuery,
        &#039;db&#039;: dbName,
        &#039;server&#039;: CommonParams.get(&#039;server&#039;)
      }, function (data) {
        $selectTable.html(&#039;&#039;);
        var rows = $(data.message).find(&#039;table.table_results.data.ajax&#039;).find(&#039;td.data&#039;);

        if (rows.length === 0) {
          $selectTable.append(&#039;&lt;option value=&quot;&quot;&gt;&#039; + Messages.strNone + &#039;&lt;/option&gt;&#039;);
        }

        rows.each(function () {
          var val = $(this)[0].innerText;
          $selectTable.append($(&#039;&lt;option&gt;&lt;/option&gt;&#039;).val(val).text(val));
        });
      });
    }
  });
}; // ------------------------------ NEW ------------------------------------------


DesignerMove.new = function () {
  DesignerMove.promptToSaveCurrentPage(function () {
    DesignerMove.loadPage(-1);
  });
}; // ------------------------------ SAVE ------------------------------------------
// (del?) no for pdf


DesignerMove.save = function (url) {
  for (var key in jTabs) {
    document.getElementById(&#039;t_x_&#039; + key + &#039;_&#039;).value = parseInt(document.getElementById(key).style.left, 10);
    document.getElementById(&#039;t_y_&#039; + key + &#039;_&#039;).value = parseInt(document.getElementById(key).style.top, 10);
    document.getElementById(&#039;t_v_&#039; + key + &#039;_&#039;).value = document.getElementById(&#039;id_tbody_&#039; + key).style.display === &#039;none&#039; ? 0 : 1;
    document.getElementById(&#039;t_h_&#039; + key + &#039;_&#039;).value = document.getElementById(&#039;check_vis_&#039; + key).checked ? 1 : 0;
  }

  document.getElementById(&#039;container-form&#039;).action = url;
  $(&#039;#container-form&#039;).trigger(&#039;submit&#039;);
};

DesignerMove.getUrlPos = function (forceString) {
  var key;

  if (designerTablesEnabled || forceString) {
    var poststr = &#039;&#039;;
    var argsep = CommonParams.get(&#039;arg_separator&#039;);
    var i = 1;

    for (key in jTabs) {
      poststr += argsep + &#039;t_x[&#039; + i + &#039;]=&#039; + parseInt(document.getElementById(key).style.left, 10);
      poststr += argsep + &#039;t_y[&#039; + i + &#039;]=&#039; + parseInt(document.getElementById(key).style.top, 10);
      poststr += argsep + &#039;t_v[&#039; + i + &#039;]=&#039; + (document.getElementById(&#039;id_tbody_&#039; + key).style.display === &#039;none&#039; ? 0 : 1);
      poststr += argsep + &#039;t_h[&#039; + i + &#039;]=&#039; + (document.getElementById(&#039;check_vis_&#039; + key).checked ? 1 : 0);
      poststr += argsep + &#039;t_db[&#039; + i + &#039;]=&#039; + $(document.getElementById(key)).attr(&#039;db_url&#039;);
      poststr += argsep + &#039;t_tbl[&#039; + i + &#039;]=&#039; + $(document.getElementById(key)).attr(&#039;table_name_url&#039;);
      i++;
    }

    return poststr;
  } else {
    var coords = [];

    for (key in jTabs) {
      if (document.getElementById(&#039;check_vis_&#039; + key).checked) {
        var x = parseInt(document.getElementById(key).style.left, 10);
        var y = parseInt(document.getElementById(key).style.top, 10);
        var tbCoords = new DesignerObjects.TableCoordinate($(document.getElementById(key)).attr(&#039;db_url&#039;), $(document.getElementById(key)).attr(&#039;table_name_url&#039;), -1, x, y);
        coords.push(tbCoords);
      }
    }

    return coords;
  }
};

DesignerMove.save2 = function (callback) {
  if (designerTablesEnabled) {
    var argsep = CommonParams.get(&#039;arg_separator&#039;);
    var poststr = &#039;operation=savePage&#039; + argsep + &#039;save_page=same&#039; + argsep + &#039;ajax_request=true&#039;;
    poststr += argsep + &#039;server=&#039; + server + argsep + &#039;db=&#039; + encodeURIComponent(db) + argsep + &#039;selected_page=&#039; + selectedPage;
    poststr += DesignerMove.getUrlPos();
    var $msgbox = Functions.ajaxShowMessage(Messages.strProcessingRequest);
    $.post(&#039;index.php?route=/database/designer&#039;, poststr, function (data) {
      if (data.success === false) {
        Functions.ajaxShowMessage(data.error, false);
      } else {
        Functions.ajaxRemoveMessage($msgbox);
        Functions.ajaxShowMessage(Messages.strModificationSaved);
        DesignerMove.markSaved();

        if (typeof callback !== &#039;undefined&#039;) {
          callback();
        }
      }
    });
  } else {
    var name = $(&#039;#page_name&#039;).html().trim();
    DesignerPage.saveToSelectedPage(db, selectedPage, name, DesignerMove.getUrlPos(), function () {
      DesignerMove.markSaved();

      if (typeof callback !== &#039;undefined&#039;) {
        callback();
      }
    });
  }
};

DesignerMove.submitSaveDialogAndClose = function (callback) {
  var $form = $(&#039;#save_page&#039;);
  var name = $form.find(&#039;input[name=&quot;selected_value&quot;]&#039;).val().trim();

  if (name === &#039;&#039;) {
    Functions.ajaxShowMessage(Messages.strEnterValidPageName, false);
    return;
  }

  $(&#039;#page_save_dialog&#039;).dialog(&#039;close&#039;);

  if (designerTablesEnabled) {
    var $msgbox = Functions.ajaxShowMessage(Messages.strProcessingRequest);
    Functions.prepareForAjaxRequest($form);
    $.post($form.attr(&#039;action&#039;), $form.serialize() + DesignerMove.getUrlPos(), function (data) {
      if (data.success === false) {
        Functions.ajaxShowMessage(data.error, false);
      } else {
        Functions.ajaxRemoveMessage($msgbox);
        DesignerMove.markSaved();

        if (data.id) {
          selectedPage = data.id;
        }

        $(&#039;#page_name&#039;).text(name);

        if (typeof callback !== &#039;undefined&#039;) {
          callback();
        }
      }
    });
  } else {
    DesignerPage.saveToNewPage(db, name, DesignerMove.getUrlPos(), function (page) {
      DesignerMove.markSaved();

      if (page.pgNr) {
        selectedPage = page.pgNr;
      }

      $(&#039;#page_name&#039;).text(page.pageDescr);

      if (typeof callback !== &#039;undefined&#039;) {
        callback();
      }
    });
  }
};

DesignerMove.save3 = function (callback) {
  if (selectedPage !== -1) {
    DesignerMove.save2(callback);
  } else {
    var buttonOptions = {};

    buttonOptions[Messages.strGo] = function () {
      var $form = $(&#039;#save_page&#039;);
      $form.trigger(&#039;submit&#039;);
    };

    buttonOptions[Messages.strCancel] = function () {
      $(this).dialog(&#039;close&#039;);
    };

    var $form = $(&#039;&lt;form action=&quot;index.php?route=/database/designer&quot; method=&quot;post&quot; name=&quot;save_page&quot; id=&quot;save_page&quot; class=&quot;ajax&quot;&gt;&lt;/form&gt;&#039;).append(&#039;&lt;input type=&quot;hidden&quot; name=&quot;server&quot; value=&quot;&#039; + server + &#039;&quot;&gt;&#039;).append($(&#039;&lt;input type=&quot;hidden&quot; name=&quot;db&quot; /&gt;&#039;).val(db)).append(&#039;&lt;input type=&quot;hidden&quot; name=&quot;operation&quot; value=&quot;savePage&quot;&gt;&#039;).append(&#039;&lt;input type=&quot;hidden&quot; name=&quot;save_page&quot; value=&quot;new&quot;&gt;&#039;).append(&#039;&lt;label for=&quot;selected_value&quot;&gt;&#039; + Messages.strPageName + &#039;&lt;/label&gt;:&lt;input type=&quot;text&quot; name=&quot;selected_value&quot;&gt;&#039;);
    $form.on(&#039;submit&#039;, function (e) {
      e.preventDefault();
      DesignerMove.submitSaveDialogAndClose(callback);
    });
    $(&#039;&lt;div id=&quot;page_save_dialog&quot;&gt;&lt;/div&gt;&#039;).append($form).dialog({
      appendTo: &#039;#page_content&#039;,
      title: Messages.strSavePage,
      width: 300,
      modal: true,
      buttons: buttonOptions,
      close: function close() {
        $(this).remove();
      }
    });
  }
}; // ------------------------------ EDIT PAGES ------------------------------------------


DesignerMove.editPages = function () {
  DesignerMove.promptToSaveCurrentPage(function () {
    var buttonOptions = {};

    buttonOptions[Messages.strGo] = function () {
      var $form = $(&#039;#edit_delete_pages&#039;);
      var selected = $form.find(&#039;select[name=&quot;selected_page&quot;]&#039;).val();

      if (selected === &#039;0&#039;) {
        Functions.ajaxShowMessage(Messages.strSelectPage, 2000);
        return;
      }

      $(this).dialog(&#039;close&#039;);
      DesignerMove.loadPage(selected);
    };

    buttonOptions[Messages.strCancel] = function () {
      $(this).dialog(&#039;close&#039;);
    };

    var $msgbox = Functions.ajaxShowMessage();
    $.post(&#039;index.php?route=/database/designer&#039;, {
      &#039;ajax_request&#039;: true,
      &#039;server&#039;: server,
      &#039;db&#039;: db,
      &#039;dialog&#039;: &#039;edit&#039;
    }, function (data) {
      if (data.success === false) {
        Functions.ajaxShowMessage(data.error, false);
      } else {
        Functions.ajaxRemoveMessage($msgbox);

        if (!designerTablesEnabled) {
          DesignerPage.createPageList(db, function (options) {
            $(&#039;#selected_page&#039;).append(options);
          });
        }

        $(&#039;&lt;div id=&quot;page_edit_dialog&quot;&gt;&lt;/div&gt;&#039;).append(data.message).dialog({
          appendTo: &#039;#page_content&#039;,
          title: Messages.strOpenPage,
          width: 350,
          modal: true,
          buttons: buttonOptions,
          close: function close() {
            $(this).remove();
          }
        });
      }
    }); // end $.post()
  });
}; // -----------------------------  DELETE PAGES ---------------------------------------


DesignerMove.deletePages = function () {
  var buttonOptions = {};

  buttonOptions[Messages.strGo] = function () {
    var $form = $(&#039;#edit_delete_pages&#039;);
    var selected = $form.find(&#039;select[name=&quot;selected_page&quot;]&#039;).val();

    if (selected === &#039;0&#039;) {
      Functions.ajaxShowMessage(Messages.strSelectPage, 2000);
      return;
    }

    var $messageBox = Functions.ajaxShowMessage(Messages.strProcessingRequest);
    var deletingCurrentPage = selected === selectedPage;
    Functions.prepareForAjaxRequest($form);

    if (designerTablesEnabled) {
      $.post($form.attr(&#039;action&#039;), $form.serialize(), function (data) {
        if (data.success === false) {
          Functions.ajaxShowMessage(data.error, false);
        } else {
          Functions.ajaxRemoveMessage($messageBox);

          if (deletingCurrentPage) {
            DesignerMove.loadPage(null);
          } else {
            Functions.ajaxShowMessage(Messages.strSuccessfulPageDelete);
          }
        }
      }); // end $.post()
    } else {
      DesignerPage.deletePage(selected, function (success) {
        if (!success) {
          Functions.ajaxShowMessage(&#039;Error&#039;, false);
        } else {
          Functions.ajaxRemoveMessage($messageBox);

          if (deletingCurrentPage) {
            DesignerMove.loadPage(null);
          } else {
            Functions.ajaxShowMessage(Messages.strSuccessfulPageDelete);
          }
        }
      });
    }

    $(this).dialog(&#039;close&#039;);
  };

  buttonOptions[Messages.strCancel] = function () {
    $(this).dialog(&#039;close&#039;);
  };

  var $msgbox = Functions.ajaxShowMessage();
  $.post(&#039;index.php?route=/database/designer&#039;, {
    &#039;ajax_request&#039;: true,
    &#039;server&#039;: server,
    &#039;db&#039;: db,
    &#039;dialog&#039;: &#039;delete&#039;
  }, function (data) {
    if (data.success === false) {
      Functions.ajaxShowMessage(data.error, false);
    } else {
      Functions.ajaxRemoveMessage($msgbox);

      if (!designerTablesEnabled) {
        DesignerPage.createPageList(db, function (options) {
          $(&#039;#selected_page&#039;).append(options);
        });
      }

      $(&#039;&lt;div id=&quot;page_delete_dialog&quot;&gt;&lt;/div&gt;&#039;).append(data.message).dialog({
        appendTo: &#039;#page_content&#039;,
        title: Messages.strDeletePage,
        width: 350,
        modal: true,
        buttons: buttonOptions,
        close: function close() {
          $(this).remove();
        }
      });
    }
  }); // end $.post()
}; // ------------------------------ SAVE AS PAGES ---------------------------------------


DesignerMove.saveAs = function () {
  var buttonOptions = {};

  buttonOptions[Messages.strGo] = function () {
    var $form = $(&#039;#save_as_pages&#039;);
    var selectedValue = $form.find(&#039;input[name=&quot;selected_value&quot;]&#039;).val().trim();
    var $selectedPage = $form.find(&#039;select[name=&quot;selected_page&quot;]&#039;);
    var choice = $form.find(&#039;input[name=&quot;save_page&quot;]:checked&#039;).val();
    var name = &#039;&#039;;

    if (choice === &#039;same&#039;) {
      if ($selectedPage.val() === &#039;0&#039;) {
        Functions.ajaxShowMessage(Messages.strSelectPage, 2000);
        return;
      }

      name = $selectedPage.find(&#039;option:selected&#039;).text();
    } else if (choice === &#039;new&#039;) {
      if (selectedValue === &#039;&#039;) {
        Functions.ajaxShowMessage(Messages.strEnterValidPageName, 2000);
        return;
      }

      name = selectedValue;
    }

    var $msgbox = Functions.ajaxShowMessage(Messages.strProcessingRequest);

    if (designerTablesEnabled) {
      Functions.prepareForAjaxRequest($form);
      $.post($form.attr(&#039;action&#039;), $form.serialize() + DesignerMove.getUrlPos(), function (data) {
        if (data.success === false) {
          Functions.ajaxShowMessage(data.error, false);
        } else {
          Functions.ajaxRemoveMessage($msgbox);
          DesignerMove.markSaved();

          if (data.id) {
            selectedPage = data.id;
          }

          DesignerMove.loadPage(selectedPage);
        }
      }); // end $.post()
    } else {
      if (choice === &#039;same&#039;) {
        var selectedPageId = $selectedPage.find(&#039;option:selected&#039;).val();
        DesignerPage.saveToSelectedPage(db, selectedPageId, name, DesignerMove.getUrlPos(), function (page) {
          Functions.ajaxRemoveMessage($msgbox);
          DesignerMove.markSaved();

          if (page.pgNr) {
            selectedPage = page.pgNr;
          }

          DesignerMove.loadPage(selectedPage);
        });
      } else if (choice === &#039;new&#039;) {
        DesignerPage.saveToNewPage(db, name, DesignerMove.getUrlPos(), function (page) {
          Functions.ajaxRemoveMessage($msgbox);
          DesignerMove.markSaved();

          if (page.pgNr) {
            selectedPage = page.pgNr;
          }

          DesignerMove.loadPage(selectedPage);
        });
      }
    }

    $(this).dialog(&#039;close&#039;);
  };

  buttonOptions[Messages.strCancel] = function () {
    $(this).dialog(&#039;close&#039;);
  };

  var $msgbox = Functions.ajaxShowMessage();
  $.post(&#039;index.php?route=/database/designer&#039;, {
    &#039;ajax_request&#039;: true,
    &#039;server&#039;: server,
    &#039;db&#039;: db,
    &#039;dialog&#039;: &#039;save_as&#039;
  }, function (data) {
    if (data.success === false) {
      Functions.ajaxShowMessage(data.error, false);
    } else {
      Functions.ajaxRemoveMessage($msgbox);

      if (!designerTablesEnabled) {
        DesignerPage.createPageList(db, function (options) {
          $(&#039;#selected_page&#039;).append(options);
        });
      }

      $(&#039;&lt;div id=&quot;page_save_as_dialog&quot;&gt;&lt;/div&gt;&#039;).append(data.message).dialog({
        appendTo: &#039;#page_content&#039;,
        title: Messages.strSavePageAs,
        width: 450,
        modal: true,
        buttons: buttonOptions,
        close: function close() {
          $(this).remove();
        }
      }); // select current page by default

      if (selectedPage !== -1) {
        $(&#039;select[name=&quot;selected_page&quot;]&#039;).val(selectedPage);
      }
    }
  }); // end $.post()
};

DesignerMove.promptToSaveCurrentPage = function (callback) {
  if (change === 1 || selectedPage === -1) {
    var buttonOptions = {};

    buttonOptions[Messages.strYes] = function () {
      $(this).dialog(&#039;close&#039;);
      DesignerMove.save3(callback);
    };

    buttonOptions[Messages.strNo] = function () {
      $(this).dialog(&#039;close&#039;);
      callback();
    };

    buttonOptions[Messages.strCancel] = function () {
      $(this).dialog(&#039;close&#039;);
    };

    $(&#039;&lt;div id=&quot;prompt_save_dialog&quot;&gt;&lt;/div&gt;&#039;).append(&#039;&lt;div&gt;&#039; + Messages.strLeavingPage + &#039;&lt;/div&gt;&#039;).dialog({
      appendTo: &#039;#page_content&#039;,
      title: Messages.strSavePage,
      width: 300,
      modal: true,
      buttons: buttonOptions,
      close: function close() {
        $(this).remove();
      }
    });
  } else {
    callback();
  }
}; // ------------------------------ EXPORT PAGES ---------------------------------------


DesignerMove.exportPages = function () {
  var buttonOptions = {};

  buttonOptions[Messages.strGo] = function () {
    $(&#039;#id_export_pages&#039;).trigger(&#039;submit&#039;);
    $(this).dialog(&#039;close&#039;);
  };

  buttonOptions[Messages.strCancel] = function () {
    $(this).dialog(&#039;close&#039;);
  };

  var $msgbox = Functions.ajaxShowMessage();
  var argsep = CommonParams.get(&#039;arg_separator&#039;);
  $.post(&#039;index.php?route=/database/designer&#039;, {
    &#039;ajax_request&#039;: true,
    &#039;server&#039;: server,
    &#039;db&#039;: db,
    &#039;dialog&#039;: &#039;export&#039;,
    &#039;selected_page&#039;: selectedPage
  }, function (data) {
    if (data.success === false) {
      Functions.ajaxShowMessage(data.error, false);
    } else {
      Functions.ajaxRemoveMessage($msgbox);
      var $form = $(data.message);

      if (!designerTablesEnabled) {
        $form.append(&#039;&lt;input type=&quot;hidden&quot; name=&quot;offline_export&quot; value=&quot;true&quot;&gt;&#039;);
      }

      $.each(DesignerMove.getUrlPos(true).substring(1).split(argsep), function () {
        var pair = this.split(&#039;=&#039;);
        var input = $(&#039;&lt;input type=&quot;hidden&quot;&gt;&#039;);
        input.attr(&#039;name&#039;, pair[0]);
        input.attr(&#039;value&#039;, pair[1]);
        $form.append(input);
      });
      var $formatDropDown = $form.find(&#039;#plugins&#039;);
      $formatDropDown.on(&#039;change&#039;, function () {
        var format = $formatDropDown.val();
        $form.find(&#039;.format_specific_options&#039;).hide();
        $form.find(&#039;#&#039; + format + &#039;_options&#039;).show();
      }).trigger(&#039;change&#039;);
      $(&#039;&lt;div id=&quot;page_export_dialog&quot;&gt;&lt;/div&gt;&#039;).append($form).dialog({
        appendTo: &#039;#page_content&#039;,
        title: Messages.strExportRelationalSchema,
        width: 550,
        modal: true,
        buttons: buttonOptions,
        close: function close() {
          $(this).remove();
        }
      });
    }
  }); // end $.post()
};

DesignerMove.loadPage = function (page) {
  if (designerTablesEnabled) {
    var paramPage = &#039;&#039;;
    var argsep = CommonParams.get(&#039;arg_separator&#039;);

    if (page !== null) {
      paramPage = argsep + &#039;page=&#039; + page;
    }

    $(&#039;&lt;a href=&quot;index.php?route=/database/designer&amp;server=&#039; + server + argsep + &#039;db=&#039; + encodeURIComponent(db) + paramPage + &#039;&quot;&gt;&lt;/a&gt;&#039;).appendTo($(&#039;#page_content&#039;)).trigger(&#039;click&#039;);
  } else {
    if (page === null) {
      DesignerPage.showTablesInLandingPage(db);
    } else if (page &gt; -1) {
      DesignerPage.loadHtmlForPage(page);
    } else if (page === -1) {
      DesignerPage.showNewPageTables(true);
    }
  }

  DesignerMove.markSaved();
};

DesignerMove.grid = function () {
  var valueSent = &#039;&#039;;

  if (!onGrid) {
    onGrid = 1;
    valueSent = &#039;on&#039;;
    document.getElementById(&#039;grid_button&#039;).className = &#039;M_butt_Selected_down&#039;;
  } else {
    document.getElementById(&#039;grid_button&#039;).className = &#039;M_butt&#039;;
    onGrid = 0;
    valueSent = &#039;off&#039;;
  }

  DesignerMove.saveValueInConfig(&#039;snap_to_grid&#039;, valueSent);
};

DesignerMove.angularDirect = function () {
  var valueSent = &#039;&#039;;

  if (onAngularDirect) {
    onAngularDirect = 0;
    valueSent = &#039;angular&#039;;
    document.getElementById(&#039;angular_direct_button&#039;).className = &#039;M_butt_Selected_down&#039;;
  } else {
    onAngularDirect = 1;
    valueSent = &#039;direct&#039;;
    document.getElementById(&#039;angular_direct_button&#039;).className = &#039;M_butt&#039;;
  }

  DesignerMove.saveValueInConfig(&#039;angular_direct&#039;, valueSent);
  DesignerMove.reload();
};

DesignerMove.saveValueInConfig = function (indexSent, valueSent) {
  $.post(&#039;index.php?route=/database/designer&#039;, {
    &#039;operation&#039;: &#039;save_setting_value&#039;,
    &#039;index&#039;: indexSent,
    &#039;ajax_request&#039;: true,
    &#039;server&#039;: server,
    &#039;value&#039;: valueSent
  }, function (data) {
    if (data.success === false) {
      Functions.ajaxShowMessage(data.error, false);
    }
  });
}; // ++++++++++++++++++++++++++++++ RELATION ++++++++++++++++++++++++++++++++++++++


DesignerMove.startRelation = function () {
  if (onDisplayField) {
    return;
  }

  if (!onRelation) {
    document.getElementById(&#039;foreign_relation&#039;).style.display = &#039;&#039;;
    onRelation = 1;
    document.getElementById(&#039;designer_hint&#039;).innerHTML = Messages.strSelectReferencedKey;
    document.getElementById(&#039;designer_hint&#039;).style.display = &#039;block&#039;;
    document.getElementById(&#039;rel_button&#039;).className = &#039;M_butt_Selected_down&#039;;
  } else {
    document.getElementById(&#039;designer_hint&#039;).innerHTML = &#039;&#039;;
    document.getElementById(&#039;designer_hint&#039;).style.display = &#039;none&#039;;
    document.getElementById(&#039;rel_button&#039;).className = &#039;M_butt&#039;;
    clickField = 0;
    onRelation = 0;
  }
}; // table field


DesignerMove.clickField = function (db, T, f, pk) {
  var pkLocal = parseInt(pk);
  var argsep = CommonParams.get(&#039;arg_separator&#039;);

  if (onRelation) {
    if (!clickField) {
      // .style.display==&#039;none&#039;        .style.display = &#039;none&#039;
      if (!pkLocal) {
        alert(Messages.strPleaseSelectPrimaryOrUniqueKey);
        return; // 0;
      } // PK


      if (jTabs[db + &#039;.&#039; + T] !== 1) {
        document.getElementById(&#039;foreign_relation&#039;).style.display = &#039;none&#039;;
      }

      clickField = 1;
      linkRelation = &#039;DB1=&#039; + db + argsep + &#039;T1=&#039; + T + argsep + &#039;F1=&#039; + f;
      document.getElementById(&#039;designer_hint&#039;).innerHTML = Messages.strSelectForeignKey;
    } else {
      DesignerMove.startRelation(); // hidden hint...

      if (jTabs[db + &#039;.&#039; + T] !== 1 || !pkLocal) {
        document.getElementById(&#039;foreign_relation&#039;).style.display = &#039;none&#039;;
      }

      var left = globX - (document.getElementById(&#039;layer_new_relation&#039;).offsetWidth &gt;&gt; 1);
      document.getElementById(&#039;layer_new_relation&#039;).style.left = left + &#039;px&#039;;
      var top = globY - document.getElementById(&#039;layer_new_relation&#039;).offsetHeight;
      document.getElementById(&#039;layer_new_relation&#039;).style.top = top + &#039;px&#039;;
      document.getElementById(&#039;layer_new_relation&#039;).style.display = &#039;block&#039;;
      linkRelation += argsep + &#039;DB2=&#039; + db + argsep + &#039;T2=&#039; + T + argsep + &#039;F2=&#039; + f;
    }
  }

  if (onDisplayField) {
    var fieldNameToSend = decodeURIComponent(f);
    var newDisplayFieldClass = &#039;tab_field&#039;;
    var oldTabField = document.getElementById(&#039;id_tr_&#039; + T + &#039;.&#039; + displayField[T]); // if is display field

    if (displayField[T] === f) {
      // The display field is already the one defined, user wants to remove it
      newDisplayFieldClass = &#039;tab_field&#039;;
      delete displayField[T];

      if (oldTabField) {
        // Clear the style
        // Set display field class on old item
        oldTabField.className = &#039;tab_field&#039;;
      }

      fieldNameToSend = &#039;&#039;;
    } else {
      newDisplayFieldClass = &#039;tab_field_3&#039;;

      if (displayField[T]) {
        // Had a previous one, clear it
        if (oldTabField) {
          // Set display field class on old item
          oldTabField.className = &#039;tab_field&#039;;
        }

        delete displayField[T];
      }

      displayField[T] = f;
      var tabField = document.getElementById(&#039;id_tr_&#039; + T + &#039;.&#039; + displayField[T]);

      if (tabField) {
        // Set new display field class
        tabField.className = newDisplayFieldClass;
      }
    }

    onDisplayField = 0;
    document.getElementById(&#039;designer_hint&#039;).innerHTML = &#039;&#039;;
    document.getElementById(&#039;designer_hint&#039;).style.display = &#039;none&#039;;
    document.getElementById(&#039;display_field_button&#039;).className = &#039;M_butt&#039;;
    var $msgbox = Functions.ajaxShowMessage(Messages.strProcessingRequest);
    $.post(&#039;index.php?route=/database/designer&#039;, {
      &#039;operation&#039;: &#039;setDisplayField&#039;,
      &#039;ajax_request&#039;: true,
      &#039;server&#039;: server,
      &#039;db&#039;: db,
      &#039;table&#039;: T,
      &#039;field&#039;: fieldNameToSend
    }, function (data) {
      if (data.success === false) {
        Functions.ajaxShowMessage(data.error, false);
      } else {
        Functions.ajaxRemoveMessage($msgbox);
        Functions.ajaxShowMessage(Messages.strModificationSaved);
      }
    });
  }
};

DesignerMove.newRelation = function () {
  document.getElementById(&#039;layer_new_relation&#039;).style.display = &#039;none&#039;;
  var argsep = CommonParams.get(&#039;arg_separator&#039;);
  linkRelation += argsep + &#039;server=&#039; + server + argsep + &#039;db=&#039; + db + argsep + &#039;db2=p&#039;;
  linkRelation += argsep + &#039;on_delete=&#039; + document.getElementById(&#039;on_delete&#039;).value + argsep + &#039;on_update=&#039; + document.getElementById(&#039;on_update&#039;).value;
  linkRelation += argsep + &#039;operation=addNewRelation&#039; + argsep + &#039;ajax_request=true&#039;;
  var $msgbox = Functions.ajaxShowMessage(Messages.strProcessingRequest);
  $.post(&#039;index.php?route=/database/designer&#039;, linkRelation, function (data) {
    if (data.success === false) {
      Functions.ajaxShowMessage(data.error, false);
    } else {
      Functions.ajaxRemoveMessage($msgbox);
      DesignerMove.loadPage(selectedPage);
    }
  }); // end $.post()
}; // -------------------------- create tables -------------------------------------


DesignerMove.startTableNew = function () {
  CommonParams.set(&#039;table&#039;, &#039;&#039;);
  CommonActions.refreshMain(&#039;index.php?route=/table/create&#039;);
};

DesignerMove.startTabUpd = function (db, table) {
  CommonParams.set(&#039;db&#039;, db);
  CommonParams.set(&#039;table&#039;, table);
  CommonActions.refreshMain(&#039;index.php?route=/table/structure&#039;);
}; // --------------------------- hide tables --------------------------------------
// max/min all tables


DesignerMove.smallTabAll = function (idThis) {
  var icon = idThis.children[0];
  var valueSent = &#039;&#039;;

  if (icon.alt === &#039;v&#039;) {
    $(&#039;.designer_tab .small_tab,.small_tab2&#039;).each(function (index, element) {
      if ($(element).text() === &#039;v&#039;) {
        DesignerMove.smallTab($(element).attr(&#039;table_name&#039;), 0);
      }
    });
    icon.alt = &#039;&gt;&#039;;
    icon.src = icon.dataset.right;
    valueSent = &#039;v&#039;;
  } else {
    $(&#039;.designer_tab .small_tab,.small_tab2&#039;).each(function (index, element) {
      if ($(element).text() !== &#039;v&#039;) {
        DesignerMove.smallTab($(element).attr(&#039;table_name&#039;), 0);
      }
    });
    icon.alt = &#039;v&#039;;
    icon.src = icon.dataset.down;
    valueSent = &#039;&gt;&#039;;
  }

  DesignerMove.saveValueInConfig(&#039;small_big_all&#039;, valueSent);
  $(&#039;#key_SB_all&#039;).toggleClass(&#039;M_butt_Selected_down&#039;);
  $(&#039;#key_SB_all&#039;).toggleClass(&#039;M_butt&#039;);
  DesignerMove.reload();
}; // invert max/min all tables


DesignerMove.smallTabInvert = function () {
  for (var key in jTabs) {
    DesignerMove.smallTab(key, 0);
  }

  DesignerMove.reload();
};

DesignerMove.relationLinesInvert = function () {
  showRelationLines = !showRelationLines;
  DesignerMove.saveValueInConfig(&#039;relation_lines&#039;, showRelationLines);
  $(&#039;#relLineInvert&#039;).toggleClass(&#039;M_butt_Selected_down&#039;);
  $(&#039;#relLineInvert&#039;).toggleClass(&#039;M_butt&#039;);
  DesignerMove.reload();
};

DesignerMove.smallTabRefresh = function () {
  for (var key in jTabs) {
    if (document.getElementById(&#039;id_hide_tbody_&#039; + key).innerHTML !== &#039;v&#039;) {
      DesignerMove.smallTab(key, 0);
    }
  }
};

DesignerMove.smallTab = function (t, reload) {
  var id = document.getElementById(&#039;id_tbody_&#039; + t);
  var idThis = document.getElementById(&#039;id_hide_tbody_&#039; + t);

  if (idThis.innerHTML === &#039;v&#039;) {
    // ---CROSS
    id.style.display = &#039;none&#039;;
    idThis.innerHTML = &#039;&gt;&#039;;
  } else {
    id.style.display = &#039;&#039;;
    idThis.innerHTML = &#039;v&#039;;
  }

  if (reload) {
    DesignerMove.reload();
  }
};

DesignerMove.selectTab = function (t) {
  var idZag = document.getElementById(&#039;id_zag_&#039; + t);

  if (idZag.className !== &#039;tab_zag_3&#039;) {
    document.getElementById(&#039;id_zag_&#039; + t).className = &#039;tab_zag_2&#039;;
  } else {
    document.getElementById(&#039;id_zag_&#039; + t).className = &#039;tab_zag&#039;;
  } // ----------


  var idT = document.getElementById(t);
  window.scrollTo(parseInt(idT.style.left, 10) - 300, parseInt(idT.style.top, 10) - 300);
  setTimeout(function () {
    document.getElementById(&#039;id_zag_&#039; + t).className = &#039;tab_zag&#039;;
  }, 800);
};

DesignerMove.canvasClick = function (id, event) {
  var n = 0;
  var selected = 0;
  var a = [];
  var Key0;
  var Key1;
  var Key2;
  var Key3;
  var Key;
  var x1;
  var x2;
  var K;
  var key;
  var key2;
  var key3;
  var localX = isIe ? event.clientX + document.body.scrollLeft : event.pageX;
  var localY = isIe ? event.clientY + document.body.scrollTop : event.pageY;
  localX -= $(&#039;#osn_tab&#039;).offset().left;
  localY -= $(&#039;#osn_tab&#039;).offset().top;
  DesignerMove.clear();

  for (K in contr) {
    for (key in contr[K]) {
      for (key2 in contr[K][key]) {
        for (key3 in contr[K][key][key2]) {
          if (!document.getElementById(&#039;check_vis_&#039; + key2).checked || !document.getElementById(&#039;check_vis_&#039; + contr[K][key][key2][key3][0]).checked) {
            continue; // if hide
          }

          var x1Left = document.getElementById(key2).offsetLeft + 1; // document.getElementById(key2+&quot;.&quot;+key3).offsetLeft;

          var x1Right = x1Left + document.getElementById(key2).offsetWidth;
          var x2Left = document.getElementById(contr[K][key][key2][key3][0]).offsetLeft; // +document.getElementById(contr[K][key2][key3][0]+&quot;.&quot;+contr[K][key2][key3][1]).offsetLeft

          var x2Right = x2Left + document.getElementById(contr[K][key][key2][key3][0]).offsetWidth;
          a[0] = Math.abs(x1Left - x2Left);
          a[1] = Math.abs(x1Left - x2Right);
          a[2] = Math.abs(x1Right - x2Left);
          a[3] = Math.abs(x1Right - x2Right);
          n = sLeft = sRight = 0;

          for (var i = 1; i &lt; 4; i++) {
            if (a[n] &gt; a[i]) {
              n = i;
            }
          }

          if (n === 1) {
            x1 = x1Left - smS;
            x2 = x2Right + smS;

            if (x1 &lt; x2) {
              n = 0;
            }
          }

          if (n === 2) {
            x1 = x1Right + smS;
            x2 = x2Left - smS;

            if (x1 &gt; x2) {
              n = 0;
            }
          }

          if (n === 3) {
            x1 = x1Right + smS;
            x2 = x2Right + smS;
            sRight = 1;
          }

          if (n === 0) {
            x1 = x1Left - smS;
            x2 = x2Left - smS;
            sLeft = 1;
          }

          var y1 = document.getElementById(key2).offsetTop + document.getElementById(key2 + &#039;.&#039; + key3).offsetTop + heightField;
          var y2 = document.getElementById(contr[K][key][key2][key3][0]).offsetTop + document.getElementById(contr[K][key][key2][key3][0] + &#039;.&#039; + contr[K][key][key2][key3][1]).offsetTop + heightField;
          var osnTab = document.getElementById(&#039;osn_tab&#039;);

          if (!selected &amp;&amp; localX &gt; x1 - 10 &amp;&amp; localX &lt; x1 + 10 &amp;&amp; localY &gt; y1 - 7 &amp;&amp; localY &lt; y1 + 7) {
            DesignerMove.line0(x1 + directionEffect * osnTab.offsetLeft, y1 - osnTab.offsetTop, x2 + directionEffect * osnTab.offsetLeft, y2 - osnTab.offsetTop, &#039;rgba(255,0,0,1)&#039;);
            selected = 1;
            Key0 = contr[K][key][key2][key3][0];
            Key1 = contr[K][key][key2][key3][1];
            Key2 = key2;
            Key3 = key3;
            Key = K;
          } else {
            DesignerMove.line0(x1 + directionEffect * osnTab.offsetLeft, y1 - osnTab.offsetTop, x2 + directionEffect * osnTab.offsetLeft, y2 - osnTab.offsetTop, DesignerMove.getColorByTarget(contr[K][key][key2][key3][0] + &#039;.&#039; + contr[K][key][key2][key3][1]));
          }
        }
      }
    }
  }

  if (selected) {
    // select relations
    var left = globX - (document.getElementById(&#039;layer_upd_relation&#039;).offsetWidth &gt;&gt; 1);
    document.getElementById(&#039;layer_upd_relation&#039;).style.left = left + &#039;px&#039;;
    var top = globY - document.getElementById(&#039;layer_upd_relation&#039;).offsetHeight - 10;
    document.getElementById(&#039;layer_upd_relation&#039;).style.top = top + &#039;px&#039;;
    document.getElementById(&#039;layer_upd_relation&#039;).style.display = &#039;block&#039;;
    var argsep = CommonParams.get(&#039;arg_separator&#039;);
    linkRelation = &#039;T1=&#039; + Key0 + argsep + &#039;F1=&#039; + Key1 + argsep + &#039;T2=&#039; + Key2 + argsep + &#039;F2=&#039; + Key3 + argsep + &#039;K=&#039; + Key;
  }
};

DesignerMove.updRelation = function () {
  document.getElementById(&#039;layer_upd_relation&#039;).style.display = &#039;none&#039;;
  var argsep = CommonParams.get(&#039;arg_separator&#039;);
  linkRelation += argsep + &#039;server=&#039; + server + argsep + &#039;db=&#039; + db;
  linkRelation += argsep + &#039;operation=removeRelation&#039; + argsep + &#039;ajax_request=true&#039;;
  var $msgbox = Functions.ajaxShowMessage(Messages.strProcessingRequest);
  $.post(&#039;index.php?route=/database/designer&#039;, linkRelation, function (data) {
    if (data.success === false) {
      Functions.ajaxShowMessage(data.error, false);
    } else {
      Functions.ajaxRemoveMessage($msgbox);
      DesignerMove.loadPage(selectedPage);
    }
  }); // end $.post()
};

DesignerMove.visibleTab = function (id, tN) {
  if (id.checked) {
    document.getElementById(tN).style.display = &#039;block&#039;;
  } else {
    document.getElementById(tN).style.display = &#039;none&#039;;
  }

  DesignerMove.reload();
  DesignerMove.markUnsaved();
}; // max/min all tables


DesignerMove.hideTabAll = function (idThis) {
  if (idThis.alt === &#039;v&#039;) {
    idThis.alt = &#039;&gt;&#039;;
    idThis.src = idThis.dataset.right;
  } else {
    idThis.alt = &#039;v&#039;;
    idThis.src = idThis.dataset.down;
  }

  var E = document.getElementById(&#039;container-form&#039;);
  var EelementsLength = E.elements.length;

  for (var i = 0; i &lt; EelementsLength; i++) {
    if (E.elements[i].type === &#039;checkbox&#039; &amp;&amp; E.elements[i].id.substring(0, 10) === &#039;check_vis_&#039;) {
      if (idThis.alt === &#039;v&#039;) {
        E.elements[i].checked = true;
        document.getElementById(E.elements[i].value).style.display = &#039;&#039;;
      } else {
        E.elements[i].checked = false;
        document.getElementById(E.elements[i].value).style.display = &#039;none&#039;;
      }
    }
  }

  DesignerMove.reload();
};

DesignerMove.inArrayK = function (x, m) {
  var b = 0;

  for (var u in m) {
    if (x === u) {
      b = 1;
      break;
    }
  }

  return b;
};

DesignerMove.noHaveConstr = function (idThis) {
  var a = [];
  var K;
  var key;
  var key2;
  var key3;

  for (K in contr) {
    for (key in contr[K]) {
      // contr name
      for (key2 in contr[K][key]) {
        // table name
        for (key3 in contr[K][key][key2]) {
          // field name
          a[key2] = a[contr[K][key][key2][key3][0]] = 1; // exist constr
        }
      }
    }
  }

  if (idThis.alt === &#039;v&#039;) {
    idThis.alt = &#039;&gt;&#039;;
    idThis.src = idThis.dataset.right;
  } else {
    idThis.alt = &#039;v&#039;;
    idThis.src = idThis.dataset.down;
  }

  var E = document.getElementById(&#039;container-form&#039;);
  var EelementsLength = E.elements.length;

  for (var i = 0; i &lt; EelementsLength; i++) {
    if (E.elements[i].type === &#039;checkbox&#039; &amp;&amp; E.elements[i].id.substring(0, 10) === &#039;check_vis_&#039;) {
      if (!DesignerMove.inArrayK(E.elements[i].value, a)) {
        if (idThis.alt === &#039;v&#039;) {
          E.elements[i].checked = true;
          document.getElementById(E.elements[i].value).style.display = &#039;&#039;;
        } else {
          E.elements[i].checked = false;
          document.getElementById(E.elements[i].value).style.display = &#039;none&#039;;
        }
      }
    }
  }
};

DesignerMove.generalScroll = function () {
  // if (timeoutId)
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function () {
    document.getElementById(&#039;top_menu&#039;).style.left = document.body.scrollLeft + &#039;px&#039;;
    document.getElementById(&#039;top_menu&#039;).style.top = document.body.scrollTop + &#039;px&#039;;
  }, 200);
}; // max/min all tables


DesignerMove.showLeftMenu = function (idThis) {
  var icon = idThis.children[0];
  $(&#039;#key_Show_left_menu&#039;).toggleClass(&#039;M_butt_Selected_down&#039;);

  if (icon.alt === &#039;v&#039;) {
    document.getElementById(&#039;layer_menu&#039;).style.top = &#039;0px&#039;;
    document.getElementById(&#039;layer_menu&#039;).style.display = &#039;block&#039;;
    icon.alt = &#039;&gt;&#039;;
    icon.src = icon.dataset.up;

    if (isIe) {
      DesignerMove.generalScroll();
    }
  } else {
    document.getElementById(&#039;layer_menu&#039;).style.top = -1000 + &#039;px&#039;; // fast scroll

    document.getElementById(&#039;layer_menu&#039;).style.display = &#039;none&#039;;
    icon.alt = &#039;v&#039;;
    icon.src = icon.dataset.down;
  }
};

DesignerMove.sideMenuRight = function (idThis) {
  $(&#039;#side_menu&#039;).toggleClass(&#039;right&#039;);
  $(&#039;#layer_menu&#039;).toggleClass(&#039;left&#039;);
  var moveMenuIcon = $(idThis.getElementsByTagName(&#039;img&#039;)[0]);
  var resizeIcon = $(&#039;#layer_menu_sizer &gt; img&#039;).toggleClass(&#039;floatleft&#039;).toggleClass(&#039;floatright&#039;);
  var srcResizeIcon = resizeIcon.attr(&#039;src&#039;);
  resizeIcon.attr(&#039;src&#039;, resizeIcon.attr(&#039;data-right&#039;));
  resizeIcon.attr(&#039;data-right&#039;, srcResizeIcon);
  var srcMoveIcon = moveMenuIcon.attr(&#039;src&#039;);
  moveMenuIcon.attr(&#039;src&#039;, moveMenuIcon.attr(&#039;data-right&#039;));
  moveMenuIcon.attr(&#039;data-right&#039;, srcMoveIcon);
  menuMoved = !menuMoved;
  DesignerMove.saveValueInConfig(&#039;side_menu&#039;, $(&#039;#side_menu&#039;).hasClass(&#039;right&#039;));
  $(&#039;#key_Left_Right&#039;).toggleClass(&#039;M_butt_Selected_down&#039;);
  $(&#039;#key_Left_Right&#039;).toggleClass(&#039;M_butt&#039;);
};

DesignerMove.showText = function () {
  $(&#039;#side_menu&#039;).find(&#039;.hidable&#039;).show();
};

DesignerMove.hideText = function () {
  if (!alwaysShowText) {
    $(&#039;#side_menu&#039;).find(&#039;.hidable&#039;).hide();
  }
};

DesignerMove.pinText = function () {
  alwaysShowText = !alwaysShowText;
  $(&#039;#pin_Text&#039;).toggleClass(&#039;M_butt_Selected_down&#039;);
  $(&#039;#pin_Text&#039;).toggleClass(&#039;M_butt&#039;);
  DesignerMove.saveValueInConfig(&#039;pin_text&#039;, alwaysShowText);
};

DesignerMove.startDisplayField = function () {
  if (onRelation) {
    return;
  }

  if (!onDisplayField) {
    onDisplayField = 1;
    document.getElementById(&#039;designer_hint&#039;).innerHTML = Messages.strChangeDisplay;
    document.getElementById(&#039;designer_hint&#039;).style.display = &#039;block&#039;;
    document.getElementById(&#039;display_field_button&#039;).className = &#039;M_butt_Selected_down&#039;; // &#039;#FFEE99&#039;;gray #AAAAAA

    if (isIe) {
      // correct for IE
      document.getElementById(&#039;display_field_button&#039;).className = &#039;M_butt_Selected_down_IE&#039;;
    }
  } else {
    document.getElementById(&#039;designer_hint&#039;).innerHTML = &#039;&#039;;
    document.getElementById(&#039;designer_hint&#039;).style.display = &#039;none&#039;;
    document.getElementById(&#039;display_field_button&#039;).className = &#039;M_butt&#039;;
    onDisplayField = 0;
  }
};

var TargetColors = [];

DesignerMove.getColorByTarget = function (target) {
  var color = &#039;&#039;; // &quot;rgba(0,100,150,1)&quot;;

  for (var targetColor in TargetColors) {
    if (TargetColors[targetColor][0] === target) {
      color = TargetColors[targetColor][1];
      break;
    }
  }

  if (color.length === 0) {
    var i = TargetColors.length + 1;
    var d = i % 6;
    var j = (i - d) / 6;
    j = j % 4;
    j++;
    var colorCase = [[1, 0, 0], [0, 1, 0], [0, 0, 1], [1, 1, 0], [1, 0, 1], [0, 1, 1]];
    var a = colorCase[d][0];
    var b = colorCase[d][1];
    var c = colorCase[d][2];
    var e = 1 - (j - 1) / 6;
    var r = Math.round(a * 200 * e);
    var g = Math.round(b * 200 * e);
    b = Math.round(c * 200 * e);
    color = &#039;rgba(&#039; + r + &#039;,&#039; + g + &#039;,&#039; + b + &#039;,1)&#039;;
    TargetColors.push([target, color]);
  }

  return color;
};

DesignerMove.clickOption = function (dbName, tableName, columnName, tableDbNameUrl, optionColNameString) {
  var designerOptions = document.getElementById(&#039;designer_optionse&#039;);
  var left = globX - (designerOptions.offsetWidth &gt;&gt; 1);
  designerOptions.style.left = left + &#039;px&#039;; // var top = Glob_Y - designerOptions.offsetHeight - 10;

  designerOptions.style.top = screen.height / 4 + &#039;px&#039;;
  designerOptions.style.display = &#039;block&#039;;
  document.getElementById(&#039;ok_add_object_db_and_table_name_url&#039;).value = tableDbNameUrl;
  document.getElementById(&#039;ok_add_object_db_name&#039;).value = dbName;
  document.getElementById(&#039;ok_add_object_table_name&#039;).value = tableName;
  document.getElementById(&#039;ok_add_object_col_name&#039;).value = columnName;
  document.getElementById(&#039;option_col_name&#039;).innerHTML = optionColNameString;
};

DesignerMove.closeOption = function () {
  document.getElementById(&#039;designer_optionse&#039;).style.display = &#039;none&#039;;
  document.getElementById(&#039;rel_opt&#039;).value = &#039;--&#039;;
  document.getElementById(&#039;Query&#039;).value = &#039;&#039;;
  document.getElementById(&#039;new_name&#039;).value = &#039;&#039;;
  document.getElementById(&#039;operator&#039;).value = &#039;---&#039;;
  document.getElementById(&#039;groupby&#039;).checked = false;
  document.getElementById(&#039;h_rel_opt&#039;).value = &#039;--&#039;;
  document.getElementById(&#039;h_operator&#039;).value = &#039;---&#039;;
  document.getElementById(&#039;having&#039;).value = &#039;&#039;;
  document.getElementById(&#039;orderby&#039;).value = &#039;---&#039;;
};

DesignerMove.selectAll = function (tableName, dbName, idSelectAll) {
  var parentIsChecked = $(&#039;#&#039; + idSelectAll).is(&#039;:checked&#039;);
  var checkboxAll = $(&#039;#container-form input[id_check_all=\&#039;&#039; + idSelectAll + &#039;\&#039;]:checkbox&#039;);
  checkboxAll.each(function () {
    // already checked and then check parent
    if (parentIsChecked === true &amp;&amp; this.checked) {
      // was checked, removing column from selected fields
      // trigger unchecked event
      this.click();
    }

    this.checked = parentIsChecked;
    this.disabled = parentIsChecked;
  });

  if (parentIsChecked) {
    selectField.push(&#039;`&#039; + tableName + &#039;`.*&#039;);
    fromArray.push(tableName);
  } else {
    var i;

    for (i = 0; i &lt; selectField.length; i++) {
      if (selectField[i] === &#039;`&#039; + tableName + &#039;`.*&#039;) {
        selectField.splice(i, 1);
      }
    }

    var k;

    for (k = 0; k &lt; fromArray.length; k++) {
      if (fromArray[k] === tableName) {
        fromArray.splice(k, 1);
        break;
      }
    }
  }

  DesignerMove.reload();
};

DesignerMove.tableOnOver = function (idThis, val, buil) {
  var builLocal = parseInt(buil);

  if (!val) {
    document.getElementById(&#039;id_zag_&#039; + idThis).className = &#039;tab_zag_2&#039;;

    if (builLocal) {
      document.getElementById(&#039;id_zag_&#039; + idThis + &#039;_2&#039;).className = &#039;tab_zag_2&#039;;
    }
  } else {
    document.getElementById(&#039;id_zag_&#039; + idThis).className = &#039;tab_zag&#039;;

    if (builLocal) {
      document.getElementById(&#039;id_zag_&#039; + idThis + &#039;_2&#039;).className = &#039;tab_zag&#039;;
    }
  }
};
/**
 * This function stores selected column information in selectField[]
 * In case column is checked it add else it deletes
 */


DesignerMove.storeColumn = function (tableName, colName, checkboxId) {
  var i;
  var k;
  var selectKeyField = &#039;`&#039; + tableName + &#039;`.`&#039; + colName + &#039;`&#039;;

  if (document.getElementById(checkboxId).checked === true) {
    selectField.push(selectKeyField);
    fromArray.push(tableName);
  } else {
    for (i = 0; i &lt; selectField.length; i++) {
      if (selectField[i] === selectKeyField) {
        selectField.splice(i, 1);
        break;
      }
    }

    for (k = 0; k &lt; fromArray.length; k++) {
      if (fromArray[k] === tableName) {
        fromArray.splice(k, 1);
        break;
      }
    }
  }
};
/**
 * This function builds object and adds them to historyArray
 * first it does a few checks on each object, then makes an object(where,rename,groupby,aggregate,orderby)
 * then a new history object is made and finally all these history objects are added to historyArray[]
 */


DesignerMove.addObject = function (dbName, tableName, colName, dbTableNameUrl) {
  var p;
  var whereObj;
  var rel = document.getElementById(&#039;rel_opt&#039;);
  var sum = 0;
  var init = historyArray.length;

  if (rel.value !== &#039;--&#039;) {
    if (document.getElementById(&#039;Query&#039;).value === &#039;&#039;) {
      Functions.ajaxShowMessage(Functions.sprintf(Messages.strQueryEmpty));
      return;
    }

    p = document.getElementById(&#039;Query&#039;);
    whereObj = new DesignerHistory.Where(rel.value, p.value); // make where object

    historyArray.push(new DesignerHistory.HistoryObj(colName, whereObj, tableName, hTabs[dbTableNameUrl], &#039;Where&#039;));
    sum = sum + 1;
  }

  if (document.getElementById(&#039;new_name&#039;).value !== &#039;&#039;) {
    var renameObj = new DesignerHistory.Rename(document.getElementById(&#039;new_name&#039;).value); // make Rename object

    historyArray.push(new DesignerHistory.HistoryObj(colName, renameObj, tableName, hTabs[dbTableNameUrl], &#039;Rename&#039;));
    sum = sum + 1;
  }

  if (document.getElementById(&#039;operator&#039;).value !== &#039;---&#039;) {
    var aggregateObj = new DesignerHistory.Aggregate(document.getElementById(&#039;operator&#039;).value);
    historyArray.push(new DesignerHistory.HistoryObj(colName, aggregateObj, tableName, hTabs[dbTableNameUrl], &#039;Aggregate&#039;));
    sum = sum + 1; // make aggregate operator
  }

  if (document.getElementById(&#039;groupby&#039;).checked === true) {
    historyArray.push(new DesignerHistory.HistoryObj(colName, &#039;GroupBy&#039;, tableName, hTabs[dbTableNameUrl], &#039;GroupBy&#039;));
    sum = sum + 1; // make groupby
  }

  if (document.getElementById(&#039;h_rel_opt&#039;).value !== &#039;--&#039;) {
    if (document.getElementById(&#039;having&#039;).value === &#039;&#039;) {
      return;
    }

    whereObj = new DesignerHistory.Having(document.getElementById(&#039;h_rel_opt&#039;).value, document.getElementById(&#039;having&#039;).value, document.getElementById(&#039;h_operator&#039;).value); // make where object

    historyArray.push(new DesignerHistory.HistoryObj(colName, whereObj, tableName, hTabs[dbTableNameUrl], &#039;Having&#039;));
    sum = sum + 1; // make having
  }

  if (document.getElementById(&#039;orderby&#039;).value !== &#039;---&#039;) {
    var orderByObj = new DesignerHistory.OrderBy(document.getElementById(&#039;orderby&#039;).value);
    historyArray.push(new DesignerHistory.HistoryObj(colName, orderByObj, tableName, hTabs[dbTableNameUrl], &#039;OrderBy&#039;));
    sum = sum + 1; // make orderby
  }

  Functions.ajaxShowMessage(Functions.sprintf(Messages.strObjectsCreated, sum)); // output sum new objects created

  var existingDiv = document.getElementById(&#039;ab&#039;);
  existingDiv.innerHTML = DesignerHistory.display(init, historyArray.length);
  DesignerMove.closeOption();
  $(&#039;#ab&#039;).accordion(&#039;refresh&#039;);
};

DesignerMove.enablePageContentEvents = function () {
  $(&#039;#page_content&#039;).off(&#039;mousedown&#039;);
  $(&#039;#page_content&#039;).off(&#039;mouseup&#039;);
  $(&#039;#page_content&#039;).off(&#039;mousemove&#039;);
  $(&#039;#page_content&#039;).on(&#039;mousedown&#039;, function (e) {
    DesignerMove.mouseDown(e);
  });
  $(&#039;#page_content&#039;).on(&#039;mouseup&#039;, function (e) {
    DesignerMove.mouseUp(e);
  });
  $(&#039;#page_content&#039;).on(&#039;mousemove&#039;, function (e) {
    DesignerMove.mouseMove(e);
  });
};
/**
 * This function enables the events on table items.
 * It helps to enable them on page loading and when a table is added on the fly.
 */


DesignerMove.enableTableEvents = function (index, element) {
  $(element).on(&#039;click&#039;, &#039;.select_all_1&#039;, function () {
    DesignerMove.selectAll($(this).attr(&#039;table_name&#039;), $(this).attr(&#039;db_name&#039;), $(this).attr(&#039;id&#039;));
  });
  $(element).on(&#039;click&#039;, &#039;.small_tab,.small_tab2&#039;, function () {
    DesignerMove.smallTab($(this).attr(&#039;table_name&#039;), 1);
  });
  $(element).on(&#039;click&#039;, &#039;.small_tab_pref_1&#039;, function () {
    DesignerMove.startTabUpd($(this).attr(&#039;db_url&#039;), $(this).attr(&#039;table_name_url&#039;));
  });
  $(element).on(&#039;click&#039;, &#039;.select_all_store_col&#039;, function () {
    DesignerMove.storeColumn($(this).attr(&#039;table_name&#039;), $(this).attr(&#039;col_name&#039;), $(this).attr(&#039;id&#039;));
  });
  $(element).on(&#039;click&#039;, &#039;.small_tab_pref_click_opt&#039;, function () {
    DesignerMove.clickOption($(this).attr(&#039;db_name&#039;), $(this).attr(&#039;table_name&#039;), $(this).attr(&#039;col_name&#039;), $(this).attr(&#039;db_table_name_url&#039;), $(this).attr(&#039;option_col_name_modal&#039;));
  });
  $(element).on(&#039;click&#039;, &#039;.tab_field_2,.tab_field_3,.tab_field&#039;, function () {
    var params = $(this).attr(&#039;click_field_param&#039;).split(&#039;,&#039;);
    DesignerMove.clickField(params[3], params[0], params[1], params[2]);
  });
  $(element).find(&#039;.tab_zag_noquery&#039;).on(&#039;mouseover&#039;, function () {
    DesignerMove.tableOnOver($(this).attr(&#039;table_name&#039;), 0, $(this).attr(&#039;query_set&#039;));
  });
  $(element).find(&#039;.tab_zag_noquery&#039;).on(&#039;mouseout&#039;, function () {
    DesignerMove.tableOnOver($(this).attr(&#039;table_name&#039;), 1, $(this).attr(&#039;query_set&#039;));
  });
  $(element).find(&#039;.tab_zag_query&#039;).on(&#039;mouseover&#039;, function () {
    DesignerMove.tableOnOver($(this).attr(&#039;table_name&#039;), 0, 1);
  });
  $(element).find(&#039;.tab_zag_query&#039;).on(&#039;mouseout&#039;, function () {
    DesignerMove.tableOnOver($(this).attr(&#039;table_name&#039;), 1, 1);
  });
  DesignerMove.enablePageContentEvents();
};

AJAX.registerTeardown(&#039;designer/move.js&#039;, function () {
  $(&#039;#side_menu&#039;).off(&#039;mouseenter mouseleave&#039;);
  $(&#039;#key_Show_left_menu&#039;).off(&#039;click&#039;);
  $(&#039;#toggleFullscreen&#039;).off(&#039;click&#039;);
  $(&#039;#newPage&#039;).off(&#039;click&#039;);
  $(&#039;#editPage&#039;).off(&#039;click&#039;);
  $(&#039;#savePos&#039;).off(&#039;click&#039;);
  $(&#039;#SaveAs&#039;).off(&#039;click&#039;);
  $(&#039;#delPages&#039;).off(&#039;click&#039;);
  $(&#039;#StartTableNew&#039;).off(&#039;click&#039;);
  $(&#039;#rel_button&#039;).off(&#039;click&#039;);
  $(&#039;#StartTableNew&#039;).off(&#039;click&#039;);
  $(&#039;#display_field_button&#039;).off(&#039;click&#039;);
  $(&#039;#reloadPage&#039;).off(&#039;click&#039;);
  $(&#039;#angular_direct_button&#039;).off(&#039;click&#039;);
  $(&#039;#grid_button&#039;).off(&#039;click&#039;);
  $(&#039;#key_SB_all&#039;).off(&#039;click&#039;);
  $(&#039;#SmallTabInvert&#039;).off(&#039;click&#039;);
  $(&#039;#relLineInvert&#039;).off(&#039;click&#039;);
  $(&#039;#exportPages&#039;).off(&#039;click&#039;);
  $(&#039;#query_builder&#039;).off(&#039;click&#039;);
  $(&#039;#key_Left_Right&#039;).off(&#039;click&#039;);
  $(&#039;#pin_Text&#039;).off(&#039;click&#039;);
  $(&#039;#canvas&#039;).off(&#039;click&#039;);
  $(&#039;#key_HS_all&#039;).off(&#039;click&#039;);
  $(&#039;#key_HS&#039;).off(&#039;click&#039;);
  $(&#039;.scroll_tab_struct&#039;).off(&#039;click&#039;);
  $(&#039;.scroll_tab_checkbox&#039;).off(&#039;click&#039;);
  $(&#039;#id_scroll_tab&#039;).find(&#039;tr&#039;).off(&#039;click&#039;, &#039;.designer_Tabs2,.designer_Tabs&#039;);
  $(&#039;.designer_tab&#039;).off(&#039;click&#039;, &#039;.select_all_1&#039;);
  $(&#039;.designer_tab&#039;).off(&#039;click&#039;, &#039;.small_tab,.small_tab2&#039;);
  $(&#039;.designer_tab&#039;).off(&#039;click&#039;, &#039;.small_tab_pref_1&#039;);
  $(&#039;.tab_zag_noquery&#039;).off(&#039;mouseover&#039;);
  $(&#039;.tab_zag_noquery&#039;).off(&#039;mouseout&#039;);
  $(&#039;.tab_zag_query&#039;).off(&#039;mouseover&#039;);
  $(&#039;.tab_zag_query&#039;).off(&#039;mouseout&#039;);
  $(&#039;.designer_tab&#039;).off(&#039;click&#039;, &#039;.tab_field_2,.tab_field_3,.tab_field&#039;);
  $(&#039;.designer_tab&#039;).off(&#039;click&#039;, &#039;.select_all_store_col&#039;);
  $(&#039;.designer_tab&#039;).off(&#039;click&#039;, &#039;.small_tab_pref_click_opt&#039;);
  $(&#039;#del_button&#039;).off(&#039;click&#039;);
  $(&#039;#cancel_button&#039;).off(&#039;click&#039;);
  $(&#039;#ok_add_object&#039;).off(&#039;click&#039;);
  $(&#039;#cancel_close_option&#039;).off(&#039;click&#039;);
  $(&#039;#ok_new_rel_panel&#039;).off(&#039;click&#039;);
  $(&#039;#cancel_new_rel_panel&#039;).off(&#039;click&#039;);
  $(&#039;#page_content&#039;).off(&#039;mouseup&#039;);
  $(&#039;#page_content&#039;).off(&#039;mousedown&#039;);
  $(&#039;#page_content&#039;).off(&#039;mousemove&#039;);
});
AJAX.registerOnload(&#039;designer/move.js&#039;, function () {
  $(&#039;#key_Show_left_menu&#039;).on(&#039;click&#039;, function () {
    DesignerMove.showLeftMenu(this);
    return false;
  });
  $(&#039;#toggleFullscreen&#039;).on(&#039;click&#039;, function () {
    DesignerMove.toggleFullscreen();
    return false;
  });
  $(&#039;#addOtherDbTables&#039;).on(&#039;click&#039;, function () {
    DesignerMove.addOtherDbTables();
    return false;
  });
  $(&#039;#newPage&#039;).on(&#039;click&#039;, function () {
    DesignerMove.new();
    return false;
  });
  $(&#039;#editPage&#039;).on(&#039;click&#039;, function () {
    DesignerMove.editPages();
    return false;
  });
  $(&#039;#savePos&#039;).on(&#039;click&#039;, function () {
    DesignerMove.save3();
    return false;
  });
  $(&#039;#SaveAs&#039;).on(&#039;click&#039;, function () {
    DesignerMove.saveAs();
    $(document).on(&#039;ajaxStop&#039;, function () {
      $(&#039;#selected_value&#039;).on(&#039;click&#039;, function () {
        $(&#039;#savePageNewRadio&#039;).prop(&#039;checked&#039;, true);
      });
    });
    return false;
  });
  $(&#039;#delPages&#039;).on(&#039;click&#039;, function () {
    DesignerMove.deletePages();
    return false;
  });
  $(&#039;#StartTableNew&#039;).on(&#039;click&#039;, function () {
    DesignerMove.startTableNew();
    return false;
  });
  $(&#039;#rel_button&#039;).on(&#039;click&#039;, function () {
    DesignerMove.startRelation();
    return false;
  });
  $(&#039;#display_field_button&#039;).on(&#039;click&#039;, function () {
    DesignerMove.startDisplayField();
    return false;
  });
  $(&#039;#reloadPage&#039;).on(&#039;click&#039;, function () {
    DesignerMove.loadPage(selectedPage);
  });
  $(&#039;#angular_direct_button&#039;).on(&#039;click&#039;, function () {
    DesignerMove.angularDirect();
    return false;
  });
  $(&#039;#grid_button&#039;).on(&#039;click&#039;, function () {
    DesignerMove.grid();
    return false;
  });
  $(&#039;#key_SB_all&#039;).on(&#039;click&#039;, function () {
    DesignerMove.smallTabAll(this);
    return false;
  });
  $(&#039;#SmallTabInvert&#039;).on(&#039;click&#039;, function () {
    DesignerMove.smallTabInvert();
    return false;
  });
  $(&#039;#relLineInvert&#039;).on(&#039;click&#039;, function () {
    DesignerMove.relationLinesInvert();
    return false;
  });
  $(&#039;#exportPages&#039;).on(&#039;click&#039;, function () {
    DesignerMove.exportPages();
    return false;
  });
  $(&#039;#query_builder&#039;).on(&#039;click&#039;, function () {
    DesignerHistory.buildQuery(&#039;SQL Query on Database&#039;, 0);
  });
  $(&#039;#key_Left_Right&#039;).on(&#039;click&#039;, function () {
    DesignerMove.sideMenuRight(this);
    return false;
  });
  $(&#039;#side_menu&#039;).on(&#039;mouseenter&#039;, function () {
    DesignerMove.showText();
    return false;
  });
  $(&#039;#side_menu&#039;).on(&#039;mouseleave&#039;, function () {
    DesignerMove.hideText();
    return false;
  });
  $(&#039;#pin_Text&#039;).on(&#039;click&#039;, function () {
    DesignerMove.pinText(this);
    return false;
  });
  $(&#039;#canvas&#039;).on(&#039;click&#039;, function (event) {
    DesignerMove.canvasClick(this, event);
  });
  $(&#039;#key_HS_all&#039;).on(&#039;click&#039;, function () {
    DesignerMove.hideTabAll(this);
    return false;
  });
  $(&#039;#key_HS&#039;).on(&#039;click&#039;, function () {
    DesignerMove.noHaveConstr(this);
    return false;
  });
  $(&#039;.designer_tab&#039;).each(DesignerMove.enableTableEvents);
  $(&#039;.designer_tab&#039;).each(DesignerMove.addTableToTablesList);
  $(&#039;input#del_button&#039;).on(&#039;click&#039;, function () {
    DesignerMove.updRelation();
  });
  $(&#039;input#cancel_button&#039;).on(&#039;click&#039;, function () {
    document.getElementById(&#039;layer_upd_relation&#039;).style.display = &#039;none&#039;;
    DesignerMove.reload();
  });
  $(&#039;input#ok_add_object&#039;).on(&#039;click&#039;, function () {
    DesignerMove.addObject($(&#039;#ok_add_object_db_name&#039;).val(), $(&#039;#ok_add_object_table_name&#039;).val(), $(&#039;#ok_add_object_col_name&#039;).val(), $(&#039;#ok_add_object_db_and_table_name_url&#039;).val());
  });
  $(&#039;input#cancel_close_option&#039;).on(&#039;click&#039;, function () {
    DesignerMove.closeOption();
  });
  $(&#039;input#ok_new_rel_panel&#039;).on(&#039;click&#039;, function () {
    DesignerMove.newRelation();
  });
  $(&#039;input#cancel_new_rel_panel&#039;).on(&#039;click&#039;, function () {
    document.getElementById(&#039;layer_new_relation&#039;).style.display = &#039;none&#039;;
  });
  DesignerMove.enablePageContentEvents();
});</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist%2Fdesigner'>🔙 Back</a></p>