<!-- If you liked this pen, please consider hearting it to help me win the friggin' Pattern Rodeo :)-->

<form class="topLabel">
  <header class="form-header">
    <div class='form-header-overlay'></div>
    <h2>A Form of Fantasy</h2>
    <blockquote>"The gift of fantasy has meant more to me than my talent for absorbing positive knowledge." - Albert Einstein</blockquote>
  </header>
  
  <ul>
  
    <li id="form-field-1">
      <fieldset>
        <legend class='big-question'>
          Which is better?
        </legend>
        <div>
          <span>
            <input id="Field1_0" name="Field1" type="radio" class="field radio" value="Fantasty" checked="checked" />
            <label class="choice" for="Field1_0" >
              Fantasty
            </label>
          </span>
          <span>
            <input id="Field1_1" name="Field1" type="radio" class="field radio" value="Sci-Fi" />
            <label class="choice" for="Field1_1" >
              Sci-Fi
            </label>
          </span>
          <span>
            <input id="Field1_2" name="Field1" type="radio" class="field radio" value="Don&#039;t make me choose!" />
            <label class="choice" for="Field1_2" >
              Don't make me choose!
            </label>
          </span>
          <span>
            <input id="Field1_3" name="Field1" type="radio" class="field radio" value="I don&#039;t like either" />
            <label class="choice" for="Field1_3" >
              I don't like either
            </label>
          </span>
        </div>
      </fieldset>
      <a href='#form-field-2' class='button onwards'>Onwards!</a>
    </li>
    
    <li id="form-field-2" class='natural'>
      <label class="desc big-question" id="title2" for="Field2">
      How much would you donate to a Kickstarter to bring back Firefly?
      </label>
      <span class="symbol">Probably around $</span>
       <span>
        <input id="Field2" name="Field2" type="number" class="field text currency nospin" placeholder='45' value="" size="10" />
        <label for="Field2">Dollars</label>
      </span>
      <span class="symbol radix">.</span>
      <span class="cents">
        <input placeholder='25' id="Field2-1" name="Field2-1" type="number" min="0" class="field text nospin" value="" size="2" maxlength="2" />
        <label for="Field2-1">Cents</label>
      </span>
      <a href='#form-field-3' class='button onwards'>Next Question</a>
    </li>
    
    <li id="form-field-3" class="likert">
      <legend class='big-question' id="title3">
        Rate the Star Wars movies
      </legend>
      <table class='stars' cellspacing="0">
        <thead>
          <tr>
            <th>&nbsp;</th>
            <td>Didn't Like At All</td>
            <td>Meh</td>
            <td>Kinda Liked</td>
            <td>Loved!</td>
          </tr>
        </thead>
        <tbody>
          <tr class="statement3">
            <th>
              <label for="Field3"><strong>Episode I</strong> - The Phantom Menace</label>
            </th>
            <td title="Didn&#039;t Like At All">
              <input id="Field3_1" name="Field3" type="radio" value="Didn&#039;t Like At All" />
              <label for="Field3_1">1</label>
            </td>
            <td title="Meh">
              <input id="Field3_2" name="Field3" type="radio" value="Meh" />
              <label for="Field3_2">2</label>
            </td>
            <td title="Kinda Liked">
              <input id="Field3_3" name="Field3" type="radio" value="Kinda Liked" />
              <label for="Field3_3">3</label>
            </td>
            <td title="Loved!">
              <input id="Field3_4" name="Field3" type="radio" value="Loved!" />
              <label for="Field3_4">4</label>
            </td>
          </tr>
          <tr class="alt statement4">
            <th>
              <label for="Field4"><strong>Episode II</strong> - Attack of the Clones</label>
            </th>
            <td title="Didn&#039;t Like At All">
              <input id="Field4_1" name="Field4" type="radio" value="Didn&#039;t Like At All" />
              <label for="Field4_1">1</label>
            </td>
            <td title="Meh">
              <input id="Field4_2" name="Field4" type="radio" value="Meh" />
              <label for="Field4_2">2</label>
            </td>
            <td title="Kinda Liked">
              <input id="Field4_3" name="Field4" type="radio" value="Kinda Liked" />
              <label for="Field4_3">3</label>
            </td>
            <td title="Loved!">
              <input id="Field4_4" name="Field4" type="radio" value="Loved!" />
              <label for="Field4_4">4</label>
            </td>
            </tr>
              <tr class="statement5">
                <th><label for="Field5"><strong>Episode III</strong> - Revenge of the Sith</label></th>
            <td title="Didn&#039;t Like At All">
              <input id="Field5_1" name="Field5" type="radio" value="Didn&#039;t Like At All" />
              <label for="Field5_1">1</label>
            </td>
            <td title="Meh">
              <input id="Field5_2" name="Field5" type="radio" value="Meh" />
              <label for="Field5_2">2</label>
            </td>
            <td title="Kinda Liked">
              <input id="Field5_3" name="Field5" type="radio" value="Kinda Liked" />
              <label for="Field5_3">3</label>
            </td>
            <td title="Loved!">
              <input id="Field5_4" name="Field5" type="radio" value="Loved!" />
              <label for="Field5_4">4</label>
            </td>
          </tr>
          <tr class="alt statement6">
            <th>
              <label for="Field6"><strong>Episode IV</strong> - A New Hope</label>
            </th>
            <td title="Didn&#039;t Like At All">
              <input id="Field6_1" name="Field6" type="radio" value="Didn&#039;t Like At All" />
              <label for="Field6_1">1</label>
            </td>
            <td title="Meh">
              <input id="Field6_2" name="Field6" type="radio" value="Meh" />
              <label for="Field6_2">2</label>
            </td>
            <td title="Kinda Liked">
              <input id="Field6_3" name="Field6" type="radio" value="Kinda Liked" />
              <label for="Field6_3">3</label>
            </td>
            <td title="Loved!">
              <input id="Field6_4" name="Field6" type="radio" value="Loved!" />
              <label for="Field6_4">4</label>
            </td>
          </tr>
          <tr class="statement7">
            <th>
              <label for="Field7"><strong>Episode V</strong> - The Empire Strikes Back</label>
            </th>
            <td title="Didn&#039;t Like At All">
              <input id="Field7_1" name="Field7" type="radio" value="Didn&#039;t Like At All" />
              <label for="Field7_1">1</label>
            </td>
            <td title="Meh">
              <input id="Field7_2" name="Field7" type="radio" value="Meh" />
              <label for="Field7_2">2</label>
            </td>
            <td title="Kinda Liked">
              <input id="Field7_3" name="Field7" type="radio" value="Kinda Liked" />
              <label for="Field7_3">3</label>
            </td>
            <td title="Loved!">
              <input id="Field7_4" name="Field7" type="radio" value="Loved!" />
              <label for="Field7_4">4</label>
            </td>
          </tr>
          <tr class="alt statement8">
            <th>
              <label for="Field8"><strong>Episode VI</strong> - Return of the Jedi</label>
            </th>
            <td title="Didn&#039;t Like At All">
              <input id="Field8_1" name="Field8" type="radio" value="Didn&#039;t Like At All" />
              <label for="Field8_1">1</label>
            </td>
            <td title="Meh">
              <input id="Field8_2" name="Field8" type="radio" value="Meh" />
              <label for="Field8_2">2</label>
            </td>
            <td title="Kinda Liked">
              <input id="Field8_3" name="Field8" type="radio" value="Kinda Liked" />
              <label for="Field8_3">3</label>
            </td>
            <td title="Loved!">
              <input id="Field8_4" name="Field8" type="radio" value="Loved!" />
              <label for="Field8_4">4</label>
            </td>
          </tr>
        </tbody>
      </table>
      <a href='#form-field-4' class='button onwards'>Half way through!</a>
    </li>
    
    <li id="form-field-4">
      <label class="desc big-question" id="title104" for="Field104">
        Are you caught up on Game of Thrones?
      </label>
      <div>
        <select id="Field104" name="Field104" class="field select medium" tabindex="31" > 
          <option value="Never seen it" selected="selected">
            Never seen it
          </option>
          <option value="Yep, totally caught up" >
            Yep, totally caught up
          </option>
          <option value="I&#039;ve seen some but I&#039;m not caught up" >
            I've seen some but I'm not caught up
          </option>
        </select>
      </div>
      <a href='#form-field-5' class='button onwards'>Next!</a>
    </li>
    
    <li id="form-field-5">
      <label class="desc big-question" id="title107" for="Field107">
        What is your favorite Fantasty or Sci-Fi movie <strong>of all time?</strong>
      </label>
      <div>
      <input id="Field107" name="Field107" type="text" class="field text huge-textinput" required value="" maxlength="255" tabindex="32" onkeyup="" />
      <p class='comment'>Yeah, that one was awesome!</p>
      
      </div>
      <a href='#form-field-6' class='button onwards'>Only one step left!</a>
    </li>
    
    <li id="form-field-6" class='natural'>
        <h3 class='big-question' id="title108">
          Can we get in touch?
        </h3>
      <div>
      <label class="desc" id="title105" for="Field105">
        Sure thing, my name is
      </label>
      <span>
        <input id="Field105" name="Field105" type="text" class="field text fn" value="" size="8" tabindex="33" />
        <label class='small' for="Field105">First</label>
      </span>
      <span>
        <input id="Field106" name="Field106" type="text" class="field text ln" value="" size="14" tabindex="34" />
        <label class='small' for="Field106">Last</label>
      </span>
      </div>
      
      <div>
      <label class="desc" id="title110" for="Field110">
        my email is
      </label>
      
        <input id="Field110" name="Field110" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" /> 
      </div>
    
      <div>
    <label class="desc" id="title117" for="Field117">
        Also, check out my cool Website @
      </label>
        <input id="Field117" name="Field117" type="url" class="field text medium" value="" maxlength="255" tabindex="36" /> 
      </div>
      <div> 
      <input id="saveForm" name="saveForm" class="btTxt submit" 
        type="submit" value="Submit"
     />
      </div>
    </li>
  </ul>
  
