<article class="s-space show-space">
  <h3 class="s-space__apartment-name">{{floor-title}}</h3>
  <div class="s-space__apartment-layout">
    {{floor-layout}}
  </div>

<!--   <div class="s-space__floor-img-small">
    <img class="img-btn" src="{{floor-frontend-image-thumb}}" alt="{{image-alt}}">
  </div>
  
  <div class="s-space__floor-img-large">
    <img src="{{floor-frontend-image}}" alt="{{image-alt}}">
  </div>
 -->
  <div class="s-space__back-btn-wrap">
    <a href="{{building-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
  </div>
</article>

<script>
  (function() {
    var canvas = $("#full-layout-canvas");
    var layoutImage = $("#layout-image");
    var cover = canvas.find(".image-cover");
    var pxToDeduct = (Modernizr.touch ? 157 : 257);
    var windowHeight = ($(window).height() - pxToDeduct);
    var coverImageHeight = (parseInt(windowHeight));
    var tmpImg = new Image();
    var $box = $('.selection-box');
    var $pin = $('<a class="s-space__pin-link" href="#"><div class="pin"></div><div class="pulse"></div></a>');
    var floorId = "{{floor-id}}";
    var pageId = "{{page-id}}";
    var id = '';
    var obj = null;
    var temp = null;
    var $imgToggle = $('.s-space__floor-img-small');
    var $imgLarge = $('.s-space__floor-img-large');
    var $lightbox = $('<div class="s-space__light-box"></div>');
    var $closeBtn = $('<div class="s-space__close-btn"><i class="fa fa-times"></i></div>');
    var body = document.body;

    canvas.height(windowHeight);
    cover.height(coverImageHeight);
    layoutImage.height(coverImageHeight);

    tmpImg.src = layoutImage.attr('src') ;
    tmpImg.onload = function() {
      cover.width(layoutImage.width());
    };

    // get rid of these buttons since we're not using them on frontend page
    $('.selection-box-btn-holder').remove();

    // get URLs for each link
    $.ajax({
      url: "/xhr/spaces/get_floor_units",
      data: {floor_id : floorId, page_id : pageId },
      dataType: 'JSON'

    }).done(function(data) {
      $box.each(function(i) {
        id = $(this).data('unit-id');
        obj = data.units.filter(function(x) {
          return x.id == id;
        });
        temp = $pin.clone();
        temp.attr('href', obj[0].url);
        $(this).append(temp);
      });
    });

    $imgToggle.on('click', function(e) {
      if (!$(body).children('.light-box').length) {
        $lightbox.append($closeBtn);
        $(body).append($lightbox);
      }

      $(body).toggleClass('has-lightbox');

      $closeBtn.on('click', function(e) {
        $(body).removeClass('has-lightbox');
      });

    });

    $('html').keyup(function(e) {
      if (e.keyCode === 27) {
        $(body).removeClass('has-lightbox');
      } 
    });

  }());
</script>