mFeatureMnu.prg

<?php
/**
 *  mFeatureMnu.prg
 *
 *  Presentation / edit script for maintaining the Credit Union Menu and Features
 *  This script will allow HomeCU to create a menu and set a Feature dependency for the menu items
 *
 *  ** ERROR STATES **
 *  ** 900 -- permissions failed --> redirect screen
 *  ** 901 -- CU Code not found --> Print Error screen
 *
 *  MWS 10/24/2016
 *
 */

  /* ** FORM VARIABLES ** */
  $homecuSharedLibrary = dirname(__FILE__) . "/../../shared/library";
  // ** Current monitor includes are in scripts folder
  $homecuMonitorLibrary = dirname(__FILE__) . "/../../monitor/library";
  $homecuMonitorScripts = dirname(__FILE__) . "/../../monitor/scripts";

  $importValues = Array();


  $pageTitle = 'Build CU Menu';


  try {
    /* ** require needed scripts ** */
    require_once("$homecuMonitorLibrary/cu_top.i");
    require_once("$homecuMonitorLibrary/ck_hticket.i");
    require_once("$homecuMonitorLibrary/monitorView.i");
    require_once("$homecuMonitorLibrary/cu_pass.i");
    require_once("$homecuSharedLibrary/dms_imp_val.i");
    require_once("$homecuSharedLibrary/cu_flagconst.i");
    require_once("$homecuSharedLibrary/dms_imp_val.i");


    /* * IMPORT VARIABLES * */
    $importFieldAry = Array (
                          "user_name" => array('filter' => FILTER_SANITIZE_STRING)
                            );
    HCU_ImportVars($importValues, '', $importFieldAry);

    // ** AFTER importing, set the [cu] to the upper case of the user_name for query purposes
    $importValues['cu'] = strtoupper($importValues['user_name']);


    if (!CheckPerm($dbh, $Hu, basename($_SERVER['SCRIPT_NAME']), $_SERVER['REMOTE_ADDR'])) {
      // ** Permissions failed
      // ** redirect to new page
      throw new ErrorException('permissions failed', 900);
    }

    /* Validate the user_name exists in cuadmin table */
    $sql = "SELECT count(*) as count FROM cuadmin WHERE cu = '" . prep_save($importValues['cu'], 10) . "'; ";
    $cntRs = db_query($sql, $dbh);
    $cntRow = db_fetch_all($cntRs);

    if ($cntRow[0]['count'] == 0) {
      // ** There were no records found with this cu code
      throw new ErrorException('Unknown Credit Union', 901);
    }


    /* ** PRINT PAGE TOP ** */
    printMonitorPageTop($pageTitle, $homecuKendoVersion, $cloudfrontDomainName, $bootstrapVersion, $fontawesomeVersion, true);

    /* ** LOCAL STYLE CLASSES ** */
?>
    <style>
      #page-contents {
        margin-top: 25px;
      }
      .div-content-right {
        text-align: right;
      }

      input[type="checkbox"] {
        margin: 2px 0 0;
      }

      .local-indent {
        margin-left: 15px;
      }
      .local-indent .radio,
      .local-indent .checkbox,
      .local-indent .radio-inline,
      .local-indent .checkbox-inline {
        margin-left: 15px;
      }
      #local-detail-list {

      }
      .local-no-icon {
        display: inline-block;
        margin-left: 16px;
      }
      .local-menu-root {
        color: rgba(0, 90, 210, 1);
      }
      .local-add-td-row {
        color: rgba(22, 123, 57, .85);
      }
      .local-td-grab {
        text-overflow: unset !important;
      }
      .local-td-no-grab {
        display: inline-block;
      }
      .local-td-col-1 {
        display: inline-block;
        width: 16px;
      }

      .radio-inline p {
        margin-top: 5px;
      }
      .form-horizontal .radio,
      .form-horizontal .checkbox,
      .form-horizontal .radio-inline,
      .form-horizontal .checkbox-inline {
        padding-top: 0px;
      }
      .local-k-template .local-k-edit-buttons {
          clear: both;
          text-align: right;
          border-width: 1px 0 0;
          border-style: solid;
          position: relative;
          bottom: -1em;
          padding: .6em;
      }
      #local-icon-delete {
        float:left;
        margin-top: 8px;
      }
      .local-table-flags {
        float:right;
      }
      #local-menu-readonly {
        color: rgba(224, 1, 1, .84);
        display: none;
      }
      #local-error {
        display: none;
      }
      .local-error-text {
        display: inline-block;
        vertical-align: top;
        margin-top: 10px;
      }
      .local-error-text ul {
        list-style: none;
      }
      .local-error-text ul li {
        margin-left: 10px;
      }
      .local-error-icon {
        display: inline-block;
        padding: 20px;
      }

      #localHideSubmitWait {
        position: relative;
        left: -2000px;
        top: -2000px;
      }

      #formStatus {
        padding: 10px;
      }
      .local-menu-action {
        display: none;
      }
      .local-menu-action.local-show {
        display: block;
      }

      #showIcon {
        position: relative;
        top: 5px;
      }
      div.h4 .local-tooltip,
      label.h4 .local-tooltip {
        font-size: 12px;
      }

      .localSaveMenuDiv {
        position: fixed;
        top: 75px;
        width: inherit;
        padding: inherit;
        margin: inherit;
        text-align: right;
        padding-right: 5px;
      }



      @media (max-width: 991px) {
        .localSaveMenuDiv {
          right: 0px;
        }
      }

      @media (min-width: 991px) {
        .localSaveMenuDiv div {
          position: relative;
          left: -45px;
        }
      }
    </style>
<?php
    printMonitorPageMiddle($pageTitle);


    /* ** PAGE CONTENTS ** */
?>
    <div id='localHideSubmitWait'>
      <div id='localSubmitWait' class='k-block' >
        <div class='k-loading-image'></div>
      </div>
    </div>
    <div id="page-contents">
      <!-- Main Container -->



      <div class="container">

      <?php // To set the same to the same as the grid. ?>
        <div class="local-menu-action localSaveMenuDiv"><div>
          <a class="" href="javascript:CancelMenuChanges();" >Cancel</a>
          &nbsp;&nbsp;&nbsp;
          <button class="k-button k-primary " type="submit" onclick="SaveMenu();"><span class="fa fa-floppy-o"></span>&nbsp;Save Menu</button>
        </div></div>

        <!-- Action buttons -->
        <div class="row hcu-form-group-spacer">
          <div class="col-sm-7 col-md-8">
            <div id="formStatus" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>

          </div>

        </div>  <!-- row -->
        <!-- Data Table / Properties -->
        <div class="row">
          <!-- Data Table -->
          <div class="col-xs-12">


            <!-- Tree View -->
            <div class="hcu-no-td-border" id="menu-grid"></div>
          </div>
        </div>  <!-- row -->
      </div>  <!-- container -->
    </div>  <!-- page-contents -->
<?php
    /* ** END PAGE CONTENTS ** */
    /* ** PRINT PAGE END ** */
    printMonitorPageBottom();

    /* ** LOCAL SCRIPT ** */
