aProfileLst.prg

<?php
/**
 * @package aProfileLst.prg
 *
 * Purpose: Handle display and user interface for the Profile/Profile Feature, feature in Admin/Monitor. Send data via AJAX as JSON
 *  encoded data.
 *
 * Display  : Show list of profiles for the credit union along with a filtered list of limited features
 *  for those profiles.
 * Actions  : User interface actions available for creating/editting/deleting profiles and profile features
 *  - Add Profile     :   create new profile for use by the credit union
 *  - Edit Profile    :   edit existing profile descriptions
 *  - Delete Profile  :   delete a profile from use by the credit union
 *  - Add feature     :   create a feature limit for a selected profile
 *  - Edit feature    :   edit existing features in a selected profile
 *  - Delete feature  :   remove feature from an existing profile
 */
define("FEATURE_LIMIT_MAX_VALUE", "Set to No Limit");
define("FEATURE_LIMIT_MIN_VALUE", "Set to 0");
?>

<!-- HTML STYLING -->
<style type="text/css">
/* TOP/BOTTOM MARGIN */
.local-hcu-container-margin {
  margin: 15px 0;
}

.local-hcu-no-padding {
  padding: 0;
}

.local-hcu-full-width {
  width: 100%;
}

.local-hcu-half-width {
  width: 50%;
}

.local-hcu-quarter-width {
  width: 25%;
}

.local-hcu-hidden {
  display: none;
}

.local-hcu-max-width {
  max-width: 700px;
  margin: auto;
}

.local-hcu-nowrap {
  white-space: nowrap;
}

.local-hcu-nowrap br {
  display: none;
}

.k-grid-content {
  max-height: 350px;
}
</style>

<!-- GRID ROW TEMPLATE -->
<script type="text/x-kendo-template" id="templateGridRow">
  <tr class="k-master-row">
    # if (pId == 0) { #
    <td><span class="fa fa-plus" style="background-color: transparent;"></span></td>
    <td colspan="2">Add New Limit</td>
    # } else { #
    <td><input type="checkbox" class="feature-checkbox" id="chk_#=fCode#"></td>
    <td>
      <span class="local-hcu-nowrap">#= fDesc #</span>
    </td>
    <td>
      <span class="local-hcu-nowrap">
      # if (fType == "B" || fType == "D") { #
        # if (fApt >= FEATURE_LIMIT_MAX_AMOUNT || fApt == null) { #
        Amount per transaction: No Limit, <br>
        # } else { #
        Amount per transaction: #= kendo.toString(fApt, "c2") #, <br>
        # } #

        # if (fApa >= FEATURE_LIMIT_MAX_AMOUNT || fApa == null) { #
        Amount per account per day: No Limit, <br>
        # } else { #
        Amount per account per day: #= kendo.toString(fApa, "c2") #, <br>
        # } #

        # if (fApd >= FEATURE_LIMIT_MAX_AMOUNT || fApd == null) { #
        Amount per day: No Limit, <br>
        # } else { #
        Amount per day: #= kendo.toString(fApd, "c2") #, <br>
        # } #

        # if (fApm >= FEATURE_LIMIT_MAX_AMOUNT || fApm == null) { #
        Amount per month: No Limit, <br>
        # } else { #
        Amount per month: #= kendo.toString(fApm, "c2") #, <br>
        # } #
      # } #

      # if (fType == "B" || fType == "Q") { #
        # if (fCpa >= FEATURE_LIMIT_MAX_COUNT || fCpa == null) { #
        Count per account per day: No Limit, <br>
        # } else { #
        Count per account per day: #= kendo.toString(fCpa, "n0") #, <br>
        # } #

        # if (fCpd >= FEATURE_LIMIT_MAX_COUNT || fCpd == null) { #
        Count per day: No Limit, <br>
        # } else { #
        Count per day: #= kendo.toString(fCpd, "n0") #, <br>
        # } #

        # if (fCpm >= FEATURE_LIMIT_MAX_COUNT || fCpm == null) { #
        Count per month: No Limit, <br>
        # } else { #
        Count per month: #= kendo.toString(fCpm, "n0") #, <br>
        # } #
      # } #

      # if (fType == "A") { #
        Access Allowed<br>
      # } #

      # if (fType == "B" || fType == "D" ) { #
        # if (fCfm) { #
          Confirmation Required: Yes
        # } else { #
          Confirmation Required: No
        # } #
      # } #

      </span>
    </td>
    # } #
  </tr>
</script>

<!-- HTML CONTENT -->
<div class="container-fluid">

  <!-- CONTENT -->
  <div class="well well-sm col-sm-12 local-hcu-container-margin" id="profileView" style="max-width: 768px;">

    <div class="col-sm-12 local-hcu-no-padding">
      <h2>Profiles</h2>
    </div>

    <div class="col-sm-9 local-hcu-no-padding">

      <div class="col-sm-6 local-hcu-container-margin">
        <label>&nbsp;</label>

        <input class="local-hcu-full-width" id="inpProfileList" name="inpProfileList">
      </div>

      <div class="col-sm-6 local-hcu-container-margin">
        <label>Profile Code</label>
        <input class="local-hcu-full-width k-textbox" id="inpProfileCode" name="inpProfileCode" maxlength="20"
          data-pcode="#inpProfileCode"
          data-pcode-msg="Profile Code already exists"
          data-required-msg="Profile Code is required"
          required>
      </div>

      <div class="col-sm-12">
        <label>Profile Description</label>
        <input class="local-hcu-full-width k-textbox" id="inpProfileDesc" name="inpProfileDesc" maxlength="255"
          data-required-msg="Profile Description is required"
          required>
      </div>
    </div>

    <div class="col-sm-3 local-hcu-no-padding">

      <div class="col-sm-12 local-hcu-container-margin">
        <label>&nbsp;</label>
        <button class="local-hcu-full-width k-button k-primary" id="btnProfileSave">
          <span class="fa fa-check"></span>
          <span>&nbsp;Save</span>
        </button>
      </div>

      <div class="col-sm-12">
        <label>&nbsp;</label>
        <button class="local-hcu-full-width k-button" id="btnProfileDelete">
          <span class="fa fa-times"></span>
          <span>&nbsp;Delete</span>
        </button>
      </div>
    </div>
  </div>

  <div class="well well-sm col-sm-12 local-hcu-container-margin" style="max-width: 768px;">

    <!-- HEADER -->
    <div class="col-sm-12 local-hcu-no-padding">
      <h3>Profile Features</h3>
    </div>

    <div class="col-sm-3 local-hcu-container-margin">
      <button class="local-hcu-full-width k-button" id="btnLimitDelete">
        <span class="fa fa-times"></span>
        <span>&nbsp;Delete</span>
      </button>
    </div>

    <div class="col-sm-3 local-hcu-container-margin">
      <button class="local-hcu-full-width k-button" id="btnLimitExpand">
        <span class="fa fa-expand"></span>
        <span> &nbsp;Expand All</span>
      </button>
    </div>

    <div class="col-sm-12 local-hcu-container-margin">
      <div class="" id="grdProfileLimits"></div>
    </div>
  </div>
</div>

