<article class="page">
  <h1>Timeline</h1>
  
  <h2>Vertical timeline</h2>
  <ul class="timeline">
    <li class="timeline-milestone is-completed timeline-start">
      <div class="timeline-action">
        <h2 class="title">Begin</h2>
        <span class="date">First quarter 2013</span>
        <div class="content">
          We will have a small kickoff
        </div>
      </div>
    </li>
    <li class="timeline-milestone is-current">
      <div class="timeline-action is-expandable expanded">
        <h2 class="title">Initial planning</h2>
        <span class="date">Second quarter 2013</span>
        <div class="content">
          <ul class="file-list">
            <li><a href="example/video" class="video-link">Introduction video</a></li>
            <li><a href="example.pdf">Project Plan, pdf 2,8 MB</a></li>
            <li><a href="example.pdf">Requirements, pdf 5,3 MB</a></li>
            <li><a href="example.pdf">Test Plan, pdf 7,6 MB</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="timeline-milestone is-future">
      <div class="timeline-action is-expandable">
        <h2 class="title">Start construction</h2>
        <span class="date">Fourth quarter 2013</span>
        <div class="content">
          
        </div>
      </div>
    </li>
    <li class="timeline-milestone is-future timeline-end">
      <div class="timeline-action">
        <h2 class="title">Test and verify</h2>
        <span class="date">Second quarter 2014</span>
        <div class="content">
          
        </div>
      </div>
    </li>
  </ul>
</article>

@import "compass/css3";

$timeline-color: #00637d;
$timeline-future-color: #8DACB8;
$timeline-line-width: 2px;
$timeline-size: 32px;

.timeline {
  list-style: none;
  margin: 25px 0 22px; padding: 0;
  position: relative;
  @include box-sizing(border-box);
  
  &:after {
    border: 6px solid;
    border-top-width: 13px;
    border-color: $timeline-color transparent transparent transparent;
    content: "";
    display: block;
    position: absolute; bottom: -19px; left: 15px;
  }
}

.timeline-horizontal {
  &:after {
    border-top-width: 6px;
    border-left-width: 13px;
    border-color: transparent transparent transparent $timeline-color;
    top: 15px; right: 0; bottom: auto; left: auto;
  }
  
  .timeline-milestone {
    border-top: $timeline-line-width solid $timeline-color;
    display: inline;
    float: left;
    margin: 20px 0 0 0; padding: 40px 0 0 0;
  
    &:before {
      top: -(($timeline-line-width / 2) + ($timeline-size / 2)); left: auto;
    }

    &.is-completed {
      &:after {
        top: -(($timeline-line-width / 2) + ($timeline-size / 2)); left: 0;
      }
    }
  }
}

.timeline-milestone {
  border-left: $timeline-line-width solid $timeline-color;
  margin: 0 0 0 20px; padding: 0 0 5px 25px;
  position: relative;
  @include box-sizing(border-box);
    
  &:before {
    border: ($timeline-line-width * 3.5) solid $timeline-color; border-radius: 50%;
    content: "";
    display: block;
    position: absolute; left: -(($timeline-line-width / 2) + ($timeline-size / 2));
    width: $timeline-size; height: $timeline-size;
    @include box-sizing(border-box);
  }
    
  &.is-completed {
    &:before {
      background-color: $timeline-color;
    }
      
    &:after {
      color: #FFF;
      content: "\f00c";
      display: block;
      font-family: "FontAwesome";
      line-height: $timeline-size;
      position: absolute; top: 0; left: -(($timeline-line-width / 2) + ($timeline-size / 2));
      text-align: center;
      width: $timeline-size; height: $timeline-size;
      @include box-sizing(border-box);
    }
  }
    
  &.is-current {
    &:before {
      background-color: #EEE;
    }
  }

  &.is-future {
    &:before {
      background-color: $timeline-future-color;
      border: 0;
    }
      
    .timeline-action .title {
      color: $timeline-future-color;
    }
  }
}

.timeline-action {
  background-color: #FFF;
  padding: 12px 10px 12px 20px;
  position: relative; top: -15px;
    
  &.is-expandable {
    .title {
      cursor: pointer;
      position: relative;
        
      &:focus {
        outline: 0;
        text-decoration: underline;
      }
        
      &:after {
        border: 6px solid #666;
        border-color: transparent transparent transparent #666;
        content: "";
        display: block;
        position: absolute; top: 6px; right: 0;
      }
    }
      
    .content { display: none; }
      
    &.is-expanded {
      .title:after {
        border-color: #666 transparent transparent transparent;
        top: 10px; right: 5px;
      }
        
      .content { display: block; } 
    }
  }
    
  .title, .content {
    word-wrap: break-word; 
  }
    
  .title {
    color: $timeline-color;
    font-size: 18px;
    margin: 0;
  }
    
  .date {
    display: block;
    font-size: 14px;
    margin-bottom: 15px;
  }
    
  .content {
    font-size: 14px;
  }
}

.file-list {
  line-height: 1.4;
  list-style: none;
  padding-left: 10px;
}

// Just for presentation
body {
 background-color: #EEE;
 font-family: Helvetica, Arial, Verdana, sans-serif;
}

.page {
  max-width: 1200px;
  margin: 40px 30px;
}

a {
  color: #00637d;
  text-decoration: none;
  &:hover, &:focus { text-decoration: underline; }
}

.video-link:before {
  content: "\f03d";
  display: inline-block;
  font-family: "FontAwesome";
  margin-right: 5px;
}

a[href*=".pdf"]:before {
  content: "\f0f6";
  display: inline-block;
  font-family: "FontAwesome";
  margin-right: 8px;
}

$(document).ready(function() {
  $timelineExpandableTitle = $('.timeline-action.is-expandable .title');
  
  $($timelineExpandableTitle).attr('tabindex', '0');
  
  // Give timelines ID's
  $('.timeline').each(function(i, $timeline) {
    var $timelineActions = $($timeline).find('.timeline-action.is-expandable');
    
    $($timelineActions).each(function(j, $timelineAction) {
      var $milestoneContent = $($timelineAction).find('.content');
      
      $($milestoneContent).attr('id', 'timeline-' + i + '-milestone-content-' + j).attr('role', 'region');
      $($milestoneContent).attr('aria-expanded', $($timelineAction).hasClass('expanded'));
      
      $($timelineAction).find('.title').attr('aria-controls', 'timeline-' + i + '-milestone-content-' + j);
    });
  });
  
  $($timelineExpandableTitle).click(function() {
    $(this).parent().toggleClass('is-expanded');
    $(this).siblings('.content').attr('aria-expanded', $(this).parent().hasClass('is-expanded'));
  });
  
  // Expand or navigate back and forth between sections
  $($timelineExpandableTitle).keyup(function(e) {
    if (e.which == 13){ //Enter key pressed
      $(this).click();
    } else if (e.which == 37 ||e.which == 38) { // Left or Up
      $(this).closest('.timeline-milestone').prev('.timeline-milestone').find('.timeline-action .title').focus();
    } else if (e.which == 39 ||e.which == 40) { // Right or Down
      $(this).closest('.timeline-milestone').next('.timeline-milestone').find('.timeline-action .title').focus();
    }
  });
});