.header
  h1 Your cart
  p "I say let the world go to hell, but I should always have my tea."
  p ― Fyodor Dostoyevsky, Notes from Underground

.cart-container
  .empty style="display:none" No more twinkies ! 
  ul.cart

    li.product data-price=4.90 data-quantity=2
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/sidebar-cupcake.png"
        .product-paper
          .product-name Cupcake
          .product-price $ 4.90
      .product-quantity x2
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=3.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/ponytails-coffee-time-coffee-cup3.png"
        .product-paper
          .product-name Coffee
          .product-price $ 3.50
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=5.70 data-quantity=3
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/Chocolate.png"
        .product-paper
          .product-name Chocolate
          .product-price $ 5.70
      .product-quantity x3
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=6.90 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/waffle-homestyle.png"
        .product-paper
          .product-name Waffle
          .product-price $ 6.90
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=3.90 data-quantity=2
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/donuts.jpg"
        .product-paper
          .product-name Donuts
          .product-price $ 3.90
      .product-quantity x2
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=6.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/raspberry-sorbet.gif"
        .product-paper
          .product-name Sorbet
          .product-price $ 6.50
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=1.80 data-quantity=3
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/croissant-psd49504.png"
        .product-paper
          .product-name French Croissant
          .product-price $ 1.80
      .product-quantity x3
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=2.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/Macaron.png"
        .product-paper
          .product-name Macaron
          .product-price $ 2.50
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=2.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/millefeuille-vanille.jpg"
        .product-paper
          .product-name Mille-feuille
          .product-price $ 12.90
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=9.90 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/tarte-au-citron.jpg"
        .product-paper
          .product-name Lemon Pie
          .product-price $ 9.90
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

table.bill
  tr.subtotal
    td.label Subtotal :
    td.value $ 71.90
  tr.salestax
    td.label Sales tax : 
    td.value $ 3.60
  tr
    td.label Shipping :
    td.value $ 5.00
  tr.total
    td.label Total :
    td.value $ 80.50

.actions
  .big-button.go Get them !
.actions
  .big-button.return Return to shop
  

@import compass