<div class="local-hcu-hidden" id="wndProfileLimit">

  <div class="">
    <input id="drpCodes" name="drpCodes" class="" style="min-width: 25%; width: auto;"
      data-role="dropdownlist"
      data-text-field="fDesc"
      data-value-field="fCode"
      data-bind="source: sourceFeatures,
        visible: showDrop,
        value: sourceLimit.eCode,
        events: { change: changeFeature }"
      >
  </div>

  <br data-bind="visible: showDrop">

  <div class="well well-sm" id="viewAmount" data-bind="visible: showAmount">

    <div class="col-sm-12 local-hcu-no-padding">
      <h3>Amount Limits Per</h3><br>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Transaction</i></label>
        <span class="k-invalid-msg" data-for="inpApt"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpApt" name="inpApt" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="c"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-bind="value: sourceLimit.eApt, events: { spin: spinLimit }">
      </div>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Account / Day</i></label>
        <span class="k-invalid-msg" data-for="inpApa"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpApa" name="inpApa" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="c"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-bind="value: sourceLimit.eApa, events: { spin: spinLimit }">
      </div>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Day</i></label>
        <span class="k-invalid-msg" data-for="inpApd"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpApd" name="inpApd" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="c"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-bind="value: sourceLimit.eApd, events: { spin: spinLimit }">
      </div>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Month</i></label>
        <span class="k-invalid-msg" data-for="inpApm"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpApm" name="inpApm" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="c"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>"
          data-bind="value: sourceLimit.eApm, events: { spin: spinLimit }">
      </div>
    </div>

    <div style="clear: both;">&nbsp;</div>
  </div>

  <br data-bind="visible: showAmount" id="viewAmountBr">

  <div class="well well-sm" id="viewCount" data-bind="visible: showCount">

    <div class="col-sm-12 local-hcu-no-padding">
      <h3>Count Limits Per</h3> <br>
    </div>

    <div class="col-sm-3">
      <div class=""> </div>
      <div class=""> </div>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Account / Day</i></label>
        <span class="k-invalid-msg" data-for="inpCpa"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpCpa" name="inpCpa" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="n0"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_COUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_COUNT; ?>"
          data-bind="value: sourceLimit.eCpa, events: { spin: spinLimit }">
      </div>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Day</i></label>
        <span class="k-invalid-msg" data-for="inpCpd"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpCpd" name="inpCpd" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="n0"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_COUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_COUNT; ?>"
          data-bind="value: sourceLimit.eCpd, events: { spin: spinLimit }">
      </div>
    </div>

    <div class="col-sm-3">
      <div class="">
        <label><i>Month</i></label>
        <span class="k-invalid-msg" data-for="inpCpm"></span>
      </div>
      <div class="">
        <input class="local-hcu-full-width" id="inpCpm" name="inpCpm" maxlength=""
          data-role="numerictextbox"
          data-up-arrow-text="<?php echo FEATURE_LIMIT_MAX_VALUE; ?>"
          data-down-arrow-text="<?php echo FEATURE_LIMIT_MIN_VALUE; ?>"
          data-format="n0"
          data-min="0"
          data-max="<?php echo FEATURE_LIMIT_MAX_COUNT; ?>"
          data-step="<?php echo FEATURE_LIMIT_MAX_COUNT; ?>"
          data-bind="value: sourceLimit.eCpm, events: { spin: spinLimit }">
      </div>
    </div>

    <div style="clear: both;">&nbsp;</div>
  </div>

  <br data-bind="visible: showCount" id="viewCountBr">

  <div class="well well-sm" id="viewConfirm" data-bind="visible: showConfirm">
    <div class="row hcu-secondary">
      <div class="col-sm-12 vsgSecondary">
        <span>Checking this box will require confirmation from another group user to process a transaction.</span>
      </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
      <div class="col-sm-3">
        <label data-bind="events: { click: changeLabel }">Confirmation Required</label>
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="" id="inpCfm" name="inpCfm" style="margin-top: -2px;"
          data-bind="checked: sourceLimit.eCfm,
          events: { change: changeCheck }">
        <span data-bind="events: { click: changeLabel }"> Yes</span>
      </div>
    </div>
  </div>

  <br data-bind="visible: showAccess" id="viewAccessBr">

  <div class="well well-sm" id="viewAccess" data-bind="visible: showAccess">
    <div class="col-sm-12 local-hcu-no-padding">
      <div class="col-sm-3 local-hcu-no-padding">
        <label data-bind="">Access Allowed</label>
      </div>
      <div class="col-sm-9 local-hcu-no-padding">
        <input type="checkbox" class="" id="inpCfm" name="inpCfm" style="margin-top: -2px;"
          checked="true" disabled="true">
          &nbsp;
        <span><i>To remove access to this feature, delete it from the profile.</i></span>
      </div>
    </div>
  </div>

  <br>

  <div class="col-sm-4"></div>
  <div class="col-sm-4">
    <button id="btnLimitSave" class="local-hcu-full-width k-button k-primary"
      data-bind="events: { click: saveLimit }">
      <span class="fa fa-check"></span>
      <span>Save</span>
    </button>
  </div>
  <div class="col-sm-4"></div>

  <div style="clear: both;"></div>
</div>

<div id="dialogDiscardProfile"></div>
<div id="dialogDeleteProfile"></div>
<div id="dialogDeleteLimit"></div>
<div id="dialogWarningLimit"></div>
<div id="dialogDiscardLimit"></div>

<!-- JAVASCRIPT CONTENT -->
<script type="text/javascript">
<?php getShowWaitFunctions(); ?>

var FEATURE_LIMIT_MAX_AMOUNT = <?php echo FEATURE_LIMIT_MAX_AMOUNT; ?>;
var FEATURE_LIMIT_MAX_COUNT = <?php echo FEATURE_LIMIT_MAX_COUNT; ?>;
var FEATURE_LIMIT_MIN_VALUE = "<?php echo FEATURE_LIMIT_MIN_VALUE; ?>";
var FEATURE_LIMIT_MAX_VALUE = "<?php echo FEATURE_LIMIT_MAX_VALUE; ?>";

var activeElement = null;
var prInfoBar = null;
var prDataSource = null;

var prDataProfiles = null;
var prDataProfileSelect = null;
var prDataProfileNext = null;
var prViewProfileSelect = false;
var prViewProfileDropdown = null;
var prViewProfileSave = null;
var prViewProfileDelete = null;
var prViewProfileCode = null;
var prViewProfileDesc = null;
var prViewProfileValidator = null;

var prDataLimits = null;
var prDataLimitStack = null;
var prDataFeatures = null;
var prDataFeaturesFiltered = null;
var prViewLimitGrid = null;
var prViewLimitDelete = null;
var prViewLimitExpand = null;
var prViewLimitExpanded = false;
var prViewLimitWindow = null;
var prViewLimitWindowOpen = false;
var prObserveLimit = null;
var prObserveLimitValidator = null;
var prViewLimitAmount = null;
var prViewLimitCount = null;
var prViewLimitAmountBr = null;
var prViewLimitCountBr = null;
var prViewLimitConfirm = null;
var prViewLimitAccess = null;

var prDataWindowStack = null;
var prViewDialogDiscardProfile = null;
var prViewDialogDeleteProfile = null
var prViewDialogDeleteLimit = null;
var prViewDialogDiscardLimit = null;
var prViewDialogWarningLimit = null;

<?php
/*
 * StackInsertLimit: When a checkbox of a grid row is CHECKED, this function will add the
 *  corresponding limit to the stack ready for deleting.
 *
 * var id: the id of the limit to insert
 */
?>
function StackInsertLimit(id) {

  if (id == "chk_0") { return; }

  var limitCode = id.substring(4, id.length);
  var limitIndex = DataSourceFindLimit(limitCode, prDataProfileSelect.pId);
  var limit = prDataLimits[limitIndex];

  prDataLimitStack.push(limit);
}

<?php
/*
 * StackRemoveLimit: When a checkbox of a grid row is UN-CHECKED, this function will remove the
 *  corresponding limit from the stack ready for deleting.
 *
 * var id: the id of the limit to remove
 */
?>
function StackRemoveLimit(id) {

  var limitCode = id.substring(4, id.length);
  for (var i = 0; i < prDataLimitStack.length; i++) {

    var limit = prDataLimitStack[i];
    if (limit.fCode == limitCode) {

      prDataLimitStack.splice(i, 1);
      break;
    }
  }
}

<?php
/*
 * ValidateProfileCode: validation for profile_code,
 * This function will see if the new profile code already exists
 */
?>
function ValidateProfileCode(e) {

  var pass = true;
  var input = $(e);
  var value = input.val();
  value = value.trim();
  value = value.toUpperCase();

  for (var i = 0; i < prDataProfiles.length; i++) {

    var pCode = prDataProfiles[i].pCode;
    if (pCode == value) { pass = false; break; }
  }

  return pass;
}

function ValidateProfileRequired(e) {
  var pass = true;
  var input = $(e);
  var value = input.val();
  value = value.trim();

  if (value == "") { pass = false; }

  return pass;
}

