siteSetColor.prg

<?php

/*
 * siteSetColor
 *
 * Configuration script for allowing easy changes to the colors specific to the
 * credit union
 *
 * This will ONLY make changes to the credit union brand.css
 *  Changes to the cuSettings is a different scirpt
 *
 */

  // ** Include these scripts, mostly to ensure that the Monitor security is maintained

  $monLibrary = dirname(__FILE__) . "/../library";
  require_once("$monLibrary/cu_top.i");
  require_once("$monLibrary/ck_hticket.i");
  require_once("$sharedLibrary/hcuTranslate.i");
  require_once("$sharedLibrary/cu_flagconst.i");
  require_once("$sharedLibrary/cu_data.i");

  if (!CheckPerm($link, $Hu, basename($_SERVER['SCRIPT_NAME']), $_SERVER['REMOTE_ADDR'])) {
    // ** Permissions failed
    // ** redirect to new page
    header("Location: /hcuadm/hcu_noperm.prg");
    exit;
  }

  $loadedFromTemplate = false; // Set this here to prevent an E_NOTICE error.
  $loadedFromProduction = false;
  // Need to distinguish when preview is loaded from production (loadedFromTemplate is true in this case) and when it is fully loaded from template.

  /*
   * Local Variables
   *
   */
  /*
   * The status of the settings file
   *  loaded from default or CU specific
   */
  $settingsFileStatus = '';
  try {
    // ** Import the necessary fields
    $string = array("filter" => FILTER_SANITIZE_STRING);
    $parameters = array();
    HCU_ImportVars($parameters, "", array('user_name' => $string, 'loadSettings' => $string));
    $username = HCU_array_key_value("user_name", $parameters);
    $username = $username === false ? "" : trim($username);
    $loadSettings = HCU_array_key_value("loadSettings", $parameters);
    $loadSettings = $loadSettings === false ? "" : trim($loadSettings);
    $loadSettings = $loadSettings == "" ? "production" : $loadSettings;

    $cuStyleFileName = "brand.css";
    $cuStyleFileProdName = "brand.$username.css";
    $cuStyleFileTemplateName = $cuStyleFileName;
    // ** Configure location of the hcuSettings file for the Credit Union
    $cuSettingsDir = "/home/{$username}/public_html/bankingIncludes/";
    $cuPublicDir = "/home/{$username}/public_html/";

    // ** Configure location of the default hcuSettings
    $templateSettingsDir = "/home/homecu/public_html/bankingIncludes/css/";

    if ($loadSettings == 'production') {
      $cuSaveSettingsFilePath = $loadSettings . '/css/' . $cuStyleFileProdName;
      $cuLoadSettingsFilePath = $loadSettings . '/css/' . $cuStyleFileProdName;
    } elseif ($loadSettings == 'preview' || $loadSettings == 'previewreload') {
      // ** ALWAYS save to the preview folder in this instance
      $cuSaveSettingsFilePath = 'preview/css/' . $cuStyleFileName;
      if ($loadSettings == 'preview' && is_readable($cuSettingsDir . $loadSettings . '/css/' . $cuStyleFileName)) {
        $cuLoadSettingsFilePath = $loadSettings . '/css/' . $cuStyleFileName;
      } else {
        // ** Load the preview FROM the production file if it exists
        $cuLoadSettingsFilePath = 'production/css/' . $cuStyleFileProdName;
        $loadedFromTemplate = true;
      }
    } else {
      // ** ERROR -- invalid parameter
      throw new Exception('Invalid parameter setting', 903);
    }
    $cuSaveSettingsFilePath = $loadSettings == "production" ? $loadSettings . '/' . $cuStyleFileProdName : $loadSettings . '/' . $cuStyleFileName;
    $templateFilePath = $templateSettingsDir . '/' . $cuStyleFileName;


    /* Determine if the settings file exists */
    $fileIsReadable = is_readable($cuSettingsDir . $cuLoadSettingsFilePath);
    if (is_readable($cuSettingsDir . $cuSaveSettingsFilePath) && !is_writable($cuSettingsDir . $cuSaveSettingsFilePath)) {
      // ** UNABLE to write to the desired file
      throw new Exception('Credit Union settings file not configured with correct permission. Unable to save brand.css file in $loadSettings.', 903);

    } elseif (is_writable($templateSettingsDir)) {
      // ** They have a Settings file, we will want load from there
      // ** LOAD FILE
      if ($fileIsReadable) {
        $settingsFileStatus = "<strong>Colors Found</strong><br/>Loaded From {$cuStyleFileName}";
      } elseif (is_readable($templateSettingsDir . $cuStyleFileName)) {
        // ** Load from the template directory if it is readable
        $settingsFileStatus = '<strong>Settings Not Found</strong><br/>Loaded From Template';
        $loadedFromTemplate = true;
      } else {
        // ** RAISE ERROR -- NOT SURE WHAT WE ARE DOING HERE
        throw new Exception('Credit Union configuration error', 901);
      }

    } elseif (!is_dir($cuSettingsDir) && is_writable($cuPublicDir)) {
      // ** MILD ERROR -- Unable to Find directory, BUT we can offer to create it
        // * for the user
      throw new Exception("Credit Union not configured with correct permission or directory.  {$cuSettingsDir}", 900);
    } elseif (is_writable($cuSettingsDir) && $templateIsReadable) {
      // ** SETTINGS Directory exists AND we can write
      // ** NO Credit Union Settings file, Load from Default
      // ** LOAD FILE
      $settingsFileStatus = '<strong>Settings Not Found</strong><br/>Loaded From Template';
    } else {
      // ** RAISE ERROR -- NOT SURE WHAT WE ARE DOING HERE
      throw new Exception('Credit Union configuration error', 901);
    }
    // ** I want to remove the possibility of previewreload at this point. It does not matter
      // * where the file was from now.  What we want to do is always save to the preview directory
    $loadSettings = ($loadSettings == 'previewreload' ? 'preview' : $loadSettings);


    /* Extracting values from the brand.$cu.css file.  There are three possibilities:
     * 1) The file doesn't exist or is blank.  In this case, load the template with defaults.
     * 2) The file does exist and is in the correct format.  In this case, extract the values for the CU and on save, replace template with values.
     * 3) The file exists prior to #226.  In this case, brand file will be manually conformed to the template.
     */

    $styleDefaults = array(
      "fontFamily" => "Helvetica, \"Helvetica Neue\", Arial, sans-serif",
      "headerBackground" => "#24417A",
      "headerForeground" => "#FFFFFF",
      "headerBorder" => "#2A2D33",
      "footerBackground" => "#E7E8EA",
      "footerForeground" => "#777777",
      "menuGroupBackground" => "#1B8DD6",
      "menuGroupBackgroundLighter" => "#2198E3",
      "menuGroupForeground" => "#FFFFFF",
      "menuForeground" => "#337AB7",
      "menuForegroundHover" => "#23527C",
      "menuBackgroundHover" => "#EEEEEE",
      "menuBackground" => "#F8F8F8",
      "slideinBackground" => "#808080",
      "slideinForeground" => "#FFFFFF",
      "contentBackground" => "#FFFFFF",
      "contentForeground" => "#333333",
      "logoHeightDesktop" => "75px",
      "logoHeightMobile" => "35px",
      "logoBackground" => "transparent",
      "contentBorderWidth" => "0px",
      "contentBorderStyle" => "solid",
      "contentBorderColor" => "#000000",
      "navBadgeColor" => "#777777",
      "navIconColor" => "#9D9D9D",
      "navIconColorHover" => "#FFFFFF",
      "navBackground" => "transparent",
      "navForeground" => "#FFFFFF",
      "navActiveBorder" => "#FF0000",
      "bannerBackground" => "#161620",
      "bannerHeight" => "60px",
      "bannerWidth" => "100%"
    );

    $styleType = array("fontFamily" => "other", "logoHeightDesktop" => "number", "logoHeightMobile" => "number",
                       "contentBorderStyle" => "other", "contentBorderWidth" => "number", "bannerHeight" => "number",
                       "bannerHeight" => "number", "bannerWidth" => "number");

    $styleValues = array();

    if ($fileIsReadable) {
      $styleContent = file_get_contents($cuSettingsDir . $cuLoadSettingsFilePath);

      $styleValues = array();

      // E.g. "  #E7E8EA; /* FOOTER-BACKGROUND */" or " transparent !important; /* SLIDEIN-FOREGROUND */"
      $pattern = '/\s*((transparent)|(#[0-9A-Fa-f]{6})|(\d+px)|(100%)|([^:;\!]+))(\s+\!important)?;\s*\/\*\s*([A-Za-z]+)\s*\*\//';
      $matches = array();
      $result = preg_match_all($pattern, $styleContent, $matches, PREG_SET_ORDER);

      // Gets the first match of the key to set the value.
      foreach($matches as $matchSet) {
        $key = $matchSet[8]; // E.g. FONT-FAMILY
        $value = $matchSet[1]; // E.g. #24417A
        $type = HCU_array_key_value($key, $styleType);
        $type = $type === false ? $type = "color" : $type;

        $valid = false;
        switch($type) {
          case "color":
            $valid = !empty($matchSet[2]) || !empty($matchSet[3]);
            break;
          case "number":
            $valid = !empty($matchSet[4]) || !empty($matchSet[5]);
            break;
          case "other":
            $valid = !empty($matchSet[6]);
            break;
        }
        if (!$valid) {
          continue;
        }

        $styleValues[$key] = $value;
      }

      // If key is not found, then use default value for it.
      foreach($styleDefaults as $key => $value) {
        if (!HCU_array_key_exists($key, $styleValues)) {
          $styleValues[$key] = $value;
        }
      }
    } else {
      $styleContent = file_get_contents($templateSettingsDir . $cuStyleFileTemplateName);
      $styleValues = $styleDefaults;
    }

    $customContent = explode('/* customBranding */', $styleContent, 2);
    $customContent = count($customContent) > 1 ? trim($customContent[1]) : "";

    $styleContent = file_get_contents($templateSettingsDir . $cuStyleFileTemplateName);

    foreach($styleValues as $key => $value) {
      $styleContent = str_replace('{{' . $key . '}}', $value, $styleContent);
      $type = HCU_array_key_value($key, $styleType);

      // Value when color picker or number input is null.
      if ($value == "100%" || $value == "transparent") {
        $styleValues[$key] = null;
      // To get into the number control, remove the px on the end of it.
      } else if (strpos($value, "px") !== false) {
        if ($type == "number") {
          $value = floatval(explode("px", $value)[0]);
          $styleValues[$key] = $value;
        }
      }
    }

    // Add customContent back
    $styleContent = explode('/* customBranding */', $styleContent, 2);
    $styleContent = trim($styleContent[0]); // Remove and readd.
    if ($customContent != "") {
      $styleContent .= "\n\n" . '/* customBranding */' . "\n" . $customContent;
      $styleValues["customBranding"] = $customContent;
    } else {
      $styleValues["customBranding"] = "";
    }

    // ** Look ONCE for credit union settings file -- If I find it and
    // ** Parse it, then set the kendo theme
    $cuLoadSettingsFile = "/home/{$username}/public_html/bankingIncludes/{$loadSettings}/hcuSettings.i";
    $cuSettings = "";
    if (!is_readable($cuLoadSettingsFile)) {
      $cuLoadSettingsFile = "/home/{$username}/public_html/bankingIncludes/production/hcuSettings.i";
    }
    if (is_readable($cuLoadSettingsFile)) {

      $settingsContent = file_get_contents($cuLoadSettingsFile);
      $isEmpty = trim($settingsContent) == "";

      // ** Now decode it and hope for the best
      $cuSettings = HCU_JsonDecode($settingsContent);
      if (!$isEmpty && count($cuSettings) == 0) {
        // ** Something went wrong with the menu decode
        throw new Exception('Unable to parse settings file', '902');
      }
    }

    $contentTheme = HCU_array_key_value("contentTheme", $cuSettings);
    $contentTheme = $contentTheme === false ? "" : trim($contentTheme);
    if ($contentTheme == '') {
      $contentTheme = GetMonitorDefaultKendoStyle();
    }
    $logoURL = HCU_array_key_value("imageLocations", $cuSettings);
    $logoURL = $logoURL === false ? "" : HCU_array_key_value("desktopCULogoLocation", $logoURL);
    $logoURL = $logoURL === false ? "" : trim($logoURL);

    // Set up banner
    // ** Determine if we show the banner.
    $bannerDiv = '';
    $SYSENV["Cu"] = strtoupper($username);
    $SYSENV["Cn"] = "nouser";
    $MC = new hcu_talk_base( "en_US" );

    $sql = "select flagset2 from cuadmin where lower(cu) = '" . prep_save($username, 10) . "'";
    $sth = db_query($sql, $dbh);
    if (!$sth) {
      throw new exception ("Flagset query failed.", 903);
    }
    $SYSENV["Fset2"] = db_num_rows($sth) > 0 ? intval(db_fetch_row($sth, 0) [0]) : 0;

    // ** if we do we will also need to add a class to the body tag
    if ((HCU_array_key_value('Fset2', $SYSENV) & GetFlagsetValue("CU2_SHOWBANNER"))) {
      // ** Banners are on and not suppressed at the script level
      $aryBanner = Get_BannerText($dbh, $SYSENV, $MC, 'D');
      if ($aryBanner['status']['code'] != '000') {
        $txtBannerData = '';
      } else {
        $aryBannerData = Translate_BannerText($SYSENV,$aryBanner['banner']['bannertext']);
        if ($aryBannerData['status']['code'] != '000') {
          $txtBannerData = '';
        } else {
          $txtBannerData = $aryBannerData['banner']['bannertext'];
        }
      }
      if ($txtBannerData != '') {
        $bannerBodyClass = 'showHomecuBanner';
        $bannerDiv = "
          <div id='homecuBannerArea'>
            {$txtBannerData}
          </div>
        ";
      }
    }

    PrintOdysseyHTMLContainer($styleValues, $styleContent, $loadSettings, $loadedFromTemplate, $username, $settingsFileStatus,
      $contentTheme, $logoURL, $SYSENV['devmode'], $bannerDiv);

  } catch (Exception $e) {
    // ERROR CAUGHT
    /*
     * ERRORS FOR THE SCRIPT
     *
     * 900 - Unable to Create the Needed directories.  This may be caused by permmissions
     *          or public_html not existing
     * 901 - Unable to continue - This is a catch all, not exactly sure why we could be here
     *
     * 902 - Unable to continue - Found the settings file, but failed on parsing
     *
     * 800 - Unable to find the Credit Union Settings directory.. BUT we can offer
     *        to create it.
     */
    PrintErrorMessage($SYSENV['devmode']);
  }