?>
    <script>
      /* ** DECLARE EMPTY DATA VARIABLES ** */
      var window_stack = [];    // Active Window array to click on overlay functionality

      var dataSettingsPlatforms = [],
          dataSettingsIcons     = [],
          dataSettingsFeatures  = [],
          dataSettingsScripts   = [],
          dataSettingsLang      = [{en_US: true}],

          dsPlatforms,
          dsFeatureMenu,
          dsFeatureList,
          dsScriptList,
          dsIcons,

          editTemplate,
          windowTemplate,
          actionDialog,
          editMenuItem,
          displayLangCode       = 'en_US',
          menuItemGrid,
          menuDirty = false;

      $(document).ready(function() {

        $(".local-menu-action").appendTo("body");

        /* ***************************
        * ****  KENDO.DATASOURCE ****
         *************************** */

        var dsSettings = new kendo.data.DataSource({
          transport: {
            read: {
              type: "GET",
              url: 'mFeatureMnu.data',
              dataType: "json",
              contentType: 'application/json',
              data: {
                api_action: 'settings',
                cu: '<?php echo $importValues['cu']; ?>'
              }
            },
            cache: false
          },
          schema: {
            type: 'json',
            parse: function(response) {
              responsePass = false;
              returnData = [];
              // ** Verify the response packet is well formed, if it is NOT, then
                // * Simply return a homecuError with that message
              try {
                returnData = response.Results[0];
              } catch(err) {
                returnData = [{homecuErrors: "Error Parsing Result From Server"}];
              }
              return returnData;
            },
            errors: function (response) {
              responsePass = false;
              responseInfo = '';
              try {
                // ** Look for the errors being returned from the server
                if (response.homecuErrors) {
                  if (response.homecuErrors.length > 0) {
                    return response.homecuErrors;
                  }
                } else {
                  // * Check for existence of homecuData
                  if (!response.homecuData) {
                    throw "Error Parsing Result From Server";
                  }
                }
              } catch (err) {
                return err;
              }
            },
            requestStart: function(response) {
              ShowWaitWindow();
            },
            requestEnd: function(response) {
              CloseWaitWindow();
            },
            data: function (response) {
              /* PARSE RESPONSE DATA */
              var returnData = Array();

              try {
                if (response.homecuData) {
                    /* ** MENU PLATFORMS **  */
                  dataSettingsPlatforms = (response.homecuData.menuplatforms ? response.homecuData.menuplatforms : []);
                  dsPlatforms.data(dataSettingsPlatforms);

                    /* ** MENU ICONS **  */
                  dataSettingsIcons = (response.homecuData.menuicons ? response.homecuData.menuicons : []);
                  dsIcons.data(dataSettingsIcons);

                    /* ** MENU FEATURES **  */
                  dataSettingsFeatures = (response.homecuData.features ? response.homecuData.features : []);
                  dsFeatureList.data(dataSettingsFeatures);

                    /* ** MENU SCREENS **  */
                  dataSettingsScripts = (response.homecuData.scripts ? response.homecuData.scripts : []);
                  dsScriptList.data(dataSettingsScripts);

                  dataSettingsLang = (response.homecuData.lang ? response.homecuData.lang : dataSettingsLang);
                  SetLangOptions();


                  returnData = response.homecuData;
                } else {

                  throw "Error Parsing Result From Server";
                }
              } catch (err) {

                // ** Need to report the message to the main screen
                /* *** REPORT THE ERROR *** */

                returnData = [];
              }

              return [response];

            }
          },
          error: function(error) {
          }
        });

        /* ***************************
       * ****  KENDO.DATASOURCE ****
         *************************** */
        dsFeatureMenu = new kendo.data.DataSource({
          batch: true,
          autoSync: false,
          transport: {
            read: {
              type: "GET",
              url: 'mFeatureMnu.data',
              dataType: "json",
              contentType: 'application/json',
              data: {
                api_action: 'read',
                cu: '<?php echo $importValues['cu']; ?>'
              }
            },
            update: {
              url: 'mFeatureMnu.data?cu=<?php echo $importValues['cu']; ?>',
              contentType: "application/x-www-form-urlencoded",
              data: {
                api_action: 'update',
                cu: '<?php echo $importValues['cu']; ?>',
                deleted: null,
                models: null
              },
              type: "POST",
              dataType: "json",
              cache: false
            },
            destroy: {
              url: 'mFeatureMnu.data?cu=<?php echo $importValues['cu']; ?>',
              data: {
                api_action: 'ignore',
                cu: '<?php echo $importValues['cu']; ?>'
              },
              dataType: "json",
              type: "POST",
              cache: false
            },


            parameterMap: function(data, type) {

              try {
                if (type == 'update') {
                  var setData = {cu: data.cu, api_action: data.api_action, data_deleted: kendo.stringify(dsFeatureMenu.destroyed()), data_updated: kendo.stringify(data.models)};
                  return setData;
                } else if (type == 'read') {
                  return data;
                } else if (type == 'destroy') {
                  return {cu: data.cu, api_action: data.api_action};
                } else {
                  return [];
                }
              } catch (err) {
                return false;
              }
            }
          },
          requestStart: function(e) {
            if (e.type != 'read' && e.type != 'update') {
              e.preventDefault();
            }
            ClearErrorMsgs();
            ShowWaitWindow();

          },
          requestEnd: function(response) {
            CloseWaitWindow();
          },
          schema: {
            type: 'json',
            parse: function(response) {
              responsePass = false;
              returnData = [];
              // ** Verify the response packet is well formed, if it is NOT, then
                // * Simply return a homecuError with that message
              try {
                returnData = response.Results[0];

                /* **** **** */
                // * Possibly have Parse break down the MenuItemAttr into the different Detail values


              } catch(err) {
                returnData = [{homecuErrors: "Error Parsing Result From Server"}];
              }
              return returnData;
            },
            errors: function(response) {
              responsePass = false;
              responseInfo = '';
              try {
                // ** Look for the errors being returned from the server
                if (response.homecuErrors) {
                  if (response.homecuErrors.length > 0) {

                    return response.homecuErrors;
                  }
                } else {
                  // * Check for existence of homecuData
                  if (!response.homecuData) {
                    throw "Error Parsing Result From Server";
                  }
                }
              } catch (err) {
                return err;
              }
            },
            data: function(response) {
            /* PARSE RESPONSE DATA */
              var returnData = Array();

              try {
                if (response.homecuData) {
                  if (response.homecuData.featuremenu) {
                    // ** Read
                    returnData = response.homecuData.featuremenu;
                  } else if (response.homecuData.featuresave) {
                    // ** Should this loop through the current dsFeatureMenu data..
                      // Modify ID fields and return that??

                    // * Show update status
                    //
                    // ShowErrorMsgs(response.homecuData.status);
                    $.homecuValidator.displayMessage(response.homecuData.status, $.homecuValidator.settings.statusInfo);
                    // ** Update
                    if (response.homecuData.featuresave.updateId) {
                      UpdateRecordId(response.homecuData.featuresave.updateId);
                    }
                    returnData = true;// Not sure what to return at this time
                  } else if (response.homecuData.featureignore) {
                    // ** Ignore this -- BUT dont' throw an error

                  }

                } else {

                  throw "Error Parsing Result From Server";
                }
              } catch (err) {

                // ** Need to report the message to the main screen
                /* *** REPORT THE ERROR *** */
                returnData = [];
              }

              return returnData;

            },
            model: {
              id: "MenuItemId",
              parentId: "ParentId",
              /* do I need some sort of data mapping to map the values out of the json object into a usable field ???  10.24.2016 */
              fields: {
                MenuItemId:             { type: "number", nullable: false },
                GridOrder:              { type: "number", nullable: false },
                Cu:                     { type: "string"},
                DisplayOrder:           { type: "number" },
                FeatureCode:            { type: "string" },
                FeatureDesc:            { type: "string" },
                ParentId:               { nullable: true, type: "number" },
                MenuItemType:           { type: "string" },
                MenuItemAttr:           { type: "string" },
                details_platform_dsk:   { type: "boolean" },
                details_platform_mbl:   { type: "boolean" },
                details_platform_app:   { type: "boolean" },
                details_display_en_US:  { type: "string" },
                details_display_es_US:  { type: "string" },
                details_display_pl_US:  { type: "string" },
                details_fa_icon:        { type: "string" },
                details_href:           { type: "string" },
                details_hrefUrlQuery:   { type: "number" },
                details_target:         { type: "number" },
                details_message:        { type: "number" },
                details_hrefExtraParam: { type: "string" },
                details_collapse_group: { type: "boolean" },
                details_memacct_filter: { type: "string"}
              }
            }
          },
          change: function(e) {
            if (!this.dataLoading) {
              ShowActionButton();
            }
          },
          sync: function(e) {
            dsFeatureMenu.dataLoading = false;
            HideActionButton();
          },
          error: function(error) {
            if (error.errors) {
              // ShowErrorMsgs(error.errors);
              $.homecuValidator.displayMessage(error.errors, $.homecuValidator.settings.statusError);
            } else {
              // ShowErrorMsgs("Unknown Error");
              $.homecuValidator.displayMessage("Unknown Error", $.homecuValidator.settings.statusError);
            }
          },
          sort: { field: "GridOrder", dir: "asc" },
          newItemId: -500,     /* Large enough to account for loaded menu options */
          dataLoading: false
        });


        dsFeatureList = new kendo.data.DataSource({
          data: dataSettingsFeatures,
          sort: {field: 'description', dir: 'asc'}
        });
        dsScriptList = new kendo.data.DataSource({
          data: dataSettingsScripts,
          sort: {field: 'description', dir: 'asc'}
        });
        dsPlatforms = new kendo.data.DataSource({
          data: dataSettingsPlatforms
        });
        dsIcons = new kendo.data.DataSource({
          data: dataSettingsIcons
        });


        /* ***************************
       * ****     KENDO.GRID    ****
         *************************** */

        menuItemGrid = $('#menu-grid').kendoGrid({

          dataSource: dsFeatureMenu,
          autoBind: false,
          toolbar: kendo.template($('#header-treelist').html()),
          editable: {
            mode: "popup",
            template: kendo.template($('#edit-detail-row').html())
          },
          rowTemplate: kendo.template($("#menu-row").html()),
          change: function(e) {

          },
          saveChanges: function(e) {

          },
          save: function(e) {

          },
          columns: [
            { title: '', width:10 },
            { title: '', width:20 },
            { field: 'details_display_en_US', title: "Display", width:"25%" },
            { field: 'FeatureCode', title: "Applied Feature", width:"25%" },
            { field: 'Cu', title: "Link Detail" }
          ]
        }).data('kendoGrid');



        /* ***************************
       * ****   KENDO.SORTABLE  ****
         *************************** */

        $('#menu-grid').kendoSortable({
          filterDONOTUSE: "tbody>tr.local-tr-grab",
          filter: "tbody>tr",
          cursor: "move",
          hint: function(e) {
            var itemType = 'D';   // Default to normal type
            var itemHint = '';
            try {
              var dataItem = menuItemGrid.dataSource.getByUid(e[0].dataset.uid);
              if (dataItem.MenuItemType !== undefined) {
                itemType = dataItem.MenuItemType;
              }

            } catch (err) {
              // graceful catch to any issue
            }

            // * Based on Type Different String
            switch (itemType) {
              case 'H':
                itemHint = "Menu Group";
                break;
              case 'S':
                itemHint = "Top Link";
                break;
              default:
                itemHint = "Link";
                break;

            }
            itemHint = "<span style='font-weight: 700; color: blue;margin-right :20px;'>" + itemHint + "</span>";

            return $("<span></span>")
                     .html(itemHint + " <i class='fa fa-ellipsis-v'></i>&nbsp;&nbsp;" + $(e).children('td')[2].innerHTML)
                     .css("color", "rgba(0, 0, 0, .8)")
                     .css('margin-left', '-60px');

          },
          placeholder: function(element) {
            return element.clone().css({
                     "opacity": 0.3,
                     "border": "1px dashed #000000"
                   });
          },
          start: function(e) {

            // ** IF a filter is currently applied to the grid, then
              //  do NOT allow them to reorder

            var dataItem = menuItemGrid.dataSource.getByUid(e.item.data("uid"));

            // ** Do NOT allow 'Add Item' columns from being moved
            if (dataItem.MenuItemId === -9999 || dsFeatureMenu.filter() !== undefined) {
              e.preventDefault();
            }
          },
          move: function(e) {

          },
          end: function(e) {
            try {
              var alterIdx,
                  menuView = dsFeatureMenu.view(),
                  childDataItem,
                  childIdxStart,
                  childIdxEnd,
                  childLoopIdx,
                  oldIndex = e.oldIndex,
                  newIndex = e.newIndex,
                  data = menuItemGrid.dataSource.data(),
                  dataItem = menuItemGrid.dataSource.getByUid(e.item.data("uid"));

              var moveParentId = dataItem.MenuItemId;


              /**
               *
               *  Current Grid View has NOT been updated
               *  oldIndex is still the position withing the view the item existed before move
               *
               */

              if (dataItem.ParentId === null && dataItem.MenuItemType === 'H') {

                /**
                 *   **** MOVE VALIDATION ****
                 *   CAN PARENT MOVE HERE?
                 */
                /* ** Next Item Must Be Parent ** */
                /* ** May not move to the last item in the list ** */
                if (newIndex === (menuView.length - 1)) {
                  e.preventDefault();
                  return;
                } else {
                  // * get the next item in the list
                  if (oldIndex < newIndex) {
                    // * *moving down menu
                    childDataItem = menuView[newIndex + 1];
                  } else {
                    // * move up menu
                    childDataItem = menuView[newIndex ];
                  }

                  if (childDataItem.ParentId !== null) {
                    e.preventDefault();
                    return;
                  }

                }


                // ** GO to the oldIndex location
                for (childLoopIdx = oldIndex + 1; oldIndex < menuView.length - 1; childLoopIdx++) {
                  // ** Loop until the parentId doesn't match the children
                  childDataItem = menuView[childLoopIdx];

                  if (childIdxStart === undefined && childDataItem.ParentId === moveParentId) {
                    // * We have a child of the item being moved and we have NOT yet set the childStart Index
                    childIdxStart = childLoopIdx;     // SET The childLoopIdx
                  } else if (childDataItem.ParentId !== moveParentId) {
                    // ** Parent Id no longer matches.. So break from loop
                    break;
                  }

                }
                if (childIdxStart !== undefined) {
                  // * started the child List.
                  // * REcord the end, which would be the last childLoopIdx - 1
                  childIdxEnd = childLoopIdx - 1;
                }

                // ** We now have the view list of children
                if (oldIndex < newIndex) {
                  /* ** DOWN MENU ** */

                  // * In reverse order these will be placed starting at the newIndex, then decrement
                  for ( childLoopIdx = childIdxEnd; childLoopIdx >= childIdxStart; childLoopIdx--) {
                    // Move these items to the newIndex
                    childDataItem = menuView[childLoopIdx];
                    alterIdx = newIndex - (childIdxEnd - childLoopIdx);

                    childDataItem.GridOrder = alterIdx;
                    childDataItem.dirty = true;

                  }
                  // Set the moved parent item
                  dataItem.GridOrder = newIndex - (childIdxEnd - childIdxStart) - 1;

                  // ** Now I need to cleanup ANY items between dataItem.GridOrder and oldIndex

                  var lastMoveChild = oldIndex + (childIdxEnd - childIdxStart + 1);
                  for (childLoopIdx = newIndex; childLoopIdx > lastMoveChild; childLoopIdx--) {
                    childDataItem = menuView[childLoopIdx];
                    alterIdx = childLoopIdx - (childIdxEnd - childIdxStart);
                    // ** + 1 to account for the zero based array
                    childDataItem.GridOrder = childDataItem.GridOrder - (newIndex - dataItem.GridOrder + 1);
                    childDataItem.dirty = true;
                  }



                } else {
                  /* ** UP MENU ** */
                  // ** The item is being moved up the menu
                  for (childLoopIdx = childIdxStart; childLoopIdx <= childIdxEnd; childLoopIdx++) {
                    childDataItem = menuView[childLoopIdx];
                    alterIdx = newIndex + (childLoopIdx - childIdxStart) + 1;

                    childDataItem.GridOrder = alterIdx;
                    childDataItem.dirty = true;
                  }
                  // The main item moves to the index specified (no alterations)
                  dataItem.GridOrder = newIndex;


                  var alterListEnd = oldIndex + (childIdxEnd - childIdxStart) + 1;
                  alterListEnd = (alterListEnd > menuView.length - 1 ? menuView.length - 1: alterListEnd);
                  alterListEnd = oldIndex;
                  // ** Clean up ordering from the end of the newly moved children to the end of the view
                  for (childLoopIdx = newIndex; childLoopIdx < alterListEnd; childLoopIdx++) {
                    // ** We have wo different calculations
                    childDataItem = menuView[childLoopIdx];
                      // * From the newIndex to start of oldIndex  + children
                      // Move these up the list to fill the vacuum
                    alterIdx = (childIdxEnd - childIdxStart) + 2;
                    childDataItem.GridOrder = childDataItem.GridOrder + alterIdx;
                    childDataItem.dirty = true;
                      // * From oldIndex to the end of the loop is a v

                      // * From the End of the freshly moved Items, before the start of the oldIndex
                        // ** These simply move the amount
                      // * And those

                  }



                }

              } else if (dataItem.ParentId === null && dataItem.MenuItemType === 'S') {
                /* ** MOVE A MENU LINK ** */

                /**
                 *   **** MOVE VALIDATION ****
                 *   CAN MENU LINK MOVE HERE?
                 */
                /* ** Next Item Must Be Parent ** */
                /* ** May not move to the last item in the list ** */
                if (newIndex === (menuView.length - 1)) {
                  e.preventDefault();
                  return;
                } else {
                  // * get the next item in the list
                  if (oldIndex < newIndex) {
                    // * *moving down menu
                    childDataItem = menuView[newIndex + 1];
                  } else {
                    // * move up menu
                    childDataItem = menuView[newIndex ];
                  }

                  if (childDataItem.ParentId !== null) {
                    e.preventDefault();
                    return;
                  }

                }

                /* REORDER THE GRID */
                /* ** CONTINUE MOVING THE CHILD ** */
                dataItem.GridOrder = newIndex;
                dataItem.dirty = true;

                if (newIndex > oldIndex) {
                  // * Renumber the GridOrder
                  for (childLoopIdx = newIndex; childLoopIdx > oldIndex; childLoopIdx--) {
                    childDataItem = menuView[childLoopIdx];
                    childDataItem.GridOrder = childDataItem.GridOrder - 1;
                    childDataItem.dirty = true;
                  }
                } else {
                  // * Renumber the GridOrder
                  for (childLoopIdx = newIndex; childLoopIdx < oldIndex; childLoopIdx++) {
                    childDataItem = menuView[childLoopIdx];
                    childDataItem.GridOrder = childDataItem.GridOrder + 1;
                    childDataItem.dirty = true;
                  }

                }

              } else {
                /* ** MOVE A CHILD ** */
                /* ** It may only move where the next item is a child ** */
                var groupParentId;
                if (newIndex === (menuView.length - 1)) {
                  e.preventDefault();
                  return;
                } else {
                  // * get the next item in the list
                  if (oldIndex < newIndex) {
                    // * *moving down menu
                    childDataItem = menuView[newIndex + 1];
                  } else {
                    // * move up menu
                    childDataItem = menuView[newIndex ];
                  }

                  if (childDataItem.ParentId === null) {
                    e.preventDefault();
                    return;
                  } else {
                    // This should be the desired group
                    groupParentId = childDataItem.ParentId;
                  }

                }

                /* ** CONTINUE MOVING THE CHILD ** */
                dataItem.GridOrder = newIndex;
                dataItem.ParentId = groupParentId;
                dataItem.dirty = true;

                if (newIndex > oldIndex) {
                  // * Renumber the GridOrder
                  for (childLoopIdx = newIndex; childLoopIdx > oldIndex; childLoopIdx--) {
                    childDataItem = menuView[childLoopIdx];
                    childDataItem.GridOrder = childDataItem.GridOrder - 1;
                    childDataItem.dirty = true;
                  }
                } else {
                  // * Renumber the GridOrder
                  for (childLoopIdx = newIndex; childLoopIdx < oldIndex; childLoopIdx++) {
                    childDataItem = menuView[childLoopIdx];
                    childDataItem.GridOrder = childDataItem.GridOrder + 1;
                    childDataItem.dirty = true;
                  }

                }


              }

              menuItemGrid.dataSource.sort({field:"GridOrder", dir: "asc"});

              menuItemGrid.refresh();

              RenumberDisplayOrder();
              menuItemGrid.refresh();

            } catch (err) {
              // * *Something went wrong cancel the move
              e.preventDefault();
              kendo.alert(err, 'Unable to complete request');
            }
          }

        });

        /* ***************************
       * ****  KENDO.OBSERVABLE ****
         *************************** */
        editMenuItem = kendo.observable({

          localdsIcons: dsIcons,
          localdataSettingsLang: dataSettingsLang,
          localdsFeatureList: dsFeatureList,
          localdsScriptList: dsScriptList,
          sourceMenu: dsFeatureMenu,

          sourceItem: null,
          data: null,

          updateBtnText: null,
          checkMenuGroupItem: false,

          setSelectedItem: function(newSelectedItem) {
            // ** Create a clone of the data row and use this for the changes
            var cloneItem = JSON.parse(JSON.stringify(newSelectedItem));

            this.set('sourceMenu', dsFeatureMenu);

            this.set('sourceItem', newSelectedItem);
            this.set('data', cloneItem);
            /* Refresh Globals */
            this.set('localdataSettingsLang', dataSettingsLang);

            // * *Set attributes based on the selected Record
            this.set('isUpdate', (newSelectedItem.MenuItemId > 0));
            this.set('hasChanges', false);
            this._UpdateBtnText();

            this.setShowIcon();

            if ($('#menu-platforms').val() == 'D' || $('#menu-platforms').val() == 'M') {
              $('#lnkDelete').hide();
            } else {
              $('#lnkDelete').show();
            }

            // enable message checkbox if new window is checked
            if (newSelectedItem.details_target === 1) {
              $('#detailsExtMsg').removeAttr("disabled");
            } else {
              $('#detailsExtMsg').attr("disabled", true);
            }
          },

          _UpdateBtnText: function () {
            retHtml = '<span class="fa fa-check"></span>&nbsp;Update';

            this.set('updateBtnText', retHtml);
          },
          change: function() {
            this.set('hasChanges', true);
            this._UpdateBtnText();

            if (this.hasChanges) {

            }
          },
          changeIcon: function() {

            this.setShowIcon();
            this.change();
          },
          hasChanges: false,
          isUpdate: false,
          isNew: function() {
            return !this.isUpdate;
          },

          /* ** METHODS ** */
          ShowLang: function(langCodes) {

            switch (langCodes) {
              case "en_US":
                return true;
              case "es_US":
                return this.localdataSettingsLang.es_US;
              case "pl_US":
                return this.localdataSettingsLang.pl_US;
              default:
                return false;
            }
          },

          setShowIcon: function() {
            $('#showIcon').removeClass();

            $('#showIcon').addClass('fa');
            $('#showIcon').addClass('fa-' + this.data.details_fa_icon);
            $('#showIcon').addClass('fa-2x');

          },
          /* ** EVENTS ** */

          MenuType: function() {
            var showSection = (this.data.MenuItemType === 'S');
            if (showSection) {
              $('#detailsUrlSetup').show();
            } else {
              $('#detailsUrlSetup').hide();
            }
            this.change();

          },

          CloseMe() {
            // ** This will close the currently opened window

            // REVERT Form Status back to main FORM
            $.homecuValidator.setup({formStatusField: 'formStatus'});

            windowTemplate.close();
          },
          itemSave: function(e) {
            e.preventDefault();

            var errors = [];
            var itemIdx,
                addIdx;

            if (!this.hasChanges) {
              //windowTemplate.close();
              this.CloseMe();
              return;
            }
            /* CUSTOM VALIDATION
              errors[errors.length] = 'new error';
            */

            // VALIDATE FORM ELEMENTS
            if ($.homecuValidator.homecuValidate) {

              // SHOW ANY ERRORS
              if (errors.length > 0) {

                // ERROR FOUND FOR BAD TRANSACTIONS
                $.homecuValidator.homecuResetMessage = $.homecuValidator.homecuValidate;
                $.homecuValidator.displayMessage(errors, $.homecuValidator.settings.statusError);
                $.homecuValidator.homecuResetMessage = true;
                $.homecuValidator.homecuValidate = false;
              } else {



                // NO ERROR, SAVE TO DATASOURCE
                this.sourceItem.details_platform_dsk = this.data.details_platform_dsk;
                this.sourceItem.details_platform_mbl = this.data.details_platform_mbl;
                this.sourceItem.details_platform_app = this.data.details_platform_app;

                this.sourceItem.details_collapse_group = this.data.details_collapse_group;

                // Move values from local to datasource
                this.sourceItem.details_display_en_US = this.data.details_display_en_US;
                if (this.data.details_display_es_US) {
                  this.sourceItem.details_display_es_US = this.data.details_display_es_US;
                }
                if (this.data.details_display_pl_US) {
                  this.sourceItem.details_display_pl_US = this.data.details_display_pl_US;
                }
                this.sourceItem.FeatureCode = this.data.FeatureCode;
                this.sourceItem.details_target = (this.data.details_target ? 1 : 0);
                this.sourceItem.details_message = (this.data.details_message ? 1 : 0);
                // Where to grab the screenname??
                // **
                this.sourceItem.details_href = this.data.details_href;

                this.sourceItem.details_hrefUrlQuery = (this.data.details_hrefUrlQuery ? 1 : 0);
                this.sourceItem.details_hrefExtraParam = this.data.details_hrefExtraParam;
                this.sourceItem.details_fa_icon = this.data.details_fa_icon;

                this.sourceItem.details_memacct_filter = this.data.details_memacct_filter;

                this.sourceItem.dirty = true;
                ShowActionButton();

                menuItemGrid.refresh();

                this.CloseMe();
              }
            }
          },
          itemCancel: function(e) {
            e.preventDefault();

            if (this.hasChanges) {
              // Need to as the user if they


              var cancelMsg = "Changes have been made to the menu item.</br>Do you wish to discard your changes?";
              actionDialog = $("<div id='confirmDialog'></div>")
                .appendTo("body")
                .kendoDialog({
                  content: cancelMsg,
                  title: "Discard Changes?",
                  close: function(e) {
                    window_stack.pop();
                  },
                  actions: [{
                    text: "No",
                    action: function(e) {
                      // ** Close the current dialog
                    }
                  }, {
                    text: "Yes",
                    primary: true,
                    action: function(e) {
                      /* ** DISCARD CHANGES ** */
                      /* ** Perform a grid refresh, but I have not changed the row yet, it's all in the clone right now ** */
                      // * *Need to
                      menuItemGrid.refresh();

                      // windowTemplate.close();
                      editMenuItem.CloseMe();
                    }
                  }]
                }).data("kendoDialog");


              window_stack.push(function(e) {
                actionDialog.close(e);
              });

            } else {
              // ** NO changes.. Close window
              // windowTemplate.close();
              this.CloseMe();
            }

          },
          itemDelete: function(e) {
            e.preventDefault();

            var deleteMsg;
            if (this.data.MenuItemType === 'H') {
              deleteMsg = "Deleting this menu group will also delete all links in the group.<br/>Are you sure you wish to continue?";
            } else {
              deleteMsg = "Deleting this menu item can not be undone.<br/>Are you sure you wish to continue?";
            }




            actionDialog = $("<div id='confirmDialog'></div>")
              .appendTo("body")
              .kendoDialog({
                content: deleteMsg,
                title: "Delete Menu Option?",
                open: function() {
                },
                close: function(e) {
                  window_stack.pop();
                },
                actions: [{
                  text: "No",
                  action: function(e) {
                    /* ** NO ACTION NEEDED ** */

                  }
                }, {
                  text: "Yes",
                  primary: true,
                  action: function(e) {
                    /* ** DELETE RECORD ** */

                    var childLoopIdx,
                      childId = editMenuItem.data.GridOrder,
                      childItemCount=0,
                      removeParentId = editMenuItem.data.MenuItemId,
                      childDataItem;

                    /* ** DELETE MENU ITEM / GROUP ** */
                    if (editMenuItem.data.MenuItemType === 'H') {
                      /* DELETE PARENT AND CHILDREN */

                      //for (childLoopIdx = childId + 1; childLoopIdx < dsFeatureMenu.view().length; childLoopIdx++) {
                      for (childLoopIdx = dsFeatureMenu.view().length - 1; childLoopIdx >= childId; childLoopIdx--) {
                        childDataItem = dsFeatureMenu.view()[childLoopIdx];
                        if (childDataItem.ParentId === removeParentId  || childDataItem.MenuItemId === removeParentId) {
                          // ** Remove if parent Id matches
                          dsFeatureMenu.remove(childDataItem);
                          childItemCount++;
                        }
                      }

                    } else {
                      /* DELETE THIS ROW ONLY */
                      childItemCount = 1;

                      dsFeatureMenu.remove(editMenuItem.sourceItem);

                    }

                    for (childLoopIdx = childId; childLoopIdx < dsFeatureMenu.view().length; childLoopIdx++) {
                      childDataItem = dsFeatureMenu.view()[childLoopIdx];
                      childDataItem.GridOrder = childDataItem.GridOrder - childItemCount;
                      childDataItem.DisplayOrder = (childDataItem.DisplayOrder === null ? childDataItem.DisplayOrder : childDataItem.DisplayOrder - childItemCount);
                      childDataItem.dirty = true;
                    }


                    menuItemGrid.refresh();

                    // windowTemplate.close();
                    editMenuItem.CloseMe();

                    // REVERT Form Status back to main FORM
                    $.homecuValidator.setup({formStatusField: 'formStatus'});


                  }
                }]
              }).data('kendoDialog');
              window_stack.push(function(e) {
                actionDialog.close(e);
              });

          },
          showEditForm: function() {
            OpenEditWindow();
          }
        });


        $("#menu-platforms").kendoDropDownList({
          dataSource: dsPlatforms,
          dataTextField: 'display',
          dataValueField: 'code',
          change: function(e) {
            // * Modify the filter for the grid
            var curValue = this.value();
            switch (curValue) {
              case "D":
                dsFeatureMenu.filter({field: 'details_platform_dsk', operator: 'eq', value: true});
                $('#local-menu-readonly').show();
                break;
              case "M":
                dsFeatureMenu.filter({field: 'details_platform_mbl', operator: 'eq', value: true});
                $('#local-menu-readonly').show();
                break;
              case "A":
                dsFeatureMenu.filter({field: 'details_platform_app', operator: 'eq', value: true});
                $('#local-menu-readonly').show();
                break;
              default:
                dsFeatureMenu.filter({});
                $('#local-menu-readonly').hide();
            }
          }
        });

        $('#x-featureList').kendoDropDownList({
          dataSource: dsFeatureList,
          dataTextField: 'description',
          dataValueField: 'featurecode',
          optionLabel: 'Select Related Feature...'
        });
        $('#x-scriptList').kendoComboBox({
          dataSource: dsScriptList,
          dataTextField: 'screenname',
          dataValueField: 'screenname',
          template: '<span class="k-state-default">#: data.description #</span>',
        });


        $('#menu-grid').on('click', 'tbody>tr td.local-add-menu-item .local-add-link', function() {
          var newUid;
          newUid = AddNewMenuItem(0, null, null);

          if (newUid !== undefined) {
            ShowEditDialog(newUid);
          }
        });
        $('#menu-grid').on('click', 'tbody>tr td.local-add-menu-item .local-add-group', function() {
          var newUid;

          newUid = AddNewMenuItem(2, null, null);

          if (newUid !== undefined) {
            ShowEditDialog(newUid);
          }
        });

        $('#menu-grid').on('click', 'tbody>tr td.local-add-item', function() {
          var dataUid = $(this).parent().data('uid'),
              dataItem = dsFeatureMenu.getByUid(dataUid),
              newUid;

          newUid = AddNewMenuItem(1, dataItem.GridOrder, dataItem.ParentId);


          if (newUid !== undefined) {
            ShowEditDialog(newUid);
          }

        });
        $('#menu-grid').on('dblclick', 'tbody>tr.local-tr-grab td:nth-child(1n+2)', function(e) {


          e.preventDefault();
          var dataUid = $(this).parent().data('uid');

          ShowEditDialog(dataUid);
        });



        editTemplate = kendo.template($('#edit-detail-row').html());

        windowTemplate = $('#windowTemplate').kendoWindow({
          title: 'Edit Menu',
          modal: true,
          visible: false,
          resizable: false,
          width: 400,
          actions: [],
          close: function() {
            // * pop the top,
            window_stack.pop();
          }
        }).data('kendoWindow');



        /* *** READ SETTINGS *** */
        dsSettings.fetch(function() {
          /* CASCADED LOADING OF DATA SOURCES */

          dsFeatureMenu.dataLoading = true;
          /* *** READ MENU DATASOURCE *** */
          dsFeatureMenu.fetch(function () {
            if (CheckDirtyFlag()) {
              ShowActionButton();
            }
            dsFeatureMenu.dataLoading = false;
          });
        });

        $.homecuValidator.setup({formStatusField: 'formStatus'});


        // enable message if Open In New Window is checked
        $('#detailsNewWin').change(function() {
          if (this.checked) {
            $('#detailsExtMsg').removeAttr("disabled");
          } else {
            $('#detailsExtMsg').attr("disabled", true);
            $('#detailsExtMsg').prop("checked", false);
            $('#detailsExtMsg').trigger("change");
          }
        });


      }); /* document.ready */

      /* Handling of user clicking on overlay, which should close active window */
      $(document).on("click", ".k-overlay", function (e) {
        if(window_stack.length > 0) {
          // ** Return anon func of last item, but keep intact -- dialog close should pop()
          fN = window_stack[window_stack.length - 1];
          var ret = fN(e);
        }
      });


      function ShowEditDialog(dataUid) {
        // Using the uid passed in, load the edit window

        var dataItem = dsFeatureMenu.getByUid(dataUid);

        editMenuItem.setSelectedItem(dataItem);
        OpenEditWindow();

      }


      /**
       *
       * @param menuType      - Is this a Group Menu or Child Item
       * @param GridOrder     - What view index should this replace? (not needed for Group Menu item)
       * @param menuParentId  - What is the ParentId to assign (not needed for Group Menu item)
       */
      function AddNewMenuItem(menuType, GridOrder, menuParentId) {
        // ** This will add a new row to the datasource
          // It will also pop-up the editor window
        var newGridOrder,
            newDisplayOrder,
            newItemType,
            newIcon,
            newDefaultRow,
            addOnly=false,
            newUid;
        if (menuType === 0) {
          // This is a new item to an existing MENU GROUP
          //
          newItemType = 'S'; // Default to stand-alone, user can select Group in options
          // ** Added to the end of the list
          newGridOrder = dsFeatureMenu.view().length - 1;

          // * Need the Last Display Order value in the view..
          newDisplayOrder = FetchLastDisplayOrder() + 1;
          newIcon = 'anchor';
        } else if (menuType === 2) {
          // This is a new item to an existing MENU GROUP
          //
          newItemType = 'H'; // Default to stand-alone, user can select Group in options
          // ** Added to the end of the list
          newGridOrder = dsFeatureMenu.view().length - 1;

          // * Need the Last Display Order value in the view..
          newDisplayOrder = FetchLastDisplayOrder() + 1;
          newIcon = 'sitemap';


        } else if (menuType === 3) {
          // ** Add Item option for the group
          addOnly = true;

          newGridOrder = GridOrder;

        } else {
          //  This is a new menu item added to the end of the list
          newItemType = 'D';

          newGridOrder = GridOrder;

          newDisplayOrder = dsFeatureMenu.view()[GridOrder-1].DisplayOrder + 1;
          newIcon = '';
        }


        if (menuType === 3) {
          newDefaultRow = {GridOrder : newGridOrder, DisplayOrder: null, MenuItemId : -9999, ParentId : menuParentId};
        } else {
          var defaultDisplay;
          switch (newItemType) {
            case 'H':
              defaultDisplay = 'New Menu Group';
              break;
            case 'S':
              defaultDisplay = 'New Menu Item';
              break;
            default:
              defaultDisplay = 'New Child Item';
          }
          newDefaultRow = {GridOrder : newGridOrder,
                            MenuItemId : dsFeatureMenu.options.newItemId--,
                            ParentId : menuParentId,
                            Cu : '<?php echo $importValues['cu']; ?>',
                            DisplayOrder : newDisplayOrder,
                            FeatureCode : '',
                            MenuItemType : newItemType,
                            details_platform_dsk: true,
                            details_platform_mbl: true,
                            details_platform_app: false,
                            details_collapse_group: false,
                            MenuItemPlatform : ["M","D"],
                            details_display_en_US : defaultDisplay,
                            details_display_es_US : '',
                            details_display_pl_US : '',
                            details_fa_icon: newIcon,
                            details_href : '',
                            details_hrefUrlQuery : 0,
                            details_target : 0,
                            details_message : 0,
                            details_hrefExtraParam: ''
                          };
        }


        // ** I need to reorder all the GridOrder Columns
        var childLoopIdx,
            childDataItem;
        for (childLoopIdx = newGridOrder; childLoopIdx < dsFeatureMenu.view().length; childLoopIdx++) {
          childDataItem = dsFeatureMenu.view()[childLoopIdx];
          childDataItem.GridOrder = childDataItem.GridOrder + 1;
          childDataItem.DisplayOrder = (childDataItem.DisplayOrder === null ? childDataItem.DisplayOrder : childDataItem.DisplayOrder + 1);
          childDataItem.dirty = true;
        }

        // Grid is now ready for new row.
        menuItemGrid.dataSource.add(newDefaultRow).set('dirty', true);

        // * last item is the uid
        if (menuItemGrid.dataSource.data()[menuItemGrid.dataSource.data().length - 1].uid) {
          newUid = menuItemGrid.dataSource.data()[menuItemGrid.dataSource.data().length - 1].uid;
        }
        // ** Set the dirty flag

        // ** Add child Item for Parent Group
        if (menuType === 2) {
          AddNewMenuItem(3, newGridOrder + 1, newDefaultRow.MenuItemId);
        }

        if (!addOnly) {

          menuItemGrid.refresh();
        }

        return newUid;
      }

      function FetchLastDisplayOrder() {
        var retLast = 0;
        for (var idx = dsFeatureMenu.view().length -1; idx >= 0; idx--) {
          if (dsFeatureMenu.view()[idx].DisplayOrder !== null) {
            // * FOund a value -- return it
            return dsFeatureMenu.view()[idx].DisplayOrder;
          }
        }

        return retLast;
      }

      function DisplayUrlDetails(showSection) {
        if (showSection) {
          $('#detailsUrlSetup').show();
        } else {
          $('#detailsUrlSetup').hide();
        }
      }


      function OpenEditWindow() {

        $.homecuValidator.settings.formStatusField = "formStatus";
        $.homecuValidator.hideMessage();
        $.homecuValidator.setup({formValidate: "form-edit-template",
                                 validateOnClick: 'btnUpdate',
                                 formErrorTitle: "Fix the following item(s):",
                                 formStatusField: "editErrors",
                                 homecuCustomRules: {
            memfilter: function(input) {
              if (!$(input).is("[name='acctFilter']"))
                return true;

              var value= $(input).val().trim();
              if (value == "")
                return true; <?php // Blank is a valid option. ?>

              if (!value.match(/^\S*$/)) <?php // Allowing any name separated by commas. No spaces. ?>
                return false;

              return true;
            }
        }});

        kendo.bind($('#windowTemplate'), editMenuItem);

        windowTemplate.center().open();

        window_stack.push(function(e) {
          editMenuItem.itemCancel(e);
        });
      }
      function GetFeatureDesc(pFeatureCode) {
        // ** Lookup the value from the dataSettingsFeature
        var retFeatureDesc = pFeatureCode;

        $.each(dataSettingsFeatures, function(idx, record) {
          if (record.featurecode === pFeatureCode) {
            retFeatureDesc = record.description;
            return false;
          }
        });

        return retFeatureDesc;
      }
      function SetLangOptions() {

        $.each(dataSettingsLang, function(key, value) {

          if ($('#flag_link_' + key)) {
            $('#flag_link_' + key).show();
          }
        });
      }
      function FilterLanguage(pLangCode) {
        // **
        // ** Remove class from other options
        $.each($('.local-table-flags .flag_icons'), function() {
          $(this).removeClass('active');
        });
        // *set active flag for curren item
        $('.flag_icons_' + pLangCode).addClass('active');

        displayLangCode = pLangCode;

        menuItemGrid.refresh();
      }

      function SaveMenu() {
        /* **** SAVE MENU **** */
        dsFeatureMenu.dataLoading = true;
        dsFeatureMenu.sync();
      }

      function RenumberDisplayOrder() {

        var lastDisplayOrder = 0;
        for (var childLoopIdx = 0; childLoopIdx < dsFeatureMenu.view().length; childLoopIdx++) {
          childDataItem = dsFeatureMenu.view()[childLoopIdx];

          if (childDataItem.MenuItemId !== -9999) {
            lastDisplayOrder++;   // Increment for each viewable option
            if (childDataItem.DisplayOrder !== lastDisplayOrder) {
              // ** Different -- set it now
              childDataItem.DisplayOrder = lastDisplayOrder;
              childDataItem.dirty = true;
            }
          }
        }
      }

      function ShowWaitWindow(pMsg) {
        // * pMsg - Not used at moment.  ONLY Spinning icon will be seen, no text
        if (!submitWaitWindow) {
          $('#localSubmitWait').kendoWindow({
              title: false,
              resizable: false,
              modal: true,
              draggable: false,
              actions: [],
              height:55,
              minHeight:55,
              width:54,
              minWidth:54
          });
          submitWaitWindow = $("#localSubmitWait").data('kendoWindow');

        }
        submitWaitWindow.center().open();
      }
      function CloseWaitWindow() {
        if (submitWaitWindow) {
          submitWaitWindow.close();
        }
      }
      function CancelMenuChanges() {
        // ** Do we cancel all the changes to the menu??
        var cancelMsg = "Changes have been made to the menu layout.</br>Do you wish to discard your changes?";
        actionDialog = $("<div id='confirmDialog'></div>")
          .appendTo("body")
          .kendoDialog({
            content: cancelMsg,
            title: "Discard Changes?",
            close: function(e) {
              window_stack.pop();
            },
            actions: [{
              text: "No",
              action: function(e) {
                // ** Close the current dialog
              }
            }, {
              text: "Yes",
              primary: true,
              action: function(e) {
                /* ** DISCARD CHANGES ** */
                dsFeatureMenu.cancelChanges();
                // * *Need to
                menuItemGrid.refresh();
                HideActionButton();
              }
            }]
          }).data('kendoDialog');
          window_stack.push(function(e) {
            actionDialog.close(e);
          });

      }
      function CheckDirtyFlag() {
        var dirtFound = false;
        // ** If MenuItemId < 0, then this record is dirty
        for (var childLoopIdx = 0; childLoopIdx < dsFeatureMenu.view().length; childLoopIdx++) {
          childDataItem = dsFeatureMenu.view()[childLoopIdx];

          if (childDataItem.MenuItemId < 0 && childDataItem.MenuItemId !== -9999) {
              childDataItem.dirty = true;
              dirtFound = true;
          }
        }
        // ** Did this function find dirty data?
        return dirtFound;
      }
      function UpdateRecordId(pIdList) {

        if (pIdList instanceof Object) {

          // ** This function will update EACH Data Item from the data source
          for (var childLoopIdx = 0; childLoopIdx < dsFeatureMenu.view().length; childLoopIdx++) {
            childDataItem = dsFeatureMenu.view()[childLoopIdx];

            if (pIdList[childDataItem.MenuItemId]) {
              // ** Found -- set to new value
              childDataItem.MenuItemId = pIdList[childDataItem.MenuItemId];
            }
            if (pIdList[childDataItem.ParentId]) {
              // ** Found -- set to new value
              childDataItem.ParentId = pIdList[childDataItem.ParentId];
            }
            childDataItem.dirty = false;
          }


        }

      }
      function ClearErrorMsgs() {
        var $dispMsgField = $('#local-error');

        $('#local-error-text').html('');

        $dispMsgField.hide();
      }
      function ShowActionButton() {
        menuDirty = true;
        $('.local-menu-action').addClass('local-show');
      }
      function HideActionButton() {
        menuDirty = false;
        $('.local-menu-action').removeClass('local-show');
      }
      function ShowErrorMsgs(messages) {
        // This should accept if pMessage is a simple string
          // OR it is an array
        var $dispMsgField = $('#local-error');
        var objP = $('<p>Please Fix the following issue(s):<br/></p>');
        var objUl = $('<ul></ul>');

        if (typeof(messages) === 'string') {
          // ** Single Instance of String
          if (messages !== '') {
            var objLi = $('<li></li>');
            objLi.append(messages);
            objUl.append(objLi);
          }
        } else if (messages instanceof Object) {
          // ** Object
          $.each(messages, function(index, value) {

            if (value !== '') {
              var objLi = $('<li></li>');
              objLi.append(value);
              objUl.append(objLi);
            }

          });
        } else if (messages instanceof Array) {
          // ** Array of messages
          $.each(messages, function(index, value) {
            if (value !== '') {
              var objLi = $('<li></li>');
              objLi.append(value);
              objUl.append(objLi);
            }
          });
        }

        $('#local-error-text').append(objP);
        $('#local-error-text').append(objUl);

        if (objUl.children().length > 0) {
          $dispMsgField.show();
        }
      }

      // When the menu has been changed, we tend to forget to hit the save
      // button before leaving the page. Warn the user if the menu has changes
      // to save.
      window.onbeforeunload = function(e) {

        if (menuDirty) {
          return "The menu has not been saved. Are you sure you want to leave the page?";
        }
      }

    </script>
    <script id="header-treelist" type="text/x-kendo-template">
      <input id="menu-platforms" />
      <span id="local-menu-readonly"><span class="fa fa-ban">&nbsp;&nbsp;Menu Locked</span></span>
      <div class="local-table-flags">
        <a id="flag_link_en_US" style="display:none;" href="javascript:FilterLanguage('en_US');" title="Display English Text"><div class="flag_icons flag_icons_en_US active"></div></a>
        <a id="flag_link_es_US" style="display:none;" href="javascript:FilterLanguage('es_US');" title="Display Spanish Text"><div class="flag_icons flag_icons_es_US"></div></a>
        <a id="flag_link_pl_US" style="display:none;" href="javascript:FilterLanguage('pl_US');" title="Display Polish Text"><div class="flag_icons flag_icons_pl_US"></div></a>
      </div>
    </script>
    <script id="href-template" type="text/x-kendo-template">
      <span class="k-state-default">#: data.description #</span>
    </script>
    <script id="menu-row" type="text/x-kendo-template">
      <tr class="# if (MenuItemId !== -9999) { # local-tr-grab # } #" data-local-parentid="#: data.ParentId #" data-uid="#: uid #">
        # if (data.MenuItemId) { #
          # if (MenuItemId === -9999) { #
            <td class="local-td-col-1"><!--#: data.GridOrder # : #: data.DisplayOrder #--></td>
            # if (ParentId === null) { #
              <td role="gridcell" colspan="5" class="local-add-td-row local-add-menu-item" data-local-parentid="root"><span class="local-add-group"><i class="fa fa-plus"></i>&nbsp;New Menu Group</span>&nbsp;&nbsp;<span class="local-add-link"><i class="fa fa-plus"></i>&nbsp;New Menu Link</span></td>
            # } else { #
              <td role="gridcell" colspan="5" class="local-add-td-row local-add-item" data-local-parentid="#: data.ParentId #"><span class="local-no-icon"></span><i class="fa fa-plus"></i>&nbsp;New Child Item</td>
            # } #
          # } else { #
            <td class='local-td-col-1 local-td-grab'><!-- #: data.GridOrder # : #: data.DisplayOrder #--><i class="fa fa-ellipsis-v"></i></td>
            <td class='local-td-col-1 local-td-grab'><a href="javascript:ShowEditDialog('#= data.uid #')"><i class="fa fa-pencil-square-o"></i></a></td>
            #
              /* hard coded for each language code -- not as dynamic as could be */
              var displayValue = '';
              switch (displayLangCode) {
                case 'es_US':
                  if (data.details_display_es_US) {
                    displayValue = data.details_display_es_US;
                  }
                  break;
                case 'pl_US':
                  if (data.details_display_pl_US) {
                    displayValue = data.details_display_pl_US;
                  }
                  break;
                default:

              }

              if (displayValue === '') {
                displayValue = data.details_display_en_US;
              }
            #
            # if (data.details_fa_icon) { #
              <td role="gridcell" class="local-menu-root"><i class="fa fa-#: data.details_fa_icon # fa-fw"></i>&nbsp;#: displayValue #</td>
            # } else { #
              <td role="gridcell"><span class="local-no-icon">&nbsp;#: displayValue #</span></td>
            # } #
              <td role="gridcell">#: GetFeatureDesc(data.FeatureCode) #</td>
            #
            var lDetailLink = '';

            if (data.MenuItemType !== 'H') {

              if (data.details_target) {

                lDetailLink = (data.details_target === 1 ? '<span class="fa fa-external-link"></span>&nbsp;' : '') + lDetailLink;
              }
              if (data.details_href) {
                lDetailLink += data.details_href;
              }
              var paramSep = '?';
              if (data.details_hrefUrlQuery) {
                lDetailLink += (data.details_hrefUrlQuery === 1 ? "?cu=<?php echo $importValues['cu']; ?>" : "");
                paramSep = '&';
              }
              if (data.details_hrefExtraParam) {
                lDetailLink += (data.details_hrefExtraParam !== '' ? paramSep + data.details_hrefExtraParam : '');
              }
            }
            #
            <td colspan="2" role="gridcell">#= lDetailLink #</td>
          # } #
        # } else { #
          <td colspan=6>No records</td>
        # } #

      </tr>
    </script>
    <script type="text/x-kendo-template" id="cboIcon-template">
      <span class="k-state-default"><i class="fa fa-#: data.icon_name # fa-fw"></i>&nbsp;#: data.icon_name #</span>
    </script>
    <div id='edit-detail-row'></div>
    <div id="windowTemplate" style="display: none;" class="hcu-template" x-type="text/x-kendo-template">
      <div id='editErrors' style="display: none"></div>
      <form id="form-edit-template" name="form-edit-template">

          <div id="local-detail-list" class=" ">
            <div data-bind="visible: data.MenuItemType === 'H'">
              <div class="h4">Menu Group</div>
            </div>
            <div data-bind="visible: data.MenuItemType === 'D'">
              <div class="h4">Menu Group Link</div>
            </div>
            <div data-bind="visible: data.MenuItemType === 'S'">
              <div class="h4">Menu Link</div>
            </div>

            <!-- Properties Well -->
            <div class="form-horizontal well well-sm">
              <div class="">
                <div class="h4">View On <span data-role="tooltip" data-position="top" data-auto-hide="true" class="local-tooltip" title="Select the platforms that will show this menu item."><i class="fa fa-question-circle-o"></i></span></div>
                <div class="form-group hcu-form-group-spacer">
                  <div class="local-indent">
                    <label class="checkbox-inline">
                      <input type="checkbox" id="platformDsk" name="platformDsk" value="1" data-bind="checked: data.details_platform_dsk, events: {change: change}"> Desktop
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" id="platformMbl" name="platformMbl" value="1" data-bind="checked: data.details_platform_mbl, events: {change: change}"> Mobile Web
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" id="platformApp" name="platformApp" value="1" data-bind="checked: data.details_platform_app, events: {change: change}"> App
                    </label>
                  </div>
                </div>  <!-- form-group checkboxes -->

                <div class="h4">Display</div>
                <div data-bind="visible: data.MenuItemType !== 'D'">
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="scriptList">Menu Icon <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Select the icon name from the list, or enter the font-awesome icon name."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id='cboIcon'
                               name='cboIcon'
                               data-role='combobox'
                               data-template="cboIcon-template"
                               data-text-field="icon_name"
                               data-value-field="icon_name"
                               data-placeholder="Select Icon..."
                               data-bind="
                                 source: localdsIcons,
                                 value: data.details_fa_icon,
                                 events: {change: changeIcon}
                               "
                               />
                        <span id='showIcon' class="fa fw" ></span>
                      </div>
                    </div>
                  </div>  <!-- ICON -->
                </div>
                <div data-bind="visible: data.MenuItemType === 'H'">
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="checkbox-inline">
                        <input type="checkbox" id="platformCollapseGroup" name="platformCollapseGroup" value="1" data-bind="checked: data.details_collapse_group, events: {change: change}">
                        Collapse Group?
                        <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="By default the menu group will be expanded on the banking side.  Select this option to collapse the group instead."><i class="fa fa-question-circle-o"></i></span>
                      </label>
                    </div>
                  </div>  <!-- collapse group checkbox -->
                </div>
                <div data-bind="visible: ShowLang('en_US')">
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="en_US">English <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Enter the text to display for the English language."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="en_US" name="en_US" data-bind="value: data.details_display_en_US, events: {change: change}" data-placeholder="English Display Value" type="text" class="k-textbox k-autocomplete hcu-all-100" required validationMessage="Enter English Display"  autocomplete="off"/>
                      </div>
                    </div>
                  </div>  <!-- Language Entry -->
                </div>
                <div id='lang_es_US' style-x="display:none;" data-bind="visible: ShowLang('es_US')">
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="es_US">Spanish <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Enter the text to display for the Spanish language."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="es_US" name="es_US" data-bind="value: data.details_display_es_US, events: {change: change}" data-placeholder="Spanish Display Value" type="text" class="k-textbox k-autocomplete hcu-all-100" validationMessage="Enter Spanish Display"  autocomplete="off"/>
                      </div>
                    </div>
                  </div>  <!-- Language Entry -->
                </div>
                <div id='lang_pl_US' style-x="display:none;" data-bind="visible: ShowLang('pl_US')">
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="pl_US">Polish <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Enter the text to display for the Polish language."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="pl_US" name="pl_US" data-bind="value: data.details_display_pl_US, events: {change: change}" data-placeholder="Polish Display Value" type="text" class="k-textbox k-autocomplete hcu-all-100" validationMessage="Enter Polish Display"  autocomplete="off"/>
                      </div>
                    </div>
                  </div>  <!-- Language Entry -->
                </div>
                <div id='detailsUrlSetup' data-bind="visible: data.MenuItemType !== 'H'">
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="h4" for="featureList">Applied Feature <span data-role="tooltip" data-position="top" data-auto-hide="true" class="local-tooltip" title="Select the feature in which the user must have permission to see this item.  Not selecting a feature will result in the menu item always being available."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="featureList"
                               name=""
                               class="hcu-all-100"
                               data-role="dropdownlist"
                               data-text-field="description"
                               data-value-field="featurecode"
                               data-option-label="Select Related Feature..."
                               data-bind="
                                 source: localdsFeatureList,
                                 value: data.FeatureCode,
                                 events: {change: change}
                               "
                               />
                      </div>
                    </div>
                  </div>  <!-- Applied Feature -->
                  <div class="h4">Details</div>
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="checkbox-inline">
                        <input type="checkbox" id="detailsNewWin" name="detailsNewWin" data-bind="checked: data.details_target, events: {change: change}" value="1">
                        Open in New Window <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Select this option to open a new window to display the content."><i class="fa fa-question-circle-o"></i></span>
                      </label>
                    </div>
                    <div class="local-indent">
                      <label class="checkbox-inline">
                        <input type="checkbox" id="detailsExtMsg" name="detailsExtMsg" data-bind="checked: data.details_message, events: {change: change}" value="1" >
                        Show External Message <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Select this option to display the external message when opening in a new window:
                        ''Please be aware that by clicking this link, your current Digital Banking session will end and you will be viewing content from another website. We encourage you to be aware of all privacy practices before giving information about yourself.''"><i class="fa fa-question-circle-o"></i></span>
                      </label>
                    </div>
                  </div>  <!-- form-group menu group -->
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="scriptList">URL Address <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Select the Home Banking script or enter a URL for this item."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="scriptList"
                               name="scriptList" class="hcu-all-100"
                               data-role="combobox"
                               data-text-field="screenname"
                               data-value-field="screenname"
                               data-template='href-template'
                               data-bind="
                                 source: localdsScriptList,
                                 value: data.details_href,
                                 events: {change: change}
                               "/>
                      </div>
                    </div>
                  </div>  <!-- Screen Address -->

                  <div class="form-group">
                    <div class="local-indent">
                      <label class="checkbox-inline">
                        <input type="checkbox" id="details_auth" name="details_auth" data-bind="checked: data.details_hrefUrlQuery, events: {change: change}" value="1">
                        Append CU Info <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Select this option to append the CU information on the URL address. ie cu=XYZ"><i class="fa fa-question-circle-o"></i></span>
                      </label>
                    </div>
                  </div>  <!-- form-group menu group -->
                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="addtlParam">Additional URL Query <span data-role="tooltip" data-position="top" data-auto-hide="true" class="" title="Add any extra parameters to the URL here. ie one=sampe&two=fields"><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="addtlParam" name="addtlParam" placeholder="key=value&key=value" type="text" class="k-textbox k-autocomplete hcu-all-100" data-bind="value: data.details_hrefExtraParam, events: {change: change}" validationMessage="Additional URL Query Parameters"  autocomplete="off"/>
                      </div>
                    </div>
                  </div>

                  <div class="form-group hcu-form-group-spacer">
                    <div class="local-indent">
                      <label class="col-xs-12" for="acctFilter">Username Filter <span data-role="tooltip" data-position="top" data-auto-hide="true"
                        title="App Menu Link Options.  Leave blank to allow for all, or enter a comma separated list of usernames (no spaces)."><i class="fa fa-question-circle-o"></i></span></label>
                      <div class="col-xs-12">
                        <input id="acctFilter" name="acctFilter" placeholder="name1,name2,etc." type="text" class="k-textbox k-autocomplete hcu-all-100"
                        data-bind="value: data.details_memacct_filter, events: {change: change}" validationMessage="Invalid Username filter"  autocomplete="off"/>
                      </div>
                    </div>

                  </div> <?php // form-group menu group ?>
                </div>
              </div>  <!-- form-inline -->
            </div>  <!-- well -->
          </div>

          <div class="hcu-edit-buttons k-state-default">
            <span class="hcu-icon-delete">
              <a id='lnkDelete' class="" href="##" data-bind="events: { click: itemDelete }" ><i class="fa fa-trash-o fa-lg"></i></a>
            </span>
            <a id='lnkCancel' class="" href="##" data-bind="events: { click: itemCancel }">Cancel</a>
            &nbsp;&nbsp;&nbsp;
            <a id="btnUpdate" class="k-button k-primary " href="" data-bind="html: updateBtnText, events: {click: itemSave }"></a>
          </div>


      </form>
    </div>

<?php

  } catch (ErrorException $e) {
    // ** All else fails
    switch ($e->getCode()) {
      case 900:
        header("Location: /hcuadm/hcu_noperm.prg");
        exit;
        break;
      case 901:
        $url = "/hcuadm/cuinfoedit.prg?user_name=" . filter_var($importValues['cu'], FILTER_UNSAFE_RAW);
        echo "<p>Exception encountered, code: {$e->getCode()}, message: {$e->getMessage()}
                (Did you <a href=\"$url\">fully run CU set?</a>)</p>";
        break;
      default:
        echo "<p>Unidentified exception encountered, message: {$e->getMessage()}</p>";
    }
  }