<?php
/*
 * DataSourceFindFeature: find the feature in the feature datasource,
 *
 * var fCode: code to find
 */
?>
function DataSourceFindFeature(fCode) {

  var idx = -1;
  for (var i = 0; i < prDataFeatures.length; i++) {

    if (prDataFeatures[i].fCode == fCode) {
      idx = i;
    }
  }

  return idx;
}

<?php
/*
 * DataSourceFilterFeatures: filter the features for a new limit creation,
 *  only show features that are not used by the selected profile.
 */
?>
function DataSourceFilterFeatures() {

  prDataFeaturesFiltered = [];

  prDataFeaturesFiltered.push({
    fId: -1,
    fCode: "",
    fDesc: "Choose Feature",
    fType: "N",
    fEnabled: false
  });

  for (var i = 0; i < prDataFeatures.length; i++) {

    var lidx = DataSourceFindLimit(prDataFeatures[i].fCode, prDataProfileSelect.pId);
    if (lidx == -1) {

      prDataFeaturesFiltered.push(prDataFeatures[i]);
    }
  }

  <?php // Only features in the CU feature menu.  Cannot filter at the data level because limits are dependent on that data for the feature type. ?>
  prDataFeaturesFiltered = $.grep(prDataFeaturesFiltered, function(n, i) {
    return n.cuexists || n.fDesc == "Choose Feature";
  });
}

<?php
/*
 * DataSourceBuildFeatures: restructure the features datasource for use in javascript
 *
 * var data: source array of features from the database
 */
?>
function DataSourceBuildFeatures(data) {

  for (var i = 0; i < data.length; i++) {

    var newFeature = {
      fId: i,
      fCode: data[i].fcode.trim(),
      fDesc: data[i].fdesc.trim(),
      fType: data[i].ftype.trim(),
      fEnabled: data[i].fenabled == "t" ? true : false,
      cuexists: data[i].cuexists == "t" ? true : false
    };

    prDataFeatures.push(newFeature);
  }
}

<?php
/*
 * DataSourceBuildLimits: restructure the limits data source array for use in javascript functions
 *  and display.
 * The function adds duplicate fields inorder to easily tell if changes have been made.
 *
 * f = original values
 * e = edited value
 *
 * var data: source array of limit data from database
 */
?>
function DataSourceBuildLimits(data) {
  for (var i = 0; i < data.length; i++) {

    var newLimit = {
      pId: parseInt(data[i].pid),
      fCode: data[i].fcode.trim(),
      fDesc: data[i].fdesc.trim(),
      fApt: data[i].fapt == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapt),
      fApd: data[i].fapd == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapd),
      fApm: data[i].fapm == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapm),
      fApa: data[i].fapa == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapa),
      fCpd: data[i].fcpd == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(data[i].fcpd),
      fCpm: data[i].fcpm == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(data[i].fcpm),
      fCpa: data[i].fcpa == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(data[i].fcpa),
      fCfm: data[i].fcfm == "t" ? true : false,
      fType: data[i].ftype.trim(),
      fDirty: false,
      eCode: data[i].fcode.trim(),
      eDesc: data[i].fdesc.trim(),
      eApt: data[i].fapt == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapt),
      eApd: data[i].fapd == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapd),
      eApm: data[i].fapm == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapm),
      eApa: data[i].fapa == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(data[i].fapa),
      eCpd: data[i].fcpd == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(data[i].fcpd),
      eCpm: data[i].fcpm == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(data[i].fcpm),
      eCpa: data[i].fcpa == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(data[i].fcpa),
      eCfm: data[i].fcfm == "t" ? true : false
    };

    prDataLimits.push(newLimit);
  }

  prDataLimits.push({
    pId: 0,
    fCode: "",
    fDesc: "",
    fApt: FEATURE_LIMIT_MAX_AMOUNT,
    fApd: FEATURE_LIMIT_MAX_AMOUNT,
    fApm: FEATURE_LIMIT_MAX_AMOUNT,
    fApa: FEATURE_LIMIT_MAX_AMOUNT,
    fCpd: FEATURE_LIMIT_MAX_COUNT,
    fCpm: FEATURE_LIMIT_MAX_COUNT,
    fCpa: FEATURE_LIMIT_MAX_COUNT,
    fCfm: false,
    fDirty: false,
    fType: "",
    eCode: "",
    eDesc: "",
    eApt: FEATURE_LIMIT_MAX_AMOUNT,
    eApd: FEATURE_LIMIT_MAX_AMOUNT,
    eApm: FEATURE_LIMIT_MAX_AMOUNT,
    eApa: FEATURE_LIMIT_MAX_AMOUNT,
    eCpd: FEATURE_LIMIT_MAX_COUNT,
    eCpm: FEATURE_LIMIT_MAX_COUNT,
    eCpa: FEATURE_LIMIT_MAX_COUNT,
    eCfm: false
  });
}

<?php
/*
 * DataSourceFindLimit: find a specific limit in the limit datasource
 *
 * var fCode: find limit by this code, multipl codes may be found
 * var pId: find limit by the profile association to limit the result to sinlge entry
 */
?>
function DataSourceFindLimit(fCode, pId) {
  var idx = -1;
  for (var i = 0; i < prDataLimits.length; i++) {

    if (prDataLimits[i].fCode == fCode && prDataLimits[i].pId == pId) {
      idx = i;
      break;
    }
  }

  return idx;
}

<?php
/*
 * DataSourceInsertLimit: insert a new or edited limit into the limit datasource in alpha order
 *  New limits will be added without removing any others.
 *  Edited limits will be inserted by removing the old version and replaced with the edited version.
 *
 * var limit: limit to insert
 * var remove: determine if limit will be inserted without removing the current placeholder
 */
?>
function DataSourceInsertLimit(limit, remove) {
  var fidx = DataSourceFindFeature(limit.fcode);
  var feature = prDataFeatures[fidx];

  var updLimit = {
    pId: parseInt(limit.pid),
    fCode: limit.fcode.trim(),
    fDesc: feature.fDesc,
    fType: feature.fType,
    fApt: limit.fapt == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapt),
    fApd: limit.fapd == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapd),
    fApm: limit.fapm == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapm),
    fApa: limit.fapa == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapa),
    fCpd: limit.fcpd == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(limit.fcpd),
    fCpm: limit.fcpm == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(limit.fcpm),
    fCpa: limit.fcpa == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(limit.fcpa),
    fCfm: limit.fcfm == "t" ? true : false,
    fDirty: false,
    eCode: limit.fcode.trim(),
    eDesc: feature.fDesc,
    eApt: limit.fapt == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapt),
    eApd: limit.fapd == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapd),
    eApm: limit.fapm == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapm),
    eApa: limit.fapa == null ? FEATURE_LIMIT_MAX_AMOUNT : parseFloat(limit.fapa),
    eCpd: limit.fcpd == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(limit.fcpd),
    eCpm: limit.fcpm == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(limit.fcpm),
    eCpa: limit.fcpa == null ? FEATURE_LIMIT_MAX_COUNT : parseInt(limit.fcpa),
    eCfm: limit.fcfm == "t" ? true : false
  };

  var idx = -1;
  if (remove) {
    idx = DataSourceFindLimit(updLimit.fCode, updLimit.pId);
  } else {
    for (var i = 0; i < prDataLimits.length; i++) {
      if (limit.fCode < prDataLimits[i].fCode) {
        idx = i;
        break;
      }
    }
  }

  prDataLimits.splice(idx, remove, updLimit);
  prViewLimitGrid.dataSource.data(prDataLimits);

  if (prViewLimitExpanded) {
    prViewLimitExpanded = false;
    EventExpandLimit();
  }
}

<?php
/*
 * DataSourceRemoveLimit: remove limit from limit datasource.
 *  After Deleting a limit from a profile.
 *
 * var limits: list of limits which have been removed from the database.
 *  Each limit is searched for and remove from the limit datasource.
 */
