/* @license Copyright (C) Exontrol. All rights reserved. */

/////////////////////////////////////////////////////////// (exontrol.Menu)
//
//  The exontrol.Menu class provides the following properties and methods:
//
//    Align/GetAlign()/SetAlign(value) {number}, defines the default horizontally alignment of the item's caption.
//    AlignClient/GetAlignClient()/SetAlignClient(value) {boolean}, aligns the item's client position to sub-item client position, when a float-menu is displayed.
//    AlignContextMenu/GetAlignContextMenu()/SetAlignContextMenu(value) {Menu.AlignContextMenuEnum}, indicates the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates.
//    ArrSize/GetArrSize()/SetArrSize(value) {number}, defines the size (width and height) to show the item's arrow
//    ArrangeItemsAs/GetArrangeItemsAs()/SetArrangeItemsAs(value) {Menu.ArrangeItemsEnum}, defines how the items are arranged on the control(top-level menu).
//    BtnArrSize/GetBtnArrSize()/SetBtnArrSize(value) {number}, defines the size (width and height) to show the button's arrow
//    BtnPad/GetBtnPad()/SetBtnPad(value) {(number|number[]|string)}, indicates the padding to apply item's button.
//    Close/GetClose()/SetClose(value) {number}, defines the time in ms the sub-menu is closed once the cursor hovers the top-level item.
//    Cursors/GetCursors()/SetCursors(value) {string}, defines the mouse cursor to be displayed when pointing over different parts of the control.
//    CriAlign/GetCriAlign()/SetCriAlign(value) {boolean}, specifies whether the check-box/radio-button or the item's image are aligned.
//    CriFlat/GetCriFlat()/SetCriFlat(value) {Menu.FlatEnum}, specifies whether the menu's flat bar is shown or hidden.
//    CriPad/GetCriPad()/SetCriPad(value) {(number|number[]|string)}, indicates the padding to apply to a check-box/radio-button or the item's image
//    CriSize/GetCriSize()/SetCriSize(value) {number}, defines the size (width and height) to show a check-box/radio-button or the item's image
//    EnsureVisibleItem(oItem) {Item}, scrolls the control to ensure that the giving item fits the control's visible area
//    GetCanvas() {object}, gets the canvas element, the control is running on.
//    GetClientRect() {array}, returns the control's client area.
//    GetOpen()/SetOpen(value) {number}, defines the time in ms the top-level item opens its sub-menu once the cursor hovers it.
//    ItemsPad/GetItemsPad()/SetItemsPad(value) {(number|number[]|string)}, defines the padding the sub-items section of the item (space between the menu border and the items content)
//    Locked/GetLocked()/SetLocked(value) {boolean}, locks or unlocks the control
//    Open(id) {Menu}, opens the float-menu(s) giving the item's identfier ( if id is missing, and no canvas has been specified, the menu is shown as shortcut/context-menu, else the id can include \ separator for parent\child relation and it indicates the path to open)
//    OutClose/GetOutClose()/SetOutClose(value) {number}, defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu.
//    Options/GetOptions()/SetOptions(value) {object}, specifies the options of the control.
//    Pad/GetPad()/SetPad(value) {(number|number[]|string)}, defines the item's padding (space between the menu border and the item content).
//    Refresh(), refreshes the entire control (including the float-menu(s)).
//    ReadOnly/GetReadOnly()/SetReadOnly(value) {boolean}, specifies whether the control is read-only
//    ScrollClip/GetScrollClip()/SetScrollClip(value) {boolean}, clips the scroll bar
//    ScrollOpt/GetScrollOpt()/SetScrollOpt(value) {exontrol.ScrollBar.Options}, specifies the options (UI visual appearance, behavior) to display the control's scroll bar.
//    ScrollSize/GetScrollSize()/SetScrollSize(value) {number}, defines the size (width and height) to display the control's scroll bar
//    SetCanvas(canvas, localCanvas), changes the control's canvas where it runs.
//    SetClientRect(client), defines a client area for the control.
//    SetXY(value), changes the horizontal and vertical position to display the context/shortcut-menu relative to document.
//    Shapes/GetShapes()/SetShapes(value) {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
//    SmoothSel/GetSmoothSel()/SetSmoothSel(value) {number}, defines the time in ms the control's selection goes from one state to another.
//    SubClose/GetSubClose()/SetSubClose(value) {number}, defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level).
//    SubOpen/GetSubOpen()/SetSubOpen(value) {number}, defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level).
//    Tfi/Tfi/GetTfi()/SetTfi(value) {exontrol.TFI}, defines an object of {bold,italic,...} type that defines font attributes to display the captions within the control.
//    WheelChange/GetWheelChange()/SetWheelChange(value) {number}, defines the amount the control scrolls when the user rolls the mouse wheel.
//    X/GetX()/SetX(value) {number}, indicates the horizontal position to display the context/shortcut-menu relative to document.
//    Y/GetY()/SetY(value) {number}, indicates the vertical position to display the context/shortcut-menu relative to document.
//
//  The exontrol.Menu class provides the following events (through oLts):
//
//     "onlayoutchange", notifies your application that the control's layout has been changed. The onlayoutchange's parameter is:
//
//        oEvent {object}, indicates the control's new layout as an object of exontrol.Menu.Layout type
//
//     "onselect", occurs once the user selects/clicks an item (excluding popup-items). The onselect's parameter is:
//
//        oEvent {object}, specifies the control's item being clicked/selected as an object of exontrol.Menu.Item type
//
//     "oncheck", notifies your application that the user checks an item. The oncheck's parameter is:
//
//        oEvent {object}, specifies the control's item being checked as an object of exontrol.Menu.Item type
//
//     "onuncheck", occurs once the user unchecks an item. The onuncheck's parameter is:
//
//        oEvent {object}, specifies the control's item being unchecked as an object of exontrol.Menu.Item type
//
//     "onopen", notifies your application that a new float-menu has been opened. The onopen's parameter is:
//
//        oEvent {object}, specifies the float-menu being opened as an object of exontrol.Menu type
//
//     "onclose", occurs once a float-menu has been closed. The onclose's parameter is:
//
//        oEvent {object}, specifies the float-menu being closed as an object of exontrol.Menu type
//
//     "onmodal", occurs once the control begins or ends modal-mode, so one or more float-menus are being shown. The onmodal's parameter is:
//
//        oEvent {boolean}, specifies whether the modal-mode starts or ends
//
//     "onanchorclick", (@since 2.2) occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The onanchorclick's parameter is:
//
//        oEvent {object}, specifies an object of {id,options} type, that holds information about the anchor being clicked.
//
//          oEvent.id {string}, specifies null or the identifier of the anchor being clicked
//          oEvent.options {string}, specifies null or the options of the anchor being clicked
//
///////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////// (exontrol.Menu.Options)
//
// The exontrol.Menu.Options namespace provides definitions for different objects, primitives, objects of exontrol.Menu object
//
//  The exontrol.Menu.Options namespace provides the following fields:
//
//    align {number}, horizontally aligns the item's caption.
//    alignClient {boolean}, specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed.
//    alignContextMenu {exontrol.Menu.AlignContextMenuEnum}, defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates.
//    allowToggleRadio {boolean}, allows or prevents toggling the radio state.
//    arrSize {number}, specifies the size (width and height) to show the item's arrow.
//    arrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the control (top-level menu).
//    btnArrSize {number}, specifies the size (width and height) to show the button's arrow.
//    btnPad {(number|string|array)}, defines the button's padding (space between the button border and the item content)
//    close {number}, defines the time in ms the sub-menu is closed once the cursor hovers the top-level item.
//    closeOnClick {exontrol.Menu.CloseOnClickEnum}, defines the type of items the user can click to close the float-menu(s).
//    criAlign {boolean}, specifies whether the check-box/radio-button or the item's image are vertically aligned.
//    criFlat {exontrol.Menu.FlatEnum}, indicates whether the menu's flat bar is shown or hidden.
//    criPad {(number|string|array)}, indicates the padding to apply to a check-box/radio-button or the item's image
//    criSize {number}, specifies the size (width and height) to show a check-box/radio-button or the item's image
//    cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control.
//    items {string}, defines the items of the menu from a string-representation.
//    itemsPad {(number|string|array)}, defines the padding the sub-items section of the item (space between the menu border and the items content)
//    locked {boolean}, indicates whether the control is locked(protected) or unlocked
//    open {number}, defines the time in ms the top-level item opens its sub-menu once the cursor hovers it.
//    outClose {number}, defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu.
//    pad {(number|string|array)}, defines the item's padding (space between the menu border and the item content)
//    popupRatio {number}, defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown.
//    readOnly {boolean}, specifies whether the control is read-only
//    scrollClip {boolean}, specifies whether the control's scroll bar is clipped.
//    scrollOpt {exontrol.ScrollBar.Options}, specifies the options (UI visual appearance, behavior) to display the control's scroll bar.
//    scrollSize {number}, specifies the size (width/height) of the control's scroll bar.
//    sepSize {number}, specifies the size to show a separator item.
//    shapes {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
//    show {exontrol.Menu.ShowCheckedAsSelectedEnum}, defines how an item that has a check-box/radio button is displayed.
//    smoothSel {number}, defines the time in ms the control's selection goes from one state to another.
//    subArrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the float-menus.
//    subClose {number}, defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level).
//    subOpen {number}, defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level).
//    tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
//    wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel.
//    x {number}, specifies the horizontal position to show the context/shortcut-menu relative to the document.
//    y {number}, specifies the vertical position to show the context/shortcut-menu relative to the document.
//
///////////////////////////////////////////////////////////

