{% if menu_type  is  'tree' %}
<div id="yo-{{ module }}" class="{{ class }} hidden-xs">
  {% if heading_title %}
  <div class="yo-heading yo-toggle {{ minimized ? 'yo-close' : }} 'yo-open'"><i class="fa fa-bars"></i><span>{{ heading_title }}</span></div>
  {% endif %}
  <div class="yo-wrapper" {{ minimized ? 'style="display:none"' : }} ''>
    <ul class="yo-fm {{ flyout_design }}">
      {% for category in categories %}
      <li {{ category.active ? 'class="active"' : '' }}>
        <a href="{{ category.href }}" class="{{ category.children1 ? 'fm-parent' : '' }}{{ category.active ? ' active' : '' }}">
          {% if fm_icon  and  category.icon %}
          <img class="fm-icon" src="image/{{ category.icon }}" alt="{{ category.name }}">
         {% endif %}
          <span>{{ category.name }}</span>
          {% if count %}
          <span class="fm-badge">{{ category.count }}</span>
          {% endif %}
        </a> 
        {% if category.children1 %}
        {% if flyout_design  is  'fm-one' %}
        <ul>
          {% if item_image  and  category.thumb %}
          <li class="fm-image"><a href="{{ category.href }}" title="{{ category.name }}"><img src="{{ category.thumb }}" alt="{{ category.name }}"></a></li>
          {% endif %}
          {% for child1 in category %}
          <li {{ child1.active ? 'class="active"' : }} ''>
            <a href="{{ child1.href }}" class="{{ child1.children2 ? 'fm-parent' : }} ''{{ child1.active ? ' active' : }} ''">
              {% if fm_icon  and  child1.icon %}
              <img class="fm-icon" src="image/{{ child1.icon }}" alt="{{ child1.name }}">
              {% endfor %}{% endif %}
              <span>{{ child1.name }}</span>
              {% if count %}
              <span class="fm-badge">{{ child1.count }}</span>
              {% endif %}
            </a>
            {% if child1.children2 %}
            <ul>
              {% for child2 in child1 %}
              <li {{ child2.active ? 'class="active"' : }} ''>
                <a href="{{ child2.href }}" class="{{ child2.children3 ? 'fm-parent' : }} ''{{ child2.active ? ' active' : }} ''">
                  {% if fm_icon  and  child2.icon %}
                  <img class="fm-icon" src="image/{{ child2.icon }}" alt="{{ child2.name }}">
                  {% endif %}
                  <span>{{ child2.name }}</span>
                  {% if count %}
                  <span class="fm-badge">{{ child2.count }}</span>
                  {% endif %}
                </a>
                {% if child2.children3 %}
                <ul>
                  {% for child3 in child2 %}
                  <li {{ child3.active ? 'class="active"' : }} ''>
                    <a href="{{ child3.href }}" class="{{ child3.children4 ? 'fm-parent' : }} ''{{ child3.active ? ' active' : }} ''">
                      {% if fm_icon  and  child3.icon %}
                      <img class="fm-icon" src="image/{{ child3.icon }}" alt="{{ child3.name }}">
                      {% endif %}
                      <span>{{ child3.name }}</span>
                      {% if count %}
                      <span class="fm-badge">{{ child3.count }}</span>
                      {% endif %}
                    </a>
                    {% if child3.children4 %}
                    <ul>
                      {% for child4 in child3 %}
                      <li {{ child4.active ? 'class="active"' : }} ''>
                        <a href="{{ child4.href }}" {{ child4.active ? 'class="active"' : }} ''>
                          {% if fm_icon  and  child4.icon %}
                          <img class="fm-icon" src="image/{{ child4.icon }}" alt="{{ child4.name }}">
                          {% endif %}
                          <span>{{ child4.name }}</span>
                          {% if count %}
                          <span class="fm-badge">{{ child4.count }}</span>
                          {% endif %}
                        </a>
                      </li>{% endfor %}
                      {% endif %}
                    </ul>
                    {% endif %}
                  </li>
				  {% endfor %}
                  {% endif %}
                </ul>
                {% endif %}
              </li>
			  {% endfor %}
              {% endif %}
            </ul>
            {% endif %}
          </li>{% endfor %}
{% endfor %}
        </ul>
         {% else %}
        <div class="fm-container">
          <div class="fm-brand-info">
            <div class="fm-title"><a href="{{ category.href }}">{{ category.name }}</a> </div>
            {% if item_banner  and  category.banner %}
            <div class="fm-image"><img src="{{ category.banner }}" alt="{{ category.name }}"></div>
            {% endif %}
            {% if item_description  and  category.description %}
            <div class="fm-descr">{{ category.description }}</div>
            {% endif %}
          </div>
          {% for children1 in rray_chunk %}
          <ul>
            {% for child1 in children1 %}
            <li class="fm-image-{{ image_position }}{{ child1.active ? ' active' : }} ''">
              {% if item_image  and  child1.thumb %}
              <div class="fm-image"><a href="{{ child1.href }}"><img src="{{ child1.thumb }}" alt="{{ child1.name }}"></a></div>
              {% endfor %}{% endif %}
              <a href="{{ child1.href }}" {{ child1.active ? 'class="active"' : }} ''> <span>{{ child1.name }}</span> </a>
              {% if image_position  is  'left' %}
              {% if child1.children2 %}
              <ul class="fm-list">
                {% for child2 in child1 %}
                <li {{ child2.active ? 'class="active"' : }} ''> <a href="{{ child2.href }}" {{ child2.active ? 'class="active"' : }} ''> <span>{{ child2.name }}</span> </a> </li>
                {% endfor %}{% endif %}
              </ul>
              {% endfor %}{% endif %}

            </li>

          </ul>

        </div>


      </li>

    </ul>
  </div>