?>
function DataSourceRemoveLimit(limits) {

  for (var i = 0; i < limits.length; i++) {

    var rmvLimit = {
      pId: limits[i].pid,
      fCode: limits[i].fcode
    };

    var idx = DataSourceFindLimit(rmvLimit.fCode, rmvLimit.pId);
    prDataLimits.splice(idx, 1);
    prViewLimitGrid.dataSource.data(prDataLimits);

  }

  if (prViewLimitExpanded) {
    prViewLimitExpanded = false;
    EventExpandLimit();
  }
}

<?php
/*
 * DataSourceBuildProfiles: restructure the profiles datasource array for use in javascript/display.
 *  Each profile has duplicate values for editing purposes. This helps with determining if there are changes.
 *
 * p = original values
 * e = edited values
 *
 * var data: data array containing original unstructured data
 */
?>
function DataSourceBuildProfiles(data) {
  for (var i = 0; i < data.length; i++) {

    var newProfile = {
      pId: parseInt(data[i].pid),
      pCode: data[i].pcode.trim(),
      pDesc: data[i].pdesc.trim(),
      pText: data[i].pdesc.trim(),
      pValue: parseInt(data[i].pid),
      eCode: data[i].pcode.trim(),
      eDesc: data[i].pdesc.trim(),
      pDirty: false,
    };

    prDataProfiles.push(newProfile);
  }

  prDataProfiles.push({
    pId: 0,
    pCode: "",
    pDesc: "",
    pText: "+ Add Profile",
    pValue: 0,
    eCode: "",
    eDesc: "",
    pDirty: false,
  });
}

<?php
/*
 * DataSourceFindProfile: find a specific profile in the profile datasource
 *
 * var pId: profile_id to find
 */
?>
function DataSourceFindProfile(pId) {
  var idx = -1;
  for (var i = 0; i < prDataProfiles.length; i++) {

    if (prDataProfiles[i].pId == pId) {
      idx = i;
      break;
    }
  }

  return idx;
}

<?php
/*
 * DataSourceRemoveProfile: remove profile from limit datasource.
 *  After Deleting a profile.
 *
 * var profile: profile which have been removed from the database.
 */
?>
function DataSourceRemoveProfile(profile) {
  var rmvProfile = {
    pId: parseInt(profile.pid)
  };

  var pidx = DataSourceFindProfile(rmvProfile.pId);

  prDataProfiles.splice(pidx, 1);
  prViewProfileDropdown.dataSource.data(prDataProfiles);
  prViewProfileDropdown.select(0);
  prViewProfileDropdown.trigger("select");
  prViewProfileDropdown.trigger("change");
}

<?php
/*
 * DataSourceInsertProfile: insert a new or edited profile into the profile datasource in alpha order
 *  New profiles will be added without removing any others.
 *  Edited profiles will be inserted by removing the old version and replaced with the edited version.
 *
 * var profile: profile to insert
 * var remove: determine if profile will be inserted without removing the current placeholder
 */
?>
function DataSourceInsertProfile(profile, remove) {
  var updProfile = {
    pId: parseInt(profile.pid),
    pCode: profile.pcode.trim(),
    pDesc: profile.pdesc.trim(),
    pText: profile.pdesc.trim(),
    pValue: parseInt(profile.pid),
    eCode: profile.pcode.trim(),
    eDesc: profile.pdesc.trim(),
    pDirty: false,
  };

  var pidx = -1;

  if (remove) {
    pidx = DataSourceFindProfile(updProfile.pId);
    prDataProfiles.splice(pidx, 1);
  } else {
    prDataProfiles[prDataProfiles.length-1].eCode = "";
    prDataProfiles[prDataProfiles.length-1].eDesc = "";
  }

  for (var i = 0; i < prDataProfiles.length; i++) {
    var comp = prDataProfiles[i].pDesc.localeCompare(updProfile.pDesc);
    if (comp == 1) {
      pidx = i >= 0 ? i : 0;
      break;
    }

    if (i == prDataProfiles.length-1) {
      pidx = i;
    }
  }

  prDataProfiles.splice(pidx, 0, updProfile);
  prViewProfileDropdown.dataSource.data(prDataProfiles);
  prViewProfileDropdown.select(pidx);
  prViewProfileDropdown.trigger("select");
  prViewProfileDropdown.trigger("change");
}

<?php
/*
 * ViewProfileEnable: used to disable or enable inputs fields in the profile section.
 *
 * var eView: html element to enable/disable
 * var eDisabled: boolean to set disabled or enabled
 */
?>
function ViewProfileEnable(eView, eDisabled) {
  eView.prop("disabled", eDisabled);

  if (eDisabled) { eView.addClass("k-state-disabled"); }
  else { eView.removeClass("k-state-disabled"); }
}

function ViewProfileNoLimit() {
  <?php // when the window opens we must show "No Limit" values in "amount" input fields. ?>
  if (prObserveLimit.showAmount) {
    $("#inpApt, #inpApd, #inpApm, #inpApa").each(function() {
      var input = $(this);
      var child = $(input.parent()[0].firstChild);
      var value = input.val();

      if (value >= FEATURE_LIMIT_MAX_AMOUNT || value == "") {
        child.val("No Limit");
      }
    });
  }

  <?php // when the window opens we must show "No Limit" values in "count" input fields. ?>
  if (prObserveLimit.showCount) {
    $("#inpCpd, #inpCpm, #inpCpa").each(function() {
      var input = $(this);
      var child = $(input.parent()[0].firstChild);
      var value = input.val();

      if (value >= FEATURE_LIMIT_MAX_COUNT || value == "") {
        child.val("No Limit");
      }
    });
  }
}

<?php
/*
 * ViewProfileFocus: used to set the focus of input fields in the profile section.
 *
 * var eView: html element to focus
 * var eDisabled: boolean to set focued or blured.
 */
?>
function ViewProfileFocus(eView, eFocus) {
  if (eFocus) { eView.focus(); }
  else { eView.blur(); }
}

<?php
/*
 * ActionConfirmDiscardLimit: dialog function to discard any changes made to a limit in the
 *  limit editor window.
 *
 * if any changes were detected this will reset the limit values and close both the dialog
 *  and the editor window.
 */
?>
function ActionConfirmDiscardLimit(e) {
  EventResetLimit();
  prViewDialogDiscardLimit.close();
  prViewLimitWindow.close();
}

<?php
/*
 * ActionConfirmDeleteLimit: dialog function to send a delete request to the server.
 *
 * the data is gathered in a comma separated list, each element is an item of this sort:
 *  "description:feature_code" to ensure the success message shows the descriptions instead
 *  of the codes.
 */
?>
function ActionConfirmDeleteLimit(e) {
  var codeString = "";
  for (var i = 0; i < prDataLimitStack.length; i++) {

    var fCode = prDataLimitStack[i].fCode;
    var fDesc = prDataLimitStack[i].fDesc;
    codeString += fDesc + ":" + fCode;

    if (i < prDataLimitStack.length -1) {
      codeString += ",";
    }
  }

  var limitRequest = {
    action: "limit_delete",
    pId: prDataProfileSelect.pId,
    fList: codeString
  }

  prDataSource.transport.options.read.type = "POST";
  prDataSource.read(limitRequest);
}

<?php
/*
 * ActionConfirmDeleteProfile: dialog function to send a delete request to the server.
 *  This functionwill delete a profile.
 */
?>
function ActionConfirmDeleteProfile(e) {
  var profileRequest = {
    action: "profile_delete",
    pId: prDataProfileSelect.pId,
    pCode: prDataProfileSelect.eCode,
    pDesc: prDataProfileSelect.eDesc
  };

  prDataSource.transport.options.read.type = "POST";
  prDataSource.read(profileRequest);
}

<?php
/*
 * ActionKeepProfileChanges: dialog function to save changes to a profile.
 *  This function will save the data and send a request to the server to save the profile changes.
 */
?>
function ActionKeepProfileChanges(e) {

}

<?php
/*
 * ActionDiscardProfileChanges: dialog function to discard changes to a profile.
 *
 * Upone changing a profile description and changing the profile via the dropdown list;
 *  this function will discard the changes.
 */
