/************************************
  REVISION LOG ENTRY
  Revision By: Mihai Filimon ( mfl@exontrol.com )
  Created on 06/13/2024 08:20:00 AM

  Comments: jshelp.js

  This code may be used in compiled form in any way you desire. This
  file may not be redistributed modified or unmodified without the authors
  written consent.
  ************************************/

/////////////////////////////////////////////////////////// (QP) (QueryParam)
//
// The QP namespace provides functions to update or query the URL parameters. 
//
// The QP namespace includes definitions for the following methods:
//
//  Split(url) {object}, splits the URL into location, params and hash parts, as an object of {a(ll),u(rl),h(ash),l(ocation),p(arams)} type
//  Add(url, param, value) {string}, adds(replaces) the parameter of the specified url and returns the new url(adds/replaces "param=value" or "param")
//  Del(url, param) {string}, removes the parameter of the specified url and returns the new url
//  Has(url, param) {string}, gets the value of the specified parameter within the giving url (returns null if no parameter is found)
//
///////////////////////////////////////////////////////////

/**
 * @description Creates the QP namespace
*/
QP = function()
{
  /**
   * @description The split() method splits the URL into location, params and hash parts, as an object of {a(ll),u(rl),h(ash),l(ocation),p(arams)} type
   * @param {string} url A string expression that defines the URL to split
   * @returns {object} Returns an object of {a(ll),u(rl),h(ash),l(ocation),p(arams)} type as explained:
   * 
   *  a(ll) {string}, indicates the unsplited URL (as it was provided)
   *  u(rl) {string}, specifies the URL without the # hash section (location + params)
   *  h(ash) {string}, indicates empty string or the # hash section (includes the '#' character)
   *  l(ocation) {string}, specifies the location of the URL (the string precceding the ? character, includes protocol, domain and path)
   *  p(arams) {string}, specifies the query-parameters of the URL (the string after the ? character, includes '?' character)
   * 
  */
  function split(url)
  {
    var iHash = String(url || "").indexOf('#'),         // {number} indicates the position of '#' character within the url (-1 if not found)
        u = ~iHash ? url.substr(0, iHash).trim() : url, // {string} specifies the URL without the # hash section (location + params)
        iParam = u.indexOf('?');                        // {number} indicates the position of '?' character within the url (-1 if not found)
    return {
      a: url,                                           // a(ll) {string}, indicates the unsplited URL (as it was provided)
      u: u,                                             // u(rl) {string}, specifies the URL without the # hash section (location + params)
      h: ~iHash ? url.substr(iHash).trim() : "",        // h(ash) {string}, indicates empty string or the # hash section (includes the '#' character)
      l: ~iParam ? u.substr(0, iParam).trim() : u,      // l(ocation) {string}, specifies the location of the URL (the string precceding the ? character, includes protocol, domain and path)
      p: ~iParam ? u.substr(iParam).trim() : "",        // p(arams) {string}, specifies the query-parameters of the URL (the string after the ? character, includes '?' character)
    }
  }

  /**
   * @description The getParamEx() method gets the regular-expression to search for the parameter
   * @param {string} param Specifies the name of the parameter to look for
   * @returns {object} Returns an object of RegExp type
  */
  function getParamEx(param)
  {
    return new RegExp("[?&]" + param + "($|[&]|=[^&]*)", "i");
  }

  /**
   * @description The add() method adds(replaces) the parameter of the specified url (adds/replaces "param=value" or "param")
   * @param {string} url Specifies an URL to change
   * @param {string} param Indicates the name of the parameter to add
   * @param {string} value Specifies the value of the parameter to add
   * @returns {string} Returns the new URL (includes the added parameter)
  */
  function add(url, param, value)
  {
    var oURL = split(url),
        oParamEx = getParamEx(param = String(param || "").trim()),
        separator = oURL.u.indexOf('?') != -1 ? "&" : "?",
        oMatch = oURL.u.match(oParamEx);

    // builds the value as "param=value" or "param"
    if ( value = String(value || "").trim() )
      value = "=" + value;
    value = param + value;

    // adds or replaces the parameter
    return (oMatch ? oURL.u.substr(0,oMatch.index + 1) + value + oURL.u.substr(oMatch.index + oMatch[0].length) : oURL.u + separator + value) + oURL.h
  }

  /**
   * @description The del() method removes the parameter of the specified url
   * @param {string} url Specifies an URL to change
   * @param {string} param Indicates the name of the parameter to delete
   * @returns {string} Returns the new URL (excludes the parameter)
  */
  function del(url, param)
  {
    var oURL = split(url);
    url = oURL.u.replace(getParamEx(String(param || "").trim()), '');

    if (url.slice(-1) == '?')
      url = url.slice(0, -1); // removes the last ? character if any

    if (url.indexOf('?') < 0)
      url = url.replace(/&/, '?'); // replace the first occurrence of & by ? if no ? is present
    
    return url + oURL.h;
  }

  /**
   * @description The has() method gets the value of the specified parameter within the giving url (returns undefined if no parameter is found)
   * @param {string} url Specifies an URL to query
   * @param {string} param Indicates the name of the parameter to request
   * @returns {string} Returns null (no parameter found), or a string expression that defines the value of the giving parameter (could be empty string)
  */
  function has(url, param)
  {
    var oParam = split(url).u.match(getParamEx(param = String(param || "").trim())),  // {array} returns the matches, as an Array object
        nEqual;                                                                       // {number} specifies the position of the "=" character inside the match

    if ( oParam )
    {
      oParam = oParam[0];
      nEqual = oParam.indexOf("=");
      oParam = ~nEqual ? oParam.substr(nEqual + 1) : "";
    }
    return oParam;
  }

  return {
    /**
     * @description The Split(url) method splits the URL into location, params and hash parts, as an object of {a(ll),u(rl),h(ash),l(ocation),p(arams)} type
     * @param {string} url A string expression that defines the URL to split
     * @returns {object} Returns an object of {a(ll),u(rl),h(ash),l(ocation),p(arams)} type as explained:
     * 
     *  a(ll) {string}, indicates the unsplited URL (as it was provided)
     *  u(rl) {string}, specifies the URL without the # hash section (location + params)
     *  h(ash) {string}, indicates empty string or the # hash section (includes the '#' character)
     *  l(ocation) {string}, specifies the location of the URL (the string precceding the ? character, includes protocol, domain and path)
     *  p(arams) {string}, specifies the query-parameters of the URL (the string after the ? character, includes '?' character)
     * 
     * @example
     * 
     *  QP.Split("http://exontrol.com/rhelp.jsp?product=exgrid#bookmark") 
     * 
     *    returns: 
     * 
     *  {
     *    a:'http://exontrol.com/rhelp.jsp?product=exgrid#bookmark'
     *    h:'#bookmark'
     *    l:'http://exontrol.com/rhelp.jsp'
     *    p:'?product=exgrid'
     *    u:'http://exontrol.com/rhelp.jsp?product=exgrid'
     *  }
    */
    Split: split,
    /**
     * @description The Add(url, param, value) method adds(replaces) the parameter of the specified url and returns the new url (adds/replaces "param=value" or "param")
     * @param {string} url Specifies an URL to change
     * @param {string} param Indicates the name of the parameter to add
     * @param {string} value Specifies the value of the parameter to add
     * @returns {string} Returns the new URL (includes the added parameter)
     * @example
     * 
     *  QP.Add("http://exontrol.com/rhelp.jsp?product=exgrid#bookmark","src","InsideZooms_default") 
     * 
     *    returns: 
     * 
     *  "http://exontrol.com/rhelp.jsp?product=exgrid&src=InsideZooms_default#bookmark"
    */
    Add: add,
    /**
     * @description The Del(url, param) method removes the parameter of the specified url and returns the new url
     * @param {string} url Specifies an URL to change
     * @param {string} param Indicates the name of the parameter to add
     * @returns {string} Returns the new URL (excludes the parameter)
     * @example
     * 
     *  QP.Del("http://exontrol.com/rhelp.jsp?product=exgrid#bookmark","product") 
     * 
     *    returns: 
     * 
     *  "http://exontrol.com/rhelp.jsp#bookmark"
    */
    Del: del,
    /**
     * @description The Has(url, param) method gets the value of the specified parameter within the giving url (returns null if no parameter is found)
     * @param {string} url Specifies an URL to query
     * @param {string} param Indicates the name of the parameter to request
     * @returns {string} Returns null (no parameter found), or a string expression that defines the value of the giving parameter (could be empty string)
     * @example
     * 
     *  QP.Has("http://exontrol.com/rhelp.jsp?product=exgrid#bookmark","product") 
     * 
     *    returns: 
     * 
     *  "exgrid"
    */
    Has: has
  };
}();

