var windowWidth = $(window).width();
var mainNavFixed = $('.m-mainNavigation--fixed');
var wrapperContainerFixed = $('.m-mainNavigation__col--fixed');
var oHeader = $('.o-header');

var mBreadcrumb = function () {
  var __items = $('.m-breadcrumb__items');
  var __item = $('.m-breadcrumb__item');

  $('.m-breadcrumb__item--separator').remove();

  if (__item.length > 5) {
    __items.find('.m-breadcrumb__item').addClass('m-breadcrumb__item--hide');
    __items.find('.m-breadcrumb__item:first-child, .m-breadcrumb__item:nth-child(2)').removeClass('m-breadcrumb__item--hide');
    __items.find('.m-breadcrumb--active').removeClass('m-breadcrumb__item--hide');
    $('<li class="m-breadcrumb__item m-breadcrumb__item--points"><a class="m-breadcrumb__link m-breadcrumb--toggle" href="#" title="">...</a></li>').insertBefore('.m-breadcrumb__item:nth-child(3)');
  }

  $('.m-breadcrumb--toggle').on('click', function (event) {
    event.preventDefault();
    $('.m-breadcrumb__item--points').remove();
    $('.m-breadcrumb__item--hide').removeClass('m-breadcrumb__item--hide');
  });
};

var mMainNavigation = function () {
  if (windowWidth > 992) {
    try {
      mainNavFixed.affix({
        offset: {
          top: function () {
            var nav = mainNavFixed.parent();
            var navOffsetTop = nav.offset().top;
            var navHeight = nav.outerHeight();
            var navTopPos = navOffsetTop + navHeight;
            return (navTopPos);
          }
        }
      });
    } catch(err) {
      $(window).scroll(function() {
        if (window.pageYOffset > 163) {
          mainNavFixed.addClass('affix');
        } else {
          mainNavFixed.removeClass('affix');
        }
      });
    }

    if (mainNavFixed.hasClass('affix')) {
      oHeader.addClass('js-headerFixed');
      $(window).trigger('init:datatable');
    }

    mainNavFixed.on('affix.bs.affix', function () {
      oHeader.addClass('js-headerFixed');
      $(window).trigger('init:datatable');
    });

    mainNavFixed.on('affix-top.bs.affix', function () {
      oHeader.removeClass('js-headerFixed');
    });
  } else if (windowWidth < 991) {
    wrapperContainerFixed.affix({
      offset: {
        top: function () {
            var nav = wrapperContainerFixed.parent();
            var navOffsetTop = nav.offset().top;
            var navHeight = nav.outerHeight();
            var navTopPos = navOffsetTop + navHeight;
            return (navTopPos);
        }
      }
    });

    if (wrapperContainerFixed.hasClass('affix')) {
      oHeader.addClass('js-headerFixed');
      $(window).trigger('init:datatable');
    }

    wrapperContainerFixed.on('affix.bs.affix', function () {
      oHeader.addClass('js-headerFixed');
      $(window).trigger('init:datatable');
    });

    wrapperContainerFixed.on('affix-top.bs.affix', function () {
      oHeader.removeClass('js-headerFixed');
    });
  }

  $.fn.showOn = function (d) {
    if (!this.length) {
      return this;
    }
    this.each(function () {
      if (d) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  };

  $.fn.btmenu = function (p) {
    if (!this.length) {
      return this;
    }
    var settings = $.extend({}, {
      backLabel: 'Back'
    }, p);
    this.each(function () {
      $(this).on('show-children', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).trigger({
          type: 'show-sub-children',
          title: event.title
        });
      }).on('hide-children', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).trigger({
          type: 'hide-sub-children',
          title: event.title
        });
      });
      $(this).children('li').on('show-children', function (event) {
        $(this).children('a').each(function () {
          $(this).data('original-text', $(this).text());
          $(this).removeClass('m-mainNavigation__link').addClass('m-mainNavigation__link--back');
          $(this).find('span').text(settings.backLabel);
          $(this).insertBefore($(this).parent().find('> ul'));
        });
        $(this).siblings('li').showOn(false);
        $(this).children('ul').addClass('m-mainNavigation__dropdownItems--visible').showOn(true);
        $(this).children('ul').removeClass('m-mainNavigation__dropdownItems--hidden').showOn(true);
      }).on('hide-children', function (event) {
        $(this).children('a').each(function () {
          $(this).removeClass('m-mainNavigation__link--back').addClass('m-mainNavigation__link');
          $(this).find('span').text($(this).data('original-text'));
        });
        $(this).siblings('li').showOn(true);
        $(this).children('ul').removeClass('m-mainNavigation__dropdownItems--visible').showOn(false);
        $(this).children('ul').addClass('m-mainNavigation__dropdownItems--hidden').showOn(false);
      }).on('show-sub-children', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).children('a').hide();
      }).on('hide-sub-children', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).children('a').show();
      });
    });

    this.children('li').find('ul').showOn(false);
    this.children('li').children('a').on('click', function (event) {
      if ($(this).siblings('ul').length) {
        event.preventDefault();
        event.stopPropagation();
        $(this).trigger({
          type: ($(this).hasClass('m-mainNavigation__link--back') ? 'hide-children' : 'show-children'),
          title: $(this).find('span').data('original-text')
        });
      }
    });
  };

  var __itemsWrapper = $('.m-mainNavigation__itemsWrapper');
  var __toggle = $('.m-mainNavigation__toggle');
  // var __items = $('.m-mainNavigation__items');
  var __link = $('m-mainNavigation__dropdownItem:not(.m-mainNavigation__dropdownItem--header) .m-mainNavigation__link');

  if (windowWidth < 991) {
    var label = __itemsWrapper.data('backlabel');
    __itemsWrapper.find('ul').btmenu({
      backLabel: label
    });

    __toggle.on('click', function () {
      __itemsWrapper.toggleClass('m-mainNavigation__itemsWrapper--active');
      wrapperContainerFixed.toggleClass('m-mainNavigation__col--active');
      $(this).toggleClass('m-mainNavigation__toggle--active');
      $('html, body').animate({
        scrollTop: 0
      }, 450);
    });

    __link.on('click', function (event) {
      if ($(this).parent().has('ul')) {
        event.preventDefault();
      } else {
        return false;
      }
    });
  } else {
    return false;
  }
};