</form>

@import "compass/css3";

@import 'compass/css3';

$li-width: 100% / 6 * .94;

*{
  @include box-sizing(border-box);
}
body {
  font-family: open sans;
}

strong {
  font-weight: 700;
}

ul {
  width: 600%;
  position: absolute;
  height: 100%;
 @include background-image(linear-gradient(left, $peach 0%,$peach $li-width, $blue $li-width, $blue 2 * $li-width, $emerald 2 * $li-width, $emerald 3 * $li-width, $yellow-light 3 * $li-width, $yellow-light 4 * $li-width, $blue 4 * $li-width, $blue 5 * $li-width, $peach 5 * $li-width));
}

li {
  display: inline-block;
  float: left;
  width: $li-width;
  height: 100%;  
  padding: 1em;
}

.big-question {
  color: white;  
  font-size: 40px;
  font-weight: 100;
  display: block;
  width: 80%;
  margin-bottom: .5em;
  line-height: 1.54em;
}

input[type="radio"] + label {  
  padding-left: 1em;
  color: rgba(white, .6);
   @include transition(.3s);  
   
  font-size: 1.5em;
}

input[type="radio"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
    &:hover, &:focus, &:hover + label, &:focus + label {
      border-color: rgba(white, .8);
      color: rgba(white, .8);
    }

  &:checked + label {
    color: white;
  }
}

