function create_bubble(id, title) {
		$('.' + id).CreateBubblePopup({
		position: 'right',
		align: 'middle',
		closingDelay: 1000,
		innerHtml: title,
		innerHtmlStyle: {
			color:'#333333'
		},
						
		themeName: 	'azure',
		themePath: 	'/images/sito/jquery-bubblepopup'
		});
	}

	// giorni
	cal_days_labels = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];

	// mesi
	cal_months_labels = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];

	// giorni di ogni mese
	cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

	// data corrente
	cal_current_date = new Date(); 

	// array che contiene le classi dei div che devono avere il bubble (serve alla funzione create_bubble)
	bubbles = new Array();

	function Calendar(month, year) {
  		this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
  		this.year  = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
 	 	this.html = '';
	}

	Calendar.prototype.generateHTML = function() {
  		// ricava il primo giorno del mese
  		var firstDay = new Date(this.year, this.month, 1);
  		var startingDay;

  		if (firstDay.getDay() == 0) startingDay = 6;
  		else startingDay = firstDay.getDay() - 1;
  
  		// ricava il numero di giorni del mese
  		var monthLength = cal_days_in_month[this.month];
  
  		// anno bisestile
  		if (this.month == 1) {
    		if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
      		monthLength = 29;
    		}
  		}
  
  		// header del calendario
  		var monthName = cal_months_labels[this.month]
  		var html = '<table class="calendar-table">';
		html += '<tr><td><a href="#" onclick="prev(); return false;">&lt;</a></td>';
  		html += '<th colspan="7">';
 		html +=  monthName + "&nbsp;" + this.year;
  		html += '</th><td><a href="#" onclick="next(); return false;">&gt;</a></td>';
		html += '</tr>';
  		html += '<tr class="calendar-header">';

  		for(var i = 0; i <= 6; i++ ){
    		html += '<td class="calendar-header-day">';
    		html += cal_days_labels[i];
    		html += '</td>';
  		}
  		
		html += '</tr><tr>';

		// carica dalla input degli eventi solo gli eventi del mese/anno corrente
		var events_s = document.getElementById('events').value;
		
		if (events_s.length > 0) {
			var events = events_s.split('\n');
			var events_c = new Array();

			// toglie l'ultimo evento dall'array perché fasullo
			if (events.length > 1) events.pop();

			for (var i = 0; i < events.length; i++) {
				if (Number(events[i].split('#')[1].split('-')[0]) == Number(this.year) && Number(events[i].split('#')[1].split('-')[1]) == Number(this.month + 1)) {
					events_c.push(events[i]);
				}
			}
		}

  		// inserisce i giorni
  		var day = 1;

  		for (var i = 0; i < 9; i++) { // ciclo per le settimane (righe)
 			for (var j = 0; j <= 6; j++) { // ciclo per i giorni della settimana

				// cerca se per il giorno ci sono eventi. copia in un array quelli che trova
				var events_t = new Array();

				if (events_s.length > 0) {
					for (var n = 0; n < events_c.length; n++) {
						if (Number(events_c[n].split('#')[1].split('-')[2]) == day) events_t.push(events_c[n]);
					}
				}

				if (events_t.length == 0) { // se l'array è vuoto non ha trovato eventi
      					html += '<td class="calendar-day">';
				} else { // se ha trovato eventi visualizza i titoli
					var title = "<table style='text-align: left;'>";
					var different = false;
					var previous = -1;
					for (var n = 0; n < events_t.length; n++) {
						var u;

						if (Number(events_t[n].split('#')[0]) == 4) u = "Coro Out of Time";
						else u = "Comitato";

						if (!different && previous != -1 && Number(events_t[n].split('#')[0]) != previous) different = true;
						if (previous == -1) previous = Number(events_t[n].split('#')[0]);

						title += "<tr style='height: 20px;'><th>" + u + ":&nbsp;</th><td>" + events_t[n].split('#')[2] + "</td></tr>";
						
					}

					// gestione colori
					var color = "";
					if (events_t.length == 1 && events_t[0].split('#')[0] == 4) color = "blue";
					else if (events_t.length == 1) color = "red";
					else if (!different && events_t[0].split('#')[0] == 4) color = "blue";
					else if (!different && events_t[0].split('#')[0] != 4) color = "red";
					else color = "green";

					title += "</table>";

					html += '<td class="button' + day + '" style="color: ' + color + '; font-weight: bold; font-size: 14px; height: 20px; vertical-align: middle;">';
					bubbles.push(day + '#' + title);
				}
      
				if (day <= monthLength && (i > 0 || j >= startingDay)) {
        				html += day;
        				day++;
      				}
      				
				if (events_t.length == 0) {
					html += '</td>';
				} else {
					html += '</td>';
				}
    		}

    		// controlla se fermarsi
    		if (day > monthLength) {
      		break;
    		} else {
      		html += '</tr><tr style="height: 20px;">';
    		}
  		}

  		html += '</tr></table>';

  		this.html = html;
	}

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

	// crea il calendario in base a mese e anno
	// se mese o anno sono -1 lo crea guardando la data corrente
	function create_calendar(month, year) {
		var cal;
		if (month == -1 || year == -1) {
			cal = new Calendar(); // calendario in base alla data corrente

			// memorizza mese e anno nelle input
			d = new Date();
			document.getElementById('month').value = d.getMonth();
			document.getElementById('year').value = d.getFullYear();
		} else {
			cal = new Calendar(month, year); // calendario in base ai valori

			// memorizza mese e anno nelle input
			document.getElementById('month').value = month;
			document.getElementById('year').value = year;
		}

		cal.generateHTML(); // genera il calendario
		document.getElementById('calendar').innerHTML = cal.getHTML(); // aggiorna il div del calendario

		// crea tutte le bubble
		for (var i = 0; i < bubbles.length; i++) {
			create_bubble('button' + bubbles[i].split('#')[0], bubbles[i].split('#')[1]);
		}
	}

	// si sposta sul mese precedente
	function prev() {
		month = Number(document.getElementById('month').value);
		year = Number(document.getElementById('year').value);

		if (month == 0) {
			month = 11;
			year = year - 1;
		} else {
			month = month - 1;
		}

		create_calendar(month, year); // ricrea il calendario
	}

	// si sposta sul mese successivo
	function next() {
		month = Number(document.getElementById('month').value);
		year = Number(document.getElementById('year').value);

		if (month == 11) {
			month = 0;
			year = year + 1;
		} else {
			month = month + 1;
		}

		create_calendar(month, year); // ricrea il calendario
	}