<div class="i-space index-space-1">
  <ul 
    class="i-sapce__building-wrap list-unstyled cycle-slideshow" 
    data-list="buildings"
    data-level="0"
    data-cycle-slide=".i-space__building"
  >
    <li class="i-space__building">
      <span class="i-space__img-wrap">
        <img src="{{building-image}}" alt="{{alt-title}}" class="i-space__building-img img-responsive">
      </span>
      <span class="i-space__building-title">{{building-title}}</span>
      <ol class="i-space__floors list-unstyled" data-list="floors" data-level="1">
        <li class="i-space__floor-item">
         <a class="i-space__floor-link" href="{{link_to_show}}">
          <span class="i-space__floor-name">{{floor-title}}</span>
          <img src="{{floor-image}}" alt="" class="i-space__floor-img" alt="{{alt-title}}">
         </a>
        </li>
      </ol>
    </li>
  </ul>
  
</div>

<div class="background-div">
  <ul data-list="buildings" data-level="0">
    <li class="background-image" style="background-image: url({{building-image}});"></li>
  </ul>
</div>

<script>
  (function(){
    var body = document.body;
    var $img = $('.i-space__img-wrap');
    var $this = null;
    var activeCls = 'active';
    var floorActiveCls = 'floors--active';
    var windowWidth = $(window).width();
    var breakpointExtraSmall = 480;

    $img.on('click', function(e) {
      e.stopPropagation();
      $this = $(this);
      var floors = $(this).parents(".i-space__building").find("ol li");
      if (floors.length == 1){
        window.location.href = floors.first().find("a").attr("href");
      } else {

        if (windowWidth < breakpointExtraSmall) {
          $('.i-space__floors')
            .removeClass(activeCls);

          if (!$this.hasClass(activeCls)) {
            $this
              .addClass(activeCls)
              .siblings('.i-space__floors')
              .addClass(activeCls);
          } else {
            $this
              .removeClass(activeCls)
              .siblings('.i-space__floors')
              .removeClass(activeCls);
          }
        } else {
          $('.i-space__floors')
            .removeClass(activeCls);

          if (!$this.hasClass(activeCls)) {
            $this
              .addClass(activeCls)
              .siblings('.i-space__floors')
              .addClass(activeCls);
          } else {
            $this
              .removeClass(activeCls)
              .siblings('.i-space__floors')
              .removeClass(activeCls);
          }
        }
      }
    });

    $(document).on('click', function() {
      $('.i-space__img-wrap, .i-space__floors').removeClass(activeCls);
    });

  }());
</script>