var oDEF = 
    {
      OPTS: "options",      // {string} holds the 'options' string
      LIVEX: "live-sample", // {string} specifies the identifier of "live example" links
      MAIN: "main",         // {string} specifies the identifier of the main section
      NAME: "name",         // {string} specifies the identifier to a <template> section that specifies the control's name
      EXPANDED: "expanded", // {string} specifies the class name to expand the object
      OBJECT: "object",     // {string} specifies the class name that defines an object
      PROPERTY: "property", // {string} specifies the class name that defines a property
      METHOD: "method",     // {string} specifies the class name that defines a method
      READONLY: "readonly", // {string} specifies the class name that defines a method
      TOPIC: "topic",       // {string} specifies the class name that defines a topic
      HIDDEN: "hidden",     // {string} specifies the name of the class for non-visible elements
      ACTIVE: "active",     // {string} specifies the name of the class to activate a "LI" element
      GLYPH: "glyph",       // {string} specifies the name of the class that displays the expand/collapse glyphs
      CLOSE: "close",       // {string} specifies the name of the class/identifier that displays the filter's close button
      PX: "px",             // {string} indicates the px-units
      TOC: "TOC",           // {string} indicates the identifier of the document's `TOC` element (Table of Contents)
      CNT: "CNT",           // {string} indicates the identifier of the document's `CNT` element (Content)
      A: "A",               // {string} holds the <a> elements
      H3: "H3",             // {string} holds the <h3> elements
      F: "F",               // {string} specifies the identifier of the DIV that hosts the `Filter` element (Parent-Filter)
      FILTER: "Filter",     // {string} indicates the identifier of the document's `Filter` element (Filter)
      L: "L",               // {string} indicates the identifier of the document's `L` element (Left side)
      R: "R",               // {string} indicates the identifier of the document's `R` element (Right side)
      PARAM:                // {object} defines the parameters of the current document
      {
          S: "S",           // {string} specifies the source to display (indicates the URL to set for `CNT` element)
          F: "F"            // {string} specifies the current filter
      }
    },
    oCurrentActive,         // {object} holds a reference to the current selected element (active() method
    oFilter;                // {object} holds a reference to the Filter input

