main(role="main")
  button#popup-trigger.popup-trigger.btn: span Signup Now
      i.fa.fa-plus-square-o
#overlay.overlay
  #overlay-background.overlay-background
  #overlay-content.overlay-content
    #overlay-close.fa.fa-times.fa-lg.overlay-close
    h1.main-heading Signup Now
    h3.blurb Creating an account is free —
    span.blurb-tagline and won't take longer than a couple of seconds.
    form.signup-form(method="post",action="#",novalidate)
      label(for="signup-name") Full Name
      input#signup-name(type="text",name="name",autocomplete="off")
      label(for="signup-email") Email Address
      input#signup-email(type="email",name="email",autocomplete="off")
      label(for="signup-pw") Password
      input#signup-pw(type="password",name="pw",autocomplete="off")
      label(for="signup-cpw") Confirm Password
      input#signup-cpw(type="password",name="cpw",autocomplete="off")
      button.btn.btn-outline.submit-btn: span signup

// reset
* {
  margin: 0;
  padding: 0;
  color: inherit;
  box-sizing: inherit;

  &:focus {
    outline: none;
  }
}

html {
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
}

form {
  display: block;
}

label,
input {
  display: block;
}

// extends
.animate {
  transition: all 0.3s;
}

// main styles
main {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.main-heading {
  line-height: 100%;
  font-weight: 600;
  font-size: 28px;
  text-transform: uppercase;
}

.btn {
  display: block;
  height: 50px;
  line-height: 50px;
  border: 0;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  @extend .animate;

  span {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    @extend .animate;

    .fa {
      margin-left: 8px;
      font-size: 18px;
      vertical-align: middle;
    }
  }

  &:not(.btn-outline) {
    background-color: #fff;
    
    span {
      color: #666;
    }
    
    &:hover {
      background-color: #f7f7f7;
    }
  }
  
  &.btn-outline {
    background-color: transparent;
    border: 1px solid #fff;
    
    span {
      color: #fff;
    }
    
    &:hover {
      background-color: #fff;
      
      span {
        color: #666;
      }
    }
  }
}

.popup-trigger {
  width: 175px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 25px 0 rgba(0,0,0,.05);
}

.overlay {
  width: 100%;
  height: 100%;
  overflow: auto;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 0.5s, transform 0.5s, z-index 0s 0.5s;
  
  .overlay-background {
    background-color: rgba(44,62,80,.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
  }
  
  .overlay-content {
    width: 100%;
    max-width: 530px;
    margin: 100px auto 0;
    padding: 0 15px;
    color: #fff;
    position: relative;
    z-index: 10;
    @extend .animate;
    
    .overlay-close {
      display: block;
      font-size: 35px;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 15px;
      @extend .animate;
      
      &:hover {
        opacity: .8;
      }
    }
    
    .blurb {
      margin-top: 35px;
      line-height: 100%;
      font-weight: 600;
      font-size: 18px;
    }
    
    .blurb-tagline {
      display: block;
      margin-top: 10px;
      line-height: 100%;
      font-size: 14px;
    }
    
    .signup-form {
      margin-top: 35px;
      
      label {
        line-height: 100%;
        margin-bottom: 5px;
        font-size: 14px;
      }
      
      input {
        background-color: transparent;
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
        padding: 0 8px;
        border: 1px solid rgba(254,254,254,.3);
        border-radius: 5px;
        @extend .animate;
        
        &:hover,
        &:focus {
          border-color: #fff;
        }
      }
      
      .submit-btn {
        width: 150px;
      }
    }
  }
  
  &.open {
    z-index: 15;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s, z-index 0s;
  }
  
  &.short .overlay-content {
    margin: 30px auto;
  }
}

@media (max-width: 600px) {
  
  .overlay .overlay-content {
    margin: 25px auto;
  }
}

calculateHeight = ->
  
  $content = $('#overlay-content')
  contentHeight = parseInt($content.height()) + parseInt($content.css('margin-top')) + parseInt($content.css('margin-bottom'))
  windowHeight = $(window).height()
  
  finalHeight = if windowHeight > contentHeight then windowHeight else contentHeight
  
  return finalHeight

$(document).ready ->
  
  $(window).resize ->
    
    if $(window).height() < 560 and $(window).width() > 600
      $('#overlay').addClass 'short'
    else
      $('#overlay').removeClass 'short'
    
    $('#overlay-background').height calculateHeight()
  
  $(window).trigger 'resize'
  
  # open
  $('#popup-trigger').click ->
    $('#overlay')
      .addClass 'open'
      .find('.signup-form input:first').select()
  
  # close
  $('#overlay-background,#overlay-close').click ->
    $('#overlay').removeClass 'open'