<h1>Stairway Nav</h1>

<div>
  <h2>One Step</h2> 
  <nav id="example-one">
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
  </nav>  
</div>

<div>
   <h2>Two Step</h2>
  <nav id="example-two"> 
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
  </nav>
</div>

<div>
   <h2>Three Steps</h2>
  <nav id="example-three"> 
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
  </nav>
</div>

<div>
  <h2>Four Steps</h2>
  <nav id="example-four">
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
  </nav>
</div>

@import "compass/css3";

$exampleOneColor: #f06d06;
#example-one {
  background: $exampleOneColor;
  .active-1 {
    background: lighten($exampleOneColor, 15%);
  }
}

$exampleTwoColor: #0dacc4;
#example-two {
  background: $exampleTwoColor;
  .active-1 {
    background: lighten($exampleTwoColor, 19%);
  }
  .active-2 {
    background: lighten($exampleTwoColor, 8%);
  }
}

$exampleThreeColor: #1acd0d;
#example-three {
  background: $exampleThreeColor;
  .active-1 {
    background: lighten($exampleThreeColor, 15%);
  }
  .active-2 {
    background: lighten($exampleThreeColor, 10%);
  }
  .active-3 {
    background: lighten($exampleThreeColor, 5%);
  }
}


$exampleFourColor: #666; 
#example-four {
  background: $exampleFourColor;
  .active-1 {
    background: lighten($exampleFourColor, 20%);
  }
  .active-2 {
    background: lighten($exampleFourColor, 15%);
  }
  .active-3 {
    background: lighten($exampleFourColor, 10%);
  }
  .active-4 {
    background: lighten($exampleFourColor, 5%);
  }
}

nav {
  @include transform(translate3d(0, 0, 0));
  a {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
    position: relative;
    @include transition(all 0.2s ease);
    &.active-1 {
      @include transform(
        scale(1.10)
        translateX(24px)
      );
      box-shadow: 0 0 10px rgba(black, 0.75);
      z-index: 3;
    }
    &.active-2 {
      @include transform(
        scale(1.07)
        translateX(12px)
      );
      box-shadow: 0 0 10px rgba(black, 0.5);
      z-index: 2;
    }
    &.active-3 {
      @include transform(
        scale(1.04)
        translateX(4px)
      );
      z-index: 1;
    }
    &.active-4 {
      @include transform(
        scale(1.01)
        translateX(2px)
      );
      z-index: 1;
    }
  }
}

body { 
  background: #222;
  color: white;
  padding: 20px;
}
body > div {
  width: 20%;
  float: left;
  margin-right: 5%;
}
h1 {
  font-size: 36px;
  margin: 0 0 10px 0;
}
h2 {
  margin: 0 0 10px 0; 
}

$.fn.stairwayNav = function(options) {
  
  var defaults = {
     stairs: 3
  };
  this.options = $.extend({}, defaults, options);
  var stairs = this.options.stairs;
    
  var allLinks = this.find("a");
    
  allLinks
    .mouseenter(function() {
      $(this).addClass("active-1");
      var index = $(this).index(), i, bef, aft;
      for(i = 1; i < stairs; i++) {
        
        bef = index - i;
        aft = index + i;
       
        allLinks.eq(aft).addClass("active-" + (i+1));
        if (bef > 0) {
          allLinks.eq(bef).addClass("active-" + (i+1));
        }
      }   
    })
    .mouseleave(function() {
      allLinks.removeClass("active-1 active-2 active-3 active-4");
    });
  return this;
};

$("#example-one").stairwayNav({
  stairs: 1
});

$("#example-two").stairwayNav({
  stairs: 2
});

$("#example-three").stairwayNav({
  // Default is 3
});

$("#example-four").stairwayNav({
  stairs: 4  
});