var mHeaderNavigationFlyout = function () {
  var __buttonClose = $('.m-header_navigation_flyout__button--close');
  var __link = $('.m-mainNavigation__link');
  var __linkActive = $('.m-mainNavigation__link--active');

  var showFlyout = function () {
    __link.each(function () {
      var target = $(this).data('target');
      if (target) {
        $(this).on('click', function (event) {
          event.preventDefault();
          if ($(this).hasClass('m-mainNavigation__link--active')) {
              __buttonClose.trigger('click');
          } else {
              __buttonClose.trigger('click');
              $(this).addClass('m-mainNavigation__link--active');
              $(target).addClass('open');
              $('html, body').animate({
                scrollTop: 0
              }, 550);
            }
        });
      }

      __buttonClose.on('click', function (event) {
        event.preventDefault();
        $(target).removeClass('open');
        __link.removeClass('m-mainNavigation__link--active');
      });
    });
  };

  if (windowWidth > 992) {
    showFlyout();
  }
};

var mSearchNavigation = function () {
  var $document = $(document);
  var searchNavigation = $('.m-searchNavigation');
  var __form = $('.m-searchNavigation__form');
  var __inputWrapper = $('.m-searchNavigation__inputWrapper');
  var __label = $('.m-searchNavigation__label');
  var __submit = $('.m-searchNavigation__button--submit');
  var __close = $('.m-searchNavigation__button--close');
  var __searchField = $('.m-searchNavigation__searchField');
  var __overlay = $('.m-searchNavigationResults');
  var conversionBar = $('.m-conversion_bar');

  var searchNavigationShow = function () {
    searchNavigation.addClass('m-searchNavigation--open');
    __inputWrapper.addClass('m-searchNavigation__inputWrapper--expanded');
    __searchField.prop('placeholder', '');
    __submit.addClass('m-searchNavigation__submit--active');
    conversionBar.css('z-index', '1000');
  };

  var searchNavigationHide = function () {
    searchNavigation.removeClass('m-searchNavigation--open');
    __inputWrapper.removeClass('m-searchNavigation__inputWrapper--expanded');
    __submit.removeClass('m-searchNavigation__submit--active');
    conversionBar.removeAttr('style');
  };

  // var searchNavigationOverlayShow = function () {
  //   __overlay.removeClass('m-searchNavigationResults--hidden');
  // };

  var searchNavigationOverlayHide = function () {
    __overlay.addClass('m-searchNavigationResults--hidden');
  };

  __submit.on('click', function (event) {
    __inputWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (event) {
      __searchField.focus();
    });
  });

  __label.on('click', function (event) {
    event.preventDefault();
    searchNavigationShow();
    __inputWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (event) {
      __searchField.focus();
    });
  });

  __form.on('submit', function (event) {
    var searchNavigationStatus = searchNavigation.hasClass('m-searchNavigation--open');
    if (!searchNavigationStatus) {
      event.preventDefault();
      searchNavigationShow();
    } else {
      return true;
    }
  });

  __close.on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    searchNavigationHide();
    searchNavigationOverlayHide();
    __inputWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (event) {
      __searchField.blur();
    });
  });

  __searchField.on('keyup', function () {
    if ($(this).val().length > 2) {
            //         searchNavigationOverlayShow();
    } else searchNavigationOverlayHide();
  });

  $document.on('click', function () {
    searchNavigationOverlayHide();
  });
};

