( function( $ ) {
	'use strict';

	/**
	 * JetMegaMenuClass
	 */
	class JetMegaMenuClass {

		/**
		 * [constructor description]
		 * @return {[type]} [description]
		 */
		constructor( instance, options ) {
			this.defaultSettings = {
				menuId: '0',
				menuUniqId: window.jetMenu.getUniqId(),
				layout: 'horizontal',
				subTrigger: 'item', // item, submarker
				subEvent: 'click', // hover, click
				rollUp: true,
				breakpoint: 768, // Minimal menu width, when this plugin activates
				mouseLeaveDelay: 500,
				megaWidthType: 'container',
				megaWidthSelector: '',
				megaAjaxLoad: false,
				classes: {
					instance: 'menu',
					menuContainer: 'menu-container',
					menuList: 'menu-list',
					menuItem: 'menu-item',
					menuItemLink: 'menu-item__link',
					subMenuContainer: 'sub-menu',
					subMenuList: 'sub-menu__list',
					megaContainer: 'mega-container',
				}
			}

			this.$instance = $( instance );
			this.settings = $.extend( this.defaultSettings, options );
			this.$window = $( window );
			this.$document = $( document );
			this.$body = $( 'body' );
			this.isRTL = this.$body.hasClass( 'rtl' );
			this.isDropdownState = false;

			this.createInstance();
		}

		createInstance() {
			this.$menuList = $( `.${ this.settings.classes.menuList }`, this.$instance );
			this.$menuItems = $( `>.${ this.settings.classes.menuItem }:not(.${ this.settings.classes.menuItem }--roll-up)`, this.$menuList );
			this.$rollUpItem = $( `>.${ this.settings.classes.menuItem }--roll-up`, this.$menuList );

			this.menuItemsData = this.$menuItems.toArray().map( function( item ) {
				return {
					element: item,
					outerWidth: $( item ).outerWidth( true ),
					offsetLeft: $( item )[0].offsetLeft,
				}
			} );

			this.initWatcher( 50 );
			this.initEvents();
			this.maybeRollUpItems();
			this.rebuildSubContainers();
			this.watchTick();

			document.addEventListener( 'DOMContentLoaded', ( event ) => {
				setTimeout( () => {
					this.watchTick();
				}, 250 );
			} );

			this.$instance.addClass( `${ this.settings.classes.instance }--inited` );
			this.$document.trigger( 'JetMegaMenuInited' );
		}

		initEvents() {
			let debounceTimer,
				eventHandler = 'JetMegaMenu',
				$itemTargetSelector = 'item' === this.settings.subTrigger ? `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner` : `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner .${ this.settings.classes.menuItem }__dropdown`;

			switch ( this.settings.subEvent ) {
				case 'hover':
					this.$instance.on( `mouseenter.${ eventHandler }`, `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner`, { instance: this }, ( event ) => {
						let $target       = $( event.target ),
							$menuItem     = $target.parents( `.${ this.settings.classes.menuItem }` ),
							$subContainer = $( `.${ this.settings.classes.subMenuContainer }:first, .${ this.settings.classes.megaContainer }:first`, $menuItem ),
							templateContent = $subContainer.data( 'template-content' ) || false,
							templateId    = $subContainer.data( 'template-id' ) || false;

						$( `.${ this.settings.classes.menuItem }--hover`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` );

						if ( $menuItem.hasClass( `${ this.settings.classes.menuItem }-has-children` ) ) {
							$menuItem.addClass( `${ this.settings.classes.menuItem }--hover` );

							if ( templateId ) {
								this.maybeTemplateLoad( templateId, templateContent, $subContainer );
							}
						}
					} );

					this.$instance.on( `mouseleave.${ eventHandler }`, `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner`, ( event ) => { /* Item Mouse Leave Event */ } );
					break;

				case 'click':

					this.$instance.on( `click.${ eventHandler }`, $itemTargetSelector, ( event ) => {
						event.preventDefault();
						event.stopPropagation();

						let $currentTarget  = $( event.currentTarget ),
						    $menuItem       = $currentTarget.closest( `.${this.settings.classes.menuItem}` ),
						    $menuItemLink   = $( '.jet-mega-menu-item__link', $menuItem ).first(),
						    $siblingsItems  = $menuItem.siblings( `.${this.settings.classes.menuItem}-has-children` ),
						    $subContainer   = $( `.${this.settings.classes.subMenuContainer}:first, .${this.settings.classes.megaContainer}`, $menuItem ),
						    templateContent = $subContainer.data( 'template-content' ) || false,
						    templateId      = $subContainer.data( 'template-id' ) || false;

						if ( $siblingsItems.length ) {
							$siblingsItems.removeClass( `${ this.settings.classes.menuItem }--hover` );
							$( `.${ this.settings.classes.menuItem }-has-children`, $siblingsItems ).removeClass( `${ this.settings.classes.menuItem }--hover` );
						}

						if ( $menuItem.hasClass( `${ this.settings.classes.menuItem }-has-children` ) ) {
							if ( ! $menuItem.hasClass( `${ this.settings.classes.menuItem }--hover` ) ) {
								$menuItem.addClass( `${ this.settings.classes.menuItem }--hover` );
							} else {
								$menuItem.removeClass( `${ this.settings.classes.menuItem }--hover` );
							}

							if ( templateId ) {
								this.maybeTemplateLoad( templateId, templateContent, $subContainer );
							}
						} else {
							let itemLink = $menuItemLink.attr( 'href' ) || '#',
							    target   = $menuItemLink.attr( 'target' ) || '_self';

							window.open( itemLink, target );

							return false;
						}
					} );
					break;
			}

			this.$instance.on( `mouseenter.${ eventHandler }`, `.${ this.settings.classes.subMenuContainer }, .${ this.settings.classes.megaContainer }`, ( event ) => {
				clearTimeout( debounceTimer );
			} );

			this.$instance.on( `mouseenter.${ eventHandler }`, ( event ) => {
				clearTimeout( debounceTimer );
			} );

			this.$instance.on( `mouseleave.${ eventHandler }`, ( event ) => {
				debounceTimer = setTimeout( () => {
					$( `.${ this.settings.classes.menuItem }--hover`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` );
				}, this.settings.mouseLeaveDelay );
			} );

			this.$window.on( `orientationchange.${ eventHandler } resize.${ eventHandler }`, ( event ) => {
				$( `.${ this.settings.classes.menuItem }`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` );
				this.$instance.removeClass( `${ this.settings.classes.instance }--dropdown-open` );
			} );

			this.$document.on( `touchend.${ eventHandler }`, ( event ) => {

				if ( $( event.target ).closest( `.${ this.settings.classes.menuItem }` ).length ) {
					return;
				}

				$( `.${ this.settings.classes.menuItem }`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` );
			} );

			this.$instance.on( 'watchTickEventResetRegularState', ( event ) => {
				this.resetRegularState();

				if ( this.$rollUpItem[0] ) {
					$( `.${ this.settings.classes.subMenuList }:first`, this.$rollUpItem ).empty();
					this.$rollUpItem[0].hidden = true;
				}

				for ( let index = 0; index < this.menuItemsData.length; index++ ) {
					this.menuItemsData[ index ].element.hidden = false;
				}
			} );

			this.$instance.on( 'watchTickEventResetDropdownState', ( event ) => {
				this.resetDropdownState();
				this.$instance.removeClass( `${ this.settings.classes.instance }--dropdown-open` );
			} );

			this.$instance.on( `click.${ eventHandler }`, `.${ this.settings.classes.instance }-toggle`,   ( event ) => {

				if ( ! this.$instance.hasClass( `${ this.settings.classes.instance }--dropdown-open` ) ) {
					this.$instance.addClass( `${ this.settings.classes.instance }--dropdown-open` );
				} else {
					this.$instance.removeClass( `${ this.settings.classes.instance }--dropdown-open` );
				}
			} );

		}

		/**
		 * Init watcher function.
		 *
		 * @param  {number} Watcher debounce delay.
		 * @return {void}
		 */
		initWatcher( delay = 10 ) {
			$( window ).off( `resize.JetMegaMenu${ this.settings['menuUniqId'] }` ).on( `resize.JetMegaMenu${ this.settings['menuUniqId'] } orientationchange.JetMegaMenu${ this.settings['menuUniqId'] }`, this.debounce( delay, this.watchTick.bind( this ) ) );
			this.$instance.trigger( 'containerResize' );
		}

		/**
		 * Responsive menu watcher callback.
		 *
		 * @param  {Object} Resize or Orientationchange event.
		 * @return {void}
		 */
		watchTick( event ) {

			if ( this.isDropdown() ) {

				if ( ! this.isDropdownState ) {
					this.$instance.trigger( 'watchTickEventResetRegularState' );
				}

				this.isDropdownState = true;
				this.$instance.removeClass( `${ this.settings.classes.instance }--layout-horizontal ${ this.settings.classes.instance }--layout-vertical` );
				this.$instance.addClass( `${ this.settings.classes.instance }--layout-dropdown` );
				this.$instance.trigger( 'watchTickEventDropdown' );
			} else {

				if ( this.isDropdownState ) {
					this.$instance.trigger( 'watchTickEventResetDropdownState' );
				}

				this.isDropdownState = false;
				this.$instance.removeClass( `${ this.settings.classes.instance }--layout-dropdown` );
				this.$instance.addClass( `${ this.settings.classes.instance }--layout-${ this.settings.layout }` );
				this.$instance.trigger( `watchTickEventRegular` );
				this.$instance.trigger( `watchTickEventRegular--${ this.settings.layout }` );
			}

			this.$instance.trigger( 'watchTickEvent' );
		}

		/**
		 * Rollup rebuilding function.
		 *
		 * @return {void}
		 */
		maybeRollUpItems() {
			this.$instance.on( 'watchTickEventRegular--horizontal', ( event ) => {

				if ( ! this.settings.rollUp ) {
					return false;
				}

				let mainMenuWidth     = this.$instance.width(),
				    visibleItemsArray = [],
				    hiddenItemsArray  = [];

				for ( let index = 0; index < this.menuItemsData.length; index++ ) {
					let itemData     = this.menuItemsData[ index ],
					    nextItemData = this.menuItemsData[ index + 1 ] || false,
					    offsetLeft   = nextItemData ? nextItemData.offsetLeft : itemData.offsetLeft + itemData.outerWidth,
					    item         = itemData.element;

					if ( offsetLeft + this.$rollUpItem.outerWidth( true ) > mainMenuWidth ) {
						item.hidden = true;
						hiddenItemsArray.push( item );
					} else {
						item.hidden = false;
						visibleItemsArray.push( item );
					}
				}

				$( `.${ this.settings.classes.subMenuList }:first`, this.$rollUpItem ).empty();

				for ( let hiddenMenuItem of hiddenItemsArray ) {
					let $hiddenClone = $( hiddenMenuItem ).clone();

					$hiddenClone[0].hidden = false;

					$( `>.${ this.settings.classes.menuItem }__inner >.${ this.settings.classes.menuItemLink }`, $hiddenClone ).toggleClass( `${ this.settings.classes.menuItemLink }--top-level ${ this.settings.classes.menuItemLink }--sub-level` );
					$( `.${ this.settings.classes.subMenuList }:first`, this.$rollUpItem ).append( $hiddenClone );
				}

				if ( this.$rollUpItem[0] ) {
					this.$rollUpItem[0].hidden = hiddenItemsArray.length ? false : true;
				}

				this.$instance.trigger( 'rollUpItemsEvent' );
			} )
		}

		/**
		 * Rebuild SubContainers function.
		 *
		 * @return {void}
		 */
		rebuildSubContainers() {
			this.$instance.on( 'watchTickEventRegular--horizontal', ( event ) => {
				let $megaMenuList   = $( `.${ this.settings.classes.megaContainer }`, this.$instance ),
				    $subMenuList    = $( `.${ this.settings.classes.subMenuContainer }`, this.$instance ),
				    subInverseClass = `${ this.settings.classes.subMenuContainer }--inverse`,
				    instanceWidth   = this.$instance.width(),
				    instanceOffset  = this.$instance.offset();

				$subMenuList.each( ( index, element ) => {
					let $element = $( element );

					if ( this.isOffscreenX( element ) ) {
						$element.addClass( subInverseClass );
					} else {
						$element.removeClass( subInverseClass );
					}
				} );

				switch( this.settings.megaWidthType ) {
					case 'container':
						$megaMenuList.each( ( index, element ) => {
							let $element           = $( element ),
							    $elementPosition = $element.data( 'position' ),
							    elementOffset      = $element.offset(),
							    elementDeltaOffset = 'default' === $elementPosition ? Math.ceil( instanceOffset.left - elementOffset.left ) : 0;

							$element.css( {
								'--jmm-submenu-width': `${ instanceWidth }px`,
								'--jmm-submenu-delta-x-offset': `${ elementDeltaOffset }px`
							} );
						} );

						break;
					case 'selector':
						let $customSelector = $( this.settings.megaWidthSelector );

						if ( $customSelector[0] ) {
							let selectorWidth = $customSelector.width(),
							    selectorOffset = Math.round( $customSelector.offset().left );

							document.fonts.ready.then( () => {
								$megaMenuList.each( ( index, element ) => {
									let $element           = $( element ),
										$elementPosition   = $element.data( 'position' ),
										elementOffset      = Math.round( $element.offset().left ),
										elementDeltaOffset = 'default' === $elementPosition ? Math.round( selectorOffset - elementOffset ) : 0;

									$element.css( {
										'--jmm-submenu-width': `${ selectorWidth }px`,
										'--jmm-submenu-delta-x-offset': `${ elementDeltaOffset }px`
									} );
								} );
							} );

						}

						break;
					case 'items':
						let $lastItem        = $( `.${ this.settings.classes.menuItem }--top-level:not([hidden]):last`, this.$instance ),
						    $firstItem        = $( `.${ this.settings.classes.menuItem }--top-level:not([hidden]):first`, this.$instance ),
						    lastItemBounding = $lastItem[0].getBoundingClientRect(),
						    firstItemBounding = $firstItem[0].getBoundingClientRect(),
						    itemsWidth       = lastItemBounding.x + lastItemBounding.width  - firstItemBounding.x;

						$megaMenuList.each( ( index, element ) => {
							let $element           = $( element ),
							    $elementPosition   = $element.data( 'position' ),
							    elementOffset      = $element.offset(),
							    elementDeltaOffset = 'default' === $elementPosition ? Math.ceil( instanceOffset.left - elementOffset.left ) : 0;

							$element.css( {
								'--jmm-submenu-width': `${ itemsWidth }px`,
								'--jmm-submenu-delta-x-offset': `${ elementDeltaOffset }px`
							} );
						} );
						break;
				}
			} );

			this.$instance.on( 'watchTickEventRegular--vertical', ( event ) => {
				let $megaMenuList    = $( `.${ this.settings.classes.megaContainer }`, this.$instance ),
				    $subMenuList     = $( `.${ this.settings.classes.subMenuContainer }`, this.$instance ),
				    instanceWidth    = this.$instance.width(),
				    instanceHeight   = this.$instance.height(),
				    instanceOffset   = this.$instance.offset(),
					windowWidth      = this.$window.outerWidth( true ),
					subInverseClass  = `${ this.settings.classes.subMenuContainer }--inverse`,
					megaInverseClass = `${ this.settings.classes.megaContainer }--inverse`;

				$subMenuList.each( ( index, element ) => {
					let $element = $( element );

					if ( this.isOffscreenX( element ) ) {
						$element.addClass( subInverseClass );
					} else {
						$element.removeClass( subInverseClass );
					}
				} );

				$megaMenuList.each( ( index, element ) => {
					let $element            = $( element ),
					    $elementPosition    = $element.data( 'position' ),
					    $parentElement      = $element.parent(),
					    elementOffset       = $element.offset(),
					    elementDeltaOffsetX = ( instanceOffset.left - elementOffset.left ) + instanceWidth,
					    elementDeltaOffsetY = 'default' === $elementPosition ? ( instanceOffset.top - elementOffset.top ) : 0,
					    elementDeltaWidth   = ( elementDeltaOffsetX + $element.width() );

					if ( $parentElement.hasClass(`${ this.settings.classes.menuItem }--top-level` ) ) {
						$element.css( {
							//'--jmm-submenu-width': `${ instanceWidth }px`,
							'--jmm-submenu-min-height': `${ instanceHeight }px`,
							//'--jmm-submenu-delta-x-offset': `${ elementDeltaOffsetX }px`,
							'--jmm-submenu-delta-y-offset': `${ elementDeltaOffsetY }px`
						} );
					}

					if ( this.isOffscreenX( element ) ) {
						$element.addClass( megaInverseClass );
					} else {
						$element.removeClass( megaInverseClass );
					}
				} );
			} );
		}

		/**
		 * Reset Regular State
		 *
		 * @return {void}
		 */
		resetRegularState() {}

		/**
		 * Reset Dropdown State
		 *
		 * @return {void}
		 */
		resetDropdownState() {}

		/**
		 * Get mobile status.
		 *
		 * @return {boolean} Mobile Status
		 */
		isDropdown() {
			return ( this.$window.width() < this.settings.breakpoint || 'dropdown' === this.settings.layout ) ? true : false;
		}

		/**
		 *
		 * @param element
		 * @returns {boolean}
		 */
		isOffscreenX( element ) {
			let rect = element.getBoundingClientRect();

			return (
				rect.x < 0 || ( rect.x + rect.width ) > window.innerWidth
			);
		}

		/**
		 * Mobile and tablet check funcion.
		 *
		 * @return {boolean} Mobile Status
		 */
		mobileAndTabletcheck() {
			let check = false;

			(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);

			return check;
		}

		/**
		 * Debounce the function call
		 *
		 * @param  {number}   threshold The delay.
		 * @param  {Function} callback  The function.
		 */
		debounce( threshold, callback ) {
			let timeout;

			return function debounced( $event ) {
				function delayed() {
					callback.call( this, $event );
					timeout = null;
				}

				if ( timeout ) {
					clearTimeout( timeout );
				}

				timeout = setTimeout( delayed, threshold );
			};
		}

		maybeTemplateLoad( templateId, templateContent, $templateContainer ) {

			if ( ! this.settings.megaAjaxLoad ) {
				return;
			}

			if ( $templateContainer.hasClass( 'template-loaded' ) ) {
				return;
			}

			let getMegaContentUrl = 'default' === templateContent ? window.jetMenu