/**
 * @description The feU/forEachUntil() method invokes the callback for each element of the HTMLCollection object until it returns a truly value (handy function to enumerate the elements of HTMLCollection)
 * @param {callback} callback Specifies the function of callback(oElement) {boolean} type that's invoked for each element
 * @returns {any} Returns the result of the last callback
*/
function feU(collection, callback)
{
  var oResult;
  for ( var i = 0, l = collection.length; !oResult && i < l; i++ )
    oResult = callback(collection.item(i));
  return oResult;
}

/**
 * @description The toArray() method collects the items of the collection into an array
 * @returns {array} Returns a collection of elements
*/
function toArray(collection)
{
  var rgResult = [];
  feU(collection, function(oElement)
  {
    rgResult.push(oElement);
  })
  return rgResult;
}

/**
 * @description The getP() method gets the value of the specified parameter within the browser's URL (returns null if no parameter is found)
 * @param {string} param Indicates the name of the parametrer to request
 * @returns {string} Returns null (no parameter found), or the value of the specified parameter
*/
function getP(param)
{
  var result = QP.Has(href(), param);
  if ( result != null )
    result = decodeURIComponent(result);
  return result;
}

/**
 * @description The setP() method updates (add,replace or remove) the param's value for the browser's URL
 * @param {string} param Indicates the name of the parametrer to add/replace/remove
 * @param {string} value Specifies the value of the parameter (undefined to remove the parameter)
*/
function setP(param, value)
{
  wR().history.replaceState(null, null, QP[value != null ? "Add" : "Del"].call(QP, href(), param, value));
}

