Signage: Mentor availability

sign_mentors

 
<style TYPE="text/css">
  
  body  {
    background-color: black;
    color: #ffffff;
    font-size: 180%;
    font-family: 'Josefin Slab', serif;
    background-image: url('http://mentoring.devbootcamp.com/assets/heart.png'); 
    background-repeat: no-repeat; 
    background-position: 95% 95%;
  }
 
  a   {text-decoration: none; color: yellow; }
  li  {  }
  h1  { font-size: 2.3em; line-height: 60%; margin: 0 0 20px 0; padding: 0px; color: #ffffff; font-weight: 600; }
  h2  { font-size: 1.5em; line-height: 1em; margin:0; color: #999999; font-family: Varela Round, Helvetica, Arial; font-weight: 100; text-transform: none;}
  ul  { list-style-type: none; padding: 0px;margin: 0px; }
 
  .bottom-of-header {margin-bottom: 80px;}
  #availabilities {font-size: 4em; line-height: 1.15em; font-weight: 400; }
  #main { margin: 0 50px 0 50px; }

</style>
 
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<script>
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
function prettyDate(n) {
  if (n == 1 || n == 21 || n == 31) {
    return n + "st";
  } else if (n == 2 || n == 22) {
    return n + "nd";
  } else if (n == 3 || n == 23) {
    return n + "rd";  
  } else {
    return n + "th";
  }
}
 
function buildItem(availability, index) {
  var date = new Date(availability.start_time);
  return "<li id='a"+ index +"'>"+
    availability.mentor_name + " aka @" + availability.mentor_url +
    " on " +
    weekdays[date.getDay()] +
    " the " +
    prettyDate(date.getDate()) +
    "</li>";
}
 
function createRotater(data) {
  var count = 0;
  return function() {
    $("li").hide();
    // alert("what")
    // $("#a" + count).show();
    $("#a" + count).toggle("drop");
    
    count++;
    if (count == data.length) {
      count = 0;
    }
  }
}
 
$.ajax({
    url: "http://mentoring.devbootcamp.com/availabilities.json?callback=whatever",
    jsonpCallback: "whatever",
    dataType: "jsonp"
}).done(function(data){
    $(data).each(function(index, availability) {
      $("#availabilities").append(buildItem(availability, index));
    });
 
    var rotater = createRotater(data);
    rotater();
    setInterval(rotater, 30000);
})
</script>
 
 
<div id="main"> 
  <h1>Here are some people ready to mentor you.</h1> 
  <h2 class="bottom-of-header">Sign up at <a href="http://mentoring.devbootcamp.com">mentoring.devbootcamp.com</a></h2>
  <ul id="availabilities"></ul>
</div>