/**
 * PrintErrorMessage($devmode)
 * This function prints out: "This is an unexpected error for this script" on an error.
 *
 * @param $devmode -- if devmode, if use the "dev" class for the monitor banner, otherwise use the "prod" class.
 */
function PrintErrorMessage($devmode) {
  $cloudFrontDomainName = GetCloudFrontDomainName ();
  $homecuKendoVersion = GetHomecuKendoVersion ();
  $bootstrapVersion = GetHomecuBootstrapVersion ();
  $fontAwesomeVersion = GetFontawesomeVersion (); ?>
<!DOCTYPE html>
<html>
  <head>
    <title>Sample Credit Union Name</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex,nofollow" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel='stylesheet' media='all' type='text/css' href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/reset.css' />

    <!-- BASE BOOTSTRAP  -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/bootstrap/<?php echo $bootstrapVersion; ?>/css/bootstrap.css' rel='stylesheet'/>

    <!-- KENDO BOOTSTRAP COMMON STYLES - REPLACES kendo.common.css -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/KendoUI/<?php echo $homecuKendoVersion; ?>/kendo.common-bootstrap.min.css' rel='stylesheet'/>

    <!-- METIS MENU  -->
    <link href='/banking/static/css/metisMenu.css' rel='stylesheet'/>

    <!-- /* CUSTOM KENDO BOOTSTRAP STYLING */ -->
    <link rel='stylesheet' media='all' type='text/css' href='/shared/static/css/homecu-custom-kendo-boot.css' />

    <!-- /* HOMECU BASE LAYOUT */ -->
    <link rel='stylesheet' media='all' type='text/css' href='/shared/static/css/hcuLayout.css' />
    <link rel='stylesheet' media='all' type='text/css' href='/banking/static/css/layout.css' />

    <!-- /* FONT AWESOME */ -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/font-awesome/<?php echo $fontAwesomeVersion; ?>/css/font-awesome.css' rel='stylesheet'/>

    <link rel='stylesheet' media='all' type='text/css' href='/monitor/css/monitor-core.css' />
    <!-- /**
     *  JAVASCRIPT INCLUDES
     */
    /* JQUERY BASE */     -->
    <script type='text/javascript' src='https://<?php echo $cloudFrontDomainName; ?>/jquery/js/jquery-1.10.2.js'></script>

    <!-- /* KENDO FULL WIDGET INCLUDE - CREATE CUSTOM FOR PRODUCTION */ -->
    <script src='https://<?php echo $cloudFrontDomainName; ?>/homecu/js/KendoUI/<?php echo $homecuKendoVersion; ?>/kendo.web.js'></script>
    <!-- /* BOOTSTRAP JAVASCRIPT */ -->
    <script src='https://<?php echo $cloudFrontDomainName; ?>/homecu/js/bootstrap/<?php echo $bootstrapVersion; ?>/js/bootstrap.js'></script>

    <!-- /* CUSTOM JQUERY TIMEOUT DIALOG SCRIPT */ -->
    <script type='text/javascript' src='/static/js/jquery-timeout-dialog.js'></script>

    <!-- /* JQUERY COOKIE */ -->
    <script type='text/javascript' src='https://<?php echo $cloudFrontDomainName; ?>/homecu/js/jquery.cookie.js'></script>

    <!-- /* HOMECU CUSTOM ERRORS FOR FORMS */ -->
    <script type='text/javascript' src='/shared/static/js/hcuFormError.js'></script>

    <!-- /* HOMECU CUSTOM NOTICES FOR FORMS - PROVIDES CHAINING*/ -->
    <script type='text/javascript' src='/banking/static/js/hcuFormNotice.js'></script>

    <!-- /* HOMECU CUSTOM KENDO SETTINGS */ -->
    <script type='text/javascript' src='/shared/static/js/kendo.homecu.custom.js'></script>

    <!-- /* metisMenu */ -->
    <script type='text/javascript' src='/banking/static/js/metisMenu.js'></script>

  </head>
  <body>
      <header id="commonMonitorHeader" class="<?php echo $devmode ? 'dev' : 'prod'; ?>">
        <div class="header-title">Home Banking CU Branding</div>
        <?php if (!$devmode) { ?><div id="environmentMsg">(Production)</div><?php } ?>
      </header>
      <div class="container-fluid">
        <div class="row">&nbsp;</div>
        <div class="row">
          <div class="col-xs-12">
            <div class='k-block k-error-colored'>
              Please see a programmer<br/>
              This is an unexpected error for this script.
            </div>
          </div>
        </div>
      </div>
    </body>
  </html>
<?php }

