var width = 960, height = 650;
var dayWidth = (width - 20) / 7;
var dayHeight = (height - 65) / 5;
var weekdays = ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"];
var months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + ((width - dayWidth * 7)/2) + ", " + ((height - dayHeight * 5)/1.1) + ")");

var data = [];

var d = new Date();
getMonthData(d.getFullYear(), d.getMonth()+1);

function getMonthData(year, month_number) {

  var firstDay = new Date(year, month_number-1, 1);
  var lastDay = new Date(year, month_number, 0);
  
  var fday = (firstDay.getDay() === 0) ? 7 : firstDay.getDay();
  var lday = String(lastDay).split(" ")[2];
  
  var nDays = parseInt(lday,0) + fday;
  
  for(i = 1; i <= nDays; i++) {
    if (i < fday /*|| i >= nDays*/)
      data.push("");
    else if (i < nDays) {
        data.push(i-fday+1); 
    }
  }
}

draw = function() {
  
  /* Month and Year
  */
  svg.append('text').text(months[d.getMonth()] + " " + d.getFullYear()).attr('y', - 30).attr('class', 'monthYear');
  
  /* Top week days header
  */
  var header = svg.selectAll('.headerDay')
    .data(weekdays)
      .enter().append('g')
    .append('text')
    .attr('class', 'headerDay')
    .attr('x', function(d, i) {
      return i * dayWidth;
    })
    .attr('y', - 4)
    .text(function(d) {
      return d.substring(0,3);
    });
  
  /* 
  */
  var day = svg.selectAll('.day')
    .data(data);
  
  var calendar = day.enter().append('g');
  
  calendar.append('rect')
    .attr('class', 'day')
    .attr('width', dayWidth)
    .attr('height', dayHeight)
    .attr('x', function(d, i) {
      return (i % 7) * dayWidth;
    })
    .attr('y', function(d, i) {
      return Math.floor(i / 7) * dayHeight;
    })
    .attr('fill', function(d, i) {
      return ([5,6,12,13,19,20,26,27,33,34].indexOf(i) > -1 && d !== "") ? "#bbbbbb" : "#fff";
    })
    .attr('stroke', '#303030')
    .attr('stroke-width', function(d) {
      return (d !== "") ? 1 : 0;
    });
  
  calendar.append('text')
    .attr('class', 'dayNumber')
    .text(function(d) {return d;})
    .attr('x', function(d, i) {
      return (i % 7) * dayWidth + 3;
    })
    .attr('y', function(d, i) {
      return Math.floor(i / 7) * dayHeight + 20;
    }); 
};

draw();