@import url(https://fonts.googleapis.com/css?family=Mouse+Memoirs:400,700)

*
  box-sizing: border-box

html, body
  font: 16px 'Mouse Memoirs' 
  background: #ad6932
  color: #523118
  width: 100%
  height: 100%

.header
  text-align: center
  padding: 1em 0 2em
  background-image: repeating-linear-gradient(45deg, #5f391c, #5f391c 100px, #865127 100px, #865127 200px)
  color: #f0dccd
  //border-bottom: 5px solid white
  box-shadow: 0 0 0 .5em rgba(255, 255, 255, 0.25) inset
  h1
    font-size: 4em
  p
    font-size: 1.2em
    font-style: italic

.cart-container
  width: 100%
  height: 280px
  display: table
  
  .empty
    font-size: 3em
    width: 100%
    text-align: center
    display: table-cell
    vertical-align: middle
  
.cart
  list-style: none
  height: 280px
  width: 10000px
  cursor: grab
  position: relative
  left: 0
  transform: translate3d(0, 0, 0) 
  
  .product
    position: relative
    width: 200px
    height: 280px
    float: left
    &:hover
      z-index: 1
    
    &:nth-child(3n+1)
      .product-preview, .product-interactions
        background: #E8B0AF

    &:nth-child(3n+2)
      .product-preview, .product-interactions 
        background: #FDDAC4
      
    &:nth-child(3n)
      .product-preview, .product-interactions
        background: #F1D5A5
      
    .product-preview
      padding: 1em
      height: 280px
      position: relative
      
      .thumbnail
        width: 100%
        min-height: 120px
        max-height: 200px

        .image
          width: 100%
          margin-top: 1em
          
      .product-paper
        position: absolute
        height: 75px
        bottom: 0
        background: rgba(255, 255, 255, 0.65)
        padding: 1em
        display: block
        width: 100%
        margin-left: -1em
        
      .product-name
        font-size: 1.6em
        //letter-spacing: -1px
        text-align: center
        
      .product-price
        text-align: center
        font-size: 1.2em

    .product-quantity
      font-size: 2em
      width: 2em
      height: 2em
      text-align: center
      padding: .35em 0
      border-radius: 1em
      position: absolute
      top: .5em
      right: .5em
      background: #fff
      transform: rotateZ(10deg)
      backface-visibility: hidden 

    &:hover .product-interactions, .visible
      opacity: 1!important
      transform: perspective(600px) rotateX(0deg)!important
      
    .product-interactions
      position: absolute
      bottom: 75px
      width: 100%
      height: 60px
      border-bottom: 1px dashed rgba(0, 0, 0, .4)
      transform-origin: 50% 100% 0
      transform: perspective(600px) rotateX(90deg)
      opacity: 0
      transition: .4s all ease-in-out
      display: table
        
      .button
        width: 32%
        height: 60px
        float: left
        text-align: center
        font-size: 5em
        line-height: .75em
        color: #999
        background: rgba(255, 255, 255, .65)
        cursor: pointer
        user-select: none
        transition: .1s all ease-in-out
        transform-origin: 50% 0 0
        transform: perspective(600px)
        z-index: 0
        position: relative
        display: table-cell
        vertical-align: middle
        
        &.plus
          color: #7fb034
          
        &.minus
          color: #a0ce5a
          
        &.del:after
          content: "+"
          position: absolute
          color: red 
          left: 50%
          margin-left: -.15em
          transform: rotateZ(45deg)
          

        &:nth-child(1), &:nth-child(2)
          border-right: 1px dashed rgba(0, 0, 0, .1)
        &:nth-child(2)
          width: 36% 
        &:active
          font-size: 7em 
          background: #fff!important
          box-shadow: 0 0 0 10px #fff!important
          z-index: 10
          line-height: .45em

        &:hover
          background: rgba(255, 255, 255, .5)

.bill
  margin: 0
  padding: 1em
  font-size: 1.4em
  line-height: 1.6em
  background: #F1D5A5
  color: #48320b
  width: 100%
  .total
    font-weight: bold
    font-size: 1.6em
  tr
    td
      width: 50%
      padding: .25em 20px
    .label
      text-align: right
      
      
.actions
  text-align: center
  position: relative
  width: 100%
  height: 6em

  .big-button
    position: absolute
    cursor: pointer
    user-select: none
    padding: 1em
    width: 100%
    //background: #865127
    //color: #f0dccd
    font-size: 1.5em
    transition: .1s all ease-in-out
    box-shadow: 0 0 0 0 #6c411f
      
    &:active
      z-index: 10
      font-size: 2em
      
    &.return
      background: #ad6932
      color: #f0dccd
      &:hover
        background: #6c411f
      &:before
        content: "←"
        
    &.go
      background: #a0ce5a
      color: #334715
      font-size: 2em
      &:hover
        background: #7fb034
      &:active
        font-size: 2.5em
        background: #bede8e
        box-shadow: 0 0 0 10px #bede8e 

        
    
    

$('.cart-container').on('mousemove', function(evt) {
  var windowWidth = $(window).width();
  var cartWidth = $('.product').length * 200;
  if(windowWidth < cartWidth)
    $('.cart').stop(false, true).animate({
      left: - (evt.clientX / windowWidth) * (cartWidth - windowWidth)
    });
  else
    $('.cart').stop(false, true).css({
      left: 0
    });
});

$('.plus').click( function() {
  var product = $(this).closest('.product')
  var q = product.data('quantity') + 1;
  product.data('quantity', q);
  updateProduct(product);
});

$('.minus').click( function() {
  var product = $(this).closest('.product')
  var q = Math.max(1, product.data('quantity') - 1); 
  product.data('quantity', q);
  updateProduct(product);
});

$('.del').click( function() {
  var product = $(this).closest('.product')
  product.hide('blind', {direction:'left'}, 500, function() {
    product.remove();
    updateProduct(product);
    if($('.product').length == 0)  {
      $('.cart-container .cart').hide();
      $('.cart-container .empty').show();
    }
  });
});

function updateProduct(product) {
  var quantity = product.data('quantity');
  var price = product.data('price');
  $('.product-quantity', product).text('x' + quantity);
  $('.product-price', product).text('$ ' + (price * quantity).toFixed(2));
  updateBill();
}

function updateBill() {
  var subtotal = 0;
  var salestax = 0;
  var shipping = 5;
  var total = 0;
  $('.product').each(function () {
    subtotal += $(this).data('quantity') * $(this).data('price');
  });
  salestax = subtotal * 0.05;
  total = subtotal + salestax + shipping;
  $('.subtotal .value').text('$ ' + subtotal.toFixed(2));
  $('.salestax .value').text('$ ' + salestax.toFixed(2)); 
  $('.total .value').text('$ ' + total.toFixed(2));
}