/**
 * @description The uCL/updateclassList() method gets the "add" or "remove" methods of DOMTokenList object
 * @param {boolean} bRemove Specifies a boolean expression to return the "remove", else "add"
 * @returns {string} Returns "remove" or "add" token
*/
function uCL(bRemove)
{
  return bRemove ? "remove" : "add";
}

/**
 * @description The preventDefault() method prevents any default-action
 * @param {object} event Specifies the event to cancel its default-action
*/
function preventDefault(event)
{
  event.preventDefault();
  event.stopImmediatePropagation();
  event.stopPropagation();
}

/**
 * @description The wR() method returns the root-window
*/
function wR()
{
  return window.parent;
}

/**
 * @description The href() method returns a string which contains the entire URL of the page, including the protocol
 * @returns {string} Returns a string which contains the entire URL of the page, including the protocol
*/
function href()
{
  return wR().location.href;
}

/**
 * @description The runCSSMedia() method indicates that the current document is running under the "@media only screen and (max-width: 580px)" CSS rule
 * @retruns {boolean} Returns true if the current document is running under the "@media only screen and (max-width: 580px)" CSS rule
*/
function runCSSMedia()
{
  var oMain = document.getElementById(oDEF.MAIN);  // {object} holds a reference to `main` part of the document
  return getComputedStyle(oMain).float != "right";
}

/**
 * @description The ensureVisibleHash() method scrolls the window's content to ensure that the element with the specified identifier (URL hash) is visible within the client's viewport
*/
function ensureVisibleHash()
{
  var hash = wR().location.hash,
      oLeft,
      oScrollTo,
      oHeader;

  if ( hash && (oScrollTo = document.getElementById(hash.replace("#",""))) )
  {
    oLeft = document.getElementById(oDEF.L);
    oHeader = toArray(document.getElementsByTagName("header"))[0];
    window.scrollBy(
    {
      top: oScrollTo.getBoundingClientRect().top - (runCSSMedia() ? oLeft && oLeft.getBoundingClientRect().height || 0 : oHeader && (oHeader.getBoundingClientRect().height - 1) || 0),
      behavior: 'smooth'
    })
  }
}

/**
 * @description The eV/ensureVisible() method ensures that the giving element fits the view's client area (scroll into the view)
 * @param {object} oElement Specifies the element to fit the view's client area (scroll into the view)
*/
function eV(oElement)
{
  /**
   * @description The scrollIntoView() method scrolls the element to fit its parent
   * @param {object} oElement Specifies the element to fit the view's client area (scroll into the view)
   * @since 1.7
  */
  function scrollIntoView(oElement)
  {
    /**
     * @description The getScrollParent() method determines the parent-element responsible to scroll the element
     * @param {object} oElement Specifies the element to fit the view's client area (scroll into the view)
     * @returns {object} Returns the parent-element responsible to scroll the element
    */
    function getScrollParent(oElement)
    {
      while (oElement && !/(auto|scroll)/.test(getComputedStyle(oElement).overflow) )
        oElement = oElement.parentElement;
      return oElement;
    }

/*    
    // scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user
    oElement.scrollIntoView(
    { 
      behavior: 'smooth',
      block: 'nearest',
      inline: 'nearest'
    });
//*/    

///*
    // replaces the element to fit within the viewport when it displays multiple anchor elements
    var rgAnchor = toArray(oElement.getElementsByTagName(oDEF.A));
    if ( rgAnchor.length > 1 )
      oElement = rgAnchor[0];

    // determines the number of pixels needed to vertically scroll the view so that either the top or bottom side of the element aligns with the viewport
    var rtElement = oElement.getBoundingClientRect(),
        oScrollParent = getScrollParent(oElement),
        rtContainer = oScrollParent.getBoundingClientRect(),
        topFixedHeight = 64,
        bottomFixedHeight = 4 + (oScrollParent.offsetHeight - oScrollParent.clientHeight),
        scrollBy = 0,
        dy = 0;

    if ( (dy = rtElement.top - topFixedHeight) < 0 )
      scrollBy = dy;
    else
      if ( (dy = (rtElement.bottom - (rtContainer.bottom - bottomFixedHeight))) > 0 )
        scrollBy = dy;

    scrollBy && oScrollParent.scrollBy(
    {
      behavior: "smooth",
      top: scrollBy
    })
//*/
  }


  if ( oElement )
  {
    var oCL,  // {object} indicates an object of DOMTokenList type that holds classes of the element
        o;    // {object} holds a reference to an HTML element

    // adds `expanded` class to "LI" of `object` class (expand the object that contains the property)
    ((oElement.classList.contains(oDEF.OBJECT) && (oCL = oElement.classList)) || ((o = oElement.parentElement) /*<ul>*/ && (o = o.parentElement) /*<li>*/ && o.classList.contains(oDEF.OBJECT) && (oCL = o.classList))) &&
      oCL && 
        oCL.add(oDEF.EXPANDED);

    // scrolls the element's parent container so the element fits the view's client area
    scrollIntoView(oElement);
  }
}

