/************************************
  REVISION LOG ENTRY
  Revision By: Mihai Filimon ( mfl@exontrol.com )
  Created on 11/23/2020 10:00:00 AM
  Modified on 02/25/2022 11:00:00 AM (*Added: Include the "title" (description) and "data-values" (values of an enumeration type) attributes of the <a> inside of LI element, while filtering. Currently, the filter includes the property, method, event or type's name, description and values (for enumeration types) (enum type includes each defined constants such as <a href="CheckStateEnum_enum.htm" data-values="Unchecked(0),Checked(1),PartialChecked(2)">CheckStateEnum</a>))
  Modified on 09/19/2022 10:50:00 AM (includes support for @media only screen and (max-width: 580px))

  Comments: help.js, help.css

  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
  };
}();

/**
 * @description The oDEF variable holds definition for several options
*/
var oDEF = 
    {
      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)
      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
      }
    }

/**
 * @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 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'
    });
//*/    

///*    
    var rtElement = oElement.getBoundingClientRect(),
        oScrollParent = getScrollParent(oElement),
        rtContainer = oScrollParent.getBoundingClientRect(),
        topFixedHeight = 56,
        bottomFixedHeight = 4 + (oScrollParent.offsetHeight - oScrollParent.clientHeight) /*height of the scroll bar*/,
        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 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 event.target.id == oDEF.L;
}

/**
 * @description The syncH/syncronizeHash() method syncronizes the current hash with the CNT's hash
 * @param {object} cnt Specifies the `CNT` element
*/
function syncH(cnt)
{
  try
  {
    var hash = wR().location.hash;
    hash && 
      (cnt = (cnt || document.getElementById(oDEF.CNT))) && 
        cnt.contentWindow && 
          (cnt.contentWindow.location.hash = hash); // forwards the has to `CNT`'s location
  }
  catch(e)
  {
    // Uncaught DOMException: Blocked a frame with origin "protocol://" from accessing a cross-origin frame.
  }
}

/**
 * @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 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 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 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
 * @since 1.7
*/
function runCSSMedia()
{
  var oRTOC = document.getElementById(oDEF.R);  // {object} holds a reference to `R` part of the document
  return getComputedStyle(oRTOC).position != "absolute";
}
 
/**
 * @description The fitTOC() method fits the `TOC` and `CNT` elements (Table of Contents and Content) to the window
 * @param {object} toc Specifies the `TOC` element to resize/fit
 * @param {object} cnt Specifies the `CNT` element to resize/fit
 */
function fitTOC(toc, cnt)
{
  if (!runCSSMedia())
  {
    toc = toc || document.getElementById(oDEF.TOC);       // {object} Specifies the `TOC` element
    cnt = cnt || document.getElementById(oDEF.CNT);       // {object} Specifies the `CNT` element

    var border = 8,                                       // {number} indicates the border-size
        rtClientTOC = toc && toc.getBoundingClientRect(), // {object} gets a DOMRect object providing information about the size of `TOC` element and its position relative to the viewport.
        rtClientCNT = cnt && cnt.getBoundingClientRect(); // {object} gets a DOMRect object providing information about the size of `CNT` element and its position relative to the viewport.

    // sets the `TOC`'s height 
    toc && (toc.style.height = (window.innerHeight - (rtClientTOC.top + border)) + oDEF.PX);
    
    // sets the `CNT`'s width and height
    if ( cnt )
    {
      cnt.style.height = (window.innerHeight - (rtClientCNT.top + border)) + oDEF.PX;
      cnt.style.width = window.innerWidth - (rtClientTOC.width + border) + oDEF.PX;
    }
  }
  // updates the height of the owner's frame to fits the entire body inside the <iframe> element
  rszIFrm();
}

/**
 * @description The rszIFrm() method updates the height of the owner's frame to fits the entire body inside the <iframe> element
*/
function rszIFrm()
{
  /**
   * @description The getHeight() method determines the height of the target
   * @param {HTMLElement} target A HTMLElement object whose height is requested
   * @returns {number} Returns the height of the element/target
  */
  function getHeight(target)
  {
    return target && (target instanceof HTMLCanvasElement ? target.height : parseInt(oWindowR.getComputedStyle(target).height) || target.clientHeight) || 0;
  }

  var oWindowR = wR(),              // {object} specifies the window's root
      oFrame = window.frameElement; // {object} returns the element (such as <iframe> or <object>) in which the window is embedded.

  if ( oFrame )
  {
    oFrame.height = oWindowR.innerHeight - (8 + getHeight(oWindowR.document.getElementById("cssmenu")));
    oWindowR.document.body.style.overflowY = "hidden";
  }
}