/**
 * @description The exontrol.Menu.Options namespace provides definitions for different objects, primitives, objects of exontrol.Menu object
*/
exontrol.Menu.Options =
{
  /**
  * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
  * 
  * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
  * 
  *   bold, displays the text in bold (equivalent of <b> tag)
  *   italic, displays the text in italics (equivalent of <i> tag)
  *   underline, underlines the text (equivalent of <u> tag)
  *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
  *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
  * 
  * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
  * 
  *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
  * 
  * The tfi field as object supports any of the following fields:
  * 
  *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
  *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
  *   underline {boolean}, underlines the text (equivalent of <u> tag)
  *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
  *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  *     color {string}, defines the color of the text's shadow (CSScolor)
  *     width {number}, defines the size of the text's shadow
  *     offset {number}, defines the offset to show the text's shadow relative to the text
  *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  *     color {string}, defines the gradient-color (CSScolor)
  *     mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  *     blend {number}, defines the gradient blend as a value between 0 and 1
  * 
  * CSSColor or CSS legal color values can be specified by the following methods:
  * 
  *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
  * 
  * @type {(string|object)}
  * @example
  * 
  *   null {null}, the tfi field is ignored
  *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
  *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
  * 
  */
  tfi: null,
  /**
  * @description The locked field indicates whether the control is locked(protected) or unlocked
  * @type {boolean}
  * @example
  * 
  *   false {boolean}, unlocks the control (can select any item)
  *   true {boolean}, locks the control (can't select any item)
  */
  locked: false,
  /**
  * @description The readOnly field indicates whether the control is read-only
  * @type {boolean}
  * @example
  * 
  *   false {boolean}, the user can select or check any item
  *   true {boolean}, the user can not select or check the items
  */
  readOnly: false,
  /**
  * @description The debug field indicates whether the control displays debug-information
  * @type {boolean}
  * @example
  * 
  *   false {boolean}, no debug-information is displayed
  *   true {boolean}, debug-information is displayed for each item (usually the item's identifier)
  */
  debug: false,
  /**
  * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel.
  * @type {number}
  * @example
  * 
  *   0 {number}, locks any action the mouse's wheel performs
  *   1 {number}, indicates that the wheelChange property is applied for 1-time when user rotates the mouse wheel. Changes the wheelChange property to provide a different step to scroll once the user rotates the mouse wheel
  */
  wheelChange: 1,
  /**
   * @description The items field defines the items of the menu from a string-representation.
   * 
   * The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags):
   * 
   *  "item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"
   * 
   * The string-representation supports the following flags:
   * 
   *  [align], horizontally aligns the caption. Align could be -1 (full-fits the item), 0 (left-alignment), 1 (center), or 2 (right-alignment). Sample: "[align=2]".
   *  [arrow], indicates whether the item's popup-arrow is shown(1) or hidden(0). Sample: "[arrow=0]" or "[arrow=1]".
   *  [button], associates a button with the item. The option may be a combination of Menu.ShowAsButtonEnum flags. Sample: "[button]".
   *  [captionHeight] or [ch], specifies the height of the item's caption. A negative value removes the limitation. Sample: "[ch=128]".
   *  [captionWidth] or [cw], specifies the width of the item's caption. A negative value removes the limitation. Sample: "[cw=128]".
   *  [close], specifies whether the float-menu is closed once the user clicks the item. The option could be a value of Menu.CloseOnClickEnum type. Sample: "[close=-1]".
   *  [chk], indicates that the item has a check-box associated. If the [typ] flag is present, [chk] indicates the state of the item, and [rad] is ignored. Sample: "[chk]" or "[chk=0]" or "[chk=1]".
   *  [cursors], defines the mouse cursor for the item only. Sample: "[cursors=pointer(item)]".
   *  [dis], disables the item and all descendents. Sample: "[dis]".
   *  [grp], defines the radio group. Use when defining multiple groups of radio buttons. Sample: "[grp=sample]".
   *  [height], specifies the height of the item. Sample: "[height=64]".
   *  [hid], hides the item. Sample: "[hid]".
   *  [id], specifies the item's identifier. Sample: "[id=10]".
   *  [img], indicates the item's image. The img indicates the name of the picture to display, as previously added using exontrol.HTMLPicture.Add. Sample: "[img=logo]".
   *  [itemsPad], specifies the items padding (space between the menu border and the item content). Sample: "[itemsPad=2]" or "[itemsPad=2,2]".
   *  [pad], specifies the item's padding (space between the menu border and the item content). Sample: "[pad=2]" or "[pad=2,2]".
   *  [popupalign] or [pa], aligns the sub-menu/popup/float relative to the parent item. The option may be a combination of Menu.ShowPopupAlignEnum flags. Sample: "[pa=1]".
   *  [sep], specifies a separator item. Sample: "[sep]".
   *  [show], specifies how an item with check-box/radio-button is displayed. The option may be any value of Menu.ShowCheckedAsSelectedEnum type. Sample: "[show=-1]".
   *  [showdis], displays the item as disabled while still enabled. Sample: "[showdis]".
   *  [spchk], indicates whether sub-items are shown when the item is checked. Sample: "[spchk]".
   *  [tab], indicates the identifier of the sub-items of the current item. Sample: "[tab=page]" or "[tab=1]".
   *  [typ], specifies the type of the item: 0 (normal item), 1 (check-box item), or 2 (radio button item). If [typ] is present, [chk] indicates the state of the item, and [rad] is ignored. This option may be any value of Menu.DisplayTypeEnum type. Sample: "[typ=1]".
   *  [width], specifies the width of the item. Sample: "[width=64]".
   *  [group], specifies how the sub-items are grouped. The option may be a combination of Menu.GroupPopupEnum flags. Sample: "[group]" or "[group=0x100]".
   *  [rad], indicates that the item has a radio-button associated. If the [typ] flag is present, [chk] indicates the state of the item, and [rad] is ignored. Sample: "[rad]" or "[rad=0]" or "[rad=1]".
   *  [shapes], specifies shapes to apply on the item only. Sample: "[shapes=dfitem(item),dfcap(cap)]".
   * 
   * @type {string}
   * @example
   * 
   *  "" {string}, clears the items collection
   *  "Popup(A,B,C)" {string}, adds a popup-item with three sub-items A, B and C
   *  "Popup[group](A,B,C)" {string}, adds an item with three sub-items A, B and C, and all items are visible and displayed as an horizontally group
   *  "Popup[group][chk][spchk](A,B,C)" {string}, adds an item with three sub-items A, B and C, but A, B and C sub-items are visible and displayed only if the popup is checked
  */
  items: null,
  /**
   * @description The criSize field specifies the size (width and height) to show a check-box/radio-button or the item's image. A value that specifies the size (width and height) to show a check-box/radio-button or the item's image
   * @type {number}
   * @example
   * 
   *  16 {number}, indicates that any check-box, radio or image uses a 16x16 rectangle to display it within the item
  */
  criSize: 16,
  /**
   * @description The criPad field indicates the padding to apply to a check-box/radio-button or the item's image. A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
   * @example
   * 
   *   4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
   *   "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
   *   [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
  */
  criPad: [0,0],
  /**
   * @description The criAlign field specifies whether the check-box/radio-button or the item's image are vertically aligned.
   * @type {boolean}
   * 
   * The criAlign property has effect, if the control's criFlat is exNormal.
   * 
   * @example
   * 
   *  false {boolean}, check-box/radio-button or the item's image is not vertically aligned
   *  true {boolean}, check-box/radio-button or the item's image is vertically aligned
  */
  criAlign: false,
  /**
   * @description The criFlat field indicates whether the menu's flat bar is shown or hidden
   * 
   * The exontrol.Menu.FlatEnum type supports the following values:
   * 
   *  exNormal (0), indicates that the menu's flat bar is not shown
   *  exShowFlat (1), indicates that the menu's flat bar is visible only if the menu contains items with check, radio or image
   *  exAlwaysFlat (2), indicates that the menu's flat bar is always visible
   * 
   * @type {exontrol.Menu.FlatEnum}
   * @example
   * 
   *  2 or exontrol.Menu.FlatEnum.exAlwaysFlat {number}, defines a flat-menu
  */
  criFlat: exontrol.Menu.FlatEnum.exNormal,
  /**
   * @description The pad field defines the item's padding (space between the menu border and the item content). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
   * @example
   * 
   *   4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
   *   "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
   *   [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
  */
  pad: [4,4],
  /**
   * @description The itemsPad field defines the padding the sub-items section of the item (space between the menu border and the items content). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
   * @example
   * 
   *   4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
   *   "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
   *   [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
  */
  itemsPad: [0,0],
  /**
   * @description The align field horizontally aligns the item's caption.
   * 
   * The align property can be any of the following values:
   * 
   *  -1 {number}, specifies that the item's caption full-fits the item's background. You can use the &lt;c> or &lt;r> ex-HTML tags to align portions of caption inside the item
   *   0 {number}, indicates that the caption is left-aligned
   *  +1 {number}, specifies that the caption is centered
   *  +2 {number}, specifies that the caption is right-aligned
   * 
   * @type {number}
   * @example
   * 
   *  2 {number}, right aligns the item's caption
  */
  align: -1,
  /**
   * @description The arrSize field specifies the size (width and height) to show the item's arrow.
   * 
   * The item's arrow is displayed only for popup-items, or items that contains sub-items or child-items.
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that no arrow is shown
   *  6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels
  */
  arrSize: 6,
  /**
   * @description The arrangeItemsAs field specifies how the items are arranged on the control (top-level menu).
   * 
   * The exontrol.Menu.ArrangeItemsEnum type supports the following flags:
   * 
   *  exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right
   *  exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom
   *  exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu)
   *  exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items
   *  exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu)
   *  exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required
   *  exArrangeItemsAlignCenter (0x400), centers the items on each row/column
   *  exArrangeItemsAlignReverse (0x800), reverses the alignment of the items
   * 
   * @type {exontrol.Menu.ArrangeItemsEnum}
   * @example
   * 
   *  561 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHideTopArrow | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges horizontally all items of top-level menu
  */
  arrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign,
  /**
   * @description The subArrangeItemsAs field specifies how the items are arranged on the float-menu.
   * 
   * The exontrol.Menu.ArrangeItemsEnum type supports the following flags:
   * 
   *  exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right
   *  exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom
   *  exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu)
   *  exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items
   *  exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu)
   *  exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required
   *  exArrangeItemsAlignCenter (0x400), centers the items on each row/column
   *  exArrangeItemsAlignReverse (0x800), reverses the alignment of the items
   * 
   * @type {exontrol.Menu.ArrangeItemsEnum}
   * @example
   * 
   *  257 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsWrap {number}, wraps items within the float-menu
   *  546 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges vertically the items within the float-menu
  */
  subArrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign,
  /**
   * @description The sepSize field specifies the size to show a separator item.
   * @type {number}
   * @example
   * 
   *  0 {number}, hides all separator items ([sep])
   *  4 {number}, specifies the separator items of 4-pixels size
  */
  sepSize: 1,
  /**
   * @description The btnPad field defines the button's padding (space between the button border and the item content). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
   * @example
   * 
   *   4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
   *   "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
   *   [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
  */
  btnPad: [2,2],
  /**
   * @description The btnArrSize field specifies the size (width and height) to show the button's arrow.
   * 
   * The item's arrow is displayed only items that contains sub-items or child-items, while it is of [button] type
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that no arrow is shown for an item of button type ([button])
   *  6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels
  */
  btnArrSize: 6,
  /**
   * @description The show field defines how an item that has a check-box/radio button is displayed.
   * 
   * The exontrol.Menu.ShowCheckedAsSelectedEnum type defines the following values:
   * 
   *  exDefault (0), indicates that no highlight is applied to the item's check/radio
   *  exCheckHighlight (-1), highlights the checked item
   *  exItemHighlight (1), highlights the checked item, but hides the item's check/radio button
   * 
   * @type {exontrol.Menu.ShowCheckedAsSelectedEnum}
   * @example
   * 
   *  1 (exontrol.Menu.ShowCheckedAsSelectedEnum.exItemHighlight) {number}, specifies that any checked-item gets highlighted, by not showing the item's check/radio button
  */
  show: exontrol.Menu.ShowCheckedAsSelectedEnum.exDefault,
  /**
   * @description The scrollSize field specifies the size (width/height) of the control's scroll bar
   * @type {number}
   * @example
   * 
   *  0 {number}, hides the menu's scroll-bar but scrolling it is still posible by drag. Click an item and drag outside the margins so the menu gets scrolled
   *  6 {number}, defines a 6-pixels wide scroll bar
  */
  scrollSize: 8,
  /**
   * @description The scrollClip field specifies whether the control's scroll bar is clipped
   * @type {boolean}
   * @example
   * 
   *  false {boolean}, the scroll is not clipped, so it is shown over the menu
   *  true {boolean}, the scroll and items portions of the menu are separatly
  */
  scrollClip: false,
  /**
   * @description The scrollOpt field specifies the options (UI visual appearance, behavior) to display the control's scroll bar.
   * @type {exontrol.ScrollBar.Options}
  */
  scrollOpt:
  {
    /**
     * @description The visibleParts fields defines the visible parts of the scroll bar, separated by comma.
     * 
     * The parts of the control are:
     * 
     *  "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
     *  "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
     *  "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
     *  "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
     *  "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
     *  "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
     *  "t"  (thumb), indicates the scroll's thumb
     *  "r" (exRightBPart, >) indicates the right or down button
     *  "r1" (exRightB1Part) indicates the first additional button in the right or down side
     *  "r2" (exRightB2Part) indicates the second additional button in the right or down side
     *  "r3" (exRightB3Part) indicates the third additional button in the right or down side
     *  "r4" (exRightB4Part) indicates the forth additional button in the right or down side
     *  "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
     *  "r6" (exRightB6Part) indicates sixth additional button in the right or down side
     * 
     * There are three additional parts (automatically computed) as:
     * 
     *  "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
     *  "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
     *  "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
     * 
     * Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
     * 
     * @type {string}
     * @example
     * 
     *  null {null}, specifies that the exontrol.ScrollBar.Options.visibleParts field defines the visibleParts property. By default, the exontrol.ScrollBar.Options.visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible
     *  "t,b" {string}, indicates that only "thumb", "background" parts are visible
    */
    visibleParts: "t,b",
    /**
     * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control.
     * 
     * The format of the property is:
     * 
     *  "cursor(part),cursor(part),..."
     * 
     * where:
     *
     *  "cursor", defines the CSS mouse cursor to display while cursor hovers the part
     *  "part", defines the name of the part the cursor is applied on (as defined bellow)
     * 
     * The "cursor" can be any of the following:
     * 
     *  "alias", indicates a shortcut or alias will be created
     *  "all-scroll", indicates scrolling in any direction
     *  "auto", lets the browser decide the cursor based on context
     *  "cell", indicates a table cell
     *  "col-resize", indicates a column can be resized horizontally
     *  "context-menu", indicates a context menu is available
     *  "copy", indicates something will be copied
     *  "crosshair", a precise crosshair cursor
     *  "default", the default arrow cursor
     *  "e-resize", resize east (right edge)
     *  "ew-resize", resize horizontally
     *  "grab", indicates an item can be grabbed
     *  "grabbing", indicates an item is being grabbed
     *  "help", indicates help information is available
     *  "move", indicates something can be moved
     *  "n-resize", resize north (top edge)
     *  "ne-resize", resize northeast (top-right corner)
     *  "nesw-resize", resize along the northeast–southwest axis
     *  "no-drop", indicates dropping is not permitted
     *  "not-allowed", indicates the action is not allowed
     *  "ns-resize", resize vertically
     *  "nw-resize", resize northwest (top-left corner)
     *  "nwse-resize", resize along the northwest–southeast axis
     *  "pointer", the pointer cursor (a hand with a pointing finger)
     *  "progress", indicates background processing
     *  "row-resize", indicates a row can be resized vertically
     *  "s-resize", resize south (bottom edge)
     *  "se-resize", resize southeast (bottom-right corner)
     *  "sw-resize", resize southwest (bottom-left corner)
     *  "text", the text selection cursor (I-beam)
     *  "url(...)", uses a custom cursor image (with optional fallback)
     *  "vertical-text", the vertical text selection cursor
     *  "w-resize", resize west (left edge)
     *  "wait", indicates the program is busy
     *  "zoom-in", indicates zooming in
     *  "zoom-out", indicates zooming out
     *  "pointer", the pointer cursor (a hand with a pointing finger)
     *  
     * The "part" can be any of the following:
     * 
     *  "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
     *  "l" (exLeftBPart, <), indicates the left or top button of the scroll bar
     *  "l1" (exLeftB1Part), indicates the first additional button, in the left or top area
     *  "l2" (exLeftB2Part), indicates the second additional button, in the left or top area
     *  "l3" (exLeftB3Part), indicates the third additional button, in the left or top area
     *  "l4" (exLeftB4Part), indicates the forth additional button, in the left or top area
     *  "l5" (exLeftB5Part), indicates the fifth additional button, in the left or top area
     *  "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
     *  "r" (exRightBPart, >), indicates the right or down button
     *  "r1" (exRightB1Part), indicates the first additional button in the right or down side
     *  "r2" (exRightB2Part), indicates the second additional button in the right or down side
     *  "r3" (exRightB3Part), indicates the third additional button in the right or down side
     *  "r4" (exRightB4Part), indicates the forth additional button in the right or down side
     *  "r5" (exRightB5Part), indicates the fifth additional button in the right or down side
     *  "r6" (exRightB6Part), indicates sixth additional button in the right or down side
     *  "t" (thumb), indicates the scroll's thumb
     *  "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
     * 
     * @type {string}
     * @example
     * 
     *   null {null}, indicates that the exontrol.ScrollBar.Options.cursors field defines the cursors property. By default, the exontrol.ScrollBar.Options.cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control
     *   "crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part
    */
    cursors: "pointer(t,lo,b,up)",
    /**
     * @description The horizontalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal.
     * 
     * The format of horizontalShapes property is:
     * 
     *  "shape(part),shape(part),..."
     * 
     * where:
     *
     *  "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part
     *  "part", defines the name of the part the shape is applied on (as defined bellow)
     * 
     * The horizontalShapes property supports any of the following parts:
     * 
     *  "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
     *  "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
     *  "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
     *  "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
     *  "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
     *  "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
     *  "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
     *  "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
     *  "r" (exRightBPart, >) indicates the right or down button
     *  "r1" (exRightB1Part) indicates the first additional button in the right or down side
     *  "r2" (exRightB2Part) indicates the second additional button in the right or down side
     *  "r3" (exRightB3Part) indicates the third additional button in the right or down side
     *  "r4" (exRightB4Part) indicates the forth additional button in the right or down side
     *  "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
     *  "r6" (exRightB6Part) indicates sixth additional button in the right or down side
     *  "t" (thumb), indicates the scroll's thumb
     *  "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
     * 
     * @type {string}
     * @example
     * 
     *  null {null}, specifies that the exontrol.ScrollBar.Options.horizontalShapes field defines the horizontalShapes property. By default, the exontrol.ScrollBar.Options.horizontalShapes is "hThumbLite(t)".
     *  "hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part
     *  "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
     *  "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll
     *  "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.
    */
    horizontalShapes: "tRange(t),range(b)",
    /**
     * @description The verticalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical.
     * 
     * The format of verticalShapes property is:
     * 
     *  "shape(part),shape(part),..."
     * 
     * where:
     *
     *  "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part
     *  "part", defines the name of the part the shape is applied on (as defined bellow)
     * 
     * The verticalShapes property supports any of the following parts:
     * 
     *  "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
     *  "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
     *  "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
     *  "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
     *  "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
     *  "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
     *  "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
     *  "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
     *  "r" (exRightBPart, >) indicates the right or down button
     *  "r1" (exRightB1Part) indicates the first additional button in the right or down side
     *  "r2" (exRightB2Part) indicates the second additional button in the right or down side
     *  "r3" (exRightB3Part) indicates the third additional button in the right or down side
     *  "r4" (exRightB4Part) indicates the forth additional button in the right or down side
     *  "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
     *  "r6" (exRightB6Part) indicates sixth additional button in the right or down side
     *  "t" (thumb), indicates the scroll's thumb
     *  "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
     * 
     * @type {string}
     * @example
     * 
     *  null {null}, specifies that the exontrol.ScrollBar.Options.verticalShapes field defines the verticalShapes property. By default, the exontrol.ScrollBar.Options.verticalShapes is "vThumbLite(t)".
     *  "vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part
     *  "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
     *  "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll
     *  "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.
    */
    verticalShapes: "tRange(t),range(b)",
    /**
     * @description The wheelChange field specifies the amount by which the scroll box position changes when the user rotates the mouse wheel.
     * @type {number}
     * @example
     * 
     *  null {null}, specifes that the exontrol.ScrollBar.Options.wheelChange field defines the smallChange property. By default, the exontrol.ScrollBar.Options.wheelChange is 1.
     *  0 {number}, no change while the user rotates the mouse wheel.
     *  1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel
    */
    wheelChange: 16,
  },
  /**
   * @description The smoothSel field defines the time in ms the control's selection goes from one state to another.
   * @type {number}
   * @example
   * 
   *   0 {number}, no smooth changes once the user selects a new item
   *   125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.
  */
  smoothSel: 125,
  /**
   * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
   * 
   * The format of shapes property is:
   * 
   *  "shape(part),shape(part),..."
   * 
   * where:
   *
   *  "shape", defines the shape to apply on the UI part as one of the following:
   * 
   *    any of 140 color names any browser supports (such as red, blue, green, ...)
   *    hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
   *    hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
   *    RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
   *    RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
   *    HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
   *    HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
   *    a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": &quot;RoundRect&quot;,&quot;fillColor&quot;:&quot;black&quot;,&quot;tfi&quot;: {&quot;fgColor&quot;: "white"}}}')
   *    specifies the name of the field within the exontrol.Shapes.Menu object (while it starts with a lowercase letter, such as dfitem which refers to exontrol.Shapes.Menu.dfitem shape)
   *    specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
   * 
   *  "part", defines the name of the part the shape is applied on (as defined bellow)
   * 
   * The shapes property supports any of the following parts:
   * 
   *  "arr" (arrow), defines the visual appearance to display item's arrow (while the item contains un-grouped sub-items)
   *  "barr" (bottom-arrow), defines the visual appearance to display button's arrow (to bottom)
   *  "btn" (button), defines the visual appearance to display the buttons
   *  "cap" (caption), defines the visual appearance for the item's caption
   *  "chk" (check), defines the visual appearance to display the item's check-box
   *  "flat" (flat), defines the visual appearance for menu's flat bar (usually shown in the left side of the menu)
   *  "img" (image), defines the visual appearance to display the item's image
   *  "item" (item), defines the visual appearance for the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items
   *  "menu" (menu), defines the visual appearance for the entire menu
   *  "rad" (radio), defines the visual appearance to display the item's radio-button
   *  "rarr" (right-arrow), defines the visual appearance to display button's arrow (to right)
   *  "sep" (separator), defines the visual appearance to display separator-items
   *  "sub" (sub-items), defines the visual appearance to display sub-items of the item (while the item is grouped)
   * 
   * @type {string}
   * @example
   * 
   *  null {null}, specifies the default visual appearance
   *  "" {string}, no shape (no visual appearance is applied to any part of the control)
   *  "red(item)", "#FF0000(item)", "rgb(255,0,0)(item)", "rgba(255,0,0,1)(item)" {string}, shows all-items in red
   *  '{"hover":{"frameColor":"black","pad":-0.5}}(item)' {string}, draws a black-frame arround the item being hovered
   *  "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Menu.xxx combined with exontrol.Shapes.Menu.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Menu.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Menu.zzz object defines the visual appearance of "y" part of the control
  */
  shapes: "shitem(item),shcap(cap),shsub(sub),shradio(rad),shcheck(chk),shflat(flat),shsep(sep),shbutton(btn),sharrow(arr,rarr,barr),shbarrow(barr)",
  /**
   * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control.
   * 
   * The format of the property is:
   * 
   *  "cursor(part),cursor(part),..."
   * 
   * where:
   *
   *  "cursor", defines the CSS mouse cursor to display while cursor hovers the part
   *  "part", defines the name of the part the cursor is applied on (as defined below)
   * 
   * The "cursor" can be any of the following:
   * 
   *  "alias", indicates a shortcut or alias will be created
   *  "all-scroll", indicates scrolling in any direction
   *  "auto", lets the browser decide the cursor based on context
   *  "cell", indicates a table cell
   *  "col-resize", indicates a column can be resized horizontally
   *  "context-menu", indicates a context menu is available
   *  "copy", indicates something will be copied
   *  "crosshair", a precise crosshair cursor
   *  "default", the default arrow cursor
   *  "e-resize", resize east (right edge)
   *  "ew-resize", resize horizontally
   *  "grab", indicates an item can be grabbed
   *  "grabbing", indicates an item is being grabbed
   *  "help", indicates help information is available
   *  "move", indicates something can be moved
   *  "n-resize", resize north (top edge)
   *  "ne-resize", resize northeast (top-right corner)
   *  "nesw-resize", resize along the northeast–southwest axis
   *  "no-drop", indicates dropping is not permitted
   *  "not-allowed", indicates the action is not allowed
   *  "ns-resize", resize vertically
   *  "nw-resize", resize northwest (top-left corner)
   *  "nwse-resize", resize along the northwest–southeast axis
   *  "pointer", the pointer cursor (a hand with a pointing finger)
   *  "progress", indicates background processing
   *  "row-resize", indicates a row can be resized vertically
   *  "s-resize", resize south (bottom edge)
   *  "se-resize", resize southeast (bottom-right corner)
   *  "sw-resize", resize southwest (bottom-left corner)
   *  "text", the text selection cursor (I-beam)
   *  "url(...)", uses a custom cursor image (with optional fallback)
   *  "vertical-text", the vertical text selection cursor
   *  "w-resize", resize west (left edge)
   *  "wait", indicates the program is busy
   *  "zoom-in", indicates zooming in
   *  "zoom-out", indicates zooming out
   *  "pointer", the pointer cursor (a hand with a pointing finger)
   *  
   * The "part" can be any of the following:
   * 
   *  "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
   *  "arr" (arrow), defines the mouse-cursor to show when the mouse pointer hovers the item's arrow (while the item contains un-grouped sub-items)
   *  "barr" (bottom-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to bottom)
   *  "btn" (button), defines the mouse-cursor to show when the mouse pointer hovers the buttons
   *  "cap" (caption), defines the mouse-cursor to show when the mouse pointer hovers the item's caption
   *  "chk" (check), defines the mouse-cursor to show when the mouse pointer hovers the item's check-box
   *  "flat" (flat), defines the mouse-cursor to show when the mouse pointer hovers menu's flat bar (usually shown in the left side of the menu)
   *  "img" (image), defines the mouse-cursor to show when the mouse pointer hovers the item's image
   *  "item" (item), defines the mouse-cursor to show when the mouse pointer hovers the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items
   *  "menu" (menu), defines the mouse-cursor to show when the mouse pointer hovers the entire menu
   *  "rad" (radio), defines the mouse-cursor to show when the mouse pointer hovers the item's radio-button
   *  "rarr" (right-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to right)
   *  "sep" (separator), defines the mouse-cursor to show when the mouse pointer hovers the separator-items
   *  "sub" (sub-items), defines the mouse-cursor to show when the mouse pointer hovers the sub-items of the item (while the item is grouped)
   * 
   * @type {string}
   * @example
   * 
   *   "" {string}, no mouse cursor support
   *   "pointer(chk,rad,btn)" {string}, indicates that the "pointer" mouse cursor is shown once the cursor hovers the "chk", "rad" or "btn" parts of the control
  */
  cursors: "pointer(chk,rad,btn,anchor)",
  /**
   * @description The open field defines the time in ms the top-level item opens its sub-menu once the cursor hovers it.
   * 
   * The value of open property can be any of the following:
   * 
   *   if positive, indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it.
   *   if 0, indicates that the top-level item opens its sub-menu as soon as cursor hovers it
   *   if negative, indicates that the item requires click to to open its sub-menu
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that the top-level item opens its sub-menu as soon as cursor hovers it.
   *  -1 {number}, indicates that the top-level item opens its sub-menu as soon as user clicks it.
  */
  open: -1,
  /**
   * @description The close field defines the time in ms the sub-menu is closed once the cursor hovers the top-level item.
   * 
   * The value of close property can be any of the following:
   * 
   *   if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item.
   *   if 0, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item
   *   if negative, it has no effect
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item.
   *  350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers a top-level item.
  */
  close: 0,
  /**
   * @description The subOpen field defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level).
   * 
   * The value of subOpen property can be any of the following:
   * 
   *   if positive, indicates the time in ms the item opens its sub-menu once the cursor hovers it.
   *   if 0, indicates that the item opens its sub-menu as soon as the cursor hovers it
   *   if negative, it has no effect so the item requires click in order to open its sub-menu
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that the item opens its sub-menu as soon as the cursor hovers it
   *  -1 {number}, indicates that the item's sub-menu is opened once the user clicks it
  */
  subOpen: 350,
  /**
   * @description The subClose field defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level).
   * 
   * The value of subClose property can be any of the following:
   * 
   *   if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item
   *   if 0, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item
   *   if negative, it has no effect
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item
   *  350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers the second-level item
  */
  subClose: 500,
  /**
   * @description The outClose field defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu.
   * 
   * The value of outClose property can be any of the following:
   * 
   *   if positive, specifies the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu
   *   if 0, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it
   *   if negative, it has no effect
   * 
   * @type {number}
   * @example
   * 
   *  0 {number}, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it
   *  350 {number}, the control's float-menus are closed once 350 ms ellapsed after the cursor hovers outside portion of the menu
  */
  outClose: 500,
  /**
   * @description The popupRatio field defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown.
   * 
   * For instance, 1/2 indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page. 
   * 
   * @type {number}
   * @example
   * 
   *   0 {number}, indicates that the size of the float-menu is not influenced by the document's view size, so it will be displayed entirely as it is
   *   0.5 {number}, indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page (control's scroll is automatically added if exArrangeItemsScroll flag is specified)
  */
  popupRatio: 1/2,
  /**
   * @description The closeOnClick field defines the type of items the user can click to close the float-menu(s).
   * 
   * The exontrol.Menu.CloseOnClickEnum type defines the following flags:
   * 
   *   exCloseOnDefault (0), indicates that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated
   *   exCloseOnDisabled (1), specifies that the float-menu is closed once the user clicks a disabled item
   *   exCloseOnSeparator (2), specifies that the float-menu is closed once the user clicks a separator item
   *   exCloseOnButton (4), specifies that the float-menu is closed once the user clicks an item of button-type
   *   exCloseOnCheck (8), specifies that the float-menu is closed once the user clicks an item of check-type
   *   exCloseOnRadio (16), specifies that the float-menu is closed once the user clicks an item of radio-type
   *   exCloseOnState (24), specifies that the float-menu is closed once the user clicks an item of check or radio-type
   *   exCloseOnAny (-1), specifies that the float-menu is closed once the user clicks any type of item anywhere
   * 
   * @type {exontrol.Menu.CloseOnClickEnum}
   * @example
   * 
   *   0 or exontrol.Menu.CloseOnClickEnum.exCloseOnDefault {number}, specifies that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated
   *   -1 or exontrol.Menu.CloseOnClickEnum.exCloseOnAny {number}, specifies that the float-menu is closed once the user clicks any type of item anywhere
  */
  closeOnClick: exontrol.Menu.CloseOnClickEnum.exCloseOnDefault,
  /**
    * @description The alignClient field specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed.
    * @type {boolean}
    * @example
    * 
    *   false {boolean}, specifies that the item and its sub-items are not vertically aligned (when a popup is opened)
    *   true {boolean}, specifies that the item and its sub-items are vertically aligned (when a popup is opened)
  */
  alignClient: false,
  /**
    * @description The alignContextMenu field defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates.
    * 
    * The exontrol.Menu.AlignContextMenuEnum type defines the following flags:
    * 
    *   exLeftAlign (0x00), positions the shortcut menu so that its left side is aligned with the coordinate specified by the x parameter
    *   exCenterAlign (0x04), centers the shortcut menu horizontally relative to the coordinate specified by the x parameter
    *   exRightAlign (0x08), positions the shortcut menu so that its right side is aligned with the coordinate specified by the x parameter
    *   exTopAlign (0x00), positions the shortcut menu so that its top side is aligned with the coordinate specified by the y parameter
    *   exVCenterAlign (0x10), centers the shortcut menu vertically relative to the coordinate specified by the y parameter
    *   exBottomAlign (0x20), positions the shortcut menu so that its bottom side is aligned with the coordinate specified by the y parameter
    * 
    * The alignContextMenu property has effect only, if the control is opened as a context-menu, using the Open() method.
    * 
    * @type {exontrol.Menu.AlignContextMenuEnum}
    * @example
    * 
    *   0 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign {number}, the context-menu is shown aligned to x and y properties
    *   20 or exontrol.Menu.AlignContextMenuEnum.exCenterAlign | exontrol.Menu.AlignContextMenuEnum.exVCenterAlign {number}, centers the context-menu relative to x and y properties
    *   32 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exBottomAlign {number}, opens the context-menu right to the x and y properties
  */
  alignContextMenu: exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign,
  /**
    * @description The allowToggleRadio field allows or prevents toggling the radio state
    * @type {boolean}
    * @example
    * 
    *   false {boolean}, no radio-item toggles its state (once the user clicks a checked radio-item, it stays checked (state on 1))
    *   true {number}, any radio-item toggles its state (once the user clicks a checked radio-item, it gets unchecked (state on 0))
  */
  allowToggleRadio: false,
  /**
    * @description The x field defines the horizontal position to display the context/shortcut-menu relative to the document.
    * 
    * The x property has effect only, if the control is opened as a context-menu (no canvas provided), using the Open() method.
    * 
    * @type {number}
    * @example
    * 
    *   event.pageX {number}, The pageX read-only property of the MouseEvent(event) interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.
  */
  x: null,
  /**
    * @description The y field defines the vertical position to display the context/shortcut-menu relative to the document.
    * 
    * The y property has effect only, if the control is opened as a context-menu (no canvas provided), using the Open() method.
    * 
    * @type {number}
    * @example
    * 
    *   event.pageY {number}, The pageY read-only property of the MouseEvent(event) interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document.
  */
  y: null
}