/**
 * function PrintSiteBranding($styleValues, $username, $loadSettings, $settingsFileStatus, $loadedFromTemplate)
 * This function prints out the style, javascript, and HTML for the branding itself.
 *
 * @param $styleValues -- This is all the changeable attributes for the brand file.
 * @param $username -- The lowercase code of the credit union
 * @param $loadSettings -- "preview" or "production"
 * @param $settingsFileStatus -- the status message
 * @param $loadedFromTemplate -- if loaded from template then need to save
 */
function PrintSiteBranding($styleValues, $username, $loadSettings, $settingsFileStatus, $loadedFromTemplate) {
  ?>
  <style>
    .section-dirty,
    .section-clean,
    .section-response {
      display: none;
    }

    .settingStatus {
      min-height: 50px;
      padding-top: 10px;
    }
    .settingStatus .section,
    .settingStatus .section-clean,
    .settingStatus .section-dirty {
      margin-bottom: 20px;
    }
    #currentStatus.dirty .section-dirty {
      display: block;
    }
    #currentStatus.clean .section-clean {
      display: block;
    }

    #currentStatus {
      margin-bottom: 40px;
    }

    #panelBrand {
      margin-bottom: 40px;
    }
    #panelBrand label {
      display: block;
    }
    #panelBrand span.k-link {
      padding-bottom: 5px;
    }
    #panelBrand li:nth-child(even) {
      background-color: #FAFAFA;
      color: #333;
    }
    #panelBrand li:nth-child(odd) {
      background-color: #EFEFEF;
      color: #333;
    }
    #panelBrand .k-numeric-wrap {
      width: 50px;
    }
    #editBrandWindow {
      font-family: helvetica, verdana, sans-serif;
    }

    .panelBrandContainer {
      max-height: 450px; <?php /* Solve dual problems of not being able to scroll when header is open and difficulty opening color pickers. */ ?>
      overflow-x: hidden;
      overflow-y: auto;
    }

    /* Pushed down the page further by the monitor banner. */
    #homecuBannerArea + #body-wrapper .desk-lang-select {
      top: 152px;
    }

    .imageNote, .imageNote .k-link {
      font-weight: bold;
      color: red;
    }

    [name='customBranding'] {
      width: 370px;
      height: 150px;
      line-height: initial;
    }
  </style>

  <style>
    .contentText {
      position: absolute;
      left: 540px;
      top: 200px;
    }
  </style>
  <script type="text/javascript">


    var brandData = <?php echo HCU_JsonEncode($styleValues); ?>,
    formDirty,
    brandObservable;
    var activeWindows = [];
    $(document).ready(function() {
      $("body").on("click", ".k-overlay", function() { if (activeWindows.length > 0) activeWindows[activeWindows.length-1].close(); return false; });
      $("<div id='editBrandWindow'></div>").appendTo("body").kendoWindow({
          width: '515px',
          position: {
            left: 327,
            top: 188
          },
          title: 'Credit Union Brand Settings',
          actions:[],
          content: {
            template: $("#editBrandWindowTemplate").html()
          },
          scrollable: false,
          pinned: true,
          resizable: false
      });

      brandObservable = new kendo.data.ObservableObject(brandData);
      kendo.bind($('#panelBrand'), brandObservable);
      brandObservable.bind('change', function(e) {
        AdjustScreenStyles(e.field);
        formDirtyFlag(true);
      });

      $(".brandColorPick[data-role='colorpicker']").each(function() {
        var picker = $(this).data("kendoColorPicker");
        $(picker.wrapper).click(function() {
          OpenColorPicker(this);
        });
        picker.destroy();
      });


      $('#selectFileSettings').kendoDropDownList({
        change: selectSettings
      });
      var selFileSettings = $('#selectFileSettings').data('kendoDropDownList');
      selFileSettings.value('<?php echo $loadSettings; ?>');

      $('#panelBrand').kendoPanelBar({
        expandMode: "single"

      });
      $('.brandSizePick').each(function() {
        $(this).kendoNumericTextBox({
          min: 0,
          max: 300,
          format: '0',
          spinners:false
        });
      });
      $('#brandContentBorderStyle').kendoDropDownList({
        dataSource: [
          {value: "none"},
          {value: "solid"},
          {value: "dotted"},
          {value: "dashed"},
          {value: "groove"},
          {value: "inset"},
          {value: "outset"}
        ],
        dataTextField: "value",
        dataValueField: "value"
      });

      homecuTooltip.reset();
      $(".detailsTip").kendoTooltip(homecuTooltip.custom);

      $('#btnUpdate').click(function(e) {
        e.preventDefault();
        PostChanges();
      });

      $('#btnSaveToProd').click(function(e) {
        e.preventDefault();
        $('#loadSettings').val('savetoproduction');
        PostChanges();
      });
      <?php
        // * If we loaded the Settings From template ,then I want to set
        // * the form to be dirty
        if ($loadedFromTemplate): ?>
          formDirtyFlag(true);
      <?php endif; ?>

    });

    <?php
    /**
     * function OpenColorPicker(control)
     * Opens a kendoWindow with a kendoFlatColorPicker inside.  This replaces a kendoColorPicker control.  The problem with that was it was sometimes half-hidden.
     *
     * @param control -- this refers to the wrapper of the previous kendoColorPicker control.  It contains all that I need.
     * The kendoColorPicker is destroyed before this.
     */
    ?>
    function OpenColorPicker(control) {
      var cpWindow = $("#cpWindow").data("kendoWindow");
      var flatColorPicker = null;

      if (cpWindow == null) {
        cpWindow = $("<div id='cpWindow'></div>").appendTo("body").kendoWindow({
          resizable: false,
          pinned: true,
          visible: false,
          autoFocus: false,
          title: false,
          modal: true,
          content: {
            template: $("#colorPickerWindowTemplate").html()
          },
          activate: function() {
            flatColorPicker.focus();
          },
          open: function () {
            if (window.activeWindows != null) {
              window.activeWindows.push(this);
            }
            $("#cpWindow").data("cancelled", true);
            var startingColor = $("#cpWindow").data("startingColor");
            if (startingColor == "transparent") {
              $("#flatColorDiv").hide();
              $("#transparentCheckbox").prop("checked", true);
            } else {
              $("#flatColorDiv").show();
              $("#transparentCheckbox").prop("checked", false);
              $("#flatColorPicker").data("kendoFlatColorPicker").value(startingColor);
            }
          },
          close: function() {
            if (window.activeWindows != null) {
              window.activeWindows.pop();
            }
            var cancelled = $("#cpWindow").data("cancelled");
            if (cancelled) {
              var control = $($("#cpWindow").data("control"));
              var name = $(control).find(".brandColorPick").attr("name");
              var startingColor = $("#cpWindow").data("startingColor");

              if (startingColor == "transparent") {
                $(control).find(".k-selected-color").css("backgroundColor", "#ffffff").append("<span class='k-icon k-i-line'></span>");
                brandObservable[name] = null;
                AdjustScreenStyles(name);
              } else {
                $(control).find(".k-selected-color").css("backgroundColor", startingColor).empty();
                brandObservable[name] = startingColor;
                AdjustScreenStyles(name);
              }

            } else {
              formDirtyFlag(true);
            }

          }
        }).data("kendoWindow");

        flatColorPicker = $("#flatColorPicker").kendoFlatColorPicker({
          preview: true,
          buttons: false,
          change: function(e) {
            var isOpening = $("#cpWindow").data("isOpening");
            var control = $($("#cpWindow").data("control"));
            var name = $(control).find(".brandColorPick").attr("name");
            if (!isOpening) { <?php // Prevent color changing when the control is being opened. ?>
              $(control).find(".k-selected-color").css("backgroundColor", e.value);
              brandObservable[name] = e.value;
              AdjustScreenStyles(name);
            } else {
              $("#cpWindow").data("isOpening", false);
            }
          }
        }).data("kendoFlatColorPicker");

        $("#transparentDiv").click(function() {
          var control = $($("#cpWindow").data("control"));
          var name = $(control).find(".brandColorPick").attr("name");
          if ($("#transparentCheckbox").prop("checked")) {
            $("#flatColorDiv").hide();
            $(control).find(".k-selected-color").css("backgroundColor", "#ffffff").append("<span class='k-icon k-i-line'></span>");
            brandObservable[name] = null;
            AdjustScreenStyles(name);
          } else {
            var color = $("#flatColorPicker").data("kendoFlatColorPicker").value();
            $(control).find(".k-selected-color").css("backgroundColor", color).empty();
            brandObservable[name] = color;
            AdjustScreenStyles(name);
            $("#flatColorDiv").show();
          }
        });

        $("#cpWindow").on("click", ".applyBtn", function() {
          $("#cpWindow").data("cancelled", false);
          cpWindow.close();
        });

        $("#cpWindow").on("click", ".cancelBtn", function() {
          $("#cpWindow").data("cancelled", true);
          cpWindow.close();
        });

        $("#cpWindow").data("isOpening", true);
      } else {
        $("#cpWindow").data("isOpening", false);
      }

      flatColorPicker = $("#flatColorPicker").data("kendoFlatColorPicker");
      $("#cpWindow").data("isOpening", false);
      $("#cpWindow").data("control", $(control));

      var isTransparent = $(control).find(".k-selected-color .k-icon.k-i-line:visible").length > 0;
      if (isTransparent) {
        $("#cpWindow").data("startingColor", "transparent");
      } else {
        $("#cpWindow").data("startingColor", $(control).find(".k-selected-color").css("backgroundColor"));
      }

      cpWindow.open().center();
    }

    <?php
    /**
     * function AdjustScreenStyles(field)
     * This function changes the style sheet on the brand page to be able to see the change.
     *
     * @param field -- the name of the control.
     */
    ?>
    function AdjustScreenStyles(field) {
      var fullCss = $("#brandCssStyle").html();

      if (field != "customBranding") {
        <?php // LIKE: height: calc(100% - ({{bannerHeight}} + 65px)); /* CALC bannerHeight */ ?>
        var pattern1 = '\\s*[^:;!]*\\s*calc\\s*\\(\\s*100%\\s*-\\s*\\(\\s*\\S+\\s*\\+\\s*(\\S+)\\s*\\)\\s*\\)\\s*;\\s*\\/\\*\\s*CALC\\s*' + field + '\\s*\\*\\/';
        var regex1 = new RegExp (pattern1, 'g');
        var pattern2 = '\\s*[^:;!]*(\\s+\\!important)?;\\s*\\/\\*\\s*' + field + '\\s*\\*\\/';
        var regex2 = new RegExp (pattern2, 'g');
        var value = brandObservable[field];
        var isNumberField = $("[name='" + field + "']").hasClass("brandSizePick");
        value = value == null ? (isNumberField ? "100%" : "transparent") : (isNumberField ? Number(value) + "px" : value);
        fullCss = fullCss.replace(regex1, " calc(100% - (" + value + " + $1)); /* CALC " + field + " */");
        fullCss = fullCss.replace(regex2, " " + value + "$1; /* " + field + " */");
      } else { <?php // Custom Branding is ALWAYS at the end of the CSS so remove it and add it. ?>
        fullCss = fullCss.split('/* customBranding */')[0];
        fullCss = fullCss + '/* customBranding */\n' + brandObservable[field];
      }

      $("#brandCssStyle").html(fullCss);
    }

    <?php
    /**
     * function formDirtyFlag(dirtyAction)
     * This will set up the dirty flag.
     *
     * @param dirtyAction -- either true or false.
     */
    ?>
    function formDirtyFlag(dirtyAction) {
      // ** dirtyAction can be {true/false}
      // true - something on the form has changed
      // false - a successful save was completed

      if (!formDirty && dirtyAction) {
        // * Need to set the dirty information
        // ** Remove the clean attribute
        $('#currentStatus').removeClass('clean');
        $('#currentStatus').addClass('dirty');
        $('#currentStatus').removeClass('k-error-colored');
        $('#currentStatus').removeClass('k-success-colored');
        $('#currentStatus').addClass('k-info-colored');
        $('.section-response').hide();
      } else if(dirtyAction === false) {
        $('#currentStatus').removeClass('dirty');
        $('#currentStatus').addClass('clean');
        $('#currentStatus').removeClass('k-info-colored');
        $('#currentStatus').removeClass('k-info-colored');
        $('#currentStatus').removeClass('k-error-colored');
        $('#currentStatus').removeClass('k-success-colored');
        formDirty = false;
      }
    }

    function selectSettings(e) {
      e.preventDefault();
      var value = $('#selectFileSettings').data('kendoDropDownList').value()
      document.location = '<?php echo $_SERVER['PHP_SELF']; ?>?user_name=<?php echo $username; ?>&loadSettings=' + value;
    }

    <?php
    /**
     * function PostChanges()
     * Calls the data call.
     */
    ?>
    function PostChanges() {
      // ** SHOW SPINNER
      kendo.ui.progress($("#serverResponseSpinner"), true);
      // ** Create Post Data

      <?php // Need to set value to transparent when null; with a px if it is a number. ?>
      var json = brandObservable.toJSON();
      for (var field in json) {
        var value = json[field];
        var isNumberField = $("[name='" + field + "']").hasClass("brandSizePick");
        value = value == null ? (isNumberField ? "100%" : "transparent") : (isNumberField ? Number(value) + "px" : value);
        json[field] = value;
      }

      $('#postStyleSettings').val(JSON.stringify(json));

      // ** Create a random number to prevent cache
      var randUrl = Math.floor((Math.random()*10000)+1);
      postUrl = 'siteSetColor.data?randUrl=' + randUrl;
      postData = $('#formSettings').serialize();

      $.post(postUrl, postData, function(result) {
        try {

          var responseResult = result.Results[0];
          if (responseResult.homecuErrors) {
            if (responseResult.homecuErrors.length > 0) {
              // ** ERRROR
              throw responseResult.homecuErrors;
            } else {
              // ** SUCCESS
              // ** Check for the homecu Info
              formDirtyFlag(false);
              var serverResponse = 'Credit union branding updated';
              if (responseResult.homecuInfo) {
                if (responseResult.homecuInfo.length > 0) {
                  serverResponse = responseResult.homecuInfo;
                }
              }

              $('#currentStatusResponse').text(serverResponse);
              $('#currentStatus').addClass('k-success-colored');
              $('.section-response').show();
            }
          } else {
            // * *THis should exist --
            // ** if not throw a new error
            throw "While attempting to save, the server responded with an unexpected result.  Please reload the screen and start over.";
          }
        } catch (err) {
          // ** Show the Error Status --
          // ** Change the status div to be 'error'
          $('#currentStatusResponse').text(err);
          $('#currentStatus').addClass('k-error-colored');
          $('.section-response').show();
        }

      }).fail(function() {
        // * malformed response..Close Window
        var errMsg = "While attempting to save, the server responded with an unexpected result.  Please reload the screen and start over.";
        $('#currentStatusResponse').text(errMsg);
        $('#currentStatus').addClass('k-error-colored');
        $('.section-response').show();

      }).always(function() {
        kendo.ui.progress($("#serverResponseSpinner"), false);
      });
    }
  </script>
  <script type="text/x-kendo-template" id="editBrandWindowTemplate">
    <div class="panelBrandContainer">
    <div class="container-fluid">
      <div class="row">
        <div id="currentStatus" class='k-block settingStatus clean col-xs-12'>
          <div class="section">
            <select id="selectFileSettings">
              <option value="production">Production</option>
              <option value="preview">Preview</option>
              <option value="previewreload">Reload preview</option>
            </select>
            <span class="fa fa-question-circle-o detailsTip" title='Which settings file to modify.
            Choose "Reload preview" to start preview with production settings.'></span>
          </div>
          <div class='section'>
            <?php echo $settingsFileStatus; ?>
          </div>
          <div class='section-clean'>
            <strong>No Changes made</strong>
            <?php if ($loadSettings == 'preview'): ?>
              <button name='btnSaveToProd' id='btnSaveToProd' class='k-button'>Save to Production</button>
            <?php endif; ?>
          </div>
          <div class='section-dirty'>
            <strong>Changes Have been made</strong><Br/>
            <button name="btnUpdate" id="btnUpdate" class='k-button'>Save Changes</button>
          </div>
          <div class='section-response'>
            <strong>Response from the server:</strong><Br/>
            <div id='currentStatusResponse'></div>
          </div>
          <div id='serverResponseSpinner'></div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <ul id="panelBrand">
            <li>
              FONT
                <ul>
                  <li>
                    <label>Font Text</label>
                    <input type="text" name="fontFamily" data-bind="value: fontFamily" class="k-textbox" style='width:300px;'/>
                  </li>
                </ul>
              </li>
              <li>
                BANNER
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="bannerBackground" data-bind="value: bannerBackground"
                    data-role="colorpicker" data-clear-button="true" />
                  </li>
                  <li>
                    <label>banner height</label>
                    <input type='text' class='brandSizePick' name='bannerHeight' data-bind='value: bannerHeight'/>
                  </li>
                  <li>
                    <label>banner width</label>
                    <input type='text' class='brandSizePick' name='bannerWidth' data-bind='value: bannerWidth'/>
                  </li>
                </ul>
              </li>
              <li>
                HEADER
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="headerBackground" data-bind="value: headerBackground"
                    data-role="colorpicker" data-clear-button="true" />
                  </li>
                  <li>
                    <label>font color</label>
                    <input type="color" class='brandColorPick' name="headerForeground" data-bind="value: headerForeground" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>border color</label>
                    <input type="color" class='brandColorPick' name="headerBorder" data-bind="value: headerBorder" data-role="colorpicker" />
                  </li>
                </ul>
              </li>
              <li>
                NAV BAR ICONS
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="navBackground" data-bind="value: navBackground" data-role="colorpicker" data-clear-button="true" />
                  </li>
                  <li>
                    <label>font color</label>
                    <input type="color" class='brandColorPick' name="navForeground" data-bind="value: navForeground" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>icon color</label>
                    <input type="color" class='brandColorPick' name="navIconColor" data-bind="value: navIconColor" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>hover icon color</label>
                    <input type="color" class='brandColorPick' name="navIconColorHover" data-bind="value: navIconColorHover" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>badge color</label>
                    <input type="color" class='brandColorPick' name="navBadgeColor" data-bind="value: navBadgeColor" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>badge alert color</label>
                    <input type="color" class='brandColorPick' name="navActiveBorder" data-bind="value: navActiveBorder" data-role="colorpicker" />
                  </li>
                </ul>
              </li>
              <li>
                SLIDE OUT MESSAGE
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="slideinBackground" data-bind="value: slideinBackground"
                    data-role="colorpicker" data-clear-button="true" />
                  </li>
                  <li>
                    <label>font color</label>
                    <input type="color" class='brandColorPick' name="slideinForeground" data-bind="value: slideinForeground" data-role="colorpicker" />
                  </li>
                </ul>
              </li>
              <li>
                MENU
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="menuBackground" data-bind="value: menuBackground" data-role="colorpicker"
                    data-clear-button="true" />
                  </li>
                  <li>
                    <label>font color</label>
                    <input type="color" class='brandColorPick' name="menuForeground" data-bind="value: menuForeground" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>hover background color</label>
                    <input type="color" class='brandColorPick' name="menuBackgroundHover" data-bind="value: menuBackgroundHover" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>hover font color</label>
                    <input type="color" class='brandColorPick' name="menuForegroundHover" data-bind="value: menuForegroundHover" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>selected group background color</label>
                    <input type="color" class='brandColorPick' name="menuGroupBackground" data-bind="value: menuGroupBackground" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>selected font color</label>
                    <input type="color" class='brandColorPick' name="menuGroupForeground" data-bind="value: menuGroupForeground" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>selected item background color</label>
                    <input type="color" class='brandColorPick' name="menuGroupBackgroundLighter" data-bind="value: menuGroupBackgroundLighter"
                    data-role="colorpicker" />
                  </li>
                </ul>
              </li>
              <li>
                CONTENT
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="contentBackground" data-bind="value: contentBackground"
                    data-role="colorpicker" data-clear-button="true" />
                  </li>
                  <li>
                    <label>font color</label>
                    <input type="color" class='brandColorPick' name="contentForeground" data-bind="value: contentForeground" data-role="colorpicker" />
                  </li>
                  <li>
                    <label>border width</label>
                    <input type='text' class='brandSizePick' name='contentBorderWidth' data-bind='value: contentBorderWidth' />
                  </li>
                  <li>
                    <label>border style</label>
                    <input id='brandContentBorderStyle' name='contentBorderStyle' data-bind="value: contentBorderStyle" />
                  </li>
                  <li>
                    <label>border color</label>
                    <input type="color" class='brandColorPick' name="contentBorderColor" data-bind="value: contentBorderColor" data-role="colorpicker" />
                  </li>
                </ul>
              </li>
              <li>
                LOGO IMAGE
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="logoBackground" data-bind="value: logoBackground" data-role="colorpicker"
                    data-clear-button="true" />
                  </li>
                  <li>
                    <label>mobile-sized height</label>
                    <input type='text' class='brandSizePick' name='logoHeightMobile' data-bind='value: logoHeightMobile' />
                  </li>
                  <li>
                    <label>tablet- or desktop-sized height</label>
                    <input type='text' class='brandSizePick' name='logoHeightDesktop' data-bind='value: logoHeightDesktop' />
                  </li>
                  <li class="imageNote">NOTE: widths are proportional.</li>
                </ul>
              </li>
              <li>
                FOOTER
                <ul>
                  <li>
                    <label>background color</label>
                    <input type="color" class='brandColorPick' name="footerBackground" data-bind="value: footerBackground"
                    data-role="colorpicker" data-clear-button="true" /></li>
                  <li>
                    <label>font color</label>
                    <input type="color" class='brandColorPick' name="footerForeground" data-bind="value: footerForeground" data-role="colorpicker" /></li>
                </ul>
              </li>
              <li>
                CUSTOM STYLES
                <ul>
                  <li>
                    <label>Enter Custom Styles</label>
                    <textarea type="text" name="customBranding" data-bind="value: customBranding" rows="12" class="k-textbox" /></textarea>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </script>
  <script type="text/x-kendo-template" id="colorPickerWindowTemplate">
    <div class="container-fluid hcu-template">
      <div id="transparentDiv" class="row">
        <div class="col-xs-12">
          <input class="form-check-input" type="checkbox" id="transparentCheckbox">
          <label class="form-check-label" for="transparentCheckbox">Transparent</label>
        </div>
      </div>
      <div id="flatColorDiv" class="row">
        <div class="col-xs-12">
          <div id="flatColorPicker"></div>
        </div>
      </div>
      <div class="hcu-edit-buttons k-state-default">
        <a class="cancelBtn" href="\\#">Cancel</a>
        &nbsp;&nbsp;&nbsp;
        <a class="applyBtn k-button k-primary" href="\\#"><i class="fa fa-check"></i>Apply</a>
      </div>
    </div>

  </script>
  <form id='formSettings'>
    <input type='hidden' name='user_name' value='<?php echo $username; ?>'/>
    <input type='hidden' id='loadSettings' name='loadSettings' value='<?php echo $loadSettings; ?>'/>
    <input type='hidden' id='postStyleSettings' name='postStyleSettings' value=''/>
  </form>
