<section id="hotspots" class="tile hotspots">
  <div class="wrapper">
    <div class="front">

      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169666/product-01.png" alt="" class="livery">
      <div class="hotspots-container">
        <div class="icon" data-card="test1" data-left="20" data-top="40">
        </div>
        <div class="icon" data-card="test2" data-left="60" data-top="50">
        </div>
        <div class="icon" data-card="test3" data-left="70" data-top="50">
        </div>
      </div>
    </div>
    <div class="back">
      <div class="close">
      </div>
      <div class="hotspot-data">
        <div id="test1" class="contain">
          <div class="copy">
            <h2>Folding raked wingtip</h2>
            <h3>The Future of Flight Unfolding</h3>
            <p>
              <b>Simple design enables compatibility</b><br />The 777X&rsquo;s folding raked wingtip and optimized span deliver greater efficiency, significant fuel savings and complete airport gate compatibility.
            </p>
          </div>
          <div class="image">
            <img data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169666/product-01-hotspot-01.jpg" alt="Folding raked wingtip">
          </div>
  </div>
        <div id="test2"  class="contain">
          <div class="copy">
            <h2>New composite high-span wing</h2>
            <h3>All-new high-efficiency composite wing</h3>
            <p><b>Completely optimized wingspan</b><br>The 777X's revolutionary design and composite wing make-up allow it to stretch the limits of span beyond any competing aircraft.</p>
          </div>
          <div class="image">
            <img data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169666/product-01-hotspot-03.jpg" alt="Folding raked wingtip">
          </div>
  </div>
        <div id="test3"  class="contain">
          <div class="copy">
            <h2>New GE9X engine</h2>
            <h3>The world’s next great engine</h3>
            <p>
              The 777X will be powered by the most advanced, fuel-efficient commercial aircraft engine ever built. Designed specifically for the 777X, the all-new GE9X engine features extraordinarily efficient core technology and a composite fan optimized for the 777X
            </p>
          </div>
          <div class="image">
            <img data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169666/product-01-hotspot-04.jpg" alt="Folding raked wingtip">
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
</section>

@import url('https://fonts.googleapis.com/css?family=Roboto');
@mixin linearGradient($top, $bottom){
    background: $top; /* Old browsers */
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
@mixin center-xy($position: absolute) {
  position: $position;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  // background: #ccc;
  @include linearGradient(#cccccc, #666666);
}
* {
  box-sizing: border-box;
}
.tile {
  width: 640px;
  height: 360px;
  @include center-xy();
  
  &.hotspots {
    // position: absolute;
    perspective: 1000px;
    
    .wrapper {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      // transition: transform .5s;
      &.flipped {
        transform: rotateX(180deg);
      }
      .front {
        position: absolute;
        top: 0;
        // z-index: 2;
        left: 0;
        height: 100%;
        width: 100%;
        backface-visibility: hidden;
        margin: 0;
        .livery {
          width: 100%;
          height: auto;
        }
        .hotspots-container {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          .icon {
            position: absolute;
            @include sprite($icon-hotspot-icon);
            backface-visibility: hidden;
            transition: all 100ms linear;
            cursor: pointer;
            &:before {
              content: "";
              width: 100%;
              height: 100%;
              border: 6px solid rgba(#fff, .8);
              border-radius: 50%;
              position: absolute;
              top: -17%;
              left: -17%;
              // @include opacity(0, false);
              opacity: 0;
              transition: all 100ms linear;
            }
            &:hover {
              transform: scale(1.3);
              &:before {
                transform: scale(1.5);
                // @include opacity(1, false);
                opacity: 1;
              }
            }
          }
        }
      }
      .back {
        display: none;
        position: absolute;
        background: white;
        top: 0;
        left: 0;
        width: 100%;
        // z-index: 1;
        height:100%;
        margin: 0;
        // padding: 10px;
        // backface-visibility: hidden;
        transform: rotateX( 180deg );
        .close {
          @include sprite($icon-close-btn);
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
          z-index: 200;
          background-color: black;
        }
        .hotspot-data {
          position: absolute;
          width: 100%;
          // padding: 20px;
          
          height: 100%;
          .contain {
            display: none;
            background: white;
            
            .copy {
              float: left;
              width: 50%;
              padding: 10px;
              padding-right: 5px;
              
            }
            .image {
              float: left;
              width: 50%;
              padding-left: 5px;
              height: 100%;
              
              img {
                width: 100%;
                height: 100%;
              }
            }
            
            &.active {
              display: block;
              position: relative;
              // top: 0;
              // left: 0;
              width: 100%;
              height: 100%;
            }
          }
        }
      } 
    }
    
    
  }
}

var tlOpen = new TimelineMax({ease: Linear.easeNone});
var tlClose = new TimelineMax({ease: Linear.easeNone});


$(function(){
  $('.close').on('click', function(){
    // $('.hotspots .wrapper').removeClass('flipped');
    tlClose
      .to($('.hotspots .wrapper'), .125, {rotationX:90})
      .set($('.hotspots .wrapper').find('.back'), {display: 'none'})
      .to($('.hotspots .wrapper'), .125, {rotationX:0})
      .add(function(){$('.hotspot-data .active').removeClass('active');})
    
    
  })
  $.each($('.hotspots-container .icon'), function(){
    var x = $(this).data('left');
    var y = $(this).data('top');
    console.log(x,y);
    $(this).css({
      left: x + '%',
      top: y + '%'
    })
    $(this).on('click', function(){
      $('.hotspot-data').find("#" + $(this).data('card')).addClass('active');
      $('.hotspot-data').find("#" + $(this).data('card') + ' .image img').attr('src', $('.hotspot-data').find("#" + $(this).data('card') + ' .image img').data('src'));
      // $('.hotspots .wrapper').addClass('flipped');
      tlOpen
        .to($('.hotspots .wrapper'), .125, {rotationX:90})
        .set($('.hotspots .wrapper').find('.back'), {display: 'block'})
        .to($('.hotspots .wrapper'), .25, {rotationX:180})
      
    })
  })
})