<section class="partition par1">
  <div class="all">
    <h1>Sparkle</h1>
    <h3>with a hint of Fairy Dust!</h3>
    <a href="#">More Sparkle! <i class="fa fa-arrow-right"></i></a>
  </div>
</section>

<section class="partition par2">
  <div class="all">
    <h1>Twinkle</h1>
    <h3>with a hint of Fairy Dust!</h3>
    <a href="#">More Sparkle! <i class="fa fa-arrow-right"></i></a>
  </div>
</section>

<section class="partition par3">
  <div class="all">
    <h1>Shine</h1>
    <h3>with a hint of Fairy Dust!</h3>
    <a href="#">More Sparkle! <i class="fa fa-arrow-right"></i></a>
  </div>
</section>

<div id="navi">
  <ul>
    <!--<li class="active"></li>-->
  </ul>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
  background: #000;
}
html, body * {
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}

h1 {
  font-size: 48px;
  font-weight: 300;
  text-transform: uppercase;
  padding: 15px 0;
  color: #fff;
}
h3 {
  font-size: 28px;
  font-weight: 300;
  padding: 10px 0;
  color: #fff;
  opacity: 0.5;
}
a {
  text-decoration: none;
  font-size: 14px;
  color: #FF8A16;
}
.all {
  position: absolute;
}
.partition {
  width: 100%;
  padding: 25px;
  text-align: center;
  background: #C01921;
  position: relative;
  transition: all 0.8s ease-in-out;
}
.partition a {
  display: block;
  width: 50%;
  margin: 15px auto;
  padding: 15px 22px;
  background: #FF8A16;
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #C01921/*, inset 0 -5px 10px rgba(192,25,33,0.2)*/;
  transition: all 0.5s;
}
.partition a i {
  font-size: 14px;
  float: right;
  
  opacity: 0;
  transition: all 0.5s;
}
.partition a:hover {
  padding: 15px 90px 15px 25px;
  color: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(255,255,255,0), inset -55px 0 0 rgba(192,25,33,0.2);
}
.partition a:hover i {
  margin-right: -65px;
  opacity: 1;
  color: #fff;
}
.partition a:active {
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 1px #C01921,inset -55px 0 0 rgba(255,255,255,0.1);
  transition: all 0.1s;
}
.partition:nth-child(even) {
  background: url(http://web.physics.ucsb.edu/~androo/rw_common/themes/i_con/images/seamless-leather.png) #666 fixed;
}
.partition:nth-child(even) h1 {
  color: #fff;
}
.partition:nth-child(even) h3 {
  color: #666;
  opacity: 1;
}

#navi {
  position: fixed;
  top: 0;
  color: #fff;
  z-index: 5;
}
#navi li {
  width: 10px;
  height: 10px;
  margin: 8px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.2;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
#navi li:hover {
  background: #000;
}
#navi li.active {
  opacity: 0.8;
  border-bottom: 1px solid #000;
}

var $act, $all, tot, $navi, navTot;
function setStuff(varia) {
  $act = $(window).height();
  $all = $('.all').height();
  $navi = $('#navi').height();
  
  tot = ($act - $all) / 2;
  navTot = ($act - $navi) / 2;
  
  console.log($act, $all, tot, $navi, navTot);
  
  $('.partition').css('height',$act);
  $('.all').css({
    top: tot,
    width: $('.partition').innerWidth() - 50
  });
  $('#navi').css('top',navTot);
}


setStuff($act);
$(window).resize(function() {
  $act = $(window).height();
  setStuff($act)
});


console.log($('body').scrollTop(),$('.par2').offset().top );

$(window).scroll(function() {
  if($(window).scrollTop() <= ($('.par1 a').offset().top)) {
    $('section').removeClass('active');
    $('.par1').addClass('active');
    $('.par1').css('opacity',1);
    $('section').not('.par1').css('opacity',0.5);
  }
  
  if($(window).scrollTop() >= ($('.par1 a').offset().top) && $(window).scrollTop() <= ($('.par2 a').offset().top)) {
    $('section.par2').addClass('active');
    $('.par2').css('opacity',1);
    $('section').not('.par2').css('opacity',0.5);
  }
  if($(window).scrollTop() >= ($('.par2 a').offset().top)) {
    $('section').removeClass('active');
    $('.par2').addClass('active');
    $('.par3').css('opacity',1);
    $('section').not('.par3').css('opacity',0.5);
  }
});

//Navigation
var $naviBtn = $('section.partition').size();
var title, idNum, idName;
for (var i = 0; i < $naviBtn; i++) {
  title = $('.par' + (i+1)).find('h1').text();
  $('#navi ul').append('<li id="to_'+ (i + 1) +'" title="' + title + '"></li>');
}
$('#navi li').eq(0).addClass('active');
$('li[id^="to"]').click(function() {
  idNum = $(this).attr('id').split('_');
  idName = ".par" + idNum[1]
  console.log(idNum[1], idName);
  $('body').scrollTo(idName,'slow');
  
  $('#navi li').removeClass('active');
  $(this).addClass('active');
});


//preventing anchor click :P
$('a').click(function(e) {
  e.preventDefault();
});