</div>


{% if menu_type  is  'current'  or  menu_type  is  'parent' %}
{% if categories %}
<div id="yo-{{ module }}" class="{{ class }}">
  {% if heading_title %}
  <div class="yo-heading yo-toggle {{ minimized ? 'yo-close' : }} 'yo-open'"><i class="fa fa-bars"></i><span>{{ heading_title }}</span></div>
  {% endif %}
  <div class="yo-wrapper" {{ minimized ? 'style="display:none"' : }} ''>
    <ul class="yo-fm {{ flyout_design }}">
      {% for category in categories %}
      <li {{ category.active ? 'class="active"' : }} ''>
        <a href="{{ category.href }}" class="{{ category.children2 ? 'fm-parent' : }} ''{{ category.active ? ' active' : }} ''">
          {% if fm_icon  and  category.icon %}
          <img class="fm-icon" src="image/{{ category.icon }}" alt="{{ category.name }}">
          {% endfor %}{% endif %}
          <span>{{ category.name }}</span>
          {% if current_count %}
          <span class="fm-badge">{{ category.count }}</span>
          {% endif %}
        </a>
        {% if category.children2 %}
        {% if flyout_design  is  'fm-one' %}
        <ul>
          {% if item_image  and  category.thumb %}
          <li class="fm-image"><a href="{{ category.href }}" title="{{ category.name }}"><img src="{{ category.thumb }}" alt="{{ category.name }}"></a></li>
          {% endif %}
          {% for child2 in category %}
          <li {{ child2.active ? 'class="active"' : }} ''>
            <a href="{{ child2.href }}" class="{{ child2.children3 ? 'fm-parent' : }} ''{{ child2.active ? ' active' : }} ''">
              {% if not products_by_category  and  fm_icon  and  child2.icon %}
              <img class="fm-icon" src="image/{{ child2.icon }}" alt="{{ child2.name }}">
              {% endfor %}{% endif %}
              {% if products_by_category  and  child2.price %}
              <span class="fm-price">
                {% if not child2.special %}
                {{ child2.price }}
                {% endif %} {% else %}
                {{ child2.special }}
                {% endif %}
              </span>
              {% endif %}
              <span>{{ child2.name }}</span>
              {% if not products_by_category  and  current_count %}
              <span class="fm-badge">{{ child2.count }}</span>
              {% endif %}
            </a>
            {% if child2.children3 %}
            <ul>
              {% for child3 in child2 %}
              <li {{ child3.active ? 'class="active"' : }} ''>
                <a href="{{ child3.href }}" class="{{ child3.children4 ? 'fm-parent' : }} ''{{ child3.active ? ' active' : }} ''">
                  {% if fm_icon  and  child3.icon %}
                  <img class="fm-icon" src="image/{{ child3.icon }}" alt="{{ child3.name }}">
                  {% endfor %}{% endif %}
                  <span>{{ child3.name }}</span>
                  {% if current_count %}
                  <span class="fm-badge">{{ child3.count }}</span>
                  {% endif %}
                </a>
                {% if child3.children4 %}
                <ul>
                  {% for child4 in child3 %}
                  <li {{ child4.active ? 'class="active"' : }} ''>
                    <a href="{{ child4.href }}" {{ child4.active ? 'class="active"' : }} ''>
                      {% if fm_icon  and  child4.icon %}
                      <img class="fm-icon" src="image/{{ child4.icon }}" alt="{{ child4.name }}">
                      {% endfor %}{% endif %}
                      <span>{{ child4.name }}</span>
                      {% if current_count %}
                      <span class="fm-badge">{{ child4.count }}</span>
                      {% endif %}
                    </a>
                  </li>
                  {% endif %}
                </ul>
                {% endif %}
              </li>
              {% endif %}
            </ul>
            {% endif %}
          </li>
          {% endif %}
        </ul>
         {% else %}
        <div class="fm-container">
          <div class="fm-brand-info">
            <div class="fm-title"><a href="{{ category.href }}">{{ category.name }}</a> </div>
            {% if item_banner  and  category.banner %}
            <div class="fm-image"><img src="{{ category.banner }}" alt="{{ category.name }}"></div>
            {% endif %}
            {% if item_description  and  category.description %}
            <div class="fm-descr">{{ category.description }}</div>
            {% endif %}
          </div>
          {% for children2 in rray_chunk %}
          <ul>
            {% for child2 in children2 %}
            <li class="fm-image-{{ image_position }}">
              {% if image_position  is  'center' %}
              {% if item_image  and  child2.thumb %}
              <div class="fm-image"> <a href="{{ child2.href }}"><img src="{{ child2.thumb }}" alt="{{ child2.name }}" /></a>
                {% if products_by_category %}
                <div class="fm-cart-{{ image_position }}">
                  <input type="button" value="{{ button_cart }}" onclick="addToCart('{{ child2.product_id }}');" class="button" />
                </div>
                {% endfor %}{% endif %}
              </div>
              {% endfor %}{% endif %}
              <a href="{{ child2.href }}" {{ products_by_category ? 'class="fm-pr-name"' : }} ''>
              {% if products_by_category  and  child2.price %}
              <span class="fm-price">
                {% if not child2.special %}
                {{ child2.price }}
                {% endif %} {% else %}
                {{ child2.special }}
                {% endif %}
              </span>
              {% endif %}
              <span>{{ child2.name }}</span></a>
               {% else %}
              {% if item_image  and  child2.thumb %}
              <div class="fm-image"> <a href="{{ child2.href }}"><img src="{{ child2.thumb }}" alt="{{ child2.name }}" /></a></div>
              {% endif %}
              <a href="{{ child2.href }}"> <span>{{ child2.name }}</span></a>
              {% if child2.children3 %}
              <ul class="fm-list">
                {% for child3 in child2 %}
                <li> <a href="{{ child3.href }}"> <span>{{ child3.name }}</span> </a> </li>
                {% endfor %}{% endif %}
              </ul>

              {% if products_by_category %}
              {% if child2.price %}
              <span class="fm-price fm-price-{{ image_position }}">
                {% if not child2.special %}
                {{ child2.price }}
                {% endif %} {% else %}
                {{ child2.special }}
                {% endif %}
              </span>
              {% endif %}
              <div class="fm-cart">
                <input type="button" value="{{ button_cart }}" onclick="addToCart('{{ child2.product_id }}');" class="button" />
              </div>


            </li>

          </ul>

        </div>


      </li>

    </ul>
  </div>