/**
 * @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
    oLTOC.style.width = oRTOC.style.left = Math.max(6, Math.min(parseInt(getStyle(oRTOC).width) - 8, original.w + dx)) + oDEF.PX;

    // fits the `TOC` and `CNT` elements (Table of Contents and Content) to the window
    fitTOC();
  }

  /**
   * @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);
  }

  if ( !runCSSMedia() )
  {
    var oLTOC = document.getElementById(oDEF.L),  // {object} holds a reference to `L` part of the document
        oRTOC = document.getElementById(oDEF.R),  // {object} holds a reference to `R` part of the document
        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(oLTOC).width)      // {number} specifies the initial-width of the `L` part of the document
        }

    if ( oLTOC && oRTOC )
    {
        // 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 );
    }
  }
}

/**
 * @description The setSource() method changes the `CNT`'s source and updates the browser's URL
 * @param {string} source Specifies the URL to browse for
*/
function setSource(source)
{
  /**
   * @description The getSParam() method extracts the source-parameter
   * @param {string} source A string expression that defines the source
  */
  function getSParam(source)
  {
    var nSrcPathRel = source.lastIndexOf('/');
    return ~nSrcPathRel ? source.substr(nSrcPathRel + 1) : source
  }

  /**
   * @description The setActive() method activates the LI element which contains the source and ensures that the LI element fits the `TOC` element
   * @param {string} source Indicates the URL to activate
  */
  function setActive(source)
  {
    /**
     * @description The hrefOf() method gets the "href" attribute of any child "A" element
     * @param {object} oElement Specifies the element to search "A" element for
     * @returns {string} Returns the "href" attribute of the element
    */
    function hrefOf(oElement)
    {
      return feU(oElement.getElementsByTagName("A"), function(oElement)
      {
        return oElement.getAttribute("href");
      });
    }

    /**
     * @description The defaultOf() method determines the source's default name
     * @param {string} source Specifies the source to get default for
     * @returns {string} Returns the source's default name such as "Chart_default.htm" for "Chart_AllowCreateBar.htm"
    */
    function defaultOf(source)
    {
      var underline = source.lastIndexOf('_'),
          dot;
      if ( ~underline )
        source = source.substr(0, underline + 1) + "default" + (~(dot = source.indexOf('.',underline)) ? source.substr(dot) : "" );
      return source;
    }

    /**
     * @description The LIOf() method gets the "LI" element that hosts the source (includes an element whose "href" attribute is equivalent with the source)
     * @param {string} source Indicates the URL to search for
    */
    function LIOf(source)
    {
      return feU(rgLI, function(oLI)
      {
        return (hrefOf(oLI) == source) && oLI;
      })
    }

    var toc = document.getElementById(oDEF.TOC); // {object} indicates the `TOC` element

    if ( toc )
    {
      var rgLI = toc.getElementsByTagName("LI"),  // {object} gets the "LI" elements of the `TOC` element
          sActiveClass = oDEF.ACTIVE,             // {string} specifies the name of the class to highlight the active-source
          oActiveLI;                              // {object} indicates the "LI" element to activate

      // removes the "active" class from any previously "LI" elements
      feU(toc.getElementsByClassName(sActiveClass), function(oElement)
      {
        oElement.classList.remove(sActiveClass);
      })

      // sets the active "LI" based on the source (could be the source or source_default.htm)
      oActiveLI = LIOf(source) || LIOf(defaultOf(source));

      // activates the LI that's currently browsed
      if (oActiveLI) 
      {
        // adds "active" to source being selected
        oActiveLI.classList.add(sActiveClass);

        // ensures that the giving element fits the view's client area (scroll into the view)
        eV(oActiveLI);
      }
    }
  }

  if ( source != null ) // !!! prevents empty or null source (for instance, <a> element without a href attribute, such as bookmarks of "<a name=`bookmark`>" type)
  {
    if ( ~source.indexOf("://") ) // specifies a different protocol, changes the browser's URL instead (http://, https://, ...)
      wR().location = source;
    else
    {
      var cnt = document.getElementById(oDEF.CNT);  // {object} indicates the `CNT` element
      if ( cnt )
      {
/*    
        var sPathRel = "/Exontrol/ExG2antt/help2/web/",   // {string} specifies the relative-path
            nInsPathRel;                                  // {number} indicates the position of the last '/' character

        if ( sPathRel && (source.indexOf(sPathRel) < 0) )
        {
          nInsPathRel = source.lastIndexOf('/');
          if ( ~nInsPathRel )
          {
            nInsPathRel++;
            source = source.substr(0, nInsPathRel) + sPathRel + source.substr(nInsPathRel);
          }
          else
            source = sPathRel + source;
        }
//*/
        if ( cnt.getAttribute("src") != source ) // prevents re-loading the same page if the user clicks it several times
        {
          // sets the `CNT`'s source
          cnt.src = source;

          // extracts the `S` param from source (for instance, "web/information.htm" => "information.htm")
          source = getSParam(source);

          // activates the LI element which contains the source and ensures that the LI element fits the `TOC` element
          setActive(source);

          // updates the `S` param of the browser's URL
          setP(oDEF.PARAM.S, source);
        }
      }
    }
  }
}