<?php }

/**
 * function PrintOdysseyHTMLContainer($styleValues, $styleContent, $loadSettings, $loadedFromTemplate, $username, $settingsFileStatus, $contentTheme, $logoURL)
 * This function prints out the entire shell for Odyssey banking.  If anything changes in preContent or postContent after May 25th, 2018, it will not show up here.
 *
 * @param $styleValues -- This is all the changeable attributes for the brand file.
 * @param $styleContent -- This is the whole brand.css file to be put on the page.
 * @param $loadSettings -- "preview" or "production"
 * @param $loadedFromTemplate -- if loaded from template then need to save
 * @param $username -- The lowercase code of the credit union
 * @param $settingsFileStatus -- the status message
 * @param $contentTheme -- the content theme from the settings file.  If the file doesn't exist, then this is an empty string.
 * @param $logoURL -- the URL of the logo from the settings file.  If the file doesn't exist, then this is an empty string.
 * @param $devmode -- if devmode, if use the "dev" class for the monitor banner, otherwise use the "prod" class.
 */
function PrintOdysseyHTMLContainer($styleValues, $styleContent, $loadSettings, $loadedFromTemplate, $username, $settingsFileStatus, $contentTheme, $logoURL, $devmode,
                                   $bannerDiv) {
  $cloudFrontDomainName = GetCloudFrontDomainName ();
  $homecuKendoVersion = GetHomecuKendoVersion ();
  $bootstrapVersion = GetHomecuBootstrapVersion ();
  $fontAwesomeVersion = GetFontawesomeVersion ();
  ?>

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Credit Union Name</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex,nofollow" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel='stylesheet' media='all' type='text/css' href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/reset.css' />

    <!-- BASE BOOTSTRAP  -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/bootstrap/<?php echo $bootstrapVersion; ?>/css/bootstrap.css' rel='stylesheet'/>

    <!-- KENDO BOOTSTRAP COMMON STYLES - REPLACES kendo.common.css -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/KendoUI/<?php echo $homecuKendoVersion; ?>/kendo.common-bootstrap.min.css' rel='stylesheet'/>

    <!--  KENDO BOOTSTRAP THEME -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/KendoUI/<?php echo $homecuKendoVersion; ?>/kendo.<?php echo $contentTheme; ?>.min.css'
    rel='stylesheet'/>

    <!-- METIS MENU  -->
    <link href='/banking/static/css/metisMenu.css' rel='stylesheet'/>

    <!-- /* CUSTOM KENDO BOOTSTRAP STYLING */ -->
    <link rel='stylesheet' media='all' type='text/css' href='/shared/static/css/homecu-custom-kendo-boot.css' />

    <!-- /* HOMECU BASE LAYOUT */ -->
    <link rel='stylesheet' media='all' type='text/css' href='/shared/static/css/hcuLayout.css' />
    <link rel='stylesheet' media='all' type='text/css' href='/banking/static/css/layout.css' />

    <!-- /* FONT AWESOME */ -->
    <link href='https://<?php echo $cloudFrontDomainName; ?>/homecu/css/font-awesome/<?php echo $fontAwesomeVersion; ?>/css/font-awesome.css' rel='stylesheet'/>
    <!-- /**
     *  JAVASCRIPT INCLUDES
     */
    /* JQUERY BASE */     -->
    <script type='text/javascript' src='https://<?php echo $cloudFrontDomainName; ?>/jquery/js/jquery-1.10.2.js'></script>

    <!-- /* KENDO FULL WIDGET INCLUDE - CREATE CUSTOM FOR PRODUCTION */ -->
    <script src='https://<?php echo $cloudFrontDomainName; ?>/homecu/js/KendoUI/<?php echo $homecuKendoVersion; ?>/kendo.web.js'></script>
    <!-- /* BOOTSTRAP JAVASCRIPT */ -->
    <script src='https://<?php echo $cloudFrontDomainName; ?>/homecu/js/bootstrap/<?php echo $bootstrapVersion; ?>/js/bootstrap.js'></script>

    <!-- /* CUSTOM JQUERY TIMEOUT DIALOG SCRIPT */ -->
    <script type='text/javascript' src='/static/js/jquery-timeout-dialog.js'></script>

    <!-- /* JQUERY COOKIE */ -->
    <script type='text/javascript' src='https://<?php echo $cloudFrontDomainName; ?>/homecu/js/jquery.cookie.js'></script>

    <!-- /* HOMECU CUSTOM ERRORS FOR FORMS */ -->
    <script type='text/javascript' src='/shared/static/js/hcuFormError.js'></script>

    <!-- /* HOMECU CUSTOM NOTICES FOR FORMS - PROVIDES CHAINING*/ -->
    <script type='text/javascript' src='/banking/static/js/hcuFormNotice.js'></script>

    <!-- /* HOMECU CUSTOM KENDO SETTINGS */ -->
    <script type='text/javascript' src='/shared/static/js/kendo.homecu.custom.js'></script>

    <!-- /* metisMenu */ -->
    <script type='text/javascript' src='/banking/static/js/metisMenu.js'></script>

    <script>

      /* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
      function openNav() {
        $('#body-wrapper').addClass('collapse');
        $('#body-wrapper').addClass('in');
      }

      /* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
      function closeNav() {
        $('#body-wrapper').removeClass('collapse');
        $('#body-wrapper').removeClass('in');
      }

      function toggleNav() {
        var menuVisible = ($('#sidebar-nav:visible').length > 0);
        if (menuVisible) {
          closeNav();
        } else {
          openNav();
        }
      }
    </script>

    <style id="brandCssStyle">
      <?php echo $styleContent; ?>
    </style>

  </head>
  <body>
      <?php echo $bannerDiv; ?>
      <div id="body-wrapper" class=" ">
        <!-- top navbar -->
        <nav id="header" class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0px">
          <div>
            <div class="navbar-header">
              <button id="hcu-nav-toggle" onclick="toggleNav()" type="button" class="navbar-toggle collapsed" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

              <div id="logo-bar">
                <a class="navbar-brand" href="#">
                  <img alt="Home Banking Logo" class="logo" src="<?php echo $logoURL; ?>"/>
                  <p class="navbar-title">Sample Credit Union Name</p>
                </a>
              </div>
              <div class="desk-lang-select hidden-xs">
                <a href="#" title="Select Spanish"><div class="flag_icons flag_icons_es_US"></div></a>
                <a href="#" title="Select Polish"><div class="flag_icons flag_icons_pl_US"></div></a>
              </div>
            </div>
            <ul class="hcu-quick-nav-links navbar-nav nav navbar-top-links navbar-right" id="hcu-navbar-collapse">
              <li class="hcu-quick-nav-activity hcu-navbar-alert">
                <a href="#"><i class="fa fa-bell fa-fw"></i><span class="badge">5</span></a>
              </li>
              <li class="hcu-quick-nav-secure-mail " >
                <a href="#"><i class="fa fa-comments fa-fw"></i></a>
              </li>
              <li class="dropdown hcu-quick-nav-status  ">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="fa fa-tasks fa-fw"></i>
                  <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-status">
                  <li>
                    <div class="col-xs-12">
                      <!-- FORM DATA -->
                      <div class="form-group ">
                        <div class=" k-block ">
                          <div class="hcu-summary-block">
                            <div class="summary-row">
                              <div class="summary-desc">
                                <label class="control-label">Last Failed Login</label>
                              </div>
                              <div class="summary-value">
                                <p class="form-control-static">07/06/16 11:11</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group ">
                        <div class="k-block ">
                          <div class="hcu-summary-block">
                            <div class="summary-row">
                              <div class="summary-desc">
                                <label class="control-label">Last Successful Login</label>
                              </div>
                              <div class="summary-value">
                                <p class="form-control-static">07/08/16 11:29</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group ">
                       <div class=" k-block ">
                         <div class="hcu-summary-block">
                           <div class="summary-row">
                              <div class="summary-desc">
                                <label class="control-label">Account Status as of</label>
                              </div>
                              <div class="summary-value">
                                <p class="form-control-static">Fri May 23 04:32 PM 2008</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            <li class="dropdown hcu-quick-nav-user ">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
              </a>
              <ul class="dropdown-menu dropdown-user">
                <li>
                  <div class="col-xs-12">
                    <div class="hcu-alert-block k-block  ">
                      <div class="hcu-alert-block-icon">
                        <i class="fa fa-envelope fa-2x"></i>
                      </div>&nbsp;
                      <div class='hcu-alert-block-text'>
                        Current Email<br />
                        <label >
                          <p>nobody@homecu.net</p>
                        </label>
                      </div>
                      <hr />
                      <a href='#'>Update Now</a>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
            <li class="hcu-quick-nav-logout">
              <a href="#">
                <i class="fa fa-power-off fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <aside id="side-menu" class="navbar-default sidebar sidenav" role="navigation">
        <div id="sidebar-nav" class="sidebar-nav navbar-collapse ">
          <ul id='list-menu' class='nav root-nav-categories'>
            <li class='active hcu-selected-menu-group' data-rowid='6'>
              <a class='' href='#' target=''>
                <i class='fa fa-bank fa-fw'></i> Account <span class='fa arrow'></span>
              </a>
              <ul class='nav nav-second-level collapse in'>
                <li class='hcu-selected-menu-item'>
                  <a class='' href='#' target=''>Balances</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>History</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>e-Statements</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Download Transactions</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Alerts</a>
                </li>
                <li class=''>
                  <a class='' href='#'>My MoneyDesktop</a>
                </li>
              </ul>
            </li>
            <li class='active ' data-rowid='12'>
              <a class='' href='#' target=''>
                <i class='fa fa-exchange fa-fw'></i> Transfers <span class='fa arrow'></span>
              </a>
              <ul class='nav nav-second-level collapse in'>
                <li class=''>
                  <a class='' href='#' target=''>User Activity</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Transfer</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Scheduled Transactions</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>External Accounts</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>M2M Accounts</a>
                </li>
              </ul>
            </li>
            <li class='active ' data-rowid='16'>
              <a class='' href='#' target=''>
                <i class='fa fa-sitemap fa-fw'></i> Commercial<span class='fa arrow'></span>
              </a>
              <ul class='nav nav-second-level collapse in'>
                <li class=''>
                  <a class='' href='#' target=''>ACH Collections</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>ACH Payments</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>ACH Partners</a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a class=' hidden-xs ' href='#' target='_blank'><i class='fa fa-money fa-fw'></i> Pay Bills</a>
            </li>
            <li class=''>
              <a class=' visible-xs-block ' href='#' target=''><i class='fa fa-money fa-fw'></i> Mobile PayBills</a>
            </li>
            <li class=' ' data-rowid='25'>
              <a class='' href='#' target=''>
                <i class='fa fa-cogs fa-fw'></i> Profile<span class='fa arrow'></span>
              </a>
              <ul class='nav nav-second-level collapse '>
                <li class=''>
                  <a class='' href='#' target=''>Address Change</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>User Name</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Email</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Password</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Security</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Descriptions</a>
                </li>
              </ul>
            </li>
            <li class=' ' data-rowid='28'>
              <a class='' href='#' target=''>
                <i class='fa fa-sliders fa-fw'></i> Communications<span class='fa arrow'></span>
              </a>
              <ul class='nav nav-second-level collapse '>
                <li class=''>
                  <a class='' href='#' target=''>Notices</a>
                </li>
                <li class=''>
                  <a class='' href='#' target=''>Txt Banking</a>
                </li>
              </ul>
            </li>
            <li class=' ' data-rowid='30'>
              <a class='' href='#' target=''>
                <i class='fa fa-file-text-o fa-fw'></i> Disclosures<span class='fa arrow'></span>
              </a>
              <ul class='nav nav-second-level collapse '>
                <li class=''>
                  <a class='' href='#' target=''>Home Banking Terms</a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a class='' href='#' target=''>
                <i class='fa fa-power-off fa-fw'></i> Sign Off
              </a>
            </li>
          </ul>
        </div>
      </aside>
      <div id="content-wrapper" class="nothere">
        <div id="formStatus" class="homecu-formStatus k-block k-error-colored" style='display:none; margin-bottom:10px;max-width:800px;'></div>
        <div id='hideSubmitWait' style='position:relative; left:-2000px;top:-2000px;'>
          <div id='homecuSubmitWait' class='k-block' >
            <div class='k-loading-image'></div>
          </div>
        </div>
        <a href="javascript:void(0)" onclick="closeNav()" x-href="#content-wrapper" class="overlay-close" x-data-toggle="collapse" >&nbsp;</a>
        <div id="main-container">
          <div id="homecu-wrapper">
            <div id="homecu-container">
              <div id="homecu-padding-top" class="col-xs-12"></div> <!-- homecu-padding -->
              <a id='slide-in-handle' class='hcu-slide-in-handle-custom' href='#'>&nbsp;<span id='slide-in-handle-content'>Message</span>&nbsp;</a>
              <div id='slide-in-share' style='display:none;'>
                <div id='slide-in-content'>
                  <div id='slide-in-scroll'></div>
                  <div id='slide-in-content-close'>
                    <a href=''>Close</a>
                  </div>
                </div>
              </div>


<style>

  [id^="hcuTable"] .k-grid-header .k-header {
    text-align: center;
  }
  #slide-in-scroll {
    overflow: scroll;
  }
  #slide-in-content {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
  }
  #slide-in-content-close {
    text-align: left;
    display: table-row;
    height:20px;
  }
  #slide-in-content-close a {
    margin: 0 10px 10px 0;
    text-decoration: underline;
    font-weight: bold;
    color: #333;
    padding-left: 10px;
  }
  #slide-in-content-close a:visited,
  #slide-in-content-close a:hover {
    text-decoration: none;
  }
  #slide-in-share {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99;
    background-color: #FAFAFA;
    display: table;
    box-shadow: 0px 0px 2px 0px #999 inset;
    -webkit-box-shadow: 0px 0px 2px 0px #999 inset;
  }
  .slide-in-handle-icon {
    color: #FFF;
  }
  #slide-in-handle {
    position: absolute;
    width: calc(100% - 10px);
    display: block;
    height: 25px;
    border-top: 0;
    padding: 5px;
    top:0px;
    text-align:center;
    text-decoration: none;
    z-index: 90;

  }

  #slide-in-handle-content {
    font-size: 1.2em;
    margin: 0px 1px 1px 1px;
    height:19px;
    padding-top: 4px;
    text-decoration: underline;
  }
  #slide-in-share + #formStatus + #acctList {
    /* IF there is a embedded mkt message, then adjust by using the css sibling selector */
    margin-top: 15px;
  }
  .local-homecu-info {
    color: rgba(0, 0, 0, .54);
  }
  .local-notify-spacer {
    height: 35px;
  }

  #transparentDiv .form-check-input {
    vertical-align: baseline; /* reset.css removes Bootstrap's specification here. */
  }
  @media (max-width: 767px) {
    #slide-in-handle {
      top: 51px;
    }
    #slide-in-share {
      top: 51px;
    }

    #body-wrapper.no-show-info #slide-in-handle, #body-wrapper.no-show-info #slide-in-share {
      top: 135px;
    }

    #homecuBannerArea + #body-wrapper #slide-in-handle, #homecuBannerArea + #body-wrapper #slide-in-share {
      top: 51px;
    }

    #homecuBannerArea + #body-wrapper.no-show-info #slide-in-handle, #homecuBannerArea + #body-wrapper.no-show-info #slide-in-share {
      top: 135px;
    }
  }