/**
 * @description The findAnchorByRef() method looks for the anchor (<a>) element that is a child of the element L and matches the giving URL
 * @param {object} href Specifies the URL to search for
 * @returns {HTMLAnchorElement} Returns undefined if no anchor is found, or the HTMLAnchorElement object that hosts the giving URL
*/
function findAnchorByRef(href)
{
  var oLeft = document.getElementById(oDEF.L),
      oQueryParam;

  if (oLeft)
  {
    oQueryParam = QP.Split(href);
    href = oQueryParam.l + oQueryParam.h;
    return feU(oLeft.getElementsByTagName(oDEF.A), function(oElement)
    {
        return String(oElement.href) == href && oElement;
    })
  }
}

/**
 * @description The active() method activates or selects the anchor (<a>) element that is a child of the L element and matches the current URL.
*/
function active()
{
  // removes the "active" elements (one in L section, and one in main section)
  oCurrentActive && toArray(document.getElementsByClassName(oDEF.ACTIVE)).forEach(function(oElement)
  {
    oElement.classList.remove(oDEF.ACTIVE);
  })

  if (oCurrentActive = findAnchorByRef(href()))
  {
    // updates the window's title
    var oQueryParam = QP.Split(oCurrentActive.href),
        oDocument,
        nHash,
        oActiveHeader;

    if ( oQueryParam.h )
    {
      oDocument = wR().document;
      oDocument._title = oDocument._title || oDocument.title;
      oDocument.title = oDocument._title.replace(" class", "." + oQueryParam.h.replace("#","").replace(/\./g, "") + " " + (oCurrentActive.className || oCurrentActive.parentElement.className).replace("active", "").trim() );
    }

    // highlights the link's header (above description) in the main section
    nHash = oCurrentActive.href.indexOf("#");
    if ( ~nHash )
      if ( oActiveHeader = document.getElementById(oCurrentActive.href.substr(nHash + 1)) )
          oActiveHeader.classList.add(oDEF.ACTIVE);

    // activates the anchor's parent element and ensures that it fits the view
    oCurrentActive = oCurrentActive.parentElement;
    oCurrentActive.classList.add(oDEF.ACTIVE);
    eV(oCurrentActive);
  }
}