/**
 * @description The tO/toggleObject() method toggles the expand/collapse state of the object (adds or removes the `expanded` class)
 * @param {object} oObjectLI Indicates an object of `object` class 
 */
function tO(oObjectLI)
{
  var oCL;  // {object} indicates an object of DOMTokenList type that holds classes of the element

  if ( oObjectLI && (oCL = oObjectLI.classList).contains(oDEF.OBJECT) )
    oCL[uCL(oCL.contains(oDEF.EXPANDED))].call(oCL, oDEF.EXPANDED);
}

/**
 * @description cC/clickClose() method performs actions once the user clicks the `close` button of the `Filter` element
*/
function cC()
{
  var filter = document.getElementById(oDEF.FILTER);  // {object} inidcates the input-element that displays the current filter (`Filter` element)
  if ( filter )
  {
    filter.value = "";
    filter.oninput();
  }
}

/**
 * @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(/*event*/)
{
  /**
   * @description The initTOC() method initializes the `TOC` element (handles the click event of each "A" element to redirect the content to `CNT` element)
  */
  function initTOC()
  {
    /**
     * @description The onClickAnhor() method opens the anchor's reference into the `CNT` element
     * @param {object} event Indicates the event that generates the click event
    */
    function onClickAnhor(event)
    {
      // prevents any default action 
      preventDefault(event);

      // changes the `CNT`'s source and updates the browser's URL
      setSource(this.getAttribute("href"))
    }

    // replaces the A's click handler for all A-elements of the `TOC` element
    feU(toc.getElementsByTagName("A"), function(oAnchor)
    {
      oAnchor.onclick = onClickAnhor;
    });
  }

  /**
   * @description The initFilter() method initializes the `Filter` element, so it filters for LI elements of the `TOC`
  */
  function initFilter()
  {
    /**
     * @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)
     * @param {object} event Indicates the event that invoked the onFilter method (called during filter.oninput method)
    */
    function onFilter(value, event)
    {
      /**
       * @description The match() method checks whether the item matches the value (filter)
       * @param {object} oLI Indicates an "LI" element to verify it it matches the value (filter)
       * @returns {boolean} Returns true if the item matches the value (filter)
      */
      function match(oLI)
      {
        /**
         * @description The textContent() method gets the content of the node and its descendants, to match the filter
         * @param {object} oElement Indicates the element to gets its text
         * @returns {string} Returns the the content of the node and its descendants, to match the filter
        */
        function textContent(oElement, bFirstLineOnly)
        {
          var result = oElement.className,  // {string} specifies "object", "event", "constant", ...
              oAnchorLI;                    // {object} indicates the <a> inside of LI element
    
          // includes the "property", "method" and "readonly" for "object" LI elements
          if ( oElement.classList.contains(oDEF.OBJECT) )
            result = oDEF.OBJECT + eol + oDEF.PROPERTY + eol + oDEF.METHOD;

          // *Added: Include the "title" (description) and "data-values" (values of an enumeration type) attributes of the <a> inside of LI element, while filtering. Currently, the filter includes the property, method, event or type's name, description and values (for enumeration types) (enum type includes each defined constants such as <a href="CheckStateEnum_enum.htm" data-values="Unchecked(0),Checked(1),PartialChecked(2)">CheckStateEnum</a>)
          if ( oAnchorLI = oElement.firstChild )
          {
            if ( oAnchorLI.title )
              result += eol + oAnchorLI.title;  // includes the "title" attribute

            if ( oAnchorLI.dataset && oAnchorLI.dataset.values )
              result += eol + oAnchorLI.dataset.values; // includes "data-values" attribute
          }

          // includes the text content of the node and its descendants.
          return result + eol + (bFirstLineOnly ? oElement.textContent.trim().split(eol)[0] || "" : oElement.textContent.trim());
        }

        /**
         * @description The itemContent() method represents the text content of the node and its descendants, to match the filter
         * @param {object} oLI Indicates an "LI" element to get its text to filter for
         * @returns {string} Returns the text content of the node and its descendants
        */
        function itemContent(oLI)
        {
          var result = textContent(oLI),  // {string} indicates the item's text to match
              oParentLI;                  // {string} indicates the item's text to match

          if ( oLI.parentElement && (oParentLI = oLI.parentElement.parentElement) && (oParentLI.tagName == "LI") )
            result += eol + textContent(oParentLI, true /*bFirstLineOnly*/);

          return result.toLowerCase();
        }
  
        var bMatch = true,                        // {boolean} specifies whether the item matches the giving filter
            eol = "\n",                           // {string} defines the EOL character
            i = 0,                                // {number} indicates the index of the value to match
            l = rgValues && rgValues.length || 0, // {number} specifies the count of values to match
            item = itemContent(oLI);              // {string} specifies the text of the item to match

        for ( ; bMatch && i < l; i++ )
          bMatch &= item.indexOf(rgValues[i]) >= 0;

        return bMatch;
      }

      var bExpandAll = !value,  // {boolean} specifies whether all "LI" objects should be expanded
          rgValues = [],        // {array} specifies the value to match (splits the value by space, to match all using AND operator)
          nTopics = 0,          // {number} specifies the number of "topic" elements
          nHiddenTopics = 0,    // {number} specifies the number of "topic" elements being hidden
          oActiveLI,            // {object} indicates the active "LI" element
          bHidden,              // {boolean} indicates whether the object is hidden
          oCL;                  // {object} indicates an object of DOMTokenList type that holds classes of the element

      // 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);
      })

      // adds or removes the `hidden` class to LI elements of `TOC` that does not match filter
      feU(toc.getElementsByTagName("LI"), function(oLI)
      {
        (oCL = oLI.classList)[uCL(match(oLI))].call(oCL, oDEF.HIDDEN);
      });

      // adds or removes the `hidden` class to "object"/LI elements of `TOC` that dislays no properties/methods
      feU(toc.getElementsByClassName(oDEF.OBJECT), function(oObjectLI)
      {
        oCL = oObjectLI.classList;
        bHidden = oObjectLI.getElementsByClassName(oDEF.HIDDEN).length == oObjectLI.getElementsByTagName("LI").length;
        oCL[uCL(!bHidden)].call(oCL, oDEF.HIDDEN);
        !bHidden && oCL[uCL(bExpandAll)].call(oCL, oDEF.EXPANDED);
      })

      // adds or removes the `hidden` class to "topic"/DIV elements of `TOC` that does not match filter
      feU(toc.getElementsByClassName(oDEF.TOPIC), function(oTopicDiv)
      {
        nTopics++;
        bHidden = oTopicDiv.getElementsByTagName("LI").length == oTopicDiv.getElementsByClassName(oDEF.HIDDEN).length;
          (oCL = oTopicDiv.classList)[uCL(!bHidden)].call(oCL, oDEF.HIDDEN);
        bHidden && nHiddenTopics++;
      });

      // adds or removes the `hidden` class to `TOC` itself, when no match
      nTopics && (oCL = toc.classList)[uCL(nTopics != nHiddenTopics)].call(oCL, oDEF.HIDDEN);

      // expands or collapses the "LI" elements
      feU(toc.getElementsByClassName(oDEF.OBJECT), function(oLI)
      {
        (oCL = oLI.classList)[uCL(bExpandAll)].call(oCL, oDEF.EXPANDED);
      })


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

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

      // ensures that the active "LI" element fits the scroll view
      (oActiveLI = toc.getElementsByClassName("active").item(0)) && setTimeout(function()
      {
        eV(oActiveLI);
      })
    }

    // adds the input `Filter` and span close elements to display the `Filter` field
    var divF = document.getElementById(oDEF.F), // {object} indicates the DIV element that displays the `Filter`
        span;                                   // {object} specifies the SPAN to display `✖` character

    if ( divF )
    {
      // creates and adds the input `Filter` field
      filter = document.createElement("INPUT");
        filter.setAttribute("type", "text");
        filter.setAttribute("id", "Filter");
        filter.setAttribute("placeHolder", "Filter for...");
        filter.oninput = function(event)  // The oninput attribute fires when the value of an <input> or <textarea> element is changed.
        {
          onFilter(event && event.target.value || "", event);
        }
      document.getElementById(oDEF.F).appendChild(filter);

      // adds the SPAN `✖` character
      span = document.createElement("SPAN");
        span.id = oDEF.CLOSE;         // specifies the "id=`close`"
        span.innerHTML = "&#x2716;";  // displays the `✖` character
      document.getElementById(oDEF.F).appendChild(span);
    }

    // updates the filter according with the browser's `F` param
    filter && onFilter(getP(oDEF.PARAM.F));
  }

  /**
   * @description The initCNT() method initalizes the `CNT` element
  */
  function initCNT()
  {
    if ( cnt )
    {
      // changes the `CNT`'s source and updates the browser's URL
      setSource(getP(oDEF.PARAM.S) || cnt.getAttribute("src"));

      // syncronizes the current hash with the CNT's hash
      syncH(cnt);

      // The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images
      cnt.onload = function(event)
      {
        /**
         * @description The onCNTAnchorClick() method re-directs clicking the anchor-elements of the iframe to the `CNT`'s source
         * @param {object} event Indicates the event (MouseEvent)
        */
        function onCNTAnchorClick(event)
        {
          // prevents the event's default-actions
          preventDefault(event);

          // changes the `CNT`'s source and updates the browser's URL
          setSource(this.getAttribute("href"));
        }

        // replaces the "A"'s onclick handler to change the `CNT`'s source and update the browser's URL
        if (this.contentDocument) 
        {
          feU(this.contentDocument.getElementsByTagName("A"), function(oAnchor)
          {
            oAnchor.onclick = onCNTAnchorClick;
          });

          // updates the document's title according with the title of the source being loaded
          wR().document.title = this.contentDocument.title;
        }
      }
    }
  }

  var toc = document.getElementById(oDEF.TOC),  // {object} Specifies the `TOC` element
      cnt = document.getElementById(oDEF.CNT),  // {object} Specifies the `CNT` element
      filter;                                   // {object} specifies the INPUT to display `Filter` field

  if ( toc )
  {
    initTOC();
    initFilter();
  }
  cnt && initCNT();
  fitTOC(toc, cnt);
});

