// these are labels for the days of the week
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

// these are human-readable month name labels, in order
cal_months_labels = ['January', 'February', 'March', 'April',
                     'May', 'June', 'July', 'August', 'September',
                     'October', 'November', 'December'];

// these are the days of the week for each month, in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// this is the current date
cal_current_date = new Date(); 

function Calendar() {
	
  this.month = cal_current_date.getMonth();
  this.year  = cal_current_date.getFullYear();
  this.html = '';
  this.events = '';
  this.colors = new Object();
  this.colors.Evenement = "yellow";
  this.colors.Chiro = "green";
  this.colors.Geen_chiro = "red";
  this.items = new Object();
}

function InitCalendar(events)
{
	var cal = new Calendar();
	cal.events = events;
	cal.generateHTML(0);
	$("#calendarWidget").html(cal.getHTML());
	$(".calendarRight").click(function(){UpdateCalendar(1, cal);});
	$(".calendarLeft").click(function(){UpdateCalendar(-1, cal);});
	cal.fill_calendar();
}

function UpdateCalendar(month, cal)
{
	cal.generateHTML(month);
	$("#calendarWidget").html(cal.getHTML());
	$(".calendarRight").click(function(){UpdateCalendar(month+1, cal);});
	$(".calendarLeft").click(function(){UpdateCalendar(month-1, cal);});
	cal.fill_calendar();
}

Calendar.prototype.generateHTML = function(mon){
	
	y = 0;
	if(this.month+mon >= 12)
	{
		mon += -12;
		y++;
	}
	if(this.month+mon < 0)
	{
		mon += 12;
		y--;
	}
  // get first day of month
  var firstDay = new Date(parseInt(this.year)+y, this.month+mon, 1);
  
  var startingDay = firstDay.getDay();
  
  // find number of days in month
  var monthLength = cal_days_in_month[this.month+mon];
  
  // compensate for leap year
  if (this.month+mon == 1) { // February only!
    if(((this.year+y) % 4 == 0 && (this.year+y) % 100 != 0) || (this.year+y) % 400 == 0){
      monthLength = 29;
    }
  }
  
  // do the header
  var monthName = cal_months_labels[this.month+mon];
  var html = '<div class="calendarScroll"><div class="calendarLeft"></div></div>';
  html += '<div class="calendarHeader">';
  html +=  monthName + "&nbsp;";
  html += this.year+y;
  html += '</div>';
  html += '<div class="calendarScroll"><div class="calendarRight"></div></div>';
  for(var i = 0; i <= 6; i++ ){
    html += '<div class="calendarDayLabel">';
    html += cal_days_labels[i];
    html += '</div>';
  }

  // fill in the days
  var day = 1;
  var day2 = 1;
  // this loop is for is weeks (rows)
  for (var i = 0; i < 6; i++) {
    // this loop is for weekdays (cells)
    for (var j = 0; j <= 6; j++) { 
      
      if (day <= monthLength && (i > 0 || j >= startingDay)) {
    	  num_year = this.year+y;
    	  num_month = this.month+mon+1;
    	  dat = ""+day+num_month+num_year;
    	  html += '<div class="calendarDay" id="'+dat+'">';
        html += day;
        day++;
      }
      else
      {
    	  html += '<div class="calendarDay2">';
      }
      html += '</div>';
    }
  }
  html+='<div id="infocontainer"></div>';
  this.html = html;
};

Calendar.prototype.getHTML = function() 
{
  return this.html;
};

Calendar.prototype.fill_calendar = function()
{
	for(evt in this.events)
	{
		evnt = this.events[evt];
		if($("#"+evnt.date).length)
		{
			$("#"+evnt.date).css("background", this.colors[evnt.calendar_type]);
			
			if(evnt.calendar_type == "Chiro")
			{
				html = "<div class='calendarInfo'>";
				html += '<div class="shoutitem">Speelclub: '+evnt.speelclub+'</div>';
				html += '<div class="shoutitem">Rakkers: '+evnt.rakkers+'</div>';
				html += '<div class="shoutitem">Toppers: '+evnt.toppers+'</div>';
				html += '<div class="shoutitem">Kerels: '+evnt.kerels+'</div>';
				html += '<div class="shoutitem">Aspi\'s: '+evnt.aspis+'</div></div>';
				
				$("#"+evnt.date).data("key", html);
			}
			else
			{
				//item = "this.items.e"+evnt.date;
				
				//alert(item);
				//eval(item + ' = <div class="calendarInfo">'+evnt.data+'</div>');
				$("#"+evnt.date).data("key", '<div class="calendarInfo">info: '+evnt.data+'</div>');
			}
			
			$("#"+evnt.date).mouseover(function(event){
				$("#infocontainer").html($("#"+event.target.id).data("key"));
			});
			
			$("#"+evnt.date).mouseout(function(event){
				$("#infocontainer").html("");
			});
		}
	}
};