var mConversionBar = function () {
  var __items = $('.m-mainNavigation .m-conversion_bar');
  var __linkToTop = $('.m-conversion_bar__link--toTop');

  if (windowWidth < 768) {
    __items.find('.notification-white').removeClass('notification-white').addClass('notification-red');
  }
  if (windowWidth > 768) {
    mainNavFixed.on('affix.bs.affix', function () {});
    mainNavFixed.on('affix-top.bs.affix', function () {});
  }
  __linkToTop.on('click', function (event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: 0
    }, 450);
  });
};

var HeaderSearch = function (element, options) {
  var elem = $(element);
  var obj = this;
  var currentSearchTerm;
  var defaultComplexItemsTemplate = '<a href="{productUrl}" class="m-searchNavigationResults__link">' +
          '<ul class="m-searchNavigationResults__items">' +
          '    <li class="m-searchNavigationResults__item m-searchNavigationResults__item--image">' +
          '        <img alt="{headline}" title="{headline}" class="m-searchNavigationResults__image" src="{imageUrl}">' +
          '    </li>' +
          '    <li class="m-searchNavigationResults__item">' +
          '        <p class="m-searchNavigationResults__text">{description}</p>' +
          '        <div class="m-searchNavigationResults__headline headline hl4">{headline}</div>' +
          '    </li>' +
          '</ul></a>';
    // Merge options with defaults
  var settings = $.extend({
    currlang: 'DE',
    url: '/_res/js/searchresults_ki.json',
    searchbackend: 'https://www.bosch-professional.com/boptbeusearchfrontend/de/de/search/search.htm?sparam=',
    searchfield: '.m-searchNavigation__searchField',
    content_area: '#header_search_results',
    category: 'searchCategory',
    char_min: 2,
    max_results: 10,
    typeahead: true,
    complexItemsTemplate: defaultComplexItemsTemplate,
    suggestionKeys: ['suggestions', 'categories', 'service'],
    typeahead_cb: function () {
      typeahead_cb();
    },
    display_ta_cb: function (data) {
      display_ta_cb(data);
    },
    debug: true
  }, options || {});

  var gobutton = elem.find(settings.gobutton).css('cursor', 'pointer');
  var searchfield = elem.find(settings.searchfield);

  if (settings.typeahead) {
        // Initzialize TA Markup ...

        // Typeahead doesnt work with autocomplete!
    searchfield.prop('autocomplete', 'off');
  }

  elem.on('keyup', settings.searchfield, function (e) {
    if (settings.typeahead && typeof settings.typeahead_cb ===
            'function') {
      currentSearchTerm = searchfield.val().replace(
                /<(?:.|\n)*?>/gm, '');
      if (currentSearchTerm.length > settings.char_min) {
        settings.typeahead_cb.call(this);
      } else if (settings.debug) {
        console.warn('TypeAhead suche started ab ' +
                    settings.char_min + ' Zeichen! Eingabe: "' +
                    searchfield.val().replace(/<(?:.|\n)*?>/gm,
                        '') + '"');
      }
    } else if (settings.debug) {
      console.warn('No valid AJAX Callback function!');
    }
  });

    // highlight current search term
  var preg_quote = function (str) {
    return (str + '').replace(
            /([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
  };

  var highlight = function (data, search) {
    return data.replace(new RegExp('(' + preg_quote(search) + ')',
            'gi'), '<b class="strong">$1</b>');
  };

  var renderComplexSuggestionItems = function (data) {
    var renderedItems = '';
    var items = data.complexSuggests;
    var itemsLength = data.complexSuggests.length;
    for (var i = 0; i < itemsLength; i++) {
      var item = items[i];
      var text = settings.complexItemsTemplate;
      for (var key in item) {
        var search = new RegExp('\{' + key + '\}', 'ig');
        text = text.replace(search, item[key]);
      }
      renderedItems += text;
    }
    return renderedItems;
  };
  var renderSuggestion = function (data, part) {
    var suggestion = data[part];
    var renderedItems = '';
    if (suggestion && suggestion.links) {
      var links = suggestion.links;
      var linksLength = links.length;
      if (linksLength > 0) {
        renderedItems = '<div class="m-searchNavigationResults__headline headline small">' + suggestion.label + '</div>';
        renderedItems += '<div class="m-searchNavigationResults__itemsWrapper">';
        renderedItems += '<ul class="m-searchNavigationResults__items">';
        for (var i = 0; i < linksLength; i++) {
          var link = links[i];
          renderedItems += '<li class="m-searchNavigationResults__item">';
          renderedItems += '<a href="' + link.url + '" class="m-searchNavigationResults__link">';
          renderedItems += highlight(link.label, data.searchTerm);
          renderedItems += '</a></li>';
        }
        renderedItems += '</ul></div>';
      }
    }
    return renderedItems;
  };
    // Display Typeahead Results - Private method
  var display_ta_cb = function (data) {
    var output = '';
    var outputComplexSuggests = '';
    var wrapperComplexSuggests = '';
    var outputAutoSuggests = '';
    var outputCategorySuggests = '';
    var wrapperAutoSuggests = '';
    var label_from = 'from ';

    if (data.complexSuggests.length < 1 && !data.suggestions && data.suggestions.links.length < 1) {
      return;
    }

    outputComplexSuggests = renderComplexSuggestionItems(data);

        // build wrapperComplexSuggests
    wrapperComplexSuggests +=
            '<div class="m-searchNavigationResults__detailed">';
    wrapperComplexSuggests += '<div class="m-searchNavigationResults__headlinesearchterm small">';
    wrapperComplexSuggests += data.complexSuggestionHeadline + '</div>';
    wrapperComplexSuggests += '<div class="m-searchNavigationResults__allproducts">';
    wrapperComplexSuggests += '<a class="link small" href="' + data.allProducts.url + '">';
    wrapperComplexSuggests += data.allProducts.label;
    wrapperComplexSuggests += '</a></div>';
    wrapperComplexSuggests +=
            '    <div class="m-searchNavigationResults__itemsWrapper">';
    wrapperComplexSuggests += outputComplexSuggests;
    wrapperComplexSuggests += '    </div>';
    wrapperComplexSuggests += '</div>';

        // build wrapperAutoSuggests
    wrapperAutoSuggests +=
            '<div class="m-searchNavigationResults__suggestions">';
    var suggestionKeysLength = settings.suggestionKeys.length;
    for (var i = 0; i < suggestionKeysLength; i++) {
      var suggestionKey = settings.suggestionKeys[i];
      wrapperAutoSuggests += renderSuggestion(data, suggestionKey);
    }

    wrapperAutoSuggests += '<div class="m-searchNavigationResults__viewallresults small">';
    wrapperAutoSuggests += '<a class="link small" href="' + data.allResults.url + '">';
    wrapperAutoSuggests += data.allResults.label;
    wrapperAutoSuggests += '</a></div>';
    wrapperAutoSuggests += '</div>';

        // build output
    output += wrapperComplexSuggests + wrapperAutoSuggests;

    $(settings.content_area).html(output);
    $(settings.content_area).removeClass(
            'm-searchNavigationResults--hidden');
  };

    // AJAX Typeahead callback - Private method
  var typeahead_cb = function () {
    $.ajax({
      url: settings.url,
      data: 'q=' + currentSearchTerm,
      dataType: 'json',
      cache: false,
      async: true
    })
            .done(function (response) {
              if (typeof settings.display_ta_cb === 'function') {
                settings.display_ta_cb.call(this, response);
              } else if (settings.debug) {
                console.warn('No valid AJAX Callback function!');
              }
            })
            .fail(function (response) {
              settings.debug && console.warn('ERROR IN REQUEST\n' +
                    response.responseText);
            });
  };
};

/* ============= MAIN headsearch ============= */
$.fn.headsearch = function (options) {
    // if nothing is selected, return nothing; can't chain anyway
  if (!this.length) {
    if (options && options.debug && window.console) {
      console.warn('no objects found, returning nothing.');
    }
    return;
  }

  return this.each(function () {
    var element = $(this);
        // Return early if this element already has a plugin instance
    if (element.data('headsearch')) return;

    var headsearch = new HeaderSearch(this, options);

        // Store plugin object in this element's data
    element.data('headsearch', headsearch);
  });
};

$(function () {
  mBreadcrumb();
  mMainNavigation();
  mSearchNavigation();
  mHeaderNavigationFlyout();
  mConversionBar();
});

/* START Desktop Flyout */
var initFlyout = function (wrapper) {
  wrapper.each(function (i, el) {
    var trigger = $(this).find('> ul > li > a');

    trigger.each(function (j, el) {
      var siblings = $(this).closest('ul').find('>li').not(':eq(' + j + ')');

      var triggerParent = $(this).closest('li');
      var childwrapper = $(this).next();
      var backlink = childwrapper.find(' > .backlink');
      var hasSublevel = childwrapper.length;
      var isChild = $(this).parent().is('li');

      $(this).on('click', function (event) {
        // console.log('trigger Flyout');
        if (hasSublevel) {
          event.preventDefault();
          if (isChild) {
            triggerParent.removeClass('hidden').addClass('visible');
          }
          $(this).removeClass('visible').addClass('hidden');
          siblings.removeClass('visible').addClass('hidden');
          childwrapper.removeClass('hidden').addClass('visible');

        // hide all backlinks and list-headlines
          $('.backlink').removeClass('visible').addClass('hidden');
          $('.list-headline').removeClass('visible').addClass('hidden');

        // show current backlink and list-headline
          $(this).next().find('.backlink').removeClass('hidden').addClass('visible');
          $(this).next().find('.backlink').next().removeClass('hidden').addClass('visible');
        } else {
            // trigger regular link
          console.log('no submenu found > trigger regular link');
        //   return false;
        }
      });
            // backlink
      if (backlink.length) {
        // trigger backlink
        backlink.on('click', function (event) {
          event.preventDefault();
          var currentWrapper = $(this).parent();
          var currentSiblings = $(this).closest('ul').find('>li');
          var currentTrigger = $(this).closest('li').find('>a');
          var parentBacklink = $(this).closest('ul').parent().find('> .backlink');

          currentWrapper.removeClass('visible');
          currentWrapper.find('li').removeClass('hidden').addClass('visible');
          currentSiblings.removeClass('hidden').addClass('visible');
          currentTrigger.removeClass('hidden');
          $('.backlink').removeClass('visible').addClass('hidden');

          if (parentBacklink.length) {
            parentBacklink.removeClass('hidden').addClass('visible');
            // list-headline
            parentBacklink.next().removeClass('hidden').addClass('visible');
          } else {
            // reset flyoutgrid on click of top level backlink
            changeFlyoutGrid($('.m-header_navigation_flyout'), 'twoTen', $('.m-header_navigation_flyout .headline.hl4'));
          }
        });
      }
    });
  });
};

var changeFlyoutGrid = function (flyout, type, categoryheadline) {
  if (flyout.length) {
        // col-xs-12
    if (type === 'full') {
      flyout.find('.col-xs-2').addClass('hidden');
      flyout.find('.col-xs-10').removeClass('col-xs-10').addClass('col-xs-12');
      categoryheadline.addClass('hidden');
    } else {
            // col-xs-2 col-xs-10
      if (flyout.find('.col-xs-12').length) {
        flyout.find('.col-xs-12').removeClass('col-xs-12').addClass('col-xs-10');
        flyout.find('.col-xs-2').removeClass('hidden');
        categoryheadline.removeClass('hidden');
      }
    }
  }
};

var resetFlyout = function () {
  $('.m-header_navigation_flyout *').not('li').removeClass('visible').removeClass('hidden');
  $('.m-header_navigation_flyout li').removeClass('hidden').addClass('visible');
  $('.m-header_navigation_flyout ul:first-child').closest('.m-header_navigation_flyout__items').addClass('visible');
  changeFlyoutGrid($('.m-header_navigation_flyout'), 'twoTen', $('.m-header_navigation_flyout .headline.hl4'));
};

$(document).ready(function () {
  initFlyout($('.m-header_navigation_flyout__items'));

    // reset flyout
  $('.m-header_navigation_flyout__button--close').on('click', function (event) {
    resetFlyout();
  });

    // change flyoutgrid on click of top level li>a
  $('.m-header_navigation_flyout ul:first-child>li>a:not(:only-child)').on('click', function (event) {
    // event.preventDefault();
    changeFlyoutGrid($('.m-header_navigation_flyout'), 'full', $('.m-header_navigation_flyout .headline.hl4'));
  });
});

/* END Desktop Flyout */