?>
function ActionDiscardProfileChanges(e) {

  if (prDataProfileSelect) {
    prDataProfileSelect.eCode = prDataProfileSelect.pCode;
    prDataProfileSelect.eDesc = prDataProfileSelect.pDesc;
    prDataProfileSelect.pDirty = false;
  }

  var idx = DataSourceFindProfile(prDataProfileNext.pId);
  prViewProfileDropdown.select(idx);
  prViewProfileDropdown.trigger("select");
  prViewProfileDropdown.trigger("change");

  // remove any validation classes
  $("#inpProfileCode").removeClass("k-invalid");
  $("#inpProfileCode").css("border", "1px solid #ceced2");
  $("#inpProfileDesc").removeClass("k-invalid");
  $("#inpProfileDesc").css("border", "1px solid #ceced2");

  // hide messages
  $.homecuValidator.hideMessage();
}

<?php
/*
 * EventCheckboxReset: this function is here to set checkbox values. when the user changes the profile,
 *  or changes a limit in the limit popup window, the feature will be changed causing the grid to call its
 *  DataBound function.
 *
 * There could be limits in the limit stack used for deleting limits, this is how we set any check boxes back
 *  to checked when they reset.
 *
 * var enable: value to set boxes to
 */
?>
function EventCheckboxReset(enable) {
  var count = 0;
  for (var i = 0; i < prDataLimitStack.length; i++) {

    var feature = prDataLimitStack[i].fCode;
    var box = $("input[id=chk_" + feature + "]");
    box.prop("checked", enable);

    count += 1;
  }

  prViewLimitDelete.prop("disabled", prDataLimitStack.length == 0);
  $("#chk_0").prop("checked", false);

  if (!enable) {
    prDataLimitStack = [];
  }
}

<?php
/*
 * EventCheckboxChange: change event for checkboxes in the limit grid.
 *
 * var e: checkbx source element'
 * var source: this is used to determine where the event came from.
 *
 * If the source came from a row click the value is set AFTER the event.
 * If the source came from the box itself, the value is set BEFORE the event fires. Thus
 *  we reset it previous then use the value.
 *
 * because of this we cannot just get the value and use it.
 */
?>
function EventCheckboxChange(e, source) {
  var box = $(e);
  var boxId = box.attr("id");
  var boxValue = box.prop("checked");

  if (source == "BOX") {
    boxValue = !boxValue;
  }

  if (boxValue) {
    $("input[id=chk_0]").prop("checked", false);
  }

  if (boxId == "chk_0") {

    $(".feature-checkbox").each(function() {

      if (!this.checked && !boxValue) {
        StackInsertLimit(this.id);
        this.checked = true;
      } else if (this.checked && boxValue) {
        StackRemoveLimit(this.id);
        this.checked = false;
      }

    });
  } else {

    if (boxValue) {
      StackRemoveLimit(boxId);
    } else {
      StackInsertLimit(boxId);
    }
  }

  box.prop("checked", !boxValue);

  if (prDataLimitStack.length > 0) {
    prViewLimitDelete.prop("disabled", false);
  } else {
    prViewLimitDelete.prop("disabled", true);
  }
}

<?php
/*
 * EventGridDataBound: DataBind event for thekendo grid.
 *
 * This function will set some css for the row hover as well as the event function for a checkbox change
 */
?>
function EventGridDataBound(e) {
  $("html .k-grid tr").hover(function() {
    $(this).css("cursor", "pointer");
  });

  $('input[id^=chk_]').off();
  $('input[id^=chk_]').css("cursor", "pointer");
  $('input[id^=chk_]').css("margin-top", "-2px");
  $('input[id^=chk_]').change(function(e) {
    EventCheckboxChange(e.target, "BOX");
  });

  EventCheckboxReset(true);

  if (prViewLimitExpanded) {
    prViewLimitExpanded = false;
    EventExpandLimit();
  }
}

<?php
/*
 * EventGridChange: Change event for the kendo grid.
 *
 * This function takes care of determining which grid cell was clicked. If the first cell is click,
 *  the checkboxchanged function will be fired. Any other cell will result in displaying the row data
 *  in the limit popup window.
 */
?>
function EventGridChange(e) {
  var cell = this.select();
  var cellIndex = cell.index();

  var dataIndex = cell.closest("tr").index(".k-master-row");
  var dataSource = this.dataSource;
  var dataItem = dataSource.view()[dataIndex];

  if (cellIndex == 0 && dataItem.pId > 0) {

    var box = cell.find("input[id^=\"chk_\"]")[0];
    EventCheckboxChange(box, "ROW");
  } else {
    EventOpenLimit(dataItem);
  }

  $(this.select()).removeClass('k-state-selected');
}

<?php
/*
 * EventChangeLimitFeature: DropDownList change event for the kendo dropdownlist in the limit window popup
 *
 * This function takes care of showing certain piece of the layout depening on the limit_type of the selected
 *  feature in the dropdown list.
 */
?>
function EventChangeLimitFeature(e) {
  var input = $(e.sender.element[0]);
  var value = input.val();
  var idx = DataSourceFindFeature(value);
  var feature = prDataFeatures[idx];

  if (feature != undefined) {

    var featureType = feature.fType;
    if (feature.fType == "B" || feature.fType == "D") {
      prViewLimitAmount.show();
      prViewLimitAmountBr.show();
      this.showAmount = true;

      prViewLimitConfirm.show();
      this.showConfirm = true;
    } else {
      prViewLimitAmount.hide();
      prViewLimitAmountBr.hide();
      this.showAmount = false;

      prViewLimitConfirm.hide();
      this.showConfirm = false;
    }

    if (feature.fType == "B" || feature.fType == "Q") {
      prViewLimitCount.show();
      prViewLimitCountBr.show();
      this.showCount = true;
    } else {
      prViewLimitCount.hide();
      prViewLimitCountBr.hide();
      this.showCount = false;
    }

    if (feature.fType == "A") {
      prViewLimitAccess.show();
      this.showAccess = true;
    } else {
      prViewLimitAccess.hide();
      this.showAccess = false;
    }

    this.sourceLimit.fDirty = true;
    ViewProfileEnable($("#btnLimitSave"), false);
  } else {
    prViewLimitConfirm.hide();
    this.showConfirm = false;

    prViewLimitCount.hide();
    prViewLimitCountBr.hide();
    this.showCount = false;

    prViewLimitAmount.hide();
    prViewLimitAmountBr.hide();
    this.showAmount = false;

    prViewLimitConfirm.hide();
    this.showConfirm = false;

    prViewLimitAccess.hide();
    this.showAccess = false;

    this.sourceLimit.fDirty = false;
    ViewProfileEnable($("#btnLimitSave"), true);
  }

  input.blur();
  input.removeClass("k-state-focused");

  ViewProfileNoLimit();
}

<?php
/*
 * EventResetLimit: this function is used to reset limit values after discarding changed values.
 */
?>
function EventResetLimit() {
  prObserveLimit.sourceLimit.eCode = prObserveLimit.sourceLimit.fCode;
  prObserveLimit.sourceLimit.eApt = prObserveLimit.sourceLimit.fApt;
  prObserveLimit.sourceLimit.eApd = prObserveLimit.sourceLimit.fApd;
  prObserveLimit.sourceLimit.eApm = prObserveLimit.sourceLimit.fApm;
  prObserveLimit.sourceLimit.eApa = prObserveLimit.sourceLimit.fApa;
  prObserveLimit.sourceLimit.eCpd = prObserveLimit.sourceLimit.fCpd;
  prObserveLimit.sourceLimit.eCpm = prObserveLimit.sourceLimit.fCpm;
  prObserveLimit.sourceLimit.eCpa = prObserveLimit.sourceLimit.fCpa;
  prObserveLimit.sourceLimit.eCfm = prObserveLimit.sourceLimit.fCfm;
  prObserveLimit.sourceLimit.fDirty = false;
}

<?php
/*
 * EventCheckDirty: event for input fields in the limit popup window
 *
 * All limits have duplicate fields, one for original value and one for edited value. If these
 *  differ from each other the limit is flagged dirty.
 */