</div>



{% if menu_type  is  'brands' %}
<div id="yo-{{ module }}" class="{{ class }}">
  {% if heading_title %}
  <div class="yo-heading yo-toggle {{ minimized ? 'yo-close' : }} 'yo-open'"><i class="fa fa-bars"></i><span>{{ heading_title }}</span></div>
  {% endif %}
  <div class="yo-wrapper" {{ minimized ? 'style="display:none"' : }} ''>
    <ul class="yo-fm {{ flyout_design }}">
      {% for manufacturer in manufacturers %}
      <li {{ manufacturer.active  or  manufacturer.manufacturer_id  is  bids ? 'class="active"' : }} ''> <a href="{{ manufacturer.href }}" class="{{ manufacturer.children ? 'fm-parent' : }} '' {{ manufacturer.active  or  manufacturer.manufacturer_id  is  bids ? 'active' : }} ''"> <span>{{ manufacturer.name }}</span> </a>
        {% if manufacturer.children %}
        {% if flyout_design  is  'fm-one' %}
        <ul>
          {% if item_image  and  manufacturer.thumb %}
          <li class="fm-image"><a href="{{ manufacturer.href }}" title="{{ manufacturer.name }}"><img src="{{ manufacturer.thumb }}" alt="{{ manufacturer.name }}"></a></li>
          {% endfor %}{% endif %}
          {% for child in manufacturer %}
          <li {{ child.active ? 'class="active"' : }} ''> <a class="{{ child.active ? 'active' : }} ''" href="{{ child.href }}">
            {% if child.price %}
            <span class="fm-price">
              {% if not child.special %}
              {{ child.price }}
              {% endfor %}{% endif %} {% else %}
              {{ child.special }}
              {% endif %}
            </span>
            {% endif %}
            <span>{{ child.name }}</span> </a> </li>
          {% endif %}
        </ul>
        {% endif %} {% else %}
        <div class="fm-container">
          <div class="fm-brand-info">
            <div class="fm-title"><a href="{{ manufacturer.href }}">{{ manufacturer.name }}</a> </div>
            {% if item_banner  and  manufacturer.banner %}
            <div class="fm-image"><img src="{{ manufacturer.banner }}" alt="{{ manufacturer.name }}"></div>
            {% endif %}
            {% if item_description  and  manufacturer.description %}
            <div class="fm-descr">{{ manufacturer.description }}</div>
            {% endif %}
          </div>
          {% for children in rray_chunk %}
          <ul>
            {% for child in children %}
            <li class="fm-image-{{ image_position }}{{ child.active ? ' active' : }} ''">
              {% if image_position  is  'center' %}
              {% if item_image  and  child.thumb %}
              <div class="fm-image"> <a href="{{ child.href }}"><img src="{{ child.thumb }}" alt="{{ child.name }}" /></a>
                <div class="fm-cart-{{ image_position }}">
                  <input type="button" value="{{ button_cart }}" onclick="addToCart('{{ child.product_id }}');" class="button" />
                </div>
              </div>
              {% endfor %}{% endif %}
              <a href="{{ child.href }}" class="fm-pr-name{{ child.active ? ' active' : }} ''">
              {% if child.price %}
              <span class="fm-price">
                {% if not child.special %}
                {{ child.price }}
                {% endfor %}{% endif %} {% else %}
                {{ child.special }}
                {% endif %}
              </span>
              {% endif %}
              <span>{{ child.name }}</span></a>
               {% else %}
              {% if item_image  and  child.thumb %}
              <div class="fm-image"> <a href="{{ child.href }}"><img src="{{ child.thumb }}" alt="{{ child.name }}" /></a></div>
              {% endif %}
              <a href="{{ child.href }}" {{ child.active ? 'class="active"' : }} ''> <span>{{ child.name }}</span></a>
              {% if child.price %}
              <span class="fm-price fm-price-{{ image_position }}">
                {% if not child.special %}
                {{ child.price }}
                {% endif %} {% else %}
                {{ child.special }}
                {% endif %}
              </span>

              <div class="fm-cart">
                <input type="button" value="{{ button_cart }}" onclick="addToCart('{{ child.product_id }}');" class="button" />
              </div>

            </li>

          </ul>

        </div>


      </li>

    </ul>
  </div>
