$(document).ready(function(){
  
  // Append the tooltip
  
  $("body").append("<div id='#tooltip'></div>");
  
  // Pull .date out and put right before article
  $("#timeline .article .date").each(function(){

    // Assign the parents' class to the date
    // And clear the former parents' class
 
    $(this).addClass($(this).parents(".article").attr("class"));
    $(this).removeClass("article");
    $(this).parents(".article").removeClass("featured");
    $(this).parents(".article").removeClass("current");
    
    $(this).insertBefore($(this).parents(".article"));
    
  });
  
	// total timeline scale
  scale = monthsBetween("January 1, 2008", "");
  months_to_show = 6 // how many months to show at once
	increment = months_to_show - 1;
  
  // get the date for the current article
  var a_date = $("#timeline .current").text();
  a_date = new Date(a_date);
  
  // update the cached today div with the current date
  
  // set the current panel
  if(a_date){
    panel = monthsBetween("January 1, 2008", a_date) - 2;
  } else {
    panel = scale;
  }
  
  if (panel < 1){
    panel = 1;
  }
  
  if (panel > (scale - increment - .5)){
    panel = scale - increment - .5;
  }
  
  // resize the timeline to fit the window width
  resizeTimeline();

  $(window).resize(function(){
    resizeTimeline();
  });

	$("#right a").click(function(){

	  panel += increment;
		if (panel > (scale - increment - .5)){
      panel = scale - increment - .5;
    }
 	  $("#timeline").animate({ left: (1-panel) * cellsize }, {duration: 1000, easing: "easeOutQuart"});

		return false;
	});

	$("#left a").click(function(){

		panel -= increment;
		if (panel < 1){
			panel = 1;
    }
		$("#timeline").animate({ left: (1-panel) * cellsize}, {duration: 1000, easing: "easeOutQuart"});

		return false;
	});

});

function daysInMonth(month, year){
  return 32 - new Date(month, year, 32).getDate(); //overflow days and subtract from 32
}

function monthsBetween(start, end){
  start = new Date(start);
  if (end == ""){
    end = new Date();
  }
  else{
    end = new Date(end);
  }
 
  end_date = end.getDate();
  end_year = end.getFullYear();
  end_month = end.getMonth() + 1; // Add 1 since months are 0-11

  start_date = start.getDate();
  start_year = start.getFullYear();
  start_month = start.getMonth() + 1; // Add 1 since months are 0-11

  if (end_month >= start_month){
    width = (end_year - start_year) * 12 + (end_month - start_month);
    if (end_date < start_date){
      width -= 1;
    }
  }
  return width;
}

function offsetDate(element){
  // figure out where in the current month the article date lies and assign to offset
  if(element.className == "date"){
    var article_date = new Date();
  } else {
    var article_date = element.text();
    article_date = new Date(article_date);
  }

  var article_days = article_date.getDate();
  var article_month = article_date.getMonth() + 1;
  var article_year = article_date.getYear();
  
  var ratio = article_days / daysInMonth(article_month, article_year);
  
  if (ratio <= 1/28)
    var offset = -10;
  else
    var offset = ratio * (cellsize - 15) - 20;
  
  // offset by calculated position
  element.css('left',offset);  
}

function resizeTimeline(){
  
  // how wide each month is
	cellsize = ($(window).width() - 60) / months_to_show;

	$("#timeline").width(scale*cellsize);
  
  // offset the current article but don't do the tooltip
  offsetDate($("#timeline .current"));

  // for every other article, do the tooltip
  $("#timeline .date").not(".current").each(function (){
    
    offsetDate($(this));
    offsetDate($(".today"));
    
    // when hovering mouse over the button
    $(this).hover(function (e){
      
      // offset for mouse hover article preview
    	var offsetY = 40;
      var pos = $(this).offset();
      
      // if the position is on the second half of the screen
      if(pos.left / $(window).width() > .5){
        // flip offset
        var offsetX = -280;
      } else {
        var offsetX = -30;
      }
      
      // clear all tooltips
      $(".tooltip").remove();

      $("body").append("<div class='tooltip'></div>");
      
      // fade in the tooltip w/ repositioned arrow
      $(".tooltip:first").css("background-position", (offsetX * -1) + 1 + "px 1px").html($(this).next().html()).show().css("left",(pos.left + offsetX) + "px").animate({top: pos.top + offsetY, opacity: 0.95}, 300);
    }, function (){
      
      // fade out the tooltip
      $(".tooltip:first").animate({top: 60, opacity: 0.0}, 300);
    });
    
  });
  
  $("#wrapper #timeline").show();
  $("#controls li a").show();
  
  // otherwise align right timeline
	$("#timeline").css({left: (1 - panel) * cellsize});
  
  // set article month grid
  $("#timeline .article-month").width(Math.floor(cellsize) - 15);

}