diff --git a/app/assets/images/space-p1.png b/app/assets/images/space-p1.png
new file mode 100644
index 0000000..cbce3a9
Binary files /dev/null and b/app/assets/images/space-p1.png differ
diff --git a/app/assets/images/space-p2.png b/app/assets/images/space-p2.png
new file mode 100644
index 0000000..c3541c0
Binary files /dev/null and b/app/assets/images/space-p2.png differ
diff --git a/app/assets/stylesheets/space-frontend.scss b/app/assets/stylesheets/space-frontend.scss
index 537dee1..dbf57ba 100644
--- a/app/assets/stylesheets/space-frontend.scss
+++ b/app/assets/stylesheets/space-frontend.scss
@@ -4,7 +4,19 @@
 .overlay {
   position: absolute;
 }
-
+.s-space.show-space .selection-box-label.absolute-center{
+  display: none;
+}
+.s-space.show-space .selection-box-label.absolute-center.active{
+  display: block;
+  position: absolute;
+  bottom: 110%;
+  left: 100%;
+  background: #2196F3;
+  color: white;
+  width: 150%;
+  padding: 0.2em;
+}
 #full-layout-canvas {
   text-align: center;
   position: relative;
diff --git a/app/controllers/spaces_controller.rb b/app/controllers/spaces_controller.rb
index 073fd72..58208e2 100644
--- a/app/controllers/spaces_controller.rb
+++ b/app/controllers/spaces_controller.rb
@@ -1,120 +1,120 @@
 class SpacesController < ApplicationController
-	def index
-		params = OrbitHelper.params
-		page = Page.where(:page_id => params[:page_id]).first
-		buildings = Building.filter_by_categories.collect do |building|
-			floors = building.floors.desc(:title).collect do |floor|
-				image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
-				link = floor.layout.nil? ? (floor.floor_units.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{floor.floor_units.first.to_param}?method=unit") : OrbitHelper.url_to_show(floor.to_param)
-				{
-					"floor-title" => floor.title,
-					"floor-image" => image,
-					"alt-title" => floor.title,
-					"link_to_show" => link
-				}
-			end
-			{
-				"building-title" => building.title,
-				"building-image" => building.image.url,
-				"alt-title" => building.title,
-				"floors" => floors
-			}
-		end
+  def index
+    params = OrbitHelper.params
+    page = Page.where(:page_id => params[:page_id]).first
+    buildings = Building.filter_by_categories.collect do |building|
+      floors = building.floors.desc(:title).collect do |floor|
+        image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
+        link = floor.layout.nil? ? (floor.floor_units.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{floor.floor_units.first.to_param}?method=unit") : OrbitHelper.url_to_show(floor.to_param)
+        {
+          "floor-title" => floor.title,
+          "floor-image" => image,
+          "alt-title" => floor.title,
+          "link_to_show" => link
+        }
+      end
+      {
+        "building-title" => building.title,
+        "building-image" => building.image.url,
+        "alt-title" => building.title,
+        "floors" => floors
+      }
+    end
 
-		{
-			"buildings" => buildings,
-			"extras" => {
+    {
+      "buildings" => buildings,
+      "extras" => {
 
-			}
-		}
-	end
+      }
+    }
+  end
 
-	def show
-		params = OrbitHelper.params
-		floor = Floor.where(:uid => params[:uid]).first rescue nil
-		thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
-		image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#")
-	    page = Page.where(:page_id => params[:page_id]).first
+  def show
+    params = OrbitHelper.params
+    floor = Floor.where(:uid => params[:uid]).first rescue nil
+    thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
+    image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#")
+      page = Page.where(:page_id => params[:page_id]).first
 
-		{
-			"floor-title" => floor.title,
-			"floor-frontend-image-thumb" => thumb_image,
-			"floor-frontend-image" => image,
-			"image-alt" => floor.title,
-			"building-back-link" => "/" + I18n.locale.to_s + page.url,
-			"floor-layout" => floor.layout,
-			"floor-id" => floor.id.to_s,
-			"page-id" => page.page_id
-		}
-	end
+    {
+      "floor-title" => floor.title,
+      "floor-frontend-image-thumb" => thumb_image,
+      "floor-frontend-image" => image,
+      "image-alt" => floor.title,
+      "building-back-link" => "/" + I18n.locale.to_s + page.url,
+      "floor-layout" => floor.layout,
+      "floor-id" => floor.id.to_s,
+      "page-id" => page.page_id
+    }
+  end
 
-	def floor_units
-		floor = Floor.find(params[:floor_id]) rescue nil
-		page = Page.where(:page_id => params[:page_id]).first rescue nil
-		units = []
-		if !floor.nil?
-			floor.floor_units.each do |unit|
-				url = "/#{I18n.locale.to_s}#{page.url}/#{unit.to_param}?method=unit" rescue "#"
-				units << {
-					"id" => unit.id.to_s,
-					"url" => url
-				}
-			end
-		end
+  def floor_units
+    floor = Floor.find(params[:floor_id]) rescue nil
+    page = Page.where(:page_id => params[:page_id]).first rescue nil
+    units = []
+    if !floor.nil?
+      floor.floor_units.each do |unit|
+        url = "/#{I18n.locale.to_s}#{page.url}/#{unit.to_param}?method=unit" rescue "#"
+        units << {
+          "id" => unit.id.to_s,
+          "url" => url
+        }
+      end
+    end
 
-		render :json => {"success" => true, "units" => units}
-	end 
+    render :json => {"success" => true, "units" => units}
+  end 
 
-	def floor_sub_units
-		unit = FloorUnit.find(params[:unit_id]) rescue nil
-		page = Page.where(:page_id => params[:page_id]).first rescue nil
-		units = []
-		if !unit.nil?
-			unit.floor_sub_units.each do |subunit|
-				url = subunit.floor_sub_unit_images.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{subunit.to_param}?method=showcase&layout=false" rescue "#"
-				units << {
-					"id" => subunit.id.to_s,
-					"url" => url
-				}
-			end
-		end
+  def floor_sub_units
+    unit = FloorUnit.find(params[:unit_id]) rescue nil
+    page = Page.where(:page_id => params[:page_id]).first rescue nil
+    units = []
+    if !unit.nil?
+      unit.floor_sub_units.each do |subunit|
+        url = subunit.floor_sub_unit_images.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{subunit.to_param}?method=showcase&layout=false" rescue "#"
+        units << {
+          "id" => subunit.id.to_s,
+          "url" => url
+        }
+      end
+    end
 
-		render :json => {"success" => true, "sub_units" => units}
-	end 
+    render :json => {"success" => true, "sub_units" => units}
+  end 
 
-	def unit
-		params = OrbitHelper.params
-		unit = FloorUnit.where(:uid => params[:uid]).first rescue nil
-	    page = Page.where(:page_id => params[:page_id]).first
-	    layout = unit.layout.nil? ? "<div id='full-layout-canvas'><img href='<%= unit.layout_image.url %>' id='layout-image'></div>" : unit.layout
-	    backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}"
-		{
-			"unit-title" => unit.title,
-			"floor-back-link" => backlink,
-			"unit-layout" => layout,
-			"unit-id" => unit.id.to_s,
-			"page-id" => page.page_id
-		}
-	end
+  def unit
+    params = OrbitHelper.params
+    unit = FloorUnit.where(:uid => params[:uid]).first rescue nil
+    page = Page.where(:page_id => params[:page_id]).first
+    layout = unit.layout.nil? ? "<div id='full-layout-canvas'><img href='<%= unit.layout_image.url %>' id='layout-image'></div>" : unit.layout
+    backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}"
+    {
+      "unit-title" => unit.title,
+      "floor-back-link" => backlink,
+      "unit-layout" => layout,
+      "unit-id" => unit.id.to_s,
+      "page-id" => page.page_id
+    }
+  end
 