</div>


<script type="text/javascript"><!--
  var offset1 = $('#yo-{{ module }}').offset();
  var offset2 = $('#yo-{{ module }} .yo-fm').offset();
  $('#yo-{{ module }} .fm-container').css('top', offset1.top-offset2.top);
  $(window).on('resize', function() {
    var container = $('#yo-{{ module }}').closest('.container').width();
    var menu = $('#yo-{{ module }}').outerWidth();
    $('#yo-{{ module }} .fm-container').outerWidth(container-menu);
    if ($(this).width() > '768') {
      $('#yo-{{ module }} .fm-container > ul').width(100/{{ column }} + '%');
    } else {
      $('#yo-{{ module }} .fm-container > ul').width('50%');
    }
  }).resize();

  $('#yo-{{ module }} ul.yo-fm,#yo-{{ module }} ul.fm-one ul').menuAim({
    submenuDirection: $('#yo-{{ module }}').parent().is('#column-right') ? 'left' : 'right',
    activate: function(item){
      $(item).find('>a.fm-parent').next().show();
      $(item).siblings().find('>a.fm-parent').next().hide();
    },
    deactivate: function(item){
      $(item).find('>a.fm-parent').next().fadeOut(100);
    },
    exitMenu: function(item){
      $(item).find('.fm-container:visible').delay(500).fadeOut(100);
      return true;
    }
  });

  $('#yo-{{ module }} .fm-parent').has('span.fm-badge').closest('ul').children('li').not('.fm-image').find('>a').addClass('fm-item');

  if ({{ save_view }}) {
    if (!localStorage.getItem('yo-fm-{{ module }}')) {
      if ({{ minimized }}) {
        localStorage.setItem('yo-fm-{{ module }}', 'close');
      } else {
        localStorage.setItem('yo-fm-{{ module }}', 'open');
      }
    }

    $('#yo-{{ module }} .yo-toggle').click(function() {
      $(this).toggleClass('yo-open yo-close').next().slideToggle({{ easing_d }},'{{ easing }}');
      if ($(this).hasClass('yo-open')) {
        localStorage.setItem('yo-fm-{{ module }}', 'open');
      } else {
        localStorage.setItem('yo-fm-{{ module }}', 'close');
      }
    });

    if (localStorage.getItem('yo-fm-{{ module }}') == 'open') { 
      $('#yo-{{ module }} .yo-toggle').addClass('yo-open').removeClass('yo-close').next().show();
    } else {
      $('#yo-{{ module }} .yo-toggle').addClass('yo-close').removeClass('yo-open').next().hide();
    }
  } else {
    localStorage.removeItem('yo-fm-{{ module }}');
    $('#yo-{{ module }} .yo-toggle').click(function() {
      $(this).toggleClass('yo-open yo-close').next().slideToggle({{ easing_d }},'{{ easing }}');
      var offset1 = $('#yo-{{ module }}').offset();
      var offset2 = $('#yo-{{ module }} .yo-fm').offset();
      $('#yo-{{ module }} .fm-container').css('top', offset1.top-offset2.top);
    });
  }
//--></script>