input[type="radio"] + label::before {
    @include transition(.3s);  
    @include background-image(radial-gradient($white 0.0em, transparent 0.0em, transparent 5em));
  
  content: '';
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
    position: relative;
    top: .5em;
    display: inline-block;
    background-color: transparent;
    border-radius: 2em;
    border: 6px solid rgba(white, .6);
    }

input[type="radio"]:checked + label::before {
  border-color: white;
  @include background-image(radial-gradient(white, white .5em, transparent .5em));
}

#form-field-1 {
  span {
    display: block;
    margin-bottom: 2em;
  }
}

.stars {
  thead {
    display: none;
  }
  input {
  & + label {  
    font-size: 0;
  }

  position:absolute;
  clip: rect(0,0,0,0);
  clip: rect(0 0 0 0);
  
  &:checked + label {
    color: white;
  }

  & + label::before {
    content: '\2606';
    font-size: 80px;
    width: auto;
    height: auto;
    margin-right: 0;
    border: none;
    position: relative;
    top: .2em;
    display: inline-block;
    background: transparent;
  }

  &:checked + label::before {  
      content: '\2605';
      background: transparent;
  }
  }
}

table {
  //@include column-count(2);
  //@include column-gap(1em);
}

tr {
  border-bottom: 2px solid rgba($white, .4);
  color: $midnight;
  display: block;
  float: left;
  padding-left: 2em;
  width: 50%;
}

td {
  padding-bottom: 2em;
}
select {
  font-size: 2em;
  padding: .4em;
  color: $midnight;
  font-family: open sans;
}

.huge-textinput {
  width: 80%;
  font-family: open sans;
  display: block;
  color: $midnight;
  padding: .5em;
  font-size: 2.5em;
  &:valid + .comment{
    opacity: 1;
  }

}

.comment {
  @include transition(1.2s);
  @include transition-delay(1s);
  opacity: 0;
  color: $midnight;
  font-style: italic;
}


.natural {
  line-height: 1.55em;
  font-size: 1.5em;
  color: white;
  
  input:not([type='submit']) {
    border: none;
    background: rgba(black, .2);
    font-size: 1em;
    color: rgba(white, .6);
    
    &:focus, &:active {
      box-shadow: none;
      border: none
    }
  }
    
    .onwards {
      font-size: 16px;
    }
}

.button {
  display: inline-block;
  margin-top: 1em;
  cursor: pointer;
  margin-left: 20px;
  text-decoration: none;
  color: $midnight;
  border: none;
  border-radius: 4px;
  background: $white;
  padding: .5em 2em;
  @include transition(.3s);
  &:hover {
    background: darken($white, 6);
      border-radius: 10px;
  }

}
.submit {
  @extend .button;
  font-size: 2em;
}

.form-header {
  background: $midnight;
  position: fixed;
  padding: .4em;
  color: $white;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  
  h2 {
    font-weight: 700;
  }
  
  blockquote{
    font-size: .8em;
    display: inline-block;
    opacity: .8;
  }
}

.form-header-overlay {
  width: 0px;
  height: 100%;
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  @include transition(.6s);
  background: rgba(white, .2);
}

label.small { 
  font-size: .4em;
  position: relative;
  left: -4em;
  opacity: .6;
}
li {
  @include transform-style(preserve-3d);
}

ul li:nth-of-type(1){
//    @include transform(rotateY(60deg))
}

$(window).scroll(function(){
  var offset = $(this).scrollLeft();
  var totalWidth = $('ul').width();
  $('.form-header-overlay').width(offset / 5);
})

$(function() {
  
  $('.stars input').change(function(){
    //window.alert('hello');
  })  
  
    $('.onwards').bind('click',function(event){
        var $anchor = $(this);
        /*
        if you want to use one of the easing effects:
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500,'easeInOutExpo');
         */
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 600);
        event.preventDefault();
    });
});