</style>

<script type="text/javascript">
$(document).ready(function(){

  // CLICK TO CLOSE POPUP, MUST CANCEL CHANGES BEFORE CLOSE
  $(document).on('click', '.k-overlay', function() {
    var wnd = $("#detailsPopUp").data("kendoWindow");
    if (wnd !== undefined) {
      wnd.close();
    }
  });

  var showEmbedContent = "<div align=\"center\">"
      showEmbedContent += "<img src=\"\/IMAGES\/vacation2.jpg\" alt=\"\" border=\"0\" style=\"width:100%;max-width:600px\"\/><\/div>";
    $('#slide-in-scroll').html(showEmbedContent);
    $('#formStatus').insertAfter($('#slide-in-share'));

  showMsgInset();

  var userInterrupt = false;

  function showMsgInset() {

  setTimeout(function() {
    if (!userInterrupt) {
      $('#slide-in-share').slideUp("slow");
    }
  }, 8000);
  }

  $("#slide-in-handle").click(function(e) {

    userInterrupt = true;
    e.preventDefault();

    if ($('#slide-in-share').is(':hidden')) {

      $('#slide-in-share').slideDown('slow');
    } else {

      $('#slide-in-share').slideUp("slow");

    }
  });
  $('#slide-in-content-close').click(function(e) {
    e.preventDefault();
    userInterrupt = true;
    $('#slide-in-share').slideUp('slow');
  });
});

$('#list-menu').metisMenu({toggle: false});
</script>

<?php PrintSiteBranding($styleValues, $username, $loadSettings, $settingsFileStatus, $loadedFromTemplate); ?>

<p class="contentText">Here is some text to see content font color.</p>

              <div id="homecu-padding-bottom" class="col-xs-12"></div> <!-- homecu-padding -->
            </div><!-- homecu-container -->
          </div><!-- homecu-wrapper -->
        </div><!-- main-container -->
        <footer class="footer">
          <div class="mbl-lang-select visible-xs-block">
            <a href="#" title="Select Spanish">
              <div class="flag_icons flag_icons_es_US"></div>
            </a>
            <a href="#" title="Select Polish">
              <div class="flag_icons flag_icons_pl_US"></div>
            </a>
          </div>
          <div class="footer-container">
            <p class="text-muted">&copy; 2018 HomeCU, LLC.  All Rights Reserved</p>
          </div>
        </footer>
      </div><!-- content-wrapper -->
    </div><!-- body-wrapper-->
  </body>
</html>

<?php }