-	def showcase
-		params = OrbitHelper.params
-		unit = FloorSubUnit.where(:uid => params[:uid]).first rescue nil
-		images = []
-		unit.floor_sub_unit_images.each do |image|
-			images << {
-				"image-thumb-url" => image.image.thumb.url,
-				"image-url" => image.image.url,
-				"alt-image" => unit.title
-			}
-		end
-		{
-			"unit-images" => images,
-			"extras" => {
-				"unit-title" => unit.title
-			}
-		}
-	end
+  def showcase
+    params = OrbitHelper.params
+    unit = FloorSubUnit.where(:uid => params[:uid]).first rescue nil
+    images = []
+    unit.floor_sub_unit_images.each do |image|
+      images << {
+        "image-thumb-url" => image.image.thumb.url,
+        "image-url" => image.image.url,
+        "alt-image" => unit.title
+      }
+    end
+    {
+      "unit-images" => images,
+      "extras" => {
+        "unit-title" => unit.title
+      }
+    }
+  end
 end
 
 
diff --git a/modules/space/info.json b/modules/space/info.json
new file mode 100644
index 0000000..2f255a2
--- /dev/null
+++ b/modules/space/info.json
@@ -0,0 +1,12 @@
+{
+    "frontend": [
+        {
+            "filename" : "space_index1",
+            "name" : {
+                "zh_tw" : "1. 卡片式 ( 模組標題, 大樓, 樓層)",
+                "en" : "1. Card-like layout ( widget-title, buildings, floors )"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/space/show.html.erb b/modules/space/show.html.erb
new file mode 100644
index 0000000..3ea406b
--- /dev/null
+++ b/modules/space/show.html.erb
@@ -0,0 +1,93 @@
+<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>
\ No newline at end of file
diff --git a/modules/space/showcase.html.erb b/modules/space/showcase.html.erb
new file mode 100644
index 0000000..7ddfb9b
--- /dev/null
+++ b/modules/space/showcase.html.erb
@@ -0,0 +1,60 @@
+<style type="text/css">
+  .w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
+    display: none;
+  }
+  .w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
+    display: table;
+    width: 100%;
+  }
+  .w-ad-banner__pager.external img {
+    display: inline-block;
+    width: 100%;
+  }
+  .bundle-button{
+    padding-bottom: 1em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .fa.fa-times{
+    background: #e4225d;
+    color: white;
+    padding: 0.2em;
+    float: right;
+    cursor: pointer;
+  }
+</style>
+<div class="w-ad-banner ad-banner-widget-1 s-showcase">
+  <div class="w-ad-banner__pager-wrap w-ad-banner__page--active">
+    <h2 class="w-ad-banner__widget-title">{{unit-title}}</h2>
+    <div class="bundle-button">
+      <div class="w-ad-banner__control">
+        <button class="w-ad-banner__btn pull-left ui-button">
+          <i class="fa fa-pause"></i>
+        </button>
+      </div>
+      <div class="w-ad-banner__collpase ui-button">
+          <i class="fa fa-chevron-down"></i>
+      </div>
+    </div>
+    <div class="w-ad-banner__pager external" data-list="unit-images" data-level="0">
+      <span class="w-ad-banner__pager-item">
+        <img src="{{image-thumb-url}}" alt="{{alt-image}}">
+      </span>
+    </div>
+  </div>
+  <div class="w-ad-banner__wrap cycle-slideshow"
+      data-list="unit-images"
+      data-level="0"
+      data-cycle-fx="tileSlide"
+      data-cycle-slides=".w-ad-banner__slide"
+      data-cycle-timeout="5000"
+      data-cycle-pager=".w-ad-banner__pager"
+      data-cycle-pager-template=""
+      data-cycle-log="false"
+    >
+    <div class="w-ad-banner__slide">
+        <img class="w-ad-banner__image banner-responsive" src="{{image-url}}" alt="{{alt-image}}">
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/modules/space/space_index1.html.erb b/modules/space/space_index1.html.erb
new file mode 100644
index 0000000..65dcf62
--- /dev/null
+++ b/modules/space/space_index1.html.erb
@@ -0,0 +1,89 @@
+<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>
diff --git a/modules/space/thumbs/thumb.png b/modules/space/thumbs/thumb.png
new file mode 100644
index 0000000..266af56
Binary files /dev/null and b/modules/space/thumbs/thumb.png differ
diff --git a/modules/space/unit.html.erb b/modules/space/unit.html.erb
new file mode 100644
index 0000000..1a16f89
--- /dev/null
+++ b/modules/space/unit.html.erb
@@ -0,0 +1,197 @@
+<article class="s-space show-space">
+  <div class="loading-cover loading-hide">
+    <div class="loading"></div>
+  </div>
+  <h3 class="s-space__apartment-name">{{unit-title}}</h3>
+  <div class="s-space__apartment-layout">
+    {{unit-layout}}
+  </div>
+
+  <div class="s-space__back-btn-wrap">
+    <a href="{{floor-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
+  </div>
+</article>
+<div id="space-for-ad-banner"></div>
+
+<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 $slideshow = null;
+    var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
+    var unitId = "{{unit-id}}";
+    var pageId = "{{page-id}}";
+    var spaceForAdBanner = $("#space-for-ad-banner");
+    var loading = $("div.loading-cover");
+    var $controlBtn = null;
+    var $controlIcon = null;
+    var $collapse = null;
+    
+    canvas.height(windowHeight);
+    cover.height(coverImageHeight);
+    layoutImage.height(coverImageHeight);
+
+    tmpImg.src = layoutImage.attr('src') ;
+    tmpImg.onload = function() {
+      cover.width(layoutImage.width());
+    };
+
+    $('.selection-box-btn-holder').remove();
+
+    $.ajax({
+      url: "/xhr/spaces/get_floor_sub_units",
+      data: {unit_id : unitId, page_id : pageId },
+      dataType: 'JSON'
+    }).done(function(data) {
+      $box.each(function(i) {
+        var id = $(this).data('unit-id');
+        var obj = data.sub_units.filter(function(x) {
+          return x.id == id;
+        });
+        var temp = $pin.clone();
+        temp.attr('href', obj[0].url);
+        if (obj[0].url == "#") {
+          temp.find('.pulse').remove();
+        }
+        var text = $(this).find('.selection-box-label.absolute-center')
+        temp.prepend('<img src="/assets/space-p1.png">')
+        temp.on('focus',function(){
+          $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
+          $(this).find('img').attr('src','/assets/space-p2.png')
+        })
+        temp.on('mouseover',function(){
+          $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
+          $(this).find('img').attr('src','/assets/space-p2.png')
+        })
+        temp.on('blur',function(){
+          $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
+          $(this).find('img').attr('src','/assets/space-p1.png')
+        })
+        temp.on('mouseleave',function(){
+          if (!$(this).is(':focus')){
+            $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
+            $(this).find('img').attr('src','/assets/space-p1.png')
+          }
+        })
+        //temp.prepend($(this).find('.selection-box-label.absolute-center'))
+        $(this).append(temp);
+      });
+      canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler);
+    });
+
+    var pinLinkClickHandler = function(){
+      var el = $(this);
+      if(el.attr("href") != "#"){
+        loading.removeClass("loading-hide");
+        $.ajax({
+          url : el.attr("href"),
+          dataType : "html",
+          type : "get"
+        }).done(function(data){
+          var template = $(data)
+          createAdbanner(template);
+          $("#space-for-ad-banner").show()
+          $closeBtn
+            .on('click', destroyAdbanner)
+            .prependTo(template);
+        });
+      }
+      else{
+        destroyAdbanner()
+      }
+      return false;
+    };
+
+    function createAdbanner(data) {
+      spaceForAdBanner.html(data);
+      $closeBtn.removeClass('active');
+      imageLoad(function(){
+        setTimeout(function(){
+          loading.addClass("loading-hide");
+        },1000);
+      });
+
+      $slideshow = data.find('.cycle-slideshow');
+      $slideshow.cycle();
+      $controlBtn = data.find('.w-ad-banner__btn');
+      $controlIcon = $controlBtn.find('i');
+      $collapse = data.find('.w-ad-banner__collpase');
+
+      $(document).on('keyup.adbanner', function(e) {
+        if (e.keyCode === 37) {
+          $slideshow.cycle('prev');
+        } else if (e.keyCode === 39) {
+          $slideshow.cycle('next');
+        } else if (e.keyCode === 27) {
+          destroyAdbanner();
+        } 
+      });
+
+      $controlBtn.on('click', function(e) {
+        if ($slideshow.hasClass('cycle-paused')) {
+          $slideshow.cycle('resume');
+          $controlIcon.attr('class', 'fa fa-pause');
+        } else {
+          $slideshow.cycle('pause');
+          $controlIcon.attr('class', 'fa fa-play');
+        }
+      });
+
+      // collapse cycle pager and close button
+      $collapse.on('click', function(e) {
+        var $this = $(this);
+        console.log($this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow'))
+        if ($this.hasClass('active')) {
+          $this
+            .removeClass('active')
+              .find('.fa')
+              .removeClass('fa-chevron-up')
+              .addClass('fa-chevron-down');
+          $this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow').show();
+        } else {
+          $this
+            .addClass('active')
+              .find('.fa')
+              .removeClass('fa-chevron-down')
+              .addClass('fa-chevron-up');
+          $this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow').hide();
+        }
+        $this.parents('.w-ad-banner__pager-wrap.w-ad-banner__page--active').toggleClass('active');
+      });
+    }
+
+    var imageLoad = function(fn){
+      var images = spaceForAdBanner.find("img.w-ad-banner__image");
+          images_loaded = 0;
+      images.each(function(){
+        var img = new Image();
+        img.src = $(this).attr("src");
+        img.onload = function(){
+          images_loaded++;
+           if(typeof fn == "function" && images_loaded == images.length){
+              fn.call();
+            }
+        };
+      });
+    };
+
+    function destroyAdbanner() {
+      $slideshow.cycle('destroy');
+      $closeBtn.remove();
+      $('#space-for-ad-banner')
+        .children()
+        .remove()
+        .end()
+        .hide();
+
+      $(document).off('keyup.adbanner');
+    }
+  }());
+</script>
\ No newline at end of file
diff --git a/space.gemspec b/space.gemspec
index 2681450..7707796 100644
--- a/space.gemspec
+++ b/space.gemspec
@@ -2,7 +2,19 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "space/version"
-
+app_path = File.expand_path(__dir__)
+template_path = ENV['PWD'] + '/app/templates'
+all_template = Dir.glob(template_path+'/*/')
+puts 'copying module'
+all_template.each do |folder|
+  if folder.split('/')[-1] != 'mobile'
+    begin
+      system ('cp -r '+ app_path + '/modules/ ' + folder)
+    rescue
+      puts 'error copy'
+    end
+  end
+end
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "space"