/////////////////////////////////////////////////////////// (exontrol.Shapes.Menu)
//
// The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object.
//
///////////////////////////////////////////////////////////

/**
 * @description The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object.
*/
exontrol.Shapes.Menu = exontrol.DfO( exontrol.Shapes.Menu /*inherits the default exontrol.Shapes.Menu like dfitem, ... */, 
{
  shitem:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      //frameColor: "rgba(0,0,0,0.05)",
    },
    /**
     * @description The disabled field holds an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is disabled).
     * @type {object}
    */
    disabled:
    {
      opacity: 0.5,
    },
    /**
     * @description The checked field holds an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero).
     * @type {object}
    */
    checked:
    {
      frameColor: "rgba(64,128,255,0.50)",
      fillColor: "rgba(64,128,255,0.25)",
      pad: -1
    },
    /**
     * @description The hover field holds an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. Indicates an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it.
     * @type {object}
    */
    hover:
    {
      frameColor: "rgba(64,128,255,0.50)",
      fillColor: "rgba(64,128,255,0.10)",
      pad: -1,
      primitive: "BevelRect",
      pArg:
      {
        x: 2,
        y: 2
      }
    },
    /**
     * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked. Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked
     * @type {object}
    */
    click:
    {
      frameColor: "rgba(64,128,255,0.50)",
      fillColor: "rgba(64,128,255,0.25)",
      pad: -1
    },
    /**
     * @description The open field holds an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. Indicates an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened.
     * @type {object}
    */
    open:
    {
      frameColor: "rgba(64,128,255,0.50)",
      fillColor: "rgba(64,128,255,0.25)",
      pad: -1
    }
  },
  shcap:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      formatText: exontrol.DrawTextFormatEnum.exTextWordEllipsis
    }
  },
  shsub:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      pad: -1,
      frameColor: "rgba(0,0,0,0.25)",
      primitive: "RoundRect"
    }
  },
  shsep:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      fillColor: "rgba(0,0,0,0.20)",
    }
  },
  shbutton:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      pad: -1,
      fillColor: "rgb(192,192,192)",
      frameColor: "rgb(128,128,128)",
    },
    /**
     * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked. Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked
     * @type {object}
    */
    click:
    {
      fillColor: "rgb(164,164,164)",
      frameColor: "rgb(80,80,80)",
    }
  },
  shflat:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      pad: -1,
      fillColor: "rgba(0,0,0,0.10)",
      frameColor: "rgba(0,0,0,0.5)",
      primitive: "BevelRect",
      pArg:
      {
        x: 2,
        y: 2
      }
    }
  },
  shcheck:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      pad: -1,
      fillColor: "white",
      frameColor: "gray",
      primitive: "Rect",
      draw: function( ctx, client , clientShape, oShapeData )
      {
        oShapeData && oShapeData.state && ctx.noFD(function() // ignores the context's font-decoration (bold, italic, underline, ...)
        {
          ctx.drawHTMLText( "<b><fgcolor black>&#10003;", client, exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextNoClip );
        })
      }
    }
  },
  shradio:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      pad: -1,
      fillColor: "white",
      frameColor: "gray",
      primitive: "Circle",
      draw: function( ctx, client , clientShape, oShapeData )
      {
        oShapeData.object && 
          oShapeData.object.getState() &&
            exontrol.D.P.fill( ctx,  exontrol.IRt( clientShape.slice(),-clientShape[exontrol.w] * 0.20,-clientShape[exontrol.w] *.20 ), "#666666", this.primitive, this.primitiveArg );
      }
    }
  },
  sharrow:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      fillColor: "rgba(0,0,0,0.50)",
      primitive: "EllipticPolygon",
      pArg:
      {
          edges: 3,
          startAngle: Math.PI/2
      }
    }
  },
  shbarrow:
  {
    /**
     * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. Indicates an object of exontrol.Def.Shape type that's applied on the part.
     * @type {object}
    */
    normal:
    {
      pArg:
      {
          startAngle: Math.PI
      }
    }
  },
});