<nav class="navbar navbar-default navbar-fixed-top" data-size="big">
  <div class="container navbar-big visible">
    <div class="row">
      <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
        <div class="navbar-header">
          <ul class="nav navbar-nav text-center navbar-social visible-xs">
            <li class="navbar-social__facebook navbar-social--inline"><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li class="navbar-social__twitter navbar-social--inline"><a href="#"><i class="fa fa-twitter"></i></a></li>
          </ul>

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#wri-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#">
            <img src="/images/wri_logo.png" alt="WRI Logo placeholder" class="navbar-brand__logo visible-xs visible-sm" with="127" height="120">
            <img src="/images/wri_logo-notxt.png" alt="WRI Logo placeholder" class="navbar-brand__logo visible-md visible-lg" with="100%" height="auto">
            <h1 class="sr-only visible-xs visible-sm">War Resisters' International</h1>
          </a>
        </div>
      </div>
      <div class="col-md-6 col-lg-6 hidden-xs hidden-sm">
        <h1 class="site-title">War Resisters' International</h1>
        <p class="text-left mission-statement">A global network of grassroots antimilitarist and pacifist groups, working together for a world without war.</p>
      </div>
      <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
        <div class="navbar-form navbar-search">
          <h2 class="sr-only">Search</h2>
          <form class="">
            <div class="form-group">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                </span>
              </div>
            </div>
          </form>
        </div>

        <p class="navbar-text text-center navbar-cta">
          <a href="#" class="btn btn-primary">Shop</a>
          <a href="#" class="btn btn-primary">Subscribe</a>
          <a href="#" class="btn btn-primary">Donate</a>
        </p>

        <p class="navbar-text text-center navbar-lang">
          <a href="#" class="btn btn-default btn-xs active">En</a>
          <a href="#" class="btn btn-default btn-xs">Fr</a>
          <a href="#" class="btn btn-default btn-xs">De</a>
          <a href="#" class="btn btn-default btn-xs">Es</a>
        </p>
        <ul class="nav navbar-nav text-center navbar-social hidden-xs">
          <li class="navbar-social__facebook navbar-social--inline"><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li class="navbar-social__twitter navbar-social--inline"><a href="#"><i class="fa fa-twitter"></i></a></li>
        </ul>
      </div>
    </div> <!-- .row -->
    <div class="row">
      <div class="col-lg-12">
        <div id="wri-navbar-collapse-1" class="collapse navbar-collapse navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>

            <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Prototypes <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-parent"><a href="#">Prototypes</a></li>
                <li class="divider"></li>
                <li><a href="#">Single page</a></li>
              </ul>
            </li>

            <li><a href="#">Network</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resources <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Books</a></li>
                <li class="dropdown subdown">
                  <a href="#" class="sub-toggle" data-toggle="sub-toggle" role="button" aria-haspopup="true" aria-expanded="false">Newsletter <span class="caret"></span></a>
                  <ul class="submenu">
                    <li class="dropdown-parent">
                      <a href="#">Newsletter</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Level3.1</a></li>
                    <li><a href="#">Level3.2</a></li>
                    <li><a href="#">Level3.3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">The Broken Rifle</a></li>
            <li><a href="#">Contact us</a></li>
          </ul>
        </div> <!-- .navbar-collapse -->
      </div>
    </div> <!-- .row -->
  </div> <!-- .container.navbar-big -->
  <div class="container navbar-small hidden">
    <div class="row">
      <div class="col-xs-4 col-sm-2">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img src="/images/wri_logo-notxt.png" alt="WRI Logo placeholder" class="navbar-brand__logo" with="auto" height="40px">
            <h1 class="sr-only visible-xs visible-sm">War Resisters' International</h1>
          </a>
        </div>

      </div>
      <div class="col-xs-8 col-sm-10">
        <div class="navbar-form navbar-search">
          <h2 class="sr-only">Search</h2>
          <form class="">
            <div class="form-group">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                </span>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div> <!-- .row -->
  </div> <!-- .container.navbar-small -->
</nav>

jQuery.noConflict();
var Modul = ( function($, w) //shortcuts $=jQuery, w=window
{
  var APP = {
    init: function() {
      //start methods within APP
      APP.scrollToTop()
      APP.Submenu.init()
      APP.Grid.init()
      APP.HeaderSize.init()
      // APP.Accordion.init()
    },
    HeaderSize: {
      navbar: $('nav.navbar'),
      animSpeed: 300,
      getNavbarHeight: function() {
        return this.navbar.outerHeight()
      },
      defaultNavHeight: $('nav.navbar').outerHeight(),
      init: function() {
        var _navbar = APP.HeaderSize.navbar
        var _navbarHOrig = APP.HeaderSize.defaultNavHeight
        console.log('Init navbarHOrig: ', _navbarHOrig)
        // check if the window is at the top
        $(w).scroll(function() {
          if ( $(this).scrollTop() != 0 )
          {
            _navbar.data('size', 'small')
          }
          else
          {
            _navbar.data('size', 'big')
          }
          // apply the correct navbar size
          APP.HeaderSize.scrollResize()
        })
      },
      scrollResize: function(  ) {
        var _navbar = APP.HeaderSize.navbar
        var _navbarHOrig = APP.HeaderSize.defaultNavHeight
        var _bgCol = _navbar.css('backgroundColor'); //rgb(100,100,100)
        var _rgbaBgCol = _bgCol.replace('rgb', 'rgba').replace(')', ',.95)'); //rgba(100,100,100,.8)
        // var _rgbaBgCol = _bgCol.replace(/[^,]+(?=\))/, '0.9'); //rgba(100,100,100,0.9)
        _navbar.css( 'background-color', _rgbaBgCol)
        console.log(_rgbaBgCol)
        if ( $(document).scrollTop() > 0 ) {
          if ( _navbar.data('size') == 'big' ) {
            _navbar.data('size', 'small')
              .stop()
              .animate({
                height: '84px'
              }, APP.HeaderSize.animSpeed)
            $('body').stop()
              .animate({
                paddingTop: '105px' // 84px height + 20px margin
              }, APP.HeaderSize.animSpeed)

            _navbar.find('.visible, .hidden')
              .toggleClass('visible')
              .toggleClass('hidden')
          }
        } else {
          if ( _navbar.data('size') == 'small' ) {
            console.log('scrollResize navbarHOrig: ', _navbarHOrig)
            _navbar.data('size', 'big')
              .stop()
              .animate({
                // height: '232px'
                height: _navbarHOrig,
              }, APP.HeaderSize.animSpeed)

            $('body').stop()
              .animate({
                // paddingTop: '252px' //232px height + 20px margin
                paddingTop: (_navbarHOrig + 20),
              }, APP.HeaderSize.animSpeed)

            _navbar.find('.visible, .hidden')
              .toggleClass('visible')
              .toggleClass('hidden')
              // .slideToggle({
              //   duration: 600,
              //   complete: function() {
              //     $(this)
              //       .toggleClass('visible')
              //       .toggleClass('hidden')
              //   }
              // })
          }
        }
      }
    }
  };
  $(document).ready(function() {
    APP.init();
  })
  $(w).scroll( APP.HeaderSize.scrollResize )
} )(jQuery, window, undefined);

nav.navbar {
  .navbar-small {
    .navbar-brand {
      height: 84px;
      margin-top: 0;
      padding: 0;
      .navbar-brand__logo {
        top: 50%;
        transform: translateY(-50%);
        position: relative;
      }
    }
  }
}