?>
function EventCheckDirty() {
  var limit = prObserveLimit.sourceLimit;

  if (limit.eCode != limit.fCode) { limit.fDirty = true; }
  else if (limit.eApt != limit.fApt) { limit.fDirty = true; }
  else if (limit.eApa != limit.fApa) { limit.fDirty = true; }
  else if (limit.eApd != limit.fApd) { limit.fDirty = true; }
  else if (limit.eApm != limit.fApm) { limit.fDirty = true; }
  else if (limit.eCpa != limit.fCpa) { limit.fDirty = true; }
  else if (limit.eCpd != limit.fCpd) { limit.fDirty = true; }
  else if (limit.eCpm != limit.fCpm) { limit.fDirty = true; }
  else if (limit.eCfm != limit.fCfm) { limit.fDirty = true; }
  else { limit.fDirty = false; }

  ViewProfileEnable($("#btnLimitSave"), !limit.fDirty);
}

<?php
/*
 * EventBlurLimitCount: Blur event for "count" input fields in the limit popup window.
 *
 * If the value of the field is a maximum possible amount, the value will be viewed as "No Limit".
 */
?>
function EventBlurLimitCount(e) {
  var input = $(this);
  var child = $(input.parent()[0].firstChild);
  var value = input.val();
  var id = input.attr("id");
  var field = id.substring(3, id.length);

  if (prObserveLimit.showCount) {
    if (value >= FEATURE_LIMIT_MAX_COUNT || value == "" || value == null) {
      value = FEATURE_LIMIT_MAX_COUNT;
      child.val("No Limit");
    }

    switch (field) {
      case "Cpa":
        prObserveLimit.sourceLimit.eCpa = parseInt(value);
        break;
      case "Cpd":
        prObserveLimit.sourceLimit.eCpd = parseInt(value);
        break;
      case "Cpm":
        prObserveLimit.sourceLimit.eCpm = parseInt(value);
        break;
    }

    input.val(value);
    EventCheckDirty();
  }
}

<?php
/*
 * EventBlurLimitAmount: Blur event for "amount" input fields in the limit popup window.
 *
 * If the value of the field is a maximum possible amount, the value will be viewed as "No Limit".
 */
?>
function EventBlurLimitAmount(e) {
  var input = $(this);
  var child = $(input.parent()[0].firstChild);
  var value = input.val();
  var id = input.attr("id");
  var field = id.substring(3, id.length);

  if (prObserveLimit.showAmount) {
    if (value >= FEATURE_LIMIT_MAX_AMOUNT || value == "") {
      value = FEATURE_LIMIT_MAX_AMOUNT;
      child.val("No Limit");
    }

    switch (field) {
      case "Apt":
        prObserveLimit.sourceLimit.eApt = parseFloat(value);
        break;
      case "Apa":
        prObserveLimit.sourceLimit.eApa = parseFloat(value);
        break;
      case "Apd":
        prObserveLimit.sourceLimit.eApd = parseFloat(value);
        break;
      case "Apm":
        prObserveLimit.sourceLimit.eApm = parseFloat(value);
        break;
    }

    input.val(value);
    EventCheckDirty();
  }
}

<?php
/*
 * EventSpinLimit: Spin event for input fields in the limit popup window.
 *
 * This will call the blur events for the input fields so the user doesn't have to click away to
 *  view "No Limit".
 */
?>
function EventSpinLimit(e) {
  var input = $(e.sender.element[0]);
  input.blur();
}

<?php
/*
 * EventOpenLimit: upon clicking a grid row, the limit data is passed into this function to setup
 *  an observable for the ability to edit the limit in the limit editor popup window.
 */
?>
function EventOpenLimit(limit) {
  if (prDataProfileSelect.pId == 0) {
    prViewDialogWarningLimit.open();
    return;
  }

  DataSourceFilterFeatures();
  var idx = DataSourceFindFeature(limit.fCode);
  var feature = prDataFeatures[idx];

  prObserveLimit.set("sourceLimit", limit);
  prObserveLimit.set("sourceFeatures", prDataFeaturesFiltered);

  if (limit.pId == 0) {
    prObserveLimit.set("showAmount", false);
    prObserveLimit.set("showCount", false);
    prObserveLimit.set("showConfirm", false);
    prObserveLimit.set("showDrop", true);
    prObserveLimit.set("showAccess", false);
  } else {
    prObserveLimit.set("showAmount", feature.fType == "B" || feature.fType == "D");
    prObserveLimit.set("showCount", feature.fType == "B" || feature.fType == "Q");
    prObserveLimit.set("showConfirm", feature.fType == "B" || feature.fType == "D");
    prObserveLimit.set("showAccess", feature.fType == "A");
    prObserveLimit.set("showDrop", false);
  }

  kendo.bind("#wndProfileLimit", prObserveLimit);

  var title = limit.pId == 0 ? "Add Feature Limit" : "Edit " + limit.fDesc;
  prViewLimitWindow.title(title);
  prViewLimitWindow.center();
  prViewLimitWindow.open();

  ViewProfileEnable($("#wndProfileLimit #btnLimitSave"), true);
  ViewProfileNoLimit();
}

<?php
/*
 * EventSaveLimit: send request to server for saving changes to a limit
 */
?>
function EventSaveLimit(e) {
  var limit = prObserveLimit.sourceLimit;
  var idx = DataSourceFindFeature(limit.eCode);
  var feature = prDataFeatures[idx];

  if (limit != undefined && limit.fDirty) {

    var limitRequest = {
      action: limit.pId == 0 ? "limit_create" : "limit_update",
      pId: prDataProfileSelect.pId,
      fType: feature.fType,
      fCode: limit.eCode,
      fApt: (feature.fType == "B" || feature.fType == "D") ? limit.eApt : null,
      fApa: (feature.fType == "B" || feature.fType == "D") ? limit.eApa : null,
      fApd: (feature.fType == "B" || feature.fType == "D") ? limit.eApd : null,
      fApm: (feature.fType == "B" || feature.fType == "D") ? limit.eApm : null,
      fCpa: (feature.fType == "B" || feature.fType == "Q") ? limit.eCpa : null,
      fCpd: (feature.fType == "B" || feature.fType == "Q") ? limit.eCpd : null,
      fCpm: (feature.fType == "B" || feature.fType == "Q") ? limit.eCpm : null,
      fCfm: limit.eCfm
    };

    prDataSource.transport.options.read.type = "POST";
    prDataSource.read(limitRequest);
  }

  EventResetLimit();
  prViewLimitWindow.close();
}

<?php
/*
 * EventDeleteLimit: this function opens a dialog window displaying the selected limits to be deleted.
 *  ActionConfirmDeleteLimit: this is the function that will carry out the server request.
 */
?>
function EventDeleteLimit(e) {

  var codeString = "";
  codeString += "<p>You are about to delete the following limits:</p>";
  codeString += "<ul style=\"margin-left: 25px;\">";
  for (var i = 0; i < prDataLimitStack.length; i++) {
    var fDesc = prDataLimitStack[i].fDesc;
    codeString += "<li>" + fDesc + "</li>";
  }
  codeString += "</ul>";
  codeString += "<p>Do you wish to continue?</p>";

  if (codeString != "") {
    prViewDialogDeleteLimit.content(codeString);
    prViewDialogDeleteLimit.open();
  }
}

<?php
/*
 * EventExpandLimit: Click event for the expand button. This function will alter the css of  each
 *  grid row to make visible the partial or full limit descriptions.
 */
?>
function EventExpandLimit(e) {
  var btnText = "";
  if (prViewLimitExpanded) {
    btnText = "<span class=\"fa fa-expand\"></span> <span>Expand All</span>";
    $("html .k-grid td span").addClass("local-hcu-nowrap");
    prViewLimitExpanded = false;
  } else {
    btnText = "<span class=\"fa fa-expand\"></span> <span>Collapse All</span>";
    $("html .k-grid td span").removeClass("local-hcu-nowrap");
    prViewLimitExpanded = true;
  }

  prViewLimitExpand.html(btnText);
}