/**
 * @description The resize event fires when the document view (window) has been resized
*/
window.addEventListener("resize", function(/*event*/)
{
  fitTOC();
});

/**
 * @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)
{
  syncH();
});

/**
 * @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.
*/
window.addEventListener("mousemove", function(event)
{
  if ( !runCSSMedia() )
  {
    // updates the `L`-element's cursor to "col-resize", while the pointer hovers the right-side of the `L`-element
    var oLTOC = document.getElementById(oDEF.L); // {object} holds a reference to `L` part of the document
    if (oLTOC)
      oLTOC.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.
*/
window.addEventListener("mousedown", function(event)
{
  var o,        // {object} indicates the object being checked
      oCL,      // {object} indicates an object of DOMTokenList type that holds classes of the element
      oToggle;  // {object} indicates an element to toggles its expand/collapse state

  // expands or collapses the "LI" object once the user clicks the "LI" object, `glyph` or the anchor element of the "LI" object
  if ( ((o = event.target) && (oCL = o.classList).contains(oDEF.OBJECT) && (oToggle = o)) ||
       ((o = event.target) && (oCL = o.classList).contains(oDEF.GLYPH) && (oToggle = o.parentElement)) ||
       ((o = event.target) && (o = o.parentElement) && (o = o.parentElement) && (oCL = o.classList).contains(oDEF.OBJECT) && !oCL.contains(oDEF.EXPANDED) && (oToggle = o)) )
    oToggle && tO(oToggle);
  else
    if ( iSV(event) ) // clicks the right-side of the `L`-element, to resize `L` and `R` parts of the mainframe
      rszLR(event);
    else
      if ( event.target.id == oDEF.CLOSE ) // clicks the `close` portion of the `Filter` input
        cC();
});