/**
 * @description The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
*/
window.addEventListener("load", function()
{
  /**
   * @description The initFilter() method initializes the Filter element to filter the LI elements within the L element.
  */
  function initFilter()
  {
    var span;
    if ( oFilter = document.getElementById(oDEF.FILTER) )
    {
      // adds the SPAN `✖` character
      span = document.createElement("SPAN");
        span.id = oDEF.CLOSE;         // specifies the "id=`close`"
        span.innerHTML = "&#x2716;";  // displays the `✖` character
        span.onclick = function()
        {
          onFilter(oFilter.value = "");
        }
      oFilter.parentElement.appendChild(span);

      // applies the filter
      onFilter(oFilter.value = getP(oDEF.PARAM.F));

      // calls the onFilter method when the user changes the input
      oFilter.oninput = function(event)
      {
        onFilter(event && event.target.value || "");
      }
    }
  }

  /**
   * @description The onFilter() method is called once the filter is changed to show/hide the LI elements of the `TOC` element
   * @param {string} value Specifies the filter (if null/undefined/empty the filter is removed)
  */
  function onFilter(value)
  {

    /**
     * @description The textContent() method gathers the element's text for use in the filtering process
     * @param {HTMLBaseElement} oElement Indicates the element to get text for
     * @returns {string} Returns the element's text for use in the filtering process
    */
    function textContent(oElement)
    {
      var sResult = oElement.innerText;

        sResult += " " + (oElement.className || oElement.parentElement.className); // adds event, method, ...

        sResult += " " + oElement.dataset.values + " " + oElement.parentElement.dataset.values; // adds "data-values"

      return sResult.trim().toLowerCase();
    }

    /**
     * @description The match() method specifies whether the element matches the filter
     * @param {HTMLAnchorElement} oElement Specifies the element to check
     * @returns {boolean} Returns true if the element matches the filter
    */
    function match(oElement)
    {
      var text = textContent(oElement);
      for ( var i = 0, l = rgValues.length; i < l; i++ )
        if ( text.indexOf(rgValues[i]) < 0 )
          return false;
      return true;
    }

    var rgValues = [],  // {array} specifies the value to match (splits the value by space, to match all using AND operator)
        oLeft = document.getElementById(oDEF.L),
        rgAnchor,
        oCL;

    // converts the filter to lower-case (to apply insensitive filter) and splits it to get values to filter AND for
    (value = String(value || "").toLowerCase().trim()).split(" ").forEach(function(v)
    {
      (v = v.trim()) && rgValues.push(v);
    })

    // lists all the "hidden" elements and removes the "hidden" class from them
    toArray(document.getElementsByClassName(oDEF.HIDDEN)).forEach(function(oElement)
    {
      oElement.classList.remove(oDEF.HIDDEN);
    })

    // adds "hidden" class
    if ( oLeft && rgValues.length ) 
    {
      // lists the <a> elements and adds the "hidden" class to those that do not match the filter.
      (rgAnchor = toArray(oLeft.getElementsByTagName(oDEF.A))).forEach(function(oElement)
      {
        !match(oElement) && oElement.parentElement.classList.add(oDEF.HIDDEN);
      });

      // lists the <a> elements and ensures that their parent visible elements do not include the 'hidden' class.
      rgAnchor.forEach(function(oAnchor)
      {
        if ( !oAnchor.parentElement.classList.contains(oDEF.HIDDEN) )
          for (var o = oAnchor; o && (o.id != oDEF.L); o = o.parentElement )
            o.parentElement.classList.remove(oDEF.HIDDEN);
      });

      // hides the <h3> elements that displays only "hidden" elements
      toArray(oLeft.getElementsByTagName(oDEF.H3)).forEach(function(oTopic)
      {
        if ( !feU(oTopic.nextElementSibling.children, function(oElement)
        {
          return !oElement.classList.contains(oDEF.HIDDEN);
        }))
          oTopic.classList.add(oDEF.HIDDEN);
      })
    }

    // updates the browser's `F` param
    setP(oDEF.PARAM.F, value || null /*removes if empty string*/);

    // adds or removes the `close` class to parent element of "filter" element
    if ( oFilter )
      (oCL = oFilter.parentElement.classList)[uCL(!value)].call(oCL, oDEF.CLOSE);

  }

  /**
   * @description The initClickAnchors() method replaces the default behavior for all <a> elements (includes the F parameter to the window's location)
  */
  function initClickAnchors()
  {
    /**
     * @description The onClickAnchor() method opens the anchor's reference into the <a> element
     * @param {object} event Indicates the event that generates the click event
    */
    function onClickAnchor(event)
    {
      preventDefault(event);

      var href = String(event.target.href),
          filter = document.getElementById(oDEF.FILTER);

      // adds the filter's value to the href, as F=
      if ( filter && filter.value )
        href = QP.Add(href, oDEF.F, filter.value);

      wR().location = href;
    }

/*    
    // replaces the click event handler for all <a> elements
    feU(document.getElementsByTagName(oDEF.A), function(oAnchor)
    {
      oAnchor.onclick = onClickAnchor;
    });
*/    
    window.addEventListener("click", function(event)
    {
      if (event.target.tagName == oDEF.A)
        if ( !event.target.classList.contains(oDEF.LIVEX) ) // no live-sample
          onClickAnchor(event);
    })
  }

  /**
   * @description The initMain() method loads the control's webpage if the 'main' section is not populated.
  */
  function initMain()
  {
    var oMain = document.getElementById(oDEF.MAIN),
        oName;

    if ( oMain && !oMain.innerText.trim() )
      if ( oName = document.getElementById(oDEF.NAME) )
          wR().location = oName.innerHTML + ".html";

  }

  /**
   * @description The initLiveSample() method initializes the "live-sample" parts
  */
  function initLiveSample()
  {
    /**
     * @description The getFilterName() method extracts the name to filter for (for instance, removes the Get, Set prefix)
     * @param {String} name Specifies the name of the method such as GetDef, SetDef, ...
     * @returns {String} Returns the name to filter for
    */
    function getFilterName(object, name)
    {
      /**
       * @description The removeOptions() method removes the "options" at the end of the string
       * @param {string} item Specifies the string to change
       * @returns {string} Returns the string with the "options" suffix removed
      */
      function removeOptions(item)
      {
        if (item.endsWith(oDEF.OPTS)) // ends with "options", such as "backgroundoptions", ..., extracts "background"
          item = item.substr(0, item.length - oDEF.OPTS.length);
        return item;
      }

      /**
       * @description The isProperty() method checks whether the giving method is a possible property
       * @param {string} name Specifies the name of the method to check
       * @returns {boolean} Returns true if the method is actually a property
      */
      function isProperty(name)
      {
        if ( name.startsWith("Get") || name.startsWith("Set") )
        {
          name = name.substr(3);
          return (document.getElementById("Get" + name) || document.getElementById(".Get" + name)) && (document.getElementById("Set" + name) || document.getElementById(".Set" + name)); // Get and Set indicates a property or an option
        }
      }

      // eliminates any prefixes such as Get or Set
      if ( isProperty(name) )
          name = name.substr(3);
      name = name.toLowerCase();
      
      // merges the object with the name (removes options)
      if ( object && (object.length > 2) ) // ignores objects such as "tv", "sv", "cv" and so on
        if ( object.indexOf(name) < 0 ) // prevents combining the object with the name if the object already includes the name, such as "surface.elementoptions" and "elementoptions"
        {
          if ( object = removeOptions(object).replace(/\.*$/, '') ) // ends with "options", such as "backgroundoptions", ..., extracts "background", or "calendar.options", ..., extracts "calendar"
          {
            // extracts the substring following the last '.' in the string, if present
            var nDot = object.lastIndexOf('.');
            if ( ~nDot )
                object = object.substr(nDot + 1);

            // merges the object with the name
            if ( object )
              if ( product.indexOf(object) < 0 ) // prevents the combination of the object with the name if the product's name already includes it
                if ( name.indexOf(object) < 0 ) // prevents duplicating the name
                {
                  object = object.replace(/s$/, ''); // removes the last s from the object, such of "itembars" to "itembar", "columns" to "column", ...
                  name = object + " " + name; // combines the filter
                }
          }
        }
        else
          name = removeOptions(name); // ends with "options", such as "backgroundoptions", ..., extracts "background"

      return name.toLowerCase();
    }

    var oName = document.getElementById(oDEF.NAME),
        product = oName && oName.innerHTML.trim().toLowerCase() || "",
        url = "/exhelper.jsp?config=/js&product=",
        oHeader = toArray(document.getElementsByTagName("header"))[0],
        object = "";

    if (wR().location.protocol == "file:");
      url = "https://exontrol.com" + url;

    // extracts the object's name from header
    if (oHeader)
    {
      object = oHeader.innerText;
      var nObject = object.indexOf("(");
      if ( ~nObject )
        object = object.substr(0, nObject);
      object = object.trim().toLowerCase();
    }
    
    // builds the base url as: "exhelper.jsp?config=/js&product=...&F=..."
    if ( product )
    {
      if (product == object )
        object = "";
      product = "ex" + product;

      product = product.replace("exirecur", "exicalendar");
    }
    url += product + "&F=" + product;

    // enumerates the "live-sample" anchor elements and sets the href element
    toArray(document.getElementsByClassName(oDEF.LIVEX)).forEach(function(oLiveSample)
    {
      var originalName = oLiveSample.innerText.trim(),
          name = originalName.toLowerCase();
      if ( object != name && (product != "ex" + name) )
      {
        oLiveSample.href = (url + " "+ getFilterName(object, originalName)).trim();
        oLiveSample.innerText = "live example";
      }
      else
        oLiveSample.classList.add(oDEF.HIDDEN);
    })
  }

  /**
   * @description The initResizeL() method allows resizing the L part of the window
  */
  function initResizeL()
  {
    /**
     * @description The iSV/isVerticalSplit() method determines whether the event's pointer hovers the `TOC` vertical-spliter
     * @param {object} event Indicates the event to check its pointer
    */
    function iSV(event)
    {
      return !runCSSMedia() && (event.target.id == oDEF.L);
    }

    /**
     * @description The rszLR/resizeLeftRight() method resizes the `L` and `R` parts of the mainframe
     * @param {object} event Indicates the event that initialize the resize
    */
    function rszLR(event)
    {
      /**
       * @description The getStyle() method gets the style of the element
       * @param {HTMLElement} element A HTMLElement object to request its style
       * @returns {object} Returns an live object (of CSSStyleDeclaration type) containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
      */
      function getStyle(element)
      {
        return window.getComputedStyle(element);
      }

      /**
       * @description The resizeBy() method resizes the `L`/`R` parts by specified ammont
       * @param {number} dx Indicates the offset to resize by
      */
      function resizeBy(dx)
      {
        // resizes the `L`/`R` parts by specified ammont
        oLeft.style.width = Math.max(6, original.w + dx) + oDEF.PX;
        if ( oRight )
          oRight.style.width = "calc(100% - " + oLeft.style.width + ")"
      }

      /**
       * @description The onMoveResizeWidth() handler is associated with the window's mousemove event resize the width
       * @param {MouseEvent} event A MouseEvent that occured
      */
      function onmove(event)
      {
        // prevents any default-action
        preventDefault(event);
        
        // resizes the width of all target-elements
        resizeBy(event.screenX - original.x);
      }

      /**
       * @description The onup() handler is associated with the window's mouseup event.
      */
      function onup()
      {
        window.removeEventListener("mousemove", onmove);
        window.removeEventListener("mouseup", onup);
      }

      var original =                                // {object} holds initial position of the `L`/`R` parts of the document
          {
            x: event.screenX,                       // {number} provides the horizontal coordinate (offset) of the mouse pointer in global (screen) coordinates.
            w: parseInt(getStyle(oLeft).width)      // {number} specifies the initial-width of the `L` part of the document
          }

        // prevents any default-action
        preventDefault(event);

        // sets the mousemove/mouseup event handlers to resize the width/height of the rgTargets by drag and drop
        window.addEventListener("mousemove", onmove );
        window.addEventListener("mouseup", onup );
    }

    var oWindow = window,
        oLeft = document.getElementById(oDEF.L),
        oRight = document.getElementById(oDEF.MAIN);

    if ( oLeft )
    {
      /**
       * @description The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
      */
      oWindow.addEventListener("mousemove", function(event)
      {
        oLeft.style.cursor = iSV(event) ? "col-resize" : "";
      })

      /**
       * @description The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.
      */
      oWindow.addEventListener("mousedown", function(event)
      {
        if ( iSV(event) ) // clicks the right-side of the `L`-element, to resize `L` and `R` parts of the mainframe
          rszLR(event);
      });      
    }
  }

  initMain();           // loads the first link of the navbar if the 'main' section is not populated.
  initClickAnchors();   // replaces the default behavior for all <a> elements (includes the F parameter to the window's location)
  initFilter();         // initializes the Filter element to filter the LI elements within the L element.
  active();             // activates or selects the anchor (<a>) element that is a child of the L element and matches the current URL.
  ensureVisibleHash();  // scrolls the window's content to ensure that the element with the specified identifier (URL hash) is visible within the client's viewport
  initLiveSample();     // initalizes the "live-sample" parts
  initResizeL();        // allow resizing the L part
})

/**
 * @description The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).
 */
wR().addEventListener("hashchange", function(event)
{
  active();             // activates or selects the anchor (<a>) element that is a child of the L element and matches the current URL.
  ensureVisibleHash();  // scrolls the window's content to ensure that the element with the specified identifier (URL hash) is visible within the client's viewport
});