<?php
/**
 * EventCheckLabel: when a checkbox has a label next to it, make sure the checkbox changes with the click of the label.
 */
?>
function EventCheckLabel(e) {
  var chk = $("#inpCfm").prop("checked");
  $("#inpCfm").prop("checked", !chk);

  var dirt = prObserveLimit.sourceLimit.fDirty;
  prObserveLimit.sourceLimit.eCfm = !chk;

  EventCheckDirty();
}

<?php
/*
 * EventSaveProfile: Click event for save profile button. This function takes care ofsending the
 *  request to the server.
 */
?>
function EventSaveProfile(e) {
  if ($.homecuValidator.validate()) {
    var profileRequest = {
      action: prDataProfileSelect.pId == 0 ? "profile_create" : "profile_update",
      pId: prDataProfileSelect.pId,
      pCode: prDataProfileSelect.eCode,
      pDesc: prDataProfileSelect.eDesc
    };

    prDataProfileSelect.pDirty = false;

    prDataSource.transport.options.read.type = "POST";
    prDataSource.read(profileRequest);
  }
}

<?php
/*
 * EventDeleteProfile: Click event for delete profile button. This function opens the confirmation
 *  dialog for deleting a profile.
 */
?>
function EventDeleteProfile(e) {
  prViewDialogDeleteProfile.open();
}

<?php
/*
 * EventChangeProfileInput: Input event for description and code input fields for profiles.
 *
 * This function will enable/disable the save button depending if any changes have been made.
 * Also it will keep an eye on the input in the profile code input field, only uppercase dashes and underscore
 *  characters are allowed.
 */
?>
function EventChangeProfileInput(e) {
  var target = $(e.target);
  var id = target.attr("id");
  var value = target.val();
  value = value.trim();

  if (id == "inpProfileCode") {
    value = value.toUpperCase();
    <?php // do not allow anything but alpha characters, underscore and dashes in the profile code. ?>
    <?php // any other characters found are removed. ?>
    if (RegExp(/[@#\\!$%^&*()+|~=`{}\[\]:";'<>?,.\/]/).test(value)) {
      value = value.slice(0, -1);
    }
    prDataProfileSelect.eCode = value;
  } else {
    prDataProfileSelect.eDesc = value;
  }

  if (prDataProfileSelect.pCode.trim() != prDataProfileSelect.eCode.trim() ||
    prDataProfileSelect.pDesc.trim() != prDataProfileSelect.eDesc.trim()) {
    ViewProfileEnable(prViewProfileSave, false);
    prDataProfileSelect.pDirty = true;
  } else {
    ViewProfileEnable(prViewProfileSave, true);
    prDataProfileSelect.pDirty = false;
  }
}

<?php
/*
 * EventProfileSelect: on profile sleection, this function will stop the dropdown change event
 *  if the profile has been changed. A dialog will appear asking for confirmation of discarding the
 *  profile changes.
 *
 * The prViewprofileSelect is a flag variable. It is used to determine how many times the select
 *  event has been called on the dropdown list. We need this because on change it is called once,
 *  on blur it is called again. We want to avoid the second call or the data will be changed when the
 *  confirmation dialog is open.
 */
?>
function EventProfileSelect(e) {

  if (prDataProfileSelect && prDataProfileSelect.pDirty) {
    e.preventDefault();

    if (prViewProfileSelect) {
      prViewProfileSelect = false;
    } else {
      prViewProfileSelect = true;
      prDataProfileNext = e.dataItem;
      prViewDialogDiscardProfile.open();
    }

  } else {
    var value = e.dataItem == undefined ? parseInt(this.value()) : e.dataItem.pId;
    var idx = DataSourceFindProfile(value);
    var idx = (idx < 0) ? 0 : idx;

    prDataProfileSelect = prDataProfiles[idx];
    prViewProfileCode.val(prDataProfileSelect.eCode);
    prViewProfileDesc.val(prDataProfileSelect.eDesc);
  }
}

<?php
/*
 * EventProfileChange: This function takes care of enabling the profile code/description and
 *  save/delete buttons depening on which profile is selected. This function will also filter the
 *  feature limit grid below depending on which profile is selected.
 */
?>
function EventProfileChange(e) {
  switch (prDataProfileSelect.pId) {
    case -1:
      ViewProfileEnable(prViewProfileCode, true);
      ViewProfileEnable(prViewProfileDesc, true);
      ViewProfileEnable(prViewProfileDelete, true);
      break;
    case 0:
      ViewProfileEnable(prViewProfileCode, false);
      ViewProfileEnable(prViewProfileDesc, false);
      ViewProfileEnable(prViewProfileDelete, true);
      ViewProfileFocus(prViewProfileCode, true);
      break;
    default:
      ViewProfileEnable(prViewProfileCode, true);
      ViewProfileEnable(prViewProfileDesc, false);
      ViewProfileEnable(prViewProfileDelete, false);
      ViewProfileFocus(prViewProfileDesc, true);
      break;
  }

  ViewProfileEnable(prViewProfileSave, true);

  btnText = "<span class=\"fa fa-expand\"></span> <span>Expand All</span>";
  prViewLimitExpand.html(btnText);
  prViewLimitExpanded = false;

  EventCheckboxReset(false);

  var gridFilter = {
    logic: "or",
    filters: [
      { field: "pId", operator: "eq", value: prDataProfileSelect.pId },
      { field: "pId", operator: "eq", value: 0 }
    ]
  };
  prViewLimitGrid.dataSource.filter(gridFilter);
}

function EventOpenDialog(e) {
  prDataWindowStack.push(this);
}

function EventCloseDialog(e) {
  prDataWindowStack.pop();
}

<?php
/*
 * InitDataActions: initialize all data actions like button click, input blur/focus and other events.
 */
?>
function InitDataActions() {
  prViewProfileCode.on("input", EventChangeProfileInput);
  prViewProfileDesc.on("input", EventChangeProfileInput);
  prViewProfileSave.on("click", EventSaveProfile);
  prViewProfileDelete.on("click", EventDeleteProfile);

  prViewLimitDelete.on("click", EventDeleteLimit);
  prViewLimitDelete.prop("disabled", true);
  prViewLimitExpand.on("click", EventExpandLimit);

  $("#inpApt, #inpApa, #inpApd, #inpApm").on("blur", EventBlurLimitAmount);
  $("#inpCpa, #inpCpd, #inpCpm").on("blur", EventBlurLimitCount);

  <?php
  /*
   * kendo dropdownlists have a bug:
   *  when the user opens the list, starts scrolling up or down, the list will
   *  close when it reach the end or beginning of the list.
   *
   * this mouse event bind prevents this from happening. It wrks for the
   *  profile dropdown and the feature dropdown in the popup window.
   *
   * for future reference; this is the source of the fix on Telerik.
   *  http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/prevent-close-on-scroll.
   */
  ?>
  $(document).bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;
    var element = null;
    var id = $(e.target).parent().attr("id");

    switch (id) {
      case "inpProfileList_listbox":
        element = prViewProfileDropdown.ul.parent();
        break;
      case "drpCodes_listbox":
        element = $("#drpCodes").data("kendoDropDownList").ul.parent();
        break;
    }

    if (element != null || element != undefined) {
      if (!$(activeElement).closest(".k-popup").length) {
        return;
      }

      if (e.type == 'mousewheel') {
          scrollTo = (e.originalEvent.wheelDelta * -1);
      }
      else if (e.type == 'DOMMouseScroll') {
          scrollTo = 40 * e.originalEvent.detail;
      }

      if (scrollTo) {
          e.preventDefault();
          element.scrollTop(scrollTo + element.scrollTop());
      }
    }
  });

  $(document).on('mouseover', function(e) {
        activeElement = e.target;
  });
}

<?php
/*
 * InitDataViews: initialize all data views, set the variables holding the reference to the visible page elements.
 */
?>
function InitDataViews() {
  prViewProfileCode = $("#inpProfileCode");
  prViewProfileCode.css("text-transform", "uppercase");
  prViewProfileDesc = $("#inpProfileDesc");
  prViewProfileSave = $("#btnProfileSave");
  prViewProfileDelete = $("#btnProfileDelete");
  prViewProfileDropdown = $("#inpProfileList").kendoDropDownList({
    dataValueField: "pValue",
    dataTextField: "pText",
    dataSource: { data: prDataProfiles },
    change: EventProfileChange,
    select: EventProfileSelect
  }).data("kendoDropDownList");

  prViewDialogDiscardProfile = $("#dialogDiscardProfile").kendoDialog({
    title: "Discard Changes",
    content: "<p>Changes have been made to this profile.</p><p>Do you wish to discard the changes?</p>",
    visible: false,
    resizable: false,
    actions: [
      { text: "No", action: ActionKeepProfileChanges },
      { text: "Yes", action: ActionDiscardProfileChanges, primary: true }
    ],
    show: EventOpenDialog,
    close: EventCloseDialog
  }).data("kendoDialog");

  prViewDialogDeleteProfile = $("#dialogDeleteProfile").kendoDialog({
    title: "Delete Profile",
    content: "<p>You are about to deleted this profile.</p><p>Do you wish to continue?</p>",
    visible: false,
    resizable: false,
    actions: [
      { text: "No" },
      { text: "Yes", action: ActionConfirmDeleteProfile, primary: true }
    ],
    show: EventOpenDialog,
    close: EventCloseDialog
  }).data("kendoDialog");

  prViewLimitDelete = $("#btnLimitDelete");
  prViewLimitExpand = $("#btnLimitExpand");
  prViewDialogDeleteLimit = $("#dialogDeleteLimit").kendoDialog({
    title: "Delete Limit",
    visible: false,
    resizable: false,
    actions: [
      { text: "No" },
      { text: "Yes", action: ActionConfirmDeleteLimit, primary: true }
    ],
    show: EventOpenDialog,
    close: EventCloseDialog
  }).data("kendoDialog");

  prViewDialogWarningLimit = $("#dialogWarningLimit").kendoDialog({
    title: "Profile Limit",
    content: "You may only create new limit for existing profiles.",
    visible: false,
    resizable: false,
    actions: [
      { text: "OK", primary: true }
    ],
    show: EventOpenDialog,
    close: EventCloseDialog
  }).data("kendoDialog");

  prViewDialogDiscardLimit = $("#dialogDiscardLimit").kendoDialog({
    title: "Discard Changes",
    content: "<p>Changes have been made to this feature.</p><p>Do you wish to discard these changes?</p>",
    visible: false,
    resizable: false,
    actions: [
      { text: "No" },
      { text: "Yes", action: ActionConfirmDiscardLimit, primary: true }
    ],
    show: EventOpenDialog,
    close: EventCloseDialog
  }).data("kendoDialog");

  prViewLimitGrid = $("#grdProfileLimits").kendoGrid({
    dataSource: {
      data: prDataLimits
    },
    rowTemplate: kendo.template($("#templateGridRow").html()),
    dataBound: EventGridDataBound,
    change: EventGridChange,
    selectable: "cell",
    columns: [
      { headerTemplate: "<input type=\"checkbox\" id=\"chk_0\">", width: "25px" },
      { title: "Feature", width: "150px"},
      { title: "Limits"}
    ]
  }).data("kendoGrid");

  prViewLimitAmount = $("#viewAmount");
  prViewLimitAmountBr = $("#viewAmountBr");
  prViewLimitCount = $("#viewCount");
  prViewLimitCountBr = $("#viewCountBr");
  prViewLimitConfirm = $("#viewConfirm");
  prViewLimitAccess = $("#viewAccess");
  prViewLimitWindow = $("#wndProfileLimit").kendoWindow({
    width: "750px",
    modal: true,
    visible: false,
    resizable: false,
    activate: EventOpenDialog,
    open: function(e) {
      this.wrapper.css({ top: 100 });
    },
    close: function(e) {
      if (prObserveLimit.sourceLimit.fDirty) {
        e.preventDefault();
        prViewDialogDiscardLimit.open();
      } else {
        prDataWindowStack.pop();
        kendo.unbind("#wndProfileLimit");
        EventResetLimit();

        if (prViewLimitExpanded) {
          prViewLimitExpanded = false;
          EventExpandLimit();
        }
      }
    }
  }).data("kendoWindow");

  prObserveLimit = new kendo.observable({
    sourceLimit: null,
    sourceFeatures: null,
    showDrop: false,
    showAmount: false,
    showCount: false,
    showConfirm: false,
    showAccess: false,
    saveLimit: EventSaveLimit,
    changeFeature: EventChangeLimitFeature,
    spinLimit: EventSpinLimit,
    changeLabel: EventCheckLabel,
    changeCheck: EventCheckDirty
  });

  prObserveLimitValidator = $("#wndProfileLimit").kendoValidator({

  }).data("kendoValidator");

  // init validator
  $.homecuValidator.setup({
    formStatusField: "formStatus",
    formValidate: "profileView",
    homecuCustomRules: {
      pcode: ValidateProfileCode,
      required: ValidateProfileRequired
    }
  });
}

<?php
/*
 * InitDataSources: initialize all datasources and array which hold data.
 */
?>
function InitDataSources() {
  prDataWindowStack = [];
  prDataProfiles = [];
  prDataLimits = [];
  prDataLimitStack = [];
  prDataFeatures = [];
  prDataFeaturesFiltered = [];

  prDataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: "main.prg",
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        type: "GET",
        data: {
          ft: "51",
          action: "data_read"
        },
        cache: false
      }
    },
    requestStart: function(request) {
      showWaitWindow();
    },
    requestEnd: function(response) {
      setTimeout(hideWaitWindow, 500);

      if (response.hasOwnProperty("response")) {
        if (response.response.hasOwnProperty("Results")) {
          var results = response.response.Results;

          if (results.hasOwnProperty("error")) {
            $.homecuValidator.homecuResetMessage = true;
            $.homecuValidator.displayMessage(results.error, $.homecuValidator.settings.statusError);
          } else if (results.hasOwnProperty("info")) {
            $.homecuValidator.homecuResetMessage = true;
            $.homecuValidator.displayMessage(results.info, $.homecuValidator.settings.statusSuccess);
          }
        } else {
          $.homecuValidator.displayMessage("Error Parsing Server", $.homecuValidator.settings.statusError);
        }
      } else {
        $.homecuValidator.displayMessage("Error Parsing Server", $.homecuValidator.settings.statusError);
      }
    },
    schema: {
      parse: function(response) {

        var results = response.Results;
        var resultData = results.data;
        var resultAction = results.action;

        if (results.hasOwnProperty("errors")) {
          return [];
        }

        if (resultData == undefined || resultData == null) {
          return [];
        }

        if (resultAction == "data_read") {
          DataSourceBuildProfiles(resultData.profiles);
          DataSourceBuildLimits(resultData.limits);
          DataSourceBuildFeatures(resultData.features);
          } else {
            prDataLimitStack = [];
            if (resultAction == "profile_create") {
              DataSourceInsertProfile(resultData[0], 0);
            } else if (resultAction == "profile_update") {
              DataSourceInsertProfile(resultData[0], 1);
            } else if (resultAction == "profile_delete") {
              DataSourceRemoveProfile(resultData[0]);
            } else if (resultAction == "limit_create") {
              DataSourceInsertLimit(resultData[0], 0);
            } else if (resultAction == "limit_update") {
              DataSourceInsertLimit(resultData[0], 1);
            } else if (resultAction == "limit_delete") {
              DataSourceRemoveLimit(resultData);
            }
          }

        return [];
      }
    }
  });
}

$(document).ready(function() {
  prInfoBar = $("#prInfoBar");

  InitDataSources();
  prDataSource.read();

  setTimeout(function() {
    InitDataViews();
    InitDataActions();

    prViewProfileDropdown.select(0);
    prViewProfileDropdown.trigger("select");
    prViewProfileDropdown.trigger("change");
  }, 1000);
});

$(document).on('click', '.k-overlay', function() {

  if (prDataWindowStack.length > 0) {
    var wnd = prDataWindowStack[prDataWindowStack.length-1];
